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

<style>
    .role-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        list-style: none;
        padding: 4px 0;
        margin-top: 4px;
        display: none;
        z-index: 999;
        max-height: 120px;
        overflow-y: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    .role-dropdown li {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.2;
        cursor: pointer;
    }

    .role-dropdown li:hover {
        background: #f5f7ff;
    }
</style>

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

    <div class="col-12">
        <div class="row">
            <div class="col-xl-4 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-4 text-xl"></h6>
                        <form id="modelform" action="" method="post">
                            <div class="row gy-3">
                                <div class="col-sm-12">
                                    <label class="form-label">Worker Name <span class="text-danger">*</span></label>
                                    <input type="text" name="maid_name" class="form-control"
                                        placeholder="Enter Worker Name">
                                </div>
                                <div class="col-sm-12">
                                    <label class="form-label">
                                        Worker Mobile No. <span class="text-danger">*</span>
                                    </label>

                                    <input type="text" name="maid_mobile" id="maid_mobile" class="form-control"
                                        placeholder="Enter Worker Mobile No." maxlength="10" required>
                                </div>
                                <div class="col-sm-12 position-relative">
                                    <label class="form-label">
                                        Work Type <span class="text-danger">*</span>
                                    </label>

                                    <input type="text" name="work_type" placeholder="Search Work Type"
                                        class="form-control dropdown-search" autocomplete="off">

                                    <ul class="role-dropdown">
                                        <li>Maid</li>
                                        <li>Cook</li>
                                        <li>Driver</li>
                                    </ul>
                                </div>
                                <div class="form-group text-end" style="margin-top:20px">
                                    <button type="submit" class="btn btn-primary-600" data-bs-placement="bottom"
                                        title="Save">
                                        <i class="bi bi-floppy"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-xl-8 col-lg-12">
                <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-6">
                                    <input type="text" name="search" id="searchBox" class="form-control form-control-sm"
                                        placeholder="Search here.....">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table modern-table mb-0">
                                <thead>
                                    <tr>
                                        <th>S.L</th>
                                        <th>Worker Name</th>
                                        <th>Worker Mobile No.</th>
                                        <th>Work Type</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Kajal Ben</td>
                                        <td>9876543210</td>
                                        <td>Cleaning</td>
                                        <td>
                                            <a href="" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-bs-html="true" data-bs-custom-class="tooltip-success" title="Edit"
                                                class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center me-1">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </a>
                                            <a href="javascript:void(0);" 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>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Rita Ben</td>
                                        <td>9988776655</td>
                                        <td>Cooking</td>
                                        <td>
                                            <a href="" data-bs-toggle="tooltip" data-bs-placement="top"
                                                data-bs-html="true" data-bs-custom-class="tooltip-success" title="Edit"
                                                class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center me-1">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </a>
                                            <a href="javascript:void(0);" 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>
                                        </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>
        </div>
    </div>
</div>

<!--form validation & save script-->
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const form = document.getElementById('modelform');
        const maidName = form.querySelector('input[name="maid_name"]');
        const maidMobile = form.querySelector('input[name="maid_mobile"]');
        const workType = form.querySelector('select[name="work_type"]');

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

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            if (!maidName.value.trim()) {
                Swal.fire({
                    ...swalConfig,
                    title: 'Worker Name Required!',
                    text: 'Please enter the Worker Name.',
                    icon: 'warning',
                    confirmButtonColor: '#d33',
                });
                return;
            }

            if (!workType.value.trim()) {
                Swal.fire({
                    ...swalConfig,
                    title: 'Work Type Required!',
                    text: 'Please select the Work Type.',
                    icon: 'warning',
                    confirmButtonColor: '#d33',
                });
                return;
            }

            if (!maidMobile.value.trim()) {
                Swal.fire({
                    ...swalConfig,
                    title: 'Mobile Number Required!',
                    text: 'Please enter the Worker Mobile Number.',
                    icon: 'warning',
                    confirmButtonColor: '#d33',
                });
                return;
            }

            if (!workType.value.trim()) {
                Swal.fire({
                    ...swalConfig,
                    title: 'Work Type Required!',
                    text: 'Please enter the Work Type.',
                    icon: 'warning',
                    confirmButtonColor: '#d33',
                });
                return;
            }

            if (!time.value.trim()) {
                Swal.fire({
                    ...swalConfig,
                    title: 'Time Required!',
                    text: 'Please select the Time.',
                    icon: 'warning',
                    confirmButtonColor: '#d33',
                });
                return;
            }

            form.submit();
        });
    });
</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 maidName = row.querySelector('td:nth-child(2)').textContent.trim();

                Swal.fire({
                    ...swalConfig,
                    title: 'Delete Domestic?',
                    html: `Are you sure you want to delete <strong>"${maidName}"</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('.modern-table tbody tr');
                        rows.forEach((r, i) => {
                            r.querySelector('td:first-child').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>"${maidName}"</strong> has been deleted successfully.`,
                            icon: 'success',
                            confirmButtonColor: '#4a63ff',
                        });
                    }
                });
            });
        });
    });
</script>

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

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

    document.addEventListener("DOMContentLoaded", function () {

        const input = document.querySelector('input[name="work_type"]');
        const dropdown = input.nextElementSibling;
        const items = dropdown.querySelectorAll("li");

        input.addEventListener("focus", () => {
            dropdown.style.display = "block";
        });

        input.addEventListener("input", function () {

            const value = this.value.toLowerCase();

            items.forEach(item => {

                item.style.display =
                    item.textContent.toLowerCase().includes(value)
                        ? "block"
                        : "none";

            });

        });

        items.forEach(item => {

            item.addEventListener("click", function () {

                input.value = this.textContent;
                dropdown.style.display = "none";

            });

        });

        document.addEventListener("click", function (e) {

            if (!input.contains(e.target) &&
                !dropdown.contains(e.target)) {

                dropdown.style.display = "none";
            }

        });

    });
</script>
<script>
    document.getElementById('maid_mobile').addEventListener('input', function () {

        // Allow only numbers
        this.value = this.value.replace(/\D/g, '');

        // Maximum 10 digits
        if (this.value.length > 10) {
            this.value = this.value.slice(0, 10);
        }
    });
</script>
<?php include 'footer.php'; ?>