@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/approval/comp-off')}}" id="leave" 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">Comp Off 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-4 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">

    <!-- Comp Off details -->
    <div id="comp-off-details" class="w-full flex flex-col items-center justify-start">
        <!-- This section will be dynamically populated with leave 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 focus:ring-teal-300 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

        fetchLeaveDetails();

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

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/compoff/compoff-details",
                    data: formDataLeave
                })
                const responseData = JSON.parse(response);
                // console.log("🚀 ~ fetchLeaveDetails ~ response:", response)
                if (responseData.success) {
                    // get All data
                    const getAllData = await storeGetData("approvalCompOffRequestDetail");

                    if (Array.isArray(getAllData) && getAllData.length > 50) {
                        await storeClearAll("approvalCompOffRequestDetail");
                    }
                    // Store data in IndexedDB
                    await storeInsertNewRow("approvalCompOffRequestDetail", responseData.data);
                    populateCompOffDetails(responseData.data);
                    return responseData.data || [];
                } else {
                    console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    return [];
                }
            } catch (error) {
                console.log("🚀 ~ fetchLeaveDetails ~ error:", error);

                // get data by id
                const getData = await storeGetDataById("approvalCompOffRequestDetail", "{{ $id }}");

                if (!getData) {
                    showToast("No locally store data found");
                    return;
                }

                populateCompOffDetails(getData);
            }
        }

        function formatTime(timeString) {
            return moment(timeString, "HH:mm:ss").format("hh:mm A");
        }

        // Populate the Comp Off details
        function populateCompOffDetails(data) {
            const detailsContainer = $('#comp-off-details');
            let statusColor = 'text-slate-500';
            let durationText = 'Full Day';
            let creditText = '1 Day';
            let workedTime = '';
            let unitText = "";

            if (data.duration === "half_day") {
                durationText = 'Half Day';
                creditText = "0.5 Day";
            } else if (data.duration === "full_day") {
                durationText = 'Full Day';
                creditText = '1 Day';
            } else if (data.duration === "multiple_days") {
                durationText = 'Multiple Days';
                // creditText = 'Multiple Days';
            }

            if (data?.start_time && data?.end_time) {
                workedTime = formatTime(data.start_time) + ' - ' + formatTime(data.end_time);
            }

            if (data?.units == "days") {
                unitText = "Days";
            }

            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">Worked Date</p>
                            <p class="w-full font-bold">${workedTime || 'N/A'}</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">Unit</p>
                            <p class="w-full font-bold">${unitText || 'N/A'}</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">Duration</p>
                                <p class="w-full font-bold">${durationText}</p>
                            </div>
                            <div class="w-1/2 flex flex-col items-center space-y-1">
                                <p class="w-full text-xs text-slate-600">Credited</p>
                                <p class="w-full font-bold">${creditText}</p>
                            </div>
                        </div>
                        <div class="w-full flex flex-col items-center mb-2 space-y-1">
                            <p class="w-full text-xs text-slate-600">Worked Time</p>
                            <p class="w-full font-bold">${workedTime || 'N/A'}</p>
                        </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>
                        <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">Status</p>
                            <p class="w-full font-bold ${statusColor}">${data.status || 'N/A'}</p>
                        </div>
                        <div class="w-full flex flex-col items-center space-y-1">
                            <p class="w-full text-xs text-slate-600">Comments</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-comp-off" 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-comp-off" 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", "#comp-off-details #approve-comp-off", function() {
            $("#status").val("approved");
            $(this).addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            $("#comment-modal").removeClass("hidden");
        });

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

        $("#close-model").click(function() {
            $(document).find("#approve-comp-off").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            $(document).find("#reject-comp-off").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
            $("#status").val("");
            $("#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) {
                syncOfflineCompOffApprovalFormData();
            }

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

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

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

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