@extends('layouts.admin', ['title' => $truck->name.' History'])

@push('head')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@endpush

@section('content')
    <div class="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-semibold">{{ $truck->name }} history</h1>
            <p class="text-sm text-zinc-600">{{ $truck->plate_number ?: 'No plate number' }}</p>
        </div>
        <a href="{{ route('admin.trucks.show', $truck) }}" class="rounded-md border border-zinc-300 px-4 py-2 text-sm font-medium hover:bg-zinc-100">Back to truck</a>
    </div>

    <form id="filters" class="mb-6 grid gap-4 rounded-lg border border-zinc-200 bg-white p-4 shadow-sm sm:grid-cols-[1fr_1fr_auto]">
        <div>
            <label for="from" class="block text-sm font-medium text-zinc-700">From</label>
            <input id="from" name="from" type="datetime-local" value="{{ $from }}" class="mt-1 w-full rounded-md border border-zinc-300 px-3 py-2">
        </div>
        <div>
            <label for="to" class="block text-sm font-medium text-zinc-700">To</label>
            <input id="to" name="to" type="datetime-local" value="{{ $to }}" class="mt-1 w-full rounded-md border border-zinc-300 px-3 py-2">
        </div>
        <div class="flex items-end">
            <button class="w-full rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700">Apply</button>
        </div>
    </form>

    <div class="mb-6 grid gap-4 sm:grid-cols-4">
        <div class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm"><div class="text-sm text-zinc-500">Points</div><div id="total-points" class="text-2xl font-semibold">0</div></div>
        <div class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm"><div class="text-sm text-zinc-500">Distance</div><div id="distance" class="text-2xl font-semibold">0 km</div></div>
        <div class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm"><div class="text-sm text-zinc-500">Max speed</div><div id="max-speed" class="text-2xl font-semibold">-</div></div>
        <div class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm"><div class="text-sm text-zinc-500">Average speed</div><div id="avg-speed" class="text-2xl font-semibold">-</div></div>
    </div>

    <div id="map" class="mb-6 h-[520px] rounded-lg border border-zinc-200 bg-white shadow-sm"></div>

    <div class="overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm">
        <table class="min-w-full divide-y divide-zinc-200 text-sm">
            <thead class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
                <tr>
                    <th class="px-4 py-3">Tracked at</th>
                    <th class="px-4 py-3">Latitude</th>
                    <th class="px-4 py-3">Longitude</th>
                    <th class="px-4 py-3">Speed</th>
                    <th class="px-4 py-3">Accuracy</th>
                </tr>
            </thead>
            <tbody id="points-table" class="divide-y divide-zinc-100"></tbody>
        </table>
    </div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([43.6532, -79.3832], 11);
let routeLine = null;
let startMarker = null;
let endMarker = null;
const endpoint = @json(route('admin.api.trucks.locations', $truck));

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

function clearRoute() {
    [routeLine, startMarker, endMarker].forEach((layer) => layer && map.removeLayer(layer));
    routeLine = null;
    startMarker = null;
    endMarker = null;
}

async function loadHistory() {
    const params = new URLSearchParams(new FormData(document.getElementById('filters')));
    const response = await fetch(`${endpoint}?${params}`, { headers: { Accept: 'application/json' } });
    const data = await response.json();
    const points = data.locations.map((location) => [location.latitude, location.longitude]);

    clearRoute();
    document.getElementById('total-points').textContent = data.summary.total_points;
    document.getElementById('distance').textContent = `${data.summary.distance_km} km`;
    document.getElementById('max-speed').textContent = data.summary.max_speed_kmh === null ? '-' : `${data.summary.max_speed_kmh} km/h`;
    document.getElementById('avg-speed').textContent = data.summary.avg_speed_kmh === null ? '-' : `${data.summary.avg_speed_kmh} km/h`;

    if (points.length) {
        routeLine = L.polyline(points, { color: '#0f766e', weight: 4 }).addTo(map);
        startMarker = L.marker(points[0]).addTo(map).bindPopup('Start');
        endMarker = L.marker(points[points.length - 1]).addTo(map).bindPopup('End');
        map.fitBounds(routeLine.getBounds(), { padding: [40, 40], maxZoom: 15 });
    }

    document.getElementById('points-table').innerHTML = data.locations.map((location) => `
        <tr>
            <td class="px-4 py-3">${new Date(location.tracked_at).toLocaleString()}</td>
            <td class="px-4 py-3">${location.latitude.toFixed(7)}</td>
            <td class="px-4 py-3">${location.longitude.toFixed(7)}</td>
            <td class="px-4 py-3">${location.speed_kmh ?? '-'} km/h</td>
            <td class="px-4 py-3">${location.accuracy ?? '-'} m</td>
        </tr>
    `).join('') || '<tr><td colspan="5" class="px-4 py-8 text-center text-zinc-500">No points in this range.</td></tr>';
}

document.getElementById('filters').addEventListener('submit', (event) => {
    event.preventDefault();
    loadHistory();
});

loadHistory();
</script>
@endpush