<?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">User List</h6>
    </div>

    <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">
        <a href="add_user.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 w-100">
                <form method="get" id="paginationForm" class="row g-2 align-items-center w-100">
                    <!-- Show label -->
                    <div class="col-12 col-sm-auto">
                        <span class="fw-semibold">Show</span>
                    </div>

                    <!-- Per page select -->
                    <div class="col-12 col-sm-auto">
                        <label for="perPage" class="visually-hidden">Per page</label>
                        <select class="form-select form-select-sm" id="perPage" name="per_page" autocomplete="off" onchange="this.form.submit();">
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                    </div>

                    <!-- Search input -->
                    <div class="col-12 col-sm-6">
                        <label for="searchBox" class="visually-hidden">Search</label>
                        <input type="text" name="search" id="searchBox" class="form-control form-control-sm" placeholder="Search here....." autocomplete="off" />
                    </div>

                    <!-- Bulk Delete Button (hidden by default, shown when ≥1 checkbox is checked) -->
                    <div class="col-12 col-sm-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" class="text-md"></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>
                                <label for="checkAll" class="visually-hidden">Select All</label>
                                <input type="checkbox" id="checkAll" name="check_all" class="form-check-input">
                            </th>
                            <th>No</th>
                            <th>Name</th>
                            <th>Role</th>
                            <th>Mobile No.</th>
                            <th>Created On</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-leave-id="">
                            <td>
                                <label for="check1" class="visually-hidden">Select row 1</label>
                                <input type="checkbox" id="check1" name="selected_users[]" value="2" class="form-check-input row-check">
                            </td>
                            <td>1</td>
                            <td>Rahul</td>
                            <td>Admin</td>
                            <td>9872365414</td>
                            <td>21/01/2025</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="javascript:void(0);" onclick="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" title="Edit">
                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" onclick="" data-url="user.php" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" 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" title="Delete">
                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr data-leave-id="">
                            <td>
                                <label for="check2" class="visually-hidden">Select row 2</label>
                                <input type="checkbox" id="check2" name="selected_users[]" value="1" class="form-check-input row-check">
                            </td>
                            <td>2</td>
                            <td>Rajesh</td>
                            <td>User</td>
                            <td>8866959686</td>
                            <td>14/05/2025</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="javascript:void(0);" onclick="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center" title="Edit">
                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                    </a>
                                    <a href="javascript:void(0);" data-url="user.php" 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" title="Delete">
                                        <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <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" class=""></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" class=""></iconify-icon>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
  
<!--filter model-->
<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 for="rangeInput" class="form-label">Date</label>
                        <input type="text" id="rangeInput" name="daterange" class="form-control" placeholder="dd-mm-yyyy to dd-mm-yyyy" autocomplete="off" readonly>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label for="filterName" class="form-label">Name</label>
                        <input type="text" id="filterName" name="name" class="form-control" placeholder="Enter Name" autocomplete="name" value="">
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label for="singleDate" class="form-label">Create On</label>
                        <input type="text" id="singleDate" name="created_on" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off" readonly>
                    </div>
                </div>

                <!-- Fixed bottom buttons -->
                <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>
    // Open filter on button click
    document
        .getElementById("openFilter")
        .addEventListener("click", function () {
            document.getElementById("filterBox").style.display = "block";
        });

    // Close filter on close button click
    document
        .getElementById("closeFilter")
        .addEventListener("click", function () {
            document.getElementById("filterBox").style.display = "none";
        });

    // Optional: Close on clicking second close button (inside the header)
    document.querySelectorAll(".chatbox-close1").forEach((btn) => {
        btn.addEventListener("click", function () {
            document.getElementById("filterBox").style.display = "none";
        });
    });
</script>

<!--Date Picker -->
<script>
    new Litepicker({
        element: document.getElementById('rangeInput'),
        singleMode: false,
        format: 'DD-MM-YYYY',
        delimiter: ' to ',
        dropdowns: {
            months: true,
            years: true
        }
    });
    new Litepicker({
        element: document.getElementById('singleDate'),
        singleMode: true,
        format: 'DD-MM-YYYY',
        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();
        if (text.indexOf(input) > -1) {
            row.style.display = "";
        } else {
            row.style.display = "none";
        }
    });
});
</script>

<!--checkbox & bulk delete script-->
<script>
    const checkAll      = document.getElementById('checkAll');
    const bulkWrapper   = document.getElementById('bulkDeleteWrapper');
    const selectedCount = document.getElementById('selectedCount');

    // Returns all visible row checkboxes (respects search filter)
    function getVisibleRowCheckboxes() {
        return Array.from(
            document.querySelectorAll('#userTable tbody tr')
        ).filter(row => row.style.display !== 'none')
         .map(row => row.querySelector('input.row-check'))
         .filter(Boolean);
    }

    // Returns all checked row checkboxes (whether visible or not)
    function getCheckedRowCheckboxes() {
        return Array.from(
            document.querySelectorAll('#userTable tbody input.row-check:checked')
        );
    }

    // Update bulk delete button visibility & count, and "check all" state
    function updateBulkUI() {
        const checked = getCheckedRowCheckboxes();
        const count   = checked.length;

        if (count > 0) {
            bulkWrapper.style.display = '';
            selectedCount.textContent = count;
        } else {
            bulkWrapper.style.display = 'none';
            selectedCount.textContent = 0;
        }

        // Sync the "check all" header checkbox state
        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;
    }

    // Select / deselect all VISIBLE rows when header checkbox is clicked
    checkAll.addEventListener('change', function () {
        getVisibleRowCheckboxes().forEach(cb => cb.checked = this.checked);
        updateBulkUI();
    });

    // Listen for individual row checkbox changes via event delegation
    document.getElementById('userTable').addEventListener('change', function (e) {
        if (e.target.matches('tbody input.row-check')) {
            updateBulkUI();
        }
    });

    // Bulk delete button click
    document.getElementById('bulkDeleteBtn').addEventListener('click', function () {
        const checked = getCheckedRowCheckboxes();
        const ids     = checked.map(cb => cb.value);
        const count   = ids.length;

        Swal.fire({
            title: 'Delete ' + count + ' user' + (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) {
                // Build query string and redirect — adjust URL to match your back-end
                const params = ids.map(id => 'ids[]=' + encodeURIComponent(id)).join('&');
                window.location.href = 'user.php?action=bulk_delete&' + params;
            }
        });
    });
</script>

<!--single row delete btn script-->
<script>
document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();

        let url = this.getAttribute('href');

        Swal.fire({
            title: 'Are you sure?',
            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) {
                window.location.href = url;
            }
        });
    });
});
</script>


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