@extends('layouts.app')
@section('title', $route->name)
@section('page-title', 'Transport')

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

    {{-- Back + Route Header --}}
    <div class="flex items-start gap-4">
        <a href="{{ route('transport.index') }}" class="mt-1 w-9 h-9 bg-stone-100 rounded-xl flex items-center justify-center hover:bg-stone-200 transition flex-shrink-0">
            <i class="fas fa-arrow-left text-stone-500 text-sm"></i>
        </a>
        <div class="flex-1">
            <div class="flex items-center gap-3">
                <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>
                    <h2 class="text-xl font-bold text-stone-800">{{ $route->name }}</h2>
                    <div class="flex items-center gap-3 text-xs text-stone-400 mt-0.5">
                        @if($route->vehicle)
                        <span><i class="fas fa-bus mr-1 text-blue-400"></i>{{ $route->vehicle->vehicle_number }}</span>
                        @if($route->vehicle->driver_name)
                        <span><i class="fas fa-user mr-1"></i>{{ $route->vehicle->driver_name }} @if($route->vehicle->driver_phone) · {{ $route->vehicle->driver_phone }} @endif</span>
                        @endif
                        @endif
                        <span><i class="fas fa-rupee-sign mr-1 text-amber-400"></i>{{ $route->formatted_fee }}/mo</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-6">
        {{-- LEFT: Stops --}}
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-map-marker-alt text-purple-500 mr-1.5"></i>Stops ({{ $route->stops->count() }})</h3>
                <button onclick="document.getElementById('addStopModal').classList.remove('hidden')"
                        class="px-3 py-1.5 bg-purple-50 text-purple-600 rounded-lg text-xs font-semibold hover:bg-purple-100 transition">
                    <i class="fas fa-plus mr-1"></i> Add Stop
                </button>
            </div>

            @if($route->stops->isNotEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                @foreach($route->stops as $i => $stop)
                <div class="px-5 py-3 flex items-center gap-4 {{ !$loop->last ? 'border-b border-stone-50' : '' }}">
                    {{-- Stop number --}}
                    <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-xs font-bold text-purple-700">{{ $i + 1 }}</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-stone-800 text-sm">{{ $stop->name }}</p>
                        <div class="flex items-center gap-3 text-[10px] text-stone-400 mt-0.5">
                            @if($stop->landmark)<span><i class="fas fa-map-pin mr-0.5"></i>{{ $stop->landmark }}</span>@endif
                            @if($stop->pickup_time)<span class="text-green-500"><i class="fas fa-arrow-up mr-0.5"></i>{{ $stop->formatted_pickup }}</span>@endif
                            @if($stop->drop_time)<span class="text-blue-500"><i class="fas fa-arrow-down mr-0.5"></i>{{ $stop->formatted_drop }}</span>@endif
                            <span>{{ $stop->assignments()->where('is_active', true)->count() }} students</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('transport.stop.destroy', $stop) }}" onsubmit="return confirm('Remove this stop?')">
                        @csrf @method('DELETE')
                        <button class="text-stone-400 hover:text-red-500 text-xs"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 p-8 text-center">
                <p class="text-stone-400 text-sm">No stops added. Add stops to start assigning students.</p>
            </div>
            @endif
        </div>

        {{-- RIGHT: Assigned Students --}}
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-users text-green-500 mr-1.5"></i>Students ({{ $route->activeAssignments->count() }})</h3>
                @if($route->stops->isNotEmpty())
                <button onclick="document.getElementById('assignStudentModal').classList.remove('hidden')"
                        class="px-3 py-1.5 bg-green-50 text-green-600 rounded-lg text-xs font-semibold hover:bg-green-100 transition">
                    <i class="fas fa-user-plus mr-1"></i> Assign Student
                </button>
                @endif
            </div>

            @if($route->activeAssignments->isNotEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                @foreach($route->activeAssignments->sortBy('stop.sort_order') as $assignment)
                <div class="px-5 py-3 flex items-center gap-3 {{ !$loop->last ? 'border-b border-stone-50' : '' }}">
                    <div class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-xs font-bold text-amber-700">{{ strtoupper(substr($assignment->student->name ?? '?', 0, 1)) }}</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-medium text-stone-800 text-sm">{{ $assignment->student->name ?? '—' }}</p>
                        <p class="text-[10px] text-stone-400">
                            {{ $assignment->student->studentProfile?->class_?->full_name ?? '' }}
                            · Stop: {{ $assignment->stop->name ?? '—' }}
                            · <span class="capitalize">{{ $assignment->type }}</span>
                        </p>
                    </div>
                    <form method="POST" action="{{ route('transport.assignment.remove', $assignment) }}" onsubmit="return confirm('Remove student?')">
                        @csrf @method('DELETE')
                        <button class="text-stone-400 hover:text-red-500 text-xs"><i class="fas fa-user-minus"></i></button>
                    </form>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 p-8 text-center">
                <p class="text-stone-400 text-sm">No students assigned to this route yet.</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Add Stop Modal --}}
<div id="addStopModal" 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-md">
        <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-map-marker-alt text-purple-500 mr-2"></i>Add Stop</h3>
            <button onclick="document.getElementById('addStopModal').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.stop.store', $route) }}" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Stop Name <span class="text-red-400">*</span></label>
                <input type="text" name="name" required placeholder="e.g. MG Road Junction" 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">Landmark</label>
                <input type="text" name="landmark" placeholder="Near SBI Bank" 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">Pickup Time</label>
                    <input type="time" name="pickup_time" 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">Drop Time</label>
                    <input type="time" name="drop_time" 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('addStopModal').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-purple-500 text-white rounded-xl text-sm font-semibold hover:bg-purple-600 transition">
                    <i class="fas fa-plus mr-1.5"></i> Add Stop
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Assign Student Modal --}}
@if($route->stops->isNotEmpty())
<div id="assignStudentModal" 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-md">
        <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-user-plus text-green-500 mr-2"></i>Assign Student</h3>
            <button onclick="document.getElementById('assignStudentModal').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.assignment.store') }}" class="p-6 space-y-4">
            @csrf
            <input type="hidden" name="route_id" value="{{ $route->id }}">
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Student <span class="text-red-400">*</span></label>
                <select name="student_id" required class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    <option value="">Select student...</option>
                    @foreach($availableStudents as $s)
                    <option value="{{ $s->id }}">{{ $s->name }} ({{ $s->studentProfile?->class_?->full_name ?? '—' }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Stop <span class="text-red-400">*</span></label>
                <select name="stop_id" required class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    @foreach($route->stops as $stop)
                    <option value="{{ $stop->id }}">{{ $stop->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Type</label>
                <select name="type" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    <option value="both">Pickup & Drop</option>
                    <option value="pickup">Pickup Only</option>
                    <option value="drop">Drop Only</option>
                </select>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('assignStudentModal').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-green-500 text-white rounded-xl text-sm font-semibold hover:bg-green-600 transition">
                    <i class="fas fa-check mr-1.5"></i> Assign
                </button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection