@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/more')}}" 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">Leaves</span>
        </div>
        <a href="{{ url('/pwa/create-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="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z"/></svg>
            <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Create Leave</span>
        </a>
    </div>
    <main class="w-full px-4 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">
        <!-- Tabs -->
        <div class="flex gap-6 text-lg font-semibold w-full">
            <a href="#" class="text-teal-500 border-b-2 border-teal-500 pb-1">Leave View</a>
            <a href="{{ url('/pwa/comp-off') }}" class="text-gray-500 pb-1">Comp Off</a>
            <a href="{{ url('/pwa/holidays') }}" class="text-gray-500 pb-1">Holidays</a>
        </div>

        <!-- Leave Balance Cards -->
        <div id="leave-balance" class="mt-4 flex gap-3 overflow-x-auto w-full pb-2">
            <!-- This section will be dynamically populated with leave balance data -->
        </div>

        <!-- Leave History Listing -->
        <div id="leave-list" class="w-full flex flex-col items-center justify-start">
            <!-- This section will be dynamically populated with attendance data -->
        </div>
        <div id="dot-loader" class="relative w-full hidden">
            <div class="dot-loader absolute top-2 left-[40%]"></div>
        </div>
        <div id="no-data-message" class="text-sm italic text-gray-600 my-4 hidden">No data available</div>
    </main>


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

@endsection

@section('custom-js')
    <script>
        $('document').ready(async function() {
            // leave history listing
            const getSessionValue = await storeGetDataById("sessionStore", 1);
            const employeeName =  getSessionValue?.name || ""; // Employee name
            let loading = false; // Prevent multiple requests
            let ticTick = 0; // Counter for the order of the list
            let perPage = 10; // Number of records to fetch per request
            let page = 1; // Page number
            let ajaxStopper = false; // Stop fetching data when there is no more data
            let listContainer = $("#leave-list");
            let noDataMessage = $("#no-data-message");
            let dotLoader = $("#dot-loader");

            // Filter variables
            let fromDate = "";
            let toDate = "";
            let status = "";

            // Init
            listContainer.empty();            
            noDataMessage.addClass('hidden');
            fetchLeaveList();

            $(window).scroll(function() {                
                if (!ajaxStopper && !loading && $(window).scrollTop() >= ($(document).height() - $(window).height())) {
                    loading = true; // Set loading to true to prevent duplicate calls
                    dotLoader.removeClass('hidden'); // Show the loader
                    // Fetch the attendance details
                    setTimeout(() => {
                        loading = false; // Reset loading
                        fetchLeaveList();
                        dotLoader.addClass('hidden'); // Hide the loader
                    }, 1000); // Simulated delay (1s)
                }
            });

            // Fetch the attendance details
            async function fetchLeaveList() {
                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 formDataAttendance = new FormData();
                    formDataAttendance.append("mobile_number", Cookies.get('employee_mobile_number'));
                    formDataAttendance.append("page", page);
                    formDataAttendance.append("per_page", perPage);
                    
                    if (!ajaxStopper) {
                        const response = await $.ajax({
                            ...ajaxSettings, 
                            url: "{{ env('APP_URL') }}/api/leaves/leave-balance", 
                            data: formDataAttendance
                        })
                        const responseData = JSON.parse(response);
                        if (responseData.success) {
                            if ((responseData.data?.applied_leaves || []).length > 0) {
                                if (page === 1) {
                                    await storeClearAll("leaveRequestList");
                                } 
                                page++;
                                // Store data in IndexedDB
                                await storeInsertAsArray("leaveRequestList", responseData.data?.applied_leaves || []);
                                populateList(responseData.data?.applied_leaves || []);
                                // Store data in IndexedDB
                                await storeClearAll("LeaveBalance");
                                await storeInsertAsArray("LeaveBalance", responseData.data.leave_balances || []);
                                populateLeaveDetails(responseData.data.leave_balances || []);
                            } else {
                                ajaxStopper = true
                                noDataMessage.removeClass('hidden');
                            }
                        } else {
                            console.error("🚀 ~ fetchLeaveList ~ error", responseData.message);
                        }
                    }
                } catch (error) {
                    console.log("🚀 ~ fetchLeaveList ~ error:", error);
                    const getLeaveRequestList = await storeGetData("leaveRequestList");
                    populateList(getLeaveRequestList || []);
                    const getLeaveBalance = await storeGetData("LeaveBalance");
                    populateLeaveDetails(getLeaveBalance || []);
                    ajaxStopper = true;
                }
            }

            function getNoOfDays(data) {
                let startDate = moment(data.start_date);
                let endDate = moment(data.end_date);
                return endDate.diff(startDate, 'days') + 1;
            }

            function populateList(data) {
                data.forEach(async record => {
                    ticTick++;
                    let noOfDays = '1 Day'; // Default value
                    let dateText = moment(record.start_date).format("DD-MMM-YYYY");
                    let statusColor = 'text-slate-500';

                    if (record.is_half_day) {
                        noOfDays = '0.5 Day';
                    } else {
                        noOfDays = getNoOfDays(record) + ' Days';
                    }

                    if (record.start_date !== record.end_date) {
                        dateText = `${moment(record.start_date).format("DD-MMM-YYYY")} to ${moment(record.end_date).format("DD-MMM-YYYY")}`;
                    }

                    if (record.status === 'Pending') {
                        statusColor = 'text-yellow-500';
                    } else if (record.status === 'Approved') {
                        statusColor = 'text-green-500';
                    } else if (record.status === 'Rejected') {
                        statusColor = 'text-red-500';
                    } else {
                        statusColor = 'text-slate-500';
                    }
                    
                    listContainer.append(`
                        <a href="{{ url('/pwa/leave-detail') }}/${record.id}" class="w-full rounded overflow-hidden shadow-lg bg-white my-2 p-4 rounded-lg order-${ticTick}">
                            <p class="font-bold">${record.leave_type_name} - ${noOfDays}</p>
                            <p class="font-semibold">${dateText}</p>
                            <p class="font-medium uppercase ${statusColor}">${record.status || 'N/A'}</p>
                        </a>
                    `);
                });
            }

            function populateLeaveDetails(data) {
                $("#leave-balance").empty();
                data.forEach(record => {
                    $("#leave-balance").append(`
                        <div class="bg-white p-4 rounded-lg shadow-md min-w-[140px] text-center">
                            <p class="font-bold">${record.leave_type_name} (${record.allocated_leaves})</p>
                            <p class="text-teal-500 font-bold text-md">${record.remaining_leaves}</p>
                            <p class="text-sm font-semibold">Balance</p>
                            <p class="text-red-500 font-bold text-md">${record.used_leaves}</p>
                            <p class="text-sm font-semibold">Booked</p>
                        </div>
                    `);
                });
            }
        });
    </script>
@endsection