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

@section('content')
<style>
    .timeline-dash {
        background: repeating-linear-gradient(180deg, #D1D5DB, #D1D5DB 7px, transparent 7px, transparent 14px);
    }
</style>

<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">Timeline</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">
        <div class="relative max-w-md w-full">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                <svg class="w-5 h-5 fill-s4s-color" 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>
            </div>
            <input id="any-pick-datepicker" type="text" class="bg-slate-50 border border-slate-300 text-slate-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5" placeholder="Select date" readonly>
        </div>
    </div>

    <div id="dot-loader" class="relative w-full hidden">
        <div class="dot-loader absolute top-2 left-[40%]"></div>
    </div>

    <!-- Timeline List -->
    <div id="show-timeline" class="flex flex-col justify-center items-center space-y-6 mb-24 w-full">

        <!-- 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="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-yellow-600">
                        <path d="M472-86v-126h276v-536H472v-126h276q53 0 89.5 36.5T874-748v536q0 53-36.5 89.5T748-86H472ZM361-232l-88-89 96-96H86v-126h283l-96-96 88-89 247 248-247 248Z" />
                    </svg>
                </div>
                <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-yellow-600 font-bold">Check-in from outside office & Stay</h3>
                        <span class="max-w-14 text-sm font-extrabold relative top-1">01:23</span>
                    </div>
                    <p class="mt-1.5 text-sm font-bold">Reason: yes</p>
                    <p class="mt-1.5 text-sm text-gray-500">Checked in from 123, Some Street, Some City, Some Country</p>
                    <p class="mt-1.5 text-sm font-bold">09 Jul 09:37 am - 09 Jul 10:58 pm</p>
                </div>
            </div>
            <div class="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-cyan-600">
                        <path d="M345-312h95v-336h-95v336Zm175 0h95v-336h-95v336ZM480-46q-91 0-169.99-34.08-78.98-34.09-137.41-92.52-58.43-58.43-92.52-137.41Q46-389 46-480q0-91 34.08-169.99 34.09-78.98 92.52-137.41 58.43-58.43 137.41-92.52Q389-914 480-914q91 0 169.99 34.08 78.98 34.09 137.41 92.52 58.43 58.43 92.52 137.41Q914-571 914-480q0 91-34.08 169.99-34.09 78.98-92.52 137.41-58.43 58.43-137.41 92.52Q571-46 480-46Zm0-126q130 0 219-89t89-219q0-130-89-219t-219-89q-130 0-219 89t-89 219q0 130 89 219t219 89Zm0-308Z" />
                    </svg>
                </div>
                <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-cyan-600 font-bold">Stoppage</h3>
                        <span class="max-w-14 text-sm font-extrabold relative top-1">00:35</span>
                    </div>
                    <p class="mt-1.5 text-sm text-gray-500">Checked in from 123, Some Street, Some City, Some Country</p>
                    <p class="mt-1.5 text-sm font-bold">09 Jul 09:37 am - 09 Jul 10:58 pm</p>
                </div>
            </div>
            <div class="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-rose-400">
                        <path d="M760-89q-54 0-91.5-30.5T617-192H440q-69.3 0-118.65-49.5Q272-290.99 272-360.5q0-69.5 49.35-118.5T440-528h80q29.7 0 50.85-21.21 21.15-21.21 21.15-51T570.85-651Q549.7-672 520-672H343q-14 42-51.5 72.5T200-569q-62.92 0-106.96-44.06Q49-657.12 49-720.06T93.04-827q44.04-44 106.96-44 54 0 91.5 30.5T343-768h177q70 0 119 49t49 119q0 70-49 119t-119 49h-80q-29 0-50.5 21-21.5 21.01-21.5 50.5 0 29.5 21.5 51T440-288h177q14-42 51.5-72.5T760-391q62.92 0 106.96 44.06 44.04 44.06 44.04 107T866.96-133Q822.92-89 760-89ZM200-680q17 0 28.5-11.5T240-720q0-17-11.5-28.5T200-760q-17 0-28.5 11.5T160-720q0 17 11.5 28.5T200-680Z" />
                    </svg>
                </div>
                <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-rose-400 font-bold">Traveling</h3>
                        <span class="max-w-14 text-sm font-extrabold relative top-1">00:35</span>
                    </div>
                    <p class="mt-1.5 text-sm text-gray-500"><span class="font-bold text-black">From: </span>Checked in from 123, Some Street, Some City, Some Country</p>
                    <p class="mt-2 text-sm text-gray-500"><span class="font-bold text-black">To: </span>Checked in from 123, Some Street, Some City, Some Country</p>
                    <p class="mt-1.5 text-sm font-bold">09 Jul 09:37 am - 09 Jul 10:58 pm</p>
                </div>
            </div>
            <div class="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-yellow-600">
                        <path d="M472-86v-126h276v-536H472v-126h276q53 0 89.5 36.5T874-748v536q0 53-36.5 89.5T748-86H472ZM361-232l-88-89 96-96H86v-126h283l-96-96 88-89 247 248-247 248Z" />
                    </svg>
                </div>
                <!-- <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div> -->
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-yellow-600 font-bold">Check-in from outside office & Stay</h3>
                        <span class="max-w-14 text-sm font-extrabold relative top-1">01:23</span>
                    </div>
                    <p class="mt-1.5 text-sm font-bold">Reason: yes</p>
                    <p class="mt-1.5 text-sm text-gray-500">Checked in from 123, Some Street, Some City, Some Country</p>
                    <p class="mt-1.5 text-sm font-bold">09 Jul 09:37 am - 09 Jul 10:58 pm</p>
                </div>
            </div>
            <div class="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-blue-600">
                        <path d="M480-46q-90 0-168.97-34.08-78.97-34.07-137.92-93.03-58.96-58.95-93.03-137.92Q46-390 46-480q0-90.14 34.06-168.88 34.07-78.74 93-137.93Q232-846 311-880t169-34q26 0 44.5 18.5T543-851q0 26-18.5 44.5T480-788q-128.01 0-218.01 89.99-89.99 89.99-89.99 218T261.99-262q89.99 90 218 90T698-261.99q90-90 90-218.01 0-26 18.5-44.5T851-543q26 0 44.5 18.5T914-480q0 90-34.06 169.01-34.07 79.01-93 138Q728-114 649.14-80 570.28-46 480-46Z"></path>
                    </svg>
                </div>
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-blue-600 font-bold">In Progress</h3>
                        <span class="max-w-14 text-sm font-extrabold relative top-1">11:28</span>
                    </div>
                    <p class="mt-1.5 text-sm font-bold">22 Dec 08:54 pm</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

@endsection

@section('custom-js')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=places"></script>
<script>
    $('document').ready(async function() {
        const mobileNo = "{{ $mobileNo }}";
        const employeeName = "{{$employee->name}}";
        const container = $("#show-timeline");
        container.empty(); // empty the container before appending new data
        let containerHtml = checkInHtml = checkOutHtml = '';
        let dotLoader = $("#dot-loader");

        $("#any-pick-datepicker").AnyPicker({
            mode: "datetime",
            dateTimeFormat: "MMMM d, yyyy",
            theme: "ios",
            onHidePicker: function() {
                const selectedDate = $("#any-pick-datepicker").val();
                if (selectedDate) {
                    const formattedDate = moment(selectedDate, "MMMM D, YYYY").format("YYYY-MM-DD");
                    dotLoader.removeClass('hidden'); // Show the loader
                    container.empty(); // Clear the container
                    getDataFromDatabase(formattedDate).then(createVisualDom).finally(() => {
                        dotLoader.addClass('hidden');
                    });
                } else {
                    showToast("Please select a date");
                }
            }
        });

        (async () => {
            const today = moment().format("YYYY-MM-DD");
            const getData = await getDataFromDatabase(today);
            createVisualDom(getData);
            // set the current date in the date picker
            $("#any-pick-datepicker").val(moment().format("MMMM D, YYYY"));
        })();

        // Fetch and display the timeline data from database with respect to the mobile number and date (selected date)
        async function getDataFromDatabase(date) {
            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,
                };

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

                const formDataAttendance = new FormData();
                formDataAttendance.append("mobile_number", mobileNo);
                formDataAttendance.append("date", date);

                const response = await $.ajax({
                    ...ajaxSettings,
                    url: "{{ env('APP_URL') }}/api/employee/timeline",
                    data: formDataAttendance
                })
                const responseData = JSON.parse(response);
                if (responseData.success) {
                    return responseData.data || [];
                } else {
                    console.error("🚀 ~ getDataFromDatabase ~ error", responseData.message);
                    return [];
                }
            } catch (error) {
                console.log("🚀 ~ getDataFromDatabase ~ error:", error);
                // Terminate function if offline
                return [];
            }
        }

        async function createVisualDom(data) {
            const attendance = data.attendance;
            const locations = data.locations;
            let getFurnishedData = await buildTimeline(attendance, locations, getDistance);
            getFurnishedData = getInProgressState(getFurnishedData || []);
            // console.log(getFurnishedData);
            // HTML Creation
            renderTimeline(getFurnishedData);
        }

        // Main Processor (Verify how to process the timeline)
        async function buildTimeline(attendance, locations, getDistance) {
            let timeline = [];

            // Check for any regularized attendance
            const regularizedRecords = attendance.filter(att => att.regularized === 1);

            if (regularizedRecords.length > 0) {
                // Take the last regularized by ID DESC
                const selectedAtt = regularizedRecords.sort((a, b) => b.id - a.id)[0];
                timeline = await processAttendance(selectedAtt, locations, getDistance, true);
            } else {
                // No regularized found → process all as before
                // sort by check_in asc
                attendance.sort((a, b) => new Date(a.check_in) - new Date(b.check_in));

                for (let att of attendance) {
                    const partialTimeline = await processAttendance(att, locations, getDistance, false);
                    timeline.push(...partialTimeline);
                }
            }

            return timeline;
        }

        // check if its today and get in-progress state object
        function getInProgressState(getFurnishedData) {

            if (!getFurnishedData || getFurnishedData.length === 0) return getFurnishedData;

            // 1. Get the last item in the array
            const lastEntry = getFurnishedData[getFurnishedData.length - 1];

            if (lastEntry && lastEntry.type !== 'checkout') {
                const checkInTime = moment(lastEntry.time.from);
                const now = moment();
                console.log(now, "");


                // 2. Check if the check-in date is today
                if (checkInTime.isSame(now, 'day')) {
                    // 3. Calculate duration in minutes (or hours) from check-in until now
                    const durationMinutes = now.diff(checkInTime, 'minutes');

                    // 4. Create and push the "In Progress" object
                    getFurnishedData.push({
                        "type": "in_progress",
                        "regularized": 0,
                        "address": "Current Location",
                        "time": {
                            "from": lastEntry.time.from,
                            "to": now.format("YYYY-MM-DD HH:mm:ss")
                        },
                        "duration": durationMinutes,
                        "label": "Attendance in Progress"
                    });
                }
            }

            return getFurnishedData;
        }

        function convertUtaToIst(dateTime) {
            if (!dateTime) return null;
            return moment.utc(dateTime).tz("Asia/Kolkata");
        }


        // Process single attendance record (putting timeline within check-in and check-out window)
        async function processAttendance(att, locations, getDistance, isRegularized) {
            const timeline = [];

            const checkInTime = att.check_in;
            const checkOutTime = att.check_out;

            // Filter locations inside attendance window
            let filteredLocations = locations.filter(loc => {
                let t = new Date(loc.timestamp);
                return t >= new Date(checkInTime) && t <= new Date(checkOutTime);
            });

            // arranging array based on timestamp asc
            filteredLocations.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));

            // Add Check-in
            let firstLocTime = filteredLocations.length ? filteredLocations[0].timestamp : checkOutTime;

            timeline.push({
                type: "checkin",
                regularized: isRegularized ? 1 : att.regularized,
                check_in_traveling: att.check_in_traveling,
                check_in_traveling_reason: att.check_in_traveling_reason,
                address: att.check_in_address,
                time: {
                    from: convertUtaToIst(checkInTime),
                    to: convertUtaToIst(firstLocTime)
                },
                duration: checkOutTime === null ? 0 : getDuration(checkInTime, firstLocTime),
            });

            // Process Locations (same as your logic)
            let i = 0;
            let lastTimestamp = null;
            let lastAddress = null;
            let lastLocEntries = null;

            while (i < filteredLocations.length - 1) {
                let current = filteredLocations[i];
                let next = filteredLocations[i + 1];

                let distance = await getDistance(current.geo_location, next.geo_location);

                if (distance <= 1000) {
                    // Merge -> stalled
                    lastTimestamp = lastTimestamp ? lastTimestamp : current.timestamp;
                    lastAddress = lastAddress ? lastAddress : current.address;
                    lastLocEntries = {
                        type: "stalled",
                        address: lastAddress,
                        time: {
                            from: convertUtaToIst(lastTimestamp),
                            to: convertUtaToIst(next.timestamp)
                        },
                        duration: getDuration(lastTimestamp, next.timestamp)
                    };
                    i++;
                    continue;
                }

                if (distance >= 1000) {
                    // first push last stalled if exists
                    if (lastLocEntries) {
                        timeline.push(lastLocEntries);
                        lastLocEntries = null;
                        lastTimestamp = null;
                        lastAddress = null;
                    }

                    // Traveling
                    let start = current;
                    let end = next;
                    let totalDist = distance;

                    let j = i + 1;
                    while (j < filteredLocations.length - 1) {
                        let d = await getDistance(filteredLocations[j].geo_location, filteredLocations[j + 1].geo_location);
                        if (d >= 1000) {
                            totalDist += d;
                            end = filteredLocations[j + 1];
                            j++;
                        } else break;
                    }

                    timeline.push({
                        type: "traveling",
                        from_address: start.address,
                        to_address: end.address,
                        time: {
                            from: convertUtaToIst(start.timestamp),
                            to: convertUtaToIst(end.timestamp)
                        },
                        duration: getDuration(start.timestamp, end.timestamp),
                        meters: totalDist
                    });

                    i = j;
                    continue;
                }

                i++;
            }

            // Push last stalled if any
            if (lastLocEntries) {
                timeline.push(lastLocEntries);
            }

            // Add Check-out
            let lastLocTime = filteredLocations.length ?
                filteredLocations[filteredLocations.length - 1].timestamp :
                checkInTime;

            if (checkOutTime !== null) {
                timeline.push({
                    type: "checkout",
                    regularized: isRegularized ? 1 : att.regularized,
                    check_out_traveling: att.check_out_traveling,
                    check_out_traveling_reason: att.check_out_traveling_reason,
                    address: att.check_out_address,
                    time: {
                        from: convertUtaToIst(lastLocTime),
                        to: convertUtaToIst(checkOutTime)
                    },
                    duration: getDuration(lastLocTime, checkOutTime),
                });
            }

            return timeline;
        }

        // Calculate total working time
        // Calculate total working time
        function totalWorkingHrs(timeline) {
            if (!timeline || timeline.length === 0) return "00:00";

            let totalMinutes = 0;
            const now = moment().tz("Asia/Kolkata");
            const today = moment().startOf('day');

            timeline.forEach((item, index) => {
                if (index === 0) return;
                const startTime = moment.utc(item.time.from).tz("Asia/Kolkata");
                // Case A: Item has a 'to' time (Regular completed session)
                if (item.time.to) {
                    const endTime = convertUtaToIst(item.time.to);
                    totalMinutes += endTime.diff(startTime, 'minutes');
                }
                // Case B: Item is 'In Progress' and it is today
                else if (startTime.isSame(today, 'day')) {
                    totalMinutes += now.diff(startTime, 'minutes');
                }
            });

            // Format output
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;

            return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
        }

        // Time difference in minutes
        function getDuration(from, to) {
            return Math.floor((new Date(to) - new Date(from)) / 60000);
        }

        // Get distance between two geo-locations using Google Maps API
        function formatDistance(meters) {
            if (meters < 1000) {
                return `${meters} m`;
            }
            return `${(meters / 1000).toFixed(2)} km`;
        }

        // Render Timeline HTML
        function renderTimeline(data) {
            let html = '';

            const totalHrs = totalWorkingHrs(data);
            // Render total working hours above timeline
            html += renderWorkingHours(totalHrs);

            // if check-in and check-out are same, show timeline dash for check-in only
            data.forEach((item, index) => {
                if (item.type === "checkin") {
                    html += renderCheckIn(item, index);
                } else if (item.type === "checkout") {
                    html += renderCheckOut(item);
                } else if (item.type === "stalled") {
                    html += renderStalled(item);
                } else if (item.type === "traveling") {
                    html += renderTraveling(item);
                } else if (item.type === "in_progress") {
                    html += renderInProgress(item);
                }
            });

            container.html(html);
        }

        // Render Working Hours HTML (Above Timeline)
        function renderWorkingHours(totalHrs) {
            let html = `
                    <div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg shadow-sm w-full max-w-sm relative">
                        <h3 class="text-s4s-color font-bold">Total Working Hours <span class="absolute right-2 text-slate-900" id="total-hrs">${totalHrs}</span></h3>
                    </div>
                `;
            return html;
        }

        // duration HTML
        function durationHtml(duration) {
            return `<span class="max-w-14 text-sm font-extrabold relative top-1">${duration ? String(Math.floor(duration / 60)).padStart(2, '0') + ':' + String(duration % 60).padStart(2, '0') : '00:00'}</span>`
        }

        // Render Check-in HTML
        function renderCheckIn(item, indexNo = 1) {
            let headerText = item.check_in_traveling ? "Check-in from outside office" : "Check-in from office";
            let reasonText = item.check_in_traveling ? `<p class="mt-1.5 text-sm font-bold">Reason: ${item.check_in_traveling_reason}</p>` : '';
            let durationText = indexNo === 0 ? '00:00' : durationHtml(item.duration);
            let regularizedHtml = '';
            if (item.regularized == 1) {
                regularizedHtml = `<div class="absolute -top-2 w-full flex items-center justify-center"><span class="text-xs font-extrabold text-white bg-purple-600 px-2 py-0.5 rounded-md">Regularized</span></div>`;
            }
            let toDate = item.time.to ? moment(item.time.to).format("DD MMM hh:mm a") : '';

            return `
                    <div class="relative max-w-sm w-full">
                        ${regularizedHtml}
                        <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-yellow-600"><path d="M472-86v-126h276v-536H472v-126h276q53 0 89.5 36.5T874-748v536q0 53-36.5 89.5T748-86H472ZM361-232l-88-89 96-96H86v-126h283l-96-96 88-89 247 248-247 248Z"/></svg>
                        </div>
                        <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                        <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                            <div class="header flex space-x-2">
                                <h3 class="flex-grow text-yellow-600 font-bold">${headerText}</h3>
                                ${durationText}
                            </div>
                            ${reasonText}
                            <p class="mt-1.5 text-sm text-gray-500">${item.address ? item.address : 'Address not available'}</p>
                            <p class="mt-1.5 text-sm font-bold">${moment(item.time.from).format("DD MMM hh:mm a")} ${toDate ? '- ' + toDate : ''}</p>
                        </div>
                    </div>
                `;
        }

        // Render Check-out HTML
        function renderCheckOut(item) {
            let headerText = item.check_out_traveling ? "Check-out from outside office" : "Check-out from office";
            let reasonText = item.check_out_traveling ? `<p class="mt-1.5 text-sm font-bold">Reason: ${item.check_out_traveling_reason}</p>` : '';
            let durationText = durationHtml(item.duration);
            let regularizedHtml = '';
            if (item.regularized == 1) {
                regularizedHtml = `<div class="absolute -top-2 w-full flex items-center justify-center"><span class="text-xs font-extrabold text-white bg-purple-600 px-2 py-0.5 rounded-md">Regularized</span></div>`;
            }
            return `
                    <div class="relative max-w-sm w-full">
                        ${regularizedHtml}
                        <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-yellow-600"><path d="M472-86v-126h276v-536H472v-126h276q53 0 89.5 36.5T874-748v536q0 53-36.5 89.5T748-86H472ZM361-232l-88-89 96-96H86v-126h283l-96-96 88-89 247 248-247 248Z"/></svg>
                        </div>
                        <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                            <div class="header flex space-x-2">
                                <h3 class="flex-grow text-yellow-600 font-bold">${headerText}</h3>
                                ${durationText}
                            </div>
                            ${reasonText}
                            <p class="mt-1.5 text-sm text-gray-500">${item.address ? item.address : 'Address not available'}</p>
                            <p class="mt-1.5 text-sm font-bold">${moment(item.time.from).format("DD MMM hh:mm a")} - ${moment(item.time.to).format("DD MMM hh:mm a")}</p>
                        </div>
                    </div>
                `;
        }

        // Render Stalled HTML
        function renderStalled(item) {
            let reasonText = item.check_in_traveling ? `<p class="mt-1.5 text-sm font-bold">Reason: ${item.check_in_traveling_reason}</p>` : '';
            let durationText = durationHtml(item.duration);
            return `
                    <div class="relative max-w-sm w-full">
                    <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-cyan-600"><path d="M345-312h95v-336h-95v336Zm175 0h95v-336h-95v336ZM480-46q-91 0-169.99-34.08-78.98-34.09-137.41-92.52-58.43-58.43-92.52-137.41Q46-389 46-480q0-91 34.08-169.99 34.09-78.98 92.52-137.41 58.43-58.43 137.41-92.52Q389-914 480-914q91 0 169.99 34.08 78.98 34.09 137.41 92.52 58.43 58.43 92.52 137.41Q914-571 914-480q0 91-34.08 169.99-34.09 78.98-92.52 137.41-58.43 58.43-137.41 92.52Q571-46 480-46Zm0-126q130 0 219-89t89-219q0-130-89-219t-219-89q-130 0-219 89t-89 219q0 130 89 219t219 89Zm0-308Z"/></svg>
                    </div>
                    <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                    <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                        <div class="header flex space-x-2">
                            <h3 class="flex-grow text-cyan-600 font-bold">Stoppage</h3>
                            ${durationText}
                        </div>
                        <p class="mt-1.5 text-sm text-gray-500">${item.address ? item.address : 'Address not available'}</p>
                        <p class="mt-1.5 text-sm font-bold">${moment(item.time.from).format("DD MMM hh:mm a")} - ${moment(item.time.to).format("DD MMM hh:mm a")}</p>
                    </div>
                </div>
                `;
        }

        // Render Traveling HTML
        function renderTraveling(item) {
            let reasonText = item.check_in_traveling ? `<p class="mt-1.5 text-sm font-bold">Reason: ${item.check_in_traveling_reason}</p>` : '';
            let durationText = durationHtml(item.duration);
            return `
                    <div class="relative max-w-sm w-full">
                    <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-rose-400"><path d="M760-89q-54 0-91.5-30.5T617-192H440q-69.3 0-118.65-49.5Q272-290.99 272-360.5q0-69.5 49.35-118.5T440-528h80q29.7 0 50.85-21.21 21.15-21.21 21.15-51T570.85-651Q549.7-672 520-672H343q-14 42-51.5 72.5T200-569q-62.92 0-106.96-44.06Q49-657.12 49-720.06T93.04-827q44.04-44 106.96-44 54 0 91.5 30.5T343-768h177q70 0 119 49t49 119q0 70-49 119t-119 49h-80q-29 0-50.5 21-21.5 21.01-21.5 50.5 0 29.5 21.5 51T440-288h177q14-42 51.5-72.5T760-391q62.92 0 106.96 44.06 44.04 44.06 44.04 107T866.96-133Q822.92-89 760-89ZM200-680q17 0 28.5-11.5T240-720q0-17-11.5-28.5T200-760q-17 0-28.5 11.5T160-720q0 17 11.5 28.5T200-680Z"/></svg>
                    </div>
                    <div class="absolute left-0 top-4 timeline-dash h-[115%] w-0.5 -z-10 border-none timeline-dash"></div>
                    <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                        <div class="header flex space-x-2">
                            <h3 class="flex-grow text-rose-400 font-bold">Traveling</h3>
                            <span class="max-w-14 text-sm font-extrabold relative top-1">${durationText}</span>
                        </div>
                        <p class="mt-1.5 text-sm text-gray-500"><span class="font-bold text-black">From: </span>${item.from_address ? item.from_address : 'Address not available'}</p>
                        <p class="mt-2 text-sm text-gray-500"><span class="font-bold text-black">To: </span>${item.to_address ? `${item.to_address} <span class="text-slate-900 font-bold">(${item.meters ? formatDistance(Number(item.meters)) : ''})</span>` : 'Address not available'}</p>
                        <p class="mt-1.5 text-sm font-bold">${moment(item.time.from).format("DD MMM hh:mm a")} - ${moment(item.time.to).format("DD MMM hh:mm a")}</p>
                    </div>
                </div>
                `;
        }

        function renderInProgress(item) {
            let durationText = durationHtml(item.duration);
            return `
                <div class="relative max-w-sm w-full">
                <div class="absolute top-3 z-10 -ml-4 h-9 w-9 rounded-full bg-sky-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-7 h-7 fill-blue-600"><path d="M480-46q-90 0-168.97-34.08-78.97-34.07-137.92-93.03-58.96-58.95-93.03-137.92Q46-390 46-480q0-90.14 34.06-168.88 34.07-78.74 93-137.93Q232-846 311-880t169-34q26 0 44.5 18.5T543-851q0 26-18.5 44.5T480-788q-128.01 0-218.01 89.99-89.99 89.99-89.99 218T261.99-262q89.99 90 218 90T698-261.99q90-90 90-218.01 0-26 18.5-44.5T851-543q26 0 44.5 18.5T914-480q0 90-34.06 169.01-34.07 79.01-93 138Q728-114 649.14-80 570.28-46 480-46Z"/></svg>
                </div>
                <div class="ml-6 block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                    <div class="header flex space-x-2">
                        <h3 class="flex-grow text-blue-600 font-bold">In Progress</h3>
                        ${durationText}
                    </div>
                    <p class="mt-1.5 text-sm font-bold">${moment(item.time.to).format("DD MMM hh:mm a")}</p>
                </div>
            </div>
            `;
        }

        // function getDistance(geo1, geo2) {
        //     if (!geo1 || !geo2) return 0;

        //     const [lat1, lon1] = geo1.split(',').map(Number);
        //     const [lat2, lon2] = geo2.split(',').map(Number);

        //     const toRad = (value) => (value * Math.PI) / 180;
        //     const R = 6371e3; // Earth radius in meters

        //     const φ1 = toRad(lat1);
        //     const φ2 = toRad(lat2);
        //     const Δφ = toRad(lat2 - lat1);
        //     const Δλ = toRad(lon2 - lon1);

        //     const a =
        //         Math.sin(Δφ / 2) ** 2 +
        //         Math.cos(φ1) * Math.cos(φ2) *
        //         Math.sin(Δλ / 2) ** 2;

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

        //     return Math.round(R * c);
        // }

        async function getDistance(origin, destination) {
            return new Promise((resolve, reject) => {
                var service = new google.maps.DistanceMatrixService();

                service.getDistanceMatrix({
                        origins: [origin],
                        destinations: [destination],
                        travelMode: google.maps.TravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC
                    },
                    function(response, status) {
                        if (status === "OK") {
                            const element = response.rows[0].elements[0];
                            if (element.status === "OK") {
                                resolve(element?.distance?.value ? element.distance.value : null);
                            }
                        }
                        resolve(null);
                    }
                );
            });
        }

    });
</script>
@endsection