@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">Comp Off</span>
        </div>
        <a href="{{ url('/pwa/create-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="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z"/></svg>
            <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Create Comp Off</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="{{ url('/pwa/leave') }}" class="text-gray-500 pb-1">Leave View</a>
            <a href="#" class="text-teal-500 border-b-2 border-teal-500 pb-1">Comp Off</a>
            <a href="{{ url('/pwa/holidays') }}" class="text-gray-500 pb-1">Holidays</a>
        </div>

        <!-- Leave History Listing -->
        <div id="comp-off-list" class="w-full flex flex-col items-center justify-start mt-4">
            <!-- 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 = $("#comp-off-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/compoff/compoff-lists", 
                            data: formDataAttendance
                        })
                        const responseData = JSON.parse(response);
                        if (responseData.success) {
                            if ((responseData.data || []).length > 0) {
                                if (page === 1) {
                                    await storeClearAll("compOffList");
                                } 
                                page++;
                                // Store data in IndexedDB
                                
                                populateList(responseData.data || []);
                            } else {
                                noDataMessage.removeClass('hidden');
                            }
                            ajaxStopper = true
                        } else {
                            console.error("🚀 ~ fetchLeaveList ~ error", responseData.message);
                        }
                    }
                } catch (error) {
                    console.log("🚀 ~ fetchLeaveList ~ error:", error);
                    const getCompOffList = await storeGetData("compOffList");
                    populateList(getCompOffList || []);
                    ajaxStopper = true;
                }
            }

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

            function getRandomHexColor() {
                const color = Math.floor(Math.random() * 0xffffff).toString(16);
                return color.padStart(6, "0").toUpperCase();
            }

            function populateList(data) {
                console.log("🚀 ~ populateList ~ data:", data)
                data.forEach(async record => {
                    ticTick++;
                    let statusColor = 'text-slate-500';

                    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/comp-off') }}/${record.id}" class="w-full flex items-center space-x-2 rounded overflow-hidden shadow-lg bg-white p-4 rounded-lg order-${ticTick}">
                            <span class="rounded-full flex items-center justify-center w-10 h-10">
                                <img class="rounded-full" src="https://ui-avatars.com/api/?name=${employeeName}&background=${getRandomHexColor()}&color=FFFFFF" alt="${employeeName || 'N/A'}">
                            </span>
                            <div class="flex flex-1 flex-col items-center">
                                <p class="w-full font-semibold">${employeeName || 'N/A'}</p>
                                <p class="w-full text-gray-500 text-sm mb-1">${moment(record.worked_date).format('DD MMM YYYY')}</p>
                                <p class="w-full text-xs uppercase ${statusColor}">${record.status || 'N/A'}</p>
                            </div>
                        </a>
                        <div class=" mb-2">
                        </div>
                    `);
                });
            }
        });
    </script>
@endsection