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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add Leave</title>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>

<style>.ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px !important;height:56px !important;border:1px solid #d1d5db !important;border-radius:16px !important;padding:0 16px !important;background:#fff !important;box-shadow:none !important;display:flex !important;align-items:center !important;overflow:hidden !important;}.ts-control input{font-size:14px !important;}.ts-wrapper.focus .ts-control{border-color:#8b5cf6 !important;box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;}.ts-dropdown{margin-top:8px !important;border-radius:16px !important;border:1px solid #e5e7eb !important;overflow:hidden !important;background:#fff !important;box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;z-index:9999 !important;}.ts-dropdown-content{max-height:180px !important;overflow-y:auto !important;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi input:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;}.fi input:focus + label,.fi input:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.si select{height:52px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

    <!-- HEADER -->
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

        <div class="flex items-start justify-between">

            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    Add Leave
                </h1>
            </div>

            <a href="leave_list.php">
            <button
                class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

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

            </button>
            </a>

        </div>

    </div>

    <!-- FORM -->
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 pb-6 sm:pb-10">

        <div class="w-full bg-white rounded-3xl shadow-xl border border-gray-100 p-4 sm:p-6 md:p-8 lg:p-12">

            <!-- FORM CONTENT -->
            <div id="formContent">

                <div class="mb-8">

                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        Leave Details
                    </h2>

                </div>

                <!-- FORM GRID -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

                    <!-- LEAVE TYPE -->
                    <div class="si">
                        <select id="leaveType">
                            <option value="">Leave Type</option>
                            <option>Full Leave</option>
                            <option>Half Leave</option>
                            <option>Sick Leave</option>
                            <option>Emergency Leave</option>
                            <option>Exception</option>
                        </select>
                    </div>

                    <!-- FROM DATE -->
                    <div class="fi">
                        <input type="date" id="fromDate" placeholder=" " />
                        <label>From Date</label>
                    </div>

                    <!-- TO DATE -->
                    <div class="fi">
                        <input type="date" id="toDate" placeholder=" " />
                        <label>To Date</label>
                    </div>

                    <!-- NO OF DAYS -->
                    <div class="fi">
                        <input type="number" id="days" placeholder=" " />
                        <label>No. of Days</label>
                    </div>

                    <!-- SESSION -->
                    <div class="si">
                        <select id="session">
                            <option value="">Session</option>
                            <option>Full Day</option>
                            <option>First Half</option>
                            <option>Second Half</option>
                        </select>
                    </div>

                    <!-- ALLOCATION OF WORK -->
                    <div class="si">
                        <select id="allocationWork">
                            <option value="">Allocation of Work</option>
                            <option>Dev Pancholi</option>
                            <option>Saif Shaikh</option>
                            <option>Dev Mistry</option>
                            <option>Drashti Pancholi</option>
                        </select>
                    </div>

                    <!-- REASON -->
                    <div class="fi md:col-span-3">
                        <input type="text" id="reason" placeholder=" " />
                        <label>Reason</label>
                    </div>

                </div>

                <!-- BUTTON -->
                <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">

                    <button
                        onclick="submitForm()"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                        Save
                        <i class="ri-check-line"></i>

                    </button>

                </div>

            </div>

            <!-- SUCCESS -->
            <div id="successMsg" class="hidden text-center py-10">

                <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-4">

                    <i class="ri-check-line text-3xl text-violet-600"></i>

                </div>

                <h2 class="text-2xl font-bold text-gray-900 mb-2">
                    Leave Added!
                </h2>

                <p class="text-sm text-gray-500 mb-5">
                    Leave request has been submitted successfully.
                </p>

            </div>

        </div>

    </div>

    <script>

        const searchableSelects = [
            '#leaveType',
            '#session',
            '#allocationWork'
        ];

        searchableSelects.forEach(id => {

            if(document.querySelector(id)){

                new TomSelect(id, {
                    create:false,
                    allowEmptyOption:true,
                    placeholder:'Search...',
                    closeAfterSelect:true,

                    render:{
                        no_results:function(){
                            return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                        }
                    }
                });

            }

        });



function submitForm(){

    const leaveType = document.getElementById('leaveType').value;
    const fromDate = document.getElementById('fromDate').value;
    const toDate = document.getElementById('toDate').value;
    const days = document.getElementById('days').value;
    const session = document.getElementById('session').value;
    const allocationWork = document.getElementById('allocationWork').value;
    const reason = document.getElementById('reason').value;

    if(leaveType === ''){
        Swal.fire({
            icon:'warning',
            title:'Leave Type',
            text:'Please select leave type'
        });
        return;
    }

    if(fromDate === ''){
        Swal.fire({
            icon:'warning',
            title:'From Date',
            text:'Please select from date'
        });
        return;
    }

    if(toDate === ''){
        Swal.fire({
            icon:'warning',
            title:'To Date',
            text:'Please select to date'
        });
        return;
    }

    if(days === '' || days <= 0){
        Swal.fire({
            icon:'warning',
            title:'Number of Days',
            text:'Please enter valid number of days'
        });
        return;
    }

    if(session === ''){
        Swal.fire({
            icon:'warning',
            title:'Session',
            text:'Please select session'
        });
        return;
    }

    if(allocationWork === ''){
        Swal.fire({
            icon:'warning',
            title:'Allocation of Work',
            text:'Please select allocation of work'
        });
        return;
    }

    if(reason.trim() === ''){
        Swal.fire({
            icon:'warning',
            title:'Reason',
            text:'Please enter reason'
        });
        return;
    }

    if(new Date(toDate) < new Date(fromDate)){
        Swal.fire({
            icon:'error',
            title:'Invalid Date',
            text:'To Date cannot be smaller than From Date'
        });
        return;
    }

    Swal.fire({
        icon:'success',
        title:'Success',
        text:'Leave request submitted successfully',
        confirmButtonColor:'#8b5cf6'
    });

    document.getElementById('formContent')
        .classList.add('hidden');

    document.getElementById('successMsg')
        .classList.remove('hidden');

    setTimeout(() => {

        window.location.href = 'leave_list.php';

    }, 2000);

}

    </script>

</body>

</html>

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