@extends('layouts.app')
@section('title', 'My 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>My Transport</h2>

    @if($assignment)
    @php $route = $assignment->route; $vehicle = $route->vehicle; @endphp

    {{-- Route Card --}}
    <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-6 py-4 border-b border-stone-100">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 bg-amber-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-bus text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-stone-800 text-lg">{{ $route->name }}</h3>
                    <p class="text-sm text-stone-500">Route {{ $route->code }} · {{ $route->formatted_fee }}/month</p>
                </div>
            </div>
        </div>

        <div class="p-6 space-y-4">
            {{-- Vehicle + Driver --}}
            @if($vehicle)
            <div class="grid sm:grid-cols-2 gap-4">
                <div class="bg-blue-50 rounded-xl p-4">
                    <p class="text-[10px] text-blue-500 uppercase font-bold tracking-wide">Vehicle</p>
                    <p class="font-bold text-stone-800 mt-1">{{ $vehicle->vehicle_number }}</p>
                    <p class="text-xs text-stone-500">{{ ucfirst($vehicle->type) }} · {{ $vehicle->capacity }} seats</p>
                </div>
                <div class="bg-green-50 rounded-xl p-4">
                    <p class="text-[10px] text-green-500 uppercase font-bold tracking-wide">Driver</p>
                    <p class="font-bold text-stone-800 mt-1">{{ $vehicle->driver_name ?? 'Not assigned' }}</p>
                    @if($vehicle->driver_phone)
                    <p class="text-xs text-stone-500"><a href="tel:{{ $vehicle->driver_phone }}" class="text-green-600 hover:underline"><i class="fas fa-phone mr-1"></i>{{ $vehicle->driver_phone }}</a></p>
                    @endif
                </div>
            </div>
            @endif

            {{-- My Stop --}}
            <div class="bg-amber-50 rounded-xl p-4">
                <p class="text-[10px] text-amber-500 uppercase font-bold tracking-wide">My Stop</p>
                <p class="font-bold text-stone-800 mt-1">{{ $assignment->stop->name }}</p>
                <div class="flex items-center gap-4 text-sm text-stone-500 mt-1">
                    @if($assignment->stop->pickup_time)
                    <span><i class="fas fa-arrow-up text-green-500 mr-1"></i>Pickup: {{ $assignment->stop->formatted_pickup }}</span>
                    @endif
                    @if($assignment->stop->drop_time)
                    <span><i class="fas fa-arrow-down text-blue-500 mr-1"></i>Drop: {{ $assignment->stop->formatted_drop }}</span>
                    @endif
                </div>
                @if($assignment->stop->landmark)
                <p class="text-xs text-stone-400 mt-1"><i class="fas fa-map-pin mr-1"></i>{{ $assignment->stop->landmark }}</p>
                @endif
            </div>

            {{-- Full Route Timeline --}}
            <div>
                <p class="text-sm font-bold text-stone-700 mb-3">Route Timeline</p>
                <div class="space-y-0">
                    @foreach($route->stops as $i => $stop)
                    @php $isMyStop = $stop->id === $assignment->stop_id; @endphp
                    <div class="flex items-start gap-3 relative">
                        <div class="flex flex-col items-center flex-shrink-0">
                            <div class="w-4 h-4 rounded-full {{ $isMyStop ? 'bg-amber-500 ring-4 ring-amber-200' : 'bg-stone-300' }}"></div>
                            @if(!$loop->last)
                            <div class="w-0.5 h-8 {{ $isMyStop ? 'bg-amber-300' : 'bg-stone-200' }}"></div>
                            @endif
                        </div>
                        <div class="pb-4">
                            <p class="text-sm font-medium {{ $isMyStop ? 'text-amber-700' : 'text-stone-700' }}">
                                {{ $stop->name }}
                                @if($isMyStop)<span class="text-[9px] bg-amber-500 text-white px-1.5 py-0.5 rounded-full ml-1">YOU</span>@endif
                            </p>
                            <p class="text-[10px] text-stone-400">
                                @if($stop->pickup_time){{ \Carbon\Carbon::parse($stop->pickup_time)->format('h:i A') }}@endif
                                @if($stop->pickup_time && $stop->drop_time) / @endif
                                @if($stop->drop_time){{ \Carbon\Carbon::parse($stop->drop_time)->format('h:i A') }}@endif
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    @else
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
        <div class="w-16 h-16 bg-stone-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-bus text-2xl text-stone-300"></i>
        </div>
        <p class="text-stone-500 font-medium">No transport assigned</p>
        <p class="text-xs text-stone-400 mt-1">Contact the school office if you use school transport</p>
    </div>
    @endif
</div>
@endsection