@extends("front.layout.master")
@section('title', __('All Flash Deals') . ' | ' . config('app.name'))
@section('meta_tags')
    <link rel="canonical" href="{{ url()->full() }}" />
    <meta name="robots" content="all">
    <meta property="og:title" content="{{ __('All Flash Deals') }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ url()->full() }}" />
@endsection
@section('body')

<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>
        <span class="text-slate-700 font-medium">{{ __('Flash Deals') }}</span>
    </nav>

    <div class="bg-white rounded-2xl shadow-card overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-deep via-brand-700 to-brand-500 text-white px-5 lg:px-7 py-6 lg:py-8 flex items-center justify-between flex-wrap gap-4">
            <div class="flex items-center gap-4">
                <span class="w-14 h-14 rounded-2xl bg-white/15 grid place-items-center text-saffron">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>
                </span>
                <div>
                    <h1 class="font-display font-extrabold text-2xl lg:text-3xl leading-tight">{{ __('Flash Deals') }}</h1>
                    <p class="text-white/85 text-[13px] mt-1">{{ __('Limited-time offers — grab them before they end.') }}</p>
                </div>
            </div>
            <div class="text-right">
                <div class="font-display font-extrabold text-3xl lg:text-4xl tabular leading-none">{{ method_exists($deals, 'total') ? $deals->total() : count($deals) }}</div>
                <div class="text-[12px] uppercase tracking-wider text-white/75">{{ __('Active campaigns') }}</div>
            </div>
        </div>
    </div>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mb-12">
    @if(count($deals))
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-5">
            @foreach($deals as $deal)
                @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_count ?? 0;
                @endphp
                <article class="bg-white rounded-2xl shadow-card overflow-hidden flex flex-col hover:shadow-hover transition-shadow group">
                    <a href="{{ route('flashdeals.view', ['id' => $deal->id, 'slug' => \Illuminate\Support\Str::slug($deal->title, '-')]) }}" class="block aspect-[16/10] bg-slate-100 relative overflow-hidden">
                        @if($cover)
                            <img src="{{ $cover }}" alt="{{ $deal->title }}" loading="lazy" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="absolute inset-0 grid place-items-center bg-gradient-to-br from-brand-500 to-deep text-white">
                                <svg width="56" height="56" viewBox="0 0 24 24" fill="currentColor" class="opacity-80"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-deep/70 via-transparent to-transparent"></div>

                        <div class="absolute top-3 left-3 flex flex-col gap-1.5">
                            @if($isLive && !$startsLater)
                                <span class="inline-flex items-center gap-1 bg-emerald-500 text-white text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-full">
                                    <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                                    {{ __('Live') }}
                                </span>
                            @elseif($startsLater)
                                <span class="bg-amber-400 text-deep text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-full">{{ __('Upcoming') }}</span>
                            @else
                                <span class="bg-slate-700 text-white text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-full">{{ __('Ended') }}</span>
                            @endif
                            @if($itemsCount > 0)
                                <span class="bg-white/95 text-deep text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-full">{{ $itemsCount }} {{ __('items') }}</span>
                            @endif
                        </div>

                        <div class="absolute bottom-3 left-3 right-3 text-white">
                            <h3 class="font-display font-extrabold text-lg leading-tight line-clamp-2">{{ $deal->title }}</h3>
                        </div>
                    </a>

                    <div class="p-4 flex-1 flex flex-col">
                        <dl class="grid grid-cols-2 gap-2 text-[12px] mb-3">
                            <div class="bg-slate-50 rounded-lg px-2.5 py-2">
                                <dt class="text-slate-500 uppercase text-[10px] tracking-wider mb-0.5">{{ __('Starts') }}</dt>
                                <dd class="text-deep font-semibold">{{ date('d M Y', strtotime($deal->start_date)) }}</dd>
                                <dd class="text-slate-500 text-[11px]">{{ date('h:i A', strtotime($deal->start_date)) }}</dd>
                            </div>
                            <div class="bg-slate-50 rounded-lg px-2.5 py-2">
                                <dt class="text-slate-500 uppercase text-[10px] tracking-wider mb-0.5">{{ __('Ends') }}</dt>
                                <dd class="text-deep font-semibold">{{ date('d M Y', strtotime($deal->end_date)) }}</dd>
                                <dd class="text-slate-500 text-[11px]">{{ date('h:i A', strtotime($deal->end_date)) }}</dd>
                            </div>
                        </dl>

                        <a href="{{ route('flashdeals.view', ['id' => $deal->id, 'slug' => \Illuminate\Support\Str::slug($deal->title, '-')]) }}"
                           class="mt-auto inline-flex items-center justify-center gap-1.5 w-full {{ $isLive ? 'bg-deep hover:bg-saffron hover:text-deep text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700' }} font-semibold text-[13px] py-2.5 rounded-lg transition-colors">
                            {{ $isLive ? __('View Deal') : __('See Items') }}
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="m9 6 6 6-6 6"/></svg>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        @if(method_exists($deals, 'links'))
            <div class="mt-8 flex justify-center">
                {!! $deals->appends(request()->except('page'))->links() !!}
            </div>
        @endif
    @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="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>
            <h3 class="font-display font-extrabold text-xl">{{ __('No deals yet') }}</h3>
            <p class="text-slate-500 text-[13px] mt-2">{{ __('No flash sales have been configured. Check back soon!') }}</p>
            <a href="{{ url('/') }}" class="inline-block mt-5 text-brand-600 font-semibold hover:underline text-[14px]">← {{ __('Back to home') }}</a>
        </div>
    @endif
</section>

@endsection