@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="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">Team</span>
    </div>
</div>

<main class="w-full px-4 pt-2 min-h-screen mb-24 flex flex-col items-center justify-start">

    <div class="flex items-center max-w-sm mx-auto w-full mb-2">
        <label for="simple-search" class="sr-only">Search</label>
        <div class="relative w-full">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                </svg>
            </div>
            <input type="text" id="user-search" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full ps-10 p-2.5" placeholder="Search name..." required />
        </div>
        <button id="filter-submit" type="button" class="p-2.5 ms-2 text-sm font-medium text-white bg-s4s-color rounded-lg border border-teal-700 hover:bg-teal-800 focus:ring-4 focus:outline-none focus:ring-teal-300">
            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
            </svg>
            <span class="sr-only">Search</span>
        </button>
    </div>

    <!-- Listing -->
    <div id="team-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="more" />

@endsection

@section('custom-js')
<script>
    $(document).ready(async function() {
        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 = $("#team-list");
        let noDataMessage = $("#no-data-message");
        let dotLoader = $("#dot-loader");

        // Filter variables
        let searchName = "";

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

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

        // Fetch the attendance details
        async function fetchTeamList() {
            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'));

                if (searchName) {
                    formDataAttendance.append("search", searchName);
                }

                if (!ajaxStopper) {
                    const response = await $.ajax({
                        ...ajaxSettings,
                        url: "{{ env('APP_URL') }}/api/manager/employees/list",
                        data: formDataAttendance
                    })
                    const responseData = JSON.parse(response);
                    if (responseData.success) {
                        if (responseData.data.length > 0) {
                            // if (page === 1) {
                            //     await storeClearAll("teamList");
                            // } 
                            page++;
                            // Store data in IndexedDB
                            // await storeInsertAsArray("teamList", responseData.data || []);
                            populateList(responseData.data);
                        } else {
                            noDataMessage.removeClass('hidden');
                        }
                    } else {
                        console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    }
                    ajaxStopper = true
                }
            } catch (error) {
                console.log("🚀 ~ fetchTeamList ~ error:", error);
                /* const getRegularizationList = await storeGetData("teamList");
                populateList(getRegularizationList || []); */
                ajaxStopper = true;
            }
        }

        function populateList(data) {
            data.forEach(async record => {
                ticTick++;
                listContainer.append(`
                        <a href="{{ url('/pwa/team/options') }}/${record.mobile_number}" class="w-full rounded overflow-hidden shadow-lg bg-white my-2 p-4 rounded-lg order-${ticTick}">
                            <p class="font-bold">${record.first_name} ${record?.last_name} - ${record?.display_employee_id ?? (record?.id || '')}</p>
                            <p class="font-semibold">${record?.designation} ${record?.department ? "-" : ""} ${record?.department}</p>
                            <p class="font-medium text-slate-500">${record.email}</p>
                            <p class="font-medium text-slate-500">${record.mobile_number}</p>
                        </a>
                    `);
            });
        }

        $("#filter-submit").click(function() {
            // Reset the list
            page = 1;
            ajaxStopper = false;
            ticTick = 0;
            listContainer.empty();
            noDataMessage.addClass('hidden');

            searchName = $("#user-search").val();

            // Fetch the attendance details
            fetchTeamList();
        });
    });
</script>
@endsection