@extends('layouts.app')

@section('title', $campaign->name)

@section('content')
<section class="campaign-detail">
    <div class="campaign-detail__hero">
        @if($campaign->banner)
            <picture>
                @if(image_has_webp($campaign->banner))
                    <source type="image/webp" srcset="{{ image_webp_url($campaign->banner) }}">
                @endif
                <img src="{{ asset('images/' . $campaign->banner) }}" alt="{{ $campaign->name }}" decoding="async" fetchpriority="high">
            </picture>
        @else
            <span class="campaign-detail__fallback"></span>
        @endif
        <div>
            @if((float) $campaign->discount_percent > 0)
                <p>{{ number_format((float) $campaign->discount_percent, 0) }}% endirim</p>
            @endif
            <h1>{{ $campaign->name }}</h1>
            <span>
                {{ $campaign->start_at?->format('d.m.Y') ?: 'Aktiv' }}
                —
                {{ $campaign->end_at?->format('d.m.Y') ?: 'Müddətsiz' }}
            </span>
        </div>
    </div>

    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
        @if($campaign->products->isEmpty())
            <div class="rounded-2xl bg-[#231e1b] p-8 text-white/65">Bu kampaniyaya hələ məhsul əlavə olunmayıb.</div>
        @else
            <div class="campaign-products">
                @foreach($campaign->products as $product)
                    @include('partials.product-grid-card', ['product' => $product])
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection