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

    $wards = Ward::all();
    $taxRate = CurrentTaxRateZone::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' type='text/css' />
@endsection
@section('content')

<!--wrapper onload="info_noti()"-->
    <div class="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">Property   </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"> Cash Desk </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 -->
                
                <!-- Displaying Error Messages -->
                            </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 Cash Desk Search</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        
                        <div class="row mb-2">  
                            <div class="col-md-3">  
                                <label class="mb-1" for="ulb">ULB</label>
                                <select name="ulb" id="ulb" class="form-select">
                                    <option value="">Select ULB</option> 
                                    <!-- Add more <option> elements here -->
                                </select>   
                            </div>
                            <div class="col-md-3 mb-2">  
                                <label class="mb-1" for="assessmentYear">Assessment Year</label>
                                <select name="assessmentYear" id="assessmentYear" class="form-select">
                                    <option value="">Select Assessment Year</option> 
                                </select>   
                            </div> 
                            <hr>
                        </div>
                        <div class="row mb-2"> 
                            <div class="col-md-12 mb-3">  
                                <h5>Search Criteria</h5>
                            </div> 
                        
                            <!-- Property No -->
                            <div class="col-md-3 mb-2">  
                                <label class="mb-1" for="property_no">Property No</label>
                                <input type="text" name="property_no" id="property_no" class="form-control" placeholder="Enter Property No"> 
                            </div>
                             <!-- Parcel No -->
                            <div class="col-md-3 mb-2">  
                                <label class="mb-1" for="parcelNo">Parcel No</label>
                                <input type="text" name="parcelNo" id="parcelNo" class="form-control" placeholder="Enter Parcel No"> 
                            </div>
                        
                            <!-- Owner Name -->
                            <div class="col-md-3 mb-2">  
                                <label class="mb-1" for="owner_name">Owner Name</label>
                                <input type="text" name="owner_name" id="owner_name" class="form-control" placeholder="Enter Owner Name"> 
                            </div>
                        
                            <!-- Mobile No -->
                            <div class="col-md-3 mb-2">  
                                <label class="mb-1" for="mobile_no">Mobile No</label>
                                <input type="text" name="mobile_no" id="mobile_no" class="form-control" placeholder="Enter Mobile No"> 
                            </div>
                        
                            <!-- Ward Name -->
                            <div class="col-md-2 mb-2">  
                                <label class="mb-1" for="wardNo">Ward Name</label>
                                <select name="wardNo" id="wardNo" class="form-select">
                                    <option value="">Select Ward Name</option>
                                              @foreach($wards as $ward)
                                                <option value="{{ $ward->id }}">{{ $ward->name }}</option>
                                                @endforeach                               
                                            </select>  
                            </div>

                            
                             <!-- Zone Name -->
                            <div class="col-md-2 mb-2">  
                                <label class="mb-1" for="taxRateZone">Zone Name</label>
                                <select name="taxRateZone" id="taxRateZone" class="form-select">
                                    <option value="">Select Zone Name</option> 
                                                                            
                                        @foreach ($taxRate as $rate )s
                                                <option value="{{ $rate->id }}">{{ $rate->name }}</option>
                                        @endforeach
                                                                    </select> 
                            </div>
                        
                           
                        
                            <!-- City -->
                            <div class="col-md-2 mb-2">  
                                <label class="mb-1" for="city">City</label>
                                <input type="text" name="city" id="city" class="form-control" placeholder="Enter City Name"> 
                            </div>
                        
                            <!-- Pincode -->
                            <div class="col-md-2 mb-2">  
                                <label class="mb-1" for="pincode">Pincode</label>
                                <input type="text" name="pincode" id="pincode" class="form-control" placeholder="Enter Pincode"> 
                            </div>
                        
                            <!-- Street Name -->
                            <div class="col-md-2 mb-2">  
                                <label class="mb-1" for="street_name">Street Name</label>
                                <input type="text" name="street_name" id="street_name" class="form-control" placeholder="Enter Street Name"> 
                            </div>
                        
                            <!-- Submit Button -->
                            <div class="col-md-2 mt-4"> 
                                <button type="submit" class="btn btn-primary w-100" onclick="loadS()">Search</button>
                            </div> 
                        </div>

                        <!-- Loader Spinner -->
                        <div id="loader" style="display:none; text-align:center;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>


                      
                        <div class="table-responsive">
                            
                            <!-- Data Table -->
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Property No</th>
                                            <th>Parcel No</th>
                                            <th>Owner Name</th>
                                            <th>Mobile No</th>
                                            <th>Ward Name</th>
                                            <th>Zone Name</th> 
                                            <th>City</th>
                                            <th>Pincode</th>
                                            <th>Street Name</th>
                                        </tr>
                                    </thead>
                                    <tbody id="surveyTableBody">
                                        <tr><td colspan="9" class="text-center">Loading...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        
                            <!-- Pagination -->
                            <div id="paginationLinks" class="mt-3"></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>
    const baseUrl = "{{ url('mis.cash-desk-propary-tax-info') }}";
</script>
<script>
    const startYear = 2020;
    const currentYear = new Date().getFullYear() + 1; // Add one extra year
    const select = document.getElementById('assessmentYear');

    for (let year = startYear; year < currentYear; year++) {
        const nextYear = year + 1;
        const optionText = `${year}-${nextYear}`;
        const option = new Option(optionText, optionText);
        select.add(option);
    }
</script> 

<!-- Add this in your <head> -->
<meta name="csrf-token" content="NewGarszXwUX02nXWi7PZ1QRN1cfjVyhr9X0DUBq">

<script>
    // Attach CSRF token to all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function loadS(page = 1) {
        const requestData = {
            ulb: $('#ulb').val(),
            assessmentYear: $('#assessmentYear').val(),
            property_no: $('#property_no').val(),
            owner_name: $('#owner_name').val(),
            mobile_no: $('#mobile_no').val(),
            wardNo: $('#wardNo').val(),
            taxRateZone: $('#taxRateZone').val(),
            parcelNo: $('#parcelNo').val(),
            city: $('#city').val(),
            pincode: $('#pincode').val(),
            street_name: $('#street_name').val(),
            page: page
        };

        $.ajax({
        url: '{{url('gis/properties/cash-desk') }}',
        method: 'POST',
        data: requestData,
        dataType: 'json',
        beforeSend: function () {
        // Show loader and hide table
        $('#loader').show();
        $('#surveyTableBody').hide();
    },
    success: function(response) {
        console.log(response);
        renderTable(response.surveyForms.data);
        renderPagination(response.surveyForms.current_page, response.surveyForms.last_page);
    },
    error: function(xhr) {
        console.error('Error loading data:', xhr);
        $('#surveyTableBody').html(`<tr><td colspan="9">Error loading data</td></tr>`);
    },
    complete: function () {
        // Always hide loader and show table
        $('#loader').hide();
        $('#surveyTableBody').show();
    }
});

    }

    function renderTable(data) {
        const tbody = $('#surveyTableBody');
        tbody.empty();

        if (!data || data.length === 0) {
            tbody.append(`<tr><td colspan="9">No records found.</td></tr>`);
            return;
        }

        data.forEach(item => {
            let ownerDetails = null;
            if (typeof item.ownerDetails === 'string') 
            {    
                ownerDetails = JSON.parse(item.ownerDetails);
            } 
            else 
            {
                ownerDetails = item.ownerDetails; 
            }
            
            //let ownerDetails = JSON.parse(item.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 row = `
                <tr>
                    <td>
                      <a target="_new" href="${baseUrl}/${item.id}" class="btn btn-info btn-sm">
                        ${item.nagarpalikaId || ''}
                      </a>
                    </td>

                    <td>${item.parcelNo || ''}</td>
                    <td>${ownerName || ''}</td>
                    <td>${mobile || ''}</td>
                    <td>${item.ward.name || ''}</td>
                    <td>${item.tax_rate_zone.name || ''}</td> 
                    <td>${item.city || ''}</td>
                    <td>${item.pincode || ''}</td>
                    <td>${item.streetNoName || ''}</td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    function renderPagination(currentPage, totalPages) {
        const pagination = $('#paginationLinks');
        console.log(currentPage);
        console.log(totalPages);
        pagination.empty();

        if (totalPages <= 1) return;

        let html = '';

        if (currentPage > 1) {
            html += `<button class="btn btn-sm btn-outline-primary me-1" onclick="loadS(${currentPage - 1})">Previous</button>`;
        }

        if (currentPage < totalPages) {
            html += `<button class="btn btn-sm btn-outline-primary" onclick="loadS(${currentPage + 1})">Next</button>`;
        }

        pagination.html(html);
    }
</script>
 

@endsection