@extends('freight-client.layouts.app')
@section('title', 'Find Drivers')

@section('head')
<style>
    #driverMap { width: 100%; height: 460px; border-radius: 12px; border: 1px solid #e2e8f0; }
    .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#475569; margin-top:10px; }
    .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }
</style>
@endsection

@section('content')
    <h1 style="font-size:1.5rem;font-weight:800;margin:0 0 6px;">Find Freight Drivers</h1>
    <p style="color:#64748b;margin:0 0 20px;">Green pins are drivers who are <strong>online &amp; available now</strong> with a shared location.</p>

    <div class="card">
        <h2><i class="fas fa-map-location-dot"></i> Available Drivers — Live Map</h2>
        <div id="driverMap"></div>
        <div class="legend">
            <span><span class="dot" style="background:#16a34a;"></span> Available &amp; sharing location</span>
            <span id="mapCount" style="font-weight:700;"></span>
        </div>
    </div>

    <div class="card">
        <h2><i class="fas fa-truck-moving"></i> All Drivers</h2>
        @if($drivers->count())
            <table>
                <thead><tr><th>Driver</th><th>Phone</th><th>Truck</th><th>Availability</th><th>Current Location</th><th>Last Update</th></tr></thead>
                <tbody>
                    @foreach($drivers as $d)
                        <tr>
                            <td><strong>{{ $d->full_name }}</strong></td>
                            <td>{{ $d->phone ?: '—' }}</td>
                            <td>{{ optional($d->vehicles->first())->truck_type ?: '—' }}</td>
                            <td>
                                @if($d->is_available)
                                    <span class="badge badge-on">Online</span>
                                @else
                                    <span class="badge badge-off">Offline</span>
                                @endif
                            </td>
                            <td>{{ $d->current_location ?: '—' }}</td>
                            <td>{{ $d->last_location_at ? $d->last_location_at->diffForHumans() : '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p style="color:#64748b;margin:0;">No active drivers found yet.</p>
        @endif
    </div>
@endsection

@section('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClBMaAaaRWoxV6N5jT1RfFdyeEUS0VhAE"></script>
<script>
    var map, infoWindow;
    function initDriverMap() {
        map = new google.maps.Map(document.getElementById('driverMap'), {
            center: { lat: 39.0997, lng: -94.5786 }, // Kansas City default
            zoom: 6,
        });
        infoWindow = new google.maps.InfoWindow();
        loadDrivers();
    }
    function loadDrivers() {
        fetch('{{ route('freight.client.drivers.data') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(function (drivers) {
                document.getElementById('mapCount').textContent = drivers.length + ' driver(s) available now';
                if (!drivers.length) return;
                var bounds = new google.maps.LatLngBounds();
                drivers.forEach(function (d) {
                    var pos = { lat: d.lat, lng: d.lng };
                    var marker = new google.maps.Marker({
                        position: pos, map: map, title: d.name,
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                    });
                    bounds.extend(pos);
                    marker.addListener('click', function () {
                        infoWindow.setContent(
                            '<div style="font-size:13px;line-height:1.5;">' +
                            '<strong>' + d.name + '</strong><br>' +
                            (d.truck ? 'Truck: ' + d.truck + '<br>' : '') +
                            (d.phone ? 'Phone: ' + d.phone + '<br>' : '') +
                            (d.location ? 'Location: ' + d.location + '<br>' : '') +
                            (d.updated ? '<span style="color:#64748b;">Updated ' + d.updated + '</span>' : '') +
                            '</div>'
                        );
                        infoWindow.open(map, marker);
                    });
                });
                map.fitBounds(bounds);
                if (drivers.length === 1) map.setZoom(10);
            });
    }
    window.addEventListener('load', initDriverMap);
</script>
@endsection