@extends('layouts.app')
@section('title', __('gbs::lang.live_users_map'))

@section('content')
    <style>
        .marker-pin {
            width: 30px;
            height: 30px;
            border-radius: 50% 50% 50% 0;
            background-color: #c30b82;
            position: absolute;
            transform: rotate(-45deg);
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
        }

        /* .custom-icon {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -100%);
                            color: white;
                            font-size: 16px;
                        } */
    </style>


    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('gbs::lang.live_users_map')</h1>
    </section>

    <!-- Main content -->
    <section class="content no-print">


        <div id="employee-map" style="width: 100%; height: 600px; margin-top: 40px;"></div>
        <br><br><br>
        <div class="row">


    </section>


@endsection
@section('javascript')
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>




    <script>
        $(document).ready(function() {
            const labels = {
                name: "@lang('lang_v1.name')",
                total_invoice: "@lang('lang_v1.total_invoice')",
                total_paid: "@lang('sale.total_paid')",
                total_due: "@lang('report.total_due')",
                sales_count: "@lang('sale.sells')",
                total_clients: "@lang('lang_v1.total_client')",
                successful_visits: "@lang('lang_v1.successful_visit')",
                failed_visits: "@lang('lang_v1.failed_visit')",
                visited_clients: "@lang('lang_v1.visited_clients')",
                unvisited_clients: "@lang('lang_v1.unvisited_clients')"
            };

            const employeeMap = L.map('employee-map').setView([33.2232, 43.6793], 6);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(employeeMap);

            let employeeMarkers = {};

            function fetchEmployeeLocations() {

                fetch('/gbs/employee-locations')
                    .then(res => res.json())
                    .then(employees => {
                        employees.forEach(emp => {
                            const lat = parseFloat(emp.live_latitude);
                            const lng = parseFloat(emp.live_longitude);
                            if (isNaN(lat) || isNaN(lng)) return;

                            const markerHtml = `
                                <strong>${emp.name}</strong><br>
                                🧾 ${labels.total_invoice}: ${parseFloat(emp.total_invoice || 0).toFixed(2)}<br>
                                💵 ${labels.total_paid}: ${parseFloat(emp.total_paid || 0).toFixed(2)}<br>
                                📉 ${labels.total_due}: ${parseFloat(emp.total_due || 0).toFixed(2)}<br>
                                🛍️ ${labels.sales_count}: ${emp.sales_count}<br>
                                👥 ${labels.total_clients}: ${emp.total_clients}<br>
                                ✅ ${labels.successful_visits}: ${emp.successful_visits}<br>
                                ❌ ${labels.failed_visits}: ${emp.failed_visits}<br>
                                📍 ${labels.visited_clients}: ${emp.visited_clients}<br>
                                🚫 ${labels.unvisited_clients}: ${emp.unvisited_clients}<br>
                            `;
                            if (employeeMarkers[emp.id]) {
                                employeeMarkers[emp.id].setLatLng([lat, lng]);
                                employeeMarkers[emp.id].setPopupContent(markerHtml);
                            } else {
                                const marker = L.marker([lat, lng]).addTo(employeeMap)
                                    .bindPopup(markerHtml);
                                employeeMarkers[emp.id] = marker;
                            }
                        });
                    })
                    .catch(error => {
                        console.error("Fetch failed:", error);
                    });
            }

            fetchEmployeeLocations();
            setInterval(fetchEmployeeLocations, 7000);

        });
    </script>
@endsection