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

@section('content')
    <div class="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-semibold">{{ $truck->name }}</h1>
            <p class="text-sm text-zinc-600">{{ $truck->plate_number ?: 'No plate number' }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.trucks.history', $truck) }}" class="rounded-md border border-zinc-300 px-4 py-2 text-sm font-medium hover:bg-zinc-100">History</a>
            <a href="{{ route('admin.trucks.edit', $truck) }}" class="rounded-md border border-zinc-300 px-4 py-2 text-sm font-medium hover:bg-zinc-100">Edit</a>
            <form method="POST" action="{{ route('admin.trucks.destroy', $truck) }}" onsubmit="return confirm('Delete this truck and its locations?')">
                @csrf
                @method('DELETE')
                <button class="rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50">Delete</button>
            </form>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm lg:col-span-2">
            <h2 class="mb-3 text-lg font-semibold">Tracking link</h2>
            <a href="{{ route('track.show', $truck->token) }}" target="_blank" class="break-all text-zinc-700 underline">{{ route('track.show', $truck->token) }}</a>
            <form method="POST" action="{{ route('admin.trucks.regenerate-token', $truck) }}" class="mt-4" onsubmit="return confirm('Regenerate token? The old tablet link will stop working.')">
                @csrf
                <button class="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700">Regenerate token</button>
            </form>
        </div>

        <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
            <h2 class="mb-3 text-lg font-semibold">Latest location</h2>
            @if ($truck->latestLocation)
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between"><dt class="text-zinc-500">Latitude</dt><dd>{{ $truck->latestLocation->latitude }}</dd></div>
                    <div class="flex justify-between"><dt class="text-zinc-500">Longitude</dt><dd>{{ $truck->latestLocation->longitude }}</dd></div>
                    <div class="flex justify-between"><dt class="text-zinc-500">Speed</dt><dd>{{ $truck->latestLocation->speed_kmh ?? '-' }} km/h</dd></div>
                    <div class="flex justify-between"><dt class="text-zinc-500">Updated</dt><dd>{{ $truck->latestLocation->tracked_at->diffForHumans() }}</dd></div>
                </dl>
            @else
                <p class="text-sm text-zinc-500">No locations recorded.</p>
            @endif
        </div>
    </div>
@endsection