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

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold text-stone-800">
                <i class="fas fa-bus text-amber-500 mr-2"></i>Transport Management
            </h2>
            <p class="text-sm text-stone-500 mt-0.5">Manage bus routes, vehicles, and student assignments</p>
        </div>
        <div class="flex gap-2">
            <button onclick="document.getElementById('addVehicleModal').classList.remove('hidden')"
                    class="px-4 py-2 bg-stone-100 text-stone-700 rounded-xl text-sm font-semibold hover:bg-stone-200 transition">
                <i class="fas fa-truck mr-1.5"></i> Add Vehicle
            </button>
            <button onclick="document.getElementById('addRouteModal').classList.remove('hidden')"
                    class="px-5 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                <i class="fas fa-route mr-1.5"></i> Add Route
            </button>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        @foreach([
            ['Routes', $stats['routes'], 'fa-route', 'amber'],
            ['Vehicles', $stats['vehicles'], 'fa-bus', 'blue'],
            ['Students', $stats['students'], 'fa-user-graduate', 'green'],
            ['Stops', $stats['stops'], 'fa-map-marker-alt', 'purple'],
        ] as [$label, $value, $icon, $color])
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4 text-center">
            <div class="w-10 h-10 bg-{{ $color }}-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                <i class="fas {{ $icon }} text-{{ $color }}-500"></i>
            </div>
            <p class="text-2xl font-bold text-stone-800">{{ $value }}</p>
            <p class="text-[10px] text-stone-400 uppercase font-semibold">{{ $label }}</p>
        </div>
        @endforeach
    </div>

    {{-- Routes List --}}
    <div class="space-y-4">
        <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-route text-amber-500 mr-1.5"></i>Bus Routes</h3>
        @forelse($routes as $route)
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden hover:shadow-md transition">
            <div class="p-5">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-sm font-bold text-amber-700">{{ $route->code }}</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-stone-800">{{ $route->name }}</h4>
                            <div class="flex items-center gap-3 mt-1 text-xs text-stone-400">
                                @if($route->vehicle)
                                <span><i class="fas fa-bus mr-1 text-blue-400"></i>{{ $route->vehicle->vehicle_number }}</span>
                                @endif
                                <span><i class="fas fa-map-marker-alt mr-1 text-purple-400"></i>{{ $route->stops->count() }} stops</span>
                                <span><i class="fas fa-users mr-1 text-green-400"></i>{{ $route->activeAssignments->count() }} students</span>
                                <span><i class="fas fa-rupee-sign mr-1 text-amber-400"></i>{{ $route->formatted_fee }}/mo</span>
                            </div>
                            @if($route->morning_departure || $route->afternoon_departure)
                            <div class="flex items-center gap-3 mt-1 text-xs text-stone-400">
                                @if($route->morning_departure)
                                <span><i class="fas fa-sunrise mr-1 text-orange-400"></i>{{ \Carbon\Carbon::parse($route->morning_departure)->format('h:i A') }}</span>
                                @endif
                                @if($route->afternoon_departure)
                                <span><i class="fas fa-sunset mr-1 text-indigo-400"></i>{{ \Carbon\Carbon::parse($route->afternoon_departure)->format('h:i A') }}</span>
                                @endif
                            </div>
                            @endif
                            {{-- Stops preview --}}
                            @if($route->stops->isNotEmpty())
                            <div class="flex items-center gap-1 mt-2 flex-wrap">
                                @foreach($route->stops->take(5) as $i => $stop)
                                @if($i > 0)<i class="fas fa-chevron-right text-[8px] text-stone-300"></i>@endif
                                <span class="px-2 py-0.5 bg-stone-100 rounded text-[10px] text-stone-600 font-medium">{{ $stop->name }}</span>
                                @endforeach
                                @if($route->stops->count() > 5)
                                <span class="text-[10px] text-stone-400">+{{ $route->stops->count() - 5 }} more</span>
                                @endif
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <a href="{{ route('transport.route.show', $route) }}" class="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                            Manage
                        </a>
                        <form method="POST" action="{{ route('transport.route.destroy', $route) }}" onsubmit="return confirm('Delete this route?')">
                            @csrf @method('DELETE')
                            <button class="p-2 text-stone-400 hover:text-red-500 transition"><i class="fas fa-trash text-xs"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 p-12 text-center">
            <i class="fas fa-bus text-3xl text-stone-200 mb-3 block"></i>
            <p class="text-stone-400">No routes created yet</p>
        </div>
        @endforelse
    </div>

    {{-- Vehicles --}}
    @if($vehicles->isNotEmpty())
    <div>
        <h3 class="font-bold text-stone-800 text-sm mb-3"><i class="fas fa-truck text-blue-500 mr-1.5"></i>Fleet</h3>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($vehicles as $v)
            <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
                            <i class="fas fa-{{ $v->type === 'bus' ? 'bus' : ($v->type === 'van' ? 'shuttle-van' : 'car') }} text-blue-500"></i>
                        </div>
                        <div>
                            <p class="font-bold text-stone-800 text-sm">{{ $v->vehicle_number }}</p>
                            <p class="text-[10px] text-stone-400">{{ ucfirst($v->type) }} · {{ $v->capacity }} seats</p>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('transport.vehicle.destroy', $v) }}" onsubmit="return confirm('Deactivate?')">
                        @csrf @method('DELETE')
                        <button class="text-stone-400 hover:text-red-500 text-xs"><i class="fas fa-times"></i></button>
                    </form>
                </div>
                @if($v->driver_name)
                <p class="text-xs text-stone-400 mt-2"><i class="fas fa-user mr-1"></i>{{ $v->driver_name }} @if($v->driver_phone)· {{ $v->driver_phone }}@endif</p>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>

{{-- Add Route Modal --}}
<div id="addRouteModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
            <h3 class="font-bold text-stone-800"><i class="fas fa-route text-amber-500 mr-2"></i>Add Route</h3>
            <button onclick="document.getElementById('addRouteModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ route('transport.route.store') }}" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Route Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" required placeholder="Route 1 - North" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Code <span class="text-red-400">*</span></label>
                    <input type="text" name="code" required maxlength="10" placeholder="R1" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Vehicle</label>
                <select name="vehicle_id" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    <option value="">Unassigned</option>
                    @foreach($vehicles as $v)
                    <option value="{{ $v->id }}">{{ $v->vehicle_number }} ({{ ucfirst($v->type) }}, {{ $v->capacity }} seats)</option>
                    @endforeach
                </select>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Morning Departure</label>
                    <input type="time" name="morning_departure" value="07:30" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Afternoon Departure</label>
                    <input type="time" name="afternoon_departure" value="15:30" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Monthly Fee (₹) <span class="text-red-400">*</span></label>
                <input type="number" name="monthly_fee" required min="0" step="100" value="1500" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"></textarea>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('addRouteModal').classList.add('hidden')" class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition">
                    <i class="fas fa-plus mr-1.5"></i> Create Route
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Add Vehicle Modal --}}
<div id="addVehicleModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="font-bold text-stone-800"><i class="fas fa-truck text-blue-500 mr-2"></i>Add Vehicle</h3>
            <button onclick="document.getElementById('addVehicleModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ route('transport.vehicle.store') }}" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Vehicle Number <span class="text-red-400">*</span></label>
                    <input type="text" name="vehicle_number" required placeholder="KL-07-AB-1234" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Type <span class="text-red-400">*</span></label>
                    <select name="type" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        <option value="bus">Bus</option>
                        <option value="van">Van</option>
                        <option value="auto">Auto</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Capacity <span class="text-red-400">*</span></label>
                <input type="number" name="capacity" required min="1" max="100" value="40" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Driver Name</label>
                    <input type="text" name="driver_name" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Driver Phone</label>
                    <input type="text" name="driver_phone" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Helper Name</label>
                    <input type="text" name="helper_name" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Helper Phone</label>
                    <input type="text" name="helper_phone" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('addVehicleModal').classList.add('hidden')" class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-blue-500 text-white rounded-xl text-sm font-semibold hover:bg-blue-600 transition">
                    <i class="fas fa-plus mr-1.5"></i> Add Vehicle
                </button>
            </div>
        </form>
    </div>
</div>
@endsection