@extends('admin.layout.master')

@section('title', __('admin.driver_map'))

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="mb-3">{{ __('admin.driver_map') }}</h4>

    <!-- Map Container -->
    <div id="map" style="width: 100%; height: 80vh; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"></div>

  
</div>

<!-- Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Initialize the map
    var map = L.map('map').setView([26.8206, 30.8025], 6); // Default center (Egypt)

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Feature group to manage bounds
    var group = new L.featureGroup();

    // Driver data
    var driver = @json($driver);
    if (driver.lat && driver.lng) {
        var driverIcon = L.divIcon({
            className: 'custom-div-icon',
            html: `
                <div style="position: relative;">
                    <div style="
                        width: 20px; 
                        height: 20px; 
                        background: #4285F4; 
                        border: 2px solid white; 
                        border-radius: 50%;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                    "></div>
                    <div style="
                        position: absolute; 
                        top: -35px; 
                        left: 50%; 
                        transform: translateX(-50%);
                        background: white; 
                        padding: 3px 8px; 
                        border-radius: 4px; 
                        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                        font-family: Arial, sans-serif;
                        font-size: 11px;
                        font-weight: bold;
                        color: black;
                        white-space: nowrap;
                        border: 1px solid #ddd;
                    ">
                        ${driver.name ?? 'Driver'}
                    </div>
                </div>
            `,
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });

        var driverMarker = L.marker([parseFloat(driver.lat), parseFloat(driver.lng)], {
            icon: driverIcon
        }).addTo(map).bindPopup(`<b>${driver.name ?? 'Driver'}</b><br>ID: ${driver.id}`);
        group.addLayer(driverMarker);
    }

    // Orders data
    var orders = @json($orders);
    orders.forEach(order => {
        if (order.address && order.address.lat && order.address.lng) {
            var orderIcon = L.divIcon({
                className: 'custom-div-icon',
                html: `
                    <div style="position: relative;">
                        <div style="
                            width: 20px; 
                            height: 20px; 
                            background: #FF5733; 
                            border: 2px solid white; 
                            border-radius: 50%;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                        "></div>
                        <div style="
                            position: absolute; 
                            top: -35px; 
                            left: 50%; 
                            transform: translateX(-50%);
                            background: white; 
                            padding: 3px 8px; 
                            border-radius: 4px; 
                            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                            font-family: Arial, sans-serif;
                            font-size: 11px;
                            font-weight: bold;
                            color: black;
                            white-space: nowrap;
                            border: 1px solid #ddd;
                        ">
                            Order #${order.id}
                        </div>
                    </div>
                `,
                iconSize: [20, 20],
                iconAnchor: [10, 10]
            });

            var orderMarker = L.marker([parseFloat(order.address.lat), parseFloat(order.address.lng)], {
                icon: orderIcon
            }).addTo(map).bindPopup(`<b>Order #${order.id}</b><br>Status: ${order.status}<br>Address: ${order.address.full_address || 'N/A'}`);
            group.addLayer(orderMarker);
        }
    });

    // Adjust map bounds to include all markers
    if (group.getLayers().length > 0) {
        map.fitBounds(group.getBounds(), { padding: [20, 20], maxZoom: 15 });
    } else if (driver.lat && driver.lng) {
        map.setView([parseFloat(driver.lat), parseFloat(driver.lng)], 12);
    }
</script>

<style>
.custom-div-icon {
    background: transparent;
    border: none;
}

#map {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
@endsection