@extends('frontEnd.layouts.master')

@section('title', $seo->meta_title ?? 'Home')

@push('seo')
<meta name="app-url" content="{{ url('/') }}" />
<meta name="robots" content="index, follow" />
<meta name="description" content="{{ $seo->meta_description ?? '' }}" />
<meta name="keywords" content="{{ $seo->meta_tags ?? '' }}" />
<meta property="og:title" content="{{ $seo->meta_title ?? '' }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ url()->current() }}" />
<meta property="og:image" content="{{ asset($generalsetting?->og_baner ?? 'public/logo.png') }}" />
<meta property="og:description" content="{{ $seo->meta_description ?? '' }}" />
@if(!empty($seo->search_console_verification))
<meta name="google-site-verification" content="{{ $seo->search_console_verification }}">
@endif
@endpush

@push('css')
<link rel="stylesheet" href="{{ asset('frontEnd/css/owl.carousel.min.css') }}" />
<link rel="stylesheet" href="{{ asset('frontEnd/css/owl.theme.default.min.css') }}" />
<style>
    :root {
        --pro-primary: #ffffff;    /* Background */
        --pro-secondary: #E31019;  /* Shwapno Red */
        --pro-accent: #FFD814;     /* Shwapno Yellow */
        --pro-green: #00A651;      /* Fresh Green */
        --pro-slate-50: #f8fafc;
        --pro-slate-100: #E8EAED;
        --pro-slate-500: #777777;
        --pro-slate-900: #222222;
    }

    body {
        background-color: var(--pro-primary);
        color: var(--pro-slate-900);
        font-family: 'Inter', sans-serif;
    }

    body, #content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    #content {
        padding-top: 115px !important; /* Desktop offset */
    }
    @media (max-width: 991px) {
        #content {
            padding-top: 75px !important; /* Reduced for smaller navbar */
        }
    }

    /* Shwapno Style Banner */
    .slider-section {
        padding-bottom: 0 !important;
        background: #fff;
    }
    .slider-pro-wrap {
        border-radius: 0;
        overflow: hidden;
        position: relative;
    }
    .slider-pro-wrap img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }
    .slider-item:hover img {
        transform: scale(1.02);
    }
    /* Global Owl Carousel Navigation Styling (Yellow Box Style - 24px) */
    .owl-carousel .owl-nav {
        display: block !important;
    }
    .owl-carousel .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--pro-accent) !important; /* Shwapno Yellow */
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 6px !important; /* Rounded Box */
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease !important;
        opacity: 1 !important;
        z-index: 1000 !important;
        color: #000 !important; /* Black Icon */
        border: none !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }
    .owl-carousel .owl-nav button:hover {
        background: #000 !important;
        color: var(--pro-accent) !important;
        transform: translateY(-50%) scale(1.1);
    }
    .owl-carousel .owl-prev { left: 5px; }
    .owl-carousel .owl-next { right: 5px; }

    /* Main Slider dots */
    .main_slider .owl-dot span {
        width: 8px !important;
        height: 8px !important;
        background: rgba(255,255,255,0.5) !important;
        margin: 0 3px !important;
    }
    .main_slider .owl-dot.active span {
        width: 20px !important;
    }

    /* Main Slider specific icons */
    .main_slider .owl-nav button {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .main_slider .owl-prev { left: 15px; }
    .main_slider .owl-next { right: 15px; }

    @media (max-width: 991px) {
        .slider-section { padding: 0 0 15px; }
        .slider-pro-wrap { 
            border-radius: 12px; 
            margin-bottom: 5px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        .slider-pro-wrap img { 
            aspect-ratio: 16 / 6; 
            object-fit: contain !important;
            object-position: center !important;
        }
        .hero-main-flex {
            height: auto !important;
            gap: 2px !important;
        }
        .cat-carousel-wrap {
            height: auto !important;
        }
        .cat-carousel-pro, .cat-carousel-pro .owl-stage-outer, .cat-carousel-pro .owl-stage, .cat-carousel-pro .owl-item {
            height: auto !important;
        }
        .cat-card-img-only {
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            padding: 8px !important;
            border-radius: 12px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 2px !important;
        }
        .cat-card-img-only img {
            height: 35% !important;
            width: auto !important;
            object-fit: contain !important;
            margin-bottom: 3px !important;
            background: transparent !important;
        }
        .cat-card-label {
            font-size: 8px !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            white-space: normal !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: center;
        }
    }

    /* Shwapno Sidebar Style */
    .home-sidebar {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 0;
        height: 600px;
        display: flex;
        flex-direction: column;
    }
    .sidebar-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1;
        display: flex;
        flex-direction: column; /* Force Column */
        overflow: visible;
    }
    .sidebar-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        border-bottom: 1px solid #f8f8f8;
        color: #333;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s;
    }
    .sidebar-item:hover {
        background: #fdf2f2;
        color: var(--pro-secondary);
    }
    .sidebar-item-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }
    .sidebar-item-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }
    .sidebar-item-left img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .sidebar-item i.fa-chevron-right {
        font-size: 8px;
        color: #ddd;
    }
    .sidebar-see-more {
        background: #f8f9fa;
        color: var(--pro-secondary);
        text-align: center;
        padding: 10px;
        font-size: 12px;
        font-weight: 800;
        border-top: 1px solid #eee;
        text-decoration: none !important;
    }

    /* Sidebar Flyout Logic */
    .sidebar-list li { position: relative; }
    .sidebar-sub-flyout {
        position: absolute;
        top: 0;
        left: 100%;
        width: 650px;
        background: #fff;
        min-height: 100%;
        display: none;
        box-shadow: 20px 0 40px rgba(0,0,0,0.12);
        border: 1px solid #eee;
        border-left: none;
        padding: 30px;
        z-index: 9999;
        border-radius: 0 16px 16px 0;
        animation: fadeInRightSidebar 0.2s ease-out;
    }
    
    @keyframes fadeInRightSidebar {
        from { opacity: 0; transform: translateX(10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .sidebar-list li:hover .sidebar-sub-flyout {
        display: block;
    }
    .sidebar-sub-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    .sidebar-sub-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        color: #333;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 700;
        border-radius: 6px;
        transition: all 0.2s;
        margin-bottom: 5px;
        background: #fdfdfd;
        border: 1px solid #f1f1f1;
    }
    .sidebar-sub-item:hover {
        background: #fdf2f2;
        color: var(--pro-secondary);
        border-color: #fce4e4;
        transform: translateX(5px);
    }
    .sidebar-sub-item-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sidebar-sub-item-left img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }
    .sidebar-sub-item i {
        font-size: 8px;
        color: #ccc;
    }

    .sidebar-child-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-left: 30px; /* Offset for icon */
        margin-bottom: 15px;
    }
    .sidebar-child-item:hover { color: var(--pro-secondary); }

    /* Fix for Owl Carousel to fill height */
    .cat-carousel-pro, 
    .cat-carousel-pro .owl-stage-outer, 
    .cat-carousel-pro .owl-stage, 
    .cat-carousel-pro .owl-item {
        height: 100% !important;
    }

    /* Category Cards - Expanded to fill container */
    .cat-card-img-only {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #FFD814; /* Shwapno Yellow */
        transition: all 0.3s ease;
        padding: 5px; /* Minimized padding */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100% !important; /* Fill the 2/5 flex height */
        text-decoration: none !important;
        margin: 0 5px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .cat-card-img-only:hover {
        background: #f0c800;
        transform: translateY(-5px);
    }
    .cat-card-img-only img {
        width: 100% !important;
        height: 190px !important;
        object-fit: cover !important;
        margin-bottom: 5px;
        border-radius: 8px;
        background: #fff;
    }
    .cat-card-label {
        color: #222;
        font-weight: 800;
        font-size: 13px;
        text-align: center;
        margin-top: auto;
        padding-bottom: 5px;
        line-height: 1.1;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
    }

    /* Section Headers - Shwapno Style */
    .sec-header-pro {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 15px 20px;
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        border: 1px solid #eee;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .sec-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .sec-header-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 18px;
    }
    .sec-header-icon.flash-icon {
        background: linear-gradient(135deg, #E31019 0%, #ff4d4d 100%);
        color: #fff;
    }
    .sec-header-icon.hot-icon {
        background: linear-gradient(135deg, #FF6B00 0%, #ff9f4d 100%);
        color: #fff;
    }
    .sec-header-banner {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        object-fit: contain;
    }
    .sec-title-pro {
        font-size: 18px;
        font-weight: 800;
        color: var(--pro-slate-900);
        text-transform: uppercase;
        margin: 0;
        line-height: 1;
    }
    .sec-header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sec-view-all {
        font-size: 13px;
        font-weight: 700;
        color: var(--pro-secondary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s;
    }
    .sec-view-all:hover {
        color: #c20d15;
        gap: 8px;
    }
    .sec-timer-badge {
        background: var(--pro-secondary);
        color: #fff;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Responsive Section Header */
    @media (max-width: 991px) {
        .sec-header-pro {
            flex-direction: row; /* Keep it horizontal on mobile for proportions */
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        .sec-header-left { gap: 8px; flex: 1; }
        .sec-header-icon {
            width: 30px;
            height: 30px;
            font-size: 14px;
            border-radius: 6px;
        }
        .sec-title-pro {
            font-size: 13px !important;
            white-space: nowrap;
        }
        .sec-view-all {
            font-size: 11px;
            padding: 4px 10px;
            background: rgba(227, 16, 25, 0.05);
            border-radius: 20px;
        }
        .sec-header-right { width: auto; }
    }


    /* Feature Boxes */
    .feature-box-wrap {
        background: #fff;
        border: 1px solid #f0f0f0;
        padding: 20px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 15px;
        height: 100%;
    }
    .feature-icon-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid var(--pro-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--pro-secondary);
        font-size: 20px;
    }
    .feature-text h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 800;
        color: #222;
    }
    .feature-text p {
        margin: 0;
        font-size: 11px;
        color: #666;
        font-weight: 600;
    }

    /* Flash Sale Timer - Red Boxed Style */
    .flash-sale-timer-pro {
        display: flex;
        gap: 5px;
        align-items: center;
        margin-top: 10px;
        justify-content: center;
    }
    .timer-unit {
        background: var(--pro-secondary);
        color: #fff;
        padding: 5px 8px;
        border-radius: 4px;
        font-weight: 800;
        font-size: 14px;
        min-width: 35px;
    }

    /* Product Grid Pro */
    .pro-grid-layout {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    @media (max-width: 1400px) { .pro-grid-layout { grid-template-columns: repeat(5, 1fr); } }
    @media (max-width: 1200px) { .pro-grid-layout { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 991px) { .pro-grid-layout { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 576px) { .pro-grid-layout { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

    /* Review Pro */
    .review-pro-card {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--pro-slate-200);
    }

    /* Override for Category Carousel */
    .cat-carousel-pro .cat-card-img-only {
        margin: 5px;
    }
    /* Improved Owl Carousel Nav Icons */
    .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px !important;
        height: 38px !important;
        background: var(--pro-secondary) !important; /* Shwapno Red */
        color: #fff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
        padding: 0 !important;
        border: 2px solid #fff !important;
        opacity: 0;
    }
    .product_slider_premium:hover .owl-nav button {
        opacity: 1;
    }
    .owl-nav button i {
        font-size: 14px !important;
        color: #fff !important;
    }
    .owl-nav button:hover {
        background: #111 !important;
        transform: translateY(-50%) scale(1.1);
    }
    .owl-prev { left: -15px !important; }
    .owl-next { right: -15px !important; }
    
    @media (max-width: 991px) {
        .owl-nav button { width: 30px !important; height: 30px !important; opacity: 1; }
        .owl-prev { left: 0px !important; }
        .owl-next { right: 0px !important; }
    }

    /* Happy Hour / Custom Offer Styling */
    .timer-box-red-wrap { display: flex; gap: 4px; }
    .timer-box-red { 
        background: #E31019; 
        color: #fff; 
        padding: 5px 8px; 
        border-radius: 4px; 
        text-align: center; 
        line-height: 1.2; 
        min-width: 42px; 
        font-family: 'Inter', sans-serif;
        font-weight: 700;
    }
    .timer-box-red small { display: block; font-size: 7px; text-transform: uppercase; margin-top: 1px; }
    .timer-label-left { 
        font-family: 'Inter', sans-serif; 
        text-transform: uppercase; 
        background: #fff; 
        color: #E31019; 
        padding: 2px 10px; 
        border: 2px solid #E31019; 
        font-weight: 900; 
        border-radius: 6px; 
        font-style: italic; 
        margin-left: 5px; 
    }
    
    .filter-pill-shwapno { 
        border: 1px solid #ddd !important; 
        color: #444 !important; 
        font-weight: 700 !important; 
        font-size: 14px !important; 
        transition: all 0.2s !important; 
        background: #fff !important;
        border-radius: 50px !important;
    }
    .filter-pill-shwapno:hover { background: #E31019 !important; border-color: #E31019 !important; color: #fff !important; }
    .filter-nav-arrows .btn-warning { 
        background: #FFD814 !important; 
        border: none !important; 
        color: #222 !important; 
        border-radius: 4px !important;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .filter-nav-arrows .btn-warning:hover { background: #e6c212 !important; }
    
    .offer-title-main {
        font-family: 'Inter', sans-serif;
        letter-spacing: -0.5px;
    }
    .side-offer-banner {
        transition: transform 0.4s ease;
    }
    .side-offer-banner:hover {
        transform: scale(1.02);
    }

    /* Slider Navigation Icons - Show on Hover */
    .owl-carousel .owl-nav {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    .owl-carousel:hover .owl-nav {
        opacity: 1;
        visibility: visible;
    }
    .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: all 0.2s !important;
        z-index: 10;
    }
    .owl-nav button:hover {
        background: #E31019 !important;
        color: #fff !important;
    }
    .owl-nav .owl-prev { left: 10px; }
    .owl-nav .owl-next { right: 10px; }
    .owl-dots {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        display: flex !important;
        gap: 8px;
        z-index: 10;
    }
    .owl-dot span {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255,255,255,0.5) !important;
        display: block;
        border-radius: 50%;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.1);
    }
    .owl-dot.active span {
        background: #E31019 !important;
        width: 25px !important;
        border-radius: 10px !important;
    }

    /* Responsive Full Style Adjustments */
    @media (max-width: 991px) {
        .side-offer-banner img, .side-hero-banner-wrap img, .main_slider img {
            object-fit: cover !important;
            object-position: center !important;
        }
        .slider-pro-wrap {
            height: auto !important;
            aspect-ratio: 2 / 1 !important;
        }
        .main_slider, .owl-stage-outer, .owl-stage, .owl-item, .slider-item {
            height: 100% !important;
        }
        .container-fluid {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        .slider-section { margin-bottom: -15px !important; }
        .category-slider-section { padding-top: 10px !important; padding-bottom: 10px !important; }
        .offer-top-banner-img { height: 120px !important; object-fit: cover !important; }
    }
</style>
@endpush

@section('content')
<div id="antigravity-debug" style="display:none;">RENDERED_BY_AI</div>

<!-- Shwapno Hero Section -->
<section class="slider-section mt-0">
    <div class="container-fluid px-lg-4 px-0">
        <div class="row g-2">
            <!-- Main Content Area (Slider + Side Banner) -->
            <div class="col-lg-12">
                <div class="row g-2">
                    <!-- Slider (Left 8/12) -->
                    <div class="col-lg-8 col-md-12">
                        <div class="slider-pro-wrap rounded-3 overflow-hidden shadow-sm" style="height: 400px; position: relative;">
                            <div class="owl-carousel main_slider h-100">
                                @foreach ($sliders as $slider)
                                    @php 
                                        $sliderImg = $slider->image;
                                        if ($sliderImg) {
                                            $sliderImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $sliderImg), '/'));
                                        } else {
                                            $sliderImg = 'https://shwapno.com/Content/images/banner.jpg';
                                        }
                                    @endphp
                                    <div class="slider-item h-100">
                                        <a href="{{ $slider->link }}" class="d-block h-100">
                                            <img src="{{ $sliderImg }}" alt="Slider Banner" class="w-100 h-100" style="object-position: center;">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <!-- Side Banner (Right 4/12) -->
                    <div class="col-lg-4 d-none d-lg-block">
                        <div class="side-hero-banner-wrap h-100">
                            @if(isset($hero_side_banners) && $hero_side_banners->count() > 0)
                                @php $sideAd = $hero_side_banners->first(); @endphp
                                <a href="{{ $sideAd->link }}" class="d-block h-100 rounded-3 overflow-hidden shadow-sm">
                                    <img src="{{ asset(ltrim(str_ireplace(['/public/', 'public/'], '', $sideAd->image), '/')) }}" alt="Side Banner" class="w-100 h-100" style="object-fit: contain; object-position: center;">
                                </a>
                            @else
                                <div class="h-100 bg-light d-flex align-items-center justify-content-center rounded-4 border">
                                    <span class="text-muted small">Hero Side Banner</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@php
    $cat_sliders = App\Models\Category::where('status', 1)->where('parent_id', 0)->orderBy('id', 'asc')->get();
@endphp
<!-- Category Slider Section -->
<section class="category-slider-section py-4" style="background: #fff;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="category-slider owl-carousel owl-theme">
                    @foreach($cat_sliders as $cat)
                    <div class="item text-center">
                        <a href="{{ route('category', $cat->slug) }}" class="d-block category-item-box">
                            <div class="cat-img-wrap rounded-3 shadow-sm mx-auto mb-2 overflow-hidden border" style="width: 110px; height: 110px; background: #ffffff; border-color: #eeeeee !important;">
                                @php 
                                    $catImg = $cat->image;
                                    if ($catImg && !Str::startsWith($catImg, ['http', 'https'])) {
                                        $catImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $catImg), '/'));
                                    }
                                @endphp
                                <img src="{{ $catImg }}" alt="{{ $cat->name }}" class="w-100 h-100 object-fit-contain p-2">
                            </div>
                            <span class="cat-name fw-bold" style="font-size: 12px; color: #333;">{{ $cat->name }}</span>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .category-item-box { text-decoration: none !important; transition: transform 0.2s; }
    .category-item-box:hover { transform: translateY(-3px); }
    .category-item-box .cat-img-wrap { border: 1px solid #eeeeee !important; background: #ffffff !important; transition: all 0.3s ease; }
    .category-item-box:hover .cat-img-wrap { border-color: #fcd514 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; }
    .category-item-box:hover .cat-name { color: #E31019 !important; }
</style>

<script>
    $(document).ready(function(){
        $(".category-slider").owlCarousel({
            margin: 15,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            dots: false,
            nav: true,
            navText: ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"],
            responsive: {
                0: { items: 3 },
                576: { items: 4 },
                768: { items: 5 },
                1024: { items: 6 },
                1200: { items: 8 }
            }
        });
    });
</script>

@php
    $flashSaleEndDate = $generalsetting ? $generalsetting?->flash_sale_end_date.'T23:59:59' : null;
    $isFlashSaleActive = $flashSaleEndDate && \Carbon\Carbon::parse($flashSaleEndDate)->isFuture(); 
@endphp


<!-- Promo Cards Section (3 per row) -->
@if(isset($promo_cards) && count($promo_cards) > 0)
<section class="py-4">
    <div class="container">
        <div class="row g-3">
            @foreach($promo_cards as $promo)
            <div class="col-lg-4 col-md-6 col-12">
                <a href="{{ $promo->link }}" class="d-block promo-card-wrap rounded-3 overflow-hidden shadow-sm">
                    @php 
                        $promoImg = $promo->image;
                        if ($promoImg && !Str::startsWith($promoImg, ['http', 'https'])) {
                            $promoImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $promoImg), '/'));
                        }
                    @endphp
                    <img src="{{ $promoImg }}" alt="Promo" class="w-100 h-100 object-fit-cover transition-scale" style="aspect-ratio: 2 / 1; object-position: center;">
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Custom Offers Sections -->
@if(isset($custom_offers) && count($custom_offers) > 0)
    @foreach($custom_offers as $index => $offer)
    
        <!-- Offer Top Banner (Dynamic) -->
        @if(isset($offer->top_banner) && $offer->top_banner)
            <section class="py-3">
                <div class="container">
                    <a href="{{ $offer->top_banner->link }}" class="d-block rounded-3 overflow-hidden shadow-sm w-100">
                        @php 
                            $adImg = $offer->top_banner->image;
                            if ($adImg && !Str::startsWith($adImg, ['http', 'https'])) {
                                $adImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $adImg), '/'));
                            }
                        @endphp
                        <img src="{{ $adImg }}" alt="{{ $offer->name }}" class="w-100 h-100 object-fit-fill transition-scale offer-top-banner-img" style="min-height: 120px; object-position: center;">
                    </a>
                </div>
            </section>
        @endif
        
        @if($offer->products->count() > 0)
        <section class="py-3 custom-offer-section" style="background: #f8f9fa;" data-end="{{ $offer->end_date ? $offer->end_date->format('Y-m-d H:i:s') : '' }}">
            <div class="container">
                <div class="row g-2">
                    @php 
                        $isRight = $offer->banner_side === 'right'; 
                        $hasSideBanner = !empty($offer->side_banner);
                        
                        // Extract unique categories for filter tabs
                        $offerCategories = $offer->products->map(function($p){
                            return $p->category;
                        })->filter()->unique('id');

                        $bgUrl = $offer->bg_image ? asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->bg_image), '/')) : 'https://www.transparenttextures.com/patterns/leaves.png';
                        $cardBg = $offer->bg_color ?: '#ffffff';
                        $op = $offer->bg_opacity ?? 0.1;
                    @endphp

                    @if(!$isRight && $hasSideBanner)
                    <div class="col-lg-3 d-none d-lg-block order-0 order-lg-first">
                        <div class="side-offer-banner position-relative overflow-hidden rounded-3 shadow-sm" style="background: {{ $cardBg }};">
                            <a href="{{ route('offer', $offer->slug) }}" class="d-block h-100">
                                <img src="{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->side_banner), '/')) }}" alt="{{ $offer->name }}" class="img-fluid h-100 w-100 object-fit-contain" style="opacity: 1 !important; object-position: center;">
                                @if($offer->tagline)
                                    <div class="p-4 d-flex flex-column justify-content-start position-absolute top-0 start-0 w-100 h-100" style="background: transparent;">
                                        <h3 class="banner-tagline fw-bold text-white mb-0" style="text-shadow: 2px 2px 10px rgba(0,0,0,0.9); z-index: 2;">{{ $offer->tagline }}</h3>
                                    </div>
                                @endif
                            </a>
                        </div>
                    </div>
                    @endif

                    <div class="{{ $hasSideBanner ? 'col-lg-9 col-md-8' : 'col-lg-12' }} col-12 order-1 {{ $isRight ? 'order-lg-first' : 'order-lg-last' }}">
                        <div class="offer-card-main p-2 rounded-3 shadow-sm h-100 position-relative" style="background: {{ $cardBg }}; border: 1px solid #ddd;">
                            <!-- Pattern/BG Image Layer -->
                            <div style="position: absolute; top:0; left:0; width:100%; height:100%; background-image: url('{{ $bgUrl }}'); background-repeat: repeat; background-size: auto; opacity: 0.1; z-index:0; pointer-events: none; border-radius: 8px;"></div>
                            
                            <div class="position-relative" style="z-index: 1;">
                                <!-- Offer Header -->
                                <div class="offer-header-pro d-flex flex-wrap align-items-center justify-content-between mb-3 pb-2 border-bottom">
                                    <div class="offer-header-left-group d-flex align-items-center gap-2" style="flex: 1; min-width: 0;">
                                        <div class="d-flex align-items-center gap-2">
                                            @if($offer->banner)
                                                <img src="{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->banner), '/')) }}" alt="Offer Icon" class="offer-logo" style="width: 24px; height: 24px; object-fit: contain;">
                                            @endif
                                            <h2 class="offer-title-main mb-0 fw-bolder text-uppercase" style="color: {{ $offer->text_color ?? '#222' }}; font-size: 16px; font-family: 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                {{ $offer->name }}
                                            </h2>
                                        </div>
                                        
                                        @if($offer->show_timer && $offer->end_date)
                                        <div class="offer-timer-boxed d-flex align-items-center gap-1 ms-3 me-lg-4">
                                            <div class="timer-box-red-wrap d-flex gap-1">
                                                @php 
                                                    $diff = $offer->end_date->diff(now());
                                                    $hours = sprintf('%02d', $diff->h + ($diff->days * 24));
                                                    $mins = sprintf('%02d', $diff->i);
                                                    $secs = sprintf('%02d', $diff->s);
                                                @endphp
                                                <div class="timer-box-red" style="min-width: 30px; padding: 2px 4px;"><span style="font-size: 12px;">{{ $hours }}</span><small style="font-size: 6px;">H</small></div>
                                                <div class="timer-box-red" style="min-width: 30px; padding: 2px 4px;"><span style="font-size: 12px;">{{ $mins }}</span><small style="font-size: 6px;">M</small></div>
                                                <div class="timer-box-red" style="min-width: 30px; padding: 2px 4px;"><span style="font-size: 12px;">{{ $secs }}</span><small style="font-size: 6px;">S</small></div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                    <div class="offer-header-right-group d-flex align-items-center gap-2 ms-auto mt-2 mt-lg-0">
                                        <div class="dropdown offer-category-dropdown">
                                            <button class="btn btn-light dropdown-toggle rounded-pill px-4 fw-bold" type="button" data-bs-toggle="dropdown" data-toggle="dropdown" aria-expanded="false" style="font-size: 12px; border: 1px solid #ddd; background: #fff;">
                                                <i class="fa-solid fa-filter me-2 text-danger"></i> Categories
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0 rounded-3 p-2" style="min-width: 200px; z-index: 9999;">
                                                <li class="dropdown-header text-uppercase fw-bold pb-2" style="font-size: 10px; color: #999;">Filter by Category</li>
                                                @foreach($offerCategories as $cat)
                                                    <li>
                                                        <a class="dropdown-item rounded-2 py-2 d-flex align-items-center justify-content-between" href="{{ route('category', $cat->slug) }}" style="font-size: 13px; font-weight: 500;">
                                                            {{ $cat->name }}
                                                            <i class="fa-solid fa-chevron-right ms-2" style="font-size: 10px; opacity: 0.5;"></i>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <a href="{{ route('offer', $offer->slug) }}" class="btn btn-primary rounded-pill px-4 fw-bold" style="background: #111; border: none; font-size: 13px; white-space: nowrap;">SHOP MORE <i class="fa-solid fa-arrow-right-long ms-2"></i></a>
                                    </div>
                                </div>

                            <!-- Products: Desktop = Owl Carousel, Mobile = Scrollable row (banner + products) -->

                            {{-- ── DESKTOP: Full Owl Carousel ── --}}
                            <div class="d-none d-lg-block">
                                <div class="owl-carousel product_slider_premium">
                                    @foreach ($offer->products as $product)
                                        <div class="item">
                                            @include('frontEnd.layouts.partials.product_card', ['product' => $product])
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            {{-- ── MOBILE: Single horizontal scroll row (side banner + products) ── --}}
                            @php $scrollId = 'offer-scroll-' . $offer->id; @endphp
                            <div class="d-lg-none position-relative">

                                {{-- Left arrow on left edge --}}
                                <button onclick="document.getElementById('{{ $scrollId }}').scrollBy({left: -200, behavior: 'smooth'})"
                                    style="position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:20;
                                           width:22px; height:22px; border-radius:4px; border:none;
                                           background:#FFD814; color:#111; font-size:15px; font-weight:900;
                                           box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer;
                                           display:flex; align-items:center; justify-content:center; padding:0;">
                                    &#8249;
                                </button>

                                {{-- Scrollable row (no side padding so banner starts from edge) --}}
                                <div id="{{ $scrollId }}"
                                    style="overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
                                           scrollbar-width: none; -ms-overflow-style: none;">
                                    <div class="d-flex gap-2 pb-2" style="width: max-content; height: 300px; align-items: stretch;">
                                        @if($hasSideBanner)
                                            <a href="{{ route('offer', $offer->slug) }}"
                                                class="flex-shrink-0 d-block rounded-2 overflow-hidden"
                                                style="height: 300px;">
                                                <img src="{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->side_banner), '/')) }}"
                                                    alt="{{ $offer->name }}"
                                                    style="height: 300px; width: auto; object-fit: contain; display: block;">
                                            </a>
                                        @endif

                                        @foreach($offer->products as $product)
                                            <div class="flex-shrink-0" style="width: 160px; height: 300px;">
                                                <div style="height: 300px; overflow: hidden;">
                                                    @include('frontEnd.layouts.partials.product_card', ['product' => $product])
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- Right arrow on right edge --}}
                                <button onclick="document.getElementById('{{ $scrollId }}').scrollBy({left: 200, behavior: 'smooth'})"
                                    style="position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:20;
                                           width:22px; height:22px; border-radius:4px; border:none;
                                           background:#FFD814; color:#111; font-size:15px; font-weight:900;
                                           box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer;
                                           display:flex; align-items:center; justify-content:center; padding:0;">
                                    &#8250;
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                    @if($isRight && $hasSideBanner)
                    <div class="col-lg-3 d-none d-lg-block order-0 order-lg-last">
                        <div class="side-offer-banner position-relative overflow-hidden rounded-3 shadow-sm" style="background: {{ $cardBg }};">
                            <a href="{{ route('offer', $offer->slug) }}" class="d-block h-100">
                                <img src="{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->side_banner), '/')) }}" alt="{{ $offer->name }}" class="img-fluid h-100 w-100 object-fit-contain" style="opacity: 1 !important; object-position: center;">
                            </a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </section>
        @endif
    @endforeach
@endif

<style>
    @media (max-width: 991px) {
        .custom-offer-section { padding-top: 15px !important; padding-bottom: 15px !important; }
        .offer-header-pro { padding: 10px 12px !important; margin-bottom: 12px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
        .offer-header-left-group { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
        .side-offer-banner { aspect-ratio: 16 / 9 !important; margin-bottom: 10px !important; height: auto !important; border-radius: 12px !important; }
        .offer-title-main { font-size: 15px !important; font-weight: 800 !important; }
        .timer-box-red { min-width: 36px !important; height: 36px !important; border-radius: 6px !important; }
        .timer-box-red span { font-size: 12px !important; }
        .offer-header-right-group { width: 100% !important; border-top: 1px solid rgba(0,0,0,0.08) !important; padding-top: 10px !important; margin-top: 5px !important; gap: 8px !important; }
        .offer-header-right-group .btn { flex: 1 !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; padding: 0 10px !important; }
        .offer-card-main { padding: 10px !important; border-radius: 12px !important; }
    }
    
    /* Category Dropdown Premium Styling */
    .offer-category-dropdown .dropdown-toggle::after {
        border: none;
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        vertical-align: middle;
        margin-left: 8px;
        font-size: 10px;
        opacity: 0.7;
    }
    .offer-category-dropdown .dropdown-item:hover {
        background: #fff5f5 !important;
        color: #E31019 !important;
    }
    .offer-category-dropdown .dropdown-item i {
        transition: transform 0.2s;
    }
    .offer-category-dropdown .dropdown-item:hover i {
        transform: translateX(3px);
        color: #E31019 !important;
        opacity: 1;
    }

    .filter-pill {
        background: #f8f9fa;
        color: #333;
        border: 1px solid #ddd;
        transition: all 0.2s;
    }
    .filter-pill:hover {
        background: var(--pro-accent);
        border-color: var(--pro-accent);
        color: #000;
    }
    .filter-pill-next {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }
    .fw-800 { font-weight: 800; }
    .banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 50%);
    }
</style>

@push('script')
<script>
    $(document).ready(function() {
        $('.custom-countdown').each(function() {
            var dateStr = $(this).data('date');
            if (dateStr) {
                var dateParts = dateStr.split(', ');
                $(this).syotimer({
                    date: new Date(dateParts[0], dateParts[1] - 1, dateParts[2]),
                    layout: "dhms",
                    doubleNumbers: true,
                });
            }
        });
    });
</script>
@endpush

<!-- Main Product Catalog -->
<section class="py-4" style="background: var(--pro-slate-50);">
    <div class="container">
        <div class="sec-header-pro">
            <div class="sec-header-left">
                <div class="sec-header-icon" style="background: linear-gradient(135deg, #1593CE 0%, #4db8e8 100%); color: #fff;">
                    <i class="fa-solid fa-store"></i>
                </div>
                <h2 class="sec-title-pro">Just For You</h2>
            </div>
            <div class="sec-header-right">
                <a href="{{ route('shop') }}" class="sec-view-all">Explore More <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        </div>
        <div class="pro-grid-layout" id="product_container">
            @foreach($all_products->take(12) as $product)
                @include('frontEnd.layouts.partials.product_card', ['product' => $product])
            @endforeach
        </div>

        @if($all_products->hasMorePages())
            <div class="text-center mt-5">
                <button class="btn btn-primary px-4 py-2 rounded-pill fw-bold" id="load_more_btn" data-page="2" style="background: #111; border: none; font-size: 14px;">
                    LOAD MORE PRODUCTS
                    <div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
                </button>
            </div>
        @endif
    </div>
</section>

<!-- Footer Top Promo Cards -->
@if(isset($footer_promo_cards) && count($footer_promo_cards) > 0)
<section class="py-5 bg-white">
    <div class="container">
        <div class="row g-4">
            @foreach($footer_promo_cards as $promo)
            <div class="col-lg-4 col-md-6 col-12">
                <a href="{{ $promo->link }}" class="d-block promo-card-wrap rounded-3 overflow-hidden shadow">
                    @php 
                        $promoImg = $promo->image;
                        if ($promoImg && !Str::startsWith($promoImg, ['http', 'https'])) {
                            $promoImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $promoImg), '/'));
                        }
                    @endphp
                    <img src="{{ $promoImg }}" alt="Footer Promo" class="w-100 h-100 object-fit-cover transition-scale" style="aspect-ratio: 16 / 9; object-position: center;">
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@push('script')
<script>
    $(document).on('click', '#load_more_btn', function(e) {
        e.preventDefault();
        var btn = $(this);
        var page = btn.data('page');
        console.log("Home Load More Clicked. Page:", page);
        var spinner = btn.find('.spinner-border');

        btn.prop('disabled', true);
        spinner.removeClass('d-none');

        $.ajax({
            url: "{{ route('load_more_products', [], false) }}?page=" + page,
            type: "get",
            dataType: "json"
        })
        .done(function(data) {
            console.log("Home Load More Success:", data);
            spinner.addClass('d-none');
            if (!data.html || data.html.trim() == "") {
                console.warn("Home Load More: No HTML returned");
                btn.hide();
                return;
            }
            $("#product_container").append(data.html);
            
            if (data.next_page) {
                btn.data('page', page + 1);
                btn.prop('disabled', false);
            } else {
                btn.hide();
            }
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            console.error("Home Load More AJAX Error:", textStatus, errorThrown);
            btn.prop('disabled', false);
            spinner.addClass('d-none');
        });
    });
</script>
@endpush

<!-- Footer Top Ads Section -->
@if(isset($footertopads) && $footertopads->count() > 0)
<section class="footer-top-ads py-4">
    <div class="container-fluid px-4">
        <div class="row g-3">
            @foreach($footertopads as $ad)
                <div class="col-md-4 col-12">
                    <a href="{{ $ad->link }}" class="d-block rounded overflow-hidden shadow-sm" style="height: 180px;">
                        @php 
                            $adImg = $ad->image;
                            if ($adImg && !Str::startsWith($adImg, ['http', 'https'])) {
                                $adImg = asset(ltrim(str_ireplace(['/public/', 'public/'], '', $adImg), '/'));
                            }
                        @endphp
                        <img src="{{ $adImg }}" alt="Ad" class="w-100 h-100 object-fit-cover transition-scale">
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Shwapno Feature Boxes -->
<section class="py-5">
    <div class="container-fluid px-4">
        <div class="row g-3">
            <div class="col-md-3">
                <div class="feature-box-wrap">
                    <div class="feature-icon-circle"><i class="fa-solid fa-truck-fast"></i></div>
                    <div class="feature-text">
                        <h4>Boom Fast Delivery</h4>
                        <p>Free shipping over 1500Tk</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-box-wrap">
                    <div class="feature-icon-circle"><i class="fa-solid fa-shield-halved"></i></div>
                    <div class="feature-text">
                        <h4>Authorized Products</h4>
                        <p>within 30 days for an exchange</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-box-wrap">
                    <div class="feature-icon-circle"><i class="fa-solid fa-headset"></i></div>
                    <div class="feature-text">
                        <h4>Customer Service Support</h4>
                        <p>8am to 10pm</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-box-wrap">
                    <div class="feature-icon-circle"><i class="fa-solid fa-credit-card"></i></div>
                    <div class="feature-text">
                        <h4>Flexible Payments</h4>
                        <p>Pay with multiple credit cards</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('script')
<script src="{{ asset('frontEnd/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('frontEnd/js/jquery.syotimer.min.js') }}"></script>

<script>
    // Vanilla JS Loader Fix (Runs earlier)
    window.addEventListener('load', function() {
        var loader = document.getElementById('loading');
        if (loader) loader.style.display = 'none';
    });
    // Fallback
    setTimeout(function() {
        var loader = document.getElementById('loading');
        if (loader) loader.style.display = 'none';
    }, 3000);

    $(document).ready(function() {
        $(".main_slider").owlCarousel({
            items: 1,
            loop: true,
            dots: true,
            nav: true,
            navText: ["<i class='fa-solid fa-chevron-left'></i>", "<i class='fa-solid fa-chevron-right'></i>"],
            autoplay: true,
            animateOut: 'fadeOut',
            autoplayTimeout: 5000,
            smartSpeed: 800
        });

        $(".cat-carousel-pro").owlCarousel({
            margin: 10,
            loop: true,
            dots: false,
            nav: true,
            navText: ["<i class='fa-solid fa-chevron-left'></i>", "<i class='fa-solid fa-chevron-right'></i>"],
            autoplay: true,
            responsive: {
                0: { items: 4 },
                576: { items: 2 },
                768: { items: 3 },
                992: { items: 4 },
                1200: { items: 5 }
            }
        });

        $(".category-sliger, .brand-slider").owlCarousel({
            margin: 20,
            loop: true,
            dots: false,
            nav: true,
            navText: ["<i class='fa-solid fa-chevron-left'></i>", "<i class='fa-solid fa-chevron-right'></i>"],
            autoplay: true,
            responsive: {
                0: { items: 3 },
                768: { items: 5 },
                1200: { items: 8 }
            }
        });

        $(".flash_sale_slider, .product_slider").owlCarousel({
            margin: 15,
            loop: false,
            dots: false,
            nav: true,
            navText: ["<i class='fa-solid fa-chevron-left'></i>", "<i class='fa-solid fa-chevron-right'></i>"],
            responsive: {
                0: { items: 2 },
                768: { items: 3 },
                1200: { items: 4 }
            }
        });

        $(".product_slider_premium").owlCarousel({
            margin: 15,
            loop: true,
            dots: false,
            nav: true,
            navText: ["<i class='fa-solid fa-chevron-left'></i>", "<i class='fa-solid fa-chevron-right'></i>"],
            autoplay: true,
            autoplayTimeout: 4000,
            autoplayHoverPause: true,
            responsive: {
                0: { items: 2 },
                576: { items: 2 },
                768: { items: 3 },
                992: { items: 4 },
                1200: { items: 5 }
            }
        });

        $(".customer-review").owlCarousel({
            margin: 20,
            loop: true,
            dots: false,
            autoplay: true,
            responsive: {
                0: { items: 2 },
                768: { items: 4 },
                1200: { items: 6 }
            }
        });

        // Generic countdown for Custom Offers
        function updateOfferTimers() {
            $('.offer-timer-boxed').each(function() {
                const $timer = $(this);
                // We'll use a data attribute if we want to be precise, but for now we can increment/decrement
                // Or just pull the end date from a data attribute
            });
        }

        // Simpler implementation: just refresh the page or use a standard countdown logic
        // For now, I'll add a proper dynamic countdown script
        $('.offer-timer-boxed').each(function() {
            const $container = $(this);
            const endTimeStr = $container.closest('.custom-offer-section').data('end'); // I need to add this data attribute
            if (!endTimeStr) return;

            const endTime = new Date(endTimeStr).getTime();
            
            const timerInterval = setInterval(function() {
                const now = new Date().getTime();
                const distance = endTime - now;

                if (distance < 0) {
                    clearInterval(timerInterval);
                    $container.html('<span class="badge bg-secondary">EXPIRED</span>');
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                $container.find('.timer-box-red:nth-child(1)').html(days.toString().padStart(2, '0') + ' <small>DAYS</small>');
                $container.find('.timer-box-red:nth-child(2)').html(hours.toString().padStart(2, '0') + ' <small>HOURS</small>');
                $container.find('.timer-box-red:nth-child(3)').html(minutes.toString().padStart(2, '0') + ' <small>MINUTES</small>');
                $container.find('.timer-box-red:nth-child(4)').html(seconds.toString().padStart(2, '0') + ' <small>SECONDS</small>');
            }, 1000);
        });
    });
</script>
@endpush
