@extends('pwa::layouts.master')

@section('content')
<div class="w-full mx-auto py-6 px-4 flex justify-between align-center">
    <div class="flex items-center space-x-2">
        <span id="leave-redirect" class="no-underline flex items-center justify-center space-x-1">
            <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="m368-417 202 202-90 89-354-354 354-354 90 89-202 202h466v126H368Z" />
            </svg>
        </span>
        <span class="font-extrabold px-0 text-grey-800 text-xl">Create Leave Request</span>
    </div>
    <!-- <a href="#" id="logout" class="no-underline flex items-center justify-center space-x-1">
            <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M212-86q-53 0-89.5-36.5T86-212v-125h126v125h536v-536H212v125H86v-125q0-53 36.5-89.5T212-874h536q53 0 89.5 36.5T874-748v536q0 53-36.5 89.5T748-86H212Zm226-154-88-89 88-88H86v-126h352l-88-88 88-89 240 240-240 240Z"/></svg>
            <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Sign Out</span>
        </a> -->
</div>
<main class="w-full px-2 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">
    <div class="w-full bg-white shadow-lg rounded-lg p-4">
        <!-- Employee Details -->
        <div class="flex flex-col items-center space-y-1 my-3">
            <p class="w-full text-sm">Employee</p>
            <p class="w-full text-md font-bold">
                <span id="nd-employee-name"></span> -
                <span id="nd-employee-id"></span>
            </p>
        </div>

        <div class="flex flex-col items-center space-y-1 my-2">
            <p class="w-full text-sm">Leave Type</p>
            <select class="w-full bg-transparent text-md p-2.5 border-1 border-gray-300 rounded-lg" name="leave-type" id="leave-type" required>
                <option class="bg-gray-200" value="">Select Leave</option>
                <!-- Add options dynamically here -->
            </select>
        </div>

        <div class="flex flex-col items-center space-y-1 my-3">
            <p class="w-full text-sm">From</p>
            <div class="w-full flex items-center border border-gray-300 rounded-md p-2 mt-1 space-x-1">
                <span class="material-icons text-gray-500">
                    <svg class="fill-gray-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                        <path d="M212-46q-53 0-89.5-36.5T86-172v-536q0-53 36.5-89.5T212-834h28v-80h103v80h274v-80h103v80h28q53 0 89.5 36.5T874-708v536q0 53-36.5 89.5T748-46H212Zm0-126h536v-388H212v388Zm0-468h536v-68H212v68Zm0 0v-68 68Zm268 248q-20.4 0-34.2-13.8Q432-419.6 432-440q0-20.4 13.8-34.2Q459.6-488 480-488q20.4 0 34.2 13.8Q528-460.4 528-440q0 20.4-13.8 34.2Q500.4-392 480-392Zm-160 0q-20.4 0-34.2-13.8Q272-419.6 272-440q0-20.4 13.8-34.2Q299.6-488 320-488q20.4 0 34.2 13.8Q368-460.4 368-440q0 20.4-13.8 34.2Q340.4-392 320-392Zm320 0q-19 0-33.5-13.8T592-440q0-20.4 14.5-34.2 14.5-13.8 34-13.8t33.5 13.8q14 13.8 14 34.2 0 20.4-13.8 34.2Q660.4-392 640-392ZM480-232q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q528-300.4 528-280q0 19-13.8 33.5T480-232Zm-160 0q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q368-300.4 368-280q0 19-13.8 33.5T320-232Zm320 0q-19 0-33.5-14.5t-14.5-34q0-19.5 14.5-33.5t34-14q19.5 0 33.5 13.8t14 34.2q0 19-13.8 33.5T640-232Z" />
                    </svg>
                </span>
                <input id="date-from" type="date" class="w-full outline-none bg-transparent" required>
            </div>
        </div>

        <div class="flex flex-col items-center space-y-1 my-2">
            <p class="w-full text-sm">To</p>
            <div class="w-full flex items-center border border-gray-300 rounded-md p-2 mt-1 space-x-1">
                <span class="material-icons text-gray-500">
                    <svg class="fill-gray-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                        <path d="M212-46q-53 0-89.5-36.5T86-172v-536q0-53 36.5-89.5T212-834h28v-80h103v80h274v-80h103v80h28q53 0 89.5 36.5T874-708v536q0 53-36.5 89.5T748-46H212Zm0-126h536v-388H212v388Zm0-468h536v-68H212v68Zm0 0v-68 68Zm268 248q-20.4 0-34.2-13.8Q432-419.6 432-440q0-20.4 13.8-34.2Q459.6-488 480-488q20.4 0 34.2 13.8Q528-460.4 528-440q0 20.4-13.8 34.2Q500.4-392 480-392Zm-160 0q-20.4 0-34.2-13.8Q272-419.6 272-440q0-20.4 13.8-34.2Q299.6-488 320-488q20.4 0 34.2 13.8Q368-460.4 368-440q0 20.4-13.8 34.2Q340.4-392 320-392Zm320 0q-19 0-33.5-13.8T592-440q0-20.4 14.5-34.2 14.5-13.8 34-13.8t33.5 13.8q14 13.8 14 34.2 0 20.4-13.8 34.2Q660.4-392 640-392ZM480-232q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q528-300.4 528-280q0 19-13.8 33.5T480-232Zm-160 0q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q368-300.4 368-280q0 19-13.8 33.5T320-232Zm320 0q-19 0-33.5-14.5t-14.5-34q0-19.5 14.5-33.5t34-14q19.5 0 33.5 13.8t14 34.2q0 19-13.8 33.5T640-232Z" />
                    </svg>
                </span>
                <input id="date-to" type="date" class="w-full outline-none bg-transparent" required>
            </div>
        </div>

        <div id="day-type" class="hidden">
            <p class="w-full text-sm">Day Type</p>
            <div class="flex space-x-2 my-2">
                <label class="w-1/2 text-center flex items-center space-x-1 p-2 border rounded-lg bg-green-300 relative">
                    <input type="radio" value="0" name="day-type" class="absolute opacity-0 -z-10">
                    <span class="w-full font-extrabold">Full</span>
                </label>
                <label class="w-1/2 text-center flex items-center space-x-1 p-2 border rounded-lg bg-orange-300 relative">
                    <input type="radio" name="day-type" value="1" class="absolute opacity-0 -z-10">
                    <span class="w-full font-extrabold">Half</span>
                </label>
            </div>
        </div>

        <div class="hidden !bg-blue-500"></div>

        <div id="shift-type" class="hidden">
            <p class="w-full text-sm">Shift Type</p>
            <div class="flex space-x-2 my-2">
                <label class="w-1/2 text-center flex items-center space-x-1 p-2 border rounded-lg bg-pink-300 relative">
                    <input type="radio" value="first_half" name="shift-type" class="absolute opacity-0 -z-10">
                    <span class="w-full font-extrabold">First half</span>
                </label>
                <label class="w-1/2 text-center flex items-center space-x-1 p-2 border rounded-lg bg-blue-300 relative">
                    <input type="radio" name="shift-type" value="second_half" class="absolute opacity-0 -z-10">
                    <span class="w-full font-extrabold">Second half</span>
                </label>
            </div>
        </div>

        <div class="flex flex-col items-center space-y-2 my-2">
            <p class="w-full text-sm">Reason for leave</p>
            <textarea id="reason-input" class="w-full p-3 border rounded-lg" placeholder="Enter reason" required></textarea>
        </div>

        <button id="save-leave" class="mt-4 w-full bg-teal-500 text-white py-3 rounded-lg font-bold text-sm transition transform duration-150 ease-in-out active:scale-95 active:brightness-90 hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-s4s-color/50">
            Apply
        </button>
    </div>
</main>


<x-pwa::pwa-footer currentPage="more" />

@endsection

@section('custom-js')
<script>
    $('document').ready(async function() {
        const getSessionValue = await storeGetDataById("sessionStore", 1);

        let leaveDaysConfig = 3;

        await fetchSettings();

        $("#nd-employee-name").text(getSessionValue?.name || "");
        $("#nd-employee-id").text(getSessionValue?.display_employee_id ?? (getSessionValue?.emp_id || ""));

        const reasonInput = $("#reason-input");
        const dateFrom = $("#date-from");
        const dateTo = $("#date-to");
        const leaveType = $("#leave-type");
        const dayType = $("#day-type");
        const shiftType = $("#shift-type");

        // set min date for date field
        dateFrom.attr("min", moment().subtract(3, "days").format("yyyy-MM-DD"));
        dateTo.attr("min", moment().subtract(3, "days").format("yyyy-MM-DD"));

        // Fetch leave types
        fetchLeaveTypes();

        async function fetchLeaveTypes() {
            // Fetch data from the database
            const ajaxSettings = {
                "url": "",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer " + Cookies.get('employee_api_token')
                },
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
            };

            const formDataAttendance = new FormData();
            formDataAttendance.append("mobile_number", Cookies.get('employee_mobile_number'));

            const response = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/leaves/leave-type",
                data: formDataAttendance
            })
            const responseData = JSON.parse(response);
            if (responseData.success) {
                responseData.data.forEach(leave => {
                    leaveType.append(`<option class="bg-gray-200" value="${leave.id}">${leave.name}</option>`);
                });
                return responseData.data || [];
            } else {
                console.error("🚀 ~ fetchLeaveTypes ~ error", responseData.message);
                return [];
            }
        }

        async function fetchSettings() {
            // Fetch data from the database
            const ajaxSettings = {
                "url": "",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer " + Cookies.get('employee_api_token')
                },
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
            };

            const formDataAttendance = new FormData();

            const response = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/settings/config-settings",
                data: formDataAttendance
            })
            const responseData = JSON.parse(response);

            leaveDaysConfig = parseInt(responseData.data?.leave_creation_allowed_days || "3");

            return responseData.data || [];
        }


        // check from date and to date are not same
        dateFrom.change(function() {
            checkDateIsSame();
        });

        dateTo.change(function() {
            checkDateIsSame();
        });

        $(document).on('change', 'input[name="day-type"]', function() {
            $("input[name='day-type']").parent().removeClass('!bg-blue-500');
            $(this).parent().addClass('!bg-blue-500');
            if ($(this).val() == 1) {
                shiftType.removeClass('hidden');
            } else {
                shiftType.addClass('hidden');
            }
        });

        $(document).on('change', 'input[name="shift-type"]', function() {
            $("input[name='shift-type']").parent().removeClass('!bg-blue-500');
            $(this).parent().addClass('!bg-blue-500');
        });

        function checkDateIsSame() {
            if (dateFrom.val() == dateTo.val()) {
                dayType.removeClass('hidden');
            } else {
                dayType.addClass('hidden');
                shiftType.addClass('hidden');
            }
            return;
        }

        $("#save-leave").click(async function() {
            let self = $(this);
            self.addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            const mobileNumber = Cookies.get('employee_mobile_number');
            const leaveTypeId = leaveType.val();
            const startDate = dateFrom.val();
            const endDate = dateTo.val();
            const reason = reasonInput.val();
            const dayType = $('input[name="day-type"]:checked').val();
            const shiftType = $('input[name="shift-type"]:checked').val();
            if (reason === "") {
                showToast('Please provide a reason for leave.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }


            if (!leaveTypeId || !startDate || !endDate || !reason) {
                showToast('Please fill in all required fields.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

            // check if Date to is smaller then Date from
            if (!moment(endDate).isSameOrAfter(startDate)) {
                showToast('To date should be same or greater than From date');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

            // check if Date is smaller than min date
            let minDate = moment().subtract(leaveDaysConfig, "days").format("yyyy-MM-DD");
            if (!moment(minDate).isSameOrBefore(startDate)) {
                showToast(`To date should be same or greater than ${minDate} date`);
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

            // saveToLocal(mobileNumber, leaveTypeId, startDate, endDate, reason, dayType, shiftType);
            const getReturn = await sendLeavesToServer(mobileNumber, leaveTypeId, startDate, endDate, reason, dayType, shiftType);

            if (getReturn.success) {
                showToast(`Leave saved successfully.`);
                setTimeout(() => {
                    window.location.href = "{{ url('/pwa/leave')}}";
                }, 3000);
            } else {
                showToast(getReturn.message || `Saving leave offline.`);
                saveToLocal(mobileNumber, leaveTypeId, startDate, endDate, reason, dayType, shiftType);
                // showToast(`Save to local storage.`);
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            }

        });

        async function sendLeavesToServer(mobileNumber, leaveTypeId, startDate, endDate, reason, dayType, shiftType) {
            const ajaxSettings = {
                "url": "",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer " + Cookies.get('employee_api_token')
                },
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
            };

            const formDataAttendance = new FormData();
            formDataAttendance.append("mobile_number", mobileNumber);
            formDataAttendance.append("leave_type_id", leaveTypeId);
            formDataAttendance.append("start_date", startDate);
            formDataAttendance.append("end_date", endDate);
            formDataAttendance.append("reason", reason);
            if (dayType) {
                formDataAttendance.append("is_half_day", dayType);
            }
            if (shiftType) {
                formDataAttendance.append("half_day_type", shiftType);
            }

            const response = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/leaves/create",
                data: formDataAttendance
            })
            const responseData = JSON.parse(response);
            if (responseData.success) {
                // console.log("🚀 ~ getDataFromDatabase ~ response:", responseData);
                return {
                    success: true,
                    data: responseData.data,
                    message: null
                };
            } else {
                showToast(responseData.message || 'Error saving leave.');
                console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                return {
                    success: false,
                    data: null,
                    message: responseData.message || 'Error saving leave.'
                };
            }
        }

        // Save to LocalStorage
        function saveToLocal(mobileNumber, leaveTypeId, startDate, endDate, reason, dayType, shiftType) {
            const storeKey = "createLeaveOffline";
            const storingData = {
                mobile_number: mobileNumber,
                leave_type_id: leaveTypeId,
                start_date: startDate,
                end_date: endDate,
                reason: reason,
                is_half_day: dayType,
                half_day_type: shiftType
            };

            let storedData = JSON.parse(localStorage.getItem(storeKey)) || [];
            storedData.push(storingData);
            localStorage.setItem(storeKey, JSON.stringify(storedData));
            return true;
        }

        // Leave redirect
        $("#leave-redirect").click(function() {
            if (window.location.hash === "#home") {
                window.location.href = "{{ url('/pwa/dashboard')}}";
            } else {
                window.location.href = "{{ url('/pwa/leave')}}";
            }
        });
    });
</script>
@endsection