@extends('pwa::layouts.master')

@section('content')
<div class="w-full mx-auto py-6 px-4 flex justify-between align-center">
    <div class="flex space-x-2">
        <a href="#" id="profile-sidebar">
            <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="M480-497q-81 0-137.5-56.5T286-691q0-81 56.5-137T480-884q81 0 137.5 56T674-691q0 81-56.5 137.5T480-497ZM126-109v-148q0-43.3 22.7-79.6 22.69-36.3 60.3-55.4 65-32 132.96-48.5Q409.92-457 480-457q72 0 140 16t131 48q37.61 18.96 60.3 54.98Q834-302 834-257.05V-109H126Zm126-126h456v-17q0-10.03-5.5-18.24-5.5-8.2-14.5-12.76-48-23-100-35.5T480-331q-54 0-108 12.5T272-283q-9 4.56-14.5 12.76-5.5 8.21-5.5 18.24v17Zm227.96-388Q508-623 528-642.96q20-19.97 20-48 0-28.04-19.96-47.54-19.97-19.5-48-19.5Q452-758 432-738.32T412-691q0 28.05 19.96 48.03 19.97 19.97 48 19.97Zm.04-68Zm0 456Z" />
            </svg>
        </a>
        <a href="{{ url('/pwa/dashboard')}}" id="home" class="no-underline flex items-center justify-center space-x-1">
            <span class="font-extrabold px-0 text-grey-800 text-2xl">Home</span>
        </a>
    </div>
    <a href="{{ url('/pwa/notifications')}}" id="notification" 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="M126-166v-126h68v-246q0-96 55.5-173T397-811v-20q0-34.58 24.21-58.79T480-914q34.58 0 58.79 24.21T563-831v20q93 23 148 99.5T766-538v246h68v126H126Zm354-329Zm1 460q-37.95 0-64.98-26.73Q389-88.46 389-126h183q0 38-26.73 64.5T481-35ZM320-292h320v-246q0-66-47-113t-113-47q-66 0-113 47t-47 113v246Z" />
        </svg>
        <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Notification</span>
    </a>
</div>
<div class="w-full py-6 px-4 pt-2 min-h-screen mb-16">
    <div id="check-in-out-container" class="flex justify-center items-center mb-6 opacity-0">
        <div class="rounded-lg shadow-lg bg-white w-full max-w-md">
            <div class="p-8">
                <div class="w-full">
                    <h5 class="font-extrabold mb-2 text-capitalize text-center text-2xl">
                        Check In
                    </h5>
                    <div id="counter-container" class="flex justify-center items-center space-x-2">
                        <div class="p-4 bg-s4s-service-blu shadow rounded-xl text-center flex items-center justify-center">
                            <span id="hours" class="font-extrabold text-gray-800 text-lg">00</span>
                        </div>
                        <div class="p-4 bg-s4s-service-blu shadow rounded-xl text-center flex items-center justify-center">
                            <span id="minutes" class="font-extrabold text-gray-800 text-lg">00</span>
                        </div>
                        <div class="p-4 bg-s4s-service-blu shadow rounded-xl text-center flex items-center justify-center">
                            <span id="seconds" class="font-extrabold text-gray-800 text-lg">00</span>
                        </div>
                    </div>
                    <p class="text-sm text-capitalize text-center font-weight-bold my-4">
                        <span>General: 09:30 AM to 06:30 PM</span>
                    </p>
                    <div class="row flex flex-col items-center justify-center">
                        <button id="checkin" class="bg-s4s-color text-white text-lg w-full mt-0 mb-0 rounded-lg font-bold leading-[1.4] align-middle text-center py-3 px-6 max-w-42 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">Check In</button>
                        <button id="checkout" class="bg-red-500 text-white text-lg w-full mt-0 mb-0 rounded-lg font-bold leading-[1.4] align-middle text-center py-3 px-6 max-w-42 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 hidden">Check Out</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeline Card -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <a href="{{ url('/pwa/timeline') }}" class="relative flex items-center space-x-3 decoration-0 no-underline">
            <span class="text-blue-500 text-2xl">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M134.85-225Q89-225 57-257q-32-32-32-77.85 0-45.85 32.24-78.5Q89.49-446 134.77-446q8.23 0 15.73 1t15.5 3l127-127q-2-8-3-15.5t-1-15.8q0-45.67 32.65-78.18Q354.3-711 400.15-711t78.35 32.61Q511-645.79 511-600q0 10-4 28l65 65q7-2 13.5-3t14.5-1q8 0 15 1t14 3l89-88q-2-7-3-14.5t-1-15.73q0-45.28 32.65-77.53Q779.3-735 825.15-735T903-703q32 32 32 77.85 0 45.85-32.24 78.5Q870.51-514 825.23-514q-8.23 0-15.73-1t-14.5-3l-88 89q2 7 3 14t1 15.3q0 45.67-32.65 78.18Q645.7-289 599.85-289t-78.35-32.52Q489-354.03 489-399.7q0-8.3 1-15.8t3-15.5l-62-62q-8 2-15.5 3t-15.5 1q-10 0-28-4L242-363q2 7 3 13.5t1 14.73q0 45.28-32.65 77.53Q180.7-225 134.85-225Z"></path>
                </svg>
            </span>
            <p class="text-lg font-bold">Timeline</p>
            <svg class="h-6 w-6 fill-teal-500 absolute right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="M321-48 218-151l329-329-329-329 103-103 432 432L321-48Z" />
            </svg>
        </a>
    </div>

    <!-- Birthday Card -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <div class="flex items-center space-x-3">
            <span class="text-blue-500 text-2xl">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M142-49q-35 0-60.5-25.5T56-135v-154q0-39 22-70.5t58-45.5v-124q0-53 36.5-89.5T262-655h155v-35q-18-14.09-29-34.04Q377-744 377-773q0-20 6.5-37.5T407-845l73-72 73 72q17 17 23.5 34.5T583-773q0 28.55-11 48.78Q561-704 543-690v35h155q53 0 89.5 36.5T824-529v124q36 14 58 45.5t22 70.5v154q0 35-25.5 60.5T818-49H142Zm120-366h436v-114H262v114Zm-80 240h596v-114H182v114Zm80-240h436-436Zm-80 240h596-596Zm642-240H136h688Z" />
                </svg>
            </span>
            <p class="text-lg font-bold">Birthday</p>
        </div>
        <!-- Birthday Details -->
        <div id="birthday-list" class="mt-4 p-2 flex flex-col space-y-4">
            <p class="w-full text-center text-gray-500 mt-2 py-3">No birthdays today!</p>
        </div>
    </div>

    <!-- Work Anniversary Card -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <div class="flex items-center space-x-3">
            <span class="text-blue-500 text-2xl">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M126-46v-407H46v-330h225q-3-9-4.5-18.35-1.5-9.36-1.5-19.65 0-56 39.38-94.5Q343.75-954 400-954q22 0 42.5 6t37.5 19q17-13 38-19t43-6q55.83 0 94.92 38.5Q695-877 695-821q0 10.45-1.5 19.47Q692-792.5 689-783h225v330h-80v407H126Zm435-814q-17 0-28.5 11.07T521-821.5q0 16.36 11.5 27.43T561-783q17 0 28.5-11.07T601-821.5q0-16.36-11.5-27.43T561-860Zm-201 38.5q0 16.36 11.5 27.43T400-783q17 0 28.5-11.07T440-821.5q0-16.36-11.5-27.43T400-860q-17 0-28.5 11.07T360-821.5ZM172-657v78h255v-78H172Zm255 486v-282H252v282h175Zm106 0h175v-282H533v282Zm256-408v-78H533v78h256Z" />
                </svg>
            </span>
            <p class="text-lg font-bold">Work Anniversary</p>
        </div>

        <!-- Dynamic content -->
        <div id="wa-list" class="mt-4 p-2 flex flex-col space-y-4">
            <p class="w-full text-center text-gray-500 mt-2 py-3">No work anniversaries today!</p>
        </div>
    </div>

    <!-- Announcements Card -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <div class="flex items-center space-x-3">
            <span class="text-blue-500 text-2xl">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M479.88-354Q414-354 368-400.08 322-446.17 322-512v-233q0-65.83 46.12-111.92 46.12-46.08 112-46.08T592-856.92q46 46.09 46 111.92v233q0 65.83-46.12 111.92-46.12 46.08-112 46.08Zm.12-275ZM425-59v-127q-121-16-199-109.12T148-512h111q0 92 64.7 156.5T480.2-291q91.8 0 156.3-64.64Q701-420.29 701-512h111q0 124-78 217T535-186v127H425Zm55-421q13.6 0 22.8-9.2 9.2-9.2 9.2-22.8v-233q0-13.6-9.2-22.8-9.2-9.2-22.8-9.2-13.6 0-22.8 9.2-9.2 9.2-9.2 22.8v233q0 13.6 9.2 22.8 9.2 9.2 22.8 9.2Z" />
                </svg>
            </span>
            <p class="text-lg font-extrabold">Announcements</p>
        </div>

        <!-- Dynamic content -->
        <div id="announcement-list" class="mt-4 p-2 flex flex-col space-y-4">
            <p class="w-full text-center text-gray-500 mt-2 py-3">No announcements today!</p>
        </div>
    </div>

    <!-- Leave Report -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="m261-17 127-639q7-35 32-52.5t54-17.5q26 0 50 12t38 35l39 64q18 30 38.5 48t45.5 26v-73h90v597h-90v-408q-37-8-71.5-26.5T549-499l-16 83 82 78v321H505v-247l-60-57-69 304H261Zm-2-376-91-19q-25-5-39-26.5t-9-46.5l30-157q8-41 44-65.5t77-15.5l52 11-64 319Zm281-362q-39 0-67-28.5T445-851q0-39 28-67t67-28q39 0 67 28t28 67q0 39-28 67.5T540-755Z" />
                </svg>
                <h2 class="text-lg font-bold">Leave Report</h2>
            </div>
            <a class="bg-teal-500 text-white px-3 py-3 rounded-full text-lg" href="{{ url('/pwa/create-leave') }}#home">
                <svg class="h-4 w-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z" />
                </svg>
            </a>
        </div>

        <!-- Leave Details -->
        <div id="leave-list" class="mt-4 p-2 flex flex-col space-y-4">

        </div>

        <!-- View More Button -->
        <div class="flex justify-center mt-4">
            <a href="{{ url('/pwa/leave-balance') }}" class="bg-sky-400 text-white px-2 py-1 rounded-full text-sm">View More</a>
        </div>
    </div>

    <!-- Holiday Report -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-6">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <svg class="h-8 w-8 fill-teal-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M34-136v-439l255-255 256 255v439H34Zm111-111h89v-120h111v120h89v-282L289-673 145-529v282Zm89-169v-111h111v111H234Zm391 280v-472L381-851h157l197 197v518H625Zm190 0v-551L651-851h156l119 118v597H815ZM145-247h289-289Z" />
                </svg>
                <h2 class="text-lg font-bold">Upcoming Holiday</h2>
            </div>
        </div>

        <!-- Holiday Details -->
        <div id="holiday-list" class="mt-4 p-2 flex flex-col space-y-4">

        </div>

        <!-- View More Button -->
        <div class="flex justify-center mt-2">
            <a href="{{ url('/pwa/holidays') }}#home" class="bg-sky-400 text-white px-2 py-1 rounded-full text-sm">View More</a>
        </div>
    </div>
    <!-- <input class="w-full bg-white" type="text" id="delete-me-token" /> -->
</div>

<!-- Model -->
<input type="hidden" id="is_check_in_out" value="0">
<input type="hidden" id="is_traveling" value="0">
<input type="hidden" id="traveling_reason" value="">
<div id="comment-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-40 justify-center items-center w-full md:inset-0 h-full max-h-full">
    <!-- Backdrop Layer -->
    <div class="absolute inset-0 bg-sky-50 bg-opacity-50"></div>

    <div class="relative p-4 w-full max-w-2xl max-h-ful">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow-sm">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
                <h3 class="text-xl font-semibold text-gray-900">
                    Are you traveling
                </h3>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <textarea id="reason" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-teal-500 focus:border-teal-500" placeholder="Reason here"></textarea>
            </div>
            <!-- <div class="p-4 md:p-5 space-y-4" id="timeline-container">                     -->
            <!-- Timeline content will be dynamically inserted here -->
            <!-- </div> -->
            <!-- Modal footer -->
            <div class="w-full flex items-center justify-center p-4 md:p-5 border-t border-gray-200 rounded-b space-x-2.5">
                <button id="close-model" data-modal-hide="default-modal" type="button" class="text-white bg-red-500 hover:bg-red-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center max-w-sm 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">No</button>
                <button id="summit-model" data-modal-hide="default-modal" type="button" class="text-white bg-s4s-color hover:bg-teal-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center max-w-sm 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">Yes</button>
            </div>
        </div>
    </div>
</div>


<x-pwa::pwa-profile-sidebar />
<x-pwa::pwa-footer currentPage="home" />

@endsection

@section('custom-js')
<script>
    $(document).ready(async function() {

        // Delete me
        // const getSessionValues = await storeGetDataById("sessionStore", 2);
        // $("#delete-me-token").val(getSessionValues?.fcm_token || '');

        var runClock, interval, hoursElement, minutesElement, secondsElement, currentTime, lastTime, duration, pastDuration;
        var longitude = latitude = 0.0;
        var userLongitude = userLatitude = 9.9;
        var canCheckInWithOutLoc = 1;
        var rangeConfig = 1;

        var checkInOutContainer = $("#check-in-out-container");

        const ajaxSettings = {
            "url": "",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Authorization": "Bearer " + Cookies.get('employee_api_token')
            },
            "processData": false,
            "mimeType": "multipart/form-data",
            "contentType": false,
        };

        interval = 1000;
        hoursElement = $("#hours");
        minutesElement = $("#minutes");
        secondsElement = $("#seconds");

        // Init
        await fetchDashboardDetails();
        await fetchLeaveList();

        // Get the current Location
        getGeoLocation();

        function getGeoLocation(flag = 0) {

            const storedGeoData = localStorage.getItem("geoData");

            // if (storedGeoData) {
            //     const parsed = JSON.parse(storedGeoData);
            //     const oneHour = 60 * 60 * 1000;

            //     if (Date.now() - parsed.timestamp < oneHour) {
            //         latitude = parsed.latitude;
            //         longitude = parsed.longitude;
            //     } else {
            //         // Expired, reset
            //         localStorage.removeItem("geoData");
            //         latitude = longitude = 0.0;
            //     }
            // }

            // console.log("XXXXXX", longitude == 0.0 && latitude == 0.0, longitude, latitude);


            // if (navigator.geolocation && longitude == 0.0 && latitude == 0.0) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    latitude = position.coords.latitude;
                    longitude = position.coords.longitude;

                    console.log("🚀 ~ getGeoLocation ~ latitude:", latitude);
                    console.log("🚀 ~ getGeoLocation ~ longitude:", longitude);

                    // Save to localStorage with timestamp
                    localStorage.setItem("geoData", JSON.stringify({
                        latitude: latitude,
                        longitude: longitude,
                        timestamp: Date.now()
                    }));
                    console.log(latitude, longitude);
                });
            }
            //  else { 
            //     // latitude = 0.0;
            //     // longitude = 0.0;
            //     if (flag == 0  && !storedGeoData) {
            //         showToast("Please verify if Geo location is enable for this device.");
            //     }
            //     console.log("Geolocation is not supported by this browser.");
            // }
        }

        // Getting the Past
        pastDuration = 0;

        try {
            // send store data to database
            await syncStoreDataToDatabase();

            // Get All the past duration for current date
            const formDataAttendance = new FormData();
            formDataAttendance.append("mobile_number", Cookies.get('employee_mobile_number'));
            formDataAttendance.append("start_date", moment().utc().format('YYYY-MM-DD'));
            formDataAttendance.append("end_date", moment().utc().format('YYYY-MM-DD'));
            // receive online data and store new data
            const fetchAttendance = await $.ajax({
                ...ajaxSettings,
                url: "{{ env('APP_URL') }}/api/employee/attendance-list",
                data: formDataAttendance
            });
            const getAllAttendance = JSON.parse(fetchAttendance);
            const attendanceData = getAllAttendance?.data || [];

            // check and
            if (getAllAttendance.success == 1 && attendanceData.length > 0) {
                const getDataToStore = attendanceData.map(row => {
                    let fromDB = 0;
                    if (row['check_in'] != null && row['check_out'] != null) {
                        fromDB = 1;
                    }

                    if (row['check_in'] != '') {
                        return {
                            date: row['date'],
                            check_in: row['check_in'],
                            check_out: row['check_out'],
                            check_in_location: row['check_in_location'],
                            check_out_location: row['check_out_location'],
                            is_online_flag: fromDB
                        }
                    }
                });

                const getStoreAttendanceData = await storeGetData("checkInOut") || [];

                if (getDataToStore?.[0]?.date && getStoreAttendanceData?.[0]?.date !== getDataToStore?.[0]?.date) {
                    await storeClearAll("checkInOut");
                }

                // console.log("getDataToStore", getDataToStore);

                await storeInsertAsArray("checkInOut", getDataToStore);
            }
        } catch (error) {
            console.log("🚀 ~ $ ~ error:", error);
        }

        // Start the clock
        await startAndUpdate();

        // Init the checking process
        $('#checkin').click(async function() {
            if ((latitude == 0.0 || longitude == 0.0) && canCheckInWithOutLoc == 1) {
                showToast('Please enable location');
                return;
            }

            console.log(!isWithinDistance(latitude, longitude, userLatitude, userLongitude, rangeConfig || 1), latitude, longitude, userLatitude, userLongitude, rangeConfig, "Check In");


            if (!isWithinDistance(latitude, longitude, userLatitude, userLongitude, rangeConfig || 1) && canCheckInWithOutLoc == 1) {
                $("#comment-modal").removeClass("hidden");
                $("#is_traveling").val("0");
                $("#traveling_reason").val("");
                $("#summit-model").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled", "disabled");
                $("#is_check_in_out").val('0');
                return;
            }

            await checkInPostAction();

        });

        // To get Checking
        async function checkInPostAction() {
            let todayDate = moment().utc().format("yyyy-MM-DD");

            let newStoreObj = {
                date: todayDate,
                check_in: `${todayDate} ${moment().utc().format("hh:mm:ss")}`,
                check_out: null,
                check_in_location: `${latitude},${longitude}`,
                check_out_location: null,
                check_in_traveling: parseInt($("#is_traveling").val()) || 0,
                check_in_traveling_reason: $("#traveling_reason").val() || '',
                check_out_traveling: 0,
                check_out_traveling_reason: "",
                is_online_flag: 0
            }

            await storeInsertNewRow("checkInOut", newStoreObj);

            // if sync let it get sync
            try {
                await syncStoreDataToDatabase();
            } catch (error) {
                console.log(error);
            }

            // Inset the checkin in database
            try {
                var form = new FormData();
                form.append("check_in_location", `${latitude},${longitude}`);
                form.append("mobile_number", Cookies.get('employee_mobile_number'));
                form.append("check_in_traveling", parseInt($("#is_traveling").val()));
                form.append("check_in_traveling_reason", $("#traveling_reason").val());
                // Register the current time as the last time in the database
                await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/employee/check-in",
                    data: form
                }).then(function(data) {
                    let dataJson = JSON.parse(data);
                    // if (dataJson.success == 1) {
                    //     startClock();
                    // }
                });
            } catch (error) {
                console.log(error);
            }

            nativeCheckin(Cookies.get('employee_mobile_number'), Cookies.get('employee_api_token'));

            startClock();

            // Reload the page
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        }

        $('#checkout').click(async function() {
            if ((latitude == 0.0 || longitude == 0.0) && canCheckInWithOutLoc == 1) {
                showToast('Please enable location');
                return;
            }

            console.log(!isWithinDistance(latitude, longitude, userLatitude, userLongitude, rangeConfig || 1), latitude, longitude, userLatitude, userLongitude, rangeConfig, "Check In");

            if (!isWithinDistance(latitude, longitude, userLatitude, userLongitude, rangeConfig || 1) && canCheckInWithOutLoc == 1) {
                $("#comment-modal").removeClass("hidden");
                $("#is_traveling").val("0");
                $("#traveling_reason").val("");
                $("#summit-model").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled", "disabled");
                $("#is_check_in_out").val('1');
                return;
            }

            await checkOutPostAction();
        });

        async function checkOutPostAction() {
            let todayDate = moment().utc().format("yyyy-MM-DD");
            // console.log(todayDate);

            const getStoreAttendanceData = await storeGetData("checkInOut") || [];
            getStoreAttendanceData.reverse();

            getStoreAttendanceData[0].date = todayDate;
            getStoreAttendanceData[0].check_out = `${todayDate} ${moment().utc().format("HH:mm:ss")}`;
            getStoreAttendanceData[0].check_out_location = `${latitude},${longitude}`;
            getStoreAttendanceData[0].check_out_traveling = parseInt($("#is_traveling").val()) || 0;
            getStoreAttendanceData[0].check_out_traveling_reason = $("#traveling_reason").val() || '';

            await storeInsertNewRow("checkInOut", getStoreAttendanceData[0]); // update the last row

            nativeCheckout();
            stopClock();

            // if sync let it get sync
            try {
                await syncStoreDataToDatabase();
            } catch (error) {
                console.log(error);
            }

            // reload the page
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        }

        // Model of traveling question
        $("#close-model").click(function() {
            showToast("Please visit the location assigned for you to get login");
            $("#comment-modal").addClass("hidden");
        });

        // Submission click
        $("#summit-model").click(async function() {
            let reasonTxt = $("#reason").val() || '';
            if (!reasonTxt) {
                showToast("Reason is required");
                return;
            }
            $(this).addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");
            $("#traveling_reason").val(reasonTxt);
            $("#is_traveling").val("1");

            if ($("#is_check_in_out").val() == "1") {
                await checkOutPostAction();
            } else {
                await checkInPostAction();
            }
        });

        async function startAndUpdate() {
            const getStoreAttendanceData = await storeGetData("checkInOut");
            // console.log("🚀 ~ $ ~ getStoreAttendanceData:", getStoreAttendanceData);
            getStoreAttendanceData.forEach(data => observeCheckInOut(data));

            if (lastTime != "" && lastTime != null && typeof lastTime != undefined) {
                startClock();
            } else {
                duration = moment.duration(pastDuration, 'milliseconds')
                updateClock(duration);
            }

            checkInOutContainer.removeClass("opacity-0");
        }

        function observeCheckInOut(data) {
            let todayDate = moment().utc().format("yyyy-MM-DD");

            // Get current time in IST
            const nowISTTime = moment().tz('Asia/Kolkata');

            // Check if it's after 8:30 AM IST
            const isAfter830IST = nowISTTime.hour() > 8 || (nowISTTime.hour() === 8 && nowISTTime.minute() >= 30);

            if (data['date'] != todayDate && isAfter830IST) {
                return;
            }

            if (data['check_in'] != null && data['check_out'] != null) {
                // calculate difference between two times
                let attendanceCheckInTime = moment(data['check_in'])
                // attendanceCheckInTime.tz("Asia/Kolkata");

                // based on time set in user's computer time / OS
                let attendanceCheckOutTime = moment(data['check_out']);
                // attendanceCheckOutTime.tz("Asia/Kolkata");

                lastTime = "";
                pastDuration += moment.duration(attendanceCheckOutTime.diff(attendanceCheckInTime));
            } else if (data['check_in'] != null && data['check_out'] == null) {
                // calculate difference between two times
                lastTime = moment(data['check_in'])
                lastTime.utc(true);
                // lastTime.tz("Asia/Kolkata");
            } else {
                lastTime = "";
            }
        }

        async function syncStoreDataToDatabase() {
            /* 
                mobile_number
                date
                check_in
                check_out
                check_in_location
                check_out_location
                is_online_flag: default will be 0 mean that it is not pushed to server
            */
            const getStoreAttendanceData = await storeGetData("checkInOut");
            // console.log("🚀 ~ $ ~ getStoreAttendanceData:", getStoreAttendanceData);

            getStoreAttendanceData.forEach(async single => {
                if (single.is_online_flag == 0 && single.check_in && single.check_out) {
                    const formDataNewAttendance = new FormData();
                    formDataNewAttendance.append("mobile_number", Cookies.get('employee_mobile_number'));
                    formDataNewAttendance.append("date", single?.date || '');
                    formDataNewAttendance.append("check_in", single?.check_in || '');
                    formDataNewAttendance.append("check_out", single?.check_out || '');
                    formDataNewAttendance.append("check_in_location", single?.check_in_location || '');
                    formDataNewAttendance.append("check_out_location", single?.check_out_location || '');
                    formDataNewAttendance.append("check_in_traveling", single?.check_in_traveling || '');
                    formDataNewAttendance.append("check_in_traveling_reason", single?.check_in_traveling_reason || '');
                    formDataNewAttendance.append("check_out_traveling", single?.check_out_traveling || '');
                    formDataNewAttendance.append("check_out_traveling_reason", single?.check_out_traveling_reason || '');
                    await $.ajax({
                        ...ajaxSettings,
                        url: "{{ env('APP_URL') }}/api/employee/attendance/sync",
                        data: formDataNewAttendance
                    });
                    single.is_online_flag = 1;
                    await storeInsertNewRow("checkInOut", single);
                }
            });
        }

        function updateClock(duration) {
            // Fallback strings for invalid cases
            const fallbackHours = "00";
            const fallbackMinutes = "00";
            const fallbackSeconds = "00";

            // Early validation and fallback
            if (!duration || !duration.isValid()) {
                if (hoursElement) hoursElement.text(fallbackHours);
                if (minutesElement) minutesElement.text(fallbackMinutes);
                if (secondsElement) secondsElement.text(fallbackSeconds);
                console.log("🚀 ~ updateClock ~ Invalid duration, set to fallback");
                return;
            }

            // Safe extraction with fallbacks (methods return numbers on valid duration)
            const days = duration.days() || 0;
            const hours = duration.hours() || 0;
            const minutes = duration.minutes() || 0;
            const seconds = duration.seconds() || 0;

            // Calculate total hours
            const totalHours = (days * 24) + hours;

            // Format strings
            const hoursStr = totalHours.toString().padStart(2, '0');
            const minutesStr = minutes.toString().padStart(2, '0');
            const secondsStr = seconds.toString().padStart(2, '0');

            // Update DOM safely
            if (hoursElement) hoursElement.text(hoursStr);
            else hoursElement.text(fallbackHours);

            if (minutesElement) minutesElement.text(minutesStr);
            else minutesElement.text(fallbackMinutes);

            if (secondsElement) secondsElement.text(secondsStr);
            else secondsElement.text(fallbackSeconds);
        }


        function startClock() {
            $('#checkin').addClass('hidden')
            $('#checkout').removeClass('hidden')

            // add animation to the seconds element
            // secondsElement.addClass('animate-bounce');

            // based on time set in.tz user's computer time / OS
            currentTime = moment().utc();

            // console.log(moment().utc().format('YYYY-MM-DD HH:mm:ss'));

            // currentTime.tz("Etc/UTC");

            // Set the last time or initial time
            if (lastTime == "") {
                lastTime = moment();
                // lastTime.tz("Asia/Kolkata");
            }

            // get duration between two times
            duration = moment.duration(currentTime.diff(lastTime));
            // console.log("🚀 ~ startClock ~ duration:", duration);
            // duration += pastDuration;

            if (isNaN(pastDuration)) pastDuration = 0;
            duration = moment.duration(duration + pastDuration, 'milliseconds');
            // console.log("🚀 ~ startClock ~ pastDuration:", pastDuration)
            // console.log("🚀 ~ startClock ~ duration:", duration)
            updateClock(duration);

            // Start the clock
            runClock = setInterval(function() {
                duration = moment.duration(duration + interval, 'milliseconds');
                // console.log("🚀 ~ runClock=setInterval ~ duration:", duration)
                updateClock(duration);
            }, interval);
        }

        function stopClock() {
            // Stop the clock
            clearInterval(runClock);

            $('#checkout').addClass('hidden')
            $('#checkin').removeClass('hidden')
            // add animation to the seconds element
            // secondsElement.removeClass('animate-bounce');
        }

        // Fetch Birthday, Work Anniversary, and Announcements
        async function fetchDashboardDetails() {
            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("os", 'ios');
                formDataAttendance.append("app_version", '1.0.0');

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/employee/dashboard",
                    data: formDataAttendance
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    canCheckInWithOutLoc = responseData.employee_type || 1;

                    if (responseData?.upcoming_holidays && responseData.upcoming_holidays.length > 0) {
                        await storeClearAll("dashUH");
                        await storeInsertAsArray("dashUH", responseData.upcoming_holidays);
                        populateHolidayList(responseData.upcoming_holidays);
                    }
                    if (responseData?.birthdays_today && responseData.birthdays_today.length > 0) {
                        await storeClearAll("dashBD");
                        await storeInsertAsArray("dashBD", responseData.birthdays_today);
                        populateBirthDayList(responseData.birthdays_today);
                    }
                    if (responseData?.work_anniversaries_today && responseData.work_anniversaries_today.length > 0) {
                        await storeClearAll("dashWA");
                        await storeInsertAsArray("dashWA", responseData.work_anniversaries_today);
                        populateWAList(responseData.work_anniversaries_today);
                    }

                    if (responseData?.latest_announcement && responseData.latest_announcement.length > 0) {
                        populateAnnouncementList(responseData.latest_announcement);
                    }

                    if (responseData?.range) {
                        rangeConfig = responseData?.range;
                    }

                    // console.log(responseData?.sign_in_location, "responseData?.sign_in_location");

                    if (responseData?.sign_in_location) {
                        let locArray = responseData.sign_in_location.split(",");
                        // console.log(locArray);
                        userLatitude = locArray[0];
                        userLongitude = locArray[1];
                    }

                } else {
                    console.error("🚀 ~ fetchLeaveList ~ error", responseData.message);
                }
            } catch (error) {
                console.log("🚀 ~ fetchDashboardDetails ~ error:", error);
                const getUpComingHolidays = await storeGetData("dashUH");
                populateHolidayList(getUpComingHolidays);
                const getTodayBirthDay = await storeGetData("dashBD");
                populateBirthDayList(getTodayBirthDay);
                const getWA = await storeGetData("dashWA");
                populateWAList(getWA);
            }
        }

        // Append holiday
        function populateHolidayList(data) {
            const holidayList = $("#holiday-list");
            const colorArray = ["FF68CE", "E6196E", "1A4A96"];
            holidayList.empty();
            data.map(holiday => {
                holidayList.append(`
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="rounded-full flex items-center justify-center w-10 h-10">
                            <img class="rounded-full" src="https://ui-avatars.com/api/?name=${holiday.name}&background=${colorArray[0]}&color=FFFFFF" alt="${holiday.name || 'N/A'}">
                        </span>
                        <div class="flex flex-1 flex-col items-center">
                            <p class="w-full font-semibold">${holiday.name || 'N/A'}</p>
                            <p class="w-full text-gray-500 text-sm">${moment(holiday.date).format('DD MMM YYYY')}</p>
                        </div>
                    </div>
                `);
                // Remove the first element from the array
                colorArray.shift();
            });

            if (data.length === 0) {
                holidayList.append('<p class="text-gray-500">No upcoming holidays.</p>');
            }
        }

        // Append Birthday
        function populateBirthDayList(data) {
            const birthDayList = $("#birthday-list");
            const colorArray = ["3E80D3", "636B2F", "FF68CE"];
            birthDayList.empty();
            data.map(birthday => {
                birthDayList.append(`
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="rounded-full flex items-center justify-center w-10 h-10">
                            <img class="rounded-full" src="https://ui-avatars.com/api/?name=${birthday.name}&background=${colorArray[0]}&color=FFFFFF" alt="${birthday.name || 'N/A'}">
                        </span>
                        <div class="flex flex-1 flex-col items-center">
                            <p class="w-full font-semibold">${birthday.name || 'N/A'}</p>
                        </div>
                    </div>
                `);
                // Remove the first element from the array
                colorArray.shift();
            });

            if (data.length === 0) {
                birthDayList.append('<p class="text-gray-500">No Birthday Today.</p>');
            }
        }

        // Append Work Anniversary
        function populateWAList(data) {
            const wAList = $("#wa-list");
            const colorArray = ["FF7518", "6D3B07", "7F00FF"];
            wAList.empty();
            data.map(wa => {
                wAList.append(`
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="rounded-full flex items-center justify-center w-10 h-10">
                            <img class="rounded-full" src="https://ui-avatars.com/api/?name=${wa.name}&background=${colorArray[0]}&color=FFFFFF" alt="${wa.name || 'N/A'}">
                        </span>
                        <div class="flex flex-1 flex-col items-center">
                            <p class="w-full font-semibold">${wa.name || 'N/A'}</p>
                        </div>
                    </div>
                `);
                // Remove the first element from the array
                colorArray.shift();
            });

            if (data.length === 0) {
                wAList.append('<p class="text-gray-500">No work anniversaries today!</p>');
            }
        }

        // Append Work Anniversary
        function populateAnnouncementList(data) {
            const announcementList = $("#announcement-list");
            const colorArray = ["7F00FF", "3E80D3", "6D3B07", "636B2F", "FF68CE", "E6196E", "1A4A96", "8A00C4", "C11C84", "CFA730"];
            announcementList.empty();
            data.map(announcement => {
                announcementList.append(`
                    <a href="{{ env('APP_URL') }}/pwa/announcement/${announcement.id}" class="flex items-center space-x-3 mb-2">
                        <span class="rounded-full flex items-center justify-center w-10 h-10">
                            <img class="rounded-full" src="https://ui-avatars.com/api/?name=${announcement.title}&background=${colorArray[Math.floor(Math.random() * colorArray.length)]}&color=FFFFFF" alt="${announcement.name || 'N/A'}">
                        </span>
                        <div class="flex flex-1 flex-col items-center">
                            <p class="w-full font-semibold">${announcement.title || 'N/A'}</p>
                            <p class="w-full text-gray-500 text-sm">${moment(announcement.updated_at).format("MMM DD YYYY HH:mm a") || 'N/A'}</p>
                        </div>
                    </a>
                `);
            });

            if (data.length === 0) {
                announcementList.append('<p class="text-gray-500">No work anniversaries today!</p>');
            }
        }

        // Fetch Leave 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", 1);
                formDataAttendance.append("per_page", 1);

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/leaves/leave-balance",
                    data: formDataAttendance
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    await storeClearAll("LeaveBalance");
                    await storeInsertAsArray("LeaveBalance", responseData.data?.leave_balances || []);
                    populateLeaveList(responseData.data?.leave_balances || []);
                } else {
                    console.error("🚀 ~ fetchLeaveList ~ error", responseData.message);
                }
            } catch (error) {
                console.log("🚀 ~ fetchLeaveList ~ error:", error)
                const getLeaveList = await storeGetData("LeaveBalance");
                populateLeaveList(getLeaveList);
            }
        }

        function populateLeaveList(data) {
            const colorArray = ["8A00C4", "C11C84", "CFA730"];
            const leaveList = $("#leave-list");
            let countLeave = 0;
            leaveList.empty();
            data.forEach(leave => {
                // Display only 3 leave types
                if (countLeave >= 3) {
                    return;
                }

                leaveList.append(`
                    <div class="flex items-center space-x-3 mb-2">
                        <span class="bg-indigo-300 text-white rounded-full flex items-center justify-center w-10 h-10">
                            <img class="rounded-full" src="https://ui-avatars.com/api/?name=${leave.leave_type_name}&background=${colorArray[0]}&color=FFFFFF" alt="${leave.leave_type_name || 'N/A'}">
                        </span>
                        <div class="flex flex-1 flex-col items-center">
                            <p class="w-full font-semibold">${leave.leave_type_name || 'N/A'}</p>
                            <p class="w-full text-gray-500 text-sm">Taken: ${leave.used_leaves || 0} | Balance: ${leave.remaining_leaves || 0} Days</p>
                        </div>
                    </div>
                `);
                countLeave++;
                // Remove the first element from the array
                colorArray.shift();
            });

            if (data.length === 0) {
                leaveList.append('<p class="text-gray-500">No leave records found.</p>');
            }
        }

        function isWithinDistance(lat1, lon1, lat2, lon2, distance = 1) {
            const R = 6371; // Radius of Earth in KM
            const toRad = (angle) => angle * (Math.PI / 180);

            const dLat = toRad(lat2 - lat1);
            const dLon = toRad(lon2 - lon1);

            const a = Math.sin(dLat / 2) ** 2 +
                Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                Math.sin(dLon / 2) ** 2;

            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distanceBetween = R * c;

            console.log("Distance: ", distanceBetween, distance);


            return distanceBetween <= distance;
        }

        // To make sync all the time when online (Issue with IOS is that once it load the page it will keep preventing reload)
        setInterval(() => {
            syncStoreDataToDatabase();
            getGeoLocation(1);
        }, (5 * 1000));

        function nativeCheckin(userId, authToken) {
            if (window.webkit && window.webkit.messageHandlers.native) {
                window.native?.post({
                    type: 'checkin',
                    mobile_number: userId,
                    authToken
                });
            }
        }

        function nativeCheckout() {
            if (window.webkit && window.webkit.messageHandlers.native) {
                window.native?.post({
                    type: 'checkout'
                });
            }
        }

    });

    if (window.webkit && window.webkit.messageHandlers.native) {
        console.log = (function(origLog) {
            return function(...args) {
                window.webkit.messageHandlers.console.postMessage(args.join(" "));
                origLog.apply(console, args);
            };
        })(console.log);

        window.native = {
            post: function(payload) {
                try {
                    console.log("[NB] sending payload:", payload);
                    window.webkit.messageHandlers.native.postMessage(JSON.stringify(payload));
                } catch (e) {
                    console.log("[NativeBridge] error:", e);
                }
            }
        };
        console.log("[NativeBridge] injected");
    }
</script>
@endsection