@php
    $stateOptions = [
        'NY' => 'New York',
        'NJ' => 'New Jersey',
        'CT' => 'Connecticut',
        'PA' => 'Pennsylvania',
    ];
@endphp

<x-app-layout>
    <div class="row g-4">
        <div class="col-12">
            <div class="card shadow-sm border-0 bg-gradient">
                <div class="card-body d-flex flex-column flex-lg-row justify-content-between gap-4">
                    <div>
                        <p class="text-uppercase text-white-50 small mb-2">Fleet workspace</p>
                        <h2 class="text-white mb-2">
                            {{ $activeProfile?->name ? $activeProfile->name . ' · Vehicles' : 'Create a business profile to log vehicles' }}
                        </h2>
                        <p class="text-white-50 mb-0">
                            Attach TLC, FHV, or medallion vehicles to this tenant. Entries stay scoped per profile so compliance alerts stay clean.
                        </p>
                    </div>
                    <div class="text-white text-lg-end">
                        <p class="text-uppercase small mb-1">Vehicles on file</p>
                        <h3 class="display-6 mb-0">{{ $vehicles?->total() ?? 0 }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-7">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-uppercase text-muted small mb-1">Fleet roster</p>
                            <h4 class="mb-0">Registered vehicles</h4>
                        </div>
                        <span class="badge bg-primary-subtle text-primary rounded-pill">
                            Active profile: {{ $activeProfile?->name ?? 'None' }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    @if (! $activeProfile)
                        <div class="empty-state">
                            <span class="badge bg-light text-dark rounded-pill mb-3">Profile required</span>
                            <p class="lead mb-2">Set up a business profile first</p>
                            <p class="text-muted mb-4">Vehicles must belong to a tenant. Create a profile, then return here to onboard your fleet.</p>
                            <a href="{{ route('business-profiles.index') }}" class="btn btn-primary btn-pill">Manage profiles</a>
                        </div>
                    @elseif (($vehicles?->total() ?? 0) === 0)
                        <div class="empty-state">
                            <span class="badge bg-light text-dark rounded-pill mb-3">No vehicles yet</span>
                            <p class="lead mb-2">Log your first TLC vehicle</p>
                            <p class="text-muted mb-4">Use the form on the right to add plate, VIN, and service details. Compliance widgets unlock as soon as one vehicle is stored.</p>
                            <a href="#vehicle-form" class="btn btn-primary btn-pill">
                                <i class="bi bi-plus-circle me-2"></i>
                                Launch vehicle form
                            </a>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th scope="col">Label</th>
                                        <th scope="col">Plate</th>
                                        <th scope="col">Service</th>
                                        <th scope="col">Reg. expires</th>
                                        <th scope="col" class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($vehicles as $vehicle)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $vehicle->label }}</div>
                                                <div class="text-muted small">
                                                    {{ $vehicle->year ? $vehicle->year . ' · ' : '' }}{{ $vehicle->make }} {{ $vehicle->model }}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span class="badge bg-primary-subtle text-primary">{{ $vehicle->plate_number }}</span>
                                                    <small class="text-muted">{{ $vehicle->state ? \Illuminate\Support\Str::upper($vehicle->state) : 'State TBD' }}</small>
                                                </div>
                                            </td>
                                            <td>
                            <span class="badge bg-light text-dark">
                                {{ $vehicle->primary_service ?? 'Unassigned' }}
                            </span>
                                                <div class="text-muted small">VIN {{ $vehicle->vin ? \Illuminate\Support\Str::upper(\Illuminate\Support\Str::limit($vehicle->vin, 8, '…')) : 'pending' }}</div>
                                            </td>
                                            <td>
                                                @if ($vehicle->registration_expires_at)
                                                    <span class="badge bg-success-subtle text-success">{{ $vehicle->registration_expires_at->format('M d, Y') }}</span>
                                                @else
                                                    <span class="text-muted">Not set</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                <form action="{{ route('vehicles.destroy', $vehicle) }}" method="POST" onsubmit="return confirm('Remove this vehicle from the fleet?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-outline-danger btn-sm btn-pill" type="submit">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            {{ $vehicles->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-5" id="vehicle-form">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white border-0">
                    <p class="text-uppercase text-muted small mb-1">Fleet intake</p>
                    <h4 class="mb-0">Add vehicle</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('vehicles.store') }}" method="POST" class="needs-validation" novalidate>
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="label">Vehicle nickname</label>
                            <input class="form-control @error('label') is-invalid @enderror" id="label" name="label" type="text" value="{{ old('label') }}" placeholder="e.g. 2022 Camry Hybrid" required>
                            @error('label')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label" for="plate_number">Plate number</label>
                                <input class="form-control @error('plate_number') is-invalid @enderror" id="plate_number" name="plate_number" type="text" value="{{ old('plate_number') }}" placeholder="ABC1234" required>
                                @error('plate_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="state">State</label>
                                <select class="form-select @error('state') is-invalid @enderror" id="state" name="state">
                                    <option value="" {{ old('state') ? '' : 'selected' }}>Select</option>
                                    @foreach ($stateOptions as $value => $label)
                                        <option value="{{ $value }}" {{ old('state', 'NY') === $value ? 'selected' : '' }}>{{ $value }} · {{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('state')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-6">
                                <label class="form-label" for="make">Make</label>
                                <input class="form-control @error('make') is-invalid @enderror" id="make" name="make" type="text" value="{{ old('make') }}" placeholder="Toyota">
                                @error('make')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="model">Model</label>
                                <input class="form-control @error('model') is-invalid @enderror" id="model" name="model" type="text" value="{{ old('model') }}" placeholder="Camry">
                                @error('model')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-4">
                                <label class="form-label" for="year">Year</label>
                                <input class="form-control @error('year') is-invalid @enderror" id="year" name="year" type="number" min="1995" max="{{ now()->year + 1 }}" value="{{ old('year') }}">
                                @error('year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-8">
                                <label class="form-label" for="vin">VIN</label>
                                <input class="form-control @error('vin') is-invalid @enderror" id="vin" name="vin" type="text" value="{{ old('vin') }}" placeholder="17-char VIN">
                                @error('vin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mt-3">
                            <label class="form-label" for="primary_service">Primary service</label>
                            <input class="form-control @error('primary_service') is-invalid @enderror" id="primary_service" name="primary_service" type="text" value="{{ old('primary_service') }}" placeholder="Taxi, FHV, paratransit">
                            @error('primary_service')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mt-3">
                            <label class="form-label" for="color">Color</label>
                            <input class="form-control @error('color') is-invalid @enderror" id="color" name="color" type="text" value="{{ old('color') }}" placeholder="Black">
                            @error('color')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mt-3">
                            <label class="form-label" for="registration_expires_at">Registration expiration</label>
                            <input class="form-control @error('registration_expires_at') is-invalid @enderror" id="registration_expires_at" name="registration_expires_at" type="date" value="{{ old('registration_expires_at') }}">
                            @error('registration_expires_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mt-3">
                            <label class="form-label" for="notes">Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="4" placeholder="Insurance, dispatcher, or inspection reminders.">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="d-grid mt-4">
                            <button class="btn btn-primary btn-pill" type="submit">
                                <i class="bi bi-save me-2"></i>
                                Save vehicle
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>