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

    <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">
        <a href="add_complaint.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>
    </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="complaintTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll" class="form-check-input"></th>
                            <th>No</th>
                            <th>Flat No</th>
                            <th>Type</th>
                            <th>Priority</th>
                            <th>Date</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>101</td>
                            <td>Maintenance</td>
                            <td>High</td>
                            <td>12/03/2026</td>
                            <td><span class="badge bg-warning">Pending</span></td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="view_complaint.php?id=1" 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="edit_complaint.php?id=1" 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 radius-8 border-0 h-32-px w-32-px d-flex align-items-center justify-content-center" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-left"></iconify-icon></a></li>
                    <li class="page-item"><a class="page-link bg-primary-600 text-white radius-8 border-0 h-32-px w-32-px d-flex align-items-center justify-content-center" href="javascript:void(0)">1</a></li>
                    <li class="page-item"><a class="page-link bg-neutral-200 text-secondary-light radius-8 border-0 h-32-px w-32-px d-flex align-items-center justify-content-center" href="javascript:void(0)">2</a></li>
                    <li class="page-item"><a class="page-link bg-neutral-200 text-secondary-light radius-8 border-0 h-32-px w-32-px d-flex align-items-center justify-content-center" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-right"></iconify-icon></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

    rows.forEach(function (row) {
        row.style.display = row.textContent.toLowerCase().includes(input) ? "" : "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 flatNo   = row.querySelector('td:nth-child(3)').textContent.trim();

            Swal.fire({
                ...swalConfig,
                title: 'Delete Complaint?',
                html: `Are you sure you want to delete complaint for Flat <strong>"${flatNo}"</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('#complaintTable 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: `Complaint for Flat <strong>"${flatNo}"</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('#complaintTable tbody tr'))
        .filter(row => row.style.display !== 'none')
        .map(row => row.querySelector('.row-check'))
        .filter(Boolean);
}

function getCheckedRowCheckboxes() {
    return Array.from(
        document.querySelectorAll('#complaintTable 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('complaintTable').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 + ' complaint' + (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('#complaintTable tbody tr')
                .forEach((row, index) => {
                    row.querySelector('td:nth-child(2)').textContent = index + 1;
                });

            Swal.fire({
                title: 'Deleted!',
                text: 'Selected complaints 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'; ?>