@extends('layouts.app')

@section('title', 'Start Trip')
@section('subtitle', 'Begin a new vehicle trip')

@section('content')
<div class="max-w-4xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Page Header -->
    <div class="mb-6 sm:mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Start New Trip</h1>
                <p class="mt-2 text-sm text-gray-600">Begin tracking a new vehicle trip</p>
            </div>
            <a href="{{ route('fleet.trips') }}" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors text-sm sm:text-base font-medium shadow-md hover:shadow-lg">
                <i class="fas fa-arrow-left mr-2"></i>
                <span class="hidden sm:inline">Back to Trips</span>
                <span class="sm:hidden">Back</span>
            </a>
        </div>
    </div>

    <!-- Trip Form -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-route text-blue-600 mr-2"></i>
                Trip Information
            </h3>
        </div>
        
        <form method="POST" action="{{ route('fleet.trips.store') }}" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Trip Details -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Trip Details</h4>
                    
                    <div>
                        <label for="driver_id" class="block text-sm font-medium text-gray-700 mb-2">Driver *</label>
                        <select id="driver_id" name="driver_id" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('driver_id') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Driver</option>
                            @foreach($drivers as $driver)
                                <option value="{{ $driver->id }}" {{ old('driver_id') == $driver->id ? 'selected' : '' }}>
                                    {{ $driver->user->full_name }} ({{ $driver->user->employee_id }})
                                </option>
                            @endforeach
                        </select>
                        @error('driver_id')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="vehicle_id" class="block text-sm font-medium text-gray-700 mb-2">Vehicle *</label>
                        <select id="vehicle_id" name="vehicle_id" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('vehicle_id') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Vehicle</option>
                            @foreach($vehicles as $vehicle)
                                <option value="{{ $vehicle->id }}" {{ old('vehicle_id') == $vehicle->id ? 'selected' : '' }}>
                                    {{ $vehicle->registration_number }} - {{ $vehicle->make }} {{ $vehicle->model }}
                                </option>
                            @endforeach
                        </select>
                        @error('vehicle_id')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="destination" class="block text-sm font-medium text-gray-700 mb-2">Destination *</label>
                        <input type="text" id="destination" name="destination" value="{{ old('destination') }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('destination') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., Dar es Salaam, Mwanza">
                        @error('destination')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="purpose" class="block text-sm font-medium text-gray-700 mb-2">Purpose *</label>
                        <input type="text" id="purpose" name="purpose" value="{{ old('purpose') }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('purpose') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., Equipment delivery, Site visit">
                        @error('purpose')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Trip Start Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Start Information</h4>
                    
                    <div>
                        <label for="start_time" class="block text-sm font-medium text-gray-700 mb-2">Start Time *</label>
                        <input type="datetime-local" id="start_time" name="start_time" value="{{ old('start_time', now()->format('Y-m-d\TH:i')) }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('start_time') border-red-500 ring-red-500 @enderror">
                        @error('start_time')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="start_mileage" class="block text-sm font-medium text-gray-700 mb-2">Start Mileage (km) *</label>
                        <input type="number" id="start_mileage" name="start_mileage" value="{{ old('start_mileage') }}" required min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('start_mileage') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., 50000">
                        @error('start_mileage')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="fuel_level_start" class="block text-sm font-medium text-gray-700 mb-2">Fuel Level Start (%)</label>
                        <input type="number" id="fuel_level_start" name="fuel_level_start" value="{{ old('fuel_level_start') }}" min="0" max="100"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('fuel_level_start') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., 75">
                        @error('fuel_level_start')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea id="notes" name="notes" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('notes') border-red-500 ring-red-500 @enderror"
                                  placeholder="Additional notes about the trip...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-8 flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                <a href="{{ route('fleet.trips') }}" class="w-full sm:w-auto bg-gray-500 text-white px-6 py-3 rounded-lg hover:bg-gray-600 transition-colors text-center font-medium">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
                <button type="submit" class="w-full sm:w-auto bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors font-medium shadow-md hover:shadow-lg">
                    <i class="fas fa-play mr-2"></i>Start Trip
                </button>
            </div>
        </form>
    </div>
</div>
@endsection