@extends('layouts.layout')
<style>
    .table-highlight {
        background-color: #0139694f;
        /* soft yellow for the whole row */
    }
</style>
@section('content')
    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>


        <div class="page-heading">

            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>Auto Verbal</h3>
                        <p class="text-subtitle text-muted">For user to check they list</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Components -> Verbal</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <section id="basic-horizontal-layouts">
                <div class="row match-height">
                    <div class="col-lg-6 col-md-5 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Verbal Form</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-horizontal" id="updateUserForm" enctype="multipart/form-data"
                                        method="POST">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">

                                                <div class="col-md-4">
                                                    <label>ID</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="verbal_id" class="form-control"
                                                        placeholder="ID" name="verbal_id" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Protect ID</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="protect_id" class="form-control"
                                                        placeholder="Protect ID" name="protect_id" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Address</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="address" class="form-control"
                                                        placeholder="Address" name="address" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Phume</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="Phume" class="form-control"
                                                        placeholder="Phume" name="Phume" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Description</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="description" class="form-control"
                                                        placeholder="Description" name="description" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Area/sqm</label>
                                                </div>
                                                <div class="col-md-8 form-group">

                                                    <input type="text" id="area_sqm" class="form-control"
                                                        placeholder="Area/sqm" name="area_sqm" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Min Value/sqm</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="min_value_sqm" name="min_value_sqm"
                                                        placeholder="Min Value/sqm" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Max Value/sqm</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="max_value_sqm" name="max_value_sqm"
                                                        placeholder="Max Value/sqm" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Min Value</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="min_value" name="min_value"
                                                        placeholder="Min Value" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Max Value</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="max_value" name="max_value"
                                                        placeholder="Max Value" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Owner</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="owner" name="owner"
                                                        placeholder="Owner" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Owner Phone</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="owner_phone" name="owner_phone"
                                                        placeholder="Owner Phone" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Auto Verbal By</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="verbal_by" name="verbal_by"
                                                        placeholder="Auto Verbal By" class="form-control" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Phone Number</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="phone_number" name="phone_number"
                                                        placeholder="Phone Number" class="form-control" readonly>
                                                </div>




                                                <div class="col-sm-12 d-flex justify-content-end">
                                                    <button type="submit"
                                                        class="btn btn-primary me-1 mb-1">Submit</button>
                                                    <button type="reset"
                                                        class="btn btn-light-secondary me-1 mb-1">Reset</button>
                                                </div>

                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-7 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Location :</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <img src="https://maps.googleapis.com/maps/api/staticmap?center=11.5560340,104.9070730&zoom=18&size=800x700&maptype=satellite&markers=color:red%7C11.5560340,104.9070730&key=AIzaSyDeGw77lkG2sXOk_xpGCZViqX6UDet2J-A"
                                        style="width: 100%;"></img>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </section>





            <section class="section">
                <div class="row" id="table-striped">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row g-3">
                                    <div class="col-md-8">
                                        <h4 class="card-title">Verbal List</h4>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="searchInput" class="form-control"
                                            placeholder="Search by Protect ID..." aria-label="Search"
                                            aria-describedby="search-button">
                                    </div>
                                </div>
                            </div>
                            <div class="card-content">

                                <div id="tableSpinner" class="text-center py-5">
                                    <div class="spinner-border text-primary" style="width:3rem;height:3rem;"></div>
                                    <p class="mt-2">Loading table...</p>
                                </div>
                            </div>



                            <div id="tableContent" style="display:none;">
                                <div class="table-responsive">
                                    <table class="table table-striped mb-0">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>PROTECT ID</th>
                                                <th>CONTROL USER</th>
                                                <th>NAME</th>
                                                <th>Lat & Log</th>
                                                <th>PHONE</th>
                                                <th>PROPERTY NAME</th>
                                                <th>BANK</th>
                                                <th>DATE</th>
                                                <th>STATUS</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                            <!-- dynamic data -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <nav aria-label="Page navigation example">
                    <ul class="pagination pagination-primary justify-content-end">

                    </ul>
                </nav>
            </section>

        </div>
        @include('layouts.footer')
    </div>

    {{-- <script>
        document.addEventListener("DOMContentLoaded", function() {

            let currentPage = 1;
            let perPage = 20;

            async function loadTable(page = 1) {
                const spinner = document.getElementById('tableSpinner');
                const tableContent = document.getElementById('tableContent');
                const tableBody = document.getElementById('tableBody');
                const pagination = document.querySelector('.pagination');

                spinner.style.display = 'block';
                tableContent.style.display = 'none';

                try {
                    const response = await fetch(`/listVerbal?perPage=${perPage}&page=${page}`);
                    const result = await response.json();

                    tableBody.innerHTML = '';

                    result.data.forEach((item, index) => {
                        tableBody.innerHTML += `
                    <tr>
                        <td>${item.verbal_id}</td>
                        <td>${item.protectID ?? '-'}</td>
                        <td>${item.control_user ?? '-'}</td>
                        <td>${item.username ?? '-'}</td>
                        <td>${item.latlong_la} - ${item.latlong_log}</td>
                        <td>${item.tel_num ?? '-'}</td>
                        <td>${item.property_type_name ?? '-'}</td>
                        <td>${item.bank_name ?? '-'}</td>
                        <td>${item.verbal_date ?? '-'}</td>
                        <td>
                            <span class="badge bg-${item.status === 'pending' ? 'warning' : 'success'}">
                                ${item.status}
                            </span>
                        </td>
                    </tr>
                `;
                    });

                    renderPagination(result, page);

                } catch (error) {
                    console.error(error);
                } finally {
                    spinner.style.display = 'none';
                    tableContent.style.display = 'block';
                }
            }

            function renderPagination(data, currentPage) {
                const pagination = document.querySelector('.pagination');
                pagination.innerHTML = '';

                let totalPages = data.lastPage;

                // Previous button
                pagination.innerHTML += `
                    <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">Prev</a>
                    </li>
                `;

                // Page numbers
                for (let i = 1; i <= totalPages; i++) {
                    if (i <= 5 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
                        pagination.innerHTML += `
                    <li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>
                `;
                    }
                }

                // Next button
                pagination.innerHTML += `
                    <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">Next</a>
                    </li>
            `;
            }

            // Make global
            window.changePage = function(page) {
                if (page < 1) return;
                currentPage = page;
                loadTable(page);
            }

            // First load
            loadTable(1);
        });
    </script> --}}

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            let currentPage = 1;
            let perPage = 20;
            let searchQuery = '';

            async function loadTable(page = 1) {
                const spinner = document.getElementById('tableSpinner');
                const tableContent = document.getElementById('tableContent');
                const tableBody = document.getElementById('tableBody');

                spinner.style.display = 'block';
                tableContent.style.display = 'none';

                try {
                    const response = await fetch(
                        `listVerbal?perPage=${perPage}&page=${page}&search=${encodeURIComponent(searchQuery)}`
                    );
                    const result = await response.json();

                    // Safely get data array
                    const items = result.data ?? [];
                    

                    // Jump to pageOfMatch if provided and different from current
                    if (result.pageOfMatch && result.pageOfMatch !== page) {
                        currentPage = result.pageOfMatch;
                        return loadTable(currentPage); // reload table on correct page
                    }

                    tableBody.innerHTML = '';

                    if (items.length === 0) {
                        tableBody.innerHTML = `
                    <tr>
                        <td colspan="10" class="text-center">No results found</td>
                    </tr>
                `;
                    } else {
                        items.forEach((item) => {
                            const rowData = [
                                item.verbal_id ?? '-',
                                item.protectID ?? '-',
                                item.control_user ?? '-',
                                item.username ?? '-',
                                `${item.latlong_la} - ${item.latlong_log}`,
                                item.tel_num ?? '-',
                                item.property_type_name ?? '-',
                                item.bank_name ?? '-',
                                item.verbal_date ?? '-',
                                item.status ?? '-'
                            ];

                            // Highlight entire row if any cell matches
                            const match = searchQuery ?
                                rowData.some(col => col.toString().toLowerCase().includes(searchQuery
                                    .toLowerCase())) :
                                false;

                            tableBody.innerHTML += `
                        <tr class="${match ? 'table-highlight' : ''}">
                            <td>${rowData[0]}</td>
                            <td>${rowData[1]}</td>
                            <td>${rowData[2]}</td>
                            <td>${rowData[3]}</td>
                            <td>${rowData[4]}</td>
                            <td>${rowData[5]}</td>
                            <td>${rowData[6]}</td>
                            <td>${rowData[7]}</td>
                            <td>${rowData[8]}</td>
                            <td>
                                <span class="badge bg-${item.status === 'pending' ? 'warning' : 'success'}">
                                    ${rowData[9]}
                                </span>
                            </td>
                            <td>

                                            <div class="dropdown ">

                                                <div class="text-center rounded dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
                                                    <svg class="bi" width="1em" height="1em" fill="currentColor" style="cursor:pointer;" >
                                                        <use xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#three-dots-vertical" />
                                                    </svg>
                                                </div>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                                    
                                                    <a class="dropdown-item" href="#" onclick="viewDetails(${item.protectID})"><i class="bi bi-eye"></i>  View Details</a>
                                                    <a class="dropdown-item"
                                                        href="#">
                                                            <i class="bi bi-x-circle"></i> 
                                                            GGG
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item"
                                                        href="#">
                                                            <i class="bi bi-trash"></i> Delete User
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                        </tr>
                    `;
                        });
                    }

                    renderPagination(result, page);

                } catch (error) {
                    console.error("Error loading table:", error);
                    tableBody.innerHTML = `
                <tr>
                    <td colspan="10" class="text-center text-danger">Failed to load data</td>
                </tr>
            `;
                } finally {
                    spinner.style.display = 'none';
                    tableContent.style.display = 'block';
                }
            }

            function renderPagination(data, currentPage) {
                const pagination = document.querySelector('.pagination');
                pagination.innerHTML = '';

                const totalPages = data.lastPage ?? 1;

                // Previous
                pagination.innerHTML += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage - 1})"><i class="bi bi-chevron-left"></i></a>
            </li>
        `;

                // Page numbers
                for (let i = 1; i <= totalPages; i++) {
                    if (i <= 5 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
                        pagination.innerHTML += `
                    <li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>
                `;
                    }
                }

                // Next
                pagination.innerHTML += `
            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage + 1})"><i class="bi bi-chevron-right"></i></a>
            </li>
        `;
            }

            window.changePage = function(page) {
                if (page < 1) return;
                currentPage = page;
                loadTable(page);
            }

            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', function() {
                searchQuery = this.value.trim();
                currentPage = 1; // reset to first page for new search
                loadTable(currentPage);
            });

            // Initial load
            loadTable(currentPage);
        });





        function viewDetails(id) {
            fetch('verbal/' + id)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('verbal_id').value = data.verbal_land_id || '';
                    document.getElementById('protect_id').value = data.verbal_landid || '';
                    document.getElementById('address').value = data.address || '';
                    document.getElementById('description').value = data.verbal_land_des || '';
                    document.getElementById('area_sqm').value = data.verbal_land_area || '';
                    document.getElementById('min_value_sqm').value = data.verbal_land_minsqm || '';
                    document.getElementById('max_value_sqm').value = data.verbal_land_maxsqm || '';
                    document.getElementById('min_value').value = data.verbal_land_minvalue || '';
                    document.getElementById('max_value').value = data.verbal_land_maxvalue || '';

                    // These fields have no matching data in the API response:
                    // owner, owner_phone, verbal_by, phone_number, tel_num
                    // Either remove them or confirm new field names from the API
                })
                .catch(error => {
                    console.error('Error fetching verbal details:', error);
                });
        }
    </script>
@endsection