@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' />
<style>
    .table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .table th, .table td {
        border: 1px solid #ddd;
        padding: 8px;
        word-wrap: break-word;
        text-align: center;
    }
    .table th {
        background-color: #f2f2f2;
    }
    .tab  { 
            text-align: center; 
        }
    .text-center {
        text-align: center;
    }
</style>
  <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>
  <meta name="csrf-token" content="{{ csrf_token() }}">


@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">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 -->
                @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 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($zones as $zone)
                                        <option value="{{ $zone->id }}">{{ $zone->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>

                      
                        <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>Pay Now</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="10" 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 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>

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

<!-- Add this in your <head> -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<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('admin/properties/cash-desk') }}', // <-- Laravel route
            method: 'POST',
            data: requestData,
            dataType: 'json',
            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>`);
            }
        });
    }

    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="{{ route('properties.cash-desk-propary-tax-info', '') }}/${item.id}" class="btn btn-info btn-sm">${item.nagarpalikaId || ''}</a> </td>
                    <td><a target="_new" href="{{ route('properties.cash-desk-propary-tax-info-and-pay', '') }}/${item.id}" class="btn btn-info btn-sm">Pay Now</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