@extends('layouts.webhome')
@section('content') 
    <style type="text/css">
        .body {
            /*width: 740px;*/
            padding: 5px;
            margin: auto;
            margin-top: 10px;
            border: 1px solid black;
            border-radius: 5px; 
            font-size: 14px; 
        }

        table {
            width: 100%;
            border: 1px solid black;
            margin-bottom: 10px;
            font-size: 12px;
            text-align: left;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px 5px;
            border: 1px solid black;
            text-align: left;
            text-transform: capitalize;
            
        }

        th {
            background-color: #f2f2f2;
        }

        .tab  { 
            text-align: center; 
        }
  
        .table-header {
            font-weight: bold;
            background-color: #f0f0f0;
        }

        .table-section {
            margin-top: 20px;
        }
    </style>
     <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up" style="background-color: aliceblue;">
        <div class="container mb-2">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">   ऑनलाइन वॉटर टैक्स भुगतान </h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="{{ route('index') }}">होम</a></li>
                                <li>  ऑनलाइन वॉटर टैक्स भुगतान </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shape__icon__2">
            <img loading="lazy" class="shape__icon__img shape__icon__img__2" src="{{ asset('assets/img/herobanner/herobanner__2.png')}}" alt="photo" />
            <img loading="lazy" class="shape__icon__img shape__icon__img__3" src="{{ asset('assets/img/herobanner/herobanner__3.png')}}" alt="photo" />
            <img loading="lazy" class="shape__icon__img shape__icon__img__4" src="{{ asset('assets/img/herobanner/herobanner__5.png')}}" alt="photo" />
        </div>
    </div>
    
    
    <div class="container mt-5">
        <div class="row">
            <div class="col-lg-12 mx-auto">
                <div class="card">
                    <div class="card-body">
                         <div  class="body"> 
                            <table>
    <tr>
        <th colspan="4" class="table-header">
            1. संपत्ति की सामान्य जानकारी <br>
            (General Property Information)
        </th>
    </tr>
    <tr>
        <td>
            संपत्ति का परिक्षेत्र <br>
            (Property Tax Zone)
        </td>
        <td><b>{{ $property->taxRateZone == 'Other' ? $property->taxRateZoneOther . ' (' . $property->taxRateZone . ')' : $property->tax_rate_zone->name }}</b></td>
        <td>
            वार्ड <br>
            (Ward)
        </td>
        <td><b>{{ $property->ward->name }}</b></td>
    </tr>
    <tr>
        <td>
            जी आई एस एवं पार्सल न० <br>
            (GIS & Parcel No.)
        </td>
        <td><b>{{ $property->parcelNo }}</b></td>
        <td>
            यूनिक आईडी <br>
            (Unique ID)
        </td>
        <td><b>{{ $property->nagarpalikaId }}</b></td>
    </tr>
    <tr>
        <td>
            संपत्ति संख्या <br>
            (Property Number)
        </td>
        <td><b>{{ $property->propertyNo }}</b></td>
        <td>
            बिजली बिल क्रमांक <br>
            (Electricity Bill Number)
        </td>
        <td><b>{{ $property->electricityId }}</b></td>
    </tr>
    <tr>
        <td>
            खसरा क्रमांक <br>
            (Khasra Number)
        </td>
        <td><b>{{ $property->khasraNo }}</b></td>
        <td>
            संपत्ति का प्रकार <br>
            (Property Type)
        </td>
        <td><b>{{ $property->propertyUse == 'Other' ? $property->propertyUseOther . ' (' . $property->propertyUse . ')' : $property->property_use->name }}</b></td>
    </tr>
</table>

<br>

<table>
    <tr>
        <th colspan="2" class="table-header">
            2. संपत्ति मालिक की जानकारी <br>
            (Property Owner Information)
        </th>
    </tr>
    <tr>
        <td colspan="2">
            <table style="width: 100%; margin-top: 10px;">
                <tr class="table-header">
                    <th>क्रमांक <br>(S. No.)</th>
                    <th>संपत्ति करदाता का नाम <br>(Property Taxpayer Name)</th>
                    <th>पिता/पति <br>(Father/Husband)</th>
                    <th>संपत्ति मालिक का मोबाइल नंबर <br>(Mobile Number)</th>
                    <th>ईमेल <br>(Email)</th>
                    <th>अतिरिक्त मोबाइल नंबर <br>(Alternate Mobile)</th>
                </tr>
                @foreach((is_array($property->ownerDetails)? $property->ownerDetails : json_decode($property->ownerDetails)) as $k => $owner)
                    <tr>
                        <td><b>{{ $k + 1 }}</b></td>
                        <td><b>{{ $owner->name ?? '-' }}</b></td>
                        <td><b>{{ $owner->fatherName ?? '-' }}</b></td>
                        <td><b>{{ $owner->mobile ?? '-' }}</b></td>
                        <td><b>{{ $owner->email ?? '-' }}</b></td>
                        <td><b>{{ $owner->secondaryPhone ?? '-' }}</b></td>
                    </tr>
                @endforeach
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            पता :- <br>(Address) <br>
            <b>{{ $property->houseNo }} {{ $property->streetNoName }} {{ $property->locality }} {{ $property->colony }} {{ $property->city }} {{ $property->pincode }}</b>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <b>
                निकाय में पंजीकृत संपत्ति कर क्रमांक, संपत्ति स्वामी का नाम तथा संपत्ति का क्षेत्रफल <br>
                (Registered Property Tax No., Owner Name, and Area)
            </b>
        </td>
    </tr>
    <tr>
        <td>
            संपत्ति का उपयोग (आवासीय / व्यावसायिक / दोनों ) <br>
            (Property Use – Residential / Commercial / Both) :- 
            <b>{{ $property->propertyUse=='Other'? $property->propertyOther.'('.$property->propertyUse .')'  : $property->property_use->name }}</b>
        </td>
        <td>
            निर्मित क्षेत्रफल <br>(Built-up Area) :- 
            <b>{{ $property->totalBuiltUpAreaSqFt }} SqFt / {{ $property->totalBuiltUpAreaSqMeter }} SqMeter</b>
        </td>
    </tr>
</table>

<br>

<table>
    <tr>
        <th colspan="4" class="table-header">
            3. सम्पत्ति कर गणना हेतु जानकारी <br>
            (Information for Property Tax Calculation)
        </th>
    </tr>
    <tr>
        <td>
            संपत्ति का स्वामित्व <br>
            (Ownership Type)
        </td>
        <td>
            <b>{{ $property->propertyOwnership == 'Other' ? $property->propertyOwnershipOther . ' (' . $property->propertyOwnership . ')' : $property->property_ownership->name }}</b>
        </td>
        <td>
            संपत्ति का स्थान (मुख्य मार्ग / मुख्य बाजार / अन्य) <br>
            (Property Location – Main Road / Market / Other)
        </td>
        <td>
            <b>{{ $property->roadType == 'Other' ? $property->roadTypeOther . ' (' . $property->roadType . ')' : $property->roadType }}</b>
        </td>
    </tr>
    <tr>
        <td>
            संपत्ति का उपयोग (किराये पर / स्वयं उपयोग / दोनों) <br>
            (Property Use – Rented / Self / Both)
        </td>
        <td>
            <b>{{ $property->propertyUse == 'Other' ? $property->propertyOther . ' (' . $property->propertyUse . ')' : $property->property_use->name }}</b>
        </td>
        <td>
            निर्माण का वर्ष <br>
            (Year of Construction)
        </td>
        <td>
            <b>{{ $property->yearOfConstruction == 'Other' ? $property->yearOfConstructionOther . ' (' . $property->yearOfConstruction . ')' : $property->year_of_construction->name }}</b>
        </td>
    </tr>
</table>

                            @php 
                                $floorData = json_decode($property->floorData);
                                if (!is_array($floorData)) {
                                    $floorData = json_decode($floorData);
                                }
                            
                                $plinth = []; $plinthSm = [];
                                if($property->propertyUse!=5)
                                {
                                    foreach ($floorData as $floor) {
                                        $type = $floor->floorType;
                                        $area = $floor->areaSqFt ?? 0;
                                        $areaSm = $floor->areaSqMt ?? 0;
                                
                                        if (!isset($plinth[$type])) {
                                            $plinth[$type] = 0;
                                            $plinthSm[$type] = 0;
                                        }
                                
                                        $plinth[$type] += $area;
                                        $plinthSm[$type] += $areaSm;
                                    }
                                }
                                
                                // ✅ Total plinth area
                                $totalPlinth = array_sum($plinth);
                                $totalPlinthSm = array_sum($plinthSm);
                            
                                // ✅ Format to two decimal places
                            //    echo "Total Plinth (SqFt): " . number_format($totalPlinth, 2) . "<br>";
                              //  echo "Total Plinth (SqMt): " . number_format($totalPlinthSm, 2);
                            
                                //print_r($plinth); 
                                //echo reset($plinth);
                                //echo reset($plinthSm);
                            @endphp
                           <table>
                            <tr>
                                <th colspan="4" class="table-header">
                                    4. संपत्ति के क्षेत्रफल की जानकारी <br>
                                    (Property Area Information)
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    भूमि / प्लाट का क्षेत्रफल <br>
                                    (Land / Plot Area) <br>
                                    (वर्ग फीट में / In SqFt)
                                </td>
                                <td>
                                    <b>{{ $property->plotAreaSqFt }} SqFt / {{ $property->plotAreaSqMeter }} SqMeter</b>
                                </td>
                                <td>
                                    प्लिथ क्षेत्रफल <br>
                                    (Plinth Area) <br>
                                    (वर्ग फीट में / In SqFt)
                                </td>
                                <td>
                                    <b>{{ reset($plinth) ?? $property->plinthAreaSqFt }} SqFt / {{ number_format(reset($plinthSm), 2) ?? $property->plinthAreaSqMeter }} SqMeter</b>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    संपत्ति का कुल निर्माण / निर्मित क्षेत्रफल <br>
                                    (Total Built-up Area)
                                </td>
                                <td>
                                    <b>{{ number_format($totalPlinth, 2) ?? $property->totalBuiltUpAreaSqFt }} SqFt / {{ number_format($totalPlinthSm, 2) ?? $property->totalBuiltUpAreaSqMeter }} SqMeter</b>
                                </td>
                                <td>
                                    Lat/Long <br>
                                    (Latitude / Longitude)
                                </td>
                                <td>
                                    <b>{{ $property->latitude }} / {{ $property->longitude }}</b>
                                </td>
                            </tr>
                        </table>

                            <!--<table>-->
                            <!--    <thead>-->
                            <!--        <tr>-->
                            <!--            <th>Floor Type</th>-->
                            <!--            <th>Area (Sq Ft)</th>-->
                            <!--            <th>Area (Sq Meter)</th>-->
                            <!--            <th>Usage Type</th>-->
                            <!--            <th>Usage Factor</th>-->
                            <!--            <th>Construction Type</th>-->
                            <!--        </tr>-->
                            <!--    </thead>-->
                            <!--    <tbody>-->
                            <!--            @foreach($property->floors as $floor)-->
                            <!--            <tr>-->
                            <!--                <td> {{ $floor->floorType=='Other'? $floor->floorTypeOther.'('.$floor->floorType .')'  : $floor->floor_type->name  }}</td> -->
                            <!--                <td> {{ $floor->usageType=='Other'? $floor->usageTypeOther.'('.$floor->usageType .')'  : $floor->usage_type->type_name  }}</td> -->
                            <!--                <td>{{ $floor->areaSqFt }} SqFt </td>  -->
                            <!--                <td>{{ $floor->areaSqMt }} SqM</td> -->
                            <!--                <td>{{ $floor->usageFactor=='Other'? $floor->usageFactorOther.'('.$floor->usageFactor .')'  : $floor->usage_factor->name  }}</td> -->
                            <!--                <td>{{ $floor->constructionType=='Other'? $floor->constructionTypeOther.'('.$floor->constructionType .')'  : $floor->construction_type->name }}</td> -->
                            <!--            </tr>-->
                            <!--        @endforeach-->
                            <!--    </tbody>-->
                            <!--</table>-->

                           <table class="tab">
                                <tr>
                                    <th class="tab" colspan="14">
                                        <b>संपत्ति के निर्मित क्षेत्रफल का विवरण <br> (Details of Constructed Area of Property)</b>
                                    </th>
                                </tr>
                                <tr>
                                    <th rowspan="3" class="tab">
                                        तल फ्लोर <br>
                                        (Floor)
                                    </th>
                                    <th colspan="4" class="tab">
                                        पक्का <br>
                                        (Permanent)
                                    </th>
                                    <th colspan="4" class="tab">
                                        आंशिक पक्का <br>
                                        (Partially Permanent)
                                    </th>
                                    <th colspan="4" class="tab">
                                        कच्चा <br>
                                        (Raw/Unfinished)
                                    </th>
                                    <th rowspan="3" class="tab">
                                        योग <br>
                                        (Total)
                                    </th>
                                </tr>
                                <tr>
                                    <th colspan="2" class="tab">
                                        आवासीय <br>
                                        (Residential)
                                    </th>
                                    <th colspan="2" class="tab">
                                        व्यावसायिक <br>
                                        (Commercial)
                                    </th>
                                    <th colspan="2" class="tab">
                                        आवासीय <br>
                                        (Residential)
                                    </th>
                                    <th colspan="2" class="tab">
                                        व्यावसायिक <br>
                                        (Commercial)
                                    </th>
                                    <th colspan="2" class="tab">
                                        आवासीय <br>
                                        (Residential)
                                    </th>
                                    <th colspan="2" class="tab">
                                        व्यावसायिक <br>
                                        (Commercial)
                                    </th>
                                </tr>
                                <tr>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th>
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th class="tab">
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th class="tab">
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th class="tab">
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th class="tab">
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                    <th class="tab">
                                        स्वयं के उपयोग में <br>
                                        (Self Use)
                                    </th>
                                    <th class="tab">
                                        किराये पर <br>
                                        (Rented)
                                    </th>
                                </tr>
 

                        
                                @php
                                    $tt = array_fill(1, 13, 0);
                                    $floorData = json_decode($property->floorData);
                                    if (!is_array($floorData)) $floorData = json_decode($floorData);
                                @endphp
                        
                                @foreach($floorData as $floor)
                                    @php
                                        $t = array_fill(1, 13, 0);
                                        $type = $floor->constructionType;
                                        $usage = $floor->usageType==1 ? 1:2;
                                        $factor = $floor->usageFactor;
                                        $area = $floor->areaSqFt;
                        
                                        $indexMap = [
                                            1   => [1 => [1 => 1, 2 => 2], 2 => [1 => 3, 2 => 4]], // पक्का
                                            2   => [1 => [1 => 5, 2 => 6], 2 => [1 => 7, 2 => 8]], // आंशिक पक्का
                                            3   => [1 => [1 => 9, 2 => 10], 2 => [1 => 11, 2 => 12]], // कच्चा
                                            'Other' => [1 => [1 => 5, 2 => 6], 2 => [1 => 7, 2 => 8]], // आंशिक पक्का
                                        ];
                                        if($property->propertyUse!=5)
                                        {
                                            $index = $indexMap[$type][$usage][$factor];
                                            $t[$index] = $area;
                                            $tt[$index] += $area;
                                        }
                                        $t[13] = array_sum($t);
                                        $tt[13] += $t[13];
                                    @endphp
                                    <tr>
                                        <td class="tab"> 
                                            @if($property->propertyUse!=5)
                                            {{ $floor->floorType == 'Other' ? $floor->floorTypeOther . ' (' . $floor->floorType . ')' : floorType($floor->floorType, $floors) }}
                                            @else
                                            {{  $property->property_use->name }}
                                            @endif
                                        </td>
                                        @for($i = 1; $i <= 13; $i++)
                                            <td class="tab">{{ $t[$i] }}</td>
                                        @endfor
                                    </tr>
                                @endforeach
                                <tr>
                                    <th>योग</th>
                                    @for($i = 1; $i <= 13; $i++)
                                        <th class="tab">{{ $tt[$i] }}</th>
                                    @endfor
                                </tr>
                            </table>
                     
                    
                            <table>
                                <tr>
                                    <th colspan="2" class="table-header">5. जल आपूर्ति कनेक्शन</th>
                                </tr>
                                <tr>
                                    <td>नगर पंचायत द्वारा जल आपूर्ति कनेक्शन दिया गया है या नहीं</td>
                                    <td><b>{{ $property->isMuncipalWaterSupply  }}</b></td>
                                </tr>
                                @if($property->isMuncipalWaterSupply =='yes')
                                <tr>
                                    <td colspan="2"> 
                                        <table > 
                                            <tr  class="table-dark">
                                                <th>क्रमांक</th>
                                                <th>जल आपूर्ति कनेक्शन क्रमांक</th>
                                                <th> व् व्यास</th>   
                                            </tr> 
                                            @foreach((is_array($property->waterConnectionId)? $property->waterConnectionId : json_decode($property->waterConnectionId)) as $k=>$connection)
                                            <tr> 
                                                <td>{{ $k+1 }}</td>
                                                <td>{{ $connection->id ?? '' }}</td>
                                                <td> @if($connection->connectionType=='Other')?
                                                    {{ $connection->connectionTypeOther.'('.$connection->connectionType .')' }} 
                                                    @else
                                                        @foreach(usageType() as $usageType ) 
                                                            @if($usageType->id==$connection->connectionType) 
                                                                {{ $usageType->type_name}}
                                                            @endif 
                                                        @endforeach
                                                    @endif  
                                                </td> 
                                            </tr> 
                                            @endforeach  
                                        </table>
                                    </td>
                                </tr>
                                @endif
                                <tr>
                                    <td>जल आपूर्ति कनेक्शन के उपयोग के प्रकार एवं शुल्क</td>
                                    <td><b>{{ $property->isMuncipalWasteService }} - {{ $property->isMuncipalWasteService }}</b></td>
                                </tr>
                            </table>  
                            <table>
                                <tr>
                                    <th colspan="4" class="table-header" style="text-align: center; padding: 20px;">
                                        <div class="row mb-2">  
                                            <input type="hidden" name="property_id" id="property_id" class="form-control" value="{{ $property->nagarpalikaId }}" placeholder="Enter Property No" > 
                                            <div class="col-md-2">  
                                                <label>Select Tax Start Year </label>
                                                <select  name="startDate" id="startDate" class="form-select">
                                                    <option value="">Select tax Start year </option> 
                                                </select> 
                                            </div>
                                            <div class="col-md-2">  
                                                <label>Select Tax End Year </label>
                                                <select  name="endDate" id="endDate" class="form-select">
                                                    <option value="">Select tax End year</option> 
                                                </select>   
                                            </div>
                                            <div class="col-md-2"> 
                                                 <label>&nbsp; </label>
                                                <input type="submit" value="Search" class="btn btn-primary" onclick="loadS()">
                                            </div> 
                                            
                                        </div>
                                        <div class="row mb-2">  
                                            <div id="surveyTableBody"></div> 
                                        </div> 
                                    </th>
                                </tr>
                            </table>
                             
                        </div>
          
                    </div>
                </div>
            </div>
    </div><br>
    </div>
 
@endsection
@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
 

 
<script>
    // Example years - you can populate this dynamically
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();  // 0 = January, 3 = April, etc.
const currentDay = currentDate.getDate();  // Get the current day of the month

// Determine the start year. If it's after March 31st, increment the year.
let count = 1
const valfix = 2023
 count = (currentMonth >= 3 || (currentMonth === 2 && currentDay > 31)) ? count + 1 : count;
   
    const years = Array.from({length: count}, (_, i) => valfix + i); // 2023 to 2029

    const startDate = document.getElementById('startDate');
    const endDate = document.getElementById('endDate');

    // Populate both dropdowns
    years.forEach(year => {
        const option1 = new Option(year, year);
        const option2 = new Option(year+1, year+1);
        startDate.add(option1);
        endDate.add(option2);
    });

    startDate.addEventListener('change', () => {
        const selectedStart = parseInt(startDate.value);
        
        // Clear current endDate options
        endDate.innerHTML = '<option value="">Select tax End year</option>';

        // Re-populate endDate with years >= selectedStart
        years.forEach(year => {
            if (!isNaN(selectedStart) && year >= selectedStart) {
                const option = new Option(year+1, year+1);
                endDate.add(option);
            }
        });
    });
</script>

<script>

    function loadS() 
    {
        event.preventDefault();  
        loadSurveys(1);
    }
//$(document).ready(function () {
    // Load surveys on page load
    //loadSurveys(1);

    // Function to load survey data via AJAX
    function loadSurveys(page) 
    {
        let nagarpalikaId = $("#property_id").val(); 
        let startDate = $("#startDate").val(); 
        let endDate = $("#endDate").val(); 
        if(startDate==='')
        {
            alert("Enter Start Year");
            return false;
        }
        if(endDate==='')
        {
            alert("Enter End Year");
            return false;
        }
        let year = (  endDate -startDate).toFixed(2);
    
        $.ajax({
            url: '{{ route("properties-tax-data") }}?page=' + page + '&nagarpalikaId=' + nagarpalikaId,  
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                let tableBody = $('#surveyTableBody');
                tableBody.empty(); 
    
                if (response.surveyForms.data.length === 0) 
                {
                    tableBody.html('<p>No survey record found.</p>');
                    return;
                }
    
                let survey = response.surveyForms.data[0]; // Get the first record
    
                let ownerDetails = (typeof survey.ownerDetails === 'string') 
                    ? JSON.parse(survey.ownerDetails)
                    : survey.ownerDetails;
    
                let ownerName = ownerDetails.length > 0 ? ownerDetails[0].name : 'N/A';
                let fatherName = ownerDetails.length > 0 ? ownerDetails[0].fatherName : 'N/A';
                let mobile = ownerDetails.length > 0 ? ownerDetails[0].mobile : 'N/A';
    
                const date = new Date(survey.created_at);
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: true
                };
                
                    let floorData = JSON.parse(survey.floorData);
                    if (!Array.isArray(floorData)) {
                        floorData = JSON.parse(floorData);
                    }
                    
                                        
                    const plinth = {};
                    const plinthSm = {};
                    
                    floorData.forEach(floor => 
                    {
                        const type = floor.floorType;
                        const area = parseFloat(floor.areaSqFt) || 0;
                        const areaSm = parseFloat(floor.areaSqMt) || 0;
                    
                        if (!plinth[type]) {
                            plinth[type] = 0;
                            plinthSm[type] = 0;
                        }
                    
                        plinth[type] += area;
                        plinthSm[type] += areaSm;
                    });
                    
                    // Get the first values
                    const firstPlinthValue = Object.values(plinth)[0];
                    const firstPlinthSmValue = Object.values(plinthSm)[0];
                    
                    console.log(firstPlinthValue);
                    console.log(firstPlinthSmValue);
                    
                    // ✅ Total plinth areas
                    const totalPlinth = Object.values(plinth).reduce((sum, val) => sum + val, 0);
                    const totalPlinthSm = Object.values(plinthSm).reduce((sum, val) => sum + val, 0);
                    
                    // ✅ Format to 2 decimal places
                    const totalPlinthFormatted = totalPlinth.toFixed(2);
                    const totalPlinthSmFormatted = totalPlinthSm.toFixed(2);
                    
                    function floorType(floorType, floors) {
                        const floorId = parseInt(floorType);
                        const floor = floors.find(f => f.id === floorId);
                        return floor ? floor.name : '-';
                    }
                    
                    function usageType(usageType, floorUsageType) {
                        const usageTypeId = parseInt(usageType);
                        const type = floorUsageType.find(t => t.id === usageTypeId);
                        return type ? type.type_name : '-';
                    }
                    
                    function usageFactors(usageFactor, usageFactors) {
                        const usageFactorId = parseInt(usageFactor);
                        const factor = usageFactors.find(f => f.id === usageFactorId);
                        return factor ? factor.name : '-';
                    }
                    
                    function yearOfConstructions(constructionType, yearOfConstructions) {
                        const constructionTypeId = parseInt(constructionType);
                        const type = yearOfConstructions.find(t => t.id === constructionTypeId);
                        return type ? type.name : '-';
                    }

                const formattedDate = date.toLocaleString('en-GB', options);
                let TotalAmount =0;
                let balance =0;
                let table =`<table class="table">
                                <tr>
                                    <td colspan="9" class="tab"> आयाम विवरण <br> Dimension Details </td>
                                </tr>
                                <tr class="text-center">
                                    <th class="tab">
                                        Usage type <br> (उपयोग प्रकार)
                                    </th>
                                    <th class="tab">
                                        Usage Factor <br> (उपयोग कारक)
                                    </th>
                                    <th class="tab">
                                        Floor <br> (तल)
                                    </th>
                                    <th class="tab">
                                        Construction <br> (निर्माण)
                                    </th>
                                    <th class="tab">
                                        Area <br> (क्षेत्रफल)
                                    </th>
                                    <th class="tab">
                                        Rate <br> (दर)
                                    </th>
                                    <th class="tab">
                                        ALV <br> (वार्षिक मूल्यांकन)
                                    </th>
                                   <!-- <th class="tab">
                                        Maintenance Dis. <br> (रखरखाव छूट)
                                    </th>-->
                                    <th class="tab">
                                        7 % TPV <br> (संपत्ति का  7% मूल्य)
                                    </th>
                                </tr>`;
                    
                    $.each(floorData, function (inIndex, floor) 
                    {
                        const rate = calculateRate(floor.constructionType, floor.usageType, floor.usageFactor, survey.taxRateZone);
                        const baseAmount = ((floor.areaSqFt * 80) / 100) * rate * 12;
                        const discount = (baseAmount * 7) / 100;
                        const finalAmount = discount; //baseAmount - discount;
                        TotalAmount += finalAmount;
                        //console.log(floor);
                        table +=`<tr> 
                                    <td class="tab">${ floor.floorType == 'Other' ? floor.floorType + '('+ floor.floorTypeOther+')'   : floorType(floor.floorType, response.floors) }</td> 
                                    <td class="tab">${ floor.usageType == 'Other' ? floor.usageType + '('+ floor.usageTypeOther+')'   : usageType(floor.usageType, response.floorUsageType) }</td>
                                    <td class="tab">${ floor.usageFactor == 'Other' ? floor.usageFactor + '('+ floor.usageFactorOther+')'   : usageFactors(floor.usageFactor, response.usagsFactors) }</td>
                                    <td class="tab">${ floor.constructionType == 'Other' ? floor.constructionType + '('+ floor.constructionTypeOther+')'   : yearOfConstructions(floor.constructionType , response.natureOfConstructionLists) }</td>
                                    <td class="tab">${floor.areaSqFt} SqFt / ${floor.areaSqMt} SqMt</td>
                                    <td class="tab">${rate}</td>
                                    <td class="tab">${baseAmount.toFixed(2)}</td>
                                    <!--<td class="tab">${discount.toFixed(2)}</td>-->
                                    <td class="tab">${finalAmount.toFixed(2)}</td>
                                </tr>`; 
                            });
                            table +=`<tr> 
                                            <td class="tab" colspan="7">Total Amount</td>  
                                            <td class="tab">${TotalAmount.toFixed(2)}</td>
                                        </tr>`; 
                            table +=`</table>`; 
                            table += ` 
                                <table class="table">
                                    <tr>
                                        <td colspan="6" class="text-center">
                                             Summary Ledger <br> (सारांश लेज़र)
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="tab">
                                            Year <br> (वर्ष)
                                        </th>
                                        <th class="tab">
                                            Demand <br> (मांग)
                                        </th>
                                        <th class="tab">
                                            Collection/Paid <br> (संग्रह/भुगतान)
                                        </th>
                                        <th class="tab">
                                            Cumulative Balance <br> (संचयी शेष)
                                        </th>
                                    </tr>
                                    `;
                                    let ledgerRows = '';
                                     
                                    for (let year = parseInt(startDate); year < parseInt(endDate); year++) {
                                    balance += TotalAmount;
                                    ledgerRows += `
                                        <tr class="text-center">
                                            <!-- Increment year correctly, parse year to integer before increment -->
                                            <td class="tab">${year}-${year + 1}</td> 
                                            <td class="tab">${ balance.toFixed(2) }</td>
                                            <td class="tab">-</td>
                                            <td class="tab">${balance.toFixed(2)}</td>
                                        </tr>
                                    `;
                                        
                                    }
                                table += `  
                                    ${ledgerRows}
                                    <!--<tr class="text-center">
                                        <td class="tab">${startDate}-${endDate}</td>
                                        <td class="tab">${(TotalAmount * year).toFixed(2)}</td>
                                        <td class="tab"> - </td>
                                        <td class="tab"> ${(TotalAmount * year).toFixed(2)} </td> 
                                    </tr>-->
                                </table>  
                `;
    
                // Set the HTML inside your container
               
                
                $.ajax({
                    url: 'https://app.npanandnagar.in/api/auth/initiate-tax-payment',
                    method: 'GET',
                    data: {
                        id: 12671,
                        purpose_of_payment: 'water-tax',
                        tax_year: '2023-2024',
                        amount: (TotalAmount * year).toFixed(2),
                        callbackUrl: 'https://app.npanandnagar.in/payment-response'
                    },
                    success: function(response) {
                       
                
                        // Example: Redirect to payment page with encrypted data
                        if (response.status && response.data.redirectUrl) 
                        {
                            console.log('Success:', response);
                            table +=`
                                <table>
                                    <tr> 
                                        <td colspan="2" class="tab">
                                             <b>Totle Tax Payment </b>
                                        </td>
                                        <td class="tab" > 
                                            <b>${(TotalAmount * year).toFixed(2)}</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th colspan="4" class="table-header" style="text-align: center; padding: 20px;">
                                            <form action="https://stage-securepay.sabpaisa.in/SabPaisa/sabPaisaInit?v=1" method="post" style="text-align: center;"> 
                                                <label>
                                                    <input type="checkbox" value="{{ $property->id }}" name="proparty_id" required />
                                                    मैं इस कथन की सत्यता की पुष्टि करता/करती हूँ      और अपनी पूर्ण सहमति प्रदान करता/करती हूँ। <br>
                                                    (I confirm the truthfulness of this statement and provide my full consent.)
                                                </label>
                                
                                                <input type="hidden" name="_token" value="{{ csrf_token() }}" autocomplete="off">
                                                <input type="hidden" name="encData" value="${ response.data.encryptedData }" id="frm1">
                                                <input type="hidden" name="clientCode" value="${ response.data.clientCode }" id="frm2"><br>
                                                <input type="submit" class="btn btn-dark" id="submitButton" value="अभी भुगतान करें (Pay Now)" / >    
                                            </form>
                                             
                                        </th>
                                    </tr>
                                </table> `;
                            tableBody.html(table); 
                        }
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr.responseJSON);
                    }
                });
                
                 
            },
            error: function () {
                alert('Error loading survey data.');
            }
        });
    }
 
    
//});

</script>

<script>
    // Function to search and filter the table
    function searchTable() {
    let searchQuery = $("#searchQuery").val().toLowerCase(); // Get the search query and convert to lowercase
    let selectedColumn = $("#columnSelect").val(); // Get the selected column index (empty string for "All")
    let tableRows = $('#surveyTableBody tr'); // Get all rows in the table body

        tableRows.each(function () {
            let row = $(this); // Get the current row
    
            if (selectedColumn === "") {
                // Search across all columns if "All" is selected
                let rowText = row.text().toLowerCase(); // Get all the text content of the row
                if (rowText.indexOf(searchQuery) > -1) {
                    row.show();
                } else {
                    row.hide();
                }
            } else {
                // Otherwise, search only the selected column
                let cell = row.find('td').eq(selectedColumn); // Get the selected column in the row
                let cellText = cell.text().toLowerCase(); // Get the text of that cell and convert it to lowercase
    
                // If the cell contains the search query, show the row, otherwise hide it
                if (cellText.indexOf(searchQuery) > -1) {
                    row.show();
                } else {
                    row.hide();
                }
            }
        });
    }
    
    // Trigger search on input change
    $("#searchQuery").on("input", function() {
        searchTable(); // Call the search function when the user types in the search box
    });
    
    // Optional: Trigger search on column change
    $("#columnSelect").on("change", function() {
        searchTable(); // Call the search function when the user changes the column
    });
   
</script>
 

@endsection