@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/team/options') . '/' . $mobileNo }}" 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" id="team-user-name">Attendance</span>
    </div>
</div>
<div class="w-full px-4 pt-2 min-h-screen">
    <!-- Date Navigation -->
    <div class="flex items-center justify-center text-gray-700 text-sm font-semibold mb-8 space-x-2">
        <button id="past_dates" class="text-xl 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="text-gray-800 font-extrabold w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="M424-56 0-480l424-424 80 81-343 343 343 343-80 81Z" />
            </svg>
        </button>
        <p id="attendance_from_to" class="text-gray-700 font-bold">02-Feb-2025 - 08-Feb-2025</p>
        <button id="future_dates" class="text-xl 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="text-gray-800 font-extrabold w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                <path d="m304-58-80-81 343-343-343-343 80-81 424 424L304-58Z" />
            </svg>
        </button>
    </div>

    <!-- Attendance List -->
    <div id="week_attendance_list" class="flex flex-col space-y-2">

        <!-- Weekend [bg-yellow-500] / Attendance [bg-green-600] / Absent [bg-red-500] / Leave (half/hull) [bg-orange-600] / Holiday [bg-blue-600] -->
        <div class="hidden absolute -z-0">
            <div class="hidden bg-yellow-500"></div>
            <div class="hidden bg-blue-600"></div>
            <div class="hidden bg-orange-600"></div>
            <div class="hidden bg-red-600"></div>
            <div class="hidden bg-gray-300"></div>
            <div class="hidden bg-red-50"></div>
        </div>
    </div>
</div>


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

@endsection

@section('custom-js')
<script>
    $('document').ready(function() {
        const mobileNo = "{{ $mobileNo }}";
        const employeeName = "{{$employee->name}}";
        const XML_ATTENDANCE_DATE = "team_attendance_date";

        if (employeeName) {
            $("#team-user-name").text(employeeName);
        }

        let currentWeekStart = moment().startOf('week'); // Start of the current week (Sunday)

        // Check if there is referral date present or not
        let getStorageDate = localStorage.getItem(XML_ATTENDANCE_DATE);
        const isValidDate = moment(getStorageDate, "YYYY-MM-DD", true).isValid();
        if (isValidDate) {
            currentWeekStart = moment(getStorageDate, "YYYY-MM-DD");
        }

        let currentWeekEnd = currentWeekStart.clone().add(6, 'days'); // End of the current week (Saturday)
        // console.log("Current Sunday: ", currentWeekStart.format('DD-MMM-YYYY'));
        // console.log("Current Saturday: ", currentWeekEnd.format('DD-MMM-YYYY'));

        updateWeekDates();

        $('#past_dates').click(function() {
            // check if online
            if (!navigator.onLine) {
                showToast("No internet found!");
                return;
            }
            currentWeekStart.subtract(1, 'week');
            currentWeekEnd = currentWeekStart.clone().add(6, 'days');
            updateWeekDates();
        });

        $('#future_dates').click(function() {
            // check if online
            if (!navigator.onLine) {
                showToast("No internet found!");
                return;
            }
            currentWeekStart.add(1, 'week');
            currentWeekEnd = currentWeekStart.clone().add(6, 'days');
            updateWeekDates();
        });

        async function updateWeekDates() {
            // Get date data from the database
            const attendanceList = await getDataFromDatabase(currentWeekStart, currentWeekEnd);
            // console.log("🚀 ~ updateWeekDates ~ attendanceList:", attendanceList)

            // feed date with attendance data
            const datesDataStore = {};
            attendanceList.forEach(data => {
                const attendanceDate = moment(data['date']);
                const attendanceDateDayFormat = attendanceDate.format('YYYY-MM-DD');

                // Check if the date is not in the current week Or Init
                if (datesDataStore[attendanceDateDayFormat] === undefined) {
                    datesDataStore[attendanceDateDayFormat] = {};
                }

                // Check Regularized
                if (Number(data['regularized'] || 0) === 1) {
                    datesDataStore[attendanceDateDayFormat].duration = moment.duration(0, 'milliseconds');
                }

                // Only for check in and check out data
                if (data['check_in'] != null && data['check_out'] != null && data['check_in'] != '' && data['check_out'] != '') {
                    let attendanceCheckInTime = moment(data['check_in'])
                    let attendanceCheckOutTime = moment(data['check_out']);
                    let pastDuration = 0;

                    // Calculate the total duration of the day in milliseconds
                    if (datesDataStore[attendanceDateDayFormat]?.duration) {
                        pastDuration = moment.duration(attendanceCheckOutTime.diff(attendanceCheckInTime)) + datesDataStore[attendanceDateDayFormat].duration;
                    } else {
                        pastDuration = moment.duration(attendanceCheckOutTime.diff(attendanceCheckInTime));
                        datesDataStore[attendanceDateDayFormat].duration = 0;
                    }

                    datesDataStore[attendanceDateDayFormat].duration = moment.duration(pastDuration, 'milliseconds');
                }

                // check holiday
                if (Number(data['is_holiday'] || 0) === 1) {
                    datesDataStore[attendanceDateDayFormat].holiday = true;
                    datesDataStore[attendanceDateDayFormat].holiday_name = data['holiday_name'] || 'Holiday';
                } else {
                    datesDataStore[attendanceDateDayFormat].holiday = false;
                }

                // Check Leave
                if (Number(data['on_leave'] || 0) === 1 && datesDataStore[attendanceDateDayFormat].leave !== true) {
                    datesDataStore[attendanceDateDayFormat].leave = true;
                    datesDataStore[attendanceDateDayFormat].leave_name = 'Leave : ' + data['leave_name'] || 'Leave';
                    // check if half day leave
                    if (Number(data['half_day_leave'] || 0) === 1) {
                        // Calculate the total duration of the day in milliseconds
                        if (datesDataStore[attendanceDateDayFormat]?.duration) {
                            pastDuration = moment.duration(4.5 * 60 * 60 * 1000, 'milliseconds') + datesDataStore[attendanceDateDayFormat].duration;
                        } else {
                            pastDuration = moment.duration(4.5 * 60 * 60 * 1000, 'milliseconds');
                        }

                        datesDataStore[attendanceDateDayFormat].duration = moment.duration(pastDuration, 'milliseconds');
                        datesDataStore[attendanceDateDayFormat].leave_name = `${datesDataStore[attendanceDateDayFormat].leave_name} ${(data['half_day_type']) === 'second_half' ? ' : Second Half' : ' : First Half' || 'Leave'}`;
                    } else {
                        datesDataStore[attendanceDateDayFormat].duration = moment.duration(9 * 60 * 60 * 1000, 'milliseconds'); // 9 hours
                    }
                }

            });

            // console.log("🚀 ~ updateWeekDates ~ datesDataStore", datesDataStore);


            // Update the UI
            const weekAttendanceList = $('#week_attendance_list');
            weekAttendanceList.html('');
            for (let i = 0; i < 7; i++) {
                const day = currentWeekStart.clone().add(i, 'days');
                const dayFormat = day.format('YYYY-MM-DD');
                const dayData = datesDataStore[dayFormat];
                let bgColorClassFore = 'bg-s4s-color'; // Default color (Present)
                let bgColorClassBack = 'bg-gray-300'; // Default color (Present)
                let anchorBgColor = 'bg-white';
                let getPercentage = 0;
                let reasonText = '';
                let isPastThreeDays = day.isBetween(moment().subtract(5, 'days'), moment(), 'day', '[]');

                // Check if Sunday
                if (i === 0 && !dayData?.duration) {
                    bgColorClassFore = 'bg-yellow-500'; // Sunday
                    bgColorClassBack = 'bg-gray-300'; // Sunday
                    getPercentage = 100;
                    reasonText = 'Weekend';
                } else if (dayData?.holiday && !dayData?.duration) {
                    bgColorClassFore = 'bg-blue-600'; // Holiday
                    bgColorClassBack = 'bg-gray-300'; // Holiday
                    getPercentage = 100;
                    reasonText = dayData?.holiday_name || 'Holiday';
                } else if (dayData?.leave) {
                    bgColorClassFore = 'bg-orange-600'; // Default color (Present)
                    bgColorClassBack = 'bg-gray-300'; // Default color (Present)
                    // Get the percentage of leave
                    getPercentage = calculatePercentageBasedOnHours(dayData?.duration || moment.duration(0, 'milliseconds'));
                    reasonText = dayData?.leave_name || 'Leave';
                    // console.log("🚀 ~ updateWeekDates ~ LEAVE: reasonText:", reasonText)
                } else if (!dayData?.duration && !dayData?.leave && day.isBefore(moment(), 'day')) {
                    bgColorClassFore = 'bg-red-600'; // Absent
                    bgColorClassBack = 'bg-gray-300'; // Absent
                    getPercentage = 100;
                    reasonText = 'Absent';
                    if (isPastThreeDays) {
                        anchorBgColor = 'bg-red-50';
                    }
                } else {
                    getPercentage = calculatePercentageBasedOnHours(dayData?.duration || moment.duration(0, 'milliseconds'));

                    // Check if the percentage is less than 100
                    if (getPercentage < 100 && isPastThreeDays) {
                        anchorBgColor = 'bg-red-50';
                    }

                    // For reason text
                    if (dayData?.holiday) {
                        reasonText = dayData.holiday_name || 'Holiday';
                    }

                    if (i === 0) {
                        reasonText = 'Weekend';
                    }
                }

                // console.log("🚀 ~ updateWeekDates ~ LLLL ", dayData);

                let attendanceHtml = `
                    <a class="${anchorBgColor} p-2" href="{{ url('/pwa/team/attendance/detail') }}/${dayFormat}/${mobileNo}">
                        <div class="flex items-center">
                            <div class="w-12 text-center">
                                <p class="text-xs font-semibold">${day.format('ddd')}</p>
                                <p class="text-lg font-extrabold">${day.format('DD')}</p>
                            </div>
                            <div class="flex-1 mx-4 relative">
                                <div class="h-1 ${bgColorClassBack} w-full absolute top-1/2 -translate-y-1/2"></div>
                                <div class="h-1 ${bgColorClassFore} absolute top-1/2 -translate-y-1/2 ${getPercentage < 1 ? 'hidden' : ''}" style="width: ${getPercentage > 1 ?  getPercentage + '% !important' : '0%'}"></div>
                                <div class="absolute w-full text-xs font-semibold text-center top-2 left-1/2 -translate-x-1/2">
                                    <span>${reasonText}</span>
                                </div>
                            </div>
                            <p class="mr-2 text-sm font-semibold">${updateClock(dayData?.duration)}</p>
                        </div>
                    </a>`;
                weekAttendanceList.append(attendanceHtml);
            }

            // Update the date range
            $("#attendance_from_to").text(currentWeekStart.format('DD-MMM-YYYY') + ' - ' + currentWeekEnd.format('DD-MMM-YYYY'));
        }

        async function getDataFromDatabase(currentWeekStart, currentWeekEnd) {
            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,
                };

                // Set the start date in local storage
                localStorage.setItem(XML_ATTENDANCE_DATE, currentWeekStart.format('YYYY-MM-DD'));
                console.log(currentWeekStart.format('YYYY-MM-DD'), "currentWeekStart");

                if (!mobileNo) {
                    showToast("Something went Wrong");
                    return
                }

                const formDataAttendance = new FormData();
                formDataAttendance.append("mobile_number", mobileNo);
                formDataAttendance.append("start_date", currentWeekStart.format('YYYY-MM-DD'));
                formDataAttendance.append("end_date", currentWeekEnd.format('YYYY-MM-DD'));

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/manager/employees/attendance",
                    data: formDataAttendance
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    // Store data in IndexedDB
                    // await storeClearAll("attendanceList");
                    // storeInsertAsArray("attendanceList", responseData.data);
                    return responseData.data || [];
                } else {
                    console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    return [];
                }
            } catch (error) {
                console.log("🚀 ~ getDataFromDatabase ~ error:", error);
                // const getAttendanceList = await storeGetData("attendanceList");
                // Terminate function if offline
                return [];
            }
        }

        function calculatePercentageBasedOnHours(totalHours) {
            // Calculate percentage of attendance
            const hoursToFulfill = moment.duration((9 * 60 * 60 * 1000), 'milliseconds'); // 9 hours per day
            let percentage = 0;
            if (totalHours >= hoursToFulfill) {
                percentage = 100;
            } else {
                percentage = (totalHours / hoursToFulfill) * 100;
            }
            return Math.ceil(percentage);
        }

        function updateClock(duration) {
            if (!duration || !duration.isValid()) {
                return "00:00"; // Fallback for invalid or null duration
            }

            // Calculate total hours: days * 24 + hours (or use Math.floor(duration.asHours()) for brevity)
            const totalHours = duration.days() * 24 + duration.hours();
            const minutes = duration.minutes();

            // Format: HH padded to 2 digits (large numbers stay full, e.g., "170")
            const hoursStr = totalHours.toString().padStart(2, '0');
            const minutesStr = minutes.toString().padStart(2, '0');

            return `${hoursStr}:${minutesStr}`;
        }
    });
</script>
@endsection