@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">Request Comp off</span>
    </div>
</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-3">
            <p class="w-full text-sm">Worked Date</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="worked_date" type="date" class="w-full outline-none bg-transparent" required>
            </div>
        </div>

        <div class="w-full p-2 flex flex-col items-center justify-center space-y-2">
            <div class="w-full flex space-x-2">
                <div class="w-1/2 flex flex-col space-y-1">
                    <span class="font-semibold text-sm">First In</span>
                    <span id="first-in-time" class="text-sm">00:00</span>
                </div>
                <div class="w-1/2 flex flex-col space-y-1">
                    <span class="font-semibold text-sm">Last Out</span>
                    <span id="last-out-time" class="text-sm">00:00</span>
                </div>
            </div>
            <div class="w-full flex space-x-2">
                <div class="w-1/2 flex flex-col space-y-1">
                    <span class="font-semibold text-sm">Overtime</span>
                    <span id="over-time" class="text-sm">00:00</span>
                </div>
                <div class="w-1/2 flex flex-col space-y-1">
                    <span class="font-semibold text-sm">Total</span>
                    <span id="total-time" class="text-sm">00:00</span>
                </div>
            </div>
        </div>

        <div class="flex flex-col items-center my-2">
            <p class="w-full text-sm">Unit</p>
            <span class="w-full text-md font-extrabold">Days</span>
        </div>

        <div class="flex flex-col items-center space-y-1 my-2">
            <p class="w-full text-sm">Duration</p>
            <select class="w-full bg-transparent text-md p-2.5 border-1 border-gray-300 rounded-lg" name="duration" id="duration" required>
                <option class="bg-gray-200" value="half_day">Half Day</option>
                <option class="bg-gray-200" value="full_day">Full</option>
            </select>
        </div>


        <div class="flex flex-col items-center space-y-1 my-2">
            <p class="w-full text-sm">Start Time</p>
            <input id="start_time" type="time" class="w-full p-2 rounded-lg border border-gray-300 text-gray-500" required>
        </div>

        <div class="flex flex-col items-center space-y-1 my-2">
            <p class="w-full text-sm">End Time</p>
            <input id="end_time" type="time" class="w-full p-2 rounded-lg border border-gray-300 text-gray-500" required>
        </div>

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

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

        <button id="save-comp-off" 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);
        $("#nd-employee-name").text(getSessionValue?.name || "");
        $("#nd-employee-id").text(getSessionValue?.display_employee_id ?? (getSessionValue?.emp_id || ""));
        console.log("🚀 ~ getSessionValue:", getSessionValue);

        const workedDate = $("#worked_date");
        const units = "days";
        const duration = $("#duration");
        const startTime = $("#start_time");
        const endTime = $("#end_time");
        const reasonInput = $("#reason-input");

        // Fetch leave types
        async function fetchAttendance() {
            // 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'));
            formDataAttendance.append("start_date", workedDate.val());
            formDataAttendance.append("end_date", workedDate.val());

            const response = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/employee/attendance-list",
                data: formDataAttendance
            })
            const responseData = JSON.parse(response);
            if (responseData.success) {
                console.log("🚀 ~ fetchLeaveTypes ~ responseData", responseData);
                return responseData.data || [];
            } else {
                console.error("🚀 ~ fetchLeaveTypes ~ error", responseData.message);
                return [];
            }
        }

        // check from date and to date are not same
        workedDate.change(async function() {
            const getFetchData = await fetchAttendance();
            if (getFetchData.length > 0) {
                const {
                    firstCheckIn,
                    lastCheckOut,
                    totalTime,
                    overtime
                } = summarizeAttendance(getFetchData);

                $("#first-in-time").text(firstCheckIn);
                $("#last-out-time").text(lastCheckOut);
                $("#over-time").text(overtime);
                $("#total-time").text(totalTime);
            }
        });

        // Save the form data
        $("#save-comp-off").click(async function() {
            let self = $(this);
            self.addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");

            const mobileNumber = Cookies.get('employee_mobile_number');
            const workedDateVal = workedDate.val();
            const units = "days";
            const durationVal = duration.val();
            const startTimeVal = startTime.val();
            const endTimeVal = endTime.val();
            const reason = reasonInput.val();

            if (reason === "") {
                showToast('Please provide a reason for leave.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }


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

            if (startTimeVal === endTimeVal) {
                showToast('Start time and end time cannot be the same.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }
            if (moment(startTimeVal, "HH:mm").isAfter(moment(endTimeVal, "HH:mm"))) {
                showToast('Start time cannot be after end time.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

            // saveToLocal(mobileNumber, );

            if (await sendToServer(mobileNumber, workedDateVal, units, durationVal, `${startTimeVal}:00`, `${endTimeVal}:00`, reason)) {
                showToast(`Leave saved successfully.`);
                setTimeout(() => {
                    window.location.href = "{{ url('/pwa/comp-off')}}";
                }, 3000);
            } else {
                showToast('Error saving leave. Please try again.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            }


        });

        async function sendToServer(mobileNumber, workedDate, units, duration, startTime, endTime, reason) {
            try {
                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("worked_date", workedDate);
                formDataAttendance.append("units", units);
                formDataAttendance.append("duration", duration);
                formDataAttendance.append("start_time", startTime);
                formDataAttendance.append("end_time", endTime);
                formDataAttendance.append("reason", reason);

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

            }
        }

        function summarizeAttendance(entries) {
            let totalDuration = moment.duration(0);
            let firstCheckIn = null;
            let lastCheckOut = null;

            // debugger;

            entries.forEach(({
                check_in,
                check_out
            }) => {
                if (check_in && check_out) {
                    const inUTC = moment.utc(check_in, "YYYY-MM-DD HH:mm:ss");
                    const outUTC = moment.utc(check_out, "YYYY-MM-DD HH:mm:ss");

                    if (outUTC.isAfter(inUTC)) {
                        // Add to total time
                        const duration = moment.duration(outUTC.diff(inUTC));
                        totalDuration.add(duration);

                        // Track earliest and latest times
                        if (!firstCheckIn || inUTC.isBefore(firstCheckIn)) {
                            firstCheckIn = inUTC;
                        }
                        if (!lastCheckOut || outUTC.isAfter(lastCheckOut)) {
                            lastCheckOut = outUTC;
                        }
                    }
                }
            });

            const nineHours = moment.duration(9, "hours");
            const overtime = totalDuration > nineHours ? moment.duration(totalDuration - nineHours) : moment.duration(0);

            const formatTime = (time) =>
                time ? time.tz("Asia/Kolkata").format("hh:mm a") : null;

            const formatDuration = (duration) =>
                `${String(Math.floor(duration.asHours())).padStart(2, "0")}:${String(duration.minutes()).padStart(2, "0")}`;

            return {
                firstCheckIn: formatTime(firstCheckIn),
                lastCheckOut: formatTime(lastCheckOut),
                totalTime: formatDuration(totalDuration),
                overtime: formatDuration(overtime),
            };
        }

        // 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() {
            window.location.href = "{{ url('/pwa/comp-off')}}";
    });
</script>
@endsection