@extends('layouts.front-end.app')

@section('title', ($promotion->name ?? translate('promotion_products')) . ' | ' . ($web_config['name']->value ?? ''))

@push('css_or_js')
    <meta property="og:image" content="{{ $web_config['web_logo']['path'] ?? '' }}"/>
    <meta property="og:title" content="{{ $promotion->name }} - {{ $web_config['name']->value ?? '' }}"/>
    <meta property="og:url" content="{{ env('APP_URL') }}">
    <meta property="og:description" content="{{ substr(strip_tags(str_replace('&nbsp;', ' ', $web_config['about']->value ?? '')),0,160) }}">

    <meta property="twitter:card" content="{{ $web_config['web_logo']['path'] ?? '' }}"/>
    <meta property="twitter:title" content="{{ $promotion->name }} - {{ $web_config['name']->value ?? '' }}"/>
    <meta property="twitter:url" content="{{ env('APP_URL') }}">
    <meta property="twitter:description" content="{{ substr(strip_tags(str_replace('&nbsp;', ' ', $web_config['about']->value ?? '')),0,160) }}">

    <style>
        .countdown-background { background: var(--web-primary); }
        .cz-countdown-days,
        .cz-countdown-hours,
        .cz-countdown-minutes,
        .cz-countdown-seconds { border: .5px solid var(--web-primary); }
        .flash_deal_product_details .flash-product-price { color: var(--web-primary); }
        .__flash-deals-bg { border-radius: 12px; overflow: hidden; }
        .promo-title { font-weight: 700; font-size: 24px; }
        .promo-badge { vertical-align: baseline; }
    </style>
@endpush

@section('content')
@php
    $decimal_point_settings = getWebConfig(name: 'decimal_point_settings') ?? 0;

    $hasTimer = !is_null($promotion->ends_at);
    $now   = \Carbon\Carbon::now();
    $start = $promotion->starts_at ? \Carbon\Carbon::parse($promotion->starts_at) : $now;
    $end   = $promotion->ends_at   ? \Carbon\Carbon::parse($promotion->ends_at)   : $now;

    $total   = max($end->diffInSeconds($start), 1);
    $elapsed = min(max($now->diffInSeconds($start), 0), $total);
    $progress = $hasTimer ? ($elapsed / $total) * 100 : 0;

    // صورة بانر احتياطية إن ما في بانر مخصّص
    $deal_banner = theme_asset(path: 'public/assets/front-end/img/flash-deals.png');
@endphp

<div class="__inline-59 pt-md-3">
    {{-- هيدر العرض: بانر + عدّاد (إن وجد) --}}
    <div class="container md-4 mt-3 rtl text-align-direction">
        <div class="__flash-deals-bg" style="background: url({{ $deal_banner }}) no-repeat center center / cover">
            <div class="row g-3 justify-content-end align-items-center">
                @if($hasTimer)
                    <div class="col-lg-4 col-md-6">
                        <div class="countdown-card bg-transparent">
                            <div class="text-center text-white">
                                <div class="countdown-background">
                                    <span class="cz-countdown d-flex justify-content-center align-items-center"
                                          data-countdown="{{ $promotion->ends_at?->format('m/d/Y') }} 23:59:00">
                                        <span class="cz-countdown-days">
                                            <span class="cz-countdown-value"></span>
                                            <span class="cz-countdown-text">{{ translate('days') }}</span>
                                        </span>
                                        <span class="cz-countdown-value p-1">:</span>
                                        <span class="cz-countdown-hours">
                                            <span class="cz-countdown-value"></span>
                                            <span class="cz-countdown-text">{{ translate('hrs') }}</span>
                                        </span>
                                        <span class="cz-countdown-value p-1">:</span>
                                        <span class="cz-countdown-minutes">
                                            <span class="cz-countdown-value"></span>
                                            <span class="cz-countdown-text">{{ translate('min') }}</span>
                                        </span>
                                        <span class="cz-countdown-value p-1">:</span>
                                        <span class="cz-countdown-seconds">
                                            <span class="cz-countdown-value"></span>
                                            <span class="cz-countdown-text">{{ translate('sec') }}</span>
                                        </span>
                                    </span>

                                    <div class="progress __progress">
                                        <div class="progress-bar flash-deal-progress-bar" role="progressbar"
                                             style="width: {{ number_format($progress, 2) }}%"
                                             aria-valuenow="{{ number_format($progress,0) }}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- عنوان العرض + وصف مختصر/شارة الخصم --}}
    <div class="container pb-2 mt-3 rtl text-align-direction">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-7 my-2 {{ Session::get('direction') === 'rtl' ? 'text-sm-right' : 'text-sm-left' }}">
                <div class="promo-title">
                    {{ $promotion->name }}
                    @if($promotion->discount_percent)
                        <span class="badge badge-soft-danger promo-badge ml-2">-{{ (float) $promotion->discount_percent }}%</span>
                    @endif
                </div>
                @if(!empty($promotion->description))
                    <span class="fs-14 text-muted">{{ $promotion->description }}</span>
                @else
                    <span class="fs-14 text-muted">{{ translate('enjoy_the_best_offers_on_selected_items') }}</span>
                @endif
            </div>
        </div>
    </div>

    {{-- شبكة المنتجات --}}
    <div class="container pb-5 mb-2 mb-md-4 rtl text-align-direction">
        <section class="col-lg-12">
            @if($products->count() > 0)
                <div class="row g-3 mt-2">
                    @foreach($products as $product)
                        <div class="col--xl-2 col-sm-4 col-lg-3 col-6">
                            {{-- يمكنك التبديل بين الكرتين حسب هويتك: _inline-single-product أو _product-card-1 --}}
                            @include('web-views.partials._inline-single-product', [
                                'product' => $product,
                                'decimal_point_settings' => $decimal_point_settings
                            ])
                        </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                @if(method_exists($products, 'links'))
                    <div class="d-flex justify-content-center mt-4">
                        {{ $products->links() }}
                    </div>
                @endif
            @else
                <div class="py-5 text-center text-muted">
                    {{ translate('no_products_found') }}
                </div>
            @endif
        </section>
    </div>
</div>
@endsection

@push('script')
    {{-- نفس سكربت العدّاد المستعمل في الفلاش ديلز --}}
    <script src="{{ theme_asset(path: 'public/assets/front-end/js/deals.js') }}"></script>
@endpush