{{-- Tracking --}}
@extends('layouts.app')
@section('page-title','Location Tracking')
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@endpush
@section('content')
<div style="display:grid;grid-template-columns:320px 1fr;gap:16px;height:calc(100vh - 140px)">
    {{-- Salesman List --}}
    <div class="card" style="overflow-y:auto">
        <div class="card-header"><h3>Salesmen</h3></div>
        @foreach($salesmen as $sm)
        @php $loc = $sm->locations->first(); @endphp
        <div style="padding:12px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer" onclick="focusSalesman({{ $loc?->latitude ?? 0 }}, {{ $loc?->longitude ?? 0 }}, '{{ $sm->full_name }}')">
            <div style="font-weight:500;font-size:14px">{{ $sm->full_name }}</div>
            <div style="font-size:12px;color:#64748b">{{ $sm->designation ?? '' }}</div>
            @if($loc)
            <div style="font-size:11px;color:#94a3b8;margin-top:4px">
                <i class="fas fa-clock"></i> {{ $loc->recorded_at->diffForHumans() }}
            </div>
            @else
            <div style="font-size:11px;color:#94a3b8;margin-top:4px">No location data</div>
            @endif
        </div>
        @endforeach
    </div>

    {{-- Map --}}
    <div class="card" style="padding:0;overflow:hidden">
        <div id="map" style="width:100%;height:100%"></div>
    </div>
</div>

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([23.8103, 90.4125], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:19, attribution:'© OpenStreetMap' }).addTo(map);

const salesmen = @json($salesmen);
salesmen.forEach(sm => {
    if (sm.locations && sm.locations.length > 0) {
        const loc = sm.locations[0];
        L.marker([loc.latitude, loc.longitude])
            .addTo(map)
            .bindPopup(`<strong>${sm.full_name}</strong><br>${sm.designation || ''}`);
    }
});

function focusSalesman(lat, lng, name) {
    if (lat && lng) map.flyTo([lat, lng], 15);
}
</script>
@endpush
@endsection