<?php include 'header.php'; ?>

<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Visitor Record List</h6>
    </div>

    <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">
        <a href="add_visitor_record.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Add">
            <iconify-icon icon="ic:baseline-plus" class="icon text-xl line-height-1"></iconify-icon>
        </a>
        <a type="button" id="openFilter" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Filter">
            <iconify-icon icon="mdi:filter-variant" class="icon text-xl line-height-1"></iconify-icon>
        </a>
    </div>

    <div class="card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex flex-wrap align-items-center gap-3">
                <form method="get" id="paginationForm" class="row g-2 align-items-center w-100">
                    <div class="col-12 col-sm-auto">
                        <span class="fw-semibold">Show</span>
                    </div>
                    <div class="col-12 col-sm-auto">
                        <select class="form-select form-select-sm" name="per_page" onchange="this.form.submit();">
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-5">
                        <input type="text" name="search" id="searchBox"
                               class="form-control form-control-sm"
                               placeholder="Search here....." />
                    </div>
                    
                    <div class="col-auto" id="bulkDeleteWrapper" style="display:none;">
                        <button type="button" id="bulkDeleteBtn"
                            class="btn btn-danger btn-sm d-flex align-items-center gap-1">
                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                            Delete Selected (<span id="selectedCount">0</span>)
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table modern-table mb-0" id="userTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll" class="form-check-input"></th>
                            <th>No</th>
                            <th>Visitor Name</th>
                            <th>Mobile No</th>
                            <th>Flat/Unit Visiting</th>
                            <th>Resident</th>
                            <th>Purpose</th>
                            <th>In Time</th>
                            <th>Out Time</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> <input type="checkbox" class="form-check-input row-check" value="1"></td>
                            <td>1</td>
                            <td>Rajesh Kumar</td>
                            <td>9876543210</td>
                            <td class="text-center">A-101</td>
                            <td>Rahul Sharma</td>
                            <td>Delivery</td>
                            <td>12-03-2026 10:15</td>
                            <td>12-03-2026 10:30</td>
                            <td>Left</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="view_visitor_record.php" class="tooltip-button w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="View">
                                        <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" class="tooltip-button w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-success" title="Edit">
                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" title="Delete">
                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="form-check-input row-check" value="2"></td>
                            <td>2</td>
                            <td>Amit Patel</td>
                            <td>9123456789</td>
                            <td class="text-center">B-203</td>
                            <td>Neha Shah</td>
                            <td>Personal</td>
                            <td>12-03-2026 10:15</td>
                            <td>12-03-2026 10:30</td>
                            <td>Pending</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="view_visitor_record.php" class="tooltip-button w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="View">
                                        <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" class="tooltip-button w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-success" title="Edit">
                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" title="Delete">
                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">
                <span>Showing 1 to 10 of 12 entries</span>
                <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                    <li class="page-item">
                        <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-left"></iconify-icon></a>
                    </li>
                    <li class="page-item">
                        <a class="page-link text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md bg-primary-600 text-white" href="javascript:void(0)">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-right"></iconify-icon></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--filter panel-->
<div class="chatbox1" id="filterBox" style="display: none">
    <div class="chatbox-close1" id="closeFilter"></div>
    <div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
        <div style="display:flex; justify-content:space-between; flex-shrink:0;">
            <h5 style="margin:10px 0px 0px 17px">Filter</h5>
            <button class="chatbox-close1" style="font-size:35px; margin-right:15px">&times;</button>
        </div>
        <hr style="flex-shrink:0;" />
        <div style="margin:0px 17px 0px 17px; flex:1;">
            <form class="form row g-3" action="" method="get" id="filterForm" style="margin-top:5px; height:100%; display:flex; flex-direction:column;">
                <div style="flex:1;">
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Date Range</label>
                        <input type="text" id="rangeInput" class="form-control" placeholder="dd-mm-yyyy to dd-mm-yyyy" readonly>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Flat</label>
                        <input type="text" class="form-control" placeholder="Enter Flat No" readonly>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Visitor Name</label>
                        <input type="text" name="visitor_name" class="form-control" placeholder="Enter Visitor Name" value="">
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Resident Name</label>
                        <input type="text" name="resident_name" class="form-control" placeholder="Enter Resident Name" value="">
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">In Time</label>
                        <input type="datetime-local" name="in_time" class="form-control">
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Out Time</label>
                        <input type="datetime-local" name="out_time" class="form-control">
                    </div>
                </div>
                <div style="background:white; padding:10px; border-top:1px solid #ddd; display:flex; flex-shrink:0;">
                    <div class="col-lg-6 p-2">
                        <button type="submit" style="width:100%" class="btn btn-primary">Submit</button>
                    </div>
                    <div class="col-lg-6 p-2">
                        <button type="button" id="resetButton" style="width:100%" class="btn btn-primary">Reset</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--date picker-->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>

<!--filter script-->
<script>
document.getElementById("openFilter").addEventListener("click", function () {
    document.getElementById("filterBox").style.display = "block";
});

document.querySelectorAll(".chatbox-close1").forEach(function (btn) {
    btn.addEventListener("click", function () {
        document.getElementById("filterBox").style.display = "none";
    });
});
</script>

<!--date picker script-->
<script>
new Litepicker({
    element: document.getElementById('rangeInput'),
    singleMode: false,
    format: 'DD-MM-YYYY',
    delimiter: ' to ',
    dropdowns: { months: true, years: true }
});
</script>

<!--search script-->
<script>
document.getElementById("searchBox").addEventListener("keyup", function () {
    let input = this.value.toLowerCase();
    let rows  = document.querySelectorAll("#userTable tbody tr");

    rows.forEach(function (row) {
        let text = row.textContent.toLowerCase();
        row.style.display = text.indexOf(input) > -1 ? "" : "none";
    });
});
</script>

<!--delete script-->
<script>
document.addEventListener('DOMContentLoaded', function () {

    // Shared SweetAlert config
    const swalConfig = {
        width: '350px',
        customClass: {
            popup:         'swal-modern',
            title:         'swal-title',
            htmlContainer: 'swal-text',
            confirmButton: 'swal-confirm',
            cancelButton:  'swal-cancel'
        }
    };

    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const row         = this.closest('tr');
            const visitorName = row.querySelector('td:nth-child(3)').textContent.trim();

            Swal.fire({
                ...swalConfig,
                title: 'Delete Visitor?',
                html: `Are you sure you want to delete <strong>"${visitorName}"</strong>?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
            }).then((result) => {
                if (result.isConfirmed) {
                    row.remove();

                    // Update serial numbers
                    const rows = document.querySelectorAll('#userTable tbody tr');
                    rows.forEach((r, i) => {
                        r.querySelector('td:nth-child(2)').textContent = i + 1;
                    });

                    // Update entries text
                    const totalRows = rows.length;
                    const info = document.querySelector('.d-flex.align-items-center.justify-content-between.flex-wrap.gap-2.mt-24 span');
                    if (info) info.textContent = `Showing 1 to ${totalRows} of ${totalRows} entries`;

                    Swal.fire({
                        ...swalConfig,
                        title: 'Deleted!',
                        html: `<strong>"${visitorName}"</strong> has been deleted successfully.`,
                        icon: 'success',
                        confirmButtonColor: '#4a63ff',
                    });
                }
            });
        });
    });
});
</script>
<script>
const checkAll = document.getElementById('checkAll');
const bulkWrapper = document.getElementById('bulkDeleteWrapper');
const selectedCount = document.getElementById('selectedCount');

function getVisibleRowCheckboxes() {
    return Array.from(document.querySelectorAll('#userTable tbody tr'))
        .filter(row => row.style.display !== 'none')
        .map(row => row.querySelector('.row-check'))
        .filter(Boolean);
}

function getCheckedRowCheckboxes() {
    return Array.from(
        document.querySelectorAll('#userTable tbody .row-check:checked')
    );
}

function updateBulkUI() {
    const checked = getCheckedRowCheckboxes();
    const count = checked.length;

    bulkWrapper.style.display = count > 0 ? '' : 'none';
    selectedCount.textContent = count;

    const visibleBoxes = getVisibleRowCheckboxes();
    const visibleChecked = visibleBoxes.filter(cb => cb.checked).length;

    checkAll.checked =
        visibleBoxes.length > 0 &&
        visibleChecked === visibleBoxes.length;

    checkAll.indeterminate =
        visibleChecked > 0 &&
        visibleChecked < visibleBoxes.length;
}

checkAll.addEventListener('change', function () {
    getVisibleRowCheckboxes().forEach(cb => cb.checked = this.checked);
    updateBulkUI();
});

document.getElementById('userTable').addEventListener('change', function(e) {
    if (e.target.matches('.row-check')) {
        updateBulkUI();
    }
});

document.getElementById('bulkDeleteBtn').addEventListener('click', function () {

    const checked = getCheckedRowCheckboxes();
    const count = checked.length;

    Swal.fire({
        title: 'Delete ' + count + ' visitor record' + (count > 1 ? 's' : '') + '?',
        text: 'This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        width: '350px',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        customClass: {
            popup: 'swal-modern',
            title: 'swal-title',
            htmlContainer: 'swal-text',
            confirmButton: 'swal-confirm',
            cancelButton: 'swal-cancel'
        }
    }).then((result) => {

        if (result.isConfirmed) {

            checked.forEach(cb => {
                cb.closest('tr').remove();
            });

            updateBulkUI();

            document.querySelectorAll('#userTable tbody tr')
                .forEach((row, index) => {
                    row.querySelector('td:nth-child(2)').textContent = index + 1;
                });

            Swal.fire({
                title: 'Deleted!',
                text: 'Selected visitor records have been deleted.',
                icon: 'success',
                width: '350px',
                confirmButtonColor: '#4a63ff',
                customClass: {
                    popup: 'swal-modern',
                    title: 'swal-title',
                    htmlContainer: 'swal-text',
                    confirmButton: 'swal-confirm'
                }
            });
        }
    });
});
</script>
<?php include 'footer.php'; ?>