@extends('admin.layout.master')
@section('title', 'Drivers Map')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="mb-3">{{ __("admin.Drivers Map") }}</h4>
    <div id="map" style="height:600px;"></div>
</div>

{{-- استدعاء مكتبة Leaflet --}}
<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>
    // إنشاء الخريطة
    var map = L.map('map').setView([26.8206, 30.8025], 6);

    // إضافة طبقة الخريطة من OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    var drivers = @json($drivers);
    var group = new L.featureGroup();

    drivers.forEach(d => {
        if (d.lat && d.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;
                        ">
                            ${d.name ?? 'Driver'}
                        </div>
                    </div>
                `,
                iconSize: [20, 20],
                iconAnchor: [10, 10]
            });

            var marker = L.marker([parseFloat(d.lat), parseFloat(d.lng)], {
                icon: driverIcon
            }).addTo(map);
            
            group.addLayer(marker);
        }
    });

    // تجميع الخريطة على جميع السائقين
    if (drivers.length > 0) {
        map.fitBounds(group.getBounds(), {padding: [20, 20]});
    }
</script>

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