<?php
$lang_code = ($this->session->userdata('site_lang') == 'english') ? 'en' : 'id';

// Mengelompokkan kategori berdasarkan posisi kolom
$columns = [1 => [], 2 => [], 3 => []];
$special_categories = [];

foreach ($footer_categories as $category) {
    if ($category['is_special']) {
        $special_categories[$category['id']] = $category;
    } else if ($category['column_position'] >= 1 && $category['column_position'] <= 3) {
        $columns[$category['column_position']][] = $category;
    }
}
?>

<footer>
    <div class="footer-container">
        <?php
        // Render kolom 1-3
        for ($col = 1; $col <= 3; $col++):
        ?>
            <div class="footer-column">
                <?php
                // Kategori normal untuk kolom ini
                foreach ($columns[$col] as $category):
                ?>
                    <section class="footer-section">
                        <h3 onclick="toggleDropdown(this)" aria-expanded="false">
                            <?= $category['name_' . $lang_code]; ?>
                            <i class="fa fa-chevron-down nav-dropdown"></i>
                        </h3>
                        <nav>
                            <ul>
                                <?php foreach ($category['links'] as $link): ?>
                                    <li><a href="<?= $link['url']; ?>"><?= $link['name_' . $lang_code]; ?></a></li>
                                <?php endforeach; ?>
                            </ul>
                        </nav>
                    </section>
                <?php endforeach; ?>

                <?php
                // Special categories untuk kolom ini
                foreach ($special_categories as $special_category):
                    if ($special_category['column_position'] == $col):
                        // Special category: Social Media
                        if (
                            strpos(strtolower($special_category['name_id']), 'colek kami') !== false ||
                            strpos(strtolower($special_category['name_en']), 'connect with us') !== false
                        ):
                ?>
                            <section class="footer-section">
                                <h3><?= $special_category['name_' . $lang_code]; ?></h3>
                                <div class="social-links">
                                    <?php foreach ($footer_social_media as $social): ?>
                                        <a href="<?= $social['url']; ?>" target="_blank" aria-label="<?= $social['name']; ?>">
                                            <i class="<?= $social['icon_class']; ?>"></i>
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            </section>
                        <?php
                        // Special category: Payment Methods
                        elseif (
                            strpos(strtolower($special_category['name_id']), 'metode pembayaran') !== false ||
                            strpos(strtolower($special_category['name_en']), 'available payments') !== false
                        ):
                        ?>
                            <section class="footer-section payments-section">
                                <h3><?= $special_category['name_' . $lang_code]; ?></h3>
                                <div class="payment-methods">
                                    <?php if (empty($footer_payment_methods)): ?>
                                        <?php foreach ($footer_payment_methods as $payment): ?>
                                            <img src="<?= $payment['image_url']; ?>" alt="<?= $payment['name']; ?>" class="loaded">
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <?php foreach ($footer_payment_methods as $payment): ?>
                                            <img src="<?= $payment['image_url']; ?>" alt="<?= $payment['name']; ?>" class="loaded">
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </div>
                            </section>
                        <?php endif; ?>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        <?php endfor; ?>

        <!-- Kolom ke-4 untuk Asmaradoor (selalu di kolom terakhir) -->
        <div class="footer-column">
            <section class="footer-section footer-asmaradoor">
                <?php if (!empty($footer_asmaradoor)): ?>
                    <h1><?= $footer_asmaradoor['title_' . $lang_code]; ?></h1>
                    <a href="<?= $footer_asmaradoor['link_url']; ?>">
                        <img class="footer-asmaradoor-image" src="<?= $footer_asmaradoor['image_url']; ?>"
                            alt="<?= $footer_asmaradoor['alt_text_' . $lang_code]; ?>">
                    </a>
                <?php endif; ?>
            </section>
        </div>
    </div>

    <!-- Footer Bottom -->
    <div class="footer-bottom">
        <section class="footer-section">
            <?php if (!empty($footer_bottom)): ?>
                <p><?= $footer_bottom['content_' . $lang_code]; ?></p>
            <?php endif; ?>
            <small>Copyright © <?= date('Y'); ?>, Laci Asmara</small>
        </section>
    </div>
</footer>

<div class="floating-box" style="display: none;">
    <p class="floating-box-text"><?= lang('footer_laciasmara_fab'); ?></p>
    <button class="close-btn" onclick="closeFloatingBox()">
        <i class="fas fa-times"></i>
    </button>
</div>
<div class="fab-container">
    <a href="https://api.whatsapp.com/send/?phone=628114715626" class="fab">
        <i class="fab fa-whatsapp fab-icon"></i>
    </a>
</div>

<nav class="bottom-nav">
    <div class="nav-container">
        <a href="<?= base_url() ?>" class="nav-item">
            <i data-feather="home"></i>
            <span>Home</span>
        </a>

        <a href="<?= base_url("category/discount") ?>" class="nav-item">
            <i data-feather="tag"></i>
            <span>Promo</span>
        </a>

        <a class="nav-item" id="open-fullscreen-search">
            <i data-feather="search"></i>
            <span>Search</span>
        </a>

        <button class="nav-item category" id="category-button">
            <i data-feather="grid"></i>
            <span>Categories</span>
        </button>

        <a class="nav-item" id="account-button">
            <i data-feather="user"></i>
            <span>Account</span>
        </a>
    </div>
</nav>

<!-- Search -->
<div class="fullscreen-search-overlay" id="search-overlay">
    <div class="fullscreen-search-container">
        <div class="fullscreen-search-header">
            <div class="search-header-content">
                <button class="fullscreen-search-close" id="close-search">
                    <i data-feather="x"></i>
                </button>
                <div class="fullscreen-search-input-container">
                    <form class="fullscreen-search-form" id="fullscreen-search-form">
                        <input
                            type="text"
                            placeholder="vibrators"
                            class="fullscreen-search-input"
                            id="fullscreen-search-input"
                            autocomplete="off">
                        <button type="submit" class="fullscreen-search-button">
                            <i data-feather="search"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="fullscreen-search-content" id="search-content">
            <?php
            $popular_categories = $popular_categories ?? [];
            $trending_searches = $trending_searches ?? [];
            ?>
            <!-- Search Results -->
            <div class="fullscreen-search-results" id="search-results" style="display: none;"></div>
            <!-- Default suggestions -->
            <div class="search-suggestions" id="search-suggestions">
                <h3><i data-feather="clock"></i> Pencarian Trending</h3>
                <div class="trending-searches">
                    <?php foreach ($trending_searches as $trend): ?>
                        <a href="#" class="trending-tag"><?= $trend ?></a>
                    <?php endforeach; ?>
                </div>
                <h3><i data-feather="trending-up"></i> Kategori Popular</h3>
                <div class="suggestions-grid">
                    <?php foreach ($popular_categories as $category): ?>
                        <a href="<?= base_url('category/' . $category['slug']) ?>" class="suggestion-item">
                            <div class="suggestion-image">
                                <?php if (!empty($category['image'])): ?>
                                    <img src="<?= base_url('uploads/category/' . $category['image']) ?>"
                                        alt="<?= htmlspecialchars($category['name']) ?>"
                                        loading="lazy">
                                    <div class="image-overlay"></div>
                                <?php else: ?>
                                    <div class="suggestion-icon-fallback">
                                        <i data-feather="tag"></i>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div class="suggestion-text">
                                <div class="suggestion-title"><?= $category['name'] ?></div>
                                <div class="suggestion-subtitle"><?= $category['product_count'] ?>+ produk</div>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of search -->
<!-- Category Overlay & Dropdown -->
<div class="footer-category-overlay" id="category-overlay"></div>

<div class="footer-category-dropdown" id="category-dropdown">
    <div class="dropdown-header">
        <h3>Shop by Category</h3>
        <button class="footer-close-btn" id="close-dropdown">
            <i data-feather="x"></i>
        </button>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="<?= base_url('category/New-Arrivals'); ?>" class="quick-action">Pendatang Baru</a>
        <a href="<?= base_url('category/diskon'); ?>" class="quick-action">Lagi Diskon</a>
        <a href="<?= base_url('category/terlaris'); ?>" class="quick-action">Terlaris</a>
        <a href="<?= base_url('product'); ?>" class="quick-action">Semua Produk</a>
        <a href="<?= base_url('brand'); ?>" class="quick-action">Semua Brand</a>
    </div>

    <!-- Category Grid -->
    <div class="footer-category-grid">
        <?php
        $menus = [
            'Vibrator' => [
                'Klitoris' => 'category/vibrators/clitoris',
                'Dual Stimulator' => 'category/vibrators/dual-stimulator',
                'Vagina' => 'category/vibrators/vagina',
                'Wireless' => 'category/vibrators/wireless-and-remote',
            ],
            'Dildo' => [
                'Borosilicate Glass' => 'category/dildo/glass',
                'Silicone' => 'category/dildo/silicone',
                'Stainless Steel' => 'category/dildo/stainless-steel',
            ],
            'Butt Play' => [
                'Borosilicate Glass' => 'category/anal/borosilicate-glass',
                'Silicone' => 'category/anal/silicone',
                'Stainless Steel' => 'category/anal/stainless-steel',
            ],
            'Male Toys' => [
                'Masturbator' => 'category/male-toys/masturbator',
                'Cock Ring' => 'category/male-toys/cock-ring',
            ],
            'Bondage' => [
                'Strap On' => 'category/accessories/strap-on',
                'Harness' => 'category/accessories/harness',
                'Fetish' => 'category/accessories/fetish',
            ],
            'Wellness' => [
                'Kegel' => 'category/wellness/kegel',
                'Condoms & Barrier' => 'category/wellness/condom',
                'Lubricants' => 'category/wellness/lube',
                'Period' => 'category/wellness/period',
                'Cleanser' => 'category/wellness/sanitary',
                'Dilator' => 'category/wellness/dilator',
            ],
            'Merchandise' => []
        ];

        // Menu links untuk header kategori
        $menu_links = [
            'Vibrator' => 'category/vibrators',
            'Dildo' => 'category/dildo',
            'Butt Play' => 'category/anal',
            'Male Toys' => 'category/male-toys',
            'Bondage' => 'category/accessories/bdsm',
            'Wellness' => 'category/wellness',
            'Merchandise' => 'category/merchandise',
        ];

        foreach ($menus as $title => $links) :
            $title_link = isset($menu_links[$title]) ? site_url($menu_links[$title]) : '#';
        ?>
            <div class="footer-category-section">
                <div class="footer-category-header">
                    <h4>
                        <a href="<?= $title_link; ?>" class="title_link" onclick="event.stopPropagation();">
                            <?= $title; ?>
                        </a>
                    </h4>
                    <i data-feather="chevron-down" class="footer-chevron"></i>
                </div>
                <div class="footer-category-links">
                    <?php foreach ($links as $name => $url) : ?>
                        <a href="<?= base_url($url); ?>"><?= $name; ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Sidebar -->
<div id="cart-sidebar" class="cart-sidebar">
    <div class="cart-sidebar-header">
        <h3>Berhasil Menambahkan ke Keranjang!</h3>
        <button id="close-sidebar" class="close-sidebar">×</button>
    </div>
    <div id="cart-items-sidebar" class="cart-items-sidebar">
    </div>
    <div class="cart-sidebar-footer">
        <button class="cta-button-sidebar" id="continue-shopping">Lanjut Belanja</button>
        <button class="cta-button-sidebar" id="go-to-checkout">Beli</button>
    </div>
    <div class="cart-sidebar-suggestions">
        <h4 class="sidebar-suggestions-title">Beli Barengan</h4>
        <div id="suggested-sidebar-products" class="sidebar-suggested-products-grid">

        </div>
    </div>
</div>

<style>
    /* Overlay for cart sidebar */
    .cart-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .cart-sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .cart-sidebar {
        position: fixed;
        top: 0;
        right: -500px;
        width: 500px;
        height: 100%;
        background-color: #fff;
        box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease;
        z-index: 9999;
        padding: 25px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .cart-sidebar.open {
        right: 0;
    }

    .cart-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .cart-sidebar-header h3 {
        margin: 0;
        font-size: 1.2rem;
        color: #333;
    }

    .cart-sidebar-header span {
        background-color: #7A4397;
        color: white;
        border-radius: 50%;
        padding: 2px 8px;
        margin-left: 10px;
        font-size: 0.8rem;
    }

    .close-sidebar {
        background: none;
        border: none;
        font-size: 24px;
        color: #888;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .close-sidebar:hover {
        color: #7A4397;
    }

    .cart-items-sidebar {
        /* flex: 1; */
        margin-bottom: 20px;
        padding-right: 10px;
    }

    .cart-sidebar-footer {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #e0e0e0;
        padding-top: 15px;
    }

    .cta-button-sidebar {
        position: relative;
        padding: 12px 25px;
        background-color: #7A4397;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        font-weight: 500;
        box-sizing: border-box;
        overflow: hidden;
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .cta-button-sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent);
        transition: all 0.6s ease;
    }

    .cta-button-sidebar:hover {
        background-color: #9b62b0;
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }

    .cta-button-sidebar:hover::before {
        left: 100%;
    }

    .cta-button-sidebar:active {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: #6a3a80;
    }

    .cta-button-sidebar:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(122, 67, 151, 0.4);
    }

    /* Scrollbar styling for cart items */
    .cart-items-sidebar::-webkit-scrollbar {
        width: 8px;
    }

    .cart-items-sidebar::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .cart-items-sidebar::-webkit-scrollbar-thumb {
        background: #7A4397;
        border-radius: 4px;
    }

    /* Responsiveness */
    @media (max-width: 768px) {

        .cart-sidebar {
            width: 100%;
            right: -100%;
            padding: 20px;
        }

        .cart-sidebar.open {
            right: 0;
        }

        .cart-item {
            padding: 10px 0;
        }

        .cart-item-image {
            width: 60px;
            height: 60px;
        }

        .cart-items-sidebar {
            flex: none;
        }

        .sidebar-suggestions-title {
            margin-top: 8px;
        }
    }

    .cart-sidebar-suggestions {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e0e0e0;
    }

    .sidebar-suggestions-title {
        font-size: 1rem;
        color: #333;
        margin-bottom: 15px;
    }

    .sidebar-suggested-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 20px;
        box-sizing: border-box;
    }


    @media (max-width: 768px) {
        .sidebar-suggested-products-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
    }
</style>
<script src="<?= base_url("themes/3/js/header.js") ?>"></script>

<script>
    function toggleDropdown(element) {
        const allNavs = document.querySelectorAll('.footer-section nav');
        const allIcons = document.querySelectorAll('.footer-section i.nav-dropdown');
        allNavs.forEach((nav) => {
            if (nav !== element.nextElementSibling) {
                nav.classList.remove('open');
            }
        });
        allIcons.forEach((icon) => {
            if (icon !== element.querySelector('.nav-dropdown')) {
                icon.classList.remove('rotate');
            }
        });

        const nav = element.nextElementSibling;
        if (nav) {
            nav.classList.toggle('open');
            const isExpanded = element.getAttribute('aria-expanded') === 'true';
            element.setAttribute('aria-expanded', !isExpanded);

            const icon = element.querySelector('.nav-dropdown');
            if (icon) {
                icon.classList.toggle('rotate');
            }
        }
    }

    function showFloatingBox() {
        const floatingBox = document.querySelector('.floating-box');
        if (floatingBox) {
            floatingBox.style.display = 'flex';
        }
    }

    function closeFloatingBox() {
        const floatingBox = document.querySelector('.floating-box');
        if (floatingBox) {
            floatingBox.style.display = 'none';

            localStorage.setItem('floatingBoxClosed', 'true');
        }
    }

    function resetFloatingBox() {
        localStorage.removeItem('floatingBoxClosed');
        showFloatingBox();
    }
    let debounceTimer;

    // Debounce function
    function debounce(callback, delay) {
        return function(...args) {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => callback.apply(this, args), delay);
        };
    }


    document.addEventListener('DOMContentLoaded', () => {
        feather.replace();

        // Category
        const categoryButton = document.getElementById('category-button');
        const categoryOverlay = document.getElementById('category-overlay');
        const categoryDropdown = document.getElementById('category-dropdown');
        const closeButton = document.getElementById('close-dropdown');

        categoryButton.addEventListener('click', (e) => {
            e.preventDefault();
            categoryOverlay.classList.add('active');
            categoryDropdown.classList.add('active');
            document.body.style.overflow = 'hidden';
        });

        // Close dropdown functions
        function closeDropdown() {
            categoryOverlay.classList.remove('active');
            categoryDropdown.classList.remove('active');
            document.body.style.overflow = '';

            document.querySelectorAll('.footer-category-section').forEach(section => {
                section.classList.remove('active');
            });
        }

        // Close on overlay click
        categoryOverlay.addEventListener('click', closeDropdown);

        // Close on close button click
        closeButton.addEventListener('click', closeDropdown);

        // Close on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeDropdown();
            }
        });

        document.querySelectorAll('.footer-category-header').forEach(header => {
            header.addEventListener('click', function() {
                const section = this.parentElement;
                const isActive = section.classList.contains('active');

                // Close other sections (optional - remove if you want multiple open)
                document.querySelectorAll('.footer-category-section').forEach(s => {
                    if (s !== section) s.classList.remove('active');
                });

                // Toggle current section
                section.classList.toggle('active');
            });
        });

        document.querySelectorAll('.nav-item:not(#category-button)').forEach(item => {
            item.addEventListener('click', function(e) {

                // Remove active from all nav items
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });

                // Add active to clicked item
                this.classList.add('active');
            });
        });

        // End of nav bottom

        // Fullscreen search
        const openSearchBtn = document.getElementById('open-fullscreen-search');
        const searchOverlay = document.getElementById('search-overlay');
        const closeSearchBtn = document.getElementById('close-search');
        const fullscreenSearchInput = document.getElementById('fullscreen-search-input');
        const fullscreenSearchForm = document.getElementById('fullscreen-search-form');
        const searchSuggestions = document.getElementById('search-suggestions');
        const fullscreenSearchResults = document.getElementById('search-results');

        // Open/Close Functions
        function openFullscreenSearch() {
            searchOverlay.classList.add('active');
            document.body.style.overflow = 'hidden';
            setTimeout(() => fullscreenSearchInput.focus(), 400);
        }

        function closeFullscreenSearch() {
            searchOverlay.classList.remove('active');
            document.body.style.overflow = '';
            fullscreenSearchInput.value = '';
            showSuggestions();
        }

        function showSuggestions() {
            searchSuggestions.style.display = 'block';
            fullscreenSearchResults.style.display = 'none';
        }

        function showFullscreenSearchResults() {
            searchSuggestions.style.display = 'none';
            fullscreenSearchResults.style.display = 'block';
        }

        // Modified handleSearch for fullscreen
        function handleFullscreenSearch(query) {
            if (query.trim() === "") {
                showSuggestions();
                return;
            }

            showFullscreenSearchResults();
            fullscreenSearchResults.innerHTML = `
                    <div class="search-loading">
                        <div class="loading-spinner"></div>
                        Mencari "${query}"...
                    </div>
                `;

            const url = dropdownSearchUrl + "?query=" + encodeURIComponent(query);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (!data.results) {
                        fullscreenSearchResults.innerHTML = `
                        <div class="search-result-header">Terjadi kesalahan. Coba lagi nanti.</div>
                    `;
                        return;
                    }

                    const {
                        products,
                        brands,
                        categories
                    } = data.results;
                    const hasResults = (products && products.length > 0) ||
                        (brands && brands.length > 0) ||
                        (categories && categories.length > 0);

                    if (!hasResults) {
                        fullscreenSearchResults.innerHTML = `
                            <div class="search-empty">
                                <div class="search-empty-icon">
                                    <i data-feather="search" style="width: 100%; height: 100%;"></i>
                                </div>
                                <h3>Tidak ada hasil untuk "${query}"</h3>
                                <p>Coba kata kunci yang berbeda atau lihat kategori di bawah</p>
                            </div>
                        `;
                        searchSuggestions.style.display = 'block';
                        feather.replace();
                        return;
                    }

                    let resultsHTML = ``;

                    // Brands
                    if (brands && brands.length > 0) {
                        resultsHTML += `
                        <div class="search-result-section-title">
                            <h3><i data-feather="award"></i> Brand</h3>
                        </div>
                        <div class="search-result-section">
                            ${brands.map(item => `
                                <div class="search-result-item" onclick="location.href='${item.url}'">
                                    <div class="search-result-content">
                                        <img src="${item.image}" alt="${item.brand}" class="search-result-image">
                                        <div class="search-result-text">
                                            <span class="search-result-title">${item.brand}</span>
                                            <span class="search-result-subtitle">${item.total_product} produk</span>
                                        </div>
                                    </div>
                                </div>
                            `).join("")}
                        </div>
                    `;
                    }

                    // Categories
                    if (categories && categories.length > 0) {
                        resultsHTML += `
                        <div class="search-result-section-title">
                            <h3><i data-feather="grid"></i> Kategori</h3>
                        </div>
                        <div class="search-result-section">
                            ${categories.map(item => `
                                <div class="search-result-item" onclick="location.href='${item.url}'">
                                    <div class="search-result-content">
                                        <img src="${item.image}" alt="${item.category}" class="search-result-image">
                                        <div class="search-result-text">
                                            <span class="search-result-title">${item.category}</span>
                                            <span class="search-result-subtitle">${item.total_product} produk</span>
                                        </div>
                                    </div>
                                </div>
                            `).join("")}
                        </div>
                    `;
                    }

                    // Products
                    if (products && products.length > 0) {
                        resultsHTML += `
                            <div class="search-result-section-title">
                                    <h3><i data-feather="package"></i> Produk</h3>
                            </div>
                            <div class="search-result-section"> 
                                ${products.map(item => `
                                    <div class="search-result-item" onclick="location.href='${item.url}'">
                                        <div class="search-result-content">
                                            <div class="product-image-wrapper">
                                                <img src="${item.image}" alt="${item.title}" class="search-result-image">
                                                ${item.isDiscounted ? `<span class="search-discount-badge">-${item.discount_percentage}%</span>` : ''}
                                            </div>
                                            <div class="search-result-text">
                                                <span class="search-result-title">${item.title}</span>
                                                <span class="search-result-brand">${item.brand}</span>
                                                <div class="search-price-display">
                                                    ${item.isDiscounted ? 
                                                        `<span class="search-current-price">${item.formatted_final_price}</span>
                                                        <span class="search-old-price">${item.formatted_original_price}</span>` 
                                                    : 
                                                        `<span class="search-current-price">${item.formatted_final_price || '-'}</span>`
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                `).join("")}
                            </div>
                        `;
                    }

                    fullscreenSearchResults.innerHTML = resultsHTML;
                    feather.replace();
                })
                .catch(error => {
                    console.error("Error:", error);
                    fullscreenSearchResults.innerHTML = `
                    <div class="search-result-header">Terjadi kesalahan. Coba lagi nanti.</div>
                `;
                });
        }

        // Event Listeners
        if (openSearchBtn) openSearchBtn.addEventListener('click', openFullscreenSearch);
        if (closeSearchBtn) closeSearchBtn.addEventListener('click', closeFullscreenSearch);

        // Close on overlay click
        if (searchOverlay) {
            searchOverlay.addEventListener('click', (e) => {
                if (e.target === searchOverlay) closeFullscreenSearch();
            });
        }

        // Close on ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && searchOverlay?.classList.contains('active')) {
                closeFullscreenSearch();
            }
        });

        // Search input
        if (fullscreenSearchInput) {
            fullscreenSearchInput.addEventListener('input',
                debounce((e) => handleFullscreenSearch(e.target.value), 300)
            );
        }

        // Form submit
        if (fullscreenSearchForm) {
            fullscreenSearchForm.addEventListener('submit', function(event) {
                event.preventDefault();
                const query = fullscreenSearchInput.value.trim();
                if (!query) return;

                const utmSource = 'website_search';
                const utmMedium = 'fullscreen_search';
                const timestamp = Date.now();

                const searchURL = `${searchUrl}?q=${encodeURIComponent(query)}&utm_source=${utmSource}&utm_medium=${utmMedium}&timestamp=${timestamp}`;
                window.location.href = searchURL;
            });
        }

        // Trending tags
        document.querySelectorAll('.trending-tag').forEach(tag => {
            tag.addEventListener('click', (e) => {
                e.preventDefault();
                const query = tag.textContent.trim();
                fullscreenSearchInput.value = query;
                handleFullscreenSearch(query);
            });
        });
        // End of fullscreen search

        // Navbar Fixed on Scroll
        const navbar = document.querySelector('.navbar-container');
        const header = document.querySelector('header');
        let headerBottom = header.offsetTop + header.offsetHeight;

        function updateNavbar() {
            if (window.scrollY > headerBottom) {
                navbar.classList.add('navbar-fixed');
                document.body.classList.add('has-fixed-nav');
            } else {
                navbar.classList.remove('navbar-fixed');
                document.body.classList.remove('has-fixed-nav');
            }
        }

        function updateHeaderPosition() {
            headerBottom = header.offsetTop + header.offsetHeight;
            updateNavbar();
        }

        window.addEventListener('resize', updateHeaderPosition);
        window.addEventListener('scroll', updateNavbar);

        updateHeaderPosition();

        // setTimeout(() => {
        //     const floatingBox = document.querySelector('.floating-box');
        //     floatingBox.style.display = 'flex';
        // }, 2000);

        // Scroll to Top
        // document.getElementById('scrollToTop').addEventListener('click', function() {
        //     window.scrollTo({
        //         top: 0,
        //         behavior: 'smooth'
        //     });
        // });

        const isFloatingBoxClosed = localStorage.getItem('floatingBoxClosed') === 'true';

        if (!isFloatingBoxClosed) {
            // Jika belum pernah ditutup, tampilkan floating box setelah 2 detik
            setTimeout(showFloatingBox, 2500);
        } else {
            // Jika sudah pernah ditutup, jangan tampilkan floating box
            const floatingBox = document.querySelector('.floating-box');
            if (floatingBox) {
                floatingBox.style.display = 'none';
            }
        }

    });



    // Cart
    $(document).ready(function() {
        const notyf = new Notyf({
            duration: 3000,
            position: {
                x: 'right',
                y: 'top'
            },
            types: [{
                    type: 'success',
                    background: '#7A4397',
                    icon: {
                        className: 'fas fa-check',
                        tagName: 'i',
                        color: 'white'
                    }
                },
                {
                    type: 'error',
                    background: '#dc3545',
                    icon: {
                        className: 'fas fa-times',
                        tagName: 'i',
                        color: 'white'
                    }
                }
            ]
        });

        loadCartItems();

        const cartDropdown = $('#cart-dropdown');
        $('.cart-icon').hover(
            function() {
                loadCartItems();
                cartDropdown.stop(true, true).slideDown(200);
            },
            function() {
                cartDropdown.stop(true, true).slideUp(200);
            }
        );

        cartDropdown.hover(
            function() {
                loadCartItems();
                cartDropdown.stop(true, true).slideDown(200);
            },
            function() {
                cartDropdown.stop(true, true).slideUp(200);
            }
        );

        // Load Cart Items
        function loadCartItems() {
            const baseUrl = "<?= base_url('uploads/product/') ?>";
            $.ajax({
                url: '<?= base_url("cart/get_cart_items") ?>',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        const items = response.items;
                        let itemListHtml = '';
                        let subtotal = 0;

                        if (items.length === 0) {
                            itemListHtml = `
                                <li class="cart-empty">
                                    <p class="cart-empty-header"><?= ucfirst(lang('cart_empty_header')); ?></p>
                                    <p class="cart-empty-text"><?= ucfirst(lang('cart_empty_text')); ?></p>
                                    <a href="<?= base_url('product'); ?>" class="cart-empty-button">
                                        <?= ucfirst(lang('cart_empty_button')); ?>
                                    </a>
                                </li>
                            `;
                            $('.cart-footer').hide();
                        } else {
                            items.forEach(item => {
                                const itemTotal = item.qty * item.price;
                                subtotal += itemTotal;

                                itemListHtml += `
                                <li style="display: flex; align-items: center; gap: 8px;">
                                    <input type="hidden" id="csrfName" value="<?= $this->security->get_csrf_token_name(); ?>">
                                    <input type="hidden" id="csrfHash" value="<?= $this->security->get_csrf_hash(); ?>">

                                    <img src="${baseUrl}${item.image}" alt="${item.name}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                                    <div style="flex-grow: 1;">
                                        <span style="font-weight: 700">${item.name}</span>
                                        <div style="margin-top: 4px;">${item.variant}</div>
                                        <div style="margin-top: 4px;">${item.qty} x IDR ${item.price.toLocaleString()}</div>
                                    </div>
                                    <span class="remove-item" data-id="${item.rowid}" data-detail-id="${item.id}" title="Remove">&times;</span>
                                </li>`;
                            });
                            $('.cart-footer').show();
                        }

                        $('#cart-items').html(itemListHtml);
                        $('#cart-subtotal').text(`IDR ${subtotal.toLocaleString()}`);
                        $('#cart-title-count').text(response.total_items);
                        $('.cart-count').text(response.total_items);

                        $('.remove-item').on('click', function() {
                            const rowId = $(this).data('id');
                            const productDetailId = $(this).data('detail-id');
                            removeCartItem(rowId, productDetailId);
                        });
                    } else {
                        $('#cart-items').html('<li>Gagal memuat keranjang.</li>');
                    }
                },
                error: function() {
                    $('#cart-items').html('<li>Gagal memuat keranjang.</li>');
                }
            });
        }

        // Remove Cart Item
        function removeCartItem(rowId, productDetailId) {
            const csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
            const csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

            $.ajax({
                url: '<?= base_url("cart/remove_item") ?>',
                type: 'POST',
                data: {
                    rowid: rowId,
                    detail_id: productDetailId,
                    [csrfName]: csrfHash
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        $('#cart-title-count').text(response.total_items);
                        $('.cart-count').text(response.total_items);
                        $('#cart-subtotal').text('IDR ' + response.subtotal.toLocaleString());

                        loadCartItems();
                    } else {
                        alert(response.message || 'Gagal menghapus item.');
                    }
                    $('input[name="' + csrfName + '"]').val(response.csrf);
                },
                error: function(xhr) {
                    console.error('Error:', xhr.responseText);
                    alert('Terjadi kesalahan.');
                }
            });
        }

        $('.wishlist-form').on('submit', function(e) {
            e.preventDefault();

            const $form = $(this);
            const $heartButton = $form.find('.wishlist-button');
            const $heartIcon = $form.find('.heart-container i');

            // Disable button dan tambahkan loading state
            $heartButton.prop('disabled', true);
            $heartIcon.removeClass('active');
            $heartIcon.addClass('loading');

            const productId = $form.find('input[name="product_id"]').val();
            const productDetailId = $form.find('input[name="product_detail_id"]').val();
            const variant = $form.find('input[name="variant"]').val();

            const csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
            const csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

            const formData = {
                product_id: productId,
                product_detail_id: productDetailId,
                variant: variant,
                [csrfName]: csrfHash
            }

            $.ajax({
                url: '<?= base_url("account/add_to_wishlist") ?>',
                type: 'POST',
                dataType: 'json',
                data: formData,
                success: function(response) {
                    if (response.status === 'success') {
                        // Update form attribute
                        $form.attr('data-is-wishlisted', response.is_wishlisted);

                        // Update icon
                        if (response.is_wishlisted) {
                            $heartIcon
                                .removeClass('far fa-heart outline-heart')
                                .addClass('fas fa-heart filled-heart');
                        } else {
                            $heartIcon
                                .removeClass('fas fa-heart filled-heart')
                                .addClass('far fa-heart outline-heart');
                        }

                        notyf.success(response.message);
                    } else {
                        window.location.href = "<?= base_url('login') ?>";
                    }
                },
                error: function(xhr, status, error) {
                    if (xhr.status === 401) {
                        window.location.href = "<?= base_url('login') ?>";
                    } else {
                        window.location.href = "<?= base_url('login') ?>";
                    }
                },
                complete: function() {
                    // Hapus loading state dan enable button kembali
                    $heartButton.prop('disabled', false);
                    $heartIcon.removeClass('loading');
                    $heartIcon.addClass('active');
                }
            });
        });

        // Add to Cart
        $('.add-to-cart-form').on('submit', function(e) {
            e.preventDefault();

            const $form = $(this);
            const productId = $form.find('input[name="product_id"]').val();
            const productDetailId = $form.find('input[name="product_detail_id"]').val();
            const productVariant = $form.find('input[name="product_variant"]').val();
            const productName = $form.find('input[name="product_name"]').val();
            const productImage = $form.find('input[name="product_image"]').val();
            const qty = $form.find('input[name="qty"]').val();
            const price = $form.find('input[name="price"]').val();
            const attributeDetailId = $form.find('input[name="attribute_detail_id"]').val();
            const sku = $form.find('input[name="sku"]').val();

            const csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
            const csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

            const formData = {
                product_id: productId,
                product_detail_id: productDetailId,
                product_variant: productVariant,
                product_name: productName,
                product_image: productImage,
                attribute_detail_id: attributeDetailId,
                sku: sku,
                qty: qty,
                price: price,
                [csrfName]: csrfHash
            };

            $.ajax({
                url: '<?= base_url("cart/add_to_cart") ?>',
                type: 'POST',
                dataType: 'json',
                data: formData,
                success: function(response) {
                    if (response.status === 'success') {
                        $('.cart-count').text(response.cart_count);
                        $('#cart-title-count').text(response.cart_count);
                        loadCartItems();
                        showLatestCartItem(response.latest_item);
                        openCartSidebar();
                        // $('#cart-sidebar-count').text(response.cart_count);
                        // notyf.success('Produk berhasil ditambahkan ke keranjang');
                    } else if (response.message === 'Redirect to login') {
                        window.location.href = "<?= base_url('login') ?>";
                    } else {
                        notyf.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'Terjadi kesalahan saat menambahkan produk, hubungi contact support jika kamu menemukan notifikasi ini.';

                    // if (xhr.responseJSON && xhr.responseJSON.message) {
                    //     errorMessage = xhr.responseJSON.message;
                    // }

                    notyf.error(errorMessage);
                }

            });
        });

        const cartSidebar = document.getElementById('cart-sidebar');
        const continueShoppingButton = document.getElementById('continue-shopping');
        const checkoutButton = document.getElementById('go-to-checkout');
        const cartSidebarOverlay = document.createElement('div');
        cartSidebarOverlay.classList.add('cart-sidebar-overlay');
        document.body.appendChild(cartSidebarOverlay);

        const closeSidebarBtn = document.getElementById('close-sidebar');

        closeSidebarBtn.addEventListener('click', () => {
            cartSidebar.classList.remove('open');
            cartSidebarOverlay.classList.remove('open');
        });
        continueShoppingButton.addEventListener('click', () => {
            cartSidebar.classList.remove('open');
            cartSidebarOverlay.classList.remove('open');
        });
        checkoutButton.addEventListener('click', () => {
            window.location.href = '<?= base_url("shipping") ?>';
        });

        cartSidebarOverlay.addEventListener('click', () => {
            cartSidebar.classList.remove('open');
            cartSidebarOverlay.classList.remove('open');
        });

        // Function to open sidebar (you can call this when adding items to cart)
        function openCartSidebar() {
            cartSidebar.classList.add('open');
            cartSidebarOverlay.classList.add('open');
        }

        function showLatestCartItem(item) {
            const baseUrl = "<?= base_url('uploads/product/') ?>";
            let itemHtml = `
                <li style="display: flex; align-items: center; gap: 8px;">
                    <img src="${baseUrl}${item.options.image}" alt="${item.name}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                    <div style="flex-grow: 1;">
                        <span style="font-weight: 500">${item.name}</span>
                        <div style="margin-top: 4px;">${item.variant}</div>
                        <div style="margin-top: 4px;">${item.qty} x IDR ${item.price.toLocaleString()}</div>
                    </div>
                </li>
            `;
            $('#cart-items-sidebar').html(itemHtml);
            loadSuggestedProducts(item.product_id);
        }

        function loadSuggestedProducts(productId) {
            $.ajax({
                url: `<?= base_url('cart/get_suggested_products/') ?>${productId}`,
                method: 'GET',
                success: function(response) {
                    if (response.status === 'success' && response.data.length > 0) {
                        const suggestedProductsContainer = $('#suggested-sidebar-products');
                        suggestedProductsContainer.empty();


                        response.data.forEach(product => {
                            const productCard = `
                                <div class="product-card">
                                    <a href="<?= base_url('product/') ?>${product.alias}" class="product-link">
                                        <div class="product-image-container">
                                            <img src="<?= base_url('uploads/product/') ?>${product.image}" alt="${product.title}" class="product-image first_image">
                                            <img src="<?= base_url('uploads/product/') ?>${product.image_secondary}" alt="${product.title}" class="product-image secondary-image">
                                        </div>
                                        <div class="product-info">
                                            <h3 class="product-title">${product.title}</h3>
                                        </div>
                                    </a>
                                </div>
                            `;
                            suggestedProductsContainer.append(productCard);
                        });
                    } else {
                        $('.cart-sidebar-suggestions').hide();
                    }
                },
                error: function() {
                    $('.cart-sidebar-suggestions').hide();
                }
            });
        }
    });
</script>
</body>

</html>