@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/dashboard')}}" 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-2xl">Comp Off Request</span>
    </div>
    <!-- <a href="#" tabindex="-1" id="drawer-opener" 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="M440-126q-30 0-52-22t-22-52v-228L142-716q-29-37-9-77.5t67-40.5h560q47 0 67 40.5t-9 77.5L594-428v239q0 27-18 45t-45 18h-91Zm40-362 172-220H308l172 220Zm0 0Z"/></svg>
            <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Filter</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 flex-row overflow-y-hidden overflow-x-auto gap-6 text-lg font-semibold w-full mb-2 py-2">
        <a href="#" class="text-teal-500 border-b-2 border-teal-500 pb-1 max-[400px]:text-sm leading-1.5 text-nowrap">Comp Off Request</a>
        <a href="{{ url('/pwa/approval/regularization') }}" class="text-gray-500 pb-1 max-[400px]:text-sm leading-1.5 text-nowrap">Regularization Request</a>
        <a href="{{ url('/pwa/approval/leave') }}" class="text-gray-500 pb-1 max-[400px]:text-sm leading-1.5 text-nowrap">Leave Request</a>
    </div>

    <!-- Listing -->
    <div id="comp-off-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-2 hidden">no data available</div>
</main>


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

<!-- drawer component -->
<div id="drawer-filter" class="fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto transition-transform bg-white w-60 translate-x-full hidden" tabindex="-1" aria-labelledby="drawer-filter-label">
    <!-- Add any additional content or components for the drawer here -->
    <h5 id="drawer-label" class="inline-flex items-center mt-2 mb-6 text-base font-semibold text-gray-800 uppercase">Filter</h5>
    <button id="drawer-close" type="button" data-drawer-hide="drawer-filter" aria-controls="drawer-filter" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-4.5 end-2.5 inline-flex items-center justify-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">
        <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"></path>
        </svg>
        <span class="sr-only hidden">Close menu</span>
    </button>
    <div class="w-full bg-white">
        <!-- By Date Section -->
        <div class="mt-4">
            <div class="flex justify-between items-center">
                <h4 class="text-sm font-bold text-red-500">BY DATE</h4>
                <!-- <button class="text-lg font-semibold text-gray-500">–</button> -->
            </div>

            <div class="mt-2">
                <label class="text-sm font-medium">From</label>
                <div class="flex items-center border border-gray-300 rounded-md p-2 mt-1 space-x-1">
                    <span class="material-icons text-gray-500">
                        <svg class="fill-gray-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                            <path d="M212-46q-53 0-89.5-36.5T86-172v-536q0-53 36.5-89.5T212-834h28v-80h103v80h274v-80h103v80h28q53 0 89.5 36.5T874-708v536q0 53-36.5 89.5T748-46H212Zm0-126h536v-388H212v388Zm0-468h536v-68H212v68Zm0 0v-68 68Zm268 248q-20.4 0-34.2-13.8Q432-419.6 432-440q0-20.4 13.8-34.2Q459.6-488 480-488q20.4 0 34.2 13.8Q528-460.4 528-440q0 20.4-13.8 34.2Q500.4-392 480-392Zm-160 0q-20.4 0-34.2-13.8Q272-419.6 272-440q0-20.4 13.8-34.2Q299.6-488 320-488q20.4 0 34.2 13.8Q368-460.4 368-440q0 20.4-13.8 34.2Q340.4-392 320-392Zm320 0q-19 0-33.5-13.8T592-440q0-20.4 14.5-34.2 14.5-13.8 34-13.8t33.5 13.8q14 13.8 14 34.2 0 20.4-13.8 34.2Q660.4-392 640-392ZM480-232q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q528-300.4 528-280q0 19-13.8 33.5T480-232Zm-160 0q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q368-300.4 368-280q0 19-13.8 33.5T320-232Zm320 0q-19 0-33.5-14.5t-14.5-34q0-19.5 14.5-33.5t34-14q19.5 0 33.5 13.8t14 34.2q0 19-13.8 33.5T640-232Z" />
                        </svg>
                    </span>
                    <input id="filter-date-from" type="date" class="w-full outline-none bg-transparent">
                </div>
            </div>

            <div class="mt-2">
                <label class="text-sm font-medium">To</label>
                <div class="flex items-center border border-gray-300 rounded-md p-2 mt-1 space-x-1">
                    <span class="material-icons text-gray-500">
                        <svg class="fill-gray-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                            <path d="M212-46q-53 0-89.5-36.5T86-172v-536q0-53 36.5-89.5T212-834h28v-80h103v80h274v-80h103v80h28q53 0 89.5 36.5T874-708v536q0 53-36.5 89.5T748-46H212Zm0-126h536v-388H212v388Zm0-468h536v-68H212v68Zm0 0v-68 68Zm268 248q-20.4 0-34.2-13.8Q432-419.6 432-440q0-20.4 13.8-34.2Q459.6-488 480-488q20.4 0 34.2 13.8Q528-460.4 528-440q0 20.4-13.8 34.2Q500.4-392 480-392Zm-160 0q-20.4 0-34.2-13.8Q272-419.6 272-440q0-20.4 13.8-34.2Q299.6-488 320-488q20.4 0 34.2 13.8Q368-460.4 368-440q0 20.4-13.8 34.2Q340.4-392 320-392Zm320 0q-19 0-33.5-13.8T592-440q0-20.4 14.5-34.2 14.5-13.8 34-13.8t33.5 13.8q14 13.8 14 34.2 0 20.4-13.8 34.2Q660.4-392 640-392ZM480-232q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q528-300.4 528-280q0 19-13.8 33.5T480-232Zm-160 0q-20.4 0-34.2-14.5-13.8-14.5-13.8-34t13.8-33.5q13.8-14 34.2-14 20.4 0 34.2 13.8Q368-300.4 368-280q0 19-13.8 33.5T320-232Zm320 0q-19 0-33.5-14.5t-14.5-34q0-19.5 14.5-33.5t34-14q19.5 0 33.5 13.8t14 34.2q0 19-13.8 33.5T640-232Z" />
                        </svg>
                    </span>
                    <input id="filter-date-to" type="date" class="w-full outline-none bg-transparent">
                </div>
            </div>
        </div>

        <!-- By Status Section -->
        <div class="mt-4">
            <div class="flex justify-between items-center">
                <h4 class="text-sm font-bold text-red-500">BY STATUS</h4>
                <!-- <button class="text-lg font-semibold text-gray-500">–</button> -->
            </div>

            <div class="mt-2 space-y-2">
                <label class="flex items-center space-x-2">
                    <input type="radio" value="" name="status" class="text-teal-500 focus:ring-teal-400" checked>
                    <span>All</span>
                </label>
                <label class="flex items-center space-x-2">
                    <input type="radio" name="status" value="Pending" class="text-teal-500 focus:ring-teal-400">
                    <span>Pending</span>
                </label>
                <label class="flex items-center space-x-2">
                    <input type="radio" name="status" value="Approved" class="text-teal-500 focus:ring-teal-400">
                    <span>Approved</span>
                </label>
                <label class="flex items-center space-x-2">
                    <input type="radio" name="status" value="Rejected" class="text-teal-500 focus:ring-teal-400">
                    <span>Rejected</span>
                </label>
            </div>
        </div>

        <!-- Buttons -->
        <div class="mt-6 flex flex-col space-y-2">
            <button id="clear-filter" class="border border-red-400 text-red-500 py-2 rounded-lg text-center font-medium hover:bg-red-100 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">
                Clear Filter
            </button>
            <button id="filter-submit" class="bg-teal-500 text-white py-2 rounded-lg text-center font-medium hover:bg-teal-600 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">
                Apply Filter
            </button>
        </div>
    </div>
</div>

@endsection

@section('custom-js')
<script>
    $(document).ready(async function() {
        const getSessionValue = await storeGetDataById("sessionStore", 1);
        const employeeName = getSessionValue?.name || ""; // Employee name
        const storeApprovalCompOffRequestList = "approvalCompOffRequestList";
        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');

        // fetch the first page data
        fetchRegularizedList();

        $(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
                    fetchRegularizedList();
                    dotLoader.addClass('hidden'); // Hide the loader
                }, 1000); // Simulated delay (1s)
            }
        });

        // Fetch the attendance details
        async function fetchRegularizedList() {
            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 formDataLeaveRequest = new FormData();
                formDataLeaveRequest.append("mobile_number", Cookies.get('employee_mobile_number'));
                // formDataLeaveRequest.append("page", page);
                // formDataLeaveRequest.append("per_page", perPage);

                // if (fromDate && toDate) {
                //     formDataLeaveRequest.append("start_date", fromDate);
                //     formDataLeaveRequest.append("end_date", toDate);
                // }

                // if (status) {
                //     formDataLeaveRequest.append("status", status);
                // }

                if (!ajaxStopper) {
                    const response = await $.ajax({
                        ...ajaxSettings,
                        url: "{{ env('APP_URL') }}/api/compoff/compoff-requests",
                        data: formDataLeaveRequest
                    })
                    const responseData = JSON.parse(response);
                    if (responseData.success) {
                        if (responseData.data.length > 0) {
                            if (page === 1) {
                                await storeClearAll(storeApprovalCompOffRequestList);
                            }
                            page++;
                            storeInsertAsArray(storeApprovalCompOffRequestList, responseData.data);
                            populateList(responseData.data);
                        } else {
                            noDataMessage.removeClass('hidden');
                        }
                        // because we do have the pagination in this module
                        ajaxStopper = true;
                    } else {
                        console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    }
                }
            } catch (error) {
                console.log("🚀 ~ fetchRegularizedList ~ error:", error)
                const getData = await storeGetData(storeApprovalCompOffRequestList);
                populateList(getData);
                ajaxStopper = true;
            }
        }

        function populateList(data) {
            data.forEach(async record => {
                ticTick++;
                bgStatusColor = 'bg-gray-500';
                let dateText = moment(record.worked_date).format("DD-MMM-YYYY");

                if (record.status === "pending") {
                    bgStatusColor = 'bg-yellow-300'
                }

                if (record.status === "approved") {
                    bgStatusColor = 'bg-green-300'
                }

                if (record.status === "rejected") {
                    bgStatusColor = 'bg-red-300'
                }

                listContainer.append(`
                        <a href="{{ url('/pwa/approval/comp-off-detail') }}/${record.id}" class="w-full relative rounded overflow-hidden shadow-lg bg-white my-2 p-4 rounded-lg order-${ticTick}">
                            <p class="font-extrabold text-sm">leave Request</p>
                            <p class="font-semibold">${record.employee_name} - ${record?.display_employee_id ?? record?.employee_id}</p>
                            <p class="font-medium text-md text-slate-500">${dateText}</p>
                            <span class="absolute top-10 right-4 text-xs font-bold rounded-lg shadow-md px-2 py-1 uppercase ${bgStatusColor}">${record.status}</span>
                        </a>
                    `);
            });
        }

        $("#drawer-opener").click(function() {
            $("#drawer-filter").removeClass("translate-x-full").addClass("translate-none");

        });

        $("#drawer-close").click(function() {
            $("#drawer-filter").addClass("translate-x-full").removeClass("translate-none");
        });

        $("#filter-submit").click(function() {
            fromDate = $("#filter-date-from").val();
            toDate = $("#filter-date-to").val();
            status = $("input[name='status']:checked").val();

            if (fromDate && !toDate) {
                showToast("Please select a date range");
                return;
            }

            if (!fromDate && toDate) {
                showToast("Please select a date range");
                return;
            }


            // Reset the list
            page = 1;
            ajaxStopper = false;
            ticTick = 0;
            listContainer.empty();
            noDataMessage.addClass('hidden');

            // Fetch the attendance details
            fetchRegularizedList();

            // Close the drawer
            setTimeout(() => {
                $("#drawer-filter").addClass("translate-x-full").removeClass("translate-none");
            }, 300);
        });

        $("#clear-filter").click(function() {
            fromDate = "";
            toDate = "";
            status = "";

            // Reset the list
            page = 1;
            ajaxStopper = false;
            ticTick = 0;
            listContainer.empty();
            noDataMessage.addClass('hidden');

            // Fetch the attendance details
            fetchRegularizedList();

            // Close the drawer
            setTimeout(() => {
                $("#drawer-filter").addClass("translate-x-full").removeClass("translate-none");
            }, 300);
        });
    });
</script>
@endsection