@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;
        }

        .employee-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 3px solid;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        }

        .employee-avatar.offline {
            border-color: #dc3545 !important;
            /* red for offline */
        }

        .employee-avatar.online {
            border-color: #28a745 !important;
            /* green for online */
        }

        /* .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">
        @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    <label for="customer">@lang('user.users'):</label>
                    {!! Form::select('user_id', $users ?? [], null, [
                        'class' => 'form-control select2',
                        'id' => 'user_id',
                        'placeholder' => __('lang_v1.all'),
                        'style' => 'width:100%',
                    ]) !!}


                </div>
            </div>
        @endcomponent

        <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>

    <!-- Laravel Echo & Pusher -->
    <script src="https://js.pusher.com/8.0/pusher.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.0/echo.iife.js"></script>
    <script>
        // Make sure Pusher is loaded
        if (typeof Pusher === 'undefined') {
            console.error('Pusher is not loaded');
        }

        // Initialize Echo
        window.Echo = new window.Echo({
            broadcaster: 'pusher',
            key: '{{ config('broadcasting.connections.pusher.key') }}',
            cluster: '{{ config('broadcasting.connections.options.cluster') }}',
            forceTLS: true
        });

        // Now private() works
        Echo.private('admin.employee-locations')
            .listen('.employee.location.updated', (e) => {
                console.log(e.employee);
            });
    </script>
    <script>
        $(document).ready(function() {
            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 = {};
            let shouldZoom = true;

            const selectedUserId = $('#user_id').val();

            // Function to create/update a marker
            function updateMarker(emp) {
                const lat = parseFloat(emp.live_latitude);
                const lng = parseFloat(emp.live_longitude);
                if (isNaN(lat) || isNaN(lng)) return;

                const offline = emp.offline ?? false;
                const employeeIcon = L.divIcon({
                    html: `<div class="employee-avatar ${offline ? 'offline' : 'online'}" 
                    style="background-image: url('${emp.image_url}')"></div>`,
                    className: '',
                    iconSize: [40, 40],
                    iconAnchor: [20, 40],
                    popupAnchor: [0, -40]
                });

                if (employeeMarkers[emp.id]) {
                    employeeMarkers[emp.id].setLatLng([lat, lng]);
                    employeeMarkers[emp.id].setIcon(employeeIcon);
                } else {
                    employeeMarkers[emp.id] = L.marker([lat, lng], {
                            icon: employeeIcon
                        })
                        .addTo(employeeMap)
                        .bindPopup(`<strong>${emp.name}</strong>`)
                        .on('click', function () {
                            employeeMap.setView([lat, lng], 19);
                        });
                }
            }

            // Function to fetch all employee locations
            function fetchEmployeeLocations() {
                const userId = $('#user_id').val();
                fetch('/gbs/employee-locations?user_id=' + userId)
                    .then(res => res.json())
                    .then(employees => {
                        let markerLatLngs = [];

                        employees.forEach(emp => {
                            // Compute offline dynamically if last update > 1 min
                            emp.offline = !emp.live_time || (new Date() - new Date(emp.live_time)) /
                                1000 > 60;
                            updateMarker(emp);
                            markerLatLngs.push([parseFloat(emp.live_latitude), parseFloat(emp
                                .live_longitude)]);
                        });

                        if (shouldZoom && markerLatLngs.length > 0) {
                            if (markerLatLngs.length === 1) {
                                employeeMap.setView(markerLatLngs[0], 18);
                            } else {
                                const bounds = L.latLngBounds(markerLatLngs);
                                employeeMap.fitBounds(bounds, {
                                    padding: [50, 50]
                                });
                            }
                            shouldZoom = false;
                        }
                    })
                    .catch(error => console.error("Fetch failed:", error));
            }

            // --- Initial load ---
            fetchEmployeeLocations();

            // --- Poll every minute to mark offline employees ---
            setInterval(fetchEmployeeLocations, 60000);

            // --- Real-time updates via Laravel Echo ---
           const domain = window.location.hostname.replaceAll('.', '-');

            Echo.channel(`${domain}-admin.employee-locations`)
                .listen('.employee.location.updated', (e) => {
                    updateMarker(e.employee);
                });

            // --- User filter change ---
            $('#user_id').on('change', function() {
                shouldZoom = true;
                for (const id in employeeMarkers) {
                    employeeMap.removeLayer(employeeMarkers[id]);
                }
                employeeMarkers = {};
                fetchEmployeeLocations();
            });
        });
    </script>
@endsection