<style>
    .search-result-container {
        width: 100%;
        margin-top: 24px;
        margin-bottom: 120px;
        margin-left: 0;
        margin-right: 0;
        padding: 0 120px;
        display: flex;
        align-items: flex-start;
        gap: 48px;
        color: #333;
        box-sizing: border-box;
    }

    aside {
        background-color: #ffffff;
        padding: 16px 0;
        color: #333;
        flex: 1;
        border-radius: 8px;
        width: 240px;
        flex: 0 0 240px;
        max-width: 240px;
    }

    input[type="checkbox"] {
        appearance: none;
        background-color: #fff;
        border: 2px solid #ddd;
        border-radius: 4px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        transition: border 0.3s ease, background-color 0.3s ease;
        vertical-align: middle;
    }

    input[type="checkbox"]:checked {
        background-color: #7A4397;
        border-color: #7A4397;
    }

    input[type="checkbox"]:checked::after {
        content: '\2713';
        display: block;
        color: #fff;
        text-align: center;
    }

    .product-result {
        flex: 1;
        width: 100%;
        margin-top: 24px;
        box-sizing: border-box;
    }

    .product-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 48px;
        color: #333;
    }

    .product-heading h4 {
        font-size: 1rem;
        font-weight: 500;
        color: #444;
        margin: 0;
    }

    .sort-dropdown {
        padding: 12px 14px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 0.9rem;
        color: #333;
        cursor: pointer;
        background: #fff;
        transition: border-color 0.3s;
    }

    .sort-dropdown:hover {
        border-color: #7A4397;
    }

    .sort-dropdown:focus {
        outline: none;
        border-color: #7A4397;
    }

    .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;
    }

    .product-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .product-link:hover .product-title {
        text-decoration: none;
    }

    .filter-section {
        margin-bottom: 16px;
    }

    .filter-heading {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 24px;
        color: #333;
    }

    .filter-section-heading {
        font-size: 1rem;
        font-weight: 500;
        color: #444;
        margin-bottom: 8px;
    }

    .filter-section-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #333;
        margin-top: 8px;
    }

    .filter-section-label:hover {
        color: #7A4397;
    }

    @media (max-width: 768px) {
        .search-result-container {
            flex-direction: column;
            padding: 0 20px;
        }

        .product-heading {
            flex-direction: column;
            gap: 16px;
        }

        .product-heading h4 {
            text-align: center;
            font-size: 1rem;
        }

        .sort-dropdown {
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }

        .product-display {
            width: 100%;
        }

        .product-result {
            margin-top: 16px;
        }

    }

    .soldout-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Warna abu-abu dengan transparansi */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
    }

    .soldout-image {
        max-width: 50%;
        z-index: 3;
        opacity: 1;
    }
</style>
<div class="search-result-container">
    <!-- Filter -->
    <!-- <aside>
        <h2 class="filter-heading">Filter</h2>
        <form id="filter-form">
            <div class="filter-section">
                <h3 class="filter-section-heading"><?= ucfirst(lang('filter_product_type')); ?></h3>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_for_him')); ?>"> <?= ucfirst(lang('filter_for_him')); ?>
                </label>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_for_her')); ?>"><?= ucfirst(lang('filter_for_her')); ?>
                </label>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_couple')); ?>"><?= ucfirst(lang('filter_couple')); ?>
                </label>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_exercise')); ?>"> <?= ucfirst(lang('filter_exercise')); ?>
                </label>
            </div>
            <div class="filter-section">
                <h3 class="filter-section-heading"><?= ucfirst(lang('filter_delivery')); ?></h3>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_regular')); ?>"><?= ucfirst(lang('filter_regular')); ?>
                </label>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_same_day')); ?>"><?= ucfirst(lang('filter_same_day')); ?>
                </label>
                <label class="filter-section-label">
                    <input type="checkbox" name="delivery" value="<?= ucfirst(lang('filter_two_hour')); ?>"> <?= ucfirst(lang('filter_two_hour')); ?>
                </label>
            </div>

            <div class="filter-section">
                <h3 class="filter-section-heading"><?= ucfirst(lang('filter_price')); ?></h3>
                <label class="filter-section-label">
                    <input type="checkbox" name="rating" value="4"> 4+ Keatas
                </label>
            </div>
        </form>
    </aside> -->

    <!-- Product Display -->
    <section class="product-result">
        <div class="product-heading">
            <h4>
                <?= ucfirst(lang('showing')); ?>
                <span id="totalProducts"><?= $total_products ?></span>
                <?= ucfirst(lang('product_for')); ?> "<span id="queryText"><?= htmlspecialchars($query) ?></span>"
                <span id="sortInfo"></span>
            </h4>
            <select class="sort-dropdown" name="sort" id="sort">
                <option value="paling_sesuai"><?= lang('sort_option_relevance'); ?></option>
                <option value="low_high"><?= lang('sort_option_low_to_high'); ?></option>
                <option value="high_low"><?= lang('sort_option_high_to_low'); ?></option>
            </select>
        </div>
        <div class="product-display">
            <?php if ($total_products > 0): ?>
                <div class="product-grid">
                    <?php foreach ($products as $product): ?>
                        <div class="product-card">
                            <a href="<?= base_url('product/' . $product['alias']) ?>" class="product-link">
                                <div class="product-image-container">
                                    <div class="image-wrapper">
                                        <?php if ($product['is_completely_sold_out']): ?>
                                            <div class="soldout-wrapper">
                                                <img class="soldout-image" src="<?= base_url() . 'assets/frontend/img/soldout-new.png'; ?>" alt="Sold Out">
                                            </div>
                                        <?php elseif ($product['has_badges'] && !empty($product['badges'])): ?>
                                            <div class="product-badges-container">
                                                <?php foreach ($product['badges'] as $badge): ?>
                                                    <div class="product-badge priority-<?= $badge['priority'] ?> <?= $badge['css_class'] ?>"
                                                        style="<?= $badge['style'] ?>">

                                                        <?php if ($badge['has_icon'] && !empty($badge['icon'])): ?>
                                                            <span class="badge-icon emoji"><?= $badge['icon'] ?></span>
                                                        <?php endif; ?>

                                                        <span class="badge-text"><?= htmlspecialchars($badge['name']) ?></span>
                                                    </div>
                                                <?php endforeach; ?>
                                            </div>
                                        <?php endif; ?>

                                        <img src="<?= base_url('uploads/product/' . $product['image']) ?>" alt="<?= $product['title'] ?>" class="product-image first_image" loading="lazy">
                                        <img src="<?= base_url('uploads/product/' . $product['image_secondary']) ?>" alt="<?= $product['title'] ?>" class="product-image secondary-image" loading="lazy">
                                    </div>
                                </div>
                                <div class="product-info">
                                    <h3 class="product-title"><?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                                    <div class="product-price">
                                        <div class="price-row">
                                            <span class="current-price <?= $product['is_discounted'] ? 'discounted price-highlight' : '' ?>">
                                                IDR <?= number_format($product['current_price'], 0, ',', '.') ?>
                                            </span>

                                            <?php if (!empty($product['msrp_price'])): ?>
                                                <span class="msrp-price">
                                                    MSRP: IDR <?= number_format($product['msrp_price'], 0, ',', '.') ?>
                                                </span>
                                            <?php elseif ($product['original_price']): ?>
                                                <span class="original-price">
                                                    IDR <?= number_format($product['original_price'], 0, ',', '.') ?>
                                                </span>
                                            <?php endif; ?>
                                        </div>

                                        <?php if ($product['original_price']): ?>
                                            <div class="savings-amount">
                                                <?= ucfirst(lang('save_up_to')) ?><?= number_format($product['savings_amount'], 0, ',', '.') ?> (<?= $product['discount_percentage'] ?>%)
                                            </div>
                                        <?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>
                            </a>
                            <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 endforeach; ?>
        </div>
    <?php else: ?>
        <div class="no-product-container" style="text-align: center; margin-top: 50px;">
            <img src="https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_404/undraw_empty_re_opql.svg"
                alt="No Results Found" style="max-width: 300px; margin-bottom: 20px;">
            <!-- Engnya jangan lupa -->
            <h3 style="color: #333; font-size: 1.5rem; margin-bottom: 10px;">Yah, item yang kamu cari tidak ada!</h3>
            <p style="color: #555; font-size: 1rem;">Coba periksa kata kunci atau gunakan filter lainnya.</p>
        </div>
    <?php endif; ?>
</div>
</section>

</div>

<script>
    const productGrid = document.querySelector('.product-grid');
    const initialProducts = Array.from(productGrid.children);
    const sortDropdown = document.getElementById('sort');
    const sortInfo = document.getElementById('sortInfo');

    sortInfo.textContent = '';

    sortDropdown.addEventListener('change', function() {
        const sortValue = this.value;
        const products = Array.from(productGrid.children);

        if (sortValue === 'paling_sesuai') {
            productGrid.innerHTML = '';
            initialProducts.forEach(product => productGrid.appendChild(product));

            sortInfo.textContent = ' (Diurutkan berdasarkan relevansi)';
        } else {
            products.sort((a, b) => {
                const priceA = parseFloat(a.querySelector('.current-price').textContent.replace(/[^\d]/g, ''));
                const priceB = parseFloat(b.querySelector('.current-price').textContent.replace(/[^\d]/g, ''));

                return sortValue === 'low_high' ? priceA - priceB : priceB - priceA;
            });

            productGrid.innerHTML = '';
            products.forEach(product => productGrid.appendChild(product));

            sortInfo.textContent =
                sortValue === 'low_high' ?
                ' (Diurutkan dari harga terendah ke tertinggi)' :
                ' (Diurutkan dari harga tertinggi ke terendah)';
        }
    });
</script>