@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/comp-off')}}" id="comp-off" 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</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">

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


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

@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("comp_off_id", "{{ $id }}" || 0);

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/compoff/compoff-details",
                    data: formDataRegularization
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    // get All data
                    const getAllData = await storeGetData("compOffDetail");

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

                    // Store data in IndexedDB
                    await storeInsertNewRow("compOffDetail", responseData.data || []);
                    populateCompOffDetails(responseData.data || []);
                    return responseData.data || [];
                } else {
                    console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    return [];
                }
            } catch (error) {
                console.log("🚀 ~ fetchRegularizationDetails ~ error:", error);
                // get data by id
                const getCompOffRequestDetail = await storeGetDataById("compOffDetail", "{{ $id }}");
                if (!getCompOffRequestDetail) {
                    showToast("No locally store data found");
                    return;
                }
                populateCompOffDetails(getCompOffRequestDetail);
            }
        }

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

        // Populate the comp-ff 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">${employeeName} - ${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>
                `);
        }

        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');
        }

        // $(document).on('click', '#leave-details #cancel-leave', async function() {
        //     const id = "{{ $id }}" || 0;

        //     if (!id) {
        //         showToast("Something went wrong");
        //         return;
        //     } 
        //     await saveToLocal(Cookies.get('employee_mobile_number'), id);

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

        //     showToast('Leave request has been cancelled successfully');
        //     window.location.reload();
        // });

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

            storeInsertNewRow("compOffDetail", storingData);

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