@extends('layouts.app')

@section('title', 'Add Vehicle')
@section('subtitle', 'Register a new vehicle in the fleet')

@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">Add New Vehicle</h1>
                <p class="mt-2 text-sm text-gray-600">Register a new vehicle in the fleet management system</p>
            </div>
            <a href="{{ route('fleet.vehicles') }}" 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 Vehicles</span>
                <span class="sm:hidden">Back</span>
            </a>
        </div>
    </div>

    <!-- Vehicle Form -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-indigo-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-truck text-indigo-600 mr-2"></i>
                Vehicle Information
            </h3>
        </div>
        
        <form method="POST" action="{{ route('fleet.vehicles.store') }}" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Basic Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Basic Information</h4>
                    
                    <div>
                        <label for="registration_number" class="block text-sm font-medium text-gray-700 mb-2">Registration Number *</label>
                        <input type="text" id="registration_number" name="registration_number" value="{{ old('registration_number') }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('registration_number') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., T123ABC">
                        @error('registration_number')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="vehicle_type" class="block text-sm font-medium text-gray-700 mb-2">Vehicle Type *</label>
                        <select id="vehicle_type" name="vehicle_type" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('vehicle_type') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Vehicle Type</option>
                            <option value="Truck" {{ old('vehicle_type') == 'Truck' ? 'selected' : '' }}>Truck</option>
                            <option value="Excavator" {{ old('vehicle_type') == 'Excavator' ? 'selected' : '' }}>Excavator</option>
                            <option value="Loader" {{ old('vehicle_type') == 'Loader' ? 'selected' : '' }}>Loader</option>
                            <option value="Car" {{ old('vehicle_type') == 'Car' ? 'selected' : '' }}>Car</option>
                            <option value="Pickup" {{ old('vehicle_type') == 'Pickup' ? 'selected' : '' }}>Pickup</option>
                            <option value="Bus" {{ old('vehicle_type') == 'Bus' ? 'selected' : '' }}>Bus</option>
                        </select>
                        @error('vehicle_type')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

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

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

                <!-- Technical Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Technical Information</h4>
                    
                    <div>
                        <label for="current_mileage" class="block text-sm font-medium text-gray-700 mb-2">Current Mileage (km) *</label>
                        <input type="number" id="current_mileage" name="current_mileage" value="{{ old('current_mileage') }}" required min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('current_mileage') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., 50000">
                        @error('current_mileage')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

                    <div>
                        <label for="fuel_type" class="block text-sm font-medium text-gray-700 mb-2">Fuel Type *</label>
                        <select id="fuel_type" name="fuel_type" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('fuel_type') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Fuel Type</option>
                            <option value="Petrol" {{ old('fuel_type') == 'Petrol' ? 'selected' : '' }}>Petrol</option>
                            <option value="Diesel" {{ old('fuel_type') == 'Diesel' ? 'selected' : '' }}>Diesel</option>
                            <option value="Electric" {{ old('fuel_type') == 'Electric' ? 'selected' : '' }}>Electric</option>
                            <option value="Hybrid" {{ old('fuel_type') == 'Hybrid' ? 'selected' : '' }}>Hybrid</option>
                            <option value="CNG" {{ old('fuel_type') == 'CNG' ? 'selected' : '' }}>CNG</option>
                        </select>
                        @error('fuel_type')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status *</label>
                        <select id="status" name="status" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('status') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Status</option>
                            <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                        </select>
                        @error('status')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Service Information -->
            <div class="mt-8">
                <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-6">Service Information</h4>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="last_service_date" class="block text-sm font-medium text-gray-700 mb-2">Last Service Date</label>
                        <input type="date" id="last_service_date" name="last_service_date" value="{{ old('last_service_date') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('last_service_date') border-red-500 ring-red-500 @enderror">
                        @error('last_service_date')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

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

            <!-- Notes -->
            <div class="mt-8">
                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                <textarea id="notes" name="notes" rows="4"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('notes') border-red-500 ring-red-500 @enderror"
                          placeholder="Additional notes about the vehicle...">{{ old('notes') }}</textarea>
                @error('notes')
                    <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                @enderror
            </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.vehicles') }}" 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-indigo-500 text-white px-6 py-3 rounded-lg hover:bg-indigo-600 transition-colors font-medium shadow-md hover:shadow-lg">
                    <i class="fas fa-save mr-2"></i>Add Vehicle
                </button>
            </div>
        </form>
    </div>
</div>
@endsection