@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Live Bus Tracker</title>

<link rel="stylesheet" href="assets/css/toggle.css">
<style>
    #liveMap {
        width: 100% !important;
        height: 400px !important;
        display: block !important;
    }

    .custom-popup {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
    }

    .popup-content {
        background: #fff;
        border-radius: 8px;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        position: relative;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 22px;
        cursor: pointer;
    }

    /* Hide Google Maps default UI footer */
    .gm-style-cc,
    .gmnoprint a,
    .gmnoprint span {
        display: none !important;
    }

    .gmnoprint {
        background: none !important;
    }
</style>

<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $googleapikey }}&libraries=places"></script>

@section('main-content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-auto container-p-y row">
            <div class="col-6 mb-3">
                <h4 class="fw-bold py-3 mb-1"><span class="text-muted fw-light">Records / </span>Live Bus Tracker</h4>
            </div>

            <div class="card pb-5 ms-2">
                <h5 class="mt-3">Buses</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <div class="row">
                        @foreach ($busDrivers as $driver)
                            <div class="col-md-6 mb-4">
                                <div class="card shadow">
                                    <div class="card-body">
                                        <h5 class="card-title">Bus No: {{ $driver->bus_number }}</h5>
                                        <p>Driver: {{ $driver->driver_name }}</p>
                                        <p>Attendant: {{ $driver->attendant_name }}</p>

                                        @if ($driver->is_ride_started)
                                            <button class="btn btn-primary"
                                                onclick="openMapPopup('{{ $driver->bus_number }}')">
                                                Track Bus
                                            </button>
                                        @else
                                            <span class="badge bg-secondary">Trip not started</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Bus Tracking Popup -->
    <div id="customMapPopup" class="custom-popup">
        <div class="popup-content">
            <span class="close-btn" onclick="closeMapPopup()">×</span>
            <h5>Live Bus Tracking</h5>
            <div id="liveMap"></div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

    <script>
        let map = null;
        let marker = null;
        let socket = null;
        let currentBus = null;
        let polyline = null;
        let pathCoordinates = [];

        function openMapPopup(busNumber) {
            currentBus = busNumber;
            document.getElementById('customMapPopup').style.display = 'block';

            setTimeout(() => {
                initGoogleMap();
            }, 300);

            // Connect socket once
            if (!socket) {
                socket = io("{{ $socketUrl }}?token={{ $socketToken }}");

                socket.on("connect", () => {
                    console.log("Connected to socket");
                });

                socket.on("connect_error", (err) => {
                    console.error("Socket connection error", err);
                });
            }

            const channel = "route_" + busNumber;

            socket.off(channel); // prevent multiple bindings
            socket.on(channel, (data) => {
                if (data.driverId !== currentBus) return;

                if (!data.isRideStarted) {
                    alert("🚌 Trip has ended by the driver.");
                    closeMapPopup();
                    setTimeout(() => location.reload(), 500);
                    return;
                }

                const latlng = new google.maps.LatLng(data.lat, data.lng);

                // Add marker or update
                if (!marker) {
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        icon: {
                            url: '/assets/images/users/bus-icon.png',
                            scaledSize: new google.maps.Size(40, 40)
                        }
                    });
                } else {
                    marker.setPosition(latlng);
                }

                // Add to path
                pathCoordinates.push(latlng);

                // Draw or update polyline
                if (!polyline) {
                    polyline = new google.maps.Polyline({
                        path: pathCoordinates,
                        geodesic: true,
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 4,
                        map: map
                    });
                } else {
                    polyline.setPath(pathCoordinates);
                }

                map.setCenter(latlng);
            });
        }

        function initGoogleMap(lat = 28.6139, lng = 77.2090) {
            const center = {
                lat,
                lng
            };
            map = new google.maps.Map(document.getElementById("liveMap"), {
                center: center,
                zoom: 14
            });
            // Initial marker
            marker = new google.maps.Marker({
                position: center,
                map: map,
                icon: {
                    url: '/assets/images/users/bus-icon.png',
                    scaledSize: new google.maps.Size(40, 40)
                }
            });

            // Reset polyline and path
            pathCoordinates = [];
            polyline = null;
        }

        function closeMapPopup() {
            document.getElementById('customMapPopup').style.display = 'none';

            // Clear map and socket
            map = null;
            marker = null;
            polyline = null;
            pathCoordinates = [];

            if (socket && currentBus) {
                const channel = "route_" + currentBus;
                socket.off(channel);
            }

            if (socket) {
                socket.disconnect();
                socket = null;
            }

            currentBus = null;
        }
    </script>
@endsection