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

<div class="p-4 lg:p-6">

    <!-- Header -->
    <div class="max-w-7xl mx-auto mb-6">

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

            <div>

                <h1 class="text-3xl font-bold tracking-tight text-slate-800">
                    Add Holiday
                </h1>

            </div>

            <a href="master.php"
                class="inline-flex items-center gap-2 h-10 px-5 rounded-2xl bg-white border border-slate-200 text-sm font-medium text-slate-700 hover:shadow-md transition-all">

                <i class="ri-arrow-left-line"></i>

                Back

            </a>

        </div>

    </div>

    <!-- Grid -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-6">

        <!-- Left Form -->
        <div class="xl:col-span-4">

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden sticky top-5">

                <!-- Card Header -->
                <div class="px-6 py-5 border-b border-slate-100">

                    <h2 class="text-lg font-semibold text-slate-800">
                        Add Holiday
                    </h2>

                </div>

                <!-- Form -->
                <form id="holidayForm" class="p-6 space-y-5">

                    <!-- Holiday Name -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            Holiday Name
                        </label>

                        <div class="relative">

                            <i class="ri-calendar-event-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="text"
                                id="holiday_name"
                                placeholder="Enter holiday name"
                                class="w-full h-11 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 pl-11 pr-4 text-sm outline-none transition-all">

                        </div>

                    </div>

                    <!-- Start Date -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            Start Date
                        </label>

                        <div class="relative">

                            <i class="ri-calendar-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="date"
                                id="start_date"
                                class="w-full h-11 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 pl-11 pr-4 text-sm outline-none transition-all">

                        </div>

                    </div>

                    <!-- End Date -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            End Date
                        </label>

                        <div class="relative">

                            <i class="ri-calendar-check-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="date"
                                id="end_date"
                                class="w-full h-11 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 pl-11 pr-4 text-sm outline-none transition-all">

                        </div>

                    </div>

                    <!-- No of Days -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            No of Days
                        </label>

                        <div class="relative">

                            <i class="ri-time-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="number"
                                id="no_of_days"
                                placeholder="Enter no of days"
                                class="w-full h-11 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 pl-11 pr-4 text-sm outline-none transition-all">

                        </div>

                    </div>

                    <!-- Submit -->
                    <div class="flex justify-end pt-2">

                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 h-10 px-5 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 text-white text-sm font-medium shadow-lg shadow-indigo-100 hover:opacity-95 transition-all">

                            <i class="ri-save-line"></i>

                            Save

                        </button>

                    </div>

                </form>

            </div>

        </div>

        <!-- Right Table -->
        <div class="xl:col-span-8">

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">

                <!-- Table Header -->
                <div class="px-6 py-5 border-b border-slate-100">

                    <h2 class="text-lg font-semibold text-slate-800">
                        Holiday List
                    </h2>

                </div>

                <!-- Table -->
                <div class="overflow-x-auto">

                    <table class="w-full min-w-[900px]">

                        <thead class="bg-slate-50">

                            <tr>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    Sr.no
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    Holiday Name
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    Start Date
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    End Date
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    No of Days
                                </th>

                                <th class="px-6 py-4 text-center text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    Action
                                </th>

                            </tr>

                        </thead>

                        <tbody class="divide-y divide-slate-100">

                            <!-- Row -->
                            <tr class="hover:bg-slate-50 transition">

                                <td class="px-6 py-4 text-sm font-medium text-slate-700">
                                    01
                                </td>

                                <td class="px-6 py-4 text-sm font-medium text-slate-700">
                                    Diwali
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    01 Nov 2025
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    03 Nov 2025
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    3
                                </td>

                                <td class="px-6 py-4">

                                    <div class="flex items-center justify-center gap-2">

                                        <!-- Edit -->
                                        <button
                                            class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">

                                            <i class="ri-edit-line"></i>

                                        </button>

                                        <!-- Delete -->
                                        <button
                                            onclick="deleteRow(this)"
                                            class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">

                                            <i class="ri-delete-bin-6-line"></i>

                                        </button>

                                    </div>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- SweetAlert CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

document.getElementById("holidayForm").addEventListener("submit", function(e) {

    e.preventDefault();

    const holidayName = document.getElementById("holiday_name");
    const startDate = document.getElementById("start_date");
    const endDate = document.getElementById("end_date");
    const noOfDays = document.getElementById("no_of_days");

    // Holiday Name Validation
    if (holidayName.value.trim() === "") {

        smallAlert('Please enter holiday name');
        holidayName.focus();

        return;

    }

    // Start Date Validation
    if (startDate.value === "") {

        smallAlert('Please select start date');
        startDate.focus();

        return;

    }

    // End Date Validation
    if (endDate.value === "") {

        smallAlert('Please select end date');
        endDate.focus();

        return;

    }

    // No Of Days Validation
    if (noOfDays.value === "" || parseInt(noOfDays.value) <= 0) {

        smallAlert('Please enter valid no of days');
        noOfDays.focus();

        return;

    }

    // Success Alert
    Swal.fire({

        icon: 'success',
        title: 'Success!',
        text: 'Holiday saved successfully.',

        timer: 1500,
        showConfirmButton: false,

        width: '320px',

        didOpen: () => {

            document.querySelector('.swal2-popup').style.borderRadius = '10px';

        }

    });

    // Reset Form
    document.getElementById("holidayForm").reset();

});


// Small Alert Function
function smallAlert(message) {

    Swal.fire({

        icon: 'warning',
        title: 'Validation',
        text: message,

        width: '320px',

        confirmButtonColor: '#4f46e5',

        didOpen: () => {

            document.querySelector('.swal2-popup').style.borderRadius = '10px';

            document.querySelector('.swal2-confirm').style.borderRadius = '8px';

        }

    });

}


// Delete Row Function
function deleteRow(button) {

    Swal.fire({

        title: 'Delete Holiday?',
        text: 'This record will be deleted permanently.',

        icon: 'warning',

        showCancelButton: true,

        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#64748b',

        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel',

        width: '320px',

        didOpen: () => {

            document.querySelector('.swal2-popup').style.borderRadius = '10px';

            document.querySelector('.swal2-confirm').style.borderRadius = '8px';

        }

    }).then((result) => {

        if (result.isConfirmed) {

            button.closest('tr').remove();

            Swal.fire({

                icon: 'success',
                title: 'Deleted!',
                text: 'Holiday deleted successfully.',

                timer: 1500,
                showConfirmButton: false,

                width: '320px',

                didOpen: () => {

                    document.querySelector('.swal2-popup').style.borderRadius = '10px';

                }

            });

        }

    });

}

</script>

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