@extends('business.layouts.admin')

@section('content')
    <div class="dash-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="m-b-10 fw-bold">{{ __('Live Tracking') }}: {{ $employee->name }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-body p-0" style="height: 600px; position: relative;">

                        <div class="info-box"
                            style="position: absolute; top: 20px; left: 20px; z-index: 10; background: white; padding: 15px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-left: 5px solid #655BE1; min-width: 200px;">
                            <h6 class="fw-bold mb-1">{{ $employee->name }}</h6>
                            <p class="text-muted small mb-2"><i class="ti ti-phone"></i> {{ $employee->phone }}</p>
                            <div class="d-flex align-items-center">
                                <span id="status-dot" class="me-2"
                                    style="height: 10px; width: 10px; background-color: #ffc107; border-radius: 50%; display: inline-block;"></span>
                                <span id="status-text" class="small fw-bold text-uppercase">Waiting for signal...</span>
                            </div>
                        </div>

                        {{-- The Map Container --}}
                        <div id="map" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 1. Updated Maps Script: Added &callback=initMap and &loading=async --}}
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&callback=initMap&loading=async"
        async defer></script>

    {{-- Firebase Compatibility Scripts --}}
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>

    <script>
        const firebaseConfig = {
            apiKey: "AIzaSyAcxtnkINWAaPWwC82fhRyUZ2tsyDVfykk",
            authDomain: "bizgrow-6241a.firebaseapp.com",
            databaseURL: "https://bizgrow-6241a-default-rtdb.asia-southeast1.firebasedatabase.app",
            projectId: "bizgrow-6241a",
            storageBucket: "bizgrow-6241a.firebasestorage.app",
            messagingSenderId: "189670580864",
            appId: "1:189670580864:web:c26e45998fdac27c943c65",
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        // 2. Updated Path: Points to 'attendance' as per your database screenshot
        // const dbRef = firebase.database().ref("attendance/{{ $employee->uuid }}");

        // Get today's date in YYYY-MM-DD format
        function getTodayDate() {
            const today = new Date();
            return today.toISOString().split('T')[0];
        }

        // Correct Firebase Path
        const dbRef = firebase.database().ref(
            "users/{{ $employee->uuid }}/attendance/" + getTodayDate() + "/liveLocation"
        );

        let map, marker, hasInitialPosition = false;

        function initMap() {
            // Default view (Guwahati) until signal is received
            const defaultLatLng = {
                lat: 26.1445,
                lng: 91.7362
            };

            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: defaultLatLng,
                mapTypeControl: false,
                streetViewControl: false,
            });

            marker = new google.maps.Marker({
                position: defaultLatLng,
                map: map,
                title: "{{ $employee->name }}",
                icon: {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    scale: 7,
                    fillColor: "#655BE1",
                    fillOpacity: 1,
                    strokeWeight: 2,
                    strokeColor: "#FFFFFF",
                }
            });

            listenToFirebase();
        }

        function listenToFirebase() {
            dbRef.on("value", (snapshot) => {
                const data = snapshot.val();
                const dot = document.getElementById('status-dot');
                const txt = document.getElementById('status-text');

                console.log("Real-time data update:", data);

                if (!data || !data.latitude || !data.longitude) {
                    txt.innerText = "Offline / No Signal";
                    dot.style.backgroundColor = "#dc3545";
                    return;
                }

                const lat = parseFloat(data.latitude);
                const lng = parseFloat(data.longitude);

                const newPos = {
                    lat,
                    lng
                };

                marker.setPosition(newPos);
                marker.setVisible(true);

                txt.innerText = "Live Now";
                dot.style.backgroundColor = "#28a745";

                if (!hasInitialPosition) {
                    map.setCenter(newPos);
                    map.setZoom(17);
                    hasInitialPosition = true;
                } else {
                    map.panTo(newPos);
                }
            }, (error) => {
                console.error("Firebase Read Error:", error);
            });
        }
    </script>
@endsection