@extends('digitalmenu::layouts.public')

@section('title', ($product->name ?? 'Product') . ' — ' . ($shop->name ?? 'Shop'))

@section('header-left')
<a href="{{ url('/digital-menu/shop/' . $qr) }}"
   class="text-slate-600 hover:opacity-70 active:scale-95 transition-all flex items-center justify-center p-1">
    <span class="material-symbols-outlined text-2xl">arrow_back</span>
</a>
@endsection

@section('content')
<main class="flex-1 w-full max-w-5xl mx-auto px-4 lg:px-8 py-8 lg:py-14">

    <!-- Product Layout -->
    <div class="flex flex-col lg:flex-row gap-10 lg:gap-16 mb-20">

        <!-- Image -->
        <div class="w-full lg:w-1/2">
            <div class="relative bg-surface-container-low rounded-xl overflow-hidden aspect-[3/4]">
                <img id="main-image"
                     src="{{ $product->picture_url }}"
                     alt="{{ $product->name }}"
                     onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                     class="w-full h-full object-cover object-center"/>
                @if($product->is_new_arrived)
                    <div class="absolute top-3 left-3 bg-primary text-on-primary text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">New</div>
                @elseif($product->is_discount)
                    <div class="absolute top-3 left-3 bg-primary text-on-primary text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">Sale</div>
                @endif
            </div>
        </div>

        <!-- Info -->
        <div class="w-full lg:w-1/2 flex flex-col lg:pt-6">

            <!-- Breadcrumb -->
            <nav class="text-xs uppercase tracking-widest text-slate-400 mb-5 flex items-center gap-1.5">
                <a href="{{ url('/digital-menu/shop/' . $qr) }}" class="hover:text-slate-700 transition-colors">Home</a>
                <span>/</span>
                <span class="text-slate-500">{{ $categoryName ?? 'Product' }}</span>
            </nav>

            <!-- Name & Price -->
            <h1 class="font-serif text-3xl lg:text-4xl text-slate-900 leading-tight mb-3">{{ $product->name }}</h1>

            <div class="flex items-baseline gap-3 mb-6">
                @if($product->is_discount)
                    <span class="text-2xl font-bold text-brand">{{ $currencySymbol }}{{ number_format($product->getDiscountPrice($product->unit_price), 2) }}</span>
                    <span class="text-base text-slate-400 line-through">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                @else
                    <span class="text-2xl font-bold text-slate-800">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                @endif
            </div>

            <!-- Description -->
            @if(!empty($product->short_description) || !empty($product->description))
            <div class="text-slate-600 leading-relaxed mb-8 font-light text-base">
                {!! nl2br(e($product->description ?: $product->short_description)) !!}
            </div>
            @endif

            <!-- SKU / Category meta -->
            <div class="flex flex-col gap-2 text-sm text-slate-400 border-t border-slate-100 pt-6">
                @if(!empty($product->category))
                <div class="flex gap-2">
                    <span class="font-semibold text-slate-500 uppercase tracking-wider text-xs">Category</span>
                    <span>{{ $categoryName }}</span>
                </div>
                @endif
                @if(!empty($product->sku))
                <div class="flex gap-2">
                    <span class="font-semibold text-slate-500 uppercase tracking-wider text-xs">SKU</span>
                    <span>{{ $product->sku }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($related->count() > 0)
    <div class="border-t border-slate-100 pt-14">
        <h2 class="font-serif text-2xl lg:text-3xl text-slate-900 mb-8 text-center">You May Also Like</h2>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($related as $item)
            <a href="{{ route('digitalmenu.public.product', ['qr' => $qr, 'id' => $item->id]) }}"
               class="group flex flex-col">
                <div class="aspect-[3/4] relative bg-surface-variant overflow-hidden rounded-lg mb-3">
                    <img src="{{ $item->picture_url }}"
                         alt="{{ $item->name }}"
                         onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
                    @if($item->is_new_arrived)
                        <div class="absolute top-2 left-2 bg-primary text-on-primary text-[10px] font-bold uppercase px-2 py-0.5 rounded-full">New</div>
                    @elseif($item->is_discount)
                        <div class="absolute top-2 left-2 bg-primary text-on-primary text-[10px] font-bold uppercase px-2 py-0.5 rounded-full">Sale</div>
                    @endif
                </div>
                <h4 class="text-sm font-bold text-slate-900 truncate group-hover:text-brand transition-colors">{{ $item->name }}</h4>
                @if($item->is_discount)
                    <div class="flex gap-2 items-center mt-0.5">
                        <span class="text-sm text-brand font-medium">{{ $currencySymbol }}{{ number_format($item->getDiscountPrice($item->unit_price), 2) }}</span>
                        <span class="text-xs text-slate-400 line-through">{{ $currencySymbol }}{{ number_format($item->unit_price, 2) }}</span>
                    </div>
                @else
                    <p class="text-sm text-slate-500 mt-0.5">{{ $currencySymbol }}{{ number_format($item->unit_price, 2) }}</p>
                @endif
            </a>
            @endforeach
        </div>
    </div>
    @endif

</main>
@endsection