@extends('layouts.app')

@section('title', $product->name.' — '.config('site.brand.name'))
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($product->short_description ?: $product->description), 155))

@section('content')

    <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <nav class="mb-8 text-sm text-brand-ink/50">
            <a href="{{ route('products.index', ['locale' => app()->getLocale()]) }}" class="hover:text-brand-green-800">{{ __('site.nav_products') }}</a>
            <span class="mx-1">/</span>
            <a href="{{ route('products.category', ['locale' => app()->getLocale(), 'category' => $category->slug]) }}" class="hover:text-brand-green-800">{{ $category->name }}</a>
            <span class="mx-1">/</span>
            <span class="text-brand-ink">{{ $product->name }}</span>
        </nav>

        <div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
            {{-- Gallery --}}
            <div data-gallery data-reveal>
                <div class="flex aspect-square items-center justify-center overflow-hidden rounded-3xl bg-brand-green-50">
                    @if ($product->coverImageUrl())
                        <img data-gallery-main src="{{ $product->coverImageUrl() }}" alt="{{ $product->name }}" class="h-full w-full object-cover">
                    @else
                        <div class="flex flex-col items-center gap-3 text-brand-green-800/40">
                            <img src="{{ asset('images/logo-footer.png') }}" alt="" class="h-16 w-auto opacity-40">
                            <span class="text-sm font-semibold uppercase tracking-wide">{{ config('site.brand.product_line') }}</span>
                        </div>
                    @endif
                </div>
                @if (count($product->galleryUrls()) > 1)
                    <div class="mt-4 flex gap-3">
                        @foreach ($product->galleryUrls() as $i => $url)
                            <button type="button" data-gallery-thumb data-full="{{ $url }}"
                                    class="h-20 w-20 overflow-hidden rounded-xl border-2 {{ $i === 0 ? 'ring-2 ring-brand-green-700' : 'border-transparent' }}">
                                <img src="{{ $url }}" alt="" class="h-full w-full object-cover">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Details --}}
            <div data-reveal>
                <a href="{{ route('products.category', ['locale' => app()->getLocale(), 'category' => $category->slug]) }}"
                   class="text-xs font-bold uppercase tracking-wide text-brand-green-700 hover:underline">
                    {{ $category->name }}
                </a>
                <h1 class="mt-2 text-2xl font-semibold text-brand-ink sm:text-3xl sm:font-bold lg:text-4xl">{{ $product->name }}</h1>

                @if ($product->short_description)
                    <p class="mt-4 text-lg text-brand-ink/70">{{ $product->short_description }}</p>
                @endif

                <div class="mt-6 flex flex-wrap items-center gap-4">
                    <span class="text-2xl font-semibold text-brand-green-800 sm:text-3xl sm:font-bold">
                        @if ($product->hasPrice())
                            ₹{{ number_format((float) $product->price, 2) }}
                        @else
                            {{ __('site.product_price_on_request') }}
                        @endif
                    </span>
                    @if ($product->isOnOffer())
                        <span class="text-lg text-brand-ink/40 line-through">₹{{ number_format((float) $product->mrp, 2) }}</span>
                    @endif
                    @if ($product->unit_label)
                        <span class="rounded-full bg-brand-green-50 px-3 py-1 text-sm font-semibold text-brand-green-800">
                            {{ __('site.product_unit_label') }}: {{ $product->unit_label }}
                        </span>
                    @endif
                </div>

                <div class="mt-8 flex flex-wrap gap-4">
                    @if (site_settings()->whatsappUrl())
                        <a href="{{ site_settings()->whatsappUrl() }}?text={{ urlencode($product->name) }}" target="_blank" rel="noopener" class="btn-primary">
                            {{ __('site.btn_whatsapp_us') }}
                        </a>
                    @endif
                    @if (site_settings()->phone)
                        <a href="tel:{{ site_settings()->phone }}" class="btn-secondary">
                            {{ __('site.btn_call_now') }}
                        </a>
                    @endif
                </div>

                @if ($product->description)
                    <div class="mt-10 border-t border-brand-green-100 pt-8">
                        <h2 class="text-lg font-bold text-brand-ink">{{ __('site.nav_about') }}</h2>
                        <p class="mt-3 whitespace-pre-line leading-relaxed text-brand-ink/70">{{ $product->description }}</p>
                    </div>
                @endif
            </div>
        </div>
    </section>

    @if ($related->isNotEmpty())
        <section class="bg-white py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h2 class="text-xl font-semibold text-brand-ink sm:text-2xl sm:font-bold" data-reveal>{{ __('site.product_related_title') }}</h2>
                <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($related as $relatedProduct)
                        <x-product-card :product="$relatedProduct" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

@endsection