@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')
<style>
    .wrap-text {
  word-break: break-word;
  white-space: normal;
  max-width: 400px; /* or whatever width fits your layout */
}

</style>
<!--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="4">Owner Name</option> 
                                    <option value="5">Mobile No</option>
                                    <option value="6">Ward Name</option> 
                                    <option value="7">Parcel No</option>
                                    <option value="8">Property No</option> 
                                    <option value="9">Tax Rate Zone</option> 
                                    <option value="10">Floors</option>
                                    <option value="11">Total Built Up Area SqFt/SqMeter</option> 
                                    <option value="12">Total Tax Amount / Year</option> 
                                    <option value="13">Date of Survey</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>---------Owner Name---------</th> 
                                            <th>Ward Name</th>  
                                            <th>Parcel No</th>
                                            <th>Property No</th> 
                                            <th>Tax Rate Zone</th>
                                            <th>Floors</th>
                                            <th>Total Built Up Area SqFt/SqMeter</th> 
                                            <th>Total Tax Amount / Year</th> 
                                            <th>Date of Survey </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 =``;
                    let TotalAmount =0;
                    let balance =0;
                    tableBody.append(`
                        <tr>
                            <td>${ii++}</td>
                            <td>
                                <a target="_new" href="{{ route('properties.show', '') }}/${survey.id}" class="btn btn-info btn-sm">View</a>  
                            </td>
                            <td>${survey.nagarpalikaId}</td>
                            <td class="wrap-text">${ownerName}<br> S/o ${fatherName}</td>  
                            <td>${survey.ward.name}</td> 
                            <td>${survey.parcelNo}</td>
                            <td>${survey.propertyNo}</td>  
                            <td class="wrap-text">${ survey.taxRateZone == 'Other' ? survey.taxRateZone  : survey.tax_rate_zone.name }</td> 
                            <td>
                              ${floorData.map((floor, index) => {
                              
                                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 -
                                TotalAmount += finalAmount;
                                const colorList = ['red', 'blue', 'green', 'orange', 'purple']; // Add more colors as needed
                                const color = colorList[index % colorList.length]; // Cycle through colors
                            
                                return `<div style="color: ${color};">
                                    ${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)} 
                                    || Construction Type - ${floor.constructionType == 'Other' 
                                        ? floor.constructionType + '('+ floor.constructionTypeOther + ')' 
                                        : yearOfConstructions(floor.constructionType , response.natureOfConstructionLists)}
                                    <br>|| Area -${floor.areaSqFt} SqFt / ${floor.areaSqMt} SqMt
                                    || Tax Rate - ₹${rate}/- 
                                    || ALV - ₹${baseAmount.toFixed(2)}/-
                                   
                                    || Tax Amount - ₹${finalAmount.toFixed(2)}/-
                                    </div>`;
                              }).join("")} 
                            </td>
                            <td>${ totalPlinthFormatted ?? survey.totalBuiltUpAreaSqFt}SqFt/${ totalPlinthSmFormatted ?? survey.totalBuiltUpAreaSqMeter} SqMt</td> 
                            <td>₹${TotalAmount.toFixed(2)}/-</td>
                            <td>${formattedDate}</td>  
                        </tr>
                    `);
                });
// || Maintenance Dis. -   ₹${discount.toFixed(2)}/- 
                // 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