@extends('layouts.app')

@section('title', $listing->title . ' - دكان موتورز')
@section('meta_description', Str::limit(strip_tags($listing->description), 150))

@php
    $conditionLabels = ['new' => 'جديدة', 'used' => 'مستعملة'];
    $transmissionLabels = ['automatic' => 'أوتوماتيك', 'manual' => 'مانيوال'];
    $fuelLabels = ['petrol' => 'بنزين', 'diesel' => 'ديزل', 'gas' => 'غاز', 'hybrid' => 'هايبرد', 'electric' => 'كهرباء'];
@endphp

@section('content')
    <div class="max-w-7xl mx-auto px-4 py-6">
        {{-- Breadcrumb --}}
        <nav class="text-sm text-faint mb-4 flex items-center gap-2 flex-wrap">
            <a href="{{ route('home') }}" class="hover:text-accent">الرئيسية</a>
            <span>/</span>
            <a href="{{ route('listings.index') }}" class="hover:text-accent">السيارات</a>
            <span>/</span>
            <a href="{{ route('listings.index', ['make' => $listing->make->slug]) }}" class="hover:text-accent">{{ $listing->make->name }}</a>
            <span>/</span>
            <span class="text-body">{{ $listing->carModel->name }}</span>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Main --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Gallery --}}
                <div x-data="{ active: 0 }" class="bg-surface rounded-xl border border-line overflow-hidden">
                    <div class="aspect-video bg-surface2 relative">
                        @if ($listing->images->isNotEmpty())
                            @foreach ($listing->images as $i => $img)
                                <img x-show="active === {{ $i }}" src="{{ $img->url }}" alt="{{ $listing->title }}"
                                     class="w-full h-full object-cover" @if($i>0) x-cloak @endif>
                            @endforeach
                        @else
                            <div class="w-full h-full flex items-center justify-center text-faint">
                                <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v14l-4-2-4 2-4-2-4 2V5z"/></svg>
                            </div>
                        @endif
                    </div>
                    @if ($listing->images->count() > 1)
                        <div class="flex gap-2 p-3 overflow-x-auto">
                            @foreach ($listing->images as $i => $img)
                                <button @click="active = {{ $i }}"
                                        class="shrink-0 w-20 h-16 rounded-lg overflow-hidden border-2"
                                        :class="active === {{ $i }} ? 'border-brand-400' : 'border-transparent'">
                                    <img src="{{ $img->url }}" class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Specs --}}
                <div class="bg-surface rounded-xl border border-line p-6">
                    <h2 class="text-lg font-bold text-fg mb-4">المواصفات</h2>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6 text-sm">
                        @php
                            $specs = [
                                ['الماركة', $listing->make->name],
                                ['الموديل', $listing->carModel->name],
                                ['سنة الصنع', $listing->year],
                                ['الحالة', $conditionLabels[$listing->condition]],
                            ];
                            if (! is_null($listing->mileage)) $specs[] = ['الكيلومترات', number_format($listing->mileage) . ' كم'];
                            $specs[] = ['ناقل الحركة', $transmissionLabels[$listing->transmission]];
                            $specs[] = ['نوع الوقود', $fuelLabels[$listing->fuel_type]];
                            if ($listing->engine_capacity) $specs[] = ['سعة المحرك', number_format($listing->engine_capacity) . ' سي سي'];
                            if ($listing->color) $specs[] = ['اللون', $listing->color];
                            if ($listing->bodyType) $specs[] = ['نوع الهيكل', $listing->bodyType->name];
                            $specs[] = ['المحافظة', $listing->governorate->name];
                        @endphp
                        @foreach ($specs as [$label, $value])
                            <div>
                                <div class="text-faint">{{ $label }}</div>
                                <div class="font-semibold text-body">{{ $value }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Description --}}
                @if ($listing->description)
                    <div class="bg-surface rounded-xl border border-line p-6">
                        <h2 class="text-lg font-bold text-fg mb-3">الوصف</h2>
                        <p class="text-body leading-relaxed whitespace-pre-line">{{ $listing->description }}</p>
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-surface rounded-xl border border-line p-6 sticky top-20">
                    <h1 class="text-xl font-extrabold text-fg leading-snug">{{ $listing->title }}</h1>
                    <div class="mt-3 text-3xl font-extrabold text-accent">
                        {{ number_format($listing->price) }} <span class="text-base font-semibold text-muted">جنيه</span>
                    </div>

                    <div class="mt-4 flex items-center gap-2 text-sm text-faint">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        {{ $listing->governorate->name }}
                        <span class="mx-1">·</span>
                        <span>{{ $listing->views }} مشاهدة</span>
                    </div>

                    <div class="mt-6 pt-6 border-t border-line" x-data="{ show: false }">
                        <div class="text-sm text-faint mb-1">البائع</div>
                        <div class="flex items-center justify-between gap-2">
                            <span class="font-bold text-fg">{{ $listing->seller_name ?? $listing->user->name }}</span>
                            <a href="{{ route('sellers.show', $listing->user) }}" class="text-xs font-semibold text-accent hover:underline shrink-0">عرض كل إعلاناته</a>
                        </div>

                        <button x-show="!show" @click="show = true"
                                class="mt-4 w-full rounded-lg bg-green-600 px-4 py-3 text-sm font-bold text-white hover:bg-green-500 transition inline-flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24 11.36 11.36 0 003.57.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.57 1 1 0 01-.24 1.02l-2.2 2.2z"/></svg>
                            إظهار رقم الهاتف
                        </button>
                        <a x-show="show" x-cloak href="tel:{{ $listing->phone }}"
                           class="mt-4 w-full rounded-lg bg-green-600 px-4 py-3 text-lg font-extrabold text-white hover:bg-green-500 transition inline-flex items-center justify-center gap-2" dir="ltr">
                            {{ $listing->phone }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Similar --}}
        @if ($similar->isNotEmpty())
            <section class="mt-12">
                <h2 class="text-xl font-extrabold text-fg mb-6">سيارات مشابهة</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                    @foreach ($similar as $s)
                        <x-listing-card :listing="$s" />
                    @endforeach
                </div>
            </section>
        @endif
    </div>
@endsection