@extends('front.layout.master')
@section('title', ($deal->title ?? __('Flash Deal')) . ' | ' . config('app.name'))
@section('meta_tags')
    <link rel="canonical" href="{{ url()->full() }}" />
    <meta name="robots" content="all">
    <meta property="og:title" content="{{ $deal->title ?? __('Flash Deal') }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ url()->full() }}" />
    @if($deal->background_image && file_exists(public_path('images/flashdeals/' . $deal->background_image)))
        <meta property="og:image" content="{{ url('images/flashdeals/' . $deal->background_image) }}" />
    @endif
@endsection
@section('body')

@php
    $cover = ($deal->background_image && file_exists(public_path('images/flashdeals/' . $deal->background_image)))
        ? url('images/flashdeals/' . $deal->background_image)
        : null;
    $isLive       = strtotime($deal->end_date) >= time();
    $startsLater  = strtotime($deal->start_date) > time();
    $itemsCount   = ($deal->saleitems ?? collect())->count();
    $currencySym  = session()->get('currency')['value'] ?? '';
    $currencyPos  = session()->get('currency')['position'] ?? 'before';
    // Currency may be stored as a Font Awesome class (e.g. "fa fa-dollar") rather than a glyph;
    // map common ones to Unicode so price strings stay plain text.
    $currencyGlyphMap = [
        'fa fa-dollar' => '$', 'fa-dollar' => '$',
        'fa fa-rupee' => '₹', 'fa-rupee' => '₹', 'fa fa-inr' => '₹',
        'fa fa-euro' => '€', 'fa-euro' => '€', 'fa fa-eur' => '€',
        'fa fa-gbp' => '£', 'fa-gbp' => '£', 'fa fa-pound' => '£',
        'fa fa-yen' => '¥', 'fa-yen' => '¥', 'fa fa-jpy' => '¥', 'fa fa-cny' => '¥',
        'fa fa-bitcoin' => '₿', 'fa-bitcoin' => '₿',
    ];
    $sym = $currencyGlyphMap[strtolower(trim((string) $currencySym))] ?? $currencySym;
    if (str_starts_with($sym, 'fa') || str_contains($sym, 'fa-')) $sym = '$'; // last-resort fallback
    $currencySym = $sym;

    $formatPrice = function ($amount) use ($currencySym, $currencyPos) {
        $n = number_format((float) $amount, 2);
        return $currencyPos === 'after' ? ($n . ' ' . $currencySym) : ($currencySym . ' ' . $n);
    };
@endphp

{{-- Breadcrumb --}}
<div class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-4">
    <nav class="breadcrumb-row text-[13px] text-slate-500 mb-3 flex items-center flex-wrap gap-x-1.5 gap-y-1">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300"><path d="m9 18 6-6-6-6"/></svg>
        <a href="{{ route('flashdeals.list') }}" class="hover:text-brand-600">{{ __('Flash Deals') }}</a>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300"><path d="m9 18 6-6-6-6"/></svg>
        <span class="text-slate-700 font-medium truncate max-w-[400px]">{{ $deal->title ?? __('Deal') }}</span>
    </nav>
</div>

{{-- HERO --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6">
    <div class="relative bg-deep rounded-2xl shadow-card overflow-hidden">
        @if($cover)
            <img src="{{ $cover }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-50">
        @endif
        <div class="absolute inset-0 bg-gradient-to-r from-deep via-deep/80 to-brand-700/70"></div>

        <div class="relative px-5 lg:px-9 py-8 lg:py-12 text-white grid lg:grid-cols-[1fr_auto] gap-6 items-end">
            <div>
                <div class="flex items-center gap-2 flex-wrap mb-3">
                    @if($isLive && !$startsLater)
                        <span class="inline-flex items-center gap-1.5 bg-emerald-500 text-white text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full">
                            <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                            {{ __('Live Now') }}
                        </span>
                    @elseif($startsLater)
                        <span class="bg-amber-400 text-deep text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full">{{ __('Upcoming') }}</span>
                    @else
                        <span class="bg-slate-700 text-white text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full">{{ __('Ended') }}</span>
                    @endif
                    <span class="bg-white/15 text-white text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full">
                        {{ $itemsCount }} {{ __('items') }}
                    </span>
                </div>
                <h1 class="font-display font-extrabold text-3xl lg:text-5xl leading-tight">{{ $deal->title }}</h1>
                @if(!empty($deal->detail))
                    <div class="text-white/85 text-[14px] mt-3 max-w-2xl prose prose-invert prose-sm">{!! $deal->detail !!}</div>
                @endif
                <div class="flex items-center gap-4 mt-4 text-[13px] text-white/85">
                    <span class="flex items-center gap-1.5">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                        {{ __('Starts') }}: {{ date('d M Y · h:i A', strtotime($deal->start_date)) }}
                    </span>
                    <span class="flex items-center gap-1.5">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 8v4l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
                        {{ __('Ends') }}: {{ date('d M Y · h:i A', strtotime($deal->end_date)) }}
                    </span>
                </div>
            </div>

            {{-- Countdown / status block --}}
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 min-w-[280px]">
                @if($isLive && !$startsLater)
                    <div class="text-[11px] uppercase tracking-wider text-white/70 mb-2 text-center">{{ __('Sale ends in') }}</div>
                    <div id="countdown" class="grid grid-cols-4 gap-2 text-center">
                        @foreach(['days' => __('Days'), 'hours' => __('Hrs'), 'minutes' => __('Min'), 'seconds' => __('Sec')] as $key => $label)
                            <div>
                                <div class="bg-white/15 rounded-lg py-2.5">
                                    <div id="{{ $key }}" class="font-display font-extrabold text-2xl tabular leading-none">--</div>
                                </div>
                                <div class="text-[10px] uppercase tracking-wider text-white/70 mt-1">{{ $label }}</div>
                            </div>
                        @endforeach
                    </div>
                @elseif($startsLater)
                    <div class="text-[11px] uppercase tracking-wider text-white/70 mb-2 text-center">{{ __('Starts in') }}</div>
                    <div id="countdown" class="grid grid-cols-4 gap-2 text-center">
                        @foreach(['days' => __('Days'), 'hours' => __('Hrs'), 'minutes' => __('Min'), 'seconds' => __('Sec')] as $key => $label)
                            <div>
                                <div class="bg-white/15 rounded-lg py-2.5">
                                    <div id="{{ $key }}" class="font-display font-extrabold text-2xl tabular leading-none">--</div>
                                </div>
                                <div class="text-[10px] uppercase tracking-wider text-white/70 mt-1">{{ $label }}</div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-6">
                        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="mx-auto text-white/70 mb-2"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg>
                        <div class="font-display font-extrabold text-xl">{{ __('Sale Ended') }}</div>
                        <div class="text-[12px] text-white/70 mt-1">{{ __('Browse the items below') }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- DEAL ITEMS GRID --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-6 mb-12">
    @if($itemsCount > 0)
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($deal->saleitems as $item)
                @php
                    $name = ''; $img = url('images/no-image.png'); $url = '#'; $des = '';
                    $basePrice = 0; $stock = 0; $minQty = 1;
                    $cartAction = null; $isVariant = false;

                    if (optional($item)->variant) {
                        $isVariant = true;
                        $variant = $item->variant;
                        $product = $variant->products ?? null;
                        if ($product) {
                            $name = $product->name;
                            $des  = strip_tags($product->des ?? '');
                            $url  = \App\Helpers\ProductUrl::getUrl($variant->id);
                            if (optional($variant->variantimages)->main_image) {
                                $thumbFile = $variant->variantimages->main_image;
                                if (is_file(public_path('variantimages/thumbnails/' . $thumbFile))) {
                                    $img = url('variantimages/thumbnails/' . $thumbFile);
                                } elseif (is_file(public_path('variantimages/' . $thumbFile))) {
                                    $img = url('variantimages/' . $thumbFile);
                                }
                            }
                            $stock  = $variant->stock ?? 0;
                            $minQty = $variant->min_order_qty ?? 1;
                            try {
                                $get_product_data = new App\Http\Controllers\Api\MainController;
                                $priceObj = $get_product_data->getprice($product, $variant)->getData();
                                $basePrice = ($priceObj->offerprice != 0) ? $priceObj->offerprice : $priceObj->mainprice;
                            } catch (\Throwable $e) {
                                $basePrice = $variant->price ?? 0;
                            }
                        }
                    } elseif (optional($item)->simple_product) {
                        $sp = $item->simple_product;
                        $name = $sp->product_name;
                        $des  = strip_tags($sp->product_detail ?? '');
                        $url  = route('show.product', ['id' => $sp->id, 'slug' => $sp->slug]);
                        if ($sp->thumbnail && file_exists(public_path('images/simple_products/' . $sp->thumbnail))) {
                            $img = url('images/simple_products/' . $sp->thumbnail);
                        }
                        $stock  = $sp->stock ?? 0;
                        $minQty = $sp->min_order_qty ?? 1;
                        $basePrice = ($sp->offer_price ?? 0) != 0 ? $sp->offer_price : ($sp->price ?? 0);
                    }

                    // Apply campaign discount
                    $discount = (float) ($item->discount ?? 0);
                    $discountType = $item->discount_type ?? 'flat';
                    if ($discountType === 'upto') {
                        $effectiveDiscount = rand(0, (int) $discount);
                    } else {
                        $effectiveDiscount = $discount;
                    }
                    $dealPrice = $basePrice - ($basePrice * $effectiveDiscount / 100);
                @endphp

                <article class="bg-white rounded-2xl shadow-card overflow-hidden flex flex-col group hover:shadow-hover transition-shadow relative">
                    @if($discount > 0)
                        <span class="absolute top-2 left-2 z-10 bg-rose-500 text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider">
                            @if($discountType === 'upto')
                                {{ __('Up to') }} −{{ (int) $discount }}%
                            @else
                                −{{ (int) $discount }}%
                            @endif
                        </span>
                    @endif
                    @if($stock <= 0)
                        <div class="absolute top-2 right-2 z-10 bg-slate-700 text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider">{{ __('Out of stock') }}</div>
                    @endif

                    <a href="{{ $url }}" class="block aspect-square bg-slate-50 relative overflow-hidden">
                        <img src="{{ $img }}" alt="{{ $name }}" loading="lazy" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    </a>

                    <div class="p-3 flex-1 flex flex-col">
                        <a href="{{ $url }}" class="font-semibold text-[13px] leading-snug line-clamp-2 min-h-[34px] hover:text-brand-600">{{ $name }}</a>

                        <div class="flex items-baseline gap-2 mt-2 flex-wrap">
                            <span class="font-display font-extrabold text-[17px] tabular text-deep">{{ $formatPrice($dealPrice * ($conversion_rate ?? 1)) }}</span>
                            @if($discount > 0 && $basePrice > 0)
                                <span class="text-slate-400 line-through text-[12px] tabular">{{ $formatPrice($basePrice * ($conversion_rate ?? 1)) }}</span>
                            @endif
                        </div>

                        @if($isLive && !$startsLater && $stock > 0)
                            @if($isVariant && optional($item->variant->products)->id)
                                <form action="{{ route('add.cart', ['id' => $item->variant->products->id, 'variantid' => $item->variant->id, 'varprice' => $basePrice, 'varofferprice' => $dealPrice, 'qty' => $minQty]) }}" method="POST" class="addVariantProCard{{ $item->variant->id }} mt-2.5">
                                    @csrf
                                    <input type="hidden" name="qty" value="{{ $minQty }}">
                                    <button type="button" onclick="addVariantProCard({{ $item->variant->id }})" class="w-full bg-deep hover:bg-saffron hover:text-deep text-white text-[12px] py-2 rounded-lg font-semibold transition-colors">+ {{ __('Add to cart') }}</button>
                                </form>
                            @elseif(!$isVariant && optional($item->simple_product)->id)
                                <form action="{{ route('add.cart.simple', ['pro_id' => $item->simple_product->id, 'price' => $item->simple_product->price ?? 0, 'offerprice' => $dealPrice]) }}" method="POST" class="addSimpleCardFrom{{ $item->simple_product->id }} mt-2.5">
                                    @csrf
                                    <input type="hidden" name="qty" value="{{ $minQty }}">
                                    <button type="button" onclick="addSimpleProCard({{ $item->simple_product->id }})" class="w-full bg-deep hover:bg-saffron hover:text-deep text-white text-[12px] py-2 rounded-lg font-semibold transition-colors">+ {{ __('Add to cart') }}</button>
                                </form>
                            @endif
                        @elseif($startsLater)
                            <button type="button" disabled class="w-full mt-2.5 bg-amber-100 text-amber-700 text-[12px] py-2 rounded-lg font-semibold">{{ __('Starts soon') }}</button>
                        @elseif(!$isLive)
                            <a href="{{ $url }}" class="w-full mt-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12px] py-2 rounded-lg font-semibold inline-flex items-center justify-center transition-colors">{{ __('View product') }}</a>
                        @else
                            <button type="button" disabled class="w-full mt-2.5 bg-slate-200 text-slate-400 text-[12px] py-2 rounded-lg font-semibold">{{ __('Out of stock') }}</button>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @else
        <div class="bg-white rounded-2xl shadow-card p-12 text-center">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300 mb-4"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
            <h3 class="font-display font-extrabold text-xl">{{ __('No products in this deal') }}</h3>
            <p class="text-slate-500 text-[13px] mt-2">{{ __('Items have not been added to this campaign yet.') }}</p>
            <a href="{{ route('flashdeals.list') }}" class="inline-block mt-5 text-brand-600 font-semibold hover:underline text-[14px]">← {{ __('Back to all deals') }}</a>
        </div>
    @endif
</section>

@endsection

@section('script')
<script>
(function () {
    var endTs   = {{ strtotime($deal->end_date) * 1000 }};
    var startTs = {{ strtotime($deal->start_date) * 1000 }};
    var now = Date.now();
    var target = now < startTs ? startTs : endTs;
    if (now > endTs) return;

    var elDays = document.getElementById('days');
    var elHours = document.getElementById('hours');
    var elMin  = document.getElementById('minutes');
    var elSec  = document.getElementById('seconds');
    if (!elDays || !elHours || !elMin || !elSec) return;

    var SECOND = 1000, MINUTE = 60 * SECOND, HOUR = 60 * MINUTE, DAY = 24 * HOUR;
    function pad(n){ n = n < 0 ? 0 : n; return n < 10 ? '0' + n : '' + n; }

    function tick(){
        var distance = target - Date.now();
        if (distance <= 0) {
            elDays.textContent = '00'; elHours.textContent = '00'; elMin.textContent = '00'; elSec.textContent = '00';
            clearInterval(timer);
            return;
        }
        elDays.textContent  = pad(Math.floor(distance / DAY));
        elHours.textContent = pad(Math.floor((distance % DAY) / HOUR));
        elMin.textContent   = pad(Math.floor((distance % HOUR) / MINUTE));
        elSec.textContent   = pad(Math.floor((distance % MINUTE) / SECOND));
    }
    tick();
    var timer = setInterval(tick, 1000);
})();
</script>
@endsection