@php
    // --- 1. Ad Banner Popup Settings ---
    $adEnabled = theme_option('ad_banner_popup_enabled', 'yes') === 'yes';
    $adImage = theme_option('ad_banner_popup_image');
    $adLink = theme_option('ad_banner_popup_link', url('/products'));
    $adOpenInNewTab = theme_option('ad_banner_popup_open_in_new_tab', 'no') === 'yes';
    $adDelay = (int) theme_option('ad_banner_popup_delay', 120);
    if ($adDelay <= 0) {
        $adDelay = 120;
    }
    $adFrequency = theme_option('ad_banner_popup_frequency', 'once_per_session');

    // --- 2. Discount Offer Modal Settings ---
    $offerEnabled = theme_option('banner_offer_modal_enabled', 'yes') === 'yes';
    $offerDelay = (int) theme_option('banner_offer_modal_delay', 60);
    if ($offerDelay <= 0) {
        $offerDelay = 60;
    }
    $offerFrequency = theme_option('banner_offer_modal_frequency', 'once_per_session');
    $offerImage = theme_option('banner_offer_modal_image');
    $offerBadge = theme_option('banner_offer_modal_badge', __('عرض حصري لزوارنا الكرام 🔥'));
    $offerTitle = theme_option('banner_offer_modal_title', __('وفر 20% على طلبك اليوم!'));
    $offerSubtitle = theme_option('banner_offer_modal_subtitle', __('استمتع بخصم إضافي على جميع المنتجات لفترة محدودة'));
    $offerDescription = theme_option('banner_offer_modal_description', __('انسخ كود الخصم واستخدمه في صفحة الدفع للحصول على خصم فوري على سلة مشترياتك!'));
    $offerCouponCode = theme_option('banner_offer_modal_coupon_code', 'OFFER20');
    $offerBtnText = theme_option('banner_offer_modal_btn_text', __('تسوق الآن واستفد من الخصم 🛍️'));
    $offerBtnUrl = theme_option('banner_offer_modal_btn_url', url('/products'));
    $offerShowCountdown = theme_option('banner_offer_modal_show_countdown', 'yes') === 'yes';
    $offerCountdownMinutes = (int) theme_option('banner_offer_modal_countdown_minutes', 15);
    if ($offerCountdownMinutes <= 0) {
        $offerCountdownMinutes = 15;
    }

    // --- 3. Color Brand Settings ---
    $colorBrand = theme_option('color_brand') ?: '#1d8751';
    $colorBrandDark = theme_option('color_brand_dark') ?: '#166b40';
    $colorBrand2 = theme_option('color_brand_2') ?: '#FDC040';
    $colorBrandRgb = implode(',', BaseHelper::hexToRgb($colorBrand));

    // Hide the coupon offer modal for a logged-in customer who already used it
    // (the plain image ad banner is not affected).
    if ($offerEnabled && auth('customer')->check()
        && app(\Theme\Nest\Services\CustomerDiscountService::class)->hasUsedWidget('banner_offer')) {
        $offerEnabled = false;
    }

    if (! $adEnabled && ! $offerEnabled) {
        return;
    }

    $offerClaimUrl = is_plugin_active('ecommerce') ? route('public.ajax.banner-offer.claim') : null;
    $offerCouponMode = theme_option('banner_offer_modal_coupon_mode', 'fixed');
    $offerLoginUrl = route('customer.login');
@endphp

{{-- ========================================================= --}}
{{-- 1. AD BANNER POPUP MODAL (Clean Image + Link, 2-Min Timer) --}}
{{-- ========================================================= --}}
@if ($adEnabled && $adImage)
    <div class="ad-banner-modal-overlay" id="adBannerModal" aria-hidden="true" role="dialog" aria-modal="true">
        <div class="ad-banner-backdrop" id="adBannerBackdrop"></div>

        <div class="ad-banner-dialog">
            <div class="ad-banner-card">
                <!-- Close Button -->
                <button type="button" class="ad-banner-close-btn" id="adBannerCloseBtn" aria-label="{{ __('Close') }}">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>

                <!-- Banner Graphic Link -->
                @if ($adLink)
                    <a href="{{ $adLink }}" @if($adOpenInNewTab) target="_blank" rel="noopener noreferrer" @endif class="ad-banner-link" id="adBannerLink">
                        <img src="{{ RvMedia::getImageUrl($adImage) }}" alt="{{ __('Ad Banner') }}" class="ad-banner-img" loading="eager" />
                    </a>
                @else
                    <div class="ad-banner-link">
                        <img src="{{ RvMedia::getImageUrl($adImage) }}" alt="{{ __('Ad Banner') }}" class="ad-banner-img" loading="eager" />
                    </div>
                @endif
            </div>
        </div>
    </div>
@endif

{{-- ========================================================= --}}
{{-- 2. DISCOUNT OFFER MODAL (Badge, Coupon, Countdown, CTA)   --}}
{{-- ========================================================= --}}
@if ($offerEnabled)
    <div class="banner-offer-modal-overlay" id="bannerOfferModal" aria-hidden="true" role="dialog" aria-modal="true">
        <div class="banner-offer-backdrop" id="bannerOfferBackdrop"></div>

        <div class="banner-offer-dialog">
            <div class="banner-offer-card @if($offerImage) with-image @endif">
                <!-- Close Button -->
                <button type="button" class="banner-offer-close-btn" id="bannerOfferCloseBtn" aria-label="{{ __('Close') }}">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>

                <!-- Visual Section -->
                @if ($offerImage)
                    <div class="banner-offer-visual-col">
                        <div class="banner-offer-img-wrapper">
                            {!! RvMedia::image($offerImage, $offerTitle, attributes: ['class' => 'banner-offer-img', 'loading' => 'lazy']) !!}
                            <div class="banner-offer-floating-tag">
                                <span>🎁 {{ __('خصم فوري') }}</span>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="banner-offer-hero-graphic">
                        <div class="hero-sparkles">
                            <span class="sparkle s1">✨</span>
                            <span class="sparkle s2">⭐</span>
                            <span class="sparkle s3">✨</span>
                        </div>
                        <div class="hero-center-icon">
                            <div class="icon-ring">
                                <span class="gift-emoji">🎁</span>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Offer Body -->
                <div class="banner-offer-body">
                    @if ($offerBadge)
                        <div class="banner-offer-badge-wrap">
                            <span class="banner-offer-badge">{{ $offerBadge }}</span>
                        </div>
                    @endif

                    @if ($offerTitle)
                        <h3 class="banner-offer-title">{!! BaseHelper::clean($offerTitle) !!}</h3>
                    @endif

                    @if ($offerSubtitle)
                        <p class="banner-offer-subtitle">{!! BaseHelper::clean($offerSubtitle) !!}</p>
                    @endif

                    @if ($offerDescription)
                        <p class="banner-offer-desc">{!! BaseHelper::clean($offerDescription) !!}</p>
                    @endif

                    <!-- Countdown Timer -->
                    @if ($offerShowCountdown)
                        <div class="banner-offer-timer-box">
                            <div class="timer-label">
                                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="timer-icon">
                                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
                                </svg>
                                <span>{{ __('ينتهي هذا العرض خلال') }}:</span>
                            </div>
                            <div class="timer-digits" id="bannerOfferCountdown">
                                <div class="time-part">
                                    <span class="time-num" id="offerMins">{{ sprintf('%02d', $offerCountdownMinutes) }}</span>
                                    <span class="time-txt">{{ __('دقيقة') }}</span>
                                </div>
                                <span class="time-divider">:</span>
                                <div class="time-part">
                                    <span class="time-num" id="offerSecs">00</span>
                                    <span class="time-txt">{{ __('ثانية') }}</span>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Coupon Code Ticket -->
                    @if ($offerCouponCode)
                        <div class="banner-offer-coupon-ticket" id="bannerOfferCouponBox" role="button" tabindex="0" title="{{ __('انقر لنسخ الكوبون') }}">
                            <div class="ticket-cut left"></div>
                            <div class="ticket-cut right"></div>
                            <div class="coupon-info">
                                <span class="coupon-label">{{ __('كود الخصم') }}:</span>
                                <span class="coupon-code-text" id="bannerOfferCodeText" @if($offerCouponMode === 'unique') data-locked="1" @endif>{{ $offerCouponMode === 'unique' ? __('اضغط للكشف 👆') : $offerCouponCode }}</span>
                            </div>
                            <button type="button" class="coupon-copy-action" id="bannerOfferCopyBtn" aria-label="{{ __('نسخ الكود') }}">
                                <svg class="copy-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                                <span class="copy-status-text" id="bannerOfferCopyStatus">{{ __('نسخ الكود') }}</span>
                            </button>
                        </div>
                    @endif

                    <!-- Actions -->
                    @if ($offerBtnText && $offerBtnUrl)
                        <div class="banner-offer-actions">
                            <a href="{{ $offerBtnUrl }}" class="banner-offer-cta-btn" id="bannerOfferCtaBtn">
                                <span>{{ $offerBtnText }}</span>
                                <span class="cta-arrow">&larr;</span>
                            </a>
                            <button type="button" class="banner-offer-dismiss-btn" id="bannerOfferDismissBtn">
                                {{ __('لا شكراً، سأتسوق لاحقاً') }}
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif

<style>
/* ==================================================== */
/* Brand Color Variables Scoped for Popups              */
/* ==================================================== */
:root,
.banner-offer-modal-overlay,
.ad-banner-modal-overlay {
    --modal-brand: var(--color-brand, {{ $colorBrand }});
    --modal-brand-dark: var(--color-brand-dark, {{ $colorBrandDark }});
    --modal-brand-rgb: var(--color-brand-rgb, {{ $colorBrandRgb }});
}

/* ==================================================== */
/* 1. Ad Banner Popup Styles                            */
/* ==================================================== */
.ad-banner-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483646 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.ad-banner-modal-overlay.show-ad-modal {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ad-banner-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.ad-banner-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 680px;
    transform: scale(0.92) translateY(15px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ad-banner-modal-overlay.show-ad-modal .ad-banner-dialog {
    transform: scale(1) translateY(0);
}

.ad-banner-card {
    position: relative;
    background: transparent;
    border-radius: 18px;
    overflow: visible;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.ad-banner-close-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #1e293b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
    padding: 0;
}

[dir="rtl"] .ad-banner-close-btn {
    right: auto;
    left: -14px;
}

.ad-banner-close-btn:hover {
    background: var(--modal-brand);
    color: #ffffff;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 18px rgba(var(--modal-brand-rgb), 0.4);
}

.ad-banner-link {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    text-decoration: none;
    line-height: 0;
    background: #ffffff;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.ad-banner-link:hover {
    filter: brightness(1.02);
}

.ad-banner-link:focus {
    outline: 3px solid var(--modal-brand);
}

.ad-banner-img {
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    margin: 0 auto;
}

/* ==================================================== */
/* 2. Discount Offer Modal Styles                       */
/* ==================================================== */
.banner-offer-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483645 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    direction: rtl;
    font-family: 'Quicksand', 'Tajawal', sans-serif, system-ui;
}

.banner-offer-modal-overlay.show-banner-modal {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.banner-offer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.35s ease;
    cursor: pointer;
}

.banner-offer-dialog {
    position: relative;
    z-index: 2;
    max-width: 540px;
    width: 100%;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.banner-offer-modal-overlay.show-banner-modal .banner-offer-dialog {
    transform: scale(1) translateY(0);
}

.banner-offer-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--modal-brand-rgb), 0.15);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.banner-offer-card.with-image {
    max-width: 600px;
}

.banner-offer-close-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
    padding: 0;
}

.banner-offer-close-btn:hover {
    background: var(--modal-brand);
    color: #ffffff;
    border-color: var(--modal-brand);
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--modal-brand-rgb), 0.4);
}

.banner-offer-visual-col {
    position: relative;
    width: 100%;
    max-height: 240px;
    overflow: hidden;
}

.banner-offer-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-offer-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.banner-offer-floating-tag {
    position: absolute;
    bottom: 12px;
    right: 16px;
    background: var(--modal-brand);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(var(--modal-brand-rgb), 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.banner-offer-hero-graphic {
    position: relative;
    background: linear-gradient(135deg, var(--color-heading, #253D4E) 0%, var(--modal-brand) 100%);
    padding: 32px 20px 24px;
    overflow: hidden;
}

.hero-sparkles .sparkle {
    position: absolute;
    animation: sparkleFloat 2.5s infinite ease-in-out;
    opacity: 0.85;
}
.hero-sparkles .s1 { top: 15%; right: 20%; font-size: 22px; animation-delay: 0s; }
.hero-sparkles .s2 { top: 25%; left: 18%; font-size: 18px; animation-delay: 0.8s; }
.hero-sparkles .s3 { bottom: 15%; right: 30%; font-size: 20px; animation-delay: 1.4s; }

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

.hero-center-icon {
    display: inline-flex;
    position: relative;
}

.hero-center-icon .icon-ring {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 2px dashed rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 20px rgba(var(--modal-brand-rgb), 0.3);
    animation: pulseRing 2s infinite ease-in-out, spinCircle 15s infinite linear;
}

.hero-center-icon .gift-emoji {
    font-size: 38px;
    display: inline-block;
    animation: counterSpinCircle 15s infinite linear;
}

@keyframes pulseRing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

@keyframes spinCircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes counterSpinCircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.banner-offer-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-offer-badge-wrap {
    margin-bottom: 12px;
}

.banner-offer-badge {
    display: inline-block;
    background: rgba(var(--modal-brand-rgb), 0.1);
    color: var(--modal-brand);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(var(--modal-brand-rgb), 0.25);
    letter-spacing: 0.2px;
}

.banner-offer-title {
    color: var(--color-heading, #253D4E);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 8px;
}

.banner-offer-subtitle {
    color: var(--modal-brand);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.banner-offer-desc {
    color: #7E7E7E;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 440px;
}

.banner-offer-timer-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(var(--modal-brand-rgb), 0.04);
    border-radius: 14px;
    padding: 8px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--modal-brand-rgb), 0.12);
}

.banner-offer-timer-box .timer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

.banner-offer-timer-box .timer-icon {
    color: var(--modal-brand);
}

.banner-offer-timer-box .timer-digits {
    display: flex;
    align-items: center;
    gap: 6px;
}

.banner-offer-timer-box .time-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 3px 8px;
    min-width: 36px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(var(--modal-brand-rgb), 0.08);
}

.banner-offer-timer-box .time-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--modal-brand-dark);
    line-height: 1.2;
}

.banner-offer-timer-box .time-txt {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 600;
}

.banner-offer-timer-box .time-divider {
    font-weight: 800;
    color: var(--color-heading, #253D4E);
    font-size: 16px;
    line-height: 1;
}

.banner-offer-coupon-ticket {
    position: relative;
    width: 100%;
    max-width: 380px;
    min-height: 64px;
    background: #ffffff;
    border: 2px dashed var(--modal-brand);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.banner-offer-coupon-ticket:hover {
    border-color: var(--modal-brand-dark);
    box-shadow: 0 6px 18px rgba(var(--modal-brand-rgb), 0.18);
}

.coupon-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ticket-cut {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px dashed var(--modal-brand);
}
.ticket-cut.left { left: -8px; border-left: none; }
.ticket-cut.right { right: -8px; border-right: none; }

.coupon-info {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}

.coupon-label {
    font-size: 13px;
    color: #64748B;
    font-weight: 600;
}

.coupon-code-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 38px;
    font-size: 16px;
    font-weight: 800;
    color: var(--modal-brand-dark);
    letter-spacing: 1px;
    background: rgba(var(--modal-brand-rgb), 0.1);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: monospace, system-ui;
    border: 1px solid rgba(var(--modal-brand-rgb), 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.coupon-code-text[data-locked="1"] {
    font-family: inherit;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--modal-brand);
}

.coupon-copy-action {
    flex: 0 0 auto;
    min-width: 110px;
    justify-content: center;
    background: var(--modal-brand);
    color: #ffffff;
    border: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.coupon-copy-action:hover {
    background: var(--modal-brand-dark);
}

.coupon-copy-action.copied {
    background: var(--modal-brand-dark) !important;
}

.banner-offer-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.banner-offer-cta-btn {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(135deg, var(--modal-brand) 0%, var(--modal-brand-dark) 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(var(--modal-brand-rgb), 0.35);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.banner-offer-cta-btn:hover {
    background: linear-gradient(135deg, var(--modal-brand-dark) 0%, var(--modal-brand) 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--modal-brand-rgb), 0.45);
}

.banner-offer-cta-btn .cta-arrow {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.banner-offer-cta-btn:hover .cta-arrow {
    transform: translateX(-4px);
}

.banner-offer-dismiss-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s ease;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.banner-offer-dismiss-btn:hover {
    color: var(--modal-brand);
}

@media (max-width: 768px) {
    .ad-banner-dialog {
        max-width: 94vw;
    }
    .ad-banner-close-btn {
        top: -12px;
        right: -8px;
        width: 32px;
        height: 32px;
    }
    [dir="rtl"] .ad-banner-close-btn {
        right: auto;
        left: -8px;
    }
}

@media (max-width: 576px) {
    .banner-offer-dialog {
        max-width: 100%;
    }
    .banner-offer-body {
        padding: 20px 16px 22px;
    }
    .banner-offer-title {
        font-size: 20px;
    }
    .banner-offer-subtitle {
        font-size: 14px;
    }
    .banner-offer-coupon-ticket {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }
    .coupon-info {
        justify-content: center;
    }
    .coupon-copy-action {
        width: 100%;
        justify-content: center;
    }
    .banner-offer-img {
        height: 180px;
    }
}
</style>

{{-- ========================================================= --}}
{{-- 3. JAVASCRIPT CONTROLLER FOR BOTH POPUPS                  --}}
{{-- ========================================================= --}}
<script>
(function() {
    // Global tracker function to check if discount has appeared
    function hasDiscountAppeared() {
        // Direct testing query param bypasses suppression
        if (window.location.search.indexOf('open_ad_popup=1') !== -1 || window.location.hash === '#ad-popup') {
            return false;
        }

        if (window.discountModalHasAppeared === true) {
            return true;
        }

        try {
            if (sessionStorage.getItem('nest_discount_has_appeared') === '1' ||
                sessionStorage.getItem('botble_banner_offer_shown_session') === '1') {
                return true;
            }

            const offerModal = document.getElementById('bannerOfferModal');
            if (offerModal && offerModal.classList.contains('show-banner-modal')) {
                return true;
            }

            const lastDiscount = localStorage.getItem('nest_discount_last_appeared_time') || localStorage.getItem('botble_banner_offer_last_shown_time');
            if (lastDiscount && ((Date.now() - parseInt(lastDiscount, 10)) / (1000 * 60 * 60)) < 24) {
                return true;
            }
        } catch(e) {}

        return false;
    }

    // --- AD BANNER POPUP LOGIC ---
    @if ($adEnabled && $adImage)
    (function initAdBannerModal() {
        const AD_STORAGE_SESSION = 'nest_ad_popup_shown_session';
        const AD_STORAGE_DAILY = 'nest_ad_popup_last_shown_time';
        const AD_STORAGE_TIMER = 'nest_ad_browsing_elapsed_sec';
        const AD_FREQUENCY = '{{ $adFrequency }}';
        const AD_DELAY_SECONDS = {{ $adDelay }};
        let adInterval = null;

        function hasAdBeenShown() {
            if (window.location.search.indexOf('open_ad_popup=1') !== -1 || window.location.hash === '#ad-popup') {
                return false;
            }

            // If discount appeared, suppress ads banner
            if (hasDiscountAppeared()) {
                return true;
            }

            if (AD_FREQUENCY === 'always') return false;
            if (AD_FREQUENCY === 'once_per_day') {
                try {
                    const last = localStorage.getItem(AD_STORAGE_DAILY);
                    if (last && ((Date.now() - parseInt(last, 10)) / (1000 * 60 * 60)) < 24) return true;
                } catch(e) {}
                return false;
            }
            try {
                return sessionStorage.getItem(AD_STORAGE_SESSION) === '1';
            } catch(e) { return false; }
        }

        function markAdAsShown() {
            try { sessionStorage.setItem(AD_STORAGE_SESSION, '1'); } catch(e) {}
            try { localStorage.setItem(AD_STORAGE_DAILY, Date.now().toString()); } catch(e) {}
        }

        function openAdModal() {
            // Strict check: if discount appeared, do not open ad banner
            if (hasDiscountAppeared()) {
                return;
            }

            const modal = document.getElementById('adBannerModal');
            if (!modal) return;

            const offerModal = document.getElementById('bannerOfferModal');
            if (offerModal && offerModal.classList.contains('show-banner-modal')) {
                return;
            }

            modal.classList.add('show-ad-modal');
            modal.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
            markAdAsShown();
        }

        function closeAdModal() {
            const modal = document.getElementById('adBannerModal');
            if (!modal) return;
            modal.classList.remove('show-ad-modal');
            modal.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
        }

        const closeBtn = document.getElementById('adBannerCloseBtn');
        const backdrop = document.getElementById('adBannerBackdrop');
        if (closeBtn) closeBtn.addEventListener('click', closeAdModal);
        if (backdrop) backdrop.addEventListener('click', closeAdModal);

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' || e.keyCode === 27) closeAdModal();
        });

        // Instant preview
        if (window.location.search.indexOf('open_ad_popup=1') !== -1 || window.location.hash === '#ad-popup') {
            setTimeout(openAdModal, 300);
            return;
        }

        if (hasDiscountAppeared() || hasAdBeenShown()) return;

        let elapsedSec = 0;
        try {
            elapsedSec = parseInt(sessionStorage.getItem(AD_STORAGE_TIMER) || '0', 10);
        } catch(e) { elapsedSec = 0; }

        if (elapsedSec >= AD_DELAY_SECONDS) {
            openAdModal();
            return;
        }

        adInterval = setInterval(function() {
            if (hasDiscountAppeared() || hasAdBeenShown()) {
                clearInterval(adInterval);
                return;
            }
            elapsedSec++;
            try { sessionStorage.setItem(AD_STORAGE_TIMER, elapsedSec.toString()); } catch(e) {}

            if (elapsedSec >= AD_DELAY_SECONDS) {
                clearInterval(adInterval);
                openAdModal();
            }
        }, 1000);
        window.adBannerInterval = adInterval;
    })();
    @endif

    // --- DISCOUNT OFFER MODAL LOGIC ---
    @if ($offerEnabled)
    (function initDiscountOfferModal() {
        const OFFER_STORAGE_SESSION = 'botble_banner_offer_shown_session';
        const OFFER_STORAGE_DAILY = 'botble_banner_offer_last_shown_time';
        const OFFER_FREQUENCY = '{{ $offerFrequency }}';
        const OFFER_DELAY_SECONDS = {{ $offerDelay }};
        let timerInterval = null;

        function hasOfferBeenShown() {
            if (window.location.search.indexOf('open_discount_popup=1') !== -1 ||
                window.location.search.indexOf('open_banner_offer=1') !== -1 ||
                window.location.hash === '#banner-offer') {
                return false;
            }
            if (OFFER_FREQUENCY === 'always') return false;
            if (OFFER_FREQUENCY === 'once_per_day') {
                try {
                    const last = localStorage.getItem(OFFER_STORAGE_DAILY);
                    if (last && ((Date.now() - parseInt(last, 10)) / (1000 * 60 * 60)) < 24) return true;
                } catch(e) {}
                return false;
            }
            try {
                return sessionStorage.getItem(OFFER_STORAGE_SESSION) === '1';
            } catch(e) { return false; }
        }

        function markOfferAsShown() {
            try { sessionStorage.setItem(OFFER_STORAGE_SESSION, '1'); } catch(e) {}
            try { localStorage.setItem(OFFER_STORAGE_DAILY, Date.now().toString()); } catch(e) {}
        }

        function openOfferModal() {
            const overlay = document.getElementById('bannerOfferModal');
            if (!overlay) return;

            // RULE: If discount appears, ads banner MUST NOT appear!
            window.discountModalHasAppeared = true;
            try {
                sessionStorage.setItem('nest_discount_has_appeared', '1');
                localStorage.setItem('nest_discount_last_appeared_time', Date.now().toString());
            } catch(e) {}

            // Immediately suppress / close ad banner modal and stop its timer
            if (window.adBannerInterval) {
                clearInterval(window.adBannerInterval);
            }
            const adModal = document.getElementById('adBannerModal');
            if (adModal) {
                adModal.classList.remove('show-ad-modal');
                adModal.setAttribute('aria-hidden', 'true');
            }

            overlay.classList.add('show-banner-modal');
            overlay.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
            markOfferAsShown();
            startCountdown();
        }

        function closeOfferModal() {
            const overlay = document.getElementById('bannerOfferModal');
            if (!overlay) return;
            overlay.classList.remove('show-banner-modal');
            overlay.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
            if (timerInterval) clearInterval(timerInterval);
        }

        function startCountdown() {
            if (timerInterval) return;
            const minsEl = document.getElementById('offerMins');
            const secsEl = document.getElementById('offerSecs');
            if (!minsEl || !secsEl) return;
            let rem = {{ $offerCountdownMinutes }} * 60;
            timerInterval = setInterval(() => {
                if (rem <= 0) {
                    clearInterval(timerInterval);
                    return;
                }
                rem--;
                const m = Math.floor(rem / 60);
                const s = rem % 60;
                minsEl.textContent = m < 10 ? '0' + m : m;
                secsEl.textContent = s < 10 ? '0' + s : s;
            }, 1000);
        }

        function copyCoupon() {
            const codeEl = document.getElementById('bannerOfferCodeText');
            const copyBtn = document.getElementById('bannerOfferCopyBtn');
            const copyStatus = document.getElementById('bannerOfferCopyStatus');
            if (!codeEl) return;
            const text = codeEl.textContent.trim();
            if (!text) return;

            const updateUI = () => {
                if (copyStatus) copyStatus.textContent = '{{ __("تم النسخ! ✓") }}';
                if (copyBtn) copyBtn.classList.add('copied');
                setTimeout(() => {
                    if (copyStatus) copyStatus.textContent = '{{ __("نسخ الكود") }}';
                    if (copyBtn) copyBtn.classList.remove('copied');
                }, 2500);
            };

            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(updateUI).catch(() => fallback(text, updateUI));
            } else {
                fallback(text, updateUI);
            }
        }

        function fallback(text, cb) {
            try {
                const ta = document.createElement("textarea");
                ta.value = text;
                ta.style.position = "fixed";
                ta.style.opacity = "0";
                document.body.appendChild(ta);
                ta.focus();
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
                if (cb) cb();
            } catch(e) {}
        }

        const closeBtn = document.getElementById('bannerOfferCloseBtn');
        const backdrop = document.getElementById('bannerOfferBackdrop');
        const dismissBtn = document.getElementById('bannerOfferDismissBtn');
        const copyBtn = document.getElementById('bannerOfferCopyBtn');
        const couponBox = document.getElementById('bannerOfferCouponBox');

        if (closeBtn) closeBtn.addEventListener('click', closeOfferModal);
        if (backdrop) backdrop.addEventListener('click', closeOfferModal);
        if (dismissBtn) dismissBtn.addEventListener('click', closeOfferModal);

        // ---- Coupon claim (fixed shows the same code; unique swaps in a
        //      one-time code returned by the server, then copies/applies it) ----
        const claimUrl = @json($offerClaimUrl);
        const couponMode = @json($offerCouponMode);
        const offerLoginUrl = @json($offerLoginUrl);
        let claimedCode = null;
        let claimRedirecting = false;

        // Send guests to login, then return with the offer re-opened.
        function goToLoginForOffer() {
            const back = window.location.origin + window.location.pathname + '?open_discount_popup=1';
            window.location.href = offerLoginUrl + '?redirect=' + encodeURIComponent(back);
        }

        // Resolves to the code to use, or null when it cannot proceed
        // (guest -> redirected to login, or the customer already used it).
        function ensureClaimed() {
            const codeEl = document.getElementById('bannerOfferCodeText');
            const shownCode = codeEl ? codeEl.textContent.trim() : '';

            // Fixed mode with the code already visible: nothing to fetch.
            if (!claimUrl) {
                return Promise.resolve(couponMode === 'unique' ? null : shownCode);
            }
            if (claimedCode) {
                return Promise.resolve(claimedCode);
            }
            const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
            return fetch(claimUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                credentials: 'same-origin',
                body: '{}'
            }).then((r) => r.json()).then((json) => {
                const data = json && json.data ? json.data : {};
                if (data.require_login) {
                    claimRedirecting = true;
                    goToLoginForOffer();
                    return null;
                }
                if (data.already_used) {
                    return null;
                }
                if (couponMode === 'unique') {
                    // Only reveal a real generated code; never expose the placeholder.
                    if (!data.coupon_code) {
                        if (codeEl) codeEl.textContent = '{{ __('الكوبون غير متاح حالياً') }}';
                        return null;
                    }
                    claimedCode = data.coupon_code;
                    if (codeEl) {
                        codeEl.textContent = data.coupon_code;
                        codeEl.removeAttribute('data-locked');
                    }
                    return claimedCode;
                }
                claimedCode = data.coupon_code || shownCode;
                return claimedCode;
            }).catch(() => null);
        }

        if (couponBox) {
            couponBox.addEventListener('click', function() {
                ensureClaimed().then((code) => { if (code) copyCoupon(); });
            });
        }
        if (copyBtn) {
            copyBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                ensureClaimed().then((code) => { if (code) copyCoupon(); });
            });
        }

        // CTA: reveal/keep the coupon, then continue shopping.
        const ctaBtn = document.getElementById('bannerOfferCtaBtn');
        if (ctaBtn && claimUrl) {
            ctaBtn.addEventListener('click', function(e) {
                const target = ctaBtn.getAttribute('href');
                e.preventDefault();
                ensureClaimed().then(() => {
                    if (claimRedirecting) return; // heading to login
                    if (target) window.location.href = target;
                });
            });
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' || e.keyCode === 27) closeOfferModal();
        });

        // Instant preview
        if (window.location.search.indexOf('open_discount_popup=1') !== -1 ||
            window.location.search.indexOf('open_banner_offer=1') !== -1 ||
            window.location.hash === '#banner-offer') {
            setTimeout(openOfferModal, 300);
            return;
        }

        if (!hasOfferBeenShown()) {
            setTimeout(function() {
                if (!hasOfferBeenShown()) openOfferModal();
            }, OFFER_DELAY_SECONDS * 1000);
        }
    })();
    @endif
})();
</script>