@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">
        <a href="{{ url('/pwa/attendance-detail') . '/' . $date }}" id="regularization" 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>
        </a>
        <span class="font-extrabold px-0 text-grey-800 text-xl">Regularization</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>
            <p class="text-lg">Employee</p>
            <p class="text-xl font-bold">
                <span id="nd-employee-name"></span> -
                <span id="nd-employee-id"></span>
            </p>
        </div>

        <!-- Date -->
        <div class="mt-2">
            <p class="text-lg">Date</p>
            <p class="text-xl font-bold">{{ $date }}</p>
        </div>

        <!-- Check-in Details Box -->
        <div class="bg-blue-200 p-4 rounded-lg mt-4">
            <div class="flex justify-between text-sm font-semibold">
                <p class="text-teal-500">CHECK-IN</p>
                <p class="text-red-500">CHECK-OUT</p>
                <p class="text-black">TOTAL HOURS</p>
            </div>

            <div class="flex justify-between mt-1 font-semibold space-x-1">
                <div class="w-1/3 flex justify-items-start items-center">
                    <!-- <input id="time-first" type="time" class="p-2 rounded-lg border border-gray-700 text-gray-500 hidden" required> -->
                    <input type="text" id="time-first" class="w-full p-2 rounded-lg border border-gray-500 text-gray-500" placeholder="--/--" readonly required>
                </div>
                <div class="w-1/3 flex justify-items-start items-start">
                    <!-- <input id="time-last" type="time" class="p-2 rounded-lg border border-gray-700 text-gray-500 hidden" required> -->
                    <input type="text" id="time-last" class="w-full p-2 rounded-lg border border-gray-500 text-gray-500" placeholder="--/--" readonly required>
                </div>
                <p id="total-hours" class="text-black w-1/3 text-center relative top-2">00:00</p>
            </div>

            <!-- Reason Input -->
            <textarea id="reason-input" class="w-full mt-3 p-2 rounded-lg border border-gray-300 text-gray-500 bg-white" rows="3" placeholder="Reason" required></textarea>

            <!-- Buttons -->
            <div class="flex gap-2 mt-4">
                <button id="forget-checkin" class="flex-1 bg-yellow-500 text-white py-2 rounded-lg font-medium 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">
                    Forgot to check-in
                </button>
                <button id="forget-checkout" class="flex-1 bg-yellow-500 text-white py-2 rounded-lg font-medium 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">
                    Forgot to check-out
                </button>
            </div>
        </div>

        <!-- Save Button -->
        <button id="save-regularize" class="mt-4 w-full bg-teal-500 text-white py-3 rounded-lg font-bold text-lg 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">
            Save
        </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 || ""));

        const regularizeDate = "{{ $date }}";
        const reasonInput = $("#reason-input");
        const timeFirst = $("#time-first");
        const timeLast = $("#time-last");
        const totalHours = $("#total-hours");

        timeFirst.AnyPicker({
            mode: "datetime",
            dateTimeFormat: "HH:mm",
            minValue: "00:01",
            maxValue: "23:59",
            theme: "iOS",
            layout: "fixed",
            onHidePicker: function() {
                calculateTotalHours();
            }
        });

        timeLast.AnyPicker({
            mode: "datetime",
            dateTimeFormat: "HH:mm",
            minValue: "00:01",
            maxValue: "23:59",
            theme: "iOS",
            layout: "fixed",
            onHidePicker: function() {
                calculateTotalHours();
            }
        });

        $("#forget-checkin").click(function() {
            reasonInput.val("Forgot to check-in");
        });

        $("#forget-checkout").click(function() {
            reasonInput.val("Forgot to check-out");
        });

        timeFirst.change(function() {
            calculateTotalHours();
        });

        timeLast.change(function() {
            calculateTotalHours();
        });

        $("#save-regularize").click(async function() {

            // disable the button itself to prevent multiple click
            let self = $(this);
            self.addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");

            const mobileNumber = Cookies.get('employee_mobile_number');
            const checkInTimeVal = timeFirst.val();
            const checkOutTimeVal = timeLast.val();
            const checkInTime = moment.tz(regularizeDate + " " + (checkInTimeVal || '00:00') + ':00', "Asia/Kolkata").utc();
            const checkOutTime = moment.tz(regularizeDate + " " + (checkOutTimeVal || '00:00') + ':00', "Asia/Kolkata").utc();
            const reason = reasonInput.val();

            if (checkInTimeVal === "" || checkOutTimeVal === "") {
                showToast('Please fill in both check-in and check-out times.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

            if (!checkInTime.isBefore(checkOutTime)) {
                showToast('Please verify checkin and checkout time');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                return;
            }

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

            // save the Data
            // saveToLocal(mobileNumber, regularizeDate, regularizeDate + ' ' + checkInTime + ':00', regularizeDate + ' ' + checkOutTime + ':00', reason);

            // if (navigator.onLine) {
            //     syncOfflineRegularizationFormData();
            // }

            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("date", regularizeDate);
            formDataAttendance.append("check_in", checkInTime.format("YYYY-MM-DD HH:mm:ss"));
            formDataAttendance.append("check_out", checkOutTime.format("YYYY-MM-DD HH:mm:ss"));
            formDataAttendance.append("reason", reason);

            const response = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/employee/regularization/create",
                data: formDataAttendance
            })
            const responseData = JSON.parse(response);
            if (responseData.success) {
                // console.log("🚀 ~ getDataFromDatabase ~ response:", responseData);
                showToast('Regularization saved successfully.');
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                setTimeout(() => {
                    window.location.href = "{{ url('/pwa/attendance-detail') . '/' . $date }}";
                }, 3000);
                return;
            } else {
                showToast(responseData.message || "Something went wrong. Please try again.");
                self.removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                console.log("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                // return [];
            }

            // showToast('Regularization saved successfully.');
            // window.location.href = "{{ url('/pwa/attendance-detail') . '/' . $date }}";
        });

        // Save to LocalStorage
        function saveToLocal(mobileNumber, regularizeDate, CheckIn, CheckOut, reason) {
            const storeKey = "createRegularizationOffline";
            const storingData = {
                mobile_number: mobileNumber,
                date: regularizeDate,
                check_in: CheckIn,
                check_out: CheckOut,
                reason: reason
            };

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

        // Functions
        function calculateTotalHours() {
            const checkInTimeValue = timeFirst.val();
            const checkOutTimeValue = timeLast.val();

            if (checkInTimeValue === "" || checkOutTimeValue === "") {
                return;
            }

            const checkInTime = moment(checkInTimeValue, "HH:mm");
            const checkOutTime = moment(checkOutTimeValue, "HH:mm");

            if (checkInTime.isValid() && checkOutTime.isValid()) {
                const duration = moment.duration(checkOutTime.diff(checkInTime));
                totalHours.text(formatTotalHours(duration));
            }
        }

        function formatTotalHours(duration) {
            const hours = duration?.hours() || 0;
            const minutes = duration?.minutes() || 0;

            return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
        }
    });
</script>
@endsection