@extends('layouts.app')

@section('title', ($car->title ?: $car->make . ' ' . $car->model . ' ' . $car->year) . ' — Точка')

@php
    $fuelLabels  = ['petrol'=>'Бензин','diesel'=>'Дизель','hybrid'=>'Гибрид','electric'=>'Электро','gas'=>'Газ','other'=>'Другое'];
    $transLabels = ['automatic'=>'Автомат','manual'=>'Механика','robot'=>'Робот','variator'=>'Вариатор','electric'=>'Электро'];
    $driveLabels = ['FWD'=>'Передний','RWD'=>'Задний','AWD'=>'Полный (AWD)','4WD'=>'Полный (4WD)'];
    $countryFlags= ['Германия'=>'🇩🇪','Япония'=>'🇯🇵','Корея'=>'🇰🇷','США'=>'🇺🇸','Китай'=>'🇨🇳','ОАЭ'=>'🇦🇪','Грузия'=>'🇬🇪','Великобритания'=>'🇬🇧','Франция'=>'🇫🇷','Италия'=>'🇮🇹'];

    $carName = $car->title ?: ($car->make . ' ' . $car->model . ' ' . $car->year);

    // Галерея
    $photos = [];
    if ($car->photo_main) $photos[] = asset('storage/' . $car->photo_main);
    if ($car->photos_gallery) {
        foreach ((array)$car->photos_gallery as $p) $photos[] = asset('storage/' . $p);
    }

    $telegram = $siteSettings['telegram'] ?? '';

    // OG: описание для страницы автомобиля
    $carPriceStr = $car->price_rub
        ? number_format($car->price_rub, 0, '.', ' ') . ' ₽'
        : ($car->price_usd ? number_format($car->price_usd, 0, '.', ' ') . ' $' : '');
    $ogCarDesc = trim(implode('. ', array_filter([
        $carName,
        $car->year ? 'Год выпуска: ' . $car->year : '',
        $car->mileage_km !== null ? 'Пробег: ' . number_format($car->mileage_km, 0, '.', ' ') . ' км' : '',
        $carPriceStr ? 'Цена: ' . $carPriceStr : '',
        $car->country_origin ? 'Из ' . $car->country_origin : '',
    ])));
@endphp

{{-- OG-теги специфичные для этой страницы — переопределяют дефолты из настроек --}}
@section('og_type', 'product')
@section('og_title', $carName . ' — Точка')
@section('og_description', $ogCarDesc)
@if($car->photo_main)
@section('og_image', asset('storage/' . $car->photo_main))
@endif

@section('content')

{{-- Хлебные крошки --}}
<section class="page-hdr" style="padding:40px 0 32px">
    <div class="container">
        <nav class="breadcrumb">
            <a href="{{ route('home') }}">Главная</a>
            <span>/</span>
            <a href="{{ route('catalog') }}">Каталог</a>
            <span>/</span>
            <span>{{ $carName }}</span>
        </nav>
    </div>
</section>

<section class="section sec-alt" style="padding-top:24px">
    <div class="container">

        <a href="{{ route('catalog') }}"
           style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:28px;transition:color var(--tr);letter-spacing:.03em"
           onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--muted)'">
            ← Назад в каталог
        </a>

        <div class="car-detail-grid reveal">

            {{-- ═══ ЛЕВАЯ КОЛОНКА: Галерея + Вкладки ═══ --}}
            <div>
                @include('pages.partials._car_gallery')
                @include('pages.partials._car_tabs')
            </div>

            {{-- ═══ ПРАВАЯ КОЛОНКА: Инфопанель ═══ --}}
            <div>
                @include('pages.partials._car_info_panel')
            </div>
        </div>

        {{-- Похожие автомобили --}}
        @if($similar->isNotEmpty())
        <div style="margin-top:60px">
            <div class="sh reveal" style="margin-bottom:28px">
                <div class="sh-label">Похожие авто</div>
                <h2 style="font-size:clamp(28px,3.5vw,40px)">ВАМ ТАКЖЕ ПОНРАВИТСЯ</h2>
            </div>
            <div class="stagger" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px">
                @foreach($similar as $sc)
                    @include('pages.partials._car_card', ['car' => $sc, 'fuelLabels' => $fuelLabels, 'countryFlags' => $countryFlags])
                @endforeach
            </div>
        </div>
        @endif

    </div>
</section>

@endsection

@push('scripts')
<script>
function switchTab(id, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tp-' + id).classList.add('active');
}
function setThumb(i, src) {
    document.getElementById('mainImg').src = src;
    document.querySelectorAll('.thumb').forEach((t, j) => t.classList.toggle('active', i === j));
}
</script>
@endpush