@extends('layouts.app')

@section('title', 'BusGo | New Trip')

@section('content')
<style>
    [x-cloak] { display: none !important; }
    
    .form-group-focus {
        transition: all 0.2s ease;
    }
    
    .form-group-focus:focus-within label {
        color: #4f46e5;
    }
</style>

<div class="flex items-center justify-between mb-8">
    <div>
        <h1 class="text-2xl font-black text-slate-900 tracking-tight">New Trip</h1>
        <p class="text-slate-500 font-medium">Schedule a new bus trip.</p>
    </div>
    <a href="{{ route('trips.index') }}" class="border border-slate-300 text-slate-600 hover:bg-slate-50 px-4 py-2 rounded font-bold text-xs transition flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        Back to Trips
    </a>
</div>

@if($errors->any())
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded shadow-sm">
    <p class="font-medium mb-2">Please fix the following errors:</p>
    <ul class="list-disc list-inside text-sm">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
        <h3 class="font-bold text-slate-700">Trip Information</h3>
    </div>
    
    <form action="{{ route('trips.store') }}" method="POST" class="p-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Route Selection -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Route <span class="text-red-500">*</span></label>
                <select name="route_id" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    <option value="">Select Route</option>
                    @foreach($routes as $route)
                        <option value="{{ $route->id }}" {{ old('route_id') == $route->id ? 'selected' : '' }}>
                            {{ $route->from_station }} → {{ $route->to_station }} (ZMW {{ number_format($route->bus_fare, 2) }})
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Bus Selection -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Bus <span class="text-red-500">*</span></label>
                <select name="bus_id" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    <option value="">Select Bus</option>
                    @foreach($buses as $bus)
                        <option value="{{ $bus->id }}" {{ old('bus_id') == $bus->id ? 'selected' : '' }}>
                            {{ $bus->name }} ({{ $bus->number_plate }}) - {{ $bus->number_of_seats }} seats
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Driver Selection -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Driver <span class="text-red-500">*</span></label>
                <select name="driver_id" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    <option value="">Select Driver</option>
                    @foreach($drivers as $driver)
                        <option value="{{ $driver->id }}" {{ old('driver_id') == $driver->id ? 'selected' : '' }}>
                            {{ $driver->name }} ({{ $driver->contact }})
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Conductor Selection -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Conductor <span class="text-red-500">*</span></label>
                <select name="conductor_id" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    <option value="">Select Conductor</option>
                    @foreach($conductors as $conductor)
                        <option value="{{ $conductor->id }}" {{ old('conductor_id') == $conductor->id ? 'selected' : '' }}>
                            {{ $conductor->name }} ({{ $conductor->contact }})
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Sales Personnel Selection -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Sales Personnel <span class="text-red-500">*</span></label>
                <select name="sales_personnel_id" required class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
                    <option value="">Select Sales Personnel</option>
                    @foreach($salesPersonnel as $personnel)
                        <option value="{{ $personnel->id }}" {{ old('sales_personnel_id') == $personnel->id ? 'selected' : '' }}>
                            {{ $personnel->name }} ({{ $personnel->contact }})
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Duration -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Duration (hours)</label>
                <input type="number" name="duration" value="{{ old('duration') }}" step="0.5" min="1" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition" placeholder="Estimated travel time">
            </div>
            
            <!-- Start Date -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Start Date <span class="text-red-500">*</span></label>
                <input type="date" name="start_date" required value="{{ old('start_date') }}" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
            </div>
            
            <!-- Start Time -->
            <div class="form-group-focus">
                <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Start Time <span class="text-red-500">*</span></label>
                <input type="time" name="start_time" required value="{{ old('start_time') }}" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
            </div>
        </div>
        
        <div class="mt-8 flex gap-3">
            <a href="{{ route('trips.index') }}" class="flex-1 px-4 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition text-center">Cancel</a>
            <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg font-bold text-xs hover:bg-indigo-700 transition shadow-md">Create Trip</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
// Auto-hide flash messages after 3 seconds
setTimeout(function() {
    var alerts = document.querySelectorAll('.bg-red-100');
    alerts.forEach(function(alert) {
        alert.style.transition = 'opacity 0.5s';
        alert.style.opacity = '0';
        setTimeout(function() {
            if(alert && alert.remove) alert.remove();
        }, 500);
    });
}, 3000);
</script>
@endpush