<?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">Amenities 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"> Amenities <span class="text-danger">*</span></label>
                                    <input type="text" name="country" class="form-control" placeholder="Enter Amenities" value="" >
                                </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>

                                <!-- Per page select -->
                                <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>

                                <!-- Search input -->
                                <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>Amenities</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-id="1">
                                        <td>1</td>
                                        <td>Garden</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-id="1" data-url="country.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>
                                        </td>
                                    </tr>
                                    <tr data-id="2">
                                        <td>2</td>
                                        <td>Swimming Pool</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-id="2" data-url="country.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>
                                        </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" 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>
        </div>
    </div>
</div>

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

    const form = document.getElementById('modelform');
    const countryInput = form.querySelector('input[name="country"]');

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

    function showError(input, message) {
        const existing = input.parentNode.querySelector('.error-message');
        if (existing) existing.remove();

        const error = document.createElement('div');
        error.className = 'error-message text-danger small mt-1';
        error.textContent = message;
        input.parentNode.appendChild(error);
        input.focus();
    }

    function clearError(input) {
        const error = input.parentNode.querySelector('.error-message');
        if (error) error.remove();
    }

    function validateCountry() {
        const value = countryInput.value.trim();

        if (!value) {
            showError(countryInput, 'Amenity is required');
            return false;
        }
        if (value.length < 2) {
            showError(countryInput, 'Amenity name must be at least 2 characters');
            return false;
        }
        if (!/^[a-zA-Z\s]+$/.test(value)) {
            showError(countryInput, 'Only letters and spaces are allowed');
            return false;
        }

        clearError(countryInput);
        return true;
    }

    countryInput.addEventListener('blur', validateCountry);
    countryInput.addEventListener('input', () => clearError(countryInput));

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

        if (!validateCountry()) {
            // Validation error alert
            Swal.fire({
                ...swalConfig,
                title: 'Missing Information',
                html: 'Please fill the required field',
                icon: 'error',
                confirmButtonColor: '#d33',
            });
            return;
        }

        // Success save alert
        Swal.fire({
            ...swalConfig,
            title: 'Success!',
            html: 'Country saved successfully',
            icon: 'success',
            confirmButtonColor: '#4a63ff',
            timer: 2000,
            timerProgressBar: true,
            showConfirmButton: false
        }).then(() => 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 countryName = row.querySelector('td:nth-child(2)').textContent.trim();

            // Delete confirmation alert
            Swal.fire({
                ...swalConfig,
                title: 'Delete Amenity?',
                html: `Are you sure you want to delete <strong>"${countryName}"</strong>?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
            }).then((result) => {
                if (result.isConfirmed) {
                    // Remove row
                    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`;

                    // Deleted success alert
                    Swal.fire({
                        ...swalConfig,
                        title: 'Deleted!',
                        html: `<strong>"${countryName}"</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";
    });
});
</script>

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