@extends('layouts.public')

@php
    $labels = match(app()->getLocale()) {
        'en' => ['title'=>'Spare parts catalogue','search'=>'Search by part, brand, vehicle or engine','all_status'=>'All availability','all_makes'=>'Vehicle make','all_models'=>'Vehicle model','all_years'=>'Model year','all_engines'=>'Engine capacity','filter'=>'Search','available'=>'Available','on_request'=>'On request','unavailable'=>'Unavailable','details'=>'Details','login'=>'Login to view your price','empty'=>'No matching products found.','grid'=>'Grid','list'=>'Rows','clear'=>'Clear filters','results'=>'products found','compatible'=>'Compatible with','suggestions'=>'Search suggestions'],
        'es' => ['title'=>'Catálogo de repuestos','search'=>'Buscar por pieza, marca, vehículo o motor','all_status'=>'Toda disponibilidad','all_makes'=>'Marca del vehículo','all_models'=>'Modelo del vehículo','all_years'=>'Año del modelo','all_engines'=>'Cilindrada','filter'=>'Buscar','available'=>'Disponible','on_request'=>'Bajo pedido','unavailable'=>'No disponible','details'=>'Detalles','login'=>'Inicia sesión para ver tu precio','empty'=>'No se encontraron productos.','grid'=>'Cuadrícula','list'=>'Filas','clear'=>'Limpiar filtros','results'=>'productos encontrados','compatible'=>'Compatible con','suggestions'=>'Sugerencias de búsqueda'],
        'tr' => ['title'=>'Yedek parça kataloğu','search'=>'Parça, marka, araç veya motor ara','all_status'=>'Tüm durumlar','all_makes'=>'Araç markası','all_models'=>'Araç modeli','all_years'=>'Model yılı','all_engines'=>'Motor hacmi','filter'=>'Ara','available'=>'Mevcut','on_request'=>'Sipariş üzerine','unavailable'=>'Mevcut değil','details'=>'Detaylar','login'=>'Fiyatınızı görmek için giriş yapın','empty'=>'Eşleşen ürün yok.','grid'=>'Izgara','list'=>'Satırlar','clear'=>'Filtreleri temizle','results'=>'ürün bulundu','compatible'=>'Uyumlu araç','suggestions'=>'Arama önerileri'],
        'it' => ['title'=>'Catalogo ricambi','search'=>'Cerca per ricambio, marca, veicolo o motore','all_status'=>'Tutte le disponibilità','all_makes'=>'Marca veicolo','all_models'=>'Modello veicolo','all_years'=>'Anno modello','all_engines'=>'Cilindrata','filter'=>'Cerca','available'=>'Disponibile','on_request'=>'Su richiesta','unavailable'=>'Non disponibile','details'=>'Dettagli','login'=>'Accedi per vedere il tuo prezzo','empty'=>'Nessun prodotto trovato.','grid'=>'Griglia','list'=>'Righe','clear'=>'Azzera filtri','results'=>'prodotti trovati','compatible'=>'Compatibile con','suggestions'=>'Suggerimenti di ricerca'],
        default => ['title'=>'كتالوج قطع السيارات','search'=>'ابحث باسم القطعة أو الماركة أو السيارة أو المحرك','all_status'=>'كل حالات التوفر','all_makes'=>'ماركة السيارة','all_models'=>'طراز السيارة','all_years'=>'سنة الموديل','all_engines'=>'سعة المحرك','filter'=>'بحث','available'=>'متوفر','on_request'=>'حسب الطلب','unavailable'=>'غير متوفر','details'=>'عرض التفاصيل','login'=>'سجل الدخول لرؤية سعرك','empty'=>'لا توجد منتجات مطابقة.','grid'=>'بطاقات','list'=>'صفوف','clear'=>'مسح الفلاتر','results'=>'منتج مطابق','compatible'=>'متوافق مع','suggestions'=>'اقتراحات البحث'],
    };
    $statusLabels = [
        'available' => $labels['available'],
        'on_request' => $labels['on_request'],
        'unavailable' => $labels['unavailable'],
    ];
@endphp

@section('title', $labels['title'])

@push('styles')
    .catalog-filter { margin-bottom:20px; }
    .search-row { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:10px; margin-bottom:12px; }
    .filter-row { display:grid; grid-template-columns:repeat(5,minmax(135px,1fr)) auto; gap:10px; }
    .control { width:100%; min-height:45px; padding:11px 12px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--white); font:inherit; }
    .search-shell { position:relative; }
    .suggestions { position:absolute; z-index:80; top:calc(100% + 5px); inset-inline:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--white); box-shadow:0 14px 35px rgba(16,36,65,.16); }
    .suggestions[hidden] { display:none; }
    .suggestion-item { display:block; padding:11px 13px; border-bottom:1px solid var(--border); text-decoration:none; }
    .suggestion-item:last-child { border-bottom:0; }
    .suggestion-item:hover,.suggestion-item:focus { background:var(--light); }
    .suggestion-item strong,.suggestion-item small { display:block; }
    .suggestion-item small { margin-top:3px; color:var(--muted); }
    .catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; flex-wrap:wrap; }
    .result-count { color:var(--muted); font-weight:700; }
    .toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .view-button,.clear-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--white); color:var(--text); text-decoration:none; font-weight:700; }
    .view-button.active { border-color:var(--primary); color:white; background:var(--primary); }
    .products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
    .product-card { overflow:hidden; padding:0; }
    .product-image { display:flex; align-items:center; justify-content:center; height:210px; background:#eef3f8; color:var(--muted); }
    .product-image img { width:100%; height:100%; object-fit:cover; }
    .product-content { min-width:0; padding:18px; }
    .product-name { margin:4px 0 8px; color:var(--primary); font-size:20px; }
    .product-brand { margin-bottom:9px; color:#475467; }
    .vehicle-line { margin-bottom:11px; color:var(--muted); font-size:13px; }
    .status { display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; }
    .status-available { color:#fff; background:#146c35; }
    .status-on_request { color:#fff; background:#b45309; }
    .status-unavailable { color:#fff; background:#b42318; }
    .price-lock { margin:14px 0; padding:12px; border:1px solid #fecaca; border-radius:9px; background:#fff1f1; color:#b42318; font-weight:800; }
    .products-grid.view-list { grid-template-columns:1fr; gap:10px; }
    .view-list .product-card:nth-child(odd) { background:#c8cdd4; }
    .view-list .product-card:nth-child(even) { background:#9fc7ed; }
    .view-list .product-card { display:grid; grid-template-columns:96px minmax(0,1fr); min-height:96px; }
    .view-list .product-image { width:96px; height:96px; min-height:96px; }
    .view-list .product-content { display:grid; grid-template-columns:minmax(210px,1fr) auto minmax(150px,auto) auto; align-items:center; gap:3px 12px; padding:9px 12px; }
    .view-list .product-name { grid-column:1; grid-row:1; margin:0; font-size:17px; }
    .view-list .product-brand { grid-column:1; grid-row:2; margin:0; font-size:13px; }
    .view-list .vehicle-line { grid-column:1; grid-row:3; margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .view-list .status { grid-column:2; grid-row:1 / span 3; justify-self:start; }
    .view-list .price-lock { grid-column:3; grid-row:1 / span 3; margin:0; padding:8px 10px; font-size:12px; }
    .view-list .button { grid-column:4; grid-row:1 / span 3; justify-self:start; padding:8px 11px; font-size:13px; }
    .empty-card { grid-column:1/-1; }
    @media(max-width:1200px){.products-grid:not(.view-list){grid-template-columns:repeat(3,1fr)}}
    @media(max-width:900px){.products-grid:not(.view-list){grid-template-columns:repeat(2,1fr)}.filter-row{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:720px){.search-row,.filter-row{grid-template-columns:1fr}.view-list .product-card{grid-template-columns:82px minmax(0,1fr)}.view-list .product-image{width:82px;height:100%;min-height:105px}.view-list .product-content{display:block}.view-list .status,.view-list .button{margin-top:7px}.view-list .price-lock{margin:7px 0;padding:7px}}
    @media(max-width:480px){.products-grid:not(.view-list){grid-template-columns:1fr}.view-list .product-card{grid-template-columns:85px minmax(0,1fr)}.view-list .product-image{width:85px}.product-content{padding:14px}.product-name{font-size:17px}}
@endpush

@section('content')
    <div class="page-header">
        <h1 class="page-title">{{ $labels['title'] }}</h1>
    </div>

    <section class="card catalog-filter">
        <form method="GET" action="{{ route('public.products.index') }}" data-catalog-form>
            <input type="hidden" name="view" value="{{ $viewMode }}">
            <div class="search-row">
                <div class="search-shell">
                    <input
                        class="control"
                        id="catalog-search"
                        type="search"
                        name="search"
                        value="{{ $search }}"
                        placeholder="{{ $labels['search'] }}"
                        autocomplete="off"
                        data-suggestions-url="{{ route('catalog.suggestions') }}"
                        aria-autocomplete="list"
                        aria-controls="catalog-suggestions"
                    >
                    <div id="catalog-suggestions" class="suggestions" aria-label="{{ $labels['suggestions'] }}" hidden></div>
                </div>
                <button class="button" type="submit">{{ $labels['filter'] }}</button>
            </div>

            <div class="filter-row">
                <select class="control" name="vehicle_make" id="vehicle-make" data-options-url="{{ route('catalog.vehicle-options') }}">
                    <option value="0">{{ $labels['all_makes'] }}</option>
                    @foreach($vehicleMakes as $make)
                        <option value="{{ $make->id }}" @selected($vehicleMakeId === $make->id)>{{ $make->name }}</option>
                    @endforeach
                </select>
                <select class="control" name="vehicle_model" id="vehicle-model" @disabled($vehicleMakeId < 1)>
                    <option value="0">{{ $labels['all_models'] }}</option>
                    @foreach($vehicleModels as $model)
                        <option value="{{ $model->id }}" @selected($vehicleModelId === $model->id)>{{ $model->name }}</option>
                    @endforeach
                </select>
                <select class="control" name="vehicle_year" id="vehicle-year" @disabled($vehicleMakeId < 1)>
                    <option value="0">{{ $labels['all_years'] }}</option>
                    @foreach($vehicleYears as $year)
                        <option value="{{ $year }}" @selected($vehicleYear === (int) $year)>{{ $year }}</option>
                    @endforeach
                </select>
                <select class="control" name="engine_capacity" id="engine-capacity" @disabled($vehicleMakeId < 1)>
                    <option value="">{{ $labels['all_engines'] }}</option>
                    @foreach($engineCapacities as $engine)
                        <option value="{{ $engine }}" @selected($engineCapacity === $engine)>{{ $engine }}</option>
                    @endforeach
                </select>
                <select class="control" name="availability">
                    <option value="">{{ $labels['all_status'] }}</option>
                    @foreach($statusLabels as $value => $label)
                        <option value="{{ $value }}" @selected($availability === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <button class="button" type="submit">{{ $labels['filter'] }}</button>
            </div>
        </form>
    </section>

    <div class="catalog-toolbar">
        <div class="result-count">{{ number_format($products->total()) }} {{ $labels['results'] }}</div>
        <div class="toolbar-actions">
            <a class="clear-button" href="{{ route('public.products.index') }}">{{ $labels['clear'] }}</a>
            <a class="view-button {{ $viewMode === 'grid' ? 'active' : '' }}" data-view-mode="grid" href="{{ request()->fullUrlWithQuery(['view'=>'grid']) }}">▦ {{ $labels['grid'] }}</a>
            <a class="view-button {{ $viewMode === 'list' ? 'active' : '' }}" data-view-mode="list" href="{{ request()->fullUrlWithQuery(['view'=>'list']) }}">☷ {{ $labels['list'] }}</a>
        </div>
    </div>

    <div class="products-grid view-{{ $viewMode }}">
        @forelse($products as $product)
            @php
                $translation = $product->translation(app()->getLocale()) ?? $product->translation('ar') ?? $product->translations->first();
                $primaryMedia = $product->media->firstWhere('is_primary', true) ?? $product->media->first();
                $vehicle = $product->vehicleVariants->first();
            @endphp
            <article class="card product-card">
                <div class="product-image">
                    @if($primaryMedia?->file_path)
                        <img loading="lazy" src="{{ asset('storage/'.$primaryMedia->file_path) }}" alt="{{ $translation?->name ?? 'ASWARCO' }}">
                    @else
                        ASWARCO
                    @endif
                </div>
                <div class="product-content">
                    <h2 class="product-name">{{ $translation?->name ?? 'ASWARCO' }}</h2>
                    <div class="product-brand">{{ $product->part_brand }}</div>
                    @if($vehicle)
                        <div class="vehicle-line">{{ $labels['compatible'] }}: {{ $vehicle->model?->make?->name }} {{ $vehicle->model?->name }} · {{ $vehicle->engine_capacity }}</div>
                    @endif
                    <span class="status status-{{ $product->availability_status }}">{{ $statusLabels[$product->availability_status] ?? $product->availability_status }}</span>
                    <div class="price-lock login-required">{{ $labels['login'] }}</div>
                    <a class="button" href="{{ route('public.products.show', $product) }}">{{ $labels['details'] }}</a>
                </div>
            </article>
        @empty
            <section class="card empty-card">{{ $labels['empty'] }}</section>
        @endforelse
    </div>

    <div style="margin-top:22px">{{ $products->links() }}</div>
@endsection

@push('scripts')
    @include('components.catalog-interactions', [
        'modelPlaceholder' => $labels['all_models'],
        'yearPlaceholder' => $labels['all_years'],
        'enginePlaceholder' => $labels['all_engines'],
    ])
@endpush