@extends('admin.layouts.adminapp')
@section('style')
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
@endsection
@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">All Property Surveyors </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"> Property Surveyors </li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <!-- Displaying Success Message -->
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                <!-- Displaying Error Messages -->
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
      <!-- Include jQuery -->
        <div class="row">
            <div class="col-lg-12 mx-auto">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">Property Surveyors List</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-md-2">
                                <select id="no_of_row" class="form-select  ">
                                    <option value="15">15</option> 
                                    <option value="50">50</option> 
                                    <option value="100">100</option> 
                                    <option value="250">250</option> 
                                    <option value="500">500</option> 
                                    <option value="1000">1000</option>
                                    <option value="1500">1500</option>
                                    <option value="2000">2000</option>
                                    <option value="2500">2500</option>
                                    <option value="3000">3000</option>
                                    <option value="3500">3500</option>
                                    <option value="4000">4000</option>
                                </select>
                            </div>
                            
                            <div class="col-md-2"> 
                                <select id="wardNo" class="form-select  ">
                                    <option value="">All Ward</option> 
                                    @foreach($wards as $k=>$ward)
                                    <option value="{{ $ward->id }}" >{{ $ward->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                           
                            <div class="col-md-2"> 
                                <select id="userId" class="form-select  ">
                                    <option value="">All Users</option>
                                     @if(permission('Properties','user-profile'))
                                    @foreach($users as $k=>$user)
                                    <option value="{{ $user->id }}" >{{ $user->name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            
                            <div class="col-md-2">  
                                <input type="date" name="startDate" id="startDate" class="form-control" > 
                            </div>
                            <div class="col-md-2">  
                                <input type="date" name="endDate" id="endDate" class="form-control" > 
                            </div>
                            <div class="col-md-2"> 
                                <input type="submit" value="Search" class="btn btn-primary" onclick="loadS()">
                            </div>
                            
                            <!--<div class="col-md-2"> -->
                            <!--    <button id="exportPDF" class="btn btn-danger">Export to PDF</button>-->
                            <!--</div>--> 
                            <!-- Export Buttons -->
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-md-2">
                                <!-- Dropdown for column selection -->
                                <select id="columnSelect" class="form-select  ">
                                    <option value="">All</option>
                                    <option value="0">SN</option>
                                    <option value="1">Actions</option>
                                    <option value="2">Survey Id</option>
                                    <option value="3">Date of Survey</option>
                                    <option value="4">Owner Name</option>
                                    <option value="5">Owner Father Name</option>
                                    <option value="6">Mobile No</option>
                                    <option value="7">Ward Name</option>
                                    <option value="8">Is Slum</option>
                                    <option value="9">Parcel No</option>
                                    <option value="10">Property No</option>
                                    <option value="11">Electricity ID</option>
                                    <option value="12">Khasra No</option>
                                    <option value="13">Registry No</option>
                                    <option value="14">Constructed Date</option>
                                    <option value="15">Respondent Name</option>
                                    <option value="16">Respondent Relationship</option>
                                    <option value="17">Owner Aadhaar Number</option>
                                    <option value="18">City</option>
                                    <option value="19">Pincode</option>
                                    <option value="20">House No</option>
                                    <option value="21">Street Name</option>
                                    <option value="22">Locality</option>
                                    <option value="23">Colony</option>
                                    <option value="24">Present House No</option>
                                    <option value="25">Present Street Name</option>
                                    <option value="26">Present Locality</option>
                                    <option value="27">Present Colony</option>
                                    <option value="28">Present City</option>
                                    <option value="29">Present Pincode</option>
                                    <option value="30">Is Same As Property</option>
                                    <option value="31">Tax Rate Zone</option>
                                    <option value="32">Property Ownership</option>
                                    <option value="33">Property Use</option>
                                    <option value="34">Commercial</option>
                                    <option value="35">Year of Construction</option>
                                    <option value="36">Exemption Type</option>
                                    <option value="37">Exemption Applicable</option>
                                    <option value="38">Situation</option>
                                    <option value="39">Road Type</option>
                                    <option value="40">Floors</option>
                                    <option value="41">Plot Area SqFt</option>
                                    <option value="42">Plot Area SqMeter</option>
                                    <option value="43">Plinth Area SqFt</option>
                                    <option value="44">Plinth Area SqMeter</option>
                                    <option value="45">Total Built Up Area SqFt</option>
                                    <option value="46">Total Built Up Area SqMeter</option>
                                    <option value="47">Is Municipal Water Supply</option>
                                    <option value="48">Total Water Connection</option>
                                    <option value="49">Water Connection Id/Type</option>
                                    <option value="50">Toilet Type</option>
                                    <option value="51">Is Municipal Waste Service</option>
                                    <option value="52">Is Municipal Water Supply</option>
                                </select>
                                
                                 
                            </div>
                              
                            <div class="col-md-2"> 
                                <input type="text" id="searchQuery" placeholder="Search..."  class="form-control"> 
                                <!--oninput="loadSurveys(1)"-->
                            </div>
                            <div class="col-md-4">  
                            </div>
                            @if(permission('Properties','properties-notice'))
                            <div class="col-md-2"> 
                                <button id="downloadNotices" class="btn btn-warning">Download Notices</button>
                            </div>
                            @endif
                            @if(permission('Properties','properties-export'))
                            <div class="col-md-2"> 
                                <button id="exportExcel" class="btn btn-warning">Export to Excel</button>
                            </div>
                            @endif
                            <!--<div class="col-md-2"> -->
                            <!--    <button id="exportPDF" class="btn btn-danger">Export to PDF</button>-->
                            <!--</div>--> 
                            <!-- Export Buttons -->
                        </div>
                        <style>
                            .table-wrapper {
                              max-height: 750px;  /* Set the desired height for the table */
                              overflow-y: auto;   /* Enables vertical scrolling */
                              display: block;     /* Makes the table wrapper block-level so that the scrolling works */
                            }
                          
                            .table {
                              width: 100%;
                              border-collapse: collapse;  /* Ensures no space between table borders */
                            }
                          
                            .table thead {
                              background: #ffc107; /* Optional: Adds a background color to the header */
                              position: sticky;     /* Makes the header sticky */
                              top: 0;               /* Sticks the header to the top */
                              z-index: 1;           /* Ensures the header stays above the table body */
                            }
                          
                            .table th, .table td {
                              padding: 8px;         /* Adds padding to the cells */
                              border: 1px solid #ddd; /* Adds a border to the cells */
                            }
                          </style>
                        <div class="table-responsive">
                            <div class="table-wrapper">
                                <table class="table" id="example22"  >
                                    <thead>
                                        <tr>
                                            <th>SN</th>
                                            <th>Actions</th>
                                            <th>Survey Id</th> 
                                            <th>Date of Survey </th> 
                                            <th>Owner Name</th>
                                            <th>Owner Father Name</th>
                                            <th>Mobile No</th>
                                            <th>Ward Name</th> 
                                            <th>Is Slum</th>
                                            <th>Parcel No</th>
                                            <th>Property No</th>
                                            <th>Electricity ID</th>
                                            <th>Khasra No</th>
                                            <th>Registry No</th>
                                            <th>Constructed Date</th>
                                            <th>Respondent Name</th>
                                            <th>Respondent Relationship</th>
                                            <th>Owner Aadhaar Number</th>
                                            <th>City</th>
                                            <th>Pincode</th>
                                            <th>House No</th>
                                            <th>Street Name</th>
                                            <th>Locality</th>
                                            <th>Colony</th>
                                            <th>Present House No</th>
                                            <th>Present Street Name</th>
                                            <th>Present Locality</th>
                                            <th>Present Colony</th>
                                            <th>Present City</th>
                                            <th>Present Pincode</th>
                                            <th>Is Same As Property</th>
                                            <th>Tax Rate Zone</th>
                                            <th>Property Ownership</th>
                                            <th>Property Use</th>
                                            <th>Commercial</th>
                                            <th>Year of Construction</th>
                                            <th>Exemption Type</th>
                                            <th>Exemption Applicable</th>
                                            <th>Situation</th>
                                            <th>Road Type</th>
                                            <th>Floors</th>
                                            <th>Plot Area SqFt</th> 
                                            <th>Plot Area SqMeter</th> 
                                            <th>Plinth Area SqFt</th> 
                                            <th>Plinth Area SqMeter</th>
                                            <th>Total Built Up Area SqFt</th>
                                            <th>Total Built Up Area SqMeter</th>
                                            <th>Is Muncipal Water Supply</th> 
                                            <th>Total Water Connection</th>
                                            <th>Water Connection Id/Type</th>
                                            <th>Toilet Type</th>
                                            <th>Is Muncipal Waste Service</th>
                                            <th>Is Muncipal Water Supply</th>
                                            <th>Is Muncipal Water Supply</th>
                                        </tr>
                                    </thead> 
                                    <tbody id="surveyTableBody"></tbody>
                                </table> 
                            </div>
                            <!-- Pagination (Previous & Next buttons only) -->
                            <div class="pagination" id="paginationLinks"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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>

    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 no_of_row = $("#no_of_row").val();
        let wardNo = $("#wardNo").val(); 
        let userId = $("#userId").val();
        let startDate = $("#startDate").val(); // Get the search query from the input
        let endDate = $("#endDate").val(); // Get the search query from the input

        $.ajax({
            url: '{{ route("properties-data") }}?page=' + page + '&perPage=' + no_of_row + '&wardNo=' + wardNo + '&userId=' + userId + '&startDate=' + startDate + '&endDate=' + endDate,  
            type: 'GET',
            dataType: 'json',
            success: function (response) 
            {
                console.log(response);
                // Populate the table
                let tableBody = $('#surveyTableBody');
                tableBody.empty();  // Clear current table data 
                let ii = (response.surveyForms.current_page > 1) ? (response.surveyForms.current_page - 1 ) * no_of_row + 1  : 1; 
                $.each(response.surveyForms.data, function (index, survey) {
                    // Extract owner details
                    //console.log(response.me.role.id)
                    //if(response.me.role.id==1)
                    let ownerDetails = null;
                    if (typeof survey.ownerDetails === 'string') 
                    {    
                        ownerDetails = JSON.parse(survey.ownerDetails);
                    } 
                    else 
                    {
                        ownerDetails = survey.ownerDetails; 
                    }
                    
                    //let ownerDetails = JSON.parse(survey.ownerDetails);
                    let ownerName = 'N/A';
                    if (ownerDetails.length > 0) {
                        ownerName = ['Naa','Na ','Na','Noo','Nooo'].includes(ownerDetails[0].name) ? 'N/A' : ownerDetails[0].name;
                    }
 
                    let fatherName = 'N/A';
                    if (ownerDetails.length > 0) {
                        fatherName = ['Naa','Na ','Na','Noo','Nooo'].includes(ownerDetails[0].fatherName) ? 'N/A' : ownerDetails[0].fatherName;
                    }
                    let mobile = ownerDetails.length > 0 ? ownerDetails[0].mobile : 'N/A';
                    const date = new Date(survey.created_at);
                    //const formattedDate = date.toLocaleDateString('en-GB'); // en-GB uses dd/mm/yyyy format 
                    const options = {
                      //weekday: 'long', // "Monday"
                      year: 'numeric', // "2025"
                      month: 'long', // "March"
                      day: 'numeric', // "11"
                      hour: '2-digit', // "14"
                      minute: '2-digit', // "30"
                      second: '2-digit', // "00"
                      hour12: true // Enable AM/PM format
                    };
                    
                    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);
                    // Construct table row with all data from the JSON
                    let floors =`<table class="table table-bordered" >
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Floor Type</th>
                                        <th>Area SqFt</th> 
                                        <th>Area SqMt </th> 
                                        <th>Usage Type</th>
                                        <th>Usage Factor</th>
                                        <th>Construction Type</th> 
                                    </tr>
                                </thead>`;
                    
                    $.each(floorData, function (inIndex, floor) 
                    {
                        //console.log(floor);
                        floors +=`<tr>
                                    <td>${inIndex+1}</td>
                                    <td>${ floor.floorType == 'Other' ? floor.floorType + '('+ floor.floorTypeOther+')'   : floorType(floor.floorType, response.floors) }</td>
                                    <td>${floor.areaSqFt}</td>
                                    <td>${floor.areaSqMt}</td>
                                    <td>${ floor.usageType == 'Other' ? floor.usageType + '('+ floor.usageTypeOther+')'   : usageType(floor.usageType, response.floorUsageType) }</td>
                                    <td>${ floor.usageFactor == 'Other' ? floor.usageFactor + '('+ floor.usageFactorOther+')'   : usageFactors(floor.usageFactor, response.usagsFactors) }</td>
                                    <td>${ floor.constructionType == 'Other' ? floor.constructionType + '('+ floor.constructionTypeOther+')'   : yearOfConstructions(floor.constructionType , response.natureOfConstructionLists) }</td>
                                </tr>`; 
                    });
                    floors +=`</table>`;
                    floors =``;
                    
                    tableBody.append(`
                        <tr>
                            <td>${ii++}</td>
                            <td>
                                <a target="_new" href="{{ route('properties.show', '') }}/${survey.id}" class="btn btn-info btn-sm">View</a> 
                                @if(permission('Properties','user-profile'))
                                <a href="#" class="btn btn-dark btn-sm">${survey.user.name}</a>
                                @endif
                            </td>
                            <td>${survey.nagarpalikaId}</td>
                            <td>${formattedDate}</td>
                            <td>${ownerName}</td>
                            <td>${fatherName}</td>
                            <td>${mobile}</td>
                            <td>${survey.ward.name}</td> 
                            <td>${survey.isSlum}</td>
                            <td>${survey.parcelNo}</td>
                            <td>${survey.propertyNo}</td>
                            <td>${survey.electricityId ? survey.electricityId : 'N/A'}</td>
                            <td>${survey.khasraNo ? survey.khasraNo : 'N/A'}</td>
                            <td>${survey.registryNo ? survey.registryNo : 'N/A'}</td>
                            <td>${survey.constructedDate}</td>
                            <td>${['Naa','Na ','Na','Noo','Nooo'].includes(survey.respondentName) ? 'N/A' : survey.respondentName}</td>
                            <td>${survey.respondentRelationship}</td>
                            <td>${survey.ownerAadhaarNumber ? survey.ownerAadhaarNumber : 'N/A'}</td>
                            <td>${survey.city}</td>
                            <td>${survey.pincode}</td>
                            <td>${ ['Naa','Na ','Na','Noo','Nooo'].includes(survey.houseNo) ? 'N/A' : survey.houseNo }</td>
                            <td>${survey.streetNoName}</td>
                            <td>${survey.locality}</td>
                            <td>${survey.colony}</td>
                            <td>${ ['Naa','Na ','Na','Noo','Nooo'].includes(survey.presentHouseNo) ? 'N/A' : survey.presentHouseNo}</td>
                            <td>${survey.presentStreetNoName}</td>
                            <td>${survey.presentLocality}</td>
                            <td>${survey.presentColony}</td>
                            <td>${survey.presentCity}</td>
                            <td>${survey.presentPincode}</td>
                            <td>${survey.isSameAsProperty}</td>
                            <td>${ survey.taxRateZone == 'Other' ? survey.taxRateZone  : survey.tax_rate_zone.name }</td> 
                            <td>${ survey.propertyOwnership == 'Other' ? survey.propertyOwnership + '('+ survey.propertyOwnershipOther+')'   : survey.property_ownership.name }</td>  
                            <td>${ survey.propertyUse == 'Other' ? survey.propertyUse+ '('+ survey.propertyOther+')'   : survey.property_use.name }</td>  
                            <td>${ survey.commercial == 'Other'  ? survey.commercial+ '('+ survey.commercialOther+')'   : (survey.commercial == null?'':survey.commercial.name)  }</td> 
                            
                            <td>${ survey.yearOfConstruction =='Other' ? survey.yearOfConstructionOther : survey.year_of_construction.name}</td>
                            <td>${survey.exemptionType ? survey.exemptionType : 'N/A'}</td>
                            <td>${survey.isExemptionApplicable}</td> 
                            <td>${ survey.situation == null ? survey.situation+ '('+ survey.situationOther+')'   : survey.situation.name }</td> 
                            <td>${ survey.roadType == 'Other' ? survey.roadType+ '('+ survey.situationOther+')'   : survey.roadType }</td>  
                            <td>${floorData.map(floor => `${floor.floorType == 'Other' ? floor.floorType + ' (' + floor.floorTypeOther + ')' : floorType(floor.floorType, response.floors) } - ${floor.areaSqFt} SqFt - ${floor.areaSqMt} SqMt 
                            || Usage Type - ${ floor.usageType == 'Other' ? floor.usageType + '('+ floor.usageTypeOther+')'   : usageType(floor.usageType, response.floorUsageType) }
                            || Usage Factor - ${ floor.usageFactor == 'Other' ? floor.usageFactor + '('+ floor.usageFactorOther+')'   : usageFactors(floor.usageFactor, response.usagsFactors) }
                            || Usage Type - ${ floor.constructionType == 'Other' ? floor.constructionType + '('+ floor.constructionTypeOther+')'   : yearOfConstructions(floor.constructionType , response.natureOfConstructionLists) }`).join(",<br> ") }</td> 
                            <td>${survey.plotAreaSqFt}</td> 
                            <td>${survey.plotAreaSqMeter}</td> 
                            <td>${ firstPlinthValue?.toFixed(2) ?? survey.plinthAreaSqFt}</td> 
                            <td>${ firstPlinthSmValue?.toFixed(2) ?? survey.plinthAreaSqMeter}</td>
                            <td>${ totalPlinthFormatted ?? survey.totalBuiltUpAreaSqFt}</td>
                            <td>${ totalPlinthSmFormatted ?? survey.totalBuiltUpAreaSqMeter}</td>
                            <td>${survey.isMuncipalWaterSupply}</td>
                            <td>${survey.totalWaterConnection}</td>
                            <td>${survey.waterConnectionId}</td>
                            <td>${ survey.toiletType == 'Other' ? survey.toiletType+ '('+ survey.toiletTypeOther+')'   : survey.toiletType }</td> 
                            <td>${survey.isMuncipalWaterSupply}</td>
                            <td>${survey.isMuncipalWasteService}</td> 
                            <td>${ survey.sourceOfWater == 'Other' ? survey.sourceOfWater+ '('+ survey.sourceOfWaterOther+')'   : survey.sourceOfWater }</td> 
                        </tr>
                    `);
                });

                // Update pagination with Previous and Next buttons
                let paginationLinks = $('#paginationLinks');
                paginationLinks.empty();

                // Previous button
                if (response.surveyForms.prev_page_url) 
                {
                    paginationLinks.append(`<a href="#" class="btn btn-secondary btn-sm" id="prevBtn">Previous</a>`);
                } else {
                    paginationLinks.append(`<span class="btn btn-light btn-sm">Previous</span>`);
                }

                // Next button
                if (response.surveyForms.next_page_url) {
                    paginationLinks.append(`<a href="#" class="btn btn-secondary btn-sm" id="nextBtn">Next</a>`);
                } else {
                    paginationLinks.append(`<span class="btn btn-light btn-sm">Next</span>`);
                }

                // Last button
                if (response.surveyForms.last_page_url) {
                    paginationLinks.append(`<a href="#" class="btn btn-secondary btn-sm" id="lastBtn">Last</a>`);
                } else {
                    paginationLinks.append(`<span class="btn btn-light btn-sm">Last</span>`);
                }

                // Handle Previous button click
                $('#prevBtn').on('click', function (e) {
                    e.preventDefault();
                    if (response.surveyForms.prev_page_url) {
                        loadSurveys(new URL(response.surveyForms.prev_page_url).searchParams.get('page')); // Get the previous page number from URL
                    }
                });

                // Handle Next button click
                $('#nextBtn').on('click', function (e) {
                    e.preventDefault();
                    if (response.surveyForms.next_page_url) {
                        loadSurveys(new URL(response.surveyForms.next_page_url).searchParams.get('page')); // Get the next page number from URL
                    }
                });

                // Handle Last button click
                $('#lastBtn').on('click', function (e) {
                    e.preventDefault();
                    if (response.surveyForms.last_page_url) {
                        loadSurveys(new URL(response.surveyForms.last_page_url).searchParams.get('page')); // Get the last page number from URL
                    }
                });
            },
            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>

<!-- Add the export functionality -->
<script>
    // Excel export
    
    document.getElementById("downloadNotices").addEventListener("click", function () 
    {
        let wardNo = document.getElementById("wardNo").value;
        if (wardNo) {
            window.open(`{{ route('properties.ward', '') }}/${wardNo}`, '_blank');
        } else {
            alert("Please enter a ward number.");
        }
    });
    document.getElementById("exportExcel").addEventListener("click", function () 
    {
        // loadSurveys2(1);
        // setTimeout(function() 
        // { 
            var wb = XLSX.utils.table_to_book(document.getElementById('example22'), { sheet: "Survey Data" });
            XLSX.writeFile(wb, 'survey_data.xlsx'); 
        //}, 5000);  // 2000 milliseconds = 2 seconds
        
    });

    // PDF export
    // document.getElementById("exportPDF").addEventListener("click", function () {
    //     const { jsPDF } = window.jspdf;
    //     const doc = new jsPDF();
    //     doc.autoTable({ html: '#example22' });
    //     doc.save('survey_data.pdf');
    // });
</script>



@endsection