<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($seo->meta_title ?? optional($generalsetting)->name ?? 'Sukkari Dates'); ?></title>

    
    <?php if(!empty($seo->search_console_verification)): ?>
    <?php echo $seo->search_console_verification; ?>

    <?php endif; ?>

    <meta name="robots" content="index, follow" />
    <meta name="author" content="<?php echo e(optional($generalsetting)->name ?? ''); ?>" />
    <link rel="canonical" href="<?php echo e(url()->current()); ?>" />

    <?php if(!empty($seo->meta_description)): ?>
    <meta name="description" content="<?php echo e($seo->meta_description); ?>" />
    <?php endif; ?>
    <?php if(!empty($seo->meta_tags)): ?>
    <meta name="keywords" content="<?php echo e($seo->meta_tags); ?>" />
    <?php endif; ?>

    
    <meta property="og:type"        content="website" />
    <meta property="og:url"         content="<?php echo e(url()->current()); ?>" />
    <meta property="og:title"       content="<?php echo e($seo->meta_title ?? optional($generalsetting)->name ?? ''); ?>" />
    <meta property="og:description" content="<?php echo e($seo->meta_description ?? ''); ?>" />
    <meta property="og:image"       content="<?php echo e(asset(optional($generalsetting)->og_baner ?? 'public/logo.png')); ?>" />
    <meta property="og:site_name"   content="<?php echo e(optional($generalsetting)->name ?? ''); ?>" />
    <meta property="og:locale"      content="bn_BD" />

    
    <meta name="twitter:card"        content="summary_large_image" />
    <meta name="twitter:title"       content="<?php echo e($seo->meta_title ?? optional($generalsetting)->name ?? ''); ?>" />
    <meta name="twitter:description" content="<?php echo e($seo->meta_description ?? ''); ?>" />
    <meta name="twitter:image"       content="<?php echo e(asset(optional($generalsetting)->og_baner ?? 'public/logo.png')); ?>" />

    
    <script type="application/ld+json"><?php echo json_encode([
        '<?php $__contextArgs = [];
if (context()->has($__contextArgs[0])) :
if (isset($value)) { $__contextPrevious[] = $value; }
$value = context()->get($__contextArgs[0]); ?>'    => 'https://schema.org',
        '@type'       => 'WebPage',
        'name'        => $seo->meta_title ?? optional($generalsetting)->name ?? '',
        'description' => $seo->meta_description ?? '',
        'url'         => url()->current(),
        'publisher'   => [
            '@type' => 'Organization',
            'name'  => optional($generalsetting)->name ?? '',
            'logo'  => [
                '@type' => 'ImageObject',
                'url'   => asset(optional($generalsetting)->dark_logo ?? optional($generalsetting)->white_logo ?? 'public/logo.png'),
            ],
        ],
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT); ?></script>
    

    <?php if(optional($generalsetting)->favicon): ?>
    <link rel="shortcut icon" href="<?php echo e(asset($generalsetting->favicon)); ?>" type="image/x-icon">
    <?php endif; ?>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Hind Siliguri', sans-serif; background-color: #f8f9fa; }
        .bg-primary { background-color: <?php echo e($generalsetting->primary_color); ?>; }
        .text-primary { color: <?php echo e($generalsetting->primary_color); ?>; }
        .bg-yellow-btn { background-color: #FACC15; }
        .border-dashed-custom { border-top: 4px dotted <?php echo e($generalsetting->primary_color); ?>; border-bottom: 4px dotted <?php echo e($generalsetting->primary_color); ?>; }
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        .product-swiper .swiper-pagination-bullet-active,
        .reviews-swiper .swiper-pagination-bullet-active {
            background: #16a34a;
        }
        .reviews-swiper {
            padding-bottom: 48px;
        }
        .reviews-swiper .swiper-pagination {
            bottom: 8px !important;
        }
        .mini-product-strip {
            scrollbar-width: none; /* Firefox */
        }
        .mini-product-strip::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }
        .mini-product-wrapper {
            position: relative;
        }
        .mini-product-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            border-radius: 9999px;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #16a34a;
        }
        .mini-product-nav-prev { left: -10px; }
        .mini-product-nav-next { right: -10px; }
        @media (max-width: 640px) {
            .mini-product-nav { display: none; }
        }
    </style>

    
    <script>
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            event:     'site_page_data',
            page_type: 'landing',
            page_url:  <?php echo json_encode(url()->current()); ?>,
            currency:  'BDT',
            site_name: <?php echo json_encode(optional($generalsetting)->name ?? ''); ?>

        });
    </script>

    
    <?php $__currentLoopData = $gtm_code ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gtm): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php
        $gtm_container_id = preg_match('/^GTM-/i', trim($gtm->code))
            ? trim($gtm->code)
            : 'GTM-' . trim($gtm->code);
    ?>
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo e($gtm_container_id); ?>');</script>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    

    
    <?php if(isset($pixels) && $pixels->count() > 0): ?>
    <script>
        !(function (f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function () {
                n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
            };
            if (!f._fbq) f._fbq = n;
            n.push = n; n.loaded = !0; n.version = "2.0"; n.queue = [];
            t = b.createElement(e); t.async = !0; t.src = v;
            s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s);
        })(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");
        <?php $__currentLoopData = $pixels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pixel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        fbq('init', '<?php echo e($pixel->code); ?>');
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        fbq('track', 'PageView');
        <?php if(isset($products) && $products->count() > 0): ?>
        fbq('track', 'ViewContent', {
            content_name:  <?php echo json_encode(optional($generalsetting)->name ?? 'Landing Page'); ?>,
            content_ids:   <?php echo json_encode($products->pluck('id')->map(fn($id) => (string)$id)->values()->toArray()); ?>,
            content_type:  'product',
            value:         <?php echo e((float)(optional($products->first())->new_price ?? 0)); ?>,
            currency:      'BDT',
            num_items:     <?php echo e($products->count()); ?>

        }, { eventID: '<?php echo e($fb_landing_vc_event_id ?? ''); ?>' });
        <?php endif; ?>
    </script>
    <?php $__currentLoopData = $pixels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pixel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <noscript>
        <img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id=<?php echo e($pixel->code); ?>&ev=PageView&noscript=1" />
    </noscript>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    <?php endif; ?>
    

    
    <?php if(isset($tiktok_pixels) && $tiktok_pixels->count() > 0): ?>
    <script>
    !function (w, d, t) {
        w.TiktokAnalyticsObject=t;
        var ttq=w[t]=w[t]||[];
        ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"];
        ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
        for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
        ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e};
        ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";
            ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
            var o=d.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;
            var a=d.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
    }(window, document, 'ttq');
    <?php $__currentLoopData = $tiktok_pixels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tiktokP): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    ttq.load('<?php echo e($tiktokP->code); ?>');
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    ttq.page();
    <?php if(isset($products) && $products->count() > 0): ?>
    ttq.track('ViewContent', {
        content_id:   <?php echo json_encode((string)(optional($products->first())->id ?? '')); ?>,
        content_name: <?php echo json_encode(optional($products->first())->name ?? 'Landing Page'); ?>,
        quantity:     1,
        price:        <?php echo e((float)(optional($products->first())->new_price ?? 0)); ?>,
        value:        <?php echo e((float)(optional($products->first())->new_price ?? 0)); ?>,
        currency:     'BDT'
    });
    <?php endif; ?>
    </script>
    <?php endif; ?>
    

</head>
<body class="text-gray-800 antialiased">
    
    <?php $__currentLoopData = $gtm_code ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gtm): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php $gtm_noscript_id = preg_match('/^GTM-/i', trim($gtm->code)) ? trim($gtm->code) : 'GTM-'.trim($gtm->code); ?>
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo e($gtm_noscript_id); ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    

    
    <form id="coupon-form" action="<?php echo e(route('coupon.apply')); ?>" method="POST" style="display:none;">
        <?php echo csrf_field(); ?>
        <input type="hidden" name="coupon_code" id="hidden_coupon_code">
    </form>

    <section class="bg-primary text-white py-12 px-4 relative">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-10">
            <div class="md:w-1/2 space-y-6 w-full">
                <?php if(optional($generalsetting)->hero_badge_text): ?>
                <span class="text-xs font-semibold border border-green-300 px-4 py-1.5 rounded-full inline-block"><?php echo e($generalsetting->hero_badge_text); ?></span>
                <?php endif; ?>
                <h1 class="text-4xl md:text-5xl font-bold leading-tight text-[#FACC15]">
                    <?php echo e(optional($generalsetting)->hero_heading_1 ?? 'সুক্কারী মুফাতাল —'); ?><br>
                    <span class="text-white"><?php echo e(optional($generalsetting)->hero_heading_2 ?? 'রাজকীয় স্বাদের সেরা খেজুর'); ?></span>
                </h1>
                <?php if(optional($generalsetting)->hero_description): ?>
                <p class="text-md text-green-50"><?php echo e($generalsetting->hero_description); ?></p>
                <?php endif; ?>

                
                <div class="md:hidden w-full">
                    <div class="relative rounded-xl p-3 bg-gradient-to-tr from-yellow-400 to-green-600 shadow-2xl">
                        <img src="<?php echo e(optional($generalsetting)->hero_image ? asset($generalsetting->hero_image) : 'https://placehold.co/600x450/fff/1A7C36?text=Hero+Image'); ?>" alt="Dates" class="w-full rounded-lg h-[260px] object-cover" fetchpriority="high">
                        <?php if(optional($generalsetting)->hero_price_badge): ?>
                        <div class="absolute -top-4 right-4 bg-yellow-btn text-black text-xs font-bold px-4 py-2 rounded shadow-lg transform rotate-2">
                            <?php echo e($generalsetting->hero_price_badge); ?>

                        </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="pt-2">
                    <button onclick="document.getElementById('order-form').scrollIntoView({behavior: 'smooth'})" class="bg-yellow-btn text-black font-bold text-lg px-8 py-3 rounded shadow-lg flex items-center gap-2 hover:bg-yellow-500 transition">
                        <i class="fa-solid fa-cart-shopping"></i> অর্ডার করতে চাই
                    </button>
                </div>
                <div class="flex items-center gap-4 pt-4">
                    <div>
                        <div class="text-[#FACC15] text-sm"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i></div>
                        <p class="text-xs mt-1"><?php echo e(optional($generalsetting)->hero_rating ?? '4.9/5 Rating'); ?></p>
                    </div>
                    <div class="border-l border-green-400 pl-4">
                        <h4 class="font-bold text-xl"><?php echo e(optional($generalsetting)->hero_customers ?? '50,000+'); ?></h4>
                        <p class="text-xs">Happy Customers</p>
                    </div>
                </div>
            </div>

            
            <div class="hidden md:block md:w-1/2 relative">
                <div class="relative rounded-xl p-3 bg-gradient-to-tr from-yellow-400 to-green-600 shadow-2xl">
                    <img src="<?php echo e(optional($generalsetting)->hero_image ? asset($generalsetting->hero_image) : 'https://placehold.co/600x450/fff/1A7C36?text=Hero+Image'); ?>" alt="Dates" class="w-full rounded-lg h-[350px] object-cover" fetchpriority="high">
                    <?php if(optional($generalsetting)->hero_price_badge): ?>
                    <div class="absolute -top-4 right-4 bg-yellow-btn text-black text-xs font-bold px-4 py-2 rounded shadow-lg transform rotate-2">
                        <?php echo e($generalsetting->hero_price_badge); ?>

                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-10"><?php echo e(optional($generalsetting)->features_section_title ?? 'কেন সুক্কারী মুফাতাল খেজুর নিবেন?'); ?></h2>
            <?php if(isset($landingFeatures) && $landingFeatures->count() > 0): ?>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php $__currentLoopData = $landingFeatures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="bg-white border border-gray-100 p-5 rounded-lg flex gap-4 shadow-sm">
                    <div class="text-xl w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0" style="color: <?php echo e($generalsetting->primary_color ?? '#16a34a'); ?>; background-color: <?php echo e(($generalsetting->primary_color ?? '#16a34a')); ?>1a;">
                        <i class="<?php echo e($feature->icon ?? 'fa-solid fa-star'); ?>"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-sm"><?php echo e($feature->title); ?></h3>
                        <?php if($feature->description): ?>
                        <p class="text-xs text-gray-500 mt-1"><?php echo e($feature->description); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
            <div class="text-center mt-10">
                <button onclick="document.getElementById('order-form').scrollIntoView({behavior: 'smooth'})" class="bg-yellow-btn text-black font-bold text-lg px-10 py-3 rounded shadow hover:bg-yellow-500"><i class="fa-solid fa-cart-arrow-down"></i> অর্ডার করতে চাই</button>
            </div>
        </div>
    </section>

    
    <?php if(isset($products) && $products->count() > 0): ?>
    <section class="py-14 px-4" style="background:<?php echo e($generalsetting->primary_color); ?>;">
        <style>.pg-nav-btn:hover{ background-color:<?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?> !important; }</style>
        <div class="max-w-6xl mx-auto">
            <h2 class="text-2xl md:text-3xl font-bold text-center text-white mb-10">আমাদের পণ্যের গ্যালারি</h2>

            <div class="relative">
                
                <button id="pgPrev" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 -translate-x-3 w-9 h-9 bg-white border-2 rounded-full shadow flex items-center justify-center hover:text-white transition pg-nav-btn" style="border-color:<?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?>; color:<?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?>;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                </button>

                
                <div class="overflow-hidden mx-4" id="pgViewport">
                    <div class="flex transition-transform duration-500 ease-in-out" id="pgTrack" style="gap:16px;">
                        <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="pg-slide flex-shrink-0 flex flex-col bg-white rounded-2xl overflow-hidden shadow-md" style="border:2px solid <?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?>;">
                            
                            <div class="w-full" style="padding-top:100%; position:relative; background:#f9f9f9;">
                                <img src="<?php echo e(asset(optional($product->image)->image ?? 'public/uploads/default.webp')); ?>"
                                     alt="<?php echo e($product->name); ?>"
                                     class="absolute inset-0 w-full h-full object-cover"
                                     loading="lazy">
                            </div>
                            
                            <div class="flex flex-col flex-1 p-3 gap-2">
                                <p class="text-sm font-semibold text-gray-800 text-center leading-snug" style="min-height:2.5rem; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                                    <?php echo e($product->name); ?>

                                </p>
                                <div class="text-center">
                                    <span class="text-lg font-bold text-green-700">৳<?php echo e($product->new_price); ?></span>
                                    <?php if($product->old_price && $product->old_price > $product->new_price): ?>
                                    <del class="text-gray-400 text-sm ml-1">৳<?php echo e($product->old_price); ?></del>
                                    <?php endif; ?>
                                </div>
                                <button type="button"
                                    onclick="document.getElementById('order-form').scrollIntoView({behavior:'smooth'}); document.getElementById('landing_product_<?php echo e($product->id); ?>').checked = true; updateCart('<?php echo e($product->id); ?>');"
                                    class="mt-auto w-full py-2 rounded-lg font-bold text-sm text-black transition hover:opacity-90"
                                    style="background:#FACC15;">
                                    <i class="fa-solid fa-cart-arrow-down mr-1"></i> অর্ডার করুন
                                </button>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>

                
                <button id="pgNext" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 translate-x-3 w-9 h-9 bg-white border-2 rounded-full shadow flex items-center justify-center hover:text-white transition pg-nav-btn" style="border-color:<?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?>; color:<?php echo e($generalsetting->secodery_color ?? '#dc2626'); ?>;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                </button>
            </div>

            
            <div class="flex justify-center gap-2 mt-6" id="pgDots"></div>
        </div>
    </section>

    <script>
    (function() {
        var track    = document.getElementById('pgTrack');
        var viewport = document.getElementById('pgViewport');
        var dotsEl   = document.getElementById('pgDots');
        var slides   = track.querySelectorAll('.pg-slide');
        var total    = slides.length;
        var current  = 0;

        function perView() {
            return window.innerWidth >= 768 ? 4 : 2;
        }

        function gapPx() { return 16; }

        function slideWidth() {
            var pv  = perView();
            var gap = gapPx();
            return (viewport.offsetWidth - gap * (pv - 1)) / pv;
        }

        function maxIndex() {
            return Math.max(0, total - perView());
        }

        function buildDots() {
            dotsEl.innerHTML = '';
            var pages = maxIndex() + 1;
            for (var i = 0; i < pages; i++) {
                var d = document.createElement('button');
                d.className = 'w-2.5 h-2.5 rounded-full transition-colors';
                d.style.background = i === current ? '#ffffff' : 'rgba(255,255,255,0.4)';
                d.setAttribute('data-idx', i);
                d.addEventListener('click', function() { goTo(parseInt(this.getAttribute('data-idx'))); });
                dotsEl.appendChild(d);
            }
        }

        function setSlideWidths() {
            var w = slideWidth();
            slides.forEach(function(s) { s.style.width = w + 'px'; });
            track.style.gap = gapPx() + 'px';
        }

        function goTo(idx) {
            current = Math.min(Math.max(idx, 0), maxIndex());
            var w   = slideWidth();
            var gap = gapPx();
            track.style.transform = 'translateX(-' + (current * (w + gap)) + 'px)';
            dotsEl.querySelectorAll('button').forEach(function(d, i) {
                d.style.background = i === current ? '#ffffff' : 'rgba(255,255,255,0.4)';
            });
        }

        function init() {
            setSlideWidths();
            buildDots();
            goTo(0);
        }

        document.getElementById('pgPrev').addEventListener('click', function() { goTo(current - 1); });
        document.getElementById('pgNext').addEventListener('click', function() { goTo(current + 1); });

        // Touch / swipe support
        var touchStartX = 0;
        track.addEventListener('touchstart', function(e) { touchStartX = e.touches[0].clientX; }, {passive:true});
        track.addEventListener('touchend',   function(e) {
            var diff = touchStartX - e.changedTouches[0].clientX;
            if (Math.abs(diff) > 40) { goTo(current + (diff > 0 ? 1 : -1)); }
        }, {passive:true});

        init();
        window.addEventListener('resize', init);
    })();
    </script>
    <?php endif; ?>

    
    <?php if(isset($gallery) && $gallery->count() > 0): ?>
    <section class="py-14 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-10">ফটো গ্যালারি</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <?php $__currentLoopData = $gallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $photo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="cursor-pointer group relative overflow-hidden rounded-xl shadow-sm"
                     style="border: 3px solid <?php echo e($generalsetting->primary_color); ?>;"
                     onclick="openLightbox('<?php echo e(asset($photo->image)); ?>', '<?php echo e($photo->caption); ?>')">
                    <div class="w-full" style="padding-top: 100%; position: relative;">
                        <img src="<?php echo e(asset($photo->image)); ?>" alt="<?php echo e($photo->caption); ?>"
                             class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition-all duration-300 flex items-center justify-center">
                            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
                            </div>
                        </div>
                    </div>
                    <?php if($photo->caption): ?>
                    <div class="bg-white px-2 py-1 border-t border-green-100">
                        <p class="text-xs text-gray-600 text-center truncate"><?php echo e($photo->caption); ?></p>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    
    <div id="lightbox" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/90 px-4" onclick="closeLightbox()">
        <button class="absolute top-4 right-4 text-white text-4xl leading-none hover:text-yellow-400 transition z-10" onclick="closeLightbox()">&times;</button>
        <button class="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl leading-none hover:text-yellow-400 transition z-10 px-2" onclick="prevPhoto(event)">&#8249;</button>
        <button class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl leading-none hover:text-yellow-400 transition z-10 px-2" onclick="nextPhoto(event)">&#8250;</button>
        <div class="relative max-w-4xl w-full" onclick="event.stopPropagation()">
            <img id="lightboxImg" src="" alt="" class="w-full max-h-[80vh] object-contain rounded-lg shadow-2xl">
            <p id="lightboxCaption" class="text-center text-white text-sm mt-3 opacity-80"></p>
        </div>
    </div>
    <?php endif; ?>

    <section class="bg-primary py-16 px-4">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-10 items-center">
            <div class="md:w-1/2 text-white space-y-6">
                <h2 class="text-3xl font-bold text-[#FACC15]"><?php echo e(optional($generalsetting)->why_us_title ?? 'কেন আমরা অন্য সবার থেকে আলাদা?'); ?></h2>
                <ul class="space-y-4">
                    <?php if(optional($generalsetting)->why_us_point_1): ?>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-circle-check text-[#FACC15] mt-1"></i> <span><?php echo e($generalsetting->why_us_point_1); ?></span></li>
                    <?php endif; ?>
                    <?php if(optional($generalsetting)->why_us_point_2): ?>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-circle-check text-[#FACC15] mt-1"></i> <span><?php echo e($generalsetting->why_us_point_2); ?></span></li>
                    <?php endif; ?>
                    <?php if(optional($generalsetting)->why_us_point_3): ?>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-circle-check text-[#FACC15] mt-1"></i> <span><?php echo e($generalsetting->why_us_point_3); ?></span></li>
                    <?php endif; ?>
                </ul>
                <button onclick="document.getElementById('order-form').scrollIntoView({behavior: 'smooth'})" class="bg-white text-primary font-bold text-lg px-8 py-3 rounded shadow mt-4 flex items-center gap-2"><i class="fa-solid fa-cart-shopping"></i> অর্ডার করতে চাই</button>
            </div>
            <div class="md:w-1/2">
                <div class="bg-white p-2 rounded-lg shadow-2xl relative overflow-hidden" style="border: 4px solid #dc2626;">
                    <?php if(optional($generalsetting)->why_us_video_url): ?>
                    <?php
                        $videoUrl = $generalsetting->why_us_video_url;
                        // Convert YouTube URL to embed
                        if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/', $videoUrl, $m)) {
                            $embedUrl = 'https://www.youtube.com/embed/' . $m[1] . '?autoplay=1&rel=0';
                        } elseif (str_contains($videoUrl, 'facebook.com')) {
                            $embedUrl = 'https://www.facebook.com/plugins/video.php?href=' . urlencode($videoUrl) . '&autoplay=1';
                        } else {
                            $embedUrl = $videoUrl;
                        }
                    ?>
                    <div class="relative cursor-pointer group" onclick="openVideoModal('<?php echo e($embedUrl); ?>')">
                        <img src="<?php echo e(optional($generalsetting)->why_us_video_thumbnail ? asset($generalsetting->why_us_video_thumbnail) : 'https://placehold.co/600x350/eee/999?text=Video+Thumbnail'); ?>" alt="Video Thumbnail" class="w-full rounded h-[300px] object-cover" loading="lazy">
                        
                        <div class="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition rounded flex items-center justify-center">
                            <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-7 h-7 ml-1"><path d="M8 5v14l11-7z"/></svg>
                            </div>
                        </div>
                        <?php if(optional($generalsetting)->why_us_video_btn_text): ?>
                        <div class="absolute bottom-4 right-4 bg-yellow-btn text-black text-xs font-bold px-4 py-2 rounded shadow"><?php echo e($generalsetting->why_us_video_btn_text); ?></div>
                        <?php endif; ?>
                    </div>
                    <?php else: ?>
                    <img src="<?php echo e(optional($generalsetting)->why_us_video_thumbnail ? asset($generalsetting->why_us_video_thumbnail) : 'https://placehold.co/600x350/eee/999?text=Video+Thumbnail'); ?>" alt="Video Thumbnail" class="w-full rounded h-[300px] object-cover" loading="lazy">
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10">
            <div class="bg-white p-6 border border-gray-200 rounded-lg shadow-sm">
                <h3 class="text-xl font-bold text-primary mb-6 border-l-4 border-primary pl-3"><?php echo e(optional($generalsetting)->benefit_section_title ?? 'সুক্কারী খেজুরের উপকারিতা'); ?></h3>
                <?php if(isset($benefits) && $benefits->count() > 0): ?>
                <ul class="space-y-4">
                    <?php $__currentLoopData = $benefits; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $benefit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="flex items-center gap-3">
                        <span class="bg-primary text-white rounded-full w-7 h-7 flex items-center justify-center text-sm font-bold shadow flex-shrink-0"><?php echo e(str_replace(['1','2','3','4','5','6','7','8','9','0'], ['১','২','৩','৪','৫','৬','৭','৮','৯','০'], $loop->iteration)); ?></span>
                        <span class="text-sm font-medium text-gray-700"><?php echo e($benefit->title); ?></span>
                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
                <?php endif; ?>
            </div>

            <div class="bg-white p-6 border border-gray-200 rounded-lg shadow-sm">
                <h3 class="text-xl font-bold text-primary mb-6 border-l-4 border-primary pl-3"><?php echo e(optional($generalsetting)->faq_section_title ?? 'সাধারণ কিছু জিজ্ঞাসা'); ?></h3>
                <div class="space-y-3">
                    <details class="group border border-green-200 rounded-md bg-green-50" open>
                        <summary class="flex justify-between items-center font-medium cursor-pointer p-4 text-sm text-primary">
                            <span>১. সুক্কারী খেজুর কী এবং কেন এটি এত জনপ্রিয়?</span>
                            <span class="transition group-open:rotate-180"><i class="fa-solid fa-chevron-down text-gray-500"></i></span>
                        </summary>
                        <div class="text-gray-600 text-xs md:text-sm mt-1 px-4 pb-4 border-t border-green-100 pt-3">
                            সুক্কারী হলো সৌদি আরবের একটি বিখ্যাত খেজুর যা তার মিষ্টি স্বাদ এবং নরম টেক্সচারের জন্য পরিচিত। এটি মুখে দিলেই গলে যায়।
                        </div>
                    </details>
                    <details class="group border border-gray-200 rounded-md bg-white">
                        <summary class="flex justify-between items-center font-medium cursor-pointer p-4 text-sm text-gray-700">
                            <span>২. ডেলিভারি চার্জ কত?</span>
                            <span class="transition group-open:rotate-180"><i class="fa-solid fa-plus text-gray-400 group-open:hidden"></i><i class="fa-solid fa-minus text-gray-400 hidden group-open:block"></i></span>
                        </summary>
                        <div class="text-gray-600 text-xs md:text-sm mt-1 px-4 pb-4 border-t border-gray-100 pt-3">
                            ঢাকার ভেতরে ডেলিভারি চার্জ ৬০ টাকা এবং ঢাকার বাইরে ১২০ টাকা।
                        </div>
                    </details>
                    <details class="group border border-gray-200 rounded-md bg-white">
                        <summary class="flex justify-between items-center font-medium cursor-pointer p-4 text-sm text-gray-700">
                            <span>৩. ঢাকার বাইরে কি হোম ডেলিভারি পাবো?</span>
                            <span class="transition group-open:rotate-180"><i class="fa-solid fa-plus text-gray-400 group-open:hidden"></i><i class="fa-solid fa-minus text-gray-400 hidden group-open:block"></i></span>
                        </summary>
                        <div class="text-gray-600 text-xs md:text-sm mt-1 px-4 pb-4 border-t border-gray-100 pt-3">
                            হ্যাঁ, সারা বাংলাদেশে আমরা হোম ডেলিভারি দিয়ে থাকি।
                        </div>
                    </details>
                    <details class="group border border-gray-200 rounded-md bg-white">
                        <summary class="flex justify-between items-center font-medium cursor-pointer p-4 text-sm text-gray-700">
                            <span>৪. প্রোডাক্ট হাতে পেয়ে টাকা দেওয়া যাবে?</span>
                            <span class="transition group-open:rotate-180"><i class="fa-solid fa-plus text-gray-400 group-open:hidden"></i><i class="fa-solid fa-minus text-gray-400 hidden group-open:block"></i></span>
                        </summary>
                        <div class="text-gray-600 text-xs md:text-sm mt-1 px-4 pb-4 border-t border-gray-100 pt-3">
                            হ্যাঁ, ১০০% ক্যাশ অন ডেলিভারি সুবিধা রয়েছে।
                        </div>
                    </details>
                </div>
            </div>
        </div>
    </section>

    <section id="order-form" class="bg-[#EAF5EC] py-12 px-4 border-dashed-custom">
        <div class="max-w-6xl mx-auto bg-white rounded-lg shadow-xl border border-green-200 overflow-hidden">
            <div class="text-center p-6 border-b border-green-100 bg-white">
                <div class="inline-block bg-green-100 text-primary rounded-full p-2 mb-2 w-10 h-10 flex items-center justify-center mx-auto"><i class="fa-solid fa-arrow-down"></i></div>
                <h2 class="text-xl md:text-2xl font-bold text-primary">ক্যাশ অন ডেলিভারিতে অর্ডার করতে নিচের <span class="text-red-600">ফর্মটি সঠিকভাবে</span> পূরণ করুন</h2>
                <p class="text-xs text-gray-500 mt-1">আপনার তথ্য দেওয়ার পর আমরা কল করে আপনার অর্ডার কনফার্ম করব।</p>
            </div>

            <?php if(isset($products) && $products->count() > 0): ?>
            <div class="p-6 md:p-8 border-b border-green-100">
                <h3 class="font-bold text-gray-800 mb-4 text-sm uppercase tracking-wide">পণ্য সিলেক্ট করুন</h3>
                <div class="product-swiper swiper">
                    <div class="swiper-wrapper">
                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="swiper-slide">
                        <div class="border rounded-lg overflow-hidden shadow-sm bg-white h-full">
                            <input
                                type="radio"
                                class="hidden"
                                name="landing_product"
                                id="landing_product_<?php echo e($product->id); ?>"
                                value="<?php echo e($product->id); ?>"
                                <?php echo e($loop->first ? 'checked' : ''); ?>

                                onchange="updateCart('<?php echo e($product->id); ?>')"
                            >
                            <div class="product-card <?php echo e($loop->first ? 'selected' : ''); ?> h-full flex flex-col"
                                 data-product-id="<?php echo e($product->id); ?>"
                                 data-advance="<?php echo e((float) ($product->advance_amount ?? 0)); ?>">
                                <label for="landing_product_<?php echo e($product->id); ?>" class="block cursor-pointer">
                                    <div class="w-full bg-white flex items-center justify-center border-b">
                                        <img
                                            src="<?php echo e(asset(optional($product->image)->image ?? 'public/uploads/default.webp')); ?>"
                                            class="w-full h-36 sm:h-44 md:h-48 object-contain"
                                            alt="<?php echo e($product->name); ?>"
                                            loading="lazy"
                                        >
                                    </div>
                                </label>
                                <div class="p-3 text-center flex-1 flex flex-col">
                                    <div class="text-xs sm:text-sm font-semibold text-gray-800 leading-snug min-h-[2.5rem]">
                                        <?php echo e(\Illuminate\Support\Str::limit($product->name, 40)); ?>

                                    </div>
                                    <div class="text-xs sm:text-sm mt-1 text-gray-700 min-h-[1.25rem]">
                                        ৳<?php echo e($product->new_price); ?>

                                        <del class="text-gray-400">৳<?php echo e($product->old_price); ?></del>
                                    </div>

                                    <button
                                        type="button"
                                        class="mt-auto pt-3 w-full"
                                        onclick="document.getElementById('landing_product_<?php echo e($product->id); ?>').checked = true; updateCart('<?php echo e($product->id); ?>');"
                                    >
                                        <span class="block w-full bg-primary text-white font-bold text-sm py-2 rounded hover:bg-green-800 transition">
                                            সিলেক্ট করুন
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    
                    <div class="swiper-pagination mt-2"></div>
                </div>
            </div>
            <?php endif; ?>

            <div class="p-6 md:p-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 border-b bg-gray-50">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wide">আপনার কার্ট</h3>
                                <span class="text-xs text-gray-500 font-semibold"><?php echo e(Cart::instance('shopping')->count()); ?> item(s)</span>
                            </div>
                        </div>

                        
                        <div class="p-4 border-b bg-white">
                            <?php if(!Session::has('coupon_code')): ?>
                                <div class="flex gap-2">
                                    <input id="coupon_input" type="text" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:ring-1 focus:ring-green-500 outline-none" placeholder="কুপন কোড লিখুন">
                                    <button type="button" onclick="submitCoupon()" class="bg-gray-900 text-white px-4 py-2 rounded text-sm font-bold hover:bg-gray-700">
                                        APPLY
                                    </button>
                                </div>
                                <p class="text-[11px] text-gray-500 mt-2">কুপন থাকলে Apply করুন, ডিসকাউন্ট অটো ক্যালকুলেট হবে।</p>
                            <?php else: ?>
                                <div class="flex items-center justify-between bg-green-50 border border-green-200 rounded p-3">
                                    <div class="text-sm text-green-700 font-semibold">
                                        Coupon <span class="font-bold"><?php echo e(Session::get('coupon_code')); ?></span> Applied
                                    </div>
                                    <a href="<?php echo e(route('coupon.remove')); ?>" class="text-sm font-bold text-red-600 hover:underline">REMOVE</a>
                                </div>
                            <?php endif; ?>
                        </div>

                        
                        <?php if(isset($products) && $products->count() > 0): ?>
                        <div class="px-4 pt-3 pb-1 border-b bg-white">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-[11px] font-semibold text-gray-700">প্রোডাক্ট দ্রুত সিলেক্ট করুন</span>
                            </div>
                            <div class="mini-product-wrapper">
                                <button type="button" class="mini-product-nav mini-product-nav-prev">&lt;</button>
                                <div class="flex gap-2 overflow-x-auto pb-1 mini-product-strip" id="mini-product-strip">
                                    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <button
                                            type="button"
                                            class="flex-shrink-0 border rounded-md px-2 py-1 flex items-center gap-2 text-[11px] hover:bg-green-50"
                                            onclick="document.getElementById('landing_product_<?php echo e($product->id); ?>').checked = true; updateCart('<?php echo e($product->id); ?>');"
                                        >
                                            <img src="<?php echo e(asset(optional($product->image)->image ?? 'public/uploads/default.webp')); ?>" class="w-7 h-7 rounded object-cover" alt="<?php echo e($product->name); ?>" loading="lazy">
                                            <div class="text-left">
                                                <div class="font-semibold text-gray-800"><?php echo e(\Illuminate\Support\Str::limit($product->name, 18)); ?></div>
                                                <div class="text-gray-600">৳<?php echo e($product->new_price); ?></div>
                                            </div>
                                        </button>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                                <button type="button" class="mini-product-nav mini-product-nav-next">&gt;</button>
                            </div>
                        </div>
                        <?php endif; ?>

                        <div class="cartlist p-4">
                            <?php echo $__env->make('frontEnd.layouts.ajax.cart', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>

                        
                        <?php
                            $cartContentLanding = Cart::instance('shopping')->content();
                            $subtotalLanding = (float) str_replace([',','.00'], '', Cart::instance('shopping')->subtotal());
                            $landingCartItemsForJs = [];
                            $cartProductsMapLanding = $cartProductsMap ?? collect();
                            foreach ($cartContentLanding as $item) {
                                $p = $cartProductsMapLanding->get($item->id);
                                $landingCartItemsForJs[] = [
                                    'id' => $item->id,
                                    'name' => $item->name,
                                    'qty' => $item->qty,
                                    'price' => (float) $item->price,
                                    'image' => asset($item->options->image ?? ''),
                                    'link' => isset($item->options->slug) ? url('/product/' . $item->options->slug) : '#',
                                    'is_digital' => (int) ($p->is_digital ?? $item->options->is_digital ?? 0),
                                    'free_delivery' => (int) ($p->free_delivery ?? 0),
                                ];
                            }
                            $shippingLanding = Session::get('shipping', 0);
                            $discountLanding = Session::get('discount', 0);
                            $grandLanding    = ($subtotalLanding + $shippingLanding) - $discountLanding;
                            $advanceLanding  = $advanceTotal ?? \App\Http\Controllers\Frontend\ShoppingController::getCartAdvanceAmount();
                            $dueLanding      = $advanceLanding > 0 ? ($grandLanding - $advanceLanding) : 0;
                        ?>
                        <div id="landing-advance-box" class="p-4 border-t bg-yellow-50 <?php echo e($advanceLanding > 0 ? '' : 'hidden'); ?>">
                            <div class="text-sm font-bold text-yellow-800">অগ্রিম পেমেন্ট প্রয়োজন</div>
                            <div class="mt-2 text-sm flex justify-between">
                                <span class="text-green-700 font-semibold">Payable Now</span>
                                <span id="landing-advance-amount" class="font-bold text-green-700">৳ <?php echo e(number_format($advanceLanding, 2)); ?></span>
                            </div>
                            <div class="mt-1 text-sm flex justify-between">
                                <span class="text-red-700 font-semibold">Due</span>
                                <span id="landing-due-amount" class="font-bold text-red-700">৳ <?php echo e(number_format($dueLanding, 2)); ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                        <div class="p-4 border-b bg-gray-50">
                            <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wide">আপনার তথ্য দিন</h3>
                        </div>

                        <form id="landing-checkout-form" action="<?php echo e(route('customer.ordersave')); ?>" method="POST" class="p-4">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="landing_checkout" value="1">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-xs font-bold text-gray-700 mb-1" for="name">আপনার নাম *</label>
                                    <input id="name" type="text" name="name" required value="<?php echo e(old('name')); ?>" class="w-full border border-gray-300 rounded p-2.5 text-sm focus:ring-1 focus:ring-green-500 outline-none" placeholder="সম্পূর্ণ নাম লিখুন">
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-700 mb-1" for="phone">মোবাইল নাম্বার *</label>
                                    <input id="phone" type="number" name="phone" required value="<?php echo e(old('phone')); ?>" class="w-full border border-gray-300 rounded p-2.5 text-sm focus:ring-1 focus:ring-green-500 outline-none" placeholder="+৮৮ বাদে ১১ সংখ্যা">
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-700 mb-1" for="address">সম্পূর্ণ ঠিকানা *</label>
                                    <input id="address" type="text" name="address" required value="<?php echo e(old('address')); ?>" class="w-full border border-gray-300 rounded p-2.5 text-sm focus:ring-1 focus:ring-green-500 outline-none" placeholder="জেলা, থানা, গ্রাম">
                                </div>

                                <div id="landing-area-wrapper">
                                    <label class="block text-xs font-bold text-gray-700 mb-1" for="area">ডেলিভারি</label>
                                    <?php
                                        $cartContent = $cartContentLanding ?? Cart::instance('shopping')->content();
                                        $hasDigitalOnly = false;
                                        if ($cartContent->isNotEmpty()) {
                                            $allDigital = true;
                                            $cartProds = $cartProductsMap ?? collect();
                                            foreach ($cartContent as $item) {
                                                $product = $cartProds->get($item->id);
                                                if ($product && ($product->is_digital ?? 0) != 1) {
                                                    $allDigital = false;
                                                    break;
                                                }
                                            }
                                            $hasDigitalOnly = $allDigital;
                                        }
                                        $hasAllFreeDeliveryLanding = $hasAllFreeDelivery ?? \App\Http\Controllers\Frontend\ShoppingController::hasAllFreeDeliveryProducts();
                                    ?>
                                    <input type="hidden" name="area" id="landing_area_input" value="<?php echo e($cartContent->isEmpty() || $hasDigitalOnly || $hasAllFreeDeliveryLanding ? 'free_shipping' : (($shippingcharge ?? collect())->first()?->id ?? 'free_shipping')); ?>">
                                    
                                    <div id="landing-area-empty" class="<?php echo e($cartContent->isEmpty() ? '' : 'hidden'); ?>">
                                        <input type="text" class="w-full border border-gray-300 rounded p-2.5 text-sm bg-gray-100" value="প্রোডাক্ট সিলেক্ট করুন" readonly>
                                    </div>
                                    
                                    <div id="landing-area-digital" class="<?php echo e(!$cartContent->isEmpty() && $hasDigitalOnly ? '' : 'hidden'); ?>">
                                        <input type="text" class="w-full border border-gray-300 rounded p-2.5 text-sm bg-gray-100" value="Digital Product (No Shipping Charge)" readonly>
                                    </div>
                                    
                                    <div id="landing-area-physical-wrap" class="<?php echo e(!$cartContent->isEmpty() && !$hasDigitalOnly ? '' : 'hidden'); ?>">
                                        <div id="landing-area-select-wrap" class="<?php echo e($hasAllFreeDeliveryLanding ? 'hidden' : ''); ?>">
                                            <select id="area" class="w-full border border-gray-300 rounded p-2.5 text-sm focus:ring-1 focus:ring-green-500 outline-none bg-white" <?php echo e(!$hasAllFreeDeliveryLanding ? 'required' : ''); ?>>
                                                <?php $__currentLoopData = ($shippingcharge ?? []); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($value->id); ?>" data-charge="<?php echo e($value->amount); ?>" <?php echo e(!$hasAllFreeDeliveryLanding && ($shippingcharge ?? collect())->first()?->id == $value->id ? 'selected' : ''); ?>><?php echo e($value->name); ?> (৳<?php echo e($value->amount); ?>)</option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                        <div id="landing-free-delivery-wrap" class="<?php echo e($hasAllFreeDeliveryLanding ? '' : 'hidden'); ?>">
                                            <input type="text" class="w-full border border-gray-300 rounded p-2.5 text-sm bg-green-50 text-green-800 font-semibold" value="ফ্রি ডেলিভারি - কোন চার্জ নেই" readonly>
                                        </div>
                                    </div>
                                </div>

                                
                                <?php
                                    $hasAdvanceFlag = (isset($hasAdvance) && $hasAdvance);
                                    $hasPhysicalFlag = $hasPhysical ?? ($cartProductsMap ?? collect())->contains(fn($p) => ($p->is_digital ?? 0) != 1);
                                    $showCodInitial = $hasPhysicalFlag && !$hasAdvanceFlag;
                                ?>
                                <div class="border border-gray-200 rounded p-3 bg-white">
                                    <div class="text-sm font-bold text-gray-800 mb-2">পেমেন্ট মেথড নির্বাচন করুন</div>

                                    <div id="landing-advance-note" class="mb-3 p-3 rounded border border-yellow-200 bg-yellow-50 text-sm text-yellow-900 <?php echo e($advanceLanding > 0 ? '' : 'hidden'); ?>">
                                        এই অর্ডারে <b id="landing-advance-note-amount">৳ <?php echo e(number_format($advanceLanding, 2)); ?></b> অগ্রিম পেমেন্ট করতে হবে। COD পাওয়া যাবে না।
                                    </div>

                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2" id="payment-methods-grid">
                                        
                                        <div id="cod-option-wrapper" class="<?php echo e($showCodInitial ? '' : 'hidden'); ?>">
                                            <label class="flex items-center justify-between gap-2 border rounded px-2 py-2 cursor-pointer hover:bg-gray-50 bg-white">
                                                <span class="flex items-center gap-1 text-xs sm:text-sm font-semibold">
                                                    <i class="fa-solid fa-truck text-green-600"></i> Cash On Delivery
                                                </span>
                                                <input type="radio" name="payment_method" id="payment_cod" value="cod" <?php echo e($showCodInitial ? 'checked' : ''); ?>>
                                            </label>
                                        </div>

                                        <?php if(!empty($bkash_gateway)): ?>
                                            <label class="flex items-center justify-between gap-2 border rounded px-2 py-2 cursor-pointer hover:bg-gray-50 bg-white">
                                                <span class="flex items-center gap-1 text-xs sm:text-sm font-semibold">
                                                    <img src="<?php echo e(asset('public/frontEnd/images/bkash.svg')); ?>" alt="bKash" class="w-5 h-5 object-contain"> bKash
                                                </span>
                                                <input type="radio" name="payment_method" value="bkash" <?php echo e(!$showCodInitial ? 'checked' : ''); ?> required>
                                            </label>
                                        <?php endif; ?>

                                        <?php if(!empty($shurjopay_gateway)): ?>
                                            <label class="flex items-center justify-between gap-2 border rounded px-2 py-2 cursor-pointer hover:bg-gray-50 bg-white">
                                                <span class="flex items-center gap-1 text-xs sm:text-sm font-semibold">
                                                    <img src="<?php echo e(asset('public/frontEnd/images/shurjoPay.png')); ?>" alt="ShurjoPay" class="w-5 h-5 object-contain"> ShurjoPay
                                                </span>
                                                <input type="radio" name="payment_method" value="shurjopay" required>
                                            </label>
                                        <?php endif; ?>

                                        <?php if(!empty($uddoktapay_gateway)): ?>
                                            <label class="flex items-center justify-between gap-2 border rounded px-2 py-2 cursor-pointer hover:bg-gray-50 bg-white">
                                                <span class="flex items-center gap-1 text-xs sm:text-sm font-semibold">
                                                    <img src="<?php echo e(asset('public/frontEnd/images/uddokta.png')); ?>" alt="UddoktaPay" class="w-5 h-5 object-contain"> UddoktaPay
                                                </span>
                                                <input type="radio" name="payment_method" value="uddoktapay" required>
                                            </label>
                                        <?php endif; ?>

                                        <?php if(!empty($aamarpay_gateway)): ?>
                                            <label class="flex items-center justify-between gap-2 border rounded px-2 py-2 cursor-pointer hover:bg-gray-50 bg-white">
                                                <span class="flex items-center gap-1 text-xs sm:text-sm font-semibold">
                                                    <img src="<?php echo e(asset('public/frontEnd/images/aamarpay.png')); ?>" alt="aamarPay" class="w-5 h-5 object-contain"> aamarPay
                                                </span>
                                                <input type="radio" name="payment_method" value="aamarpay" required>
                                            </label>
                                        <?php endif; ?>
                                    </div>
                                    <div id="payment-error" class="hidden mt-2 text-sm font-bold text-red-600">
                                        অনুগ্রহ করে একটি পেমেন্ট মেথড সিলেক্ট করুন।
                                    </div>
                                </div>

                                <button type="submit" class="w-full bg-primary text-white font-bold text-lg px-4 py-3.5 rounded shadow hover:bg-green-800 transition flex justify-center items-center gap-2">
                                    <i class="fa-solid fa-lock"></i> অর্ডার কনফার্ম করুন
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 bg-white overflow-hidden w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">সম্মানিত কাস্টমারদের <span class="text-primary">মতামত</span></h2>

        <?php if(isset($landingReviews) && $landingReviews->count() > 0): ?>
                <div class="reviews-swiper swiper w-full !overflow-hidden">
                    <div class="swiper-wrapper">
                        <?php $__currentLoopData = $landingReviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="swiper-slide px-2 md:px-3">
                                <div class="border border-gray-200 rounded p-4 bg-white shadow-sm flex flex-col h-full min-h-[180px]">
                                    <div class="flex items-center gap-3 mb-2">
                                        <?php if($review->image): ?>
                                            <img src="<?php echo e(asset($review->image)); ?>" alt="<?php echo e($review->name); ?>" class="w-10 h-10 rounded-full object-cover" loading="lazy">
                                        <?php else: ?>
                                            <div class="w-10 h-10 rounded-full bg-blue-100 text-[#1877F2] flex items-center justify-center font-bold">
                                                <?php echo e(strtoupper(mb_substr($review->name, 0, 1))); ?>

                                            </div>
                                        <?php endif; ?>
                                        <div>
                                            <h4 class="font-bold text-sm text-[#1877F2]"><?php echo e($review->name); ?></h4>
                                            <p class="text-[10px] text-gray-500">
                                                <?php echo e(optional($review->created_at)->diffForHumans()); ?>

                                            </p>
                                        </div>
                                    </div>
                                    <p class="text-sm text-gray-700 mb-2 flex-1">
                                        <?php echo e($review->review); ?>

                                    </p>
                                    <?php if($review->rating): ?>
                                        <div class="flex items-center text-xs text-yellow-500 mb-1">
                                            <?php for($i = 1; $i <= 5; $i++): ?>
                                                <i class="fa-solid fa-star <?php echo e($i <= $review->rating ? '' : 'text-gray-300'); ?>"></i>
                                            <?php endfor; ?>
                                            <span class="ml-2 text-gray-600 font-semibold"><?php echo e($review->rating); ?>/5</span>
                                        </div>
                                    <?php endif; ?>
                                    <div class="border-t pt-2 mt-auto text-xs font-bold text-gray-500 flex gap-4">
                                        <span>Like</span><span>Reply</span>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <div class="swiper-pagination mt-10"></div>
                </div>
        <?php else: ?>
                <p class="text-center text-sm text-gray-500 px-4">শীঘ্রই আমাদের সম্মানিত কাস্টমারদের রিভিউ এখানে দেখানো হবে।</p>
        <?php endif; ?>
    </section>

    <section class="bg-primary py-12 px-4 mt-8 rounded-t-[30px]">
        <div class="max-w-4xl mx-auto text-center text-white">
            <?php
                $ctaLines = explode("\n", optional($generalsetting)->cta_heading ?? "সেরা কোয়ালিটির সুক্কারী মুফাতাল\nএখনই অর্ডার করতে নিচের বাটনে ক্লিক করুন");
            ?>
            <h2 class="text-2xl md:text-3xl font-bold mb-8 leading-snug">
                <?php $__currentLoopData = $ctaLines; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $line): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php echo e($line); ?><?php if(!$loop->last): ?><br><?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </h2>
            <button onclick="document.getElementById('order-form').scrollIntoView({behavior: 'smooth'})" class="bg-white text-primary font-bold text-xl px-10 py-4 rounded shadow-xl mb-10 hover:bg-gray-100 transition flex mx-auto items-center gap-3">
                <i class="fa-solid fa-cart-shopping"></i> <?php echo e(optional($generalsetting)->cta_btn_text ?? 'অর্ডার করতে চাই'); ?>

            </button>

            <div class="flex flex-wrap justify-center gap-4 text-sm font-bold">
                <a href="tel:<?php echo e($contact->phone ?? ($contact->hotline ?? '')); ?>" class="bg-yellow-btn text-black px-6 py-2.5 rounded flex items-center gap-2 hover:bg-yellow-500">
                    <i class="fa-solid fa-phone"></i> <?php echo e($contact->phone ?? ($contact->hotline ?? 'Call')); ?>

                </a>
                <a href="https://wa.me/<?php echo e($contact->whatsapp ?? ''); ?>" class="bg-[#25D366] text-white px-6 py-2.5 rounded flex items-center gap-2 hover:bg-green-600">
                    <i class="fa-brands fa-whatsapp text-lg"></i> WhatsApp
                </a>
                <?php
                    $fbUsername = optional($generalsetting)->facebook_page_username;
                    $fbUrl = $fbUsername ? 'https://facebook.com/'.$fbUsername : '#';
                ?>
                <a href="<?php echo e($fbUrl); ?>" class="bg-[#1877F2] text-white px-6 py-2.5 rounded flex items-center gap-2 hover:bg-blue-700" target="_blank" rel="noopener">
                    <i class="fa-brands fa-facebook text-lg"></i> Page
                </a>
                <button onclick="openTrackModal()" class="bg-white text-[<?php echo e($generalsetting->primary_color); ?>] px-6 py-2.5 rounded flex items-center gap-2 font-bold hover:bg-gray-100 border-2 border-white transition">
                    <i class="fa-solid fa-magnifying-glass-location text-lg"></i> অর্ডার ট্র্যাক
                </button>
                <button onclick="openComplaintModal()" class="bg-red-600 text-white px-6 py-2.5 rounded flex items-center gap-2 font-bold hover:bg-red-700 border-2 border-red-600 transition">
                    <i class="fa-solid fa-triangle-exclamation text-lg"></i> কমপ্লেইন
                </button>
            </div>
        </div>
    </section>

    
    <div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 px-4" onclick="closeVideoModal(event)">
        <div class="relative w-full max-w-3xl" onclick="event.stopPropagation()">
            <button onclick="closeVideoModal()" class="absolute -top-10 right-0 text-white text-3xl font-bold leading-none hover:text-yellow-400 transition">&times;</button>
            <div class="relative" style="padding-top: 56.25%;">
                <iframe id="videoIframe" src="" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"
                    class="absolute inset-0 w-full h-full rounded-lg shadow-2xl"></iframe>
            </div>
        </div>
    </div>

    <footer class="text-center py-5 text-sm text-gray-500 bg-white border-t border-gray-200">
        <span class="footer-v2__copy-text">
            &copy; <?php echo e(date('Y')); ?>

            <strong><?php echo e(optional($generalsetting)->name ?? config('app.name')); ?></strong>.
            All rights reserved
        </span>
        <span class="footer-v2__copy-sep">|</span>
        <span class="footer-v2__designer">
            Designed by
            <a href="https://www.creativedesign.com.bd" target="_blank" rel="noopener" class="footer-v2__designer-link">
                <img src="<?php echo e(asset('public/uploads/creativedesign.png')); ?>" alt="CD" class="inline-block h-6">
                Creative Design
            </a>
        </span>
    </footer>

    <?php if(session('landing_order_success')): ?>
        <?php $s = session('landing_order_success'); $downloads = $s['downloads'] ?? []; ?>
        <div id="landing-success-overlay" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 text-center">
                <div class="w-12 h-12 mx-auto mb-3 flex items-center justify-center rounded-full bg-green-100">
                    <i class="fa-solid fa-check text-green-600 text-xl"></i>
                </div>
                <h2 class="text-lg font-bold text-gray-800 mb-1">অর্ডার সফল হয়েছে!</h2>
                <p class="text-xs text-gray-500 mb-3">আমাদের প্রতিনিধি খুব শীঘ্রই আপনার সাথে যোগাযোগ করবে।</p>
                <div class="bg-gray-50 border border-gray-200 rounded p-3 text-sm text-left mb-4">
                    <div class="flex justify-between mb-1">
                        <span class="text-gray-600">ইনভয়েস নং</span>
                        <span class="font-semibold text-gray-800">#<?php echo e($s['invoice_id'] ?? $s['order_id']); ?></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">মোট এমাউন্ট</span>
                        <span class="font-semibold text-gray-800">৳ <?php echo e(number_format($s['amount'], 2)); ?></span>
                    </div>
                </div>
                <?php if(!empty($downloads)): ?>
                <div class="mb-4 text-left">
                    <p class="text-xs font-bold text-gray-700 mb-2"><i class="fa-solid fa-download text-green-600 mr-1"></i> ফাইল ডাউনলোড করুন</p>
                    <div class="space-y-2">
                        <?php $__currentLoopData = $downloads; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dl): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e($dl['url']); ?>" target="_blank" class="flex items-center gap-2 w-full px-3 py-2 bg-green-50 border border-green-200 rounded text-sm font-medium text-green-800 hover:bg-green-100 transition">
                            <i class="fa-solid fa-file-arrow-down"></i>
                            <span class="truncate"><?php echo e($dl['name'] ?? 'ফাইল'); ?></span>
                        </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <?php endif; ?>
                <button onclick="document.getElementById('landing-success-overlay').remove();" class="w-full bg-primary text-white font-semibold py-2.5 rounded hover:bg-green-800 transition">
                    ঠিক আছে
                </button>
            </div>
        </div>

        
        <?php $purchaseEventId = 'purchase_' . ($s['invoice_id'] ?? $s['order_id']); ?>
        <script>
        (function() {
            var orderId = '<?php echo e($s['invoice_id'] ?? $s['order_id']); ?>';
            var amount  = <?php echo e((float)($s['amount'] ?? 0)); ?>;
            var eventId = '<?php echo e($purchaseEventId); ?>';

            // GTM DataLayer — Purchase
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                event:          'purchase',
                transaction_id: orderId,
                value:          amount,
                currency:       'BDT',
                ecommerce: { transaction_id: orderId, value: amount, currency: 'BDT' }
            });

            // Facebook Pixel — Purchase
            if (typeof fbq === 'function') {
                fbq('track', 'Purchase', { value: amount, currency: 'BDT', order_id: orderId }, { eventID: eventId });
            }

            // TikTok Pixel — CompletePayment
            if (typeof ttq !== 'undefined') {
                ttq.track('CompletePayment', { value: amount, currency: 'BDT', order_id: orderId });
            }
        })();
        </script>
        
    <?php endif; ?>

    <script src="<?php echo e(asset('public/frontEnd/js/jquery-3.6.3.min.js')); ?>"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        function updateAdvanceBoxForProduct(productId) {
            var box  = document.getElementById('landing-advance-box');
            var note = document.getElementById('landing-advance-note');
            var codWrap = document.getElementById('cod-option-wrapper');
            var paymentCod = document.getElementById('payment_cod');

            var card = document.querySelector('.product-card[data-product-id="' + productId + '"]');
            var advance = card ? parseFloat(card.getAttribute('data-advance') || '0') : 0;
            if (isNaN(advance)) advance = 0;

            var hasAdvance = advance > 0;
            var cartEl = document.querySelector('.lp-cart-wrapper[data-has-digital-only]');
            var isDigitalOnly = cartEl && cartEl.getAttribute('data-has-digital-only') === '1';
            var hasPhysical = !isDigitalOnly;

            // COD: শুধুমাত্র ফিজিকেল প্রোডাক্ট ও অগ্রিম ছাড়া প্রোডাক্টে দেখাবে
            if (codWrap) {
                if (hasAdvance || !hasPhysical) {
                    codWrap.classList.add('hidden');
                    if (paymentCod && paymentCod.checked) {
                        var firstOnline = document.querySelector('#payment-methods-grid input[name="payment_method"]:not(#payment_cod)');
                        if (firstOnline) { firstOnline.checked = true; }
                    }
                } else {
                    codWrap.classList.remove('hidden');
                    if (paymentCod) paymentCod.checked = true;
                }
            }

            if (!hasAdvance) {
                if (box)  box.classList.add('hidden');
                if (note) note.classList.add('hidden');
                return;
            }

            var grandTextEl = document.querySelector('#grand_total strong');
            var grandVal = 0;
            if (grandTextEl) {
                grandVal = parseFloat((grandTextEl.innerText || '').replace(/[^\d.]/g, '')) || 0;
            }
            var due = Math.max(0, grandVal - advance);

            if (document.getElementById('landing-advance-amount')) {
                document.getElementById('landing-advance-amount').innerText = '৳ ' + advance.toFixed(2);
            }
            if (document.getElementById('landing-due-amount')) {
                document.getElementById('landing-due-amount').innerText = '৳ ' + due.toFixed(2);
            }
            if (document.getElementById('landing-advance-note-amount')) {
                document.getElementById('landing-advance-note-amount').innerText = '৳ ' + advance.toFixed(2);
            }
            if (box)  box.classList.remove('hidden');
            if (note) note.classList.remove('hidden');
        }

        function submitCoupon() {
            var code = document.getElementById('coupon_input') ? document.getElementById('coupon_input').value : '';
            if (code) {
                document.getElementById('hidden_coupon_code').value = code;
                document.getElementById('coupon-form').submit();
            } else {
                alert('Please enter a coupon code');
            }
        }

        // Update the cart and highlight the selected card (campaign-style)
        // ===== Landing Products Data (for tracking) =====
        window.landingProducts = {
            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            '<?php echo e($product->id); ?>': { id: '<?php echo e($product->id); ?>', name: <?php echo json_encode($product->name); ?>, price: <?php echo e((float)($product->new_price ?? 0)); ?> },
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        };

        function updateCart(productId) {
            const productCards = document.querySelectorAll('.product-card');
            productCards.forEach(card => card.classList.remove('selected'));

            const radio = document.getElementById(`landing_product_${productId}`);
            if (radio && radio.nextElementSibling) {
                radio.nextElementSibling.classList.add('selected');
            }

            if (!productId) return;

            // Update advance box immediately based on selected product
            updateAdvanceBoxForProduct(productId);

            // ===== AddToCart Tracking =====
            var p = window.landingProducts[productId];
            if (p) {
                // GTM DataLayer
                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    event:    'add_to_cart',
                    currency: 'BDT',
                    value:    p.price,
                    items:    [{ item_id: p.id, item_name: p.name, price: p.price, quantity: 1 }]
                });
                // Facebook Pixel
                if (typeof fbq === 'function') {
                    fbq('track', 'AddToCart', {
                        content_ids:  [p.id],
                        content_name: p.name,
                        content_type: 'product',
                        value:        p.price,
                        currency:     'BDT'
                    });
                }
                // TikTok Pixel
                if (typeof ttq !== 'undefined') {
                    ttq.track('AddToCart', { content_id: p.id, content_name: p.name, price: p.price, value: p.price, currency: 'BDT' });
                }
            }
            // ===== End AddToCart Tracking =====

            $.ajax({
                type: "GET",
                data: { id: productId },
                url: "<?php echo e(route('cart.changeProduct')); ?>",
                success: function (data) {
                    if (data) {
                        $(".cartlist").html(data);
                        var cartEl = document.querySelector('.lp-cart-wrapper');
                        var areaEmpty = document.getElementById('landing-area-empty');
                        var areaDigital = document.getElementById('landing-area-digital');
                        var areaPhysicalWrap = document.getElementById('landing-area-physical-wrap');
                        var areaSelectWrap = document.getElementById('landing-area-select-wrap');
                        var freeDeliveryWrap = document.getElementById('landing-free-delivery-wrap');
                        var areaSelect = document.getElementById('area');
                        var areaInput = document.getElementById('landing_area_input');
                        if (cartEl && areaEmpty && areaDigital && areaPhysicalWrap) {
                            var isEmpty = cartEl.getAttribute('data-cart-empty') === '1';
                            var isDigitalOnly = cartEl.getAttribute('data-has-digital-only') === '1';
                            var isFree = cartEl.getAttribute('data-has-all-free-delivery') === '1';
                            areaEmpty.classList.toggle('hidden', !isEmpty);
                            areaDigital.classList.toggle('hidden', isEmpty || !isDigitalOnly);
                            areaPhysicalWrap.classList.toggle('hidden', isEmpty || isDigitalOnly);
                            if (!isEmpty && !isDigitalOnly) {
                                areaSelectWrap.classList.toggle('hidden', isFree);
                                freeDeliveryWrap.classList.toggle('hidden', !isFree);
                                if (areaSelect) areaSelect.toggleAttribute('required', !isFree);
                                if (areaInput) areaInput.value = isFree ? 'free_shipping' : (areaSelect ? areaSelect.value : 'free_shipping');
                            } else if (areaInput) {
                                areaInput.value = 'free_shipping';
                            }
                        }
                        updateAdvanceBoxForProduct(productId);
                    }
                }
            });
        }

        // ===== Incomplete Order System (Landing Checkout) =====
        var landingCartItems = <?php echo json_encode($landingCartItemsForJs ?? []); ?>;
        var landingBaseSubtotal = <?php echo e($subtotalLanding ?? 0); ?>;
        var landingDiscount = <?php echo e($discountLanding ?? 0); ?>;
        var landingIncompleteTimer;
        var landingIsSubmitting = false;

        function landingCheckFreeDelivery(items) {
            var list = items || landingCartItems;
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                if (item.is_digital == 1) continue;
                if (item.free_delivery != 1) return false;
            }
            return true;
        }

        function saveLandingIncompleteOrder() {
            if (landingIsSubmitting) return;
            if (landingIncompleteTimer) clearTimeout(landingIncompleteTimer);

            landingIncompleteTimer = setTimeout(function () {
                var name = document.getElementById('name') ? document.getElementById('name').value.trim() : '';
                var phone = document.getElementById('phone') ? document.getElementById('phone').value.trim() : '';
                var address = document.getElementById('address') ? document.getElementById('address').value.trim() : '';
                if (!name || !phone || !address) return;

                var itemsToSend = landingCartItems;
                var cartEl = document.querySelector('.lp-cart-wrapper[data-cart-items]');
                if (cartEl && cartEl.getAttribute('data-cart-items')) {
                    try {
                        var parsed = JSON.parse(cartEl.getAttribute('data-cart-items'));
                        if (parsed && parsed.length) itemsToSend = parsed;
                    } catch (e) {}
                }

                var areaEl = document.getElementById('area');
                var shippingCharge = 0;
                if (areaEl && areaEl.options && areaEl.options[areaEl.selectedIndex]) {
                    var opt = areaEl.options[areaEl.selectedIndex];
                    if (opt.getAttribute('data-charge')) {
                        shippingCharge = parseFloat(opt.getAttribute('data-charge')) || 0;
                    }
                }
                if (landingCheckFreeDelivery(itemsToSend)) shippingCharge = 0;
                var total = (landingBaseSubtotal + shippingCharge - landingDiscount).toFixed(2);
                if (cartEl && cartEl.getAttribute('data-grand')) {
                    try {
                        var g = parseFloat(cartEl.getAttribute('data-grand'));
                        if (!isNaN(g)) total = g.toFixed(2);
                    } catch (e) {}
                }

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '<?php echo e(route("incomplete.order.store")); ?>');
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '<?php echo e(csrf_token()); ?>');
                xhr.send(JSON.stringify({
                    name: name,
                    phone: phone,
                    address: address,
                    items: itemsToSend,
                    total_amount: total
                }));
            }, 2000);
        }

        $(document).ready(function () {
            $('#landing-checkout-form input, #landing-checkout-form select, #landing-checkout-form textarea').on('input change', function () {
                if ($(this).attr('name') !== 'payment_method') saveLandingIncompleteOrder();
            });

            $("#area").on("change", function () {
                var areaInput = document.getElementById('landing_area_input');
                if (areaInput) areaInput.value = $(this).val();
                saveLandingIncompleteOrder();
                var id = $(this).val();
                $.ajax({
                    type: "GET",
                    data: { id: id },
                    url: "<?php echo e(route('shipping.charge')); ?>",
                    dataType: "html",
                    success: function (response) {
                        $('.cartlist').html(response);
                        // Shipping change affects grand total; recompute due if advance visible
                        const checked = document.querySelector('input[name="landing_product"]:checked');
                        if (checked) {
                            updateAdvanceBoxForProduct(checked.value);
                        }
                    }
                });
            });

            // payment validation (required on submit)
            $(document).on('submit', 'form[action="<?php echo e(route('customer.ordersave')); ?>"]', function (e) {
                var paymentMethod = $('input[name="payment_method"]:checked', this).val();
                if (!paymentMethod) {
                    e.preventDefault();
                    $('#payment-error').removeClass('hidden');
                    $('html, body').animate({ scrollTop: $('#payment-error').offset().top - 120 }, 300);
                    return false;
                }
                $('#payment-error').addClass('hidden');

                // Incomplete order: stop saving when form is submitting
                landingIsSubmitting = true;
                if (landingIncompleteTimer) { clearTimeout(landingIncompleteTimer); landingIncompleteTimer = null; }

                // ===== InitiateCheckout Tracking =====
                var checked = document.querySelector('input[name="landing_product"]:checked');
                var _gtv = document.querySelector('.grand-total-value');
                var cartValue = parseFloat(_gtv ? (_gtv.textContent || '').replace(/[^\d.]/g, '') : '0') || 0;
                var p = checked ? window.landingProducts[checked.value] : null;
                var contentIds = p ? [p.id] : [];

                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    event:    'begin_checkout',
                    currency: 'BDT',
                    value:    cartValue
                });
                if (typeof fbq === 'function') {
                    fbq('track', 'InitiateCheckout', {
                        content_ids:  contentIds,
                        content_type: 'product',
                        value:        cartValue,
                        currency:     'BDT',
                        num_items:    1
                    });
                }
                if (typeof ttq !== 'undefined') {
                    ttq.track('InitiateCheckout', { value: cartValue, currency: 'BDT' });
                }
                // ===== End InitiateCheckout Tracking =====
            });

            $(document).on('change', 'input[name="payment_method"]', function () {
                $('#payment-error').addClass('hidden');
            });

            // ডিফল্ট প্রোডাক্ট সিলেক্ট - পেজ রেন্ডার হওয়ার পর ডিফার করে চালান (লোডিং স্পিডের জন্য)
            <?php if(isset($products) && $products->count() > 0): ?>
            var defaultProductId = '<?php echo e($products->first()->id); ?>';
            if (defaultProductId && typeof updateCart === 'function') {
                if (typeof requestIdleCallback !== 'undefined') {
                    requestIdleCallback(function() { updateCart(defaultProductId); }, { timeout: 1500 });
                } else {
                    setTimeout(function() { updateCart(defaultProductId); }, 100);
                }
            }
            <?php endif; ?>

            // Swiper init for product slider
            if (typeof Swiper !== 'undefined') {
                new Swiper('.product-swiper', {
                    slidesPerView: 1.2,
                    spaceBetween: 12,
                    loop: <?php echo e($products->count() > 1 ? 'true' : 'false'); ?>,
                    autoplay: {
                        delay: 3500,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.product-swiper .swiper-pagination',
                        clickable: true,
                    },
                    breakpoints: {
                        640: { slidesPerView: 2.2 },
                        768: { slidesPerView: 3 },
                        1024:{ slidesPerView: 4 }
                    }
                });

                // Swiper for customer reviews - পুরো স্ক্রিন জুড়ে, অটো স্লাইড
                var reviewsEl = document.querySelector('.reviews-swiper');
                if (reviewsEl) {
                    var reviewCount = <?php echo e(isset($landingReviews) ? $landingReviews->count() : 0); ?>;
                    var reviewLoop  = reviewCount > 1;
                    new Swiper('.reviews-swiper', {
                        slidesPerView: 1,
                        spaceBetween: 16,
                        loop: reviewLoop,
                        autoplay: reviewLoop ? { delay: 4000, disableOnInteraction: false } : false,
                        pagination: {
                            el: '.reviews-swiper .swiper-pagination',
                            clickable: true,
                        },
                        breakpoints: {
                            640: { slidesPerView: Math.min(2, reviewCount), spaceBetween: 20 },
                            768: { slidesPerView: Math.min(3, reviewCount), spaceBetween: 20 },
                            1024: { slidesPerView: Math.min(4, reviewCount), spaceBetween: 24 }
                        }
                    });
                }
            }

            // Mini product strip left/right slide buttons
            const miniStrip = document.getElementById('mini-product-strip');
            if (miniStrip) {
                const step = 180;
                const prevBtn = document.querySelector('.mini-product-nav-prev');
                const nextBtn = document.querySelector('.mini-product-nav-next');
                if (prevBtn) {
                    prevBtn.addEventListener('click', function () {
                        miniStrip.scrollBy({ left: -step, behavior: 'smooth' });
                    });
                }
                if (nextBtn) {
                    nextBtn.addEventListener('click', function () {
                        miniStrip.scrollBy({ left: step, behavior: 'smooth' });
                    });
                }
            }
        });
    </script>

    <script>
        function openVideoModal(embedUrl) {
            var modal = document.getElementById('videoModal');
            var iframe = document.getElementById('videoIframe');
            iframe.src = embedUrl;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeVideoModal(e) {
            if (e && e.target !== document.getElementById('videoModal') && e.type !== 'click') return;
            var modal = document.getElementById('videoModal');
            var iframe = document.getElementById('videoIframe');
            iframe.src = '';
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = '';
        }

        // ESC key to close
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') { closeVideoModal(); closeLightbox(); }
        });
    </script>

    

    
    <div id="trackModal" class="fixed inset-0 z-[60] hidden items-center justify-center bg-black/70 px-4" onclick="if(event.target===this)closeTrackModal()">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden" onclick="event.stopPropagation()">
            
            <div class="flex items-center justify-between px-6 py-4" style="background:<?php echo e($generalsetting->primary_color); ?>;">
                <h3 class="text-white font-bold text-lg flex items-center gap-2">
                    <i class="fa-solid fa-magnifying-glass-location"></i> অর্ডার ট্র্যাক করুন
                </h3>
                <button onclick="closeTrackModal()" class="text-white text-2xl leading-none hover:text-yellow-300 transition">&times;</button>
            </div>
            
            <div class="p-6">
                <p class="text-gray-500 text-sm mb-5">মোবাইল নাম্বার <strong>অথবা</strong> ইনভয়েস আইডি দিয়ে আপনার অর্ডার খুঁজুন।</p>
                <div id="trackFormError" class="hidden bg-red-50 border border-red-200 text-red-600 text-sm rounded-lg px-4 py-3 mb-4"></div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">মোবাইল নাম্বার</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"><i class="fa-solid fa-mobile-screen-button"></i></span>
                            <input id="trackPhone" type="number" placeholder="017xxxxxxxx"
                                class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-400">
                        </div>
                    </div>
                    <div class="flex items-center gap-2 text-gray-400 text-xs font-semibold">
                        <div class="flex-1 h-px bg-gray-200"></div><span>অথবা</span><div class="flex-1 h-px bg-gray-200"></div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">ইনভয়েস আইডি</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"><i class="fa-solid fa-receipt"></i></span>
                            <input id="trackInvoice" type="text" placeholder="যেমন: 54321"
                                class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-400">
                        </div>
                    </div>
                </div>
                <button onclick="doTrack()" id="trackBtn"
                    class="mt-6 w-full py-3 rounded-lg font-bold text-base text-black transition hover:opacity-90 flex items-center justify-center gap-2"
                    style="background:#FACC15;">
                    <i class="fa-solid fa-magnifying-glass"></i> ট্র্যাক করুন
                </button>
            </div>
        </div>
    </div>

    
    <div id="trackResultModal" class="fixed inset-0 z-[61] hidden items-center justify-center bg-black/70 px-4 py-6" onclick="if(event.target===this)closeTrackResult()">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onclick="event.stopPropagation()">
            
            <div class="flex items-center justify-between px-6 py-4 sticky top-0 z-10" style="background:<?php echo e($generalsetting->primary_color); ?>;">
                <h3 class="text-white font-bold text-lg flex items-center gap-2">
                    <i class="fa-solid fa-box-open"></i> অর্ডারের বিস্তারিত
                </h3>
                <button onclick="closeTrackResult()" class="text-white text-2xl leading-none hover:text-yellow-300 transition">&times;</button>
            </div>
            <div id="trackResultBody" class="p-4 space-y-4"></div>
        </div>
    </div>

    
    <div id="complaintModal" class="fixed inset-0 z-[62] hidden items-center justify-center bg-black/70 px-4 py-6" onclick="if(event.target===this)closeComplaintModal()">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()">
            
            <div class="flex items-center justify-between px-6 py-4 sticky top-0 z-10 bg-red-600">
                <h3 class="text-white font-bold text-lg flex items-center gap-2">
                    <i class="fa-solid fa-triangle-exclamation"></i> কমপ্লেইন জমা দিন
                </h3>
                <button onclick="closeComplaintModal()" class="text-white text-2xl leading-none hover:text-yellow-200 transition">&times;</button>
            </div>

            
            <div class="p-6">
                
                <div id="complaintSuccess" class="hidden mb-4 bg-green-50 border border-green-200 rounded-xl p-4 text-center">
                    <div class="text-green-600 text-3xl mb-2"><i class="fa-solid fa-circle-check"></i></div>
                    <p class="text-green-700 font-semibold">আপনার কমপ্লেইন সফলভাবে জমা হয়েছে!</p>
                    <p class="text-sm text-gray-500 mt-1">২৪-৪৮ ঘণ্টার মধ্যে আমরা যোগাযোগ করবো।</p>
                    <button onclick="closeComplaintModal()" class="mt-3 bg-red-600 text-white px-6 py-2 rounded-lg text-sm font-bold hover:bg-red-700 transition">ঠিক আছে</button>
                </div>
                <div id="complaintError" class="hidden mb-4 bg-red-50 border border-red-200 rounded-xl p-3 text-sm text-red-700"></div>

                <form id="complaintForm" enctype="multipart/form-data">
                    <?php echo csrf_field(); ?>
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-1">আপনার নাম <span class="text-red-500">*</span></label>
                                <input type="text" name="name" id="c_name" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-red-400 focus:ring-2 focus:ring-red-100" placeholder="নাম লিখুন" required>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-1">মোবাইল নম্বর <span class="text-red-500">*</span></label>
                                <input type="tel" name="phone" id="c_phone" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-red-400 focus:ring-2 focus:ring-red-100" placeholder="০১xxx-xxxxxx" required maxlength="11" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">অর্ডার আইডি <span class="text-gray-400 font-normal">(ঐচ্ছিক)</span></label>
                            <input type="text" name="order_id" id="c_order_id" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-red-400 focus:ring-2 focus:ring-red-100" placeholder="Order ID লিখুন" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">কমপ্লেইনের বিবরণ <span class="text-red-500">*</span></label>
                            <textarea name="description" id="c_description" rows="4" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-red-400 focus:ring-2 focus:ring-red-100 resize-none" placeholder="আপনার সমস্যাটি বিস্তারিত লিখুন..." required></textarea>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1">প্রমাণের ছবি <span class="text-gray-400 font-normal">(ঐচ্ছিক)</span></label>
                            <input type="file" name="image" id="c_image" accept="image/jpg,image/jpeg,image/png" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none">
                            <p class="text-xs text-gray-400 mt-1">jpg/jpeg/png, সর্বোচ্চ 2MB</p>
                        </div>

                        <button type="button" onclick="submitComplaint()" id="complaintSubmitBtn" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition">
                            <i class="fa-solid fa-paper-plane"></i>
                            <span id="complaintBtnText">কমপ্লেইন পাঠান</span>
                        </button>
                    </div>
                </form>

                
                <div class="flex gap-6 mt-4 pt-4 border-t border-gray-100 text-xs text-gray-500">
                    <span class="flex items-center gap-1"><i class="fa-solid fa-shield-halved text-red-400"></i> নিরাপদ ডাটা</span>
                    <span class="flex items-center gap-1"><i class="fa-solid fa-clock text-red-400"></i> ২৪-৪৮ ঘণ্টার সমাধান</span>
                </div>
            </div>
        </div>
    </div>
    

    <script>
    function openTrackModal() {
        document.getElementById('trackModal').classList.remove('hidden');
        document.getElementById('trackModal').classList.add('flex');
        document.body.style.overflow = 'hidden';
    }
    function closeTrackModal() {
        document.getElementById('trackModal').classList.add('hidden');
        document.getElementById('trackModal').classList.remove('flex');
        document.body.style.overflow = '';
    }
    function closeTrackResult() {
        document.getElementById('trackResultModal').classList.add('hidden');
        document.getElementById('trackResultModal').classList.remove('flex');
        document.body.style.overflow = '';
    }

    function doTrack() {
        var phone   = document.getElementById('trackPhone').value.trim();
        var invoice = document.getElementById('trackInvoice').value.trim();
        var errBox  = document.getElementById('trackFormError');
        var btn     = document.getElementById('trackBtn');

        errBox.classList.add('hidden');
        errBox.textContent = '';

        if (!phone && !invoice) {
            errBox.textContent = 'মোবাইল নাম্বার অথবা ইনভয়েস আইডি দিন।';
            errBox.classList.remove('hidden');
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> খুঁজছি...';

        var url = '<?php echo e(route("customer.order_track_json")); ?>?';
        if (phone)   url += 'phone='      + encodeURIComponent(phone);
        if (invoice) url += (phone ? '&' : '') + 'invoice_id=' + encodeURIComponent(invoice);

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r){ return r.json(); })
            .then(function(data) {
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i> ট্র্যাক করুন';

                if (!data.success) {
                    errBox.textContent = data.message;
                    errBox.classList.remove('hidden');
                    return;
                }

                renderTrackResult(data.orders);
                closeTrackModal();
                document.getElementById('trackResultModal').classList.remove('hidden');
                document.getElementById('trackResultModal').classList.add('flex');
                document.body.style.overflow = 'hidden';
            })
            .catch(function() {
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i> ট্র্যাক করুন';
                errBox.textContent = 'কানেকশন সমস্যা। আবার চেষ্টা করুন।';
                errBox.classList.remove('hidden');
            });
    }

    function renderTrackResult(orders) {
        var body = document.getElementById('trackResultBody');
        body.innerHTML = '';

        orders.forEach(function(o) {
            var statusColor = '<?php echo e($generalsetting->primary_color); ?>';

            var itemsHtml = o.items.map(function(item) {
                return '<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f1f1;">'
                    + '<img src="' + item.image + '" style="width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid #eee;" alt="">'
                    + '<div style="flex:1;">'
                    +   '<div style="font-size:13px;font-weight:600;color:#333;">' + item.name + '</div>'
                    +   (item.size  ? '<span style="font-size:10px;background:#f0f0f0;padding:1px 5px;border-radius:3px;margin-right:4px;">Size: '+item.size+'</span>' : '')
                    +   (item.color ? '<span style="font-size:10px;background:#f0f0f0;padding:1px 5px;border-radius:3px;">Color: '+item.color+'</span>' : '')
                    + '</div>'
                    + '<div style="text-align:right;font-size:13px;">'
                    +   '<strong>' + (item.price * item.qty).toLocaleString() + ' ৳</strong>'
                    +   '<div style="font-size:11px;color:#888;">' + item.price + ' × ' + item.qty + '</div>'
                    + '</div></div>';
            }).join('');

            var discountRow = o.discount > 0
                ? '<div style="display:flex;justify-content:space-between;font-size:13px;color:#e53e3e;margin-bottom:4px;"><span>ছাড়</span><span>(-) ' + Number(o.discount).toLocaleString() + ' ৳</span></div>'
                : '';

            var card = '<div style="border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;margin-bottom:0;">'
                + '<div style="background:<?php echo e($generalsetting->primary_color); ?>;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">'
                +   '<div>'
                +     '<div style="color:#fff;font-weight:700;font-size:15px;">Invoice #' + o.invoice_id + '</div>'
                +     '<div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">' + o.date + '</div>'
                +   '</div>'
                +   '<span style="background:#FACC15;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;">' + o.status + '</span>'
                + '</div>'
                + '<div style="padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-bottom:1px solid #f1f1f1;">'
                +   '<div style="display:flex;gap:8px;align-items:flex-start;">'
                +     '<div style="width:34px;height:34px;background:<?php echo e($generalsetting->primary_color); ?>;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;"><i class="fa-solid fa-user"></i></div>'
                +     '<div><div style="font-size:10px;text-transform:uppercase;color:#999;font-weight:700;letter-spacing:.5px;">কাস্টমার</div>'
                +       '<div style="font-size:13px;font-weight:600;color:#333;">' + o.customer_name + '</div>'
                +       '<div style="font-size:12px;color:#666;">' + o.customer_phone + '</div></div></div>'
                +   '<div style="display:flex;gap:8px;align-items:flex-start;">'
                +     '<div style="width:34px;height:34px;background:<?php echo e($generalsetting->primary_color); ?>;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;"><i class="fa-solid fa-map-pin"></i></div>'
                +     '<div><div style="font-size:10px;text-transform:uppercase;color:#999;font-weight:700;letter-spacing:.5px;">ঠিকানা</div>'
                +       '<div style="font-size:13px;font-weight:600;color:#333;">' + o.area + '</div>'
                +       '<div style="font-size:12px;color:#666;">' + o.address + '</div></div></div>'
                + '</div>'
                + '<div style="padding:14px 18px;">'
                +   '<div style="font-size:12px;font-weight:700;color:#333;border-bottom:2px solid #f1f1f1;padding-bottom:6px;margin-bottom:4px;">অর্ডার আইটেম</div>'
                +   itemsHtml
                + '</div>'
                + '<div style="background:#fafafa;padding:12px 18px;border-top:1px solid #f1f1f1;">'
                +   '<div style="max-width:240px;margin-left:auto;">'
                +   '<div style="display:flex;justify-content:space-between;font-size:13px;color:#555;margin-bottom:4px;"><span>সাবটোটাল</span><span>' + Number(o.subtotal).toLocaleString() + ' ৳</span></div>'
                +   '<div style="display:flex;justify-content:space-between;font-size:13px;color:#555;margin-bottom:4px;"><span>ডেলিভারি চার্জ</span><span>(+) ' + Number(o.shipping_charge).toLocaleString() + ' ৳</span></div>'
                +   discountRow
                +   '<div style="display:flex;justify-content:space-between;font-size:15px;font-weight:700;color:<?php echo e($generalsetting->primary_color); ?>;border-top:1px solid #e1e1e1;padding-top:8px;margin-top:4px;"><span>মোট</span><span>' + Number(o.grand_total).toLocaleString() + ' ৳</span></div>'
                +   '</div></div>'
                + '</div>';

            body.innerHTML += card;
        });
    }

    // ESC to close tracking modals
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') { closeTrackModal(); closeTrackResult(); closeComplaintModal(); }
    });

    // ========== Complaint Modal Functions ==========
    function openComplaintModal() {
        var modal = document.getElementById('complaintModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
    }
    function closeComplaintModal() {
        var modal = document.getElementById('complaintModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = '';
        // Reset form
        document.getElementById('complaintForm').reset();
        document.getElementById('complaintSuccess').classList.add('hidden');
        document.getElementById('complaintError').classList.add('hidden');
        document.getElementById('complaintBtnText').textContent = 'কমপ্লেইন পাঠান';
        document.getElementById('complaintSubmitBtn').disabled = false;
    }

    function submitComplaint() {
        var form    = document.getElementById('complaintForm');
        var name    = document.getElementById('c_name').value.trim();
        var phone   = document.getElementById('c_phone').value.trim();
        var desc    = document.getElementById('c_description').value.trim();
        var errBox  = document.getElementById('complaintError');
        var sucBox  = document.getElementById('complaintSuccess');

        // Client-side validation
        errBox.classList.add('hidden');
        if (!name)  { errBox.textContent = 'নাম লিখুন।'; errBox.classList.remove('hidden'); return; }
        if (!phone) { errBox.textContent = 'মোবাইল নম্বর লিখুন।'; errBox.classList.remove('hidden'); return; }
        if (!desc)  { errBox.textContent = 'কমপ্লেইনের বিবরণ লিখুন।'; errBox.classList.remove('hidden'); return; }

        var btn  = document.getElementById('complaintSubmitBtn');
        var btnT = document.getElementById('complaintBtnText');
        btn.disabled = true;
        btnT.textContent = 'পাঠানো হচ্ছে...';

        var formData = new FormData(form);

        fetch('<?php echo e(route("complaint.store")); ?>', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '<?php echo e(csrf_token()); ?>'
            },
            body: formData
        })
        .then(function(res) {
            if (res.ok) {
                // Show success
                form.classList.add('hidden');
                sucBox.classList.remove('hidden');
            } else {
                return res.json().then(function(data) {
                    var msg = data.message || 'কিছু একটা সমস্যা হয়েছে। আবার চেষ্টা করুন।';
                    if (data.errors) {
                        var msgs = Object.values(data.errors).flat();
                        msg = msgs.join(' ');
                    }
                    errBox.textContent = msg;
                    errBox.classList.remove('hidden');
                    btn.disabled = false;
                    btnT.textContent = 'কমপ্লেইন পাঠান';
                });
            }
        })
        .catch(function() {
            errBox.textContent = 'নেটওয়ার্ক সমস্যা। আবার চেষ্টা করুন।';
            errBox.classList.remove('hidden');
            btn.disabled = false;
            btnT.textContent = 'কমপ্লেইন পাঠান';
        });
    }
    // ========== End Complaint Modal Functions ==========
    </script>

    <script>
        // Lightbox
        var lbPhotos = [];
        var lbIndex  = 0;

        <?php if(isset($gallery) && $gallery->count() > 0): ?>
        lbPhotos = [
            <?php $__currentLoopData = $gallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $photo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            { src: '<?php echo e(asset($photo->image)); ?>', caption: '<?php echo e(addslashes($photo->caption ?? '')); ?>' },
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        ];
        <?php endif; ?>

        function openLightbox(src, caption) {
            lbIndex = lbPhotos.findIndex(function(p) { return p.src === src; });
            if (lbIndex < 0) lbIndex = 0;
            showLightbox();
        }
        function showLightbox() {
            var lb = document.getElementById('lightbox');
            if (!lb || !lbPhotos.length) return;
            document.getElementById('lightboxImg').src = lbPhotos[lbIndex].src;
            document.getElementById('lightboxCaption').textContent = lbPhotos[lbIndex].caption;
            lb.classList.remove('hidden');
            lb.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }
        function closeLightbox() {
            var lb = document.getElementById('lightbox');
            if (!lb) return;
            lb.classList.add('hidden');
            lb.classList.remove('flex');
            document.body.style.overflow = '';
        }
        function prevPhoto(e) {
            e.stopPropagation();
            lbIndex = (lbIndex - 1 + lbPhotos.length) % lbPhotos.length;
            showLightbox();
        }
        function nextPhoto(e) {
            e.stopPropagation();
            lbIndex = (lbIndex + 1) % lbPhotos.length;
            showLightbox();
        }
    </script>

    
    <?php $popup = App\Models\Popup::where('status', 1)->latest()->first(); ?>
    <?php if($popup): ?>
    <div id="popShopModal" style="display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; padding:16px;">
        <div style="position:relative; background:#fff; border-radius:0; overflow:hidden; box-shadow:0 15px 50px rgba(0,0,0,0.3); max-width:850px; width:100%;">
            <button onclick="closePsModal()" style="position:absolute;top:15px;right:15px;background:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:32px;color:#333;cursor:pointer;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:0.2s;" onmouseover="this.style.color='#b93a3a'" onmouseout="this.style.color='#333'">&times;</button>
            <div class="ps-layout">
                <div class="ps-text-section">
                    <h3 class="ps-brand"><?php echo e($popup->title); ?></h3>
                    <div class="ps-headline">
                        <p><?php echo nl2br(e($popup->description)); ?></p>
                    </div>
                    <?php if($popup->offer_end_text): ?>
                    <p class="ps-deadline"><?php echo e($popup->offer_end_text); ?></p>
                    <?php endif; ?>
                    <a href="<?php echo e($popup->link ?? '#'); ?>" class="ps-btn" onclick="closePsModal()">
                        <?php echo e($popup->btn_text ?? 'Shop the Sale'); ?>

                    </a>
                    <div class="ps-footer">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/></svg>
                        <span>POWERED BY <strong><?php echo e(optional($generalsetting)->name ?? 'CommerceGurus'); ?></strong></span>
                    </div>
                </div>
                <div class="ps-image-section">
                    <img src="<?php echo e(url('public/'.$popup->image)); ?>" alt="Offer Image">
                </div>
            </div>
        </div>
    </div>

    <style>
    .ps-layout { display:flex; flex-direction:row; min-height:450px; }
    .ps-text-section { width:50%; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:left; }
    .ps-brand { color:#b93a3a; font-family:'Georgia','Times New Roman',serif; font-weight:700; font-size:38px; margin-bottom:15px; line-height:1; }
    .ps-headline { color:#222; font-size:20px; font-weight:700; line-height:1.4; margin-bottom:15px; }
    .ps-headline p { font-weight:400; font-size:16px; color:#555; margin-top:10px; }
    .ps-deadline { color:#888; font-size:14px; margin-bottom:30px; }
    .ps-btn { background-color:#2c3e50; color:#fff !important; text-decoration:none; padding:15px 30px; text-align:center; font-weight:600; font-size:16px; border-radius:2px; display:block; width:100%; transition:0.3s; }
    .ps-btn:hover { background-color:#000; }
    .ps-footer { margin-top:40px; font-size:10px; color:#aaa; display:flex; align-items:center; gap:8px; text-transform:uppercase; }
    .ps-footer strong { color:#333; }
    .ps-image-section { width:50%; position:relative; background:#f0f0f0; }
    .ps-image-section img { width:100%; height:100%; object-fit:cover; display:block; }
    @media (max-width: 768px) {
        .ps-layout { flex-direction:column-reverse; }
        .ps-text-section { width:100%; padding:30px; }
        .ps-image-section { width:100%; height:250px; }
        .ps-brand { font-size:30px; }
    }
    </style>

    <script>
    function closePsModal() {
        var m = document.getElementById('popShopModal');
        m.style.display = 'none';
        document.body.style.overflow = '';
    }
    document.getElementById('popShopModal').addEventListener('click', function(e) {
        if (e.target === this) closePsModal();
    });
    document.addEventListener('DOMContentLoaded', function() {
        var hoursToWait   = 3;
        var delaySeconds  = 2;
        var timeLimit     = hoursToWait * 60 * 60 * 1000;
        var lastShown     = localStorage.getItem('psPopupLastShown');
        var now           = new Date().getTime();
        if (!lastShown || (now - parseInt(lastShown) > timeLimit)) {
            setTimeout(function() {
                var m = document.getElementById('popShopModal');
                m.style.display = 'flex';
                document.body.style.overflow = 'hidden';
                localStorage.setItem('psPopupLastShown', now);
            }, delaySeconds * 1000);
        }
    });
    </script>
    <?php endif; ?>

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <?php if(session('show_order_limit_modal')): ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var whatsappNumber = "<?php echo e(optional($contact)->whatsapp ?? optional($contact)->hotline ?? '8801700000000'); ?>";

        Swal.fire({
            title: '',
            html: `
                <div class="custom-modal-content">
                    <div class="modal-header-custom">
                        <div class="header-left">
                            <i class="fas fa-exclamation-triangle header-icon"></i>
                            <span>Duplicate Order Detective Alert</span>
                        </div>
                        <i class="fas fa-times close-icon" onclick="Swal.close()"></i>
                    </div>
                    <div class="modal-body-custom">
                        <p>
                            <img src="https://img.icons8.com/emoji/48/000000/warning-emoji.png" style="width:20px;vertical-align:text-bottom;">
                            <b>সতর্কতা!</b> আপনি ইতিমধ্যে এই পণ্যটির জন্য অর্ডার দিয়েছেন। নির্দিষ্ট সময়ের মধ্যে একই পণ্যের পুনরায় অর্ডার দেওয়া অনুমোদিত নয়।
                            👉 আপনি যদি সত্যিই আবার অর্ডার করতে চান, তাহলে নিচে দেওয়া WhatsApp নম্বরে যোগাযোগ করুন:
                        </p>
                    </div>
                    <div class="modal-footer-custom">
                        <a href="https://wa.me/${whatsappNumber}?text=আমি একই পণ্য পুনরায় অর্ডার করতে চাই, অনুগ্রহ করে সাহায্য করুন।" target="_blank" class="btn-whatsapp-custom">
                            <i class="fab fa-whatsapp"></i> CONTACT ON WHATSAPP
                        </a>
                        <button onclick="Swal.close()" class="btn-close-custom">Close</button>
                    </div>
                </div>
            `,
            showConfirmButton: false,
            background: 'transparent',
            customClass: { popup: 'swal-no-padding' },
            allowOutsideClick: false
        });
    });
    </script>

    <style>
    .swal-no-padding { padding:0 !important; background:none !important; box-shadow:none !important; overflow:visible !important; }
    .custom-modal-content { background:#fff; border-radius:8px; overflow:hidden; font-family:'Arial',sans-serif; box-shadow:0 10px 25px rgba(0,0,0,0.5); max-width:500px; margin:0 auto; }
    .modal-header-custom { background-color:#b91c1c; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:18px; font-weight:bold; }
    .header-left { display:flex; align-items:center; gap:10px; }
    .header-icon { color:#facc15; font-size:20px; }
    .close-icon { cursor:pointer; opacity:0.8; font-size:20px; transition:0.2s; }
    .close-icon:hover { opacity:1; }
    .modal-body-custom { padding:30px 25px; text-align:left; font-size:15px; line-height:1.6; color:#4b5563; }
    .modal-footer-custom { padding:0 25px 30px 25px; display:flex; justify-content:center; gap:15px; }
    .btn-whatsapp-custom { background-color:#10b981; color:#fff !important; text-decoration:none; padding:10px 20px; border-radius:50px; font-weight:bold; font-size:13px; display:flex; align-items:center; gap:8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:background 0.3s; border:none; }
    .btn-whatsapp-custom:hover { background-color:#059669; }
    .btn-close-custom { background-color:#dc2626; color:#fff; padding:10px 30px; border-radius:50px; font-weight:bold; font-size:14px; border:none; cursor:pointer; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:background 0.3s; }
    .btn-close-custom:hover { background-color:#b91c1c; }
    @media (max-width:450px) {
        .modal-footer-custom { flex-direction:column; }
        .btn-whatsapp-custom, .btn-close-custom { width:100%; justify-content:center; }
    }
    </style>
    <?php endif; ?>

    
    <div class="chat-widget">
        <div class="chat-toggle" id="chatToggle">
            <i class="fas fa-comment-dots"></i>
        </div>
        <div class="chat-options" id="chatOptions">
            <?php if(optional($generalsetting)->facebook_page_username): ?>
            <a href="https://m.me/<?php echo e($generalsetting->facebook_page_username); ?>" target="_blank" class="chat-btn messenger" title="Messenger">
                <i class="fab fa-facebook-messenger"></i>
            </a>
            <?php endif; ?>
            <?php if(optional($contact)->whatsapp): ?>
            <a href="https://wa.me/<?php echo e($contact->whatsapp); ?>" target="_blank" class="chat-btn whatsapp" title="WhatsApp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <?php endif; ?>
            <?php if(optional($contact)->hotline ?? optional($contact)->phone): ?>
            <a href="tel:<?php echo e($contact->hotline ?? $contact->phone); ?>" class="chat-btn hotline" title="Hotline">
                <i class="fas fa-phone"></i>
            </a>
            <?php endif; ?>
        </div>
    </div>

    <style>
    .chat-widget {
        position: fixed;
        bottom: 60px;
        right: 25px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .chat-toggle {
        background: linear-gradient(135deg, #25D366, #128C7E);
        color: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        cursor: pointer;
        transition: transform 0.3s ease;
        font-size: 26px;
    }
    .chat-toggle:hover { transform: scale(1.1); }
    .chat-options {
        display: none;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
        align-items: flex-end;
    }
    .chat-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
        position: relative;
    }
    .chat-btn:hover { transform: translateY(-3px); }
    .chat-btn.whatsapp  { background: #25D366; }
    .chat-btn.messenger { background: #0084FF; }
    .chat-btn.hotline   { background: #FF3B30; }
    .chat-options.show {
        display: flex;
        animation: fadeInUp 0.3s ease;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .chat-btn[title]:hover::after {
        content: attr(title);
        position: absolute;
        right: 65px;
        background: #222;
        color: #fff;
        padding: 5px 10px;
        font-size: 13px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0.9;
    }
    </style>

    <script>
    document.getElementById("chatToggle").addEventListener("click", function () {
        document.getElementById("chatOptions").classList.toggle("show");
    });
    </script>

</body>
</html>
<?php /**PATH C:\xampp\htdocs\resources\views/frontEnd/layouts/pages/landing/sukkari-dates.blade.php ENDPATH**/ ?>