@extends('layouts.app')

@section('title', 'Find Parts by Vehicle')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-2">Find Parts by Vehicle</h1>
    <p class="text-gray-500 mb-6">Select your vehicle to find compatible parts</p>

    {{-- Vehicle Selector --}}
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
        <form method="GET" action="{{ route('shop.car-filter') }}" id="carFilterForm">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Make</label>
                    <select name="make_id" id="makeSelect" class="w-full border border-gray-300 rounded-lg px-3 py-2" onchange="loadModels(this.value)">
                        <option value="">Select Make</option>
                        @foreach($carMakes as $make)
                        <option value="{{ $make->id }}" {{ request('make_id') == $make->id ? 'selected' : '' }}>{{ $make->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
                    <select name="model_id" id="modelSelect" class="w-full border border-gray-300 rounded-lg px-3 py-2" onchange="loadYears(this.value)">
                        <option value="">Select Model</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Year</label>
                    <select name="year_id" id="yearSelect" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Select Year</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 font-medium">Find Parts</button>
                </div>
            </div>
        </form>
    </div>

    @if($selectedYear)
    <div class="mb-6">
        <h2 class="text-xl font-bold text-gray-800">
            Parts for {{ $selectedMake->name }} {{ $selectedModel->name }} {{ $selectedYear->year }}
        </h2>
        <p class="text-gray-500 text-sm">{{ $products->total() }} compatible parts found</p>
    </div>

    @if($products->count() > 0)
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
        @foreach($products as $product)
            @include('components.product-card', ['product' => $product])
        @endforeach
    </div>
    <div class="mt-6">{{ $products->links() }}</div>
    @else
    <div class="text-center py-16 bg-white rounded-xl">
        <p class="text-gray-500">No parts found for this vehicle. Try a different year or model.</p>
    </div>
    @endif
    @endif
</div>

<script>
function loadModels(makeId) {
    if (!makeId) return;
    fetch(`/api/car-models?make_id=${makeId}`)
        .then(r => r.json())
        .then(models => {
            const sel = document.getElementById('modelSelect');
            sel.innerHTML = '<option value="">Select Model</option>';
            models.forEach(m => sel.innerHTML += `<option value="${m.id}">${m.name}</option>`);
            document.getElementById('yearSelect').innerHTML = '<option value="">Select Year</option>';
        });
}

function loadYears(modelId) {
    if (!modelId) return;
    fetch(`/api/car-years?model_id=${modelId}`)
        .then(r => r.json())
        .then(years => {
            const sel = document.getElementById('yearSelect');
            sel.innerHTML = '<option value="">Select Year</option>';
            years.forEach(y => sel.innerHTML += `<option value="${y.id}">${y.year}</option>`);
        });
}
</script>
@endsection
