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

@section('content')
<!-- Use to generate class by tailwind -->
<!-- <div class="opacity-50 cursor-not-allowed"></div> -->

<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/approval/regularization')}}" 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">Attendance 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-4 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">

    <!-- Regularization details -->
    <div id="regularization-details" class="w-full flex flex-col items-center justify-start">
        <!-- This section will be dynamically populated with regularization data -->
    </div>
</main>

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

<!-- Model -->
<input type="hidden" id="status" value="">
<div id="comment-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-40 justify-center items-center w-full md:inset-0 h-full max-h-full">
    <!-- Backdrop Layer -->
    <div class="absolute inset-0 bg-sky-50 bg-opacity-50"></div>

    <div class="relative p-4 w-full max-w-2xl max-h-ful">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow-sm">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
                <h3 class="text-xl font-semibold text-gray-900">
                    Comment
                </h3>
                <button id="close-model" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center 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" data-modal-hide="default-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <textarea id="comment" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-teal-500 focus:border-teal-500" placeholder="Comment here"></textarea>
            </div>
            <!-- Modal footer -->
            <div class="w-full flex items-center justify-center p-4 md:p-5 border-t border-gray-200 rounded-b">
                <button id="summit-model" data-modal-hide="default-modal" type="button" class="text-white bg-s4s-color hover:bg-teal-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center max-w-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">Confirm</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-js')
<script>
    $('document').ready(async function() {

        const getSessionValue = await storeGetDataById("sessionStore", 1);
        const employeeName = getSessionValue?.name || ""; // Employee name

        fetchRegularizationDetails();

        // Fetch the regularization details
        async function fetchRegularizationDetails() {
            try {
                // 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 formDataRegularization = new FormData();
                formDataRegularization.append("mobile_number", Cookies.get('employee_mobile_number'));
                formDataRegularization.append("id", "{{ $id }}" || 0);

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/employee/regularization/view",
                    data: formDataRegularization
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    await storeInsertNewRow("approvalRegularizationRequestDetail", responseData.data);
                    populateRegularizationDetails(responseData.data);
                    return responseData.data || [];
                } else {
                    console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    return [];
                }
            } catch (error) {
                console.log("🚀 ~ fetchRegularizationDetails ~ error:", error);
                // get All data
                const getAllData = await storeGetData("approvalRegularizationRequestDetail");

                if (Array.isArray(getAllData) && getAllData.length > 50) {
                    await storeClearAll("approvalRegularizationRequestDetail");
                }

                // get data by id
                const getRegularizationDetail = await storeGetDataById("approvalRegularizationRequestDetail", "{{ $id }}");
                if (!getRegularizationDetail) {
                    showToast("No locally store data found");
                    return;
                }
                populateRegularizationDetails(getRegularizationDetail);
            }
        }

        // Populate the regularization details
        function populateRegularizationDetails(data) {
            let statusColor = 'text-slate-500';
            const detailsContainer = $('#regularization-details');
            $('#regularization-date').empty().text(moment(data.date).format("DD-MMM-YYYY"));
            const checkInTime = moment(data.date + " " + data.check_in).utc(true).tz("Asia/Kolkata");
            const checkOutTime = moment(data.date + " " + data.check_out).utc(true).tz("Asia/Kolkata");
            const totalHours = moment.duration(checkOutTime.diff(checkInTime));

            if (data.status === 'Pending') {
                statusColor = 'text-yellow-500';
            } else if (data.status === 'Approved') {
                statusColor = 'text-green-500';
            } else if (data.status === 'Rejected') {
                statusColor = 'text-red-500';
            } else {
                statusColor = 'text-slate-500';
            }

            detailsContainer.empty();
            detailsContainer.append(`
                    <div class="w-full rounded overflow-hidden shadow-lg bg-white my-4 rounded-lg flex flex-col items-center justify-center p-4 space-y-2">
                        <div class="w-full flex flex-col items-center mb-2 space-y-1">
                            <p class="w-full text-xs text-slate-600">Employee</p>
                            <p class="w-full font-bold">${data.employee_name} - ${data?.display_employee_id ?? data?.employee_id}</p>
                        </div>
                        <div class="w-full flex flex-col items-center mb-2 space-y-1">
                            <p class="w-full text-xs text-slate-600">Date</p>
                            <p class="w-full font-bold">${moment(data.date).format('DD-MMM-YYYY')}</p>
                        </div>
                        <div class="w-full flex items-center space-x-1">
                            <div class="w-1/2 flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Check-In</p>
                                <p class="w-full font-bold">${checkInTime.format("hh:mm A")}</p>
                            </div>
                            <div class="w-1/2 flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Check-Out</p>
                                <p class="w-full font-bold">${checkOutTime.format("hh:mm A")}</p>
                            </div>
                        </div>
                        <div class="w-full flex items-center space-x-1">
                            <div class="w-1/2 flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Total Hours</p>
                                <p class="w-full font-bold">${formatTotalHours(totalHours)}</p>
                            </div>
                            <div class="w-1/2 flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Status</p>
                                <p class="w-full font-bold">${data.status}</p>
                            </div>
                        </div>
                        <div class="w-full flex flex-col items-center space-y-1">
                            <p class="w-full text-xs text-slate-600">Reason</p>
                            <p class="w-full font-bold">${data.reason || 'N/A'}</p>
                        </div>

                        ${data.status !== "Pending" ? `
                            <div class="h-1 w-full mx-4 bg-gray-200"></div>
                            <div class="w-full flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Leave Status</p>
                                <p class="w-full font-bold ${statusColor}">${data.status || 'N/A'}</p>
                                <p class="w-full text-xs text-slate-600">Comment</p>
                                <p class="w-full font-bold">${data.comment || 'N/A'}</p>
                            </div>
                        ` : '' }
                    </div>
                    ${data.status === "Pending" ? 
                    `<div class="w-full flex items-center justified-center space-x-2">
                        <button type="button" id="approve-regularization" class="w-1/2 bg-s4s-color text-white text-sm font-bold py-2 rounded-lg shadow-md 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">Approve</button>
                        <button type="button" id="reject-regularization" class="w-1/2 bg-red-400 text-white text-sm font-bold py-2 rounded-lg shadow-md 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">Reject</button>
                    </div>`
                    : '' }
                `);
        }

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

            return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
        }

        // Model Related Js
        $(document).on("click", "#regularization-details #approve-regularization", function() {
            $(this).addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            $("#status").val("Approved");
            $("#comment-modal").removeClass("hidden");
        });

        $(document).on("click", "#regularization-details #reject-regularization", function() {
            $(this).addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            $("#status").val("Rejected");
            $("#comment-modal").removeClass("hidden");
        });

        $("#close-model").click(function() {
            $("#status").val("");
            $(document).find("#approve-regularization").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            $(document).find("#reject-regularization").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            $("#comment-modal").addClass("hidden");
        });

        $("#summit-model").click(function() {
            const statusVal = $("#status").val();
            const commentVal = $("#comment").val();
            $(this).addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            updateStatus(statusVal, commentVal);
            setTimeout(() => {
                $(this).removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            }, 3000);
        });

        async function updateStatus(status, comment) {
            await saveToLocal(Cookies.get('employee_mobile_number'), ("{{ $id }}" || 0), (status || 0), (comment || 0));

            if (navigator.onLine) {
                syncOfflineRegularizationApprovalFormData();
            }

            showToast("Status updated successfully!");
            setInterval(() => {
                window.location.reload();
            }, 3000);
        }

        // Save to LocalStorage
        async function saveToLocal(mobileNumber, id, status, comment) {
            const storeKey = "regularizationApprovalFormData";
            const storingData = {
                mobile_number: mobileNumber,
                id: id,
                status: status,
                comment: comment,
            };

            // Update the current data
            await storeInsertNewRow("approvalRegularizationRequestDetail", storingData);

            let storedData = JSON.parse(localStorage.getItem(storeKey)) || [];
            storedData.push(storingData);
            localStorage.setItem(storeKey, JSON.stringify(storedData));
            return true;
        }
    });
</script>
@endsection