@extends('layouts.userlayout')

@section('content')

<div class="page-header">
    <div>
        <h2>Add New Car</h2>
        <p class="subtitle">Register your car to request service bookings.</p>
    </div>
    <a href="{{ route('user.cars') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to Fleet
    </a>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
            <strong style="display: block; margin-bottom: 4px;">Please fix the following errors:</strong>
            <ul style="list-style: none; padding: 0; margin: 0; font-size: 13px;">
                @foreach($errors->all() as $error)
                    <li>• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<div class="card shadow-card form-container">
    <form action="{{ route('user.cars.store') }}" method="POST">
        @csrf

        <div class="form-grid">
            <div class="form-group">
                <label for="car_type">Car Type</label>
                <div class="input-wrapper">
                    <i class="fas fa-car-side input-icon"></i>
                    <select name="car_type" id="car_type" required>
                        <option value="" disabled selected>Select car type...</option>
                        <option value="Sedan" {{ old('car_type') == 'Sedan' ? 'selected' : '' }}>Sedan</option>
                        <option value="SUV" {{ old('car_type') == 'SUV' ? 'selected' : '' }}>SUV</option>
                        <option value="Hatchback" {{ old('car_type') == 'Hatchback' ? 'selected' : '' }}>Hatchback</option>
                        <option value="Truck" {{ old('car_type') == 'Truck' ? 'selected' : '' }}>Truck</option>
                        <option value="Motorcycle" {{ old('car_type') == 'Motorcycle' ? 'selected' : '' }}>Motorcycle</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="brand">Brand / Manufacturer</label>
                <div class="input-wrapper">
                    <i class="fas fa-copyright input-icon"></i>
                    <input type="text" name="brand" id="brand" placeholder="e.g., Toyota" value="{{ old('brand') }}" required>
                </div>
            </div>

            <div class="form-group">
                <label for="model">Model</label>
                <div class="input-wrapper">
                    <i class="fas fa-tags input-icon"></i>
                    <input type="text" name="model" id="model" placeholder="e.g., Camry" value="{{ old('model') }}" required>
                </div>
            </div>

            <div class="form-group">
                <label for="year">Year of Manufacture</label>
                <div class="input-wrapper">
                    <i class="fas fa-calendar-alt input-icon"></i>
                    <input type="number" name="year" id="year" min="1950" max="{{ date('Y') + 1 }}" placeholder="e.g., 2023" value="{{ old('year') }}" required>
                </div>
            </div>

            <div class="form-group col-span-2">
                <label for="registration_number">Registration / License Plate Number</label>
                <div class="input-wrapper">
                    <i class="fas fa-id-card input-icon"></i>
                    <input type="text" name="registration_number" id="registration_number" placeholder="e.g., ABC-1234" style="text-transform: uppercase;" value="{{ old('registration_number') }}" required>
                </div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-large">
                <i class="fas fa-save"></i> Save Car
            </button>
        </div>
    </form>
</div>

@endsection