@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; 
            background-color: #fdfdfd;
        }
  
        .table-header {
            font-weight: bold;
            background-color: #f0f0f0;
        }

        .table-section {
            margin-top: 20px;
        }
    </style>
  

<div class="banner" style="margin-top: 0px;">
        <div class="fixed-image section dark-translucent-bg">
            <div class="container">
                <div class="space-top">
                </div>
                <h1>
                    <span> ऑनलाइन हाउस टैक्स भुगतान</span></h1>
                <div class="separator-2">
                </div>
            </div>
        </div>
    </div>
    <div class="page-intro" style="margin-top: 0px;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb">
                        <li>
                            <i class="fa fa-home pr-10"></i>
                            <span ><a href="IndexHI-3.html"> मुख्य पृष्ठ </a> / ऑनलाइन हाउस टैक्स भुगतान</span></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    </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" border="1" cellspacing="0" cellpadding="6" width="100%">
                <tr>
                    <th class="tab" colspan="15"><b>संपत्ति के निर्मित क्षेत्रफल का विवरण / Details of Constructed Area of the Property</b></th>
                </tr>
                <tr>
                    <th class="tab" rowspan="3">तल फ्लोर / Floor</th>
                    <th class="tab" colspan="4">पक्का / Pucca</th>
                    <th class="tab" colspan="4">आंशिक पक्का / Semi-Pucca</th>
                    <th class="tab" colspan="4">कच्चा / Kachcha</th>
                    <th class="tab"  rowspan="3" >खुली भूमि / Open Land</th>

                    <th class="tab" rowspan="3">योग / Total</th>
                </tr>
                <tr>
                    <th class="tab" colspan="2">आवासीय / Residential</th>
                    <th class="tab" colspan="2">व्यावसायिक / Commercial</th>
                    <th class="tab" colspan="2">आवासीय / Residential</th>
                    <th class="tab" colspan="2">व्यावसायिक / Commercial</th>
                    <th class="tab" colspan="2">आवासीय / Residential</th>
                    <th class="tab" colspan="2">व्यावसायिक / Commercial</th>
                </tr>
                <tr>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                    <th class="tab">स्वयं के उपयोग में / Self-use</th>
                    <th class="tab">किराये पर / Rented</th>
                </tr>
                <!-- Add data rows here --> 
    
            @php
                $tt = array_fill(1, 14, 0);
                $floorData = json_decode($property->floorData);
                if (!is_array($floorData)) $floorData = json_decode($floorData);
            @endphp
    
            @foreach($floorData as $floor)
                @php
                    $t = array_fill(1, 14, 0);
                    $type = $floor->constructionType; 
                    $usage = in_array($floor->usageType, [1, 5]) ? 1 : 2;
                    $factor  = in_array($floor->usageFactor, [1, 'Other']) ? 1 : 2;  
                    $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]], // कच्चा
                            4 => [1 => [1 => 5, 2 => 6], 2 => [1 => 7, 2 => 8]], // Teen
                            5 => [1 => [1 => 13, 2 => 13], 2 => [1 => 13, 2 => 13]], // आंशिक पक्का
                            'Other' => [1 => [1 => 5, 2 => 6], 2 => [1 => 7, 2 => 8]], // आंशिक पक्का
                        ];
                    $index = $indexMap[$type][$usage][$factor];
                    if($property->propertyUse!=5)
                        $t[$index] = $area;
                    else
                        $t[13] = $property->plotAreaSqFt ;
                        
                        
                    $tt[$index] += $area;
                    $t[14] = array_sum($t);
                    $tt[14] += $t[14]; 
                @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 <= 14; $i++)
                        <td class="tab">{{ $t[$i] }}</td>
                    @endfor
                </tr>
            @endforeach
            <tr>
                <th>योग</th>
                @for($i = 1; $i <= 14; $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) 
            {
                
                console.log(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
                console.log('survey Data : ',survey);
    
                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">
                                10 % TPV <br> (संपत्ति का  10% मूल्य)
                            </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 * 10) / 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 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 = '';
                        
                        // extract start year from "2023-2024"
                        let startDate = parseInt(survey.assessment_year.split('-')[0]);
                        
                        // dynamic end year = current year
                        let endDate = new Date().getFullYear();
                        
                        for (let year = startDate; year < endDate; year++) {
                            balance += TotalAmount;
                            console.log(balance);
                            ledgerRows += `
                                <tr class="text-center">
                                    <td class="tab">${year}-${year + 1}</td> 
                                    <td class="tab">${ TotalAmount.toFixed(2) }</td>
                                    <td class="tab">-</td>
                                    <td class="tab">${TotalAmount.toFixed(2)}</td>
                                </tr>
                            `;
                        }
                        
                        table += `
                            ${ledgerRows}

                            
                        </table>  `;
                        // Set the HTML inside your container 
                        $.ajax({
                            url: 'https://app.npanandnagar.in/api/auth/initiate-tax-payment',
                            method: 'GET',
                            data: {
                                id: survey.id,
                                purpose_of_payment: 'property-tax',
                                tax_year: '2023-2024',
                                amount:balance ,
                                //callbackUrl: 'https://npanandnagar.in/payment-response'
                                //callbackUrl: 'https://pay.npanandnagar.in/index.php'
                                callbackUrl: '{{ route('payment-response') }}'
                            },
                            success: function(response) 
                            { 
                                // Example: Redirect to payment page with encrypted data  && response.data.redirectUrl
                                if (response.status ) 
                                {
                                    console.log('Success:', response);
                                    table +=`
                                        <table>
                                            <tr> 
                                                <td colspan="2" class="tab">
                                                     <b>Totle Tax Payment </b>
                                                </td>
                                                <td class="tab" > 
                                                    <b>${(balance).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); 
                                }
                            }
                        });
                        
                //tableBody.html(table);      
            }
        })
    }
    
    
    function calculateRate(constructionType, usageType, usageFactor, taxRateZone,nagarpalikaId='') 
    {
        
        console.log('nagarpalikaId:', nagarpalikaId);
        console.log('constructionType:', constructionType);
        console.log('usageType:', usageType);
        console.log('usageFactor:', usageFactor);
        console.log('taxRateZone:', taxRateZone);
    
        const rates = 
        {
            1: [
                { zones: [4], rate1: 0.70 },
                { zones: [1], rate1: 0.60 },
                { zones: [5], rate1: 0.50 },
                { zones: [6], rate1: 0.40 }
              ],
              2: [
                { zones: [4], rate1: 0.50 },
                { zones: [1], rate1: 0.40 },
                { zones: [5], rate1: 0.30 },
                { zones: [6], rate1: 0.20 }
              ],
              3: [
                { zones: [4], rate1: 0.40 },
                { zones: [1], rate1: 0.30 },
                { zones: [5], rate1: 0.20 },
                { zones: [6], rate1: 0.10 }
              ],
              4: [
                { zones: [4], rate1: 0.50 },
                { zones: [1], rate1: 0.40 },
                { zones: [5], rate1: 0.30 },
                { zones: [6], rate1: 0.20 }
              ],
              5 : [
                { zones: [4], rate1: 0.20 },
                { zones: [1], rate1: 0.15 },
                { zones: [5], rate1: 0.10 },
                { zones: [6], rate1: 0.05 }
              ],
              'Other': [
                { zones: [4], rate1: 0.20 },
                { zones: [1], rate1: 0.15 },
                { zones: [5], rate1: 0.10 },
                { zones: [6], rate1: 0.05 }
              ]
        };
    
        let baseRate = 0;
    
        // Convert to lowercase key if it's "Other"
        const key = rates.hasOwnProperty(constructionType) ? constructionType : 'Other';
    
        for (const rateZone of rates[key]) 
        {
            if (rateZone.zones.includes(Number(taxRateZone))) 
            {
                if (![1,5].includes(Number(usageType)))  //2,
                {
                    baseRate =  rateZone.rate1 * 2 ;//rateZone.rateOther;
                }
                else
                {
                    baseRate = rateZone.rate1;
                }
                //baseRate = usageFactor == 1 ? rateZone.rate1 : rateZone.rateOther;
                break;
            }
        }
        return parseFloat(baseRate.toFixed(2));
    }
 
    
});

</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