<style>
    .certification-carousel.owl-carousel {
        display: none;
    }

    @media (max-width: 768px) {
        .certification-section {
            margin: 0;
        }

        .certification-grid {
            display: none;
        }

        .certification-carousel.owl-carousel {
            display: block;
        }
    }

    /* Container styling */
    .product-variants {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .variant-label {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #333;
    }

    .no-variants {
        font-size: 14px;
        color: #999;
        font-style: italic;
        margin: 10px 0;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const bgClasses = [
            'bg-gradient-1',
            'bg-gradient-2',
            'bg-gradient-3',
            'bg-gradient-4',
            'bg-gradient-5',
            'bg-gradient-6',
            'bg-gradient-7',
            'bg-gradient-8'
        ];

        const testimonialCards = document.querySelectorAll('.testimonial-card');

        testimonialCards.forEach(card => {
            const randomBgClass = bgClasses[Math.floor(Math.random() * bgClasses.length)];

            card.classList.add(randomBgClass);
        });
    });


    function toggleWishlist(button) {
        const form = button.closest('.product-card').querySelector('.add-to-cart-form');
        const productId = form.querySelector('input[name="product_id"]').value;
        const productDetailId = form.querySelector('input[name="product_detail_id"]').value;
        const productVariant = form.querySelector('input[name="product_variant"]').value;

        console.log(productId);

        const outlineHeart = button.querySelector('.outline-heart');
        const filledHeart = button.querySelector('.filled-heart');

        $.ajax({
            url: '<?= base_url("wishlist/toggle") ?>',
            type: 'POST',
            dataType: 'json',
            data: {
                '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
                product_id: productId,
                product_detail_id: productDetailId,
                product_variant: productVariant
            },
            success: function(response) {
                if (response.status === 'error') {
                    if (response.redirect) {
                        window.location.href = response.redirect;
                    } else {
                        // Tampilkan pesan error
                        alert(response.message);
                    }
                } else {
                    if (response.in_wishlist) {
                        button.classList.add('active');
                        outlineHeart.style.opacity = '0';
                        filledHeart.style.opacity = '1';
                    } else {
                        button.classList.remove('active');
                        outlineHeart.style.opacity = '1';
                        filledHeart.style.opacity = '0';
                    }

                    alert(response.message);
                }
            },
            error: function() {
                alert('Terjadi kesalahan. Silakan coba lagi.');
            }
        });
    }

    function scrollToLeft() {
        const grid = document.querySelector('.testimonial-grid');
        grid.scrollBy({
            left: -300,
            behavior: 'smooth'
        }); // Scroll ke kiri
    }

    // Scroll right
    function scrollToRight() {
        const grid = document.querySelector('.testimonial-grid');
        grid.scrollBy({
            left: 300,
            behavior: 'smooth'
        });
    }

    // Brands Carousel
    $(document).ready(function() {
        $('.brands-carousel').owlCarousel({
            loop: true,
            margin: 0,
            stagePadding: 0,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: true,
            smartSpeed: 450,
            items: 8,
            responsive: {
                0: {
                    items: 2
                },
                576: {
                    items: 3
                },
                768: {
                    items: 3
                },
                992: {
                    items: 4
                },
                1200: {
                    items: 6
                }
            }
        });
    });

    $(document).ready(function() {
        $(".certification-carousel").owlCarousel({
            lazyLoad: true,
            loop: true,
            margin: 10,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 3
                },
                600: {
                    items: 4
                },
            },
        });
    });

    // Slider Banner
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            lazyLoad: true,
            items: 1,
            loop: true,
            margin: 0,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: true,
            nav: true,
            dots: true,
            navText: [
                '<i class="fa fa-chevron-left"></i>',
                '<i class="fa fa-chevron-right"></i>'
            ],
            smartSpeed: 450,
            responsive: {
                0: {
                    items: 1
                }
            }
        });


        const testimonialGrid = document.querySelector('.testimonial-grid');
        const scrollProgress = document.querySelector('.scroll-progress');

        testimonialGrid.addEventListener('scroll', () => {
            const scrollWidth = testimonialGrid.scrollWidth - testimonialGrid.clientWidth;
            const scrollLeft = testimonialGrid.scrollLeft;
            const progress = (scrollLeft / scrollWidth) * 100;
            scrollProgress.style.width = `${progress}%`;
        });


    });
</script>

<!-- Carousel -->
<div class="owl-carousel owl-theme">
    <?php if (!empty($carousels)): ?>
        <?php foreach ($carousels as $item): ?>
            <div class="item carousel-item-container">
                <div class="carousel-cta">
                    <h2><?= $item->cta_text; ?></h2>
                    <a href="<?= $item->cta_button_link; ?>" class="carousel-cta-button"><?= $item->cta_button_text; ?></a>
                </div>
                <img class="carousel-image" src="<?= $item->image_url; ?>">
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<!-- Category -->
<div class="category-section">
    <h2 class="category-header"><?= ucfirst(lang('header_category')); ?></h2>
    <div class="category-grid">
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_vibrator.webp');"></div>
            <div class="category-text">
                <h3>Vibrator</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_anal.webp');"></div>
            <div class="category-text">
                <h3>Anal</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_wellness.webp');"></div>
            <div class="category-text">
                <h3>Kesehatan</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_male_toys.webp');"></div>
            <div class="category-text">
                <h3>Mainan Laki</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_dildo.webp');"></div>
            <div class="category-text">
                <h3>Dildo</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_kegel.webp');"></div>
            <div class="category-text">
                <h3>Kegel</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_bondage.webp');"></div>
            <div class="category-text">
                <h3>Bondage</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_condom_n_essential.webp');"></div>
            <div class="category-text">
                <h3>Condom & Essential</h3>
            </div>
        </div>
        <div class="category-item">
            <div class="category-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_merch.webp');"></div>
            <div class="category-text">
                <h3>Merchandise</h3>
            </div>
        </div>
    </div>
</div>

<div class="bestseller-section">
    <h2 class="bestseller-header"><?= ucfirst(lang('header_bestseller')); ?></h2>
    <div class="product-grid">

        <?php
        $counter = 0;
        foreach ($top_seller_products as $product):
            if ($counter >= 7) break;
        ?>
            <div class="product-card">
                <div class="product-image-container">
                    <img src="<?= base_url('uploads/product/' . $product['image']) ?>" alt="<?= $product['title'] ?>" class="product-image">
                </div>
                <div class="product-info">
                    <h3 class="product-title"><?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                    <div class="product-price">
                        <span class="current-price">
                            IDR <?= number_format($product['current_price'], 0, ',', '.') ?>
                        </span>
                        <?php if (!empty($product['original_price'])): ?>
                            <span class="original-price">
                                IDR <?= number_format($product['original_price'], 0, ',', '.') ?>
                            </span>
                        <?php endif; ?>
                    </div>

                    <!-- <?php if (!empty($product['variants'])): ?>
                        <div class="product-variants">
                            <label for="variants-<?= $product['id'] ?>" class="variant-label"><?= $product['variants'][0] ?></label>
                        </div>
                    <?php else: ?>
                        <p class="no-variants">Tidak ada varian tersedia</p>
                    <?php endif; ?> -->

                    <div class="rating-section">
                        <i class="fas fa-star"></i>
                        <span class="review-text"><?= $product['average_rating'] ?? '0'; ?> | <?= $product['total_reviews'] ?? '0'; ?> Reviews</span>
                    </div>

                    <form class="wishlist-form" data-is-wishlisted="<?= $product['is_wishlisted'] ? 'true' : 'false' ?>">
                        <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>" />
                        <input type="hidden" name="product_id" value="<?= $product['id'] ?>">
                        <input type="hidden" name="product_detail_id" value="<?= $product['id_detail'] ?>">
                        <input type="hidden" name="variant" value="<?= $product['variants'][0] ?? 'No variants' ?>">
                        <button type="submit" class="wishlist-button">
                            <div class="heart-container">
                                <i class="<?= $product['is_wishlisted'] ? 'fas fa-heart filled-heart' : 'far fa-heart outline-heart' ?> active"></i>
                            </div>
                        </button>
                    </form>
                </div>
                <form class="add-to-cart-form">
                    <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>" />
                    <input type="hidden" name="product_id" value="<?= $product['id'] ?>">
                    <input type="hidden" name="product_detail_id" value="<?= $product['id_detail'] ?>">
                    <input type="hidden" name="product_variant" value="<?= $product['variants'][0] ?? 'No variants' ?>">
                    <input type="hidden" name="product_name" value="<?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?>">
                    <input type="hidden" name="product_image" value="<?= base_url('uploads/product/' . $product['image']) ?>">
                    <input type="hidden" name="qty" value="1">
                    <input type="hidden" name="price" value="<?= $product['current_price'] ?>">
                    <button type="submit" class="add-to-cart-button">
                        <i data-feather="shopping-cart" class="shopping-cart-icon"></i>
                        Add to Cart
                    </button>
                </form>
            </div>
        <?php
            $counter++;
        endforeach;
        ?>
        <div class="product-card see-all-button">
            <img src="https://storage.cloud.google.com/laciasmara-photos/laciasmara_test/image.png?authuser=2" alt="Lihat Semua" class="see-all-image">
        </div>
    </div>
</div>


<!-- Testimonial -->
<div class="testimonial-section">
    <h2 class="testimonial-header"><?= ucfirst(lang('header_testimonies')); ?></h2>
    <div class="chevron chevron-left" onclick="scrollToLeft()">
        <i class="fa fa-chevron-left"></i>
    </div>
    <div class="testimonial-grid">
        <?php foreach ($testimonials as $testimonial): ?>
            <div class="testimonial-card">
                <div class="customer-image">
                    <img src="<?= $testimonial['customer_image']; ?>" alt="Customer Image">
                </div>
                <div class="customer-name">
                    <div class="customer-name">
                        <?php
                        if (!empty($testimonial['customer_name'])) {
                            $fullName = $testimonial['customer_name'];
                            $nameParts = explode(" ", $fullName);

                            $firstName = isset($nameParts[0]) ? $nameParts[0] : '';
                            $lastName = isset($nameParts[1]) ? $nameParts[1] : '';

                            $censoredFirstName = $firstName[0] . '**';
                            $censoredLastName = strlen($lastName) > 0 ? $lastName[0] . '***' : '';

                            echo $censoredFirstName . ' ' . $censoredLastName;
                        } else {
                            echo '-';
                        }
                        ?>
                    </div>
                </div>
                <div class="product-name"><?= $testimonial['product_name']; ?></div>
                <div class="star-rating">
                    <?php for ($i = 0; $i < 5; $i++): ?>
                        <span class="star"><?= $i < $testimonial['star_rating'] ? '★' : '☆'; ?></span>
                    <?php endfor; ?>
                </div>

                <div class="testimonial-text">
                    "<?= $testimonial['testimonial_text']; ?>"
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    <div class="chevron chevron-right" onclick="scrollToRight()">
        <i class="fa fa-chevron-right"></i>
    </div>
    <div class="scroll-bar">
        <div class="scroll-progress"></div>
    </div>
</div>

<!-- Brands -->
<div class="brands-section">
    <h2 class="brands-header"><?= ucfirst(lang('header_brands')); ?></h2>
    <div class="brands-carousel owl-carousel">
        <?php foreach ($brands as $brand): ?>
            <div class="brand-item">
                <img src="<?php echo base_url('uploads/brand/' . $brand->logo); ?>" alt="<?php echo $brand->brand; ?>" class="brand-image">
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- Benefit -->
<div class="benefit-section">
    <div class="benefit-grid">
        <div class="benefit-item">
            <div class="benefit-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_benefit/quality.png" alt="Produk Original">
            </div>
            <h3 class="benefit-title"><?= ucfirst(lang('benefit_original')); ?></h3>
        </div>
        <div class="benefit-item">
            <div class="benefit-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_benefit/discreet.png" alt="Discreet">
            </div>
            <h3 class="benefit-title"><?= ucfirst(lang('benefit_discreet')); ?></h3>
        </div>
        <div class="benefit-item">
            <div class="benefit-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_benefit/fast-delivery%20(1).png" alt="Fast Delivery">
            </div>
            <h3 class="benefit-title"><?= ucfirst(lang('benefit_fast_delivery')); ?></h3>
        </div>
    </div>
</div>

<!-- Sertifikasi -->
<div class="certification-section">
    <h2 class="certification-header"><?= ucfirst(lang('header_certifications')); ?></h2>
    <div class="certification-grid">
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/CE%20logo.png" alt="CE Certification">
            </div>
            <h3 class="certification-title">CE</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/UKCA%20logo.png" alt="UKCA Certification">
            </div>
            <h3 class="certification-title">UKCA</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/iso-9001-logo-png_seeklogo-171579.png" alt="ISO 9001 Certification">
            </div>
            <h3 class="certification-title">ISO 3533</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/dl.beatsnoop.com-1CYuhvNfsB%20(edited).jpg" alt="RoHS Certification">
            </div>
            <h3 class="certification-title">RoHS</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/EAC.png" alt="EAC Certification">
            </div>
            <h3 class="certification-title">EAC</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/fda-certification.png" alt="FDA Certification">
            </div>
            <h3 class="certification-title">FDA 21</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/fcc-logo-black-2020-large.jpg" alt="FCC Certification">
            </div>
            <h3 class="certification-title">FCC</h3>
        </div>
    </div>

    <div class="certification-carousel owl-carousel">
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/CE%20logo.png" alt="CE Certification">
            </div>
            <h3 class="certification-title">CE</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/UKCA%20logo.png" alt="UKCA Certification">
            </div>
            <h3 class="certification-title">UKCA</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/iso-9001-logo-png_seeklogo-171579.png" alt="ISO 9001 Certification">
            </div>
            <h3 class="certification-title">ISO 3533</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/dl.beatsnoop.com-1CYuhvNfsB%20(edited).jpg" alt="RoHS Certification">
            </div>
            <h3 class="certification-title">RoHS</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/EAC.png" alt="EAC Certification">
            </div>
            <h3 class="certification-title">EAC</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/fda-certification.png" alt="FDA Certification">
            </div>
            <h3 class="certification-title">FDA 21</h3>
        </div>
        <div class="certification-item">
            <div class="certification-icon">
                <img src="https://storage.googleapis.com/laciasmara-photos/laciasmara_test/Laciasmara_certification/fcc-logo-black-2020-large.jpg" alt="FCC Certification">
            </div>
            <h3 class="certification-title">FCC</h3>
        </div>
    </div>
</div>

<!-- Company Text -->
<div class="company-section">
    <p class="company-text"><?= ucfirst(lang('company_text')); ?></p>
</div>

<!-- Subscription -->
<div class="subscription-section">
    <div class="subscription-header">
        <h1><?= ucfirst(lang('subscription_header')); ?></h1>
        <p><?= ucfirst(lang('subscription_paragraph')); ?></p>
    </div>
    <div class="subscription-form">
        <input type="email" class="subscription-email-input" placeholder="<?= lang('subscription_placeholder'); ?>">
        <button class="subscription-button">Subscribe</button>
    </div>
</div>

<script>
    // 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);
            }
        );

        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() ?>" 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}" 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');
                            removeCartItem(rowId);
                        });
                    } else {
                        $('#cart-items').html('<li>Gagal memuat keranjang.</li>');
                    }
                },
                error: function() {
                    $('#cart-items').html('<li>Gagal memuat keranjang.</li>');
                }
            });
        }

        function removeCartItem(rowId) {
            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,
                    [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.');
                }
            });
        }


        $('.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 csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
            const csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

            // Tambahkan CSRF token ke data
            const formData = {
                product_id: productId,
                product_detail_id: productDetailId,
                product_variant: productVariant,
                product_name: productName,
                product_image: productImage,
                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();

                        notyf.success('Produk berhasil ditambahkan ke keranjang');
                    } else {
                        notyf.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    notyf.error(error.message);
                    notyf.error('Terjadi kesalahan saat menambahkan produk, hubungi contact support jika kamu menemukan notifikasi ini.');
                }
            });
        });
    });
</script>