@extends('front.layout.master')
@section('title', $product->product_name . ' | ')

@section('meta_tags')
    <link rel="canonical" href="{{ url()->full() }}" />
    <meta name="robots" content="all">
    <meta property="og:title" content="{{ $product->product_name }}" />
    <meta name="keywords" content="{{ $product->product_tags ?? $product->tags ?? '' }}">
    <meta property="og:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($product->product_detail), 160) }}" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="{{ url()->full() }}" />
    @if($product->thumbnail && file_exists(public_path('images/simple_products/' . $product->thumbnail)))
        <meta property="og:image" content="{{ url('images/simple_products/' . $product->thumbnail) }}" />
    @endif
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ url('css/lightbox.min.css') }}">
@endsection

@section('body')

@php
    $lang = session()->get('changed_language') ?? 'en';
    $isAuth = auth()->check();

    // Price + discount.
    // Schema note: admin enters `actual_selling_price` and `actual_offer_price` (pre-tax).
    // `price` and `offer_price` are the same values WITH tax computed and stored, which is what
    // the customer should see. Treat the offer as real ONLY when admin actually set a non-zero
    // `actual_offer_price` AND the resulting `offer_price` is strictly less than `price`. Without
    // this check the page can show a phantom "offer" because tax is sometimes baked into
    // `offer_price` even when the admin meant "no offer".
    $basePrice    = (float) ($product->price ?? 0);
    $proOffer     = (float) ($product->offer_price ?? 0);
    $actualOffer  = (float) ($product->actual_offer_price ?? 0);
    $hasOffer     = $actualOffer > 0 && $proOffer > 0 && $proOffer < $basePrice;
    $variantPrice = $hasOffer ? $proOffer : $basePrice;
    $variantCompare = $hasOffer ? $basePrice : null;
    $disPct = ($variantCompare && $variantPrice > 0) ? round((1 - $variantPrice / $variantCompare) * 100) : 0;

    // Reviews aggregate (uses real review rows like the variant page)
    $allReviews = $product->reviews()->where('status', '1')->get();
    $review_count = $allReviews->count();

    $sub_total = 0; $denom = 0;
    foreach ($allReviews as $r) {
        $sub_total += ($r->qty * 5) + ($r->price * 5) + ($r->value * 5);
    }
    $denom = ($review_count * 3) * 5;
    $overallrating = $denom > 0 ? round(($sub_total / $denom) * 5, 1) : 0;

    // Per-product policy facts
    $hasFreeShip = $product->free_shipping == 1;
    $hasReturn   = $product->return_avbl == 1;
    $hasCancel   = $product->cancel_avbl == 1;
    $hasCOD      = $product->cod_avbl == 1;
    $returnDays  = optional(\App\Genral::first())->return_in_days ?? 30;
    // Simple products don't carry a warranty column in this schema; surface only when something is set.
    $warrantyLabel = trim(implode(' ', array_filter([
        $product->w_d ?? '',
        $product->w_my ?? '',
        $product->w_type ?? '',
    ])));
    $hasWarranty = $warrantyLabel !== '';

    $tiles = [];
    if ($hasFreeShip) {
        $tiles[] = ['label' => __('Free Delivery'), 'sub' => __('On this product'),
            'svg' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>',
            'tone' => 'emerald'];
    }
    if ($hasReturn) {
        $tiles[] = ['label' => __('Easy Returns'), 'sub' => $returnDays . ' ' . __('day policy'),
            'svg' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>',
            'tone' => 'amber'];
    }
    if ($hasWarranty) {
        $tiles[] = ['label' => __('Warranty'), 'sub' => $warrantyLabel,
            'svg' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></svg>',
            'tone' => 'brand'];
    }
    if ($hasCOD) {
        $tiles[] = ['label' => __('Cash on Delivery'), 'sub' => __('Available'),
            'svg' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 10h20"/><path d="M6 14h4"/></svg>',
            'tone' => 'sky'];
    }
    if ($hasCancel) {
        $tiles[] = ['label' => __('Cancellable'), 'sub' => __('Order can be cancelled'),
            'svg' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg>',
            'tone' => 'rose'];
    }
    $toneMap = [
        'emerald' => ['icon' => 'text-emerald-600', 'bg' => 'bg-emerald-50'],
        'amber'   => ['icon' => 'text-amber-600',   'bg' => 'bg-amber-50'],
        'brand'   => ['icon' => 'text-brand-600',   'bg' => 'bg-brand-50'],
        'sky'     => ['icon' => 'text-sky-600',     'bg' => 'bg-sky-50'],
        'rose'    => ['icon' => 'text-rose-500',    'bg' => 'bg-rose-50'],
    ];

    // Wishlist + compare state
    $detailInWish = false;
    if ($isAuth) {
        $detailInWish = \App\Wishlist::where('user_id', auth()->id())->where('simple_pro_id', $product->id)->exists();
    }
    $detailInCompare = false;
    foreach ((array) session('comparison', []) as $cmp) {
        if (($cmp['proid'] ?? null) == $product->id && (($cmp['type'] ?? 'variant') === 'simple')) {
            $detailInCompare = true; break;
        }
    }

    // Gallery URLs
    $imgs = [];
    if ($product->thumbnail && file_exists(public_path('images/simple_products/' . $product->thumbnail))) {
        $imgs[] = url('images/simple_products/' . $product->thumbnail);
    }
    foreach ($product->productGallery as $g) {
        if (!empty($g->image) && file_exists(public_path('images/simple_products/gallery/' . $g->image))) {
            $imgs[] = url('images/simple_products/gallery/' . $g->image);
        }
    }
    $imgs = array_values(array_unique($imgs));
    $mainSrc = $imgs[0] ?? url('images/no-image.png');

    // Sale tag — guard against admin-entered black-on-black or invalid hexes.
    $saleTag = is_array($product->sale_tag ?? null) ? ($product->sale_tag[$lang] ?? (array_values($product->sale_tag)[0] ?? null)) : ($product->sale_tag ?? null);
    $saleTag = is_string($saleTag) ? trim($saleTag) : $saleTag;
    $saleColor = $product->sale_tag_color ?: '#3b6df0';
    $saleTextColor = $product->sale_tag_text_color ?: '#ffffff';
    $_rgb = function ($hex) {
        $hex = ltrim((string) $hex, '#');
        if (strlen($hex) === 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
        if (strlen($hex) !== 6) return null;
        return [hexdec(substr($hex,0,2)), hexdec(substr($hex,2,2)), hexdec(substr($hex,4,2))];
    };
    $_luma = function ($rgb) { return $rgb ? (0.299*$rgb[0] + 0.587*$rgb[1] + 0.114*$rgb[2]) / 255 : 1; };
    $_bg = $_rgb($saleColor); $_tx = $_rgb($saleTextColor);
    if ($_bg && $_tx && abs($_luma($_bg) - $_luma($_tx)) < 0.35) {
        $saleTextColor = $_luma($_bg) > 0.6 ? '#0a1430' : '#ffffff';
    }

    // Real rating distribution for the bars
    $ratingBuckets = [5=>0, 4=>0, 3=>0, 2=>0, 1=>0];
    foreach ($allReviews as $rv) {
        $avg = (int) round((($rv->qty + $rv->price + $rv->value) / 3));
        $avg = max(1, min(5, $avg));
        $ratingBuckets[$avg]++;
    }
    $ratingTotal = array_sum($ratingBuckets);
    $ratingPct = [];
    foreach ($ratingBuckets as $k => $v) {
        $ratingPct[$k] = $ratingTotal > 0 ? round($v / $ratingTotal * 100) : 0;
    }
@endphp

{{-- Breadcrumbs --}}
<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-4 pb-2">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 flex-wrap leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <a href="{{ url('shop') }}" class="hover:text-brand-600">{{ __('Shop') }}</a>
        @if($product->category)
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
            <a href="javascript:void(0)" onclick="changeCategory({{ $product->category->id }}, 'main')" class="hover:text-brand-600">{{ $product->category->title }}</a>
        @endif
        @if($product->subcategory)
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
            <span class="hover:text-brand-600">{{ $product->subcategory->title }}</span>
        @endif
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium truncate max-w-[400px]">{{ $product->product_name }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-2 grid lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] gap-6">

    {{-- LEFT: Gallery card --}}
    <div class="lg:sticky lg:top-28 lg:self-start">
        <div class="bg-white rounded-2xl shadow-card p-4 lg:p-6">
            <div class="grid grid-cols-[72px_minmax(0,1fr)] gap-4">
                <div id="pdp-thumbs" class="flex flex-col gap-2 max-h-[480px] overflow-y-auto no-scrollbar">
                    @foreach($imgs as $i => $imgsrc)
                        <button type="button" onclick="setPdpImg({{ $i }}, '{{ $imgsrc }}')" class="aspect-square rounded-lg overflow-hidden border-2 {{ $i === 0 ? 'border-brand-500' : 'border-transparent hover:border-slate-300' }} bg-slate-50 pdp-thumb-btn shrink-0">
                            <img src="{{ $imgsrc }}" alt="" class="w-full h-full object-cover">
                        </button>
                    @endforeach
                </div>
                <div class="relative">
                    <div class="aspect-square rounded-xl overflow-hidden bg-slate-50 grid place-items-center group">
                        <a href="{{ $mainSrc }}" data-lightbox="pdp" data-title="{{ $product->product_name }}" class="block w-full h-full">
                            <img id="pdp-main-img" src="{{ $mainSrc }}" alt="{{ $product->product_name }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                        </a>
                        <button type="button" onclick="toggleWish('simple', {{ $product->id }}, this)" class="absolute top-3 right-3 w-10 h-10 grid place-items-center rounded-full shadow-card transition-colors {{ $detailInWish ? 'bg-rose-50 text-rose-500' : 'bg-white text-slate-600 hover:bg-rose-50 hover:text-rose-500' }}" aria-label="Wishlist" title="{{ $detailInWish ? __('In Wishlist') : __('Wishlist') }}">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="{{ $detailInWish ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                        </button>
                        <button type="button" onclick="addToCompare('simple', {{ $product->id }}, this)" class="cmp-btn absolute top-3 right-16 w-10 h-10 grid place-items-center rounded-full shadow-card transition-colors {{ $detailInCompare ? 'bg-brand-50 text-brand-600' : 'bg-white text-slate-600 hover:bg-brand-50 hover:text-brand-600' }}" aria-label="Compare" title="{{ $detailInCompare ? __('In compare list') : __('Add to Compare') }}">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="{{ $detailInCompare ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.6"><path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/><path d="M12 6v12"/></svg>
                        </button>
                        @if($disPct > 0)
                            <span class="absolute top-3 left-3 bg-emerald-600 text-white text-[12px] font-bold px-2.5 py-1 rounded">−{{ $disPct }}%</span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Action buttons --}}
            <div class="mt-5 grid grid-cols-2 gap-3">
                @php $cartAction = ($product->type ?? null) == 'ex_product' ? $product->external_product_link : route('add.cart.simple', ['pro_id' => $product->id, 'price' => $product->price, 'offerprice' => $product->offer_price ?? 0]); @endphp
                @if(($product->type ?? null) == 'ex_product')
                    <a href="{{ $product->external_product_link }}" target="_blank" rel="noopener" class="col-span-2 bg-saffron hover:bg-yellow-400 text-deep font-bold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-sm">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3h7v7M10 14 21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
                        {{ __('Buy Now') }}
                    </a>
                @elseif($product->stock > 0)
                    <form method="POST" action="{{ $cartAction }}" class="addSimpleCardFrom{{ $product->id }}">
                        @csrf
                        <input type="hidden" name="qty" value="1" class="qty-section">
                        <button type="button" onclick="addSimpleProCard({{ $product->id }})" class="w-full bg-saffron hover:bg-yellow-400 text-deep font-bold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-sm">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
                            {{ __('Add to Cart') }}
                        </button>
                    </form>
                    @if($isAuth)
                        <button type="submit" form="pdp-buy-form" class="bg-deep hover:bg-deep/90 text-white font-bold py-3.5 rounded-xl">{{ __('Buy Now') }}</button>
                    @else
                        <button type="button" data-sh-modal-open="loginModal" class="bg-deep hover:bg-deep/90 text-white font-bold py-3.5 rounded-xl">{{ __('Buy Now') }}</button>
                    @endif
                    <form id="pdp-buy-form" action="{{ $cartAction }}" method="POST" class="hidden">@csrf<input type="hidden" name="qty" value="1"></form>
                @else
                    <button disabled class="col-span-2 bg-slate-200 text-slate-400 font-bold py-3.5 rounded-xl">{{ __('Out of Stock') }}</button>
                @endif
            </div>

            {{-- Trust badges --}}
            @if(count($tiles))
            <div class="mt-3 grid grid-cols-2 sm:grid-cols-{{ min(4, max(2, count($tiles))) }} gap-2">
                @foreach($tiles as $tile)
                    <div class="bg-white rounded-xl shadow-card border border-slate-100 px-2.5 py-3 flex items-center gap-2.5 hover:border-slate-200 transition-colors" title="{{ $tile['sub'] }}">
                        <span class="w-9 h-9 shrink-0 rounded-lg grid place-items-center {{ $toneMap[$tile['tone']]['bg'] }} {{ $toneMap[$tile['tone']]['icon'] }}">{!! $tile['svg'] !!}</span>
                        <div class="min-w-0 leading-tight">
                            <div class="text-[12px] font-bold text-deep truncate">{{ $tile['label'] }}</div>
                            <div class="text-[10.5px] text-slate-500 truncate">{{ $tile['sub'] }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    {{-- RIGHT: Info column --}}
    <div class="space-y-5">

        {{-- Title block --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            @if($product->store)
                <div class="flex items-center gap-2 text-[12px] text-slate-500 mb-1.5">
                    <span class="uppercase tracking-wider">{{ __('Sold by') }}</span>
                    <a href="{{ url('viewstore/' . $product->store->id) }}" class="font-semibold text-brand-600 hover:underline">{{ $product->store->name }}</a>
                </div>
            @endif

            <h1 class="font-display font-extrabold text-2xl lg:text-3xl leading-tight">{{ $product->product_name }}</h1>

            <div class="flex items-center gap-3 mt-3 text-[13px] flex-wrap">
                @if($overallrating > 0)
                    <div class="flex items-center gap-1 bg-emerald-600 text-white px-2 py-0.5 rounded font-bold tabular">
                        <span>{{ number_format($overallrating, 1) }}</span>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                    </div>
                @endif
                <span class="text-slate-600 font-medium">{{ $review_count }} {{ __('Reviews') }}</span>
                <span class="text-slate-300">|</span>
                @if($product->stock > 0)
                    <span class="text-emerald-600 font-bold flex items-center gap-1">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m4 12 5 5L20 7"/></svg>
                        {{ __('In Stock') }}
                    </span>
                    @if($product->stock <= 10)<span class="text-amber-600 font-semibold">{{ __('Only :n left', ['n' => $product->stock]) }}</span>@endif
                @else
                    <span class="text-rose-600 font-bold">{{ __('Out of Stock') }}</span>
                @endif
            </div>

            @if(!empty($saleTag))
                <div class="mt-3"><span class="inline-block px-2 py-0.5 rounded text-[11px] font-bold uppercase tracking-wider" style="background: {{ $saleColor }}; color: {{ $saleTextColor }}">{{ $saleTag }}</span></div>
            @endif
        </div>

        {{-- Price block --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            @if($disPct > 0)
                <div class="flex items-center gap-2 text-[12px] text-emerald-600 font-bold mb-2">
                    <span class="bg-emerald-600 text-white px-2 py-0.5 rounded text-[10px] uppercase tracking-wider">{{ __('Special price') }}</span>
                    {{ __('Limited time deal') }}
                </div>
            @endif
            <div class="flex items-baseline gap-3 flex-wrap">
                <span class="font-display font-extrabold text-3xl lg:text-[40px] tabular leading-none">{!! price_format($variantPrice * $conversion_rate) !!}</span>
                @if($variantCompare)
                    <span class="text-slate-400 line-through text-xl tabular">{!! price_format($variantCompare * $conversion_rate) !!}</span>
                    <span class="text-emerald-600 font-extrabold text-lg">{{ $disPct }}% {{ __('off') }}</span>
                @endif
            </div>
            <p class="text-[12px] text-slate-500 mt-1.5">{{ __('Inclusive of all taxes') }}</p>
            @if(($product->pre_order ?? 0) == 1)
                <div class="mt-3 flex items-center gap-2 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="text-amber-600 shrink-0"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                    <div class="text-[12px] leading-tight">
                        <div class="font-semibold text-amber-700">{{ __('Pre-order') }}</div>
                        @if(($product->preorder_type ?? '') === 'partial' && !empty($product->partial_payment_per))
                            <div class="text-amber-700/85">{{ __('Pay :n% now to reserve', ['n' => $product->partial_payment_per]) }}@if(!empty($product->product_avbl_date)) · {{ __('Available') }} {{ \Illuminate\Support\Carbon::parse($product->product_avbl_date)->format('d M Y') }} @endif</div>
                        @elseif(!empty($product->product_avbl_date))
                            <div class="text-amber-700/85">{{ __('Available') }} {{ \Illuminate\Support\Carbon::parse($product->product_avbl_date)->format('d M Y') }}</div>
                        @endif
                    </div>
                </div>
            @endif
        </div>

        {{-- Quantity --}}
        @if($product->stock > 0 && ($product->type ?? null) != 'ex_product')
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            <div class="flex items-center gap-4 flex-wrap">
                <div class="text-[14px] font-bold">{{ __('Quantity') }}</div>
                <div class="flex items-center border-2 border-slate-200 rounded-lg quantity">
                    <button type="button" onclick="(function(i){var n=Math.max(1,(parseInt(i.value,10)||1)-1);i.value=n;i.dispatchEvent(new Event('change',{bubbles:true}));})(this.nextElementSibling)" class="w-9 h-10 grid place-items-center hover:bg-slate-100 text-lg font-bold">−</button>
                    <input id="pdpQty" type="number" min="1" max="{{ $product->max_order_qty ?: $product->stock }}" value="1" class="qty-section w-12 text-center tabular font-bold border-0 outline-none py-2">
                    <button type="button" onclick="(function(i){var max=parseInt(i.getAttribute('max'),10)||100;var n=Math.min(max,(parseInt(i.value,10)||1)+1);i.value=n;i.dispatchEvent(new Event('change',{bubbles:true}));})(this.previousElementSibling)" class="w-9 h-10 grid place-items-center hover:bg-slate-100 text-lg font-bold">+</button>
                </div>
                @if($product->stock < 10 && $product->stock > 0)
                    <span class="text-[12px] text-slate-500">{{ __('Only') }} <span class="font-semibold text-rose-500">{{ $product->stock }} {{ __('left') }}</span> {{ __('in stock') }}</span>
                @endif
            </div>
        </div>
        @endif

        {{-- Delivery / Seller --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            <h3 class="font-display font-extrabold text-lg mb-4">{{ __('Delivery & Seller') }}</h3>
            @if(count($tiles))
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ min(3, count($tiles)) }} gap-3">
                    @foreach($tiles as $tile)
                        <div class="border border-slate-200 rounded-xl p-3.5 flex items-start gap-3 hover:border-slate-300 hover:shadow-sm transition-all">
                            <span class="w-10 h-10 shrink-0 rounded-lg grid place-items-center {{ $toneMap[$tile['tone']]['bg'] }} {{ $toneMap[$tile['tone']]['icon'] }}">{!! $tile['svg'] !!}</span>
                            <div class="min-w-0 leading-snug">
                                <div class="text-[13px] font-bold text-deep">{{ $tile['label'] }}</div>
                                <div class="text-[12px] text-slate-500 mt-0.5">{{ $tile['sub'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-[13px] text-slate-500">{{ __('Standard shipping rates apply.') }}</p>
            @endif

            @if(isset($product->store) && $product->store)
            @php
                $sLogoFile = $product->store->store_logo ?? null;
                $sLogoUrl = $sLogoFile && file_exists(public_path('images/store/logo/' . $sLogoFile))
                    ? url('images/store/logo/' . $sLogoFile)
                    : null;
            @endphp
            <div class="mt-5 pt-5 border-t border-slate-100 grid sm:grid-cols-[auto_1fr_auto] gap-3 items-center">
                <div class="w-12 h-12 bg-brand-50 rounded-lg grid place-items-center overflow-hidden font-display font-extrabold text-brand-600 text-lg">
                    @if($sLogoUrl)
                        <img src="{{ $sLogoUrl }}" alt="{{ $product->store->name }}" class="w-full h-full object-contain p-1">
                    @else
                        {{ strtoupper(substr($product->store->name ?? 'S', 0, 2)) }}
                    @endif
                </div>
                <div>
                    <div class="text-[13px] font-bold">{{ $product->store->name ?? __('Authorised Seller') }}</div>
                    <div class="text-[11px] text-slate-500">{{ __('Authorised seller') }} · {{ __('Verified') }}</div>
                </div>
                @if(isset($product->store->id))
                    <a href="{{ url('viewstore/' . $product->store->id) }}" class="text-[13px] text-brand-600 font-semibold hover:underline">{{ __('View store') }}</a>
                @endif
            </div>
            @endif
        </div>
    </div>
</section>

{{-- HIGHLIGHTS + ABOUT --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-6 grid lg:grid-cols-2 gap-5">
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <h3 class="font-display font-extrabold text-xl mb-4">{{ __('Highlights') }}</h3>
        @php
            $highlightItems = [];
            $tags = trim((string) ($product->product_tags ?? $product->tags ?? ''));
            if ($tags !== '') {
                foreach (explode(',', $tags) as $tag) {
                    $tag = trim($tag);
                    if ($tag !== '') $highlightItems[] = $tag;
                }
            }
            if (empty($highlightItems) && !empty($product->key_features)) {
                $kf = strip_tags(str_replace(['</li>', '</p>', '<br>', '<br/>', '<br />'], "\n", $product->key_features));
                foreach (preg_split('/\r?\n+/', $kf) as $line) {
                    $line = trim($line);
                    if ($line !== '') $highlightItems[] = $line;
                }
            }
        @endphp
        <ul class="space-y-2.5 text-[14px] text-slate-700">
            @forelse(array_slice($highlightItems, 0, 8) as $item)
                <li class="flex gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-600 mt-0.5 shrink-0"><path d="m4 12 5 5L20 7"/></svg><span>{{ $item }}</span></li>
            @empty
                <li class="text-slate-400 text-[13px]">{{ __('No highlights listed.') }}</li>
            @endforelse
        </ul>
    </div>
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <h3 class="font-display font-extrabold text-xl mb-4">{{ __('About this item') }}</h3>
        <div class="text-[14px] text-slate-700 leading-relaxed prose prose-sm max-w-none">{!! $product->product_detail !!}</div>
    </div>
</section>

{{-- SPECIFICATIONS --}}
@php
    $specs = [];
    if (!empty(optional($product->brand)->name)) $specs[__('Brand')] = $product->brand->name;
    if (!empty($product->model_no))      $specs[__('Model')]    = $product->model_no;
    if (!empty($product->sku))           $specs[__('SKU')]      = $product->sku;
    if (!empty($product->hsin))          $specs[__('HSN Code')] = $product->hsin;
    // Weight is a free-text field admins sometimes fill with junk; only show numeric values.
    if (!empty($product->weight) && is_numeric($product->weight) && (float) $product->weight > 0) {
        $specs[__('Weight')] = (float) $product->weight;
    }
    // Tax: `tax` is the percentage admins enter; `tax_name` is the label. tax_rate is the
    // computed absolute amount per item — not useful in the spec line.
    if (!empty($product->tax_name) || !empty($product->tax)) {
        $taxLabel = trim((string) ($product->tax_name ?? ''));
        if (!empty($product->tax)) {
            $taxLabel = ($taxLabel !== '' ? $taxLabel . ' ' : '') . '(' . rtrim(rtrim(number_format($product->tax, 2), '0'), '.') . '%)';
        }
        if ($taxLabel !== '') $specs[__('Tax')] = $taxLabel;
    }
    if (!empty(optional($product->category)->title))    $specs[__('Category')]    = $product->category->title;
    if (!empty(optional($product->subcategory)->title)) $specs[__('Subcategory')] = $product->subcategory->title;
@endphp
@if(!empty($specs))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5">
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <h3 class="font-display font-extrabold text-xl mb-4">{{ __('Specifications') }}</h3>
        <dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-6 text-[13px]">
            @foreach($specs as $label => $value)
                <div class="flex items-baseline justify-between gap-3 border-b border-slate-100 pb-2">
                    <dt class="text-slate-500 shrink-0">{{ $label }}</dt>
                    <dd class="font-semibold text-deep text-right">{{ $value }}</dd>
                </div>
            @endforeach
        </dl>
    </div>
</section>
@endif

{{-- REVIEWS --}}
<section id="reviews" class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5">
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <div class="flex items-center justify-between flex-wrap gap-3 mb-6">
            <h3 class="font-display font-extrabold text-xl">{{ __('Ratings & Reviews') }}</h3>
            @auth
                <button type="button" data-sh-modal-open="rateProductModal" class="bg-deep hover:bg-slate-700 text-white px-5 py-2 rounded-full font-semibold text-[13px]">{{ __('Rate Product') }}</button>
            @else
                <a href="{{ route('login') }}" class="bg-deep hover:bg-slate-700 text-white px-5 py-2 rounded-full font-semibold text-[13px]">{{ __('Login to rate') }}</a>
            @endauth
        </div>

        <div class="grid lg:grid-cols-[280px_1fr] gap-8">
            <div>
                <div class="flex items-baseline gap-2">
                    <span class="font-display font-extrabold text-5xl tabular leading-none">{{ number_format($overallrating, 1) }}</span>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" class="text-star"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                </div>
                <div class="text-[13px] text-slate-500 mt-2">{{ $ratingTotal }} {{ __('reviews') }}</div>
                <div class="space-y-1.5 mt-4">
                    @foreach([5,4,3,2,1] as $stars)
                        <div class="flex items-center gap-2 text-[12px]">
                            <span class="w-3 tabular">{{ $stars }}</span>
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" class="text-star"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                            <div class="flex-1 h-1.5 bg-slate-200 rounded-full overflow-hidden"><div class="h-full bg-emerald-500" style="width:{{ $ratingPct[$stars] }}%"></div></div>
                            <span class="w-10 text-right tabular text-slate-500">{{ $ratingPct[$stars] }}%</span>
                        </div>
                    @endforeach
                </div>
            </div>

            <div>
                @if($allReviews->count())
                    <div class="grid md:grid-cols-2 gap-4">
                        @foreach($allReviews->take(6) as $r)
                            <article class="border border-slate-200 rounded-xl p-4">
                                <div class="flex items-center gap-2 text-[12px] mb-2">
                                    @php $stars = round((($r->qty + $r->price + $r->value) / 3)); @endphp
                                    <span class="bg-emerald-600 text-white px-1.5 py-0.5 rounded font-semibold flex items-center gap-0.5">{{ $stars }}<svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg></span>
                                    <span class="text-emerald-600 font-medium">✓ {{ __('Verified') }}</span>
                                    <span class="text-slate-500">· {{ $r->created_at ? $r->created_at->format('M d, Y') : '' }}</span>
                                </div>
                                @if($r->summary ?? null)<h4 class="font-semibold text-[14px] mb-1">{{ $r->summary }}</h4>@endif
                                <p class="text-[13px] text-slate-600 leading-relaxed">{{ $r->review ?? '' }}</p>
                                <div class="flex items-center gap-2 mt-3 pt-3 border-t border-slate-100 text-[12px]">
                                    <span class="font-semibold">{{ optional($r->users)->name ?? __('Anonymous') }}</span>
                                </div>
                            </article>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12 text-slate-400">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto opacity-40"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                        <p class="mt-3">{{ __('No reviews yet. Be the first to review!') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

@auth
{{-- Rate Product modal --}}
<div id="rateProductModal" class="sh-modal" role="dialog" aria-modal="true" aria-labelledby="rateProductTitle">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel max-w-lg">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <h3 id="rateProductTitle" class="font-display font-extrabold text-lg">{{ __('Rate this product') }}</h3>
            <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100" aria-label="{{ __('Close') }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
            </button>
        </div>

        <form action="{{ route('simpleproduct.rating', $product->id) }}" method="POST" class="p-5 space-y-5">
            @csrf
            <div>
                <div class="text-[13px] font-semibold text-deep mb-1">{{ $product->product_name }}</div>
                <p class="text-[12px] text-slate-500">{{ __('Your honest rating helps other shoppers.') }}</p>
            </div>

            @foreach([
                ['name'=>'quality', 'label'=>__('Quality')],
                ['name'=>'Price',   'label'=>__('Price')],
                ['name'=>'Value',   'label'=>__('Value')],
            ] as $cat)
                <div>
                    <label class="block text-[13px] font-semibold text-deep mb-2">{{ $cat['label'] }} <span class="text-rose-500">*</span></label>
                    <div class="rate-stars flex items-center gap-1" data-target="{{ $cat['name'] }}">
                        @for($i=1; $i<=5; $i++)
                            <button type="button" data-val="{{ $i }}"
                                class="rate-star w-9 h-9 grid place-items-center rounded-full text-slate-300 hover:text-amber-400 hover:bg-amber-50 transition-colors">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>
                            </button>
                        @endfor
                    </div>
                    <input type="hidden" name="{{ $cat['name'] }}" value="">
                </div>
            @endforeach

            <div>
                <label for="rateMessage" class="block text-[13px] font-semibold text-deep mb-2">{{ __('Your review') }}</label>
                <textarea id="rateMessage" name="review" rows="4" maxlength="1000"
                    placeholder="{{ __('What did you like or dislike? (optional)') }}"
                    class="w-full border border-slate-200 rounded-lg px-3 py-2 text-[13px] focus:border-brand-500 focus:outline-none"></textarea>
            </div>

            <div class="flex items-center gap-2 justify-end pt-2 border-t border-slate-100 -mx-5 px-5">
                <button type="button" data-sh-close class="px-4 py-2 rounded-lg text-[13px] font-semibold text-slate-600 hover:bg-slate-100">{{ __('Cancel') }}</button>
                <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white px-5 py-2 rounded-lg text-[13px] font-semibold">{{ __('Submit Review') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
(function(){
    document.querySelectorAll('.rate-stars').forEach(function(group){
        var hiddenName = group.getAttribute('data-target');
        var hidden = group.parentElement.querySelector('input[name="' + hiddenName + '"]');
        var stars = group.querySelectorAll('.rate-star');
        function paint(active){
            stars.forEach(function(s){
                var v = parseInt(s.getAttribute('data-val'), 10);
                if (v <= active) { s.classList.remove('text-slate-300'); s.classList.add('text-amber-400'); }
                else { s.classList.add('text-slate-300'); s.classList.remove('text-amber-400'); }
            });
        }
        stars.forEach(function(s){
            s.addEventListener('click', function(){
                var v = parseInt(s.getAttribute('data-val'), 10);
                if (hidden) hidden.value = v;
                paint(v);
            });
            s.addEventListener('mouseenter', function(){ paint(parseInt(s.getAttribute('data-val'), 10)); });
        });
        group.addEventListener('mouseleave', function(){ paint(parseInt(hidden && hidden.value || 0, 10)); });
    });

    if (location.hash === '#review' || location.hash === '#reviews' || location.hash === '#rate') {
        var m = document.getElementById('rateProductModal');
        if (m && typeof openModal === 'function') setTimeout(function(){ openModal('rateProductModal'); }, 200);
    }
})();
</script>
@endauth

@endsection

@section('script')
<script src="{{ url('js/lightbox.min.js') }}"></script>
<script>
function setPdpImg(idx, src){
    var main = document.getElementById('pdp-main-img');
    if (main) main.src = src;
    document.querySelectorAll('.pdp-thumb-btn').forEach(function(b, j){
        b.classList.toggle('border-brand-500', idx === j);
        b.classList.toggle('border-transparent', idx !== j);
    });
    var lb = document.querySelector('a[data-lightbox="pdp"]');
    if (lb) lb.setAttribute('href', src);
}
</script>
@endsection