@extends('layouts.customer')

@php
    $labels = match(app()->getLocale()) {
        'en' => ['title'=>'Products','search'=>'Search by product, code, 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'=>'View details','add'=>'Add to cart','base'=>'Base price','your_price'=>'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'=>'Productos','search'=>'Buscar producto, código, 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'=>'Ver detalles','add'=>'Añadir al carrito','base'=>'Precio base','your_price'=>'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'=>'Ürünler','search'=>'Ürün, kod, 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ı görüntüle','add'=>'Sepete ekle','base'=>'Temel fiyat','your_price'=>'Fiyatınız','empty'=>'Eşleşen ürün bulunamadı.','grid'=>'Izgara','list'=>'Satırlar','clear'=>'Filtreleri temizle','results'=>'ürün bulundu','compatible'=>'Uyumlu araç','suggestions'=>'Arama önerileri'],
        'it' => ['title'=>'Prodotti','search'=>'Cerca prodotto, codice, 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'=>'Vedi dettagli','add'=>'Aggiungi al carrello','base'=>'Prezzo base','your_price'=>'Il tuo prezzo','empty'=>'Nessun prodotto corrispondente.','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'=>'عرض التفاصيل','add'=>'إضافة إلى السلة','base'=>'السعر الأساسي','your_price'=>'سعرك بعد الخصم','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-code { color:var(--muted); font-size:13px; }
    .product-name { margin:7px 0; 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-size:13px; font-weight:700; }
    .status-available { color:#fff; background:#146c35; }
    .status-on_request { color:#fff; background:#b45309; }
    .status-unavailable { color:#fff; background:#b42318; }
    .prices { padding:13px 0; margin:13px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .base-price { color:var(--muted); font-size:13px; text-decoration:line-through; }
    .customer-price { color:var(--primary); font-size:18px; font-weight:800; }
    .product-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .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:118px minmax(0,1fr); min-height:118px; }
    .view-list .product-image { width:118px; height:118px; min-height:118px; }
    .view-list .product-content { display:grid; grid-template-columns:minmax(180px,1fr) minmax(200px,.65fr) auto; align-items:center; gap:3px 14px; padding:10px 13px; }
    .view-list .product-name { margin:2px 0; font-size:18px; }
    .view-list .product-brand,.view-list .vehicle-line { margin-bottom:3px; }
    .view-list .product-code,.view-list .product-name,.view-list .product-brand,.view-list .vehicle-line,.view-list .status { grid-column:1; }
    .view-list .prices { grid-column:2; grid-row:1 / span 5; margin:0; }
    .view-list .product-actions { grid-column:3; grid-row:1 / span 5; flex-direction:column; align-items:stretch; }
    .empty-card { grid-column:1/-1; }
    @media(max-width:1250px){.products-grid:not(.view-list){grid-template-columns:repeat(3,1fr)}}
    @media(max-width:1050px){.products-grid:not(.view-list){grid-template-columns:repeat(2,1fr)}.filter-row{grid-template-columns:repeat(2,1fr)}.view-list .product-content{grid-template-columns:1fr 1fr}.view-list .product-actions{grid-column:1/-1;grid-row:auto;flex-direction:row}}
    @media(max-width:760px){.search-row,.filter-row{grid-template-columns:1fr}.view-list .product-card{grid-template-columns:88px minmax(0,1fr)}.view-list .product-image{width:88px;height:100%;min-height:120px}.view-list .product-content{display:block}.view-list .prices{margin:8px 0}.view-list .product-actions{margin-top:7px}}
    @media(max-width:500px){.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('customer.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('customer.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();
                $baseJod = $pricingService->baseAmount($product, 'JOD');
                $baseUsd = $pricingService->baseAmount($product, 'USD');
                $customerJod = $baseJod === null ? null : $pricingService->discountedAmount($baseJod, auth()->user());
                $customerUsd = $baseUsd === null ? null : $pricingService->discountedAmount($baseUsd, auth()->user());
                $hasDiscount = $pricingService->discountPercentage(auth()->user()) > 0;
            @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 ?? $product->internal_code }}">
                    @else
                        ASWARCO
                    @endif
                </div>
                <div class="product-content">
                    <div class="product-code">{{ $product->internal_code }}</div>
                    <h2 class="product-name">{{ $translation?->name ?? $product->internal_code }}</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="prices">
                        @if($hasDiscount && $baseJod !== null)
                            <div class="base-price">{{ $labels['base'] }}: {{ number_format($baseJod,3) }} JOD @if($baseUsd !== null) / {{ number_format($baseUsd,3) }} USD @endif</div>
                        @endif
                        @if($customerJod !== null)
                            <div class="customer-price">{{ $labels['your_price'] }}: {{ number_format($customerJod,3) }} JOD</div>
                            @if($customerUsd !== null)<div class="customer-price">{{ number_format($customerUsd,3) }} USD</div>@endif
                        @endif
                    </div>
                    <div class="product-actions">
                        <a class="button" href="{{ route('customer.products.show', $product) }}">{{ $labels['details'] }}</a>
                        @if($product->availability_status !== \App\Models\Product::UNAVAILABLE)
                            <form method="POST" action="{{ route('customer.cart.store', $product) }}">
                                @csrf
                                <input type="hidden" name="quantity" value="1">
                                <button class="button" type="submit">{{ $labels['add'] }}</button>
                            </form>
                        @endif
                    </div>
                </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