@php
    use App\Models\Ward;
    use App\Models\User;

    $wards = Ward::all();
    $users = User::all();
    @endphp
    @extends('admin.layouts.adminApp')

    @section('style')
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' />
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" />
    <style>
        .table thead th {
            font-size: 13px;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table td {
            font-size: 13px;
        }

        .card-header h6 i {
            vertical-align: middle;
        }

        .pagination {
            display: flex;
            justify-content: center;
        }
    </style>

    @endsection

    @section('content')
    <div class="page-wrapper">
        <div class="page-content">

            <!-- Breadcrumb -->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-4">
                <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="#"><i class="bx bx-home-alt"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Property Surveyors</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <!-- Flash Messages -->
            @if(session('success'))
            <div class="alert alert-success shadow-sm">{{ session('success') }}</div>
            @endif

            @if($errors->any())
            <div class="alert alert-danger shadow-sm">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <!-- Card Start -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                            <h6 class="mb-0"><i class="bx bx-list-ul me-2"></i> Property Surveyors List</h6>
                        </div>

                        <div class="card-body">

                            <!-- Filter Section -->
                            <div class="border rounded p-3 mb-4 bg-light">
                                <h6 class="mb-3 text-primary"><i class="bx bx-filter-alt me-1"></i> Filter Data</h6>
                                <div class="row g-3">
                                    <div class="col-md-2">
                                        <label for="wardNo" class="form-label">Ward</label>
                                        <select id="wardNo" class="form-select">
                                            <option value="">All Wards</option>
                                            @foreach($wards as $ward)
                                            <option value="{{ $ward->id }}">{{ $ward->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="userId" class="form-label">User</label>
                                        <select id="userId" class="form-select">
                                            <option value="">All Users</option>
                                            @foreach($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="startDate" class="form-label">Start Date</label>
                                        <input type="date" id="startDate" class="form-control" />
                                    </div>

                                    <div class="col-md-2">
                                        <label for="endDate" class="form-label">End Date</label>
                                        <input type="date" id="endDate" class="form-control" />
                                    </div>

                                    <div class="col-md-2 d-flex align-items-end">
                                        <button id="searchButton" class="btn btn-primary w-100">
                                            <i class="bx bx-search me-1"></i> Search
                                        </button>
                                    </div>

                                    <div class="col-md-2 d-flex align-items-end">
                                    <button id="resetButton" class="btn btn-secondary w-100">
                                        <i class="bx bx-reset me-1"></i> Reset
                                    </button>
                                    </div> 

                                    <div>
                                        <a href="{{ route('gis.property-surveyors.export', request()->query()) }}" class="btn btn-success mb-3">  Export to Excel </a> 
                                    </div>
                                </div>
                            </div>

                            <!-- Table Section -->
                            <div class="table-responsive">
                                <div class="table-wrapper" style="max-height: 600px; overflow-y: auto;">
                                    <table class="table table-bordered table-striped align-middle" id="propertiesTable">
                                        

            @php
                use App\Models\FloorType;

                $floorTypes = FloorType::all(); // Pass this from controller if needed
                $usageTypes = ['Residential', 'Non-Residential'];
                $constructionTypes = 
                [
                    //'Pakka Building with R.C.C Roof or R.B. Roof',
                    //'Tin Sheet',
                    //'Kaccha Building that is all other building not covered in (i) & (ii)'
                    1,3,4
                ];

                // Prepare alias mapping for construction types
                $constructionAliases = [];
                foreach ($constructionTypes as $type) 
                {
                    if ($type==1 || stripos($type, 'r.c.c') !== false || stripos($type, 'r.b.') !== false) 
                    {
                        $alias = 'RCC';
                    } elseif ( $type==4 || $type==4 ||  stripos($type, 'tin') !== false) {
                        $alias = 'Tin Sheet';
                    } elseif ( $type==3 || stripos($type, 'kaccha') !== false || stripos($type, 'covered') !== false) {
                        $alias = 'KACCHA';
                    } elseif ( $type==2 || stripos($type, 'kaccha') !== false || stripos($type, 'covered') !== false) {
                        $alias = 'Other';
                    }  
                    else 
                    {
                        $alias = strtoupper(str_replace(' ', '_', trim($type)));
                    }
                    $constructionAliases[$type] = $alias;
                }
            @endphp

<thead class="table-warning sticky-top">
    {{-- MAIN HEADERS --}}
    <tr>
        <th rowspan="4">SN</th>
        <th rowspan="4">Actions</th>
        <th rowspan="4">Survey Id</th>
        <th rowspan="4">Date of Survey</th>
        <th rowspan="4">Owner Name</th>
        <th rowspan="4">Owner Father Name</th>
        <th rowspan="4">Mobile No</th>
        <th rowspan="4">Ward Name</th>
        <th rowspan="4">Is Slum</th>
        <th rowspan="4">Parcel No</th>
        <th rowspan="4">Property No</th>
        <th rowspan="4">Electricity ID</th>
        <th rowspan="4">Khasra No</th>
        <th rowspan="4">Registry No</th>
        <th rowspan="4">Constructed Date</th>
        <th rowspan="4">Respondent Name</th>
        <th rowspan="4">Respondent Relationship</th>
        <th rowspan="4">Owner Aadhaar Number</th>
        <th rowspan="4">City</th>
        <th rowspan="4">Pincode</th>
        <th rowspan="4">House No</th>
        <th rowspan="4">Street Name</th>
        <th rowspan="4">Locality</th>
        <th rowspan="4">Colony</th>
        <th rowspan="4">Present House No</th>
        <th rowspan="4">Present Street Name</th>
        <th rowspan="4">Present Locality</th>
        <th rowspan="4">Present Colony</th>
        <th rowspan="4">Present City</th>
        <th rowspan="4">Present Pincode</th>
        <th rowspan="4">Is Same As Property</th>
        <th rowspan="4">Tax Rate Zone</th>
        <th rowspan="4">Property Ownership</th>
        <th rowspan="4">Property Use</th>
        <th rowspan="4">Commercial</th>
        <th rowspan="4">Year of Construction</th>
        <th rowspan="4">Exemption Type</th>
        <th rowspan="4">Exemption Applicable</th>
        <th rowspan="4">Situation</th>
        <th rowspan="4">Road Type</th>

        {{-- Floors dynamic --}}
        <th colspan="{{ count($floorTypes) * count($usageTypes) * count($constructionTypes) }}">Floors</th>

        <th rowspan="4">Plot Area SqFt</th>
        <th rowspan="4">Plot Area SqMeter</th>
        <th rowspan="4">Plinth Area SqFt</th>
        <th rowspan="4">Plinth Area SqMeter</th>
        <th rowspan="4">Total Built Up Area SqFt</th>
        <th rowspan="4">Total Built Up Area SqMeter</th>
        <th rowspan="4">Is Muncipal Water Supply</th>
        <th rowspan="4">Total Water Connection</th>
        <th rowspan="4">Water Connection Id/Type</th>
        <th rowspan="4">Toilet Type</th>
        <th rowspan="4">Is Muncipal Waste Service</th>
        <th rowspan="4">Source of Water</th>
        <th rowspan="4">latitude</th>
        <th rowspan="4">longitude</th>
    </tr>

    {{-- Floor Levels --}}
    <tr>
        @foreach ($floorTypes as $floor)
            <th colspan="{{ count($usageTypes) * count($constructionTypes) }}">{{ $floor->name }}</th>
        @endforeach
    </tr>

    {{-- Usage Types --}}
    <tr>
        @foreach ($floorTypes as $floor)
            @foreach ($usageTypes as $usage)
                <th colspan="{{ count($constructionTypes) }}">{{ $usage }}</th>
            @endforeach
        @endforeach
    </tr>

    {{-- Construction Types --}}
    <tr>
        @foreach ($floorTypes as $floor)
            @foreach ($usageTypes as $usage)
                @foreach ($constructionTypes as $type)
                    <th>{{ $constructionAliases[$type] }}</th>
                @endforeach
            @endforeach
        @endforeach
    </tr>
</thead>


                                        <tbody></tbody>
                                    </table>
                                </div>
                                <div class="pagination mt-3" id="paginationLinks"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- Card End -->

        </div>
    </div>

    @endsection

    @section('script')


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <!-- Buttons core JS -->
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

    <!-- Buttons extensions -->
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>

    <!-- JSZip and pdfmake for export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

    <!-- <script>
    $(document).ready(function() {
    var table = $('#propertiesTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gis.property.data') }}",
                data: function (d) {
                    d.wardNo = $('#wardNo').val();
                    d.userId = $('#userId').val();
                    d.startDate = $('#startDate').val();
                    d.endDate = $('#endDate').val();
                }
            },
            dom: 'Blfrtip',  // 'l' added for show entries dropdown
            buttons: [
                'colvis',
                {
                    extend: 'excelHtml5',
                    title: 'Property Data Export',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'  // export all data, not just visible page
                        }
                    }
                },
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    title: 'Property Report',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        }
                    }
                },
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        }
                    }
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        }
                    }
                }
            ],
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'actions', name: 'actions', orderable: false, searchable: false},
                {data: 'nagarpalikaId', name: 'nagarpalikaId'},
                {data: 'created_at', name: 'created_at'},
                {data: 'ownerDetails', name: 'ownerDetails'},
                {data: 'respondentName', name: 'respondentName'},
                {data: 'mobile', name: 'mobile', defaultContent: 'N/A'},
                {data: 'ward_name', name: 'ward_name'},
                {data: 'isSlum', name: 'isSlum'},
                {data: 'parcelNo', name: 'parcelNo'},
                {data: 'propertyNo', name: 'propertyNo'},
                {data: 'electricityId', name: 'electricityId'},
                {data: 'khasraNo', name: 'khasraNo'},
                {data: 'registryNo', name: 'registryNo'},
                {data: 'constructedDate', name: 'constructedDate'},
                {data: 'respondentName', name: 'respondentName'},
                {data: 'respondentRelationship_display', name: 'respondentRelationship_display'},
                {data: 'ownerAadhaarNumber', name: 'ownerAadhaarNumber',
                    render: function(data) { return data ? data : 'N/A'; }
                },
                {data: 'city', name: 'city'},
                {data: 'pincode', name: 'pincode'},
                {data: 'houseNo', name: 'houseNo'},
                {data: 'streetNoName', name: 'streetNoName'},
                {data: 'locality', name: 'locality'},
                {data: 'colony', name: 'colony'},
                {data: 'presentHouseNo', name: 'presentHouseNo'},
                {data: 'presentStreetNoName', name: 'presentStreetNoName'},
                {data: 'presentLocality', name: 'presentLocality'},
                {data: 'presentColony', name: 'presentColony'},
                {data: 'presentCity', name: 'presentCity'},
                {data: 'presentPincode', name: 'presentPincode'},
                {data: 'isSameAsProperty', name: 'isSameAsProperty'},
                {data: 'taxRateZone_name', name: 'taxRateZone_name'},
                {data: 'property_ownership_display', name: 'property_ownership_display'},
                {data: 'property_use.name', name: 'property_use.name'},
                {data: 'commercial_display', name: 'commercial_display'},
                {data: 'yearOfConstruction_display', name: 'yearOfConstruction_display'},
                {data: 'exemptionType_display', name: 'exemptionType_display',
                    render: function(data) { return data ? data : 'N/A'; }
                },
                {data: 'isExemptionApplicable', name: 'isExemptionApplicable'},
                {data: 'situation_display', name: 'situation_display'},
                {data: null, name: 'roadType', render: function(data, type, row) {
                    if (row.roadType && row.roadType.toLowerCase() !== 'other') {
                        return row.roadType;
                    } else if (row.roadTypeOther) {
                        return row.roadTypeOther + ' (other)';
                    } else {
                        return 'N/A';
                    }
                }},
                {data: 'floors', name: 'floors', orderable: false, searchable: false, render: function(data) {
                    if (!data) return '-';
                    return data.map(floor => `${floor.floorType} - ${floor.areaSqFt} SqFt - ${floor.areaSqMt} SqMt`).join('<br/>');
                }},
                {data: 'plotAreaSqFt', name: 'plotAreaSqFt'},
                {data: 'plotAreaSqMeter', name: 'plotAreaSqMeter'},
                {data: 'plinthAreaSqFt', name: 'plinthAreaSqFt'},
                {data: 'plinthAreaSqMeter', name: 'plinthAreaSqMeter'},
                {data: 'totalBuiltUpAreaSqFt', name: 'totalBuiltUpAreaSqFt'},
                {data: 'totalBuiltUpAreaSqMeter', name: 'totalBuiltUpAreaSqMeter'},
                {data: 'isMuncipalWaterSupply', name: 'isMuncipalWaterSupply'},
                {data: 'totalWaterConnection', name: 'totalWaterConnection',
                    render: function(data) { return data ? data : 'N/A'; }
                },
                {data: 'waterConnectionId', name: 'waterConnectionId'},
                {data: null, name: 'toiletType', render: function(data, type, row) {
                    if (row.toiletType && row.toiletType.toLowerCase() !== 'other') {
                        return row.toiletType;
                    } else if (row.toiletTypeOther) {
                        return row.toiletTypeOther + ' (other)';
                    } else {
                        return 'N/A';
                    }
                }},
                {data: 'isMuncipalWasteService', name: 'isMuncipalWasteService'},
                {data: null, name: 'sourceOfWater', render: function(data, type, row) {
                    if (row.sourceOfWater && row.sourceOfWater.toLowerCase() !== 'other') {
                        return row.sourceOfWater;
                    } else if (row.sourceOfWaterOther) {
                        return row.sourceOfWaterOther + ' (other)';
                    } else {
                        return 'N/A';
                    }
                }},
                {data: 'latitude', name: 'latitude'},
                {data: 'longitude', name: 'longitude'},
            ],
            order: [[3, 'desc']],
            pageLength: 10,
            lengthMenu: [10, 15, 25, 50, 100,250,500,750,1000,1500,2000,4000],
        });
        
        // Function to reload datatable with filters applied
        function loadS() {
            table.ajax.reload();
        }

        // Bind loadS function to search button click
        $('#wardNo, #userId, #startDate, #endDate').on('change', function () {
            // Optional: you can also reload table on filter change automatically
            // loadS();
        });

        $('#searchButton').on('click', loadS);

    
    });
    </script> -->

    <script>
    $(document).ready(function () 
    {
        
            @php
                function cleanFloorName($name) {
                    return str_replace(' ', '_', $name);
                }
            @endphp
    
        const floorCols = [];

        @foreach($floorTypes as $ft)
            @foreach($usageTypes as $us)
                @foreach($constructionTypes as $ct)
                    floorCols.push("{{ cleanFloorName($ft->name) }}_{{ cleanFloorName($us) }}_{{ cleanFloorName($ct) }}");

                @endforeach
            @endforeach
        @endforeach


        // Base columns
        let columns = [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'actions', name: 'actions', orderable: false, searchable: false},
            {data: 'nagarpalikaId', name: 'nagarpalikaId'},
            {data: 'created_at', name: 'created_at'},
            {data: 'owner_name', name: 'owner_name'},
            {data: 'owner_father_name', name: 'owner_father_name'},
            {data: 'owner_mobile', name: 'owner_mobile', searchable: true},
            {data: 'ward_name', name: 'ward_name'},
            {data: 'isSlum', name: 'isSlum'},
            {data: 'parcelNo', name: 'parcelNo'},
            {data: 'propertyNo', name: 'propertyNo'},
            {data: 'electricityId', name: 'electricityId'},
            {data: 'khasraNo', name: 'khasraNo'},
            {data: 'registryNo', name: 'registryNo'},
            {data: 'constructedDate', name: 'constructedDate'},
            {data: 'respondentName', name: 'respondentName'},
            {data: 'respondentRelationship_display', name: 'respondentRelationship_display'},
            {data: 'ownerAadhaarNumber', name: 'ownerAadhaarNumber', render: data => data ?? 'N/A'},
            {data: 'city', name: 'city'},
            {data: 'pincode', name: 'pincode'},
            {data: 'houseNo', name: 'houseNo'},
            {data: 'streetNoName', name: 'streetNoName'},
            {data: 'locality', name: 'locality'},
            {data: 'colony', name: 'colony'},
            {data: 'presentHouseNo', name: 'presentHouseNo'},
            {data: 'presentStreetNoName', name: 'presentStreetNoName'},
            {data: 'presentLocality', name: 'presentLocality'},
            {data: 'presentColony', name: 'presentColony'},
            {data: 'presentCity', name: 'presentCity'},
            {data: 'presentPincode', name: 'presentPincode'},
            {data: 'isSameAsProperty', name: 'isSameAsProperty'},
            {data: 'taxRateZone_name', name: 'taxRateZone_name'},
            {data: 'property_ownership_display', name: 'property_ownership_display'},
            {data: 'propertyUseId_display', name: 'propertyUseId_display'},
            {data: 'commercial_display', name: 'commercial_display'},
            {data: 'yearOfConstruction_display', name: 'yearOfConstruction_display'},
            {data: 'exemptionType_display', name: 'exemptionType_display'},
            {data: 'isExemptionApplicable', name: 'isExemptionApplicable'},
            {data: 'situation_display', name: 'situation_display'},
            {
                data: null, name: 'roadType',
                render: function(data, type, row) {
                    if (row.roadType && row.roadType.toLowerCase() !== 'other') return row.roadType;
                    if (row.roadTypeOther) return row.roadTypeOther + ' (other)';
                    return 'N/A';
                }
            }
        ];
        console.table(floorCols);
        floorCols.forEach(function (key) {
            columns.push({
                data: `floors_data.${key}`,
                name: `floors_data.${key}`,
                defaultContent: '-',
                searchable: false,
                orderable: false
            });
           
        });
        // console.table(columns);
        // Add remaining fixed columns
        columns = columns.concat([
            {data: 'plotAreaSqFt', name: 'plotAreaSqFt'},
            {data: 'plotAreaSqMeter', name: 'plotAreaSqMeter'},
            {data: 'plinthAreaSqFt', name: 'plinthAreaSqFt'},
            {data: 'plinthAreaSqMeter', name: 'plinthAreaSqMeter'},
            {data: 'totalBuiltUpAreaSqFt', name: 'totalBuiltUpAreaSqFt'},
            {data: 'totalBuiltUpAreaSqMeter', name: 'totalBuiltUpAreaSqMeter'},
            {data: 'isMuncipalWaterSupply', name: 'isMuncipalWaterSupply'},
            {data: 'totalWaterConnection', name: 'totalWaterConnection', render: data => data ?? 'N/A'},
            {data: 'waterConnectionId', name: 'waterConnectionId'},
            {
                data: null, name: 'toiletType',
                render: function(data, type, row) {
                    if (row.toiletType && row.toiletType.toLowerCase() !== 'other') return row.toiletType;
                    if (row.toiletTypeOther) return row.toiletTypeOther + ' (other)';
                    return 'N/A';
                }
            },
            {data: 'isMuncipalWasteService', name: 'isMuncipalWasteService'},
            {
                data: null, name: 'sourceOfWater',
                render: function(data, type, row) {
                    if (row.sourceOfWater && row.sourceOfWater.toLowerCase() !== 'other') return row.sourceOfWater;
                    if (row.sourceOfWaterOther) return row.sourceOfWaterOther + ' (other)';
                    return 'N/A';
                }
            },
            {data: 'latitude', name: 'latitude'},
            {data: 'longitude', name: 'longitude'}
        ]);

        // Initialize DataTable
        const table = $('#propertiesTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gis.property.data') }}",
                data: function (d) {
                    d.wardNo = $('#wardNo').val();
                    d.userId = $('#userId').val();
                    d.startDate = $('#startDate').val();
                    d.endDate = $('#endDate').val();
                }
            },
            dom: 'Blfrtip',
            buttons: [
                'colvis',
                {
                    extend: 'excelHtml5',
                    title: 'Property Data Export',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {search: 'applied', order: 'applied', page: 'all'}
                    },
                    customize: function(xlsx) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];

        // Remove existing first row (default header)
        $('row c[r^="A1"]', sheet).parent().remove();

        // Custom headers – ek hi line me full headers dalni padegi
        var newHeader = '<row r="1">';
        newHeader += '<c t="inlineStr" r="A1"><is><t>SN</t></is></c>';
        newHeader += '<c t="inlineStr" r="B1"><is><t>Actions</t></is></c>';
        newHeader += '<c t="inlineStr" r="C1"><is><t>Survey Id</t></is></c>';
        newHeader += '<c t="inlineStr" r="D1"><is><t>Date of Survey</t></is></c>';
        newHeader += '<c t="inlineStr" r="E1"><is><t>Owner Name</t></is></c>';
        // ⬇️ Continue all columns, including floors like:
        newHeader += '<c t="inlineStr" r="F1"><is><t>Ground Floor - Residential - RCC</t></is></c>';
        newHeader += '<c t="inlineStr" r="G1"><is><t>Ground Floor - Residential - Tin Sheet</t></is></c>';
        newHeader += '<c t="inlineStr" r="H1"><is><t>Ground Floor - Residential - KACCHA</t></is></c>';
        // ...and so on for all columns

        newHeader += '</row>';

        sheet.childNodes[0].childNodes[1].innerHTML = newHeader + sheet.childNodes[0].childNodes[1].innerHTML;
    }
                },
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    title: 'Property Report',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {search: 'applied', order: 'applied', page: 'all'}
                    }
                },
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {search: 'applied', order: 'applied', page: 'all'}
                    }
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible',
                        modifier: {search: 'applied', order: 'applied', page: 'all'}
                    }
                }
            ],
            columns: columns,
            order: [[3, 'desc']],
            pageLength: 10,
            lengthMenu: [10, 15, 25, 50, 100, 250, 500, 750, 1000, 1500, 2000, 4000],
        });

        // Reload table function
        function loadS() {
            table.ajax.reload();
        }

        // Search button triggers reload with filters
        $('#searchButton').on('click', loadS);

        // Reset filters and reload table
        $('#resetButton').on('click', function () {
            $('#wardNo, #userId, #startDate, #endDate').val('');
            table.ajax.reload();
        });
    });




    $(document).on("click", ".btn-delete", function () {
    if (!confirm("Are you sure you want to delete this item?")) {
        return; 
    }

    let delUrl = $(this).data("delid");

    $.ajax({
        url: delUrl,
        type: "GET",
        success: function (res) {
            if (res.status === 1) {
                toastr.success("Data has been deleted successfully");
                $('#propertiesTable').DataTable().ajax.reload();
            } else {
                toastr.error("Something went wrong");
            }
        },
        error: function () {
            toastr.error("Server error occurred!");
        }
    });
});

    </script>




    @endsection