@extends('layouts.app')
@section('title', 'Transport')
@section('page-title', 'Transport')

@section('content')
<div class="space-y-6">
    <h2 class="text-xl font-bold text-stone-800"><i class="fas fa-bus text-amber-500 mr-2"></i>Children's Transport</h2>

    @forelse($assignments as $assignment)
    @php $route = $assignment->route; $vehicle = $route->vehicle; @endphp
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
        <div class="bg-gradient-to-r from-amber-50 to-stone-50 px-5 py-3 border-b border-stone-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-amber-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-bus text-white text-sm"></i>
                </div>
                <div>
                    <p class="font-bold text-stone-800 text-sm">{{ $assignment->student->name }}</p>
                    <p class="text-[10px] text-stone-400">{{ $route->name }} ({{ $route->code }})</p>
                </div>
            </div>
            <span class="px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full text-[9px] font-bold">{{ $route->formatted_fee }}/mo</span>
        </div>
        <div class="p-5">
            <div class="grid sm:grid-cols-3 gap-3">
                <div class="bg-stone-50 rounded-xl p-3">
                    <p class="text-[9px] text-stone-400 uppercase font-bold">Stop</p>
                    <p class="font-semibold text-stone-800 text-sm mt-0.5">{{ $assignment->stop->name }}</p>
                    <div class="text-[10px] text-stone-400 mt-0.5">
                        @if($assignment->stop->pickup_time)<span class="text-green-500"><i class="fas fa-arrow-up mr-0.5"></i>{{ $assignment->stop->formatted_pickup }}</span>@endif
                        @if($assignment->stop->drop_time) · <span class="text-blue-500"><i class="fas fa-arrow-down mr-0.5"></i>{{ $assignment->stop->formatted_drop }}</span>@endif
                    </div>
                </div>
                @if($vehicle)
                <div class="bg-stone-50 rounded-xl p-3">
                    <p class="text-[9px] text-stone-400 uppercase font-bold">Vehicle</p>
                    <p class="font-semibold text-stone-800 text-sm mt-0.5">{{ $vehicle->vehicle_number }}</p>
                    <p class="text-[10px] text-stone-400">{{ ucfirst($vehicle->type) }}</p>
                </div>
                <div class="bg-stone-50 rounded-xl p-3">
                    <p class="text-[9px] text-stone-400 uppercase font-bold">Driver</p>
                    <p class="font-semibold text-stone-800 text-sm mt-0.5">{{ $vehicle->driver_name ?? '—' }}</p>
                    @if($vehicle->driver_phone)
                    <a href="tel:{{ $vehicle->driver_phone }}" class="text-[10px] text-green-600 hover:underline"><i class="fas fa-phone mr-0.5"></i>{{ $vehicle->driver_phone }}</a>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
    @empty
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
        <i class="fas fa-bus text-3xl text-stone-200 mb-3 block"></i>
        <p class="text-stone-400">No transport assigned for your children</p>
    </div>
    @endforelse
</div>
@endsection