@extends('front/layout.master')

@section('title', "$pro->name")

@section('meta_tags')
    <link rel="canonical" href="{{ url()->full() }}" />
    <meta name="robots" content="all">
    <meta property="og:title" content="{{ $pro->name }}" />
    <meta name="keywords" content="{{ isset($pro) ? $pro->tags : ($seoset->metadata_key ?? '') }}">
    <meta property="og:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($pro->des), 100) }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ url()->full() }}" />
    @if(isset($pro->subvariants[0]) && isset($pro->subvariants[0]->variantimages))
        <meta property="og:image" content="{{ url('variantimages/thumbnails/' . $pro->subvariants[0]->variantimages->main_image) }}" />
    @endif
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($pro->des), 100) }}" />
@endsection

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

@section('body')

@php
    // Compute compare + wishlist active state for the detail page
    $detailInCompare = false;
    foreach ((array) session('comparison', []) as $cmp) {
        if (($cmp['proid'] ?? null) == $pro->id && (($cmp['type'] ?? 'variant') === 'variant')) {
            $detailInCompare = true; break;
        }
    }
    $detailInWish = false;
    if (auth()->check() && isset($pro->subvariants[0])) {
        $detailInWish = \App\Wishlist::where('user_id', auth()->id())
            ->where('pro_id', $pro->subvariants[0]->id)
            ->exists();
    }

    // Compute review aggregates
    $review_t = 0; $price_t = 0; $value_t = 0; $sub_total = 0; $ratings_var = 0;
    $review_count = count($pro->reviews);
    $count = $review_count;
    $onlyrev = [];
    foreach ($pro->reviews as $review) {
        $review_t = $review->qty * 5;
        $price_t = $review->price * 5;
        $value_t = $review->value * 5;
        $sub_total = $sub_total + $review_t + $price_t + $value_t;
    }
    $denom = ($count * 3) * 5;
    $overallrating = 0;
    if ($denom > 0) {
        $rat = $sub_total / $denom;
        $ratings_var = ($rat * 100) / 5;
        $overallrating = ($ratings_var / 2) / 10;
    }
    $overallRoundedHalf = floor($overallrating * 2) / 2;

    // Resolve active variant axes ($pro->variants = AddProductVariant rows; one per attribute axis).
    // Each row has attr_name = ProductAttribute id, attr_value = JSON array of ProductValue ids.
    $variantAxes = [];   // [ [attribute, valueIds[], selectedValueId|null], ... ]
    $selectedMap = [];   // [attribute_id => value_id] picked from query string
    foreach ($pro->variants ?? [] as $axisRow) {
        $attr = \App\ProductAttributes::find($axisRow->attr_name);
        if (!$attr) continue;
        $rawValues = $axisRow->attr_value;
        $valueIds = is_array($rawValues) ? $rawValues : (array) (json_decode((string) $rawValues, true) ?: []);
        $valueIds = array_values(array_filter(array_map('intval', $valueIds)));
        if (!$valueIds) continue;
        $param = request()->query($attr->attr_name);
        $selected = (is_numeric($param) && in_array((int) $param, $valueIds, true)) ? (int) $param : null;
        if ($selected !== null) $selectedMap[$attr->id] = $selected;
        $variantAxes[] = ['attr' => $attr, 'values' => $valueIds, 'selected' => $selected];
    }

    // Pick the subvariant matching every selected axis; fall back to first.
    $activeVariant = null;
    foreach ($pro->subvariants as $sv) {
        $svMap = is_array($sv->main_attr_value) ? $sv->main_attr_value : (array) (json_decode((string) $sv->main_attr_value, true) ?: []);
        $matchAll = true;
        foreach ($selectedMap as $aid => $vid) {
            if (!isset($svMap[$aid]) || (int) $svMap[$aid] !== (int) $vid) { $matchAll = false; break; }
        }
        if ($matchAll) { $activeVariant = $sv; break; }
    }
    $firstVariant = $activeVariant ?? ($pro->subvariants[0] ?? null);

    // For axes with no explicit selection, default to whatever the active variant carries.
    if ($firstVariant) {
        $svMap = is_array($firstVariant->main_attr_value) ? $firstVariant->main_attr_value : (array) (json_decode((string) $firstVariant->main_attr_value, true) ?: []);
        foreach ($variantAxes as $i => $axis) {
            if ($axis['selected'] === null && isset($svMap[$axis['attr']->id])) {
                $variantAxes[$i]['selected'] = (int) $svMap[$axis['attr']->id];
            }
        }
    }

    // Build a query-string preserver so clicking a value flips just that axis.
    $detailSlug = $pro->slug ?: \Illuminate\Support\Str::slug($pro->name) ?: 'product';
    $buildAxisUrl = function ($attrName, $valueId) use ($pro, $variantAxes, $detailSlug) {
        $params = [];
        foreach ($variantAxes as $a) {
            $name = $a['attr']->attr_name;
            $val  = ($name === $attrName) ? $valueId : $a['selected'];
            if ($val !== null) $params[$name] = $val;
        }
        return url('details/' . $detailSlug . '/' . $pro->id) . ($params ? ('?' . http_build_query($params)) : '');
    };

    $variantImages = $firstVariant && $firstVariant->variantimages ? $firstVariant->variantimages : null;

    // Compute price using the same helper as the product cards so the detail page
    // and the cards always agree (mainprice = MRP / strike-through; offerprice = sale).
    $variantPrice = 0; $variantCompare = null; $disPct = 0;
    if ($firstVariant) {
        $priceResp = ProductPrice::getprice($pro, $firstVariant)->getData();
        $mp = (float) ($priceResp->mainprice ?? 0);
        $op = (float) ($priceResp->offerprice ?? 0);
        $variantPrice   = ($op > 0 && $op < $mp) ? $op : $mp;
        $variantCompare = ($op > 0 && $op < $mp) ? $mp : null;
        $disPct = ($variantCompare && $variantPrice > 0)
            ? round((1 - $variantPrice / $variantCompare) * 100) : 0;
    }

    // Stock status
    $totalStock = 0;
    foreach ($pro->subvariants as $sv) { $totalStock += $sv->stock ?? 0; }

    // Hide prices for guests when "login to view price" is enabled in general settings.
    $hidePrice = (\App\Genral::first()->login ?? 0) == 1 && !auth()->check();

    // Warranty (stored as w_d + w_my unit + w_type label, e.g. "1 year Warranty")
    $warrantyParts = array_filter([
        trim((string) ($pro->w_d ?? '')),
        trim((string) ($pro->w_my ?? '')),
        trim((string) ($pro->w_type ?? '')),
    ], function($v){ return $v !== ''; });
    $warrantyLabel = $warrantyParts ? implode(' ', $warrantyParts) : '';

    // Real per-product policy facts (drives the trust badges, the Delivery card, and any other
    // module that wants to surface what this product actually offers).
    $returnDays = optional(\App\Genral::first())->return_in_days ?? 30;
    $hasWarranty = $warrantyLabel !== '';
    $hasReturn   = ($pro->return_avbl == '1');
    $hasCancel   = ($pro->cancel_avl == 1);
    $hasFreeShip = ($pro->free_shipping == 1);
    $hasCOD      = ($pro->codcheck == 1);

    $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'],
    ];
@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="{{ method_exists($pro->category, 'getUrl') ? $pro->category->getUrl() : '#' }}" class="hover:text-brand-600">{{ $pro->category->title }}</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>
        <span class="hover:text-brand-600">{{ $pro->subcategory->title }}</span>
        @if(!empty($pro->childcat->title))
            <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">{{ $pro->childcat->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]">{{ $pro->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">
                    @if($variantImages)
                        @php
                            // Build the list of available product images. Prefer the
                            // thumbnail copy when it exists; if the thumb is missing
                            // (admin uploaded but thumb wasn't generated) fall back
                            // to the original image so it still renders instead of
                            // being silently dropped.
                            $imgs = [];
                            $thumbsDir   = public_path('variantimages/thumbnails/');
                            $originalDir = public_path('variantimages/');
                            foreach (['main_image','image2','image3','image4','image5'] as $field) {
                                $f = $variantImages->{$field} ?? null;
                                if (!$f) continue;
                                if (is_file($thumbsDir . $f)) {
                                    $imgs[] = url('variantimages/thumbnails/' . $f);
                                } elseif (is_file($originalDir . $f)) {
                                    $imgs[] = url('variantimages/' . $f);
                                }
                            }
                        @endphp
                        @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
                    @endif
                </div>
                <div class="relative">
                    <div class="aspect-square rounded-xl overflow-hidden bg-slate-50 grid place-items-center group">
                        @php
                            $mainSrc = url('images/no-image.png');
                            if ($variantImages && $variantImages->main_image) {
                                $mainFile = $variantImages->main_image;
                                if (is_file(public_path('variantimages/thumbnails/' . $mainFile))) {
                                    $mainSrc = url('variantimages/thumbnails/' . $mainFile);
                                } elseif (is_file(public_path('variantimages/' . $mainFile))) {
                                    $mainSrc = url('variantimages/' . $mainFile);
                                }
                            }
                        @endphp
                        <img id="pdp-main-img" src="{{ $mainSrc }}" alt="{{ $pro->name }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                        @if($firstVariant)
                            <button type="button" onclick="toggleWish('variant', {{ $firstVariant->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>
                        @endif
                        <button type="button" onclick="addToCompare('variant', {{ $pro->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="18" height="18" 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>
                    </div>
                </div>
            </div>

            {{-- Action buttons --}}
            <div class="mt-5 grid grid-cols-2 gap-3">
                @if($hidePrice)
                    <a href="{{ url('login') }}" 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"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ __('Login to purchase') }}
                    </a>
                @elseif($firstVariant && $totalStock > 0)
                    <form method="POST" action="{{ route('add.cart', ['id' => $pro->id, 'variantid' => $firstVariant->id, 'varprice' => ($variantCompare ?: $variantPrice), 'varofferprice' => ($variantCompare ? $variantPrice : 0), 'qty' => 1]) }}" class="addVariantProCard{{ $firstVariant->id }}">
                        @csrf
                        <input type="hidden" name="qty" value="1" class="qty-section">
                        <button type="button" onclick="addVariantProCard({{ $firstVariant->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>
                    <a href="{{ url('cart') }}" class="bg-brand-500 hover:bg-brand-600 text-white 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="M13 2 3 14h7v8l10-12h-7V2Z"/></svg>
                        {{ __('Buy now') }}
                    </a>
                @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>
        </div>

        {{-- Trust badges (real per-product flags) --}}
        @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>

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

        {{-- Title block --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            <div class="flex items-center gap-2 flex-wrap">
                @if(isset($pro->store) && $pro->store)
                    <a href="{{ url('viewstore/' . $pro->store->id) }}" class="text-[12px] text-brand-600 font-bold uppercase tracking-wider hover:underline">{{ $pro->store->name ?? $pro->store }}</a>
                    <span class="text-slate-300">·</span>
                @endif
                <span class="text-[12px] text-emerald-600 font-medium flex items-center gap-1">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-4Z"/></svg>
                    {{ $title ?? 'Emart' }} {{ __('Assured') }}
                </span>
            </div>
            <h1 class="font-display font-extrabold text-2xl lg:text-[28px] leading-[1.15] mt-2">{{ $pro->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($totalStock > 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>
                @else
                    <span class="text-rose-600 font-bold">{{ __('Out of Stock') }}</span>
                @endif
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
                <span class="bg-emerald-50 text-emerald-700 text-[11px] font-semibold px-2.5 py-1 rounded-full border border-emerald-200">✓ 100% {{ __('Authentic') }}</span>
                @if($disPct > 0)
                    <span class="bg-amber-50 text-amber-700 text-[11px] font-semibold px-2.5 py-1 rounded-full border border-amber-200">⚡ {{ __('Special Deal') }}</span>
                @endif
                <span class="bg-brand-50 text-brand-600 text-[11px] font-semibold px-2.5 py-1 rounded-full border border-brand-100">{{ __('Free Shipping') }}</span>
            </div>
        </div>

        {{-- Price block --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            @if($hidePrice)
                <div class="flex items-center gap-3 flex-wrap">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-brand-500"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    <span class="font-display font-extrabold text-xl text-deep">{{ __('Login to view price') }}</span>
                </div>
                <a href="{{ url('login') }}" class="inline-flex items-center gap-2 mt-3 bg-brand-500 hover:bg-brand-600 text-white px-5 py-2.5 rounded-full font-semibold text-[14px] transition-colors">
                    {{ __('Sign in') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
            @else
                @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>
            @endif
        </div>

        {{-- Variant picker --}}
        <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
            <div id="details-container" class="pdp-variants">
                @foreach($variantAxes as $axis)
                    @php
                        $attr = $axis['attr'];
                        $isColour = in_array(strtolower($attr->attr_name), ['color', 'colour']);
                        $selectedVal = $axis['selected'];
                        $selectedLabel = '';
                        if ($selectedVal) {
                            $selObj = \App\ProductValues::find($selectedVal);
                            $selectedLabel = $selObj ? trim($selObj->values . ($selObj->unit_value && strcasecmp($selObj->values, $selObj->unit_value) !== 0 && !$isColour ? ' ' . $selObj->unit_value : '')) : '';
                        }
                    @endphp
                    <div class="mb-5 last:mb-0">
                        <div class="flex items-baseline gap-2 mb-2.5">
                            <span class="text-[13px] font-bold text-deep">{{ str_replace('_', ' ', $attr->attr_name) }}:</span>
                            @if($selectedLabel !== '')
                                <span class="text-[13px] text-slate-700">{{ $selectedLabel }}</span>
                            @endif
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($axis['values'] as $valId)
                                @php
                                    $val = \App\ProductValues::find($valId);
                                    if (!$val) continue;
                                    // Find the subvariant whose map[attr_id] = $valId for swatch image / stock.
                                    $svMatch = null;
                                    foreach ($pro->subvariants as $sv) {
                                        $svMap = is_array($sv->main_attr_value) ? $sv->main_attr_value : (array) (json_decode((string) $sv->main_attr_value, true) ?: []);
                                        if (isset($svMap[$attr->id]) && (int) $svMap[$attr->id] === (int) $valId) { $svMatch = $sv; break; }
                                    }
                                    $isActive = ((int) $selectedVal === (int) $valId);
                                    $href = $buildAxisUrl($attr->attr_name, $valId);
                                    $oos = $svMatch && (int) ($svMatch->stock ?? 0) <= 0;
                                @endphp
                                @if($isColour)
                                    <a href="{{ $href }}" title="{{ $val->values }}"
                                       class="relative w-11 h-11 rounded-full grid place-items-center border-2 transition-all {{ $isActive ? 'border-brand-500 ring-2 ring-brand-100' : 'border-slate-200 hover:border-slate-400' }} {{ $oos ? 'opacity-50' : '' }}">
                                        @if($svMatch && $svMatch->variantimages && $svMatch->variantimages->image1 && file_exists(public_path('variantimages/' . $svMatch->variantimages->image1)))
                                            <img class="w-full h-full rounded-full object-cover" src="{{ url('variantimages/' . $svMatch->variantimages->image1) }}" alt="{{ $val->values }}">
                                        @else
                                            <span class="w-7 h-7 rounded-full border border-slate-200" style="background: {{ $val->unit_value ?: '#cbd5e1' }};"></span>
                                        @endif
                                        @if($isActive)
                                            <span class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-brand-500 text-white grid place-items-center">
                                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><path d="m4 12 5 5L20 7"/></svg>
                                            </span>
                                        @endif
                                    </a>
                                @else
                                    <a href="{{ $href }}"
                                       class="px-4 py-2 rounded-lg border-2 text-[13px] font-bold transition-all {{ $isActive ? 'border-brand-500 bg-brand-50 text-brand-600' : 'border-slate-200 text-slate-700 hover:border-slate-400' }} {{ $oos ? 'opacity-50 line-through' : '' }}">
                                        {{ $val->values }}@if($val->unit_value && strcasecmp($val->values, $val->unit_value) !== 0) {{ $val->unit_value }}@endif
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Quantity --}}
            @if($firstVariant)
            <div class="mt-5 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 type="number" min="1" max="{{ $firstVariant->max_order_qty ?? 100 }}" 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($totalStock < 10 && $totalStock > 0)
                    <span class="text-[12px] text-slate-500">{{ __('Only') }} <span class="font-semibold text-rose-500">{{ $totalStock }} {{ __('left') }}</span> {{ __('in stock') }}</span>
                @endif
            </div>
            @endif
        </div>

        {{-- 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($pro->store) && $pro->store)
            @php
                $storeLogoFile = $pro->store->store_logo ?? null;
                $storeLogoUrl = $storeLogoFile && file_exists(public_path('images/store/logo/' . $storeLogoFile))
                    ? url('images/store/logo/' . $storeLogoFile)
                    : 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($storeLogoUrl)
                        <img src="{{ $storeLogoUrl }}" alt="{{ $pro->store->name }}" class="w-full h-full object-contain p-1">
                    @else
                        {{ strtoupper(substr($pro->store->name ?? 'S', 0, 2)) }}
                    @endif
                </div>
                <div>
                    <div class="text-[13px] font-bold">{{ $pro->store->name ?? __('Authorised Seller') }}</div>
                    <div class="text-[11px] text-slate-500">{{ __('Authorised seller') }} · {{ __('Verified') }}</div>
                </div>
                @if(isset($pro->store->id))
                    <a href="{{ url('viewstore/' . $pro->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 = [];
            // Prefer explicit `tags` (comma-separated), fall back to key_features stripped of HTML.
            $tags = trim((string) ($pro->tags ?? ''));
            if ($tags !== '') {
                foreach (explode(',', $tags) as $tag) {
                    $tag = trim($tag);
                    if ($tag !== '') $highlightItems[] = $tag;
                }
            }
            if (empty($highlightItems) && !empty($pro->key_features)) {
                $kf = strip_tags(str_replace(['</li>', '</p>', '<br>', '<br/>', '<br />'], "\n", $pro->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">{!! $pro->des !!}</div>
    </div>
</section>

{{-- SPECIFICATIONS + WARRANTY/POLICIES --}}
@php
    $specs = [];
    if (!empty($pro->brand) && !empty($pro->brand->name)) $specs[__('Brand')]   = $pro->brand->name;
    if (!empty($pro->model))   $specs[__('Model')]   = $pro->model;
    if (!empty($pro->sku))     $specs[__('SKU')]     = $pro->sku;
    if (!empty($pro->hsn))     $specs[__('HSN Code')]= $pro->hsn;
    if ($firstVariant && !empty($firstVariant->weight)) {
        $specs[__('Weight')] = trim($firstVariant->weight . ' ' . ($firstVariant->w_unit ?? ''));
    }
    if (!empty($pro->tax_name)) $specs[__('Tax')] = $pro->tax_name . (isset($pro->tax_r) ? ' (' . $pro->tax_r . '%)' : '');
    if (!empty($pro->category->title))    $specs[__('Category')]    = $pro->category->title;
    if (!empty($pro->subcategory->title)) $specs[__('Subcategory')] = $pro->subcategory->title;
    if (!empty($pro->childcat->title))    $specs[__('Section')]     = $pro->childcat->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 --}}
@php
    // Real rating distribution (5..1) computed from reviews
    $ratingBuckets = [5=>0, 4=>0, 3=>0, 2=>0, 1=>0];
    foreach (($pro->reviews ?? []) 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
<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(count($pro->reviews))
                    <div class="grid md:grid-cols-2 gap-4">
                        @foreach($pro->reviews->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->title ?? null)<h4 class="font-semibold text-[14px] mb-1">{{ $r->title }}</h4>@endif
                                <p class="text-[13px] text-slate-600 leading-relaxed">{{ $r->message ?? $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 id="rateReviewForm" action="{{ route('user.review', $pro->id) }}" method="POST" class="p-5 space-y-5">
            @csrf
            <div>
                <div class="text-[13px] font-semibold text-deep mb-1">{{ $pro->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));
        });
    });

    // Before submitting, make sure every star category is rated — show ONE friendly
    // prompt listing what's missing instead of letting the server bounce back with a
    // separate "field is required" error per category.
    var reviewForm = document.getElementById('rateReviewForm');
    if (reviewForm) {
        reviewForm.addEventListener('submit', function(e){
            var labels = { 'quality': @json(__('Quality')), 'Price': @json(__('Price')), 'Value': @json(__('Value')) };
            var missing = [];
            Object.keys(labels).forEach(function(name){
                var el = reviewForm.querySelector('input[name="' + name + '"]');
                if (!el || !el.value) missing.push(labels[name]);
            });
            if (missing.length) {
                e.preventDefault();
                var msg = @json(__('Please give a star rating for')) + ' ' + missing.join(', ') + '.';
                if (typeof toastr !== 'undefined') { toastr.error(msg); } else { alert(msg); }
            }
        });
    }

    // Auto-open if URL hash is #review (legacy links) or #reviews
    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/detailpage.js') }}"></script>
<script>
function setPdpImg(idx, src) {
    document.getElementById('pdp-main-img').src = src;
    document.querySelectorAll('.pdp-thumb-btn').forEach((b, j) => {
        b.classList.toggle('border-brand-500', idx === j);
        b.classList.toggle('border-transparent', idx !== j);
    });
}
</script>
@endsection