@if($activePromotion && $promotionProducts->count() > 0)
@php
    $decimal_point_settings = $decimal_point_settings ?? (getWebConfig(name: 'decimal_point_settings') ?? 0);

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

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

<section class="overflow-hidden">
    <div class="container px-0 px-md-3">
        <div class="flash-deals-wrapper"><!-- نحافظ على نفس الحاوية والستايلات -->

            <div class="flash-deal-view-all-web row d-flex justify-content-between align-items-center mb-3 mx-0">
                <div class="web-text-primary">
                    <span class="featured_deal_title font-bold text-dark">
                        {{ $activePromotion->name }}
                    </span>
                    @if($activePromotion->discount_percent)
                        <span class="badge badge-soft-danger ml-2">-{{ (float)$activePromotion->discount_percent }}%</span>
                    @endif
                </div>

                {{-- View all (ويب) --}}
                <div class="d-none d-md-block">
                    <a class="text-capitalize view-all-text web-text-primary"
                       href="{{ route('promotions.view', $activePromotion->id) }}">
                        {{ translate('view_all') }}
                        <i class="czi-arrow-{{ Session::get('direction') === 'rtl' ? 'left mr-1 ml-n1 mt-1 float-left' : 'right ml-1 mr-n1' }}"></i>
                    </a>
                </div>
            </div>

            <div class="row g-3 mx-max-md-0">
                {{-- البطاقة الجانبية: عدّاد + شريط تقدم (إن وُجد تاريخ انتهاء) --}}
                @if($hasTimer)
                    <div class="col-lg-4 px-max-md-0 flashdeal-responsive">
                        <a href="{{ route('promotions.view', $activePromotion->id) }}" class="countdown-card bg-transparent">
                            <div class="flash-deal-text web-text-primary">
                                <div>
                                    <span>{{ translate('promotion') }}</span>
                                </div>
                                <small>{{ translate('hurry_Up') }} ! {{ translate('the_offer_is_limited') }}. {{ translate('grab_while_it_lasts') }}</small>
                            </div>
                            <div class="text-center text-white">
                                <div class="countdown-background">
                                    <span class="cz-countdown d-flex justify-content-center align-items-center flash-deal-countdown"
                                          data-countdown="{{ $activePromotion->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>
                        </a>
                    </div>

                    {{-- Desktop carousel --}}
                    <div class="col-lg-8 d-none d-md-block px-max-md-0">
                        <div class="owl-theme owl-carousel flash-deal-slider">
                              @foreach($promotionProducts->take(10) as $product)
                                @include('web-views.partials._inline-single-product', [
                                'product' => $product,
                                'decimal_point_settings' => $decimal_point_settings
                            ])
                            @endforeach
                        </div>
                    </div>

                    {{-- Mobile carousel --}}
                    <div class="col-12 pb-0 d-md-none px-max-md-0">
                        <div class="owl-theme owl-carousel flash-deal-slider-mobile">
                            @foreach($promotionProducts->take(10) as $product)
                                @include('web-views.partials._inline-single-product', [
                                'product' => $product,
                                'decimal_point_settings' => $decimal_point_settings
                            ])
                            @endforeach
                        </div>
                    </div>
                @else
                    {{-- بدون عدّاد: نعتمد سلايدر واحد بعرض واسع --}}
                    <div class="col-12 px-max-md-0">
                        <div class="owl-theme owl-carousel new-arrivals-product">
                             @foreach($promotionProducts->take(10) as $product)
                                @include('web-views.partials._inline-single-product', [
                                'product' => $product,
                                'decimal_point_settings' => $decimal_point_settings
                            ])
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- View all (موبايل) --}}
                <div class="col-12 d-md-none text-center px-max-md-0 mt-2">
                    <a class="text-capitalize view-all-text web-text-primary"
                       href="{{ route('promotions.view', $activePromotion->id) }}">
                        {{ translate('view_all') }}
                        <i class="czi-arrow-{{ Session::get('direction') === 'rtl' ? 'left mr-1 ml-n1 mt-1 float-left' : 'right ml-1 mr-n1' }}"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>
</section>
@endif