@extends('frontend.master')

@section('content')
<section class="cat_product_page" id="cat_product_page">
    <div class="cat_product_container">
        <div class="cat_product_top">
            <h1 class="cat_product_page_title" id="cat_product_page_title">Sundarban Honey</h1>

            <div class="cat_product_breadcrumb">
                <a href="/">Home</a>
                <span>›</span>
                <span id="cat_product_breadcrumb_name">Sundarban Honey</span>
            </div>
        </div>

        <div class="cat_product_layout">
            <aside class="cat_product_sidebar" id="cat_product_sidebar">
                <div class="cat_product_sidebar_inner">
                    <div class="cat_product_filter_box">
                        <div class="cat_product_filter_head">
                            <h3>PRICE RANGE</h3>
                            <button type="button" class="cat_product_filter_toggle">−</button>
                        </div>

                        <div class="cat_product_price_values">
                            <span>৳ <span id="cat_product_min_text">0</span></span>
                            <span>৳ <span id="cat_product_max_text">2,500</span></span>
                        </div>

                        <div class="cat_product_range_wrap">
                            <div class="cat_product_range_track"></div>
                            <div class="cat_product_range_active" id="cat_product_range_active"></div>

                            <input
                                type="range"
                                min="0"
                                max="2500"
                                value="0"
                                step="50"
                                id="cat_product_min_range"
                                class="cat_product_range_input"
                            />

                            <input
                                type="range"
                                min="0"
                                max="2500"
                                value="2500"
                                step="50"
                                id="cat_product_max_range"
                                class="cat_product_range_input"
                            />
                        </div>
                    </div>

                    <div class="cat_product_filter_box">
                        <div class="cat_product_filter_head">
                            <h3>CATEGORY</h3>
                            <button type="button" class="cat_product_filter_toggle">−</button>
                        </div>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="category" value="Honey" />
                            <span>Honey</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="category" value="Mango" />
                            <span>Mango</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="category" value="Oil" />
                            <span>Oil</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="category" value="Nuts" />
                            <span>Nuts</span>
                        </label>
                    </div>

                    <div class="cat_product_filter_box">
                        <div class="cat_product_filter_head">
                            <h3>SUBCATEGORY</h3>
                            <button type="button" class="cat_product_filter_toggle">−</button>
                        </div>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="subcategory" value="Natural Honey" />
                            <span>Natural Honey</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="subcategory" value="Organic Honey" />
                            <span>Organic Honey</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="subcategory" value="Mango Box" />
                            <span>Mango Box</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="subcategory" value="Seeds & Nuts" />
                            <span>Seeds & Nuts</span>
                        </label>
                    </div>

                    <div class="cat_product_filter_box">
                        <div class="cat_product_filter_head">
                            <h3>BRANDS</h3>
                            <button type="button" class="cat_product_filter_toggle">−</button>
                        </div>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="brand" value="Honeyraj" />
                            <span>Honeyraj</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="brand" value="A-Shop" />
                            <span>A-Shop</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="brand" value="Khejur" />
                            <span>Khejur</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="brand" value="Fresh Farm" />
                            <span>Fresh Farm</span>
                        </label>
                    </div>

                    <div class="cat_product_filter_box">
                        <div class="cat_product_filter_head">
                            <h3>PRODUCT FLAG</h3>
                            <button type="button" class="cat_product_filter_toggle">−</button>
                        </div>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="flag" value="New Arrival" />
                            <span>New Arrival</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="flag" value="Best Selling" />
                            <span>Best Selling</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="flag" value="Pre Order" />
                            <span>Pre Order</span>
                        </label>

                        <label class="cat_product_check_row">
                            <input type="checkbox" class="cat_product_filter_check" data-filter="flag" value="Top Sale" />
                            <span>Top Sale</span>
                        </label>
                    </div>

                    <button type="button" class="cat_product_clear_filter" id="cat_product_clear_filter">
                        Clear Filter
                    </button>
                </div>
            </aside>

            <main class="cat_product_main">
                <div class="cat_product_toolbar">
                    <button type="button" class="cat_product_mobile_filter_btn" id="cat_product_mobile_filter_btn">
                        <i class="bi bi-list-ul"></i>
                        FILTERS
                    </button>

                    <div class="cat_product_sort_box">
                        <span>Sort By :</span>

                        <select id="cat_product_sort_select" class="cat_product_select">
                            <option value="default">Default Sorting</option>
                            <option value="latest">Sort by Latest</option>
                            <option value="oldest">Sort by Oldest</option>
                            <option value="price_low">Price Low to High</option>
                            <option value="price_high">Price High to Low</option>
                        </select>
                    </div>

                    <select id="cat_product_show_select" class="cat_product_select cat_product_show_select">
                        <option value="default">Default</option>
                        <option value="16">Show 16</option>
                        <option value="20">Show 20</option>
                        <option value="24">Show 24</option>
                        <option value="36">Show 36</option>
                    </select>
                </div>

                <div class="cat_product_result_count" id="cat_product_result_count"></div>

                <div class="cat_product_grid" id="cat_product_grid"></div>

                <div class="cat_product_empty" id="cat_product_empty">
                    <i class="bi bi-search"></i>
                    <h3>No product found</h3>
                    <p>Try changing your filter option.</p>
                </div>
            </main>
        </div>
    </div>

    <div class="cat_product_filter_overlay" id="cat_product_filter_overlay"></div>
</section>

<style>
    .cat_product_page {
        width: 100%;
        min-height: 100vh;
        background: #eef0f5;
        padding: 10px 0 40px;
        color: #071226;
    }

    .cat_product_container {
        width: 100%;
        max-width: 1488px;
        margin: 0 auto;
        padding: 0 14px;
    }

    .cat_product_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 12px;
    }

    .cat_product_page_title {
        margin: 0;
        font-size: 25px;
        line-height: 1.2;
        font-weight: 700;
        color: #071226;
    }

    .cat_product_breadcrumb {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        line-height: 1;
        color: #4b5563;
        white-space: nowrap;
    }

    .cat_product_breadcrumb a {
        color: #4b5563;
        text-decoration: none;
    }

    .cat_product_breadcrumb a:hover {
        color: #ff6a00;
    }

    .cat_product_layout {
        display: grid;
        grid-template-columns: 290px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .cat_product_sidebar {
        width: 100%;
    }

    .cat_product_sidebar_inner {
        width: 100%;
    }

    .cat_product_filter_box {
        background: #ffffff;
        border-radius: 4px;
        padding: 20px 12px 22px;
        margin-bottom: 7px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .cat_product_filter_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 12px;
        position: relative;
    }

    .cat_product_filter_head::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1.5px;
        width: 95px;
        height: 2px;
        background: #ff6a00;
        border-radius: 999px;
    }

    .cat_product_filter_head h3 {
        margin: 0;
        padding: 0 0 13px;
        color: #071226;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .cat_product_filter_toggle {
        border: none;
        background: transparent;
        color: #343a40;
        font-size: 22px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
    }

    .cat_product_price_values {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #071226;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        margin-bottom: 12px;
    }

    .cat_product_range_wrap {
        position: relative;
        width: 100%;
        height: 28px;
    }

    .cat_product_range_track {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 12px;
        height: 5px;
        background: #d7d9de;
        border-radius: 999px;
    }

    .cat_product_range_active {
        position: absolute;
        top: 12px;
        height: 5px;
        background: #f58220;
        border-radius: 999px;
        left: 10px;
        right: 10px;
    }

    .cat_product_range_input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 28px;
        pointer-events: none;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        outline: none;
    }

    .cat_product_range_input::-webkit-slider-thumb {
        pointer-events: auto;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #f58220;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .cat_product_range_input::-moz-range-thumb {
        pointer-events: auto;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #f58220;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
        cursor: pointer;
    }

    .cat_product_check_row {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 12px 0 0;
        color: #111827;
        font-size: 14px;
        line-height: 1.2;
        cursor: pointer;
        user-select: none;
    }

    .cat_product_check_row input {
        width: 16px;
        height: 16px;
        border: 1px solid #bfc5ce;
        border-radius: 3px;
        accent-color: #ff6a00;
        cursor: pointer;
    }

    .cat_product_clear_filter {
        width: 100%;
        height: 42px;
        border: 1px solid #ff6a00;
        background: #ffffff;
        color: #ff6a00;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.25s ease;
    }

    .cat_product_clear_filter:hover {
        background: #ff6a00;
        color: #ffffff;
    }

    .cat_product_toolbar {
        min-height: 62px;
        background: #ffffff;
        border-radius: 4px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 24px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .cat_product_mobile_filter_btn {
        display: none;
        height: 43px;
        min-width: 96px;
        border: 2px solid #ff6a00;
        background: #ffffff;
        color: #ff6a00;
        border-radius: 3px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        line-height: 1;
        font-weight: 500;
        cursor: pointer;
    }

    .cat_product_mobile_filter_btn i {
        font-size: 16px;
        line-height: 1;
    }

    .cat_product_sort_box {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #071226;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
    }

    .cat_product_select {
        height: 38px;
        min-width: 138px;
        border: 1px solid #d9dde5;
        background: #ffffff;
        color: #071226;
        border-radius: 3px;
        padding: 0 35px 0 12px;
        font-size: 12px;
        line-height: 1;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image:
            linear-gradient(45deg, transparent 50%, #ff6a00 50%),
            linear-gradient(135deg, #ff6a00 50%, transparent 50%);
        background-position:
            calc(100% - 17px) 16px,
            calc(100% - 12px) 16px;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
    }

    .cat_product_show_select {
        min-width: 94px;
        color: #ff6a00;
    }

    .cat_product_result_count {
        display: none;
        margin: -12px 0 12px;
        color: #6b7280;
        font-size: 13px;
    }

    .cat_product_grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .cat_product_card {
        position: relative;
        min-width: 0;
        background: #ffffff;
        border: 1px solid #c9c9c9;
        border-radius: 4px;
        padding: 14px 8px 8px;
        overflow: hidden;
        animation: cat_product_fade_up 0.35s ease both;
        transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.25s ease;
    }

    .cat_product_card:hover {
        border-color: #ff6a00;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
        transform: translateY(-4px);
    }

    .cat_product_badge {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 4;
        min-height: 20px;
        padding: 5px 7px;
        border-radius: 4px;
        background: #ff7a1a;
        color: #ffffff;
        font-size: 10px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .cat_product_badge_save {
        left: auto;
        right: 14px;
        background: #22b978;
    }

    .cat_product_image_link {
        width: 100%;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #ffffff;
        text-decoration: none;
        margin-bottom: 12px;
    }

    .cat_product_image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        transition: transform 0.35s ease;
    }

    .cat_product_card:hover .cat_product_image {
        transform: scale(1.06);
    }

    .cat_product_info {
        position: relative;
        z-index: 2;
        background: #ffffff;
    }

    .cat_product_name {
        display: block;
        min-height: 43px;
        margin: 0 0 6px;
        color: #071226;
        font-size: 17px;
        line-height: 21px;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .cat_product_name:hover {
        color: #ff6a00;
    }

    .cat_product_price_row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 24px;
        margin-bottom: 13px;
    }

    .cat_product_price {
        color: #ff6a00;
        font-size: 16px;
        line-height: 1;
        font-weight: 800;
    }

    .cat_product_old_price {
        color: #9ca3af;
        font-size: 15px;
        line-height: 1;
        font-weight: 400;
    }

    .cat_product_cart_btn {
        width: 100%;
        height: 40px;
        border: 1px solid #ff6a00;
        border-radius: 4px;
        background: #ffffff;
        color: #ff6a00;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition:
            background 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .cat_product_cart_btn:hover {
        background: #ff6a00;
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(255, 106, 0, 0.24);
        transform: translateY(-1px);
    }

    .cat_product_empty {
        display: none;
        background: #ffffff;
        border-radius: 4px;
        padding: 50px 15px;
        text-align: center;
        color: #6b7280;
    }

    .cat_product_empty i {
        font-size: 42px;
        color: #ff6a00;
        display: block;
        margin-bottom: 12px;
    }

    .cat_product_empty h3 {
        margin: 0 0 8px;
        color: #071226;
        font-size: 20px;
        font-weight: 800;
    }

    .cat_product_empty p {
        margin: 0;
        font-size: 14px;
    }

    .cat_product_filter_overlay {
        display: none;
    }

    @keyframes cat_product_fade_up {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 1199px) {
        .cat_product_layout {
            grid-template-columns: 270px minmax(0, 1fr);
            gap: 16px;
        }

        .cat_product_grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .cat_product_image_link {
            height: 225px;
        }
    }

    @media (max-width: 991px) {
        .cat_product_page {
            padding: 8px 0 30px;
        }

        .cat_product_container {
            padding: 0 22px;
        }

        .cat_product_top {
            margin-bottom: 12px;
        }

        .cat_product_page_title {
            font-size: 18px;
        }

        .cat_product_breadcrumb {
            font-size: 12px;
        }

        .cat_product_layout {
            display: block;
        }

        .cat_product_sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 310px;
            max-width: 78vw;
            height: 100vh;
            background: #eef0f5;
            z-index: 9999;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
            padding: 22px 20px;
            box-shadow: 12px 0 30px rgba(15, 23, 42, 0.22);
        }

        .cat_product_sidebar.cat_product_sidebar_show {
            transform: translateX(0);
        }

        .cat_product_filter_overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.52);
            z-index: 9998;
            display: block;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
        }

        .cat_product_filter_overlay.cat_product_overlay_show {
            opacity: 1;
            visibility: visible;
        }

        body.cat_product_filter_open {
            overflow: hidden;
        }

        .cat_product_toolbar {
            min-height: 62px;
            padding: 10px 12px;
            gap: 14px;
            margin-bottom: 24px;
        }

        .cat_product_mobile_filter_btn {
            display: inline-flex;
        }

        .cat_product_sort_box span {
            display: none;
        }

        .cat_product_select {
            min-width: 136px;
            height: 38px;
        }

        .cat_product_show_select {
            min-width: 94px;
        }

        .cat_product_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .cat_product_image_link {
            height: 205px;
        }

        .cat_product_name {
            font-size: 15px;
            line-height: 19px;
        }
    }

    @media (max-width: 575px) {
        .cat_product_container {
            padding: 0 22px;
        }

        .cat_product_top {
            align-items: flex-start;
            gap: 8px;
        }

        .cat_product_page_title {
            font-size: 18px;
        }

        .cat_product_breadcrumb {
            gap: 5px;
            font-size: 12px;
        }

        .cat_product_toolbar {
            min-height: 62px;
            padding: 10px 10px;
            gap: 10px;
            margin-bottom: 24px;
        }

        .cat_product_mobile_filter_btn {
            height: 38px;
            min-width: 94px;
            font-size: 12px;
            gap: 6px;
        }

        .cat_product_select {
            min-width: 136px;
            max-width: 136px;
            height: 38px;
            font-size: 12px;
            padding-left: 10px;
        }

        .cat_product_show_select {
            min-width: 94px;
            max-width: 94px;
        }

        .cat_product_grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .cat_product_card {
            padding: 10px 7px 7px;
        }

        .cat_product_image_link {
            height: 178px;
            margin-bottom: 8px;
        }

        .cat_product_name {
            min-height: 38px;
            font-size: 16px;
            line-height: 19px;
        }

        .cat_product_price_row {
            gap: 8px;
            margin-bottom: 10px;
        }

        .cat_product_price {
            font-size: 16px;
        }

        .cat_product_old_price {
            font-size: 13px;
        }

        .cat_product_cart_btn {
            height: 34px;
            font-size: 12px;
        }

        .cat_product_badge {
            top: 14px;
            left: 14px;
            font-size: 9px;
            padding: 4px 6px;
        }

        .cat_product_badge_save {
            left: auto;
            right: 14px;
        }
    }

    @media (max-width: 430px) {
        .cat_product_container {
            padding: 0 18px;
        }

        .cat_product_toolbar {
            gap: 8px;
        }

        .cat_product_mobile_filter_btn {
            min-width: 94px;
        }

        .cat_product_select {
            min-width: 136px;
            max-width: 136px;
        }

        .cat_product_show_select {
            min-width: 94px;
            max-width: 94px;
        }

        .cat_product_grid {
            gap: 16px;
        }

        .cat_product_image_link {
            height: 170px;
        }
    }

    @media (max-width: 390px) {
        .cat_product_container {
            padding: 0 14px;
        }

        .cat_product_toolbar {
            padding: 10px 8px;
            gap: 7px;
        }

        .cat_product_mobile_filter_btn {
            min-width: 88px;
            font-size: 11px;
        }

        .cat_product_select {
            min-width: 126px;
            max-width: 126px;
            font-size: 11px;
        }

        .cat_product_show_select {
            min-width: 88px;
            max-width: 88px;
        }

        .cat_product_grid {
            gap: 12px;
        }

        .cat_product_image_link {
            height: 145px;
        }

        .cat_product_name {
            font-size: 13px;
            line-height: 17px;
        }

        .cat_product_price {
            font-size: 14px;
        }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const cat_product_data = [
            {
                id: 1,
                name: "Sundarban Honey 15g X 24 pcs (BOX)",
                price: 768,
                oldPrice: null,
                category: "Honey",
                subcategory: "Natural Honey",
                brand: "Honeyraj",
                flag: "New Arrival",
                save: null,
                topSale: true,
                date: "2026-06-12",
                image: "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 2,
                name: "Sundarban Honey 8g X 24 pcs (BOX)",
                price: 432,
                oldPrice: null,
                category: "Honey",
                subcategory: "Natural Honey",
                brand: "Honeyraj",
                flag: "New Arrival",
                save: null,
                topSale: true,
                date: "2026-06-10",
                image: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 3,
                name: "Sundarban Honey 1kg",
                price: 2300,
                oldPrice: 2500,
                category: "Honey",
                subcategory: "Natural Honey",
                brand: "Honeyraj",
                flag: "Best Selling",
                save: "Save 8%",
                topSale: true,
                date: "2026-06-08",
                image: "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 4,
                name: "Sundarban Honey 500 gm",
                price: 1150,
                oldPrice: 1250,
                category: "Honey",
                subcategory: "Natural Honey",
                brand: "Honeyraj",
                flag: "Best Selling",
                save: "Save 8%",
                topSale: true,
                date: "2026-06-05",
                image: "https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 5,
                name: "Sundarban Honey 250 gm",
                price: 620,
                oldPrice: 700,
                category: "Honey",
                subcategory: "Natural Honey",
                brand: "Honeyraj",
                flag: "Top Sale",
                save: "Save 11%",
                topSale: true,
                date: "2026-06-01",
                image: "https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 6,
                name: "African Organic Wild Honey 500g",
                price: 1100,
                oldPrice: 1250,
                category: "Honey",
                subcategory: "Organic Honey",
                brand: "A-Shop",
                flag: "Top Sale",
                save: "Save 12%",
                topSale: true,
                date: "2026-05-22",
                image: "https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 7,
                name: "Amrapali Mango 20 kg",
                price: 3000,
                oldPrice: 3200,
                category: "Mango",
                subcategory: "Mango Box",
                brand: "Fresh Farm",
                flag: "Pre Order",
                save: "Save 6%",
                topSale: false,
                date: "2026-05-18",
                image: "https://images.unsplash.com/photo-1553279768-865429fa0078?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 8,
                name: "Deshi Mustard Oil 5 liter",
                price: 1550,
                oldPrice: null,
                category: "Oil",
                subcategory: "Natural Oil",
                brand: "A-Shop",
                flag: "Best Selling",
                save: null,
                topSale: true,
                date: "2026-05-10",
                image: "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 9,
                name: "Honey Nuts 800gm",
                price: 1500,
                oldPrice: null,
                category: "Nuts",
                subcategory: "Seeds & Nuts",
                brand: "Khejur",
                flag: "Best Selling",
                save: null,
                topSale: true,
                date: "2026-05-02",
                image: "https://images.unsplash.com/photo-1589367920969-ab8e050bbb04?auto=format&fit=crop&w=650&q=85",
            },
            {
                id: 10,
                name: "Cashew Nuts Medium Size 1kg",
                price: 2000,
                oldPrice: null,
                category: "Nuts",
                subcategory: "Seeds & Nuts",
                brand: "Khejur",
                flag: "Top Sale",
                save: null,
                topSale: true,
                date: "2026-04-20",
                image: "https://images.unsplash.com/photo-1508061253366-f7da158b6d46?auto=format&fit=crop&w=650&q=85",
            },
        ];

        const cat_product_grid = document.getElementById("cat_product_grid");
        const cat_product_empty = document.getElementById("cat_product_empty");
        const cat_product_result_count = document.getElementById("cat_product_result_count");
        const cat_product_sort_select = document.getElementById("cat_product_sort_select");
        const cat_product_show_select = document.getElementById("cat_product_show_select");
        const cat_product_filter_checks = document.querySelectorAll(".cat_product_filter_check");
        const cat_product_min_range = document.getElementById("cat_product_min_range");
        const cat_product_max_range = document.getElementById("cat_product_max_range");
        const cat_product_min_text = document.getElementById("cat_product_min_text");
        const cat_product_max_text = document.getElementById("cat_product_max_text");
        const cat_product_range_active = document.getElementById("cat_product_range_active");
        const cat_product_clear_filter = document.getElementById("cat_product_clear_filter");
        const cat_product_sidebar = document.getElementById("cat_product_sidebar");
        const cat_product_mobile_filter_btn = document.getElementById("cat_product_mobile_filter_btn");
        const cat_product_filter_overlay = document.getElementById("cat_product_filter_overlay");

        function cat_product_money(value) {
            return Number(value).toLocaleString("en-US");
        }

        function cat_product_get_checked(filter_name) {
            return Array.from(cat_product_filter_checks)
                .filter(function (input) {
                    return input.dataset.filter === filter_name && input.checked;
                })
                .map(function (input) {
                    return input.value;
                });
        }

        function cat_product_update_price_ui() {
            let min_value = parseInt(cat_product_min_range.value, 10);
            let max_value = parseInt(cat_product_max_range.value, 10);

            if (min_value > max_value - 50) {
                min_value = max_value - 50;
                cat_product_min_range.value = min_value;
            }

            if (max_value < min_value + 50) {
                max_value = min_value + 50;
                cat_product_max_range.value = max_value;
            }

            cat_product_min_text.textContent = cat_product_money(min_value);
            cat_product_max_text.textContent = cat_product_money(max_value);

            const min_percent = (min_value / parseInt(cat_product_min_range.max, 10)) * 100;
            const max_percent = (max_value / parseInt(cat_product_max_range.max, 10)) * 100;

            cat_product_range_active.style.left = "calc(" + min_percent + "% + 10px)";
            cat_product_range_active.style.right = "calc(" + (100 - max_percent) + "% + 10px)";
        }

        function cat_product_create_card(product) {
            const card = document.createElement("div");
            card.className = "cat_product_card";

            let badge_html = "";

            if (product.flag === "New Arrival" || product.flag === "Best Selling" || product.flag === "Pre Order") {
                badge_html += `<span class="cat_product_badge">${product.flag}</span>`;
            }

            if (product.save) {
                badge_html += `<span class="cat_product_badge cat_product_badge_save">${product.save}</span>`;
            }

            card.innerHTML = `
                ${badge_html}

                <a href="#" class="cat_product_image_link">
                    <img class="cat_product_image" src="${product.image}" alt="${product.name}" />
                </a>

                <div class="cat_product_info">
                    <a href="#" class="cat_product_name">${product.name}</a>

                    <div class="cat_product_price_row">
                        <span class="cat_product_price">৳${cat_product_money(product.price)}</span>
                        ${product.oldPrice ? `<del class="cat_product_old_price">৳${cat_product_money(product.oldPrice)}</del>` : ""}
                    </div>

                    <button class="cat_product_cart_btn" type="button">
                        <i class="bi bi-cart3"></i>
                        Add To Cart
                    </button>
                </div>
            `;

            return card;
        }

        function cat_product_filter_products() {
            const selected_categories = cat_product_get_checked("category");
            const selected_subcategories = cat_product_get_checked("subcategory");
            const selected_brands = cat_product_get_checked("brand");
            const selected_flags = cat_product_get_checked("flag");
            const min_price = parseInt(cat_product_min_range.value, 10);
            const max_price = parseInt(cat_product_max_range.value, 10);
            const sort_value = cat_product_sort_select.value;
            const show_value = cat_product_show_select.value;

            let filtered_products = cat_product_data.filter(function (product) {
                const match_category =
                    selected_categories.length === 0 || selected_categories.includes(product.category);

                const match_subcategory =
                    selected_subcategories.length === 0 || selected_subcategories.includes(product.subcategory);

                const match_brand =
                    selected_brands.length === 0 || selected_brands.includes(product.brand);

                const match_flag =
                    selected_flags.length === 0 ||
                    selected_flags.includes(product.flag) ||
                    (selected_flags.includes("Top Sale") && product.topSale);

                const match_price = product.price >= min_price && product.price <= max_price;

                return match_category && match_subcategory && match_brand && match_flag && match_price;
            });

            if (sort_value === "latest") {
                filtered_products.sort(function (a, b) {
                    return new Date(b.date) - new Date(a.date);
                });
            }

            if (sort_value === "oldest") {
                filtered_products.sort(function (a, b) {
                    return new Date(a.date) - new Date(b.date);
                });
            }

            if (sort_value === "price_low") {
                filtered_products.sort(function (a, b) {
                    return a.price - b.price;
                });
            }

            if (sort_value === "price_high") {
                filtered_products.sort(function (a, b) {
                    return b.price - a.price;
                });
            }

            if (show_value !== "default") {
                filtered_products = filtered_products.slice(0, parseInt(show_value, 10));
            }

            return filtered_products;
        }

        function cat_product_render() {
            cat_product_update_price_ui();

            const products = cat_product_filter_products();

            cat_product_grid.innerHTML = "";

            products.forEach(function (product) {
                cat_product_grid.appendChild(cat_product_create_card(product));
            });

            if (products.length === 0) {
                cat_product_empty.style.display = "block";
                cat_product_result_count.style.display = "none";
            } else {
                cat_product_empty.style.display = "none";
                cat_product_result_count.style.display = "block";
                cat_product_result_count.textContent = products.length + " product found";
            }
        }

        function cat_product_open_filter() {
            cat_product_sidebar.classList.add("cat_product_sidebar_show");
            cat_product_filter_overlay.classList.add("cat_product_overlay_show");
            document.body.classList.add("cat_product_filter_open");
        }

        function cat_product_close_filter() {
            cat_product_sidebar.classList.remove("cat_product_sidebar_show");
            cat_product_filter_overlay.classList.remove("cat_product_overlay_show");
            document.body.classList.remove("cat_product_filter_open");
        }

        if (cat_product_mobile_filter_btn) {
            cat_product_mobile_filter_btn.addEventListener("click", cat_product_open_filter);
        }

        if (cat_product_filter_overlay) {
            cat_product_filter_overlay.addEventListener("click", cat_product_close_filter);
        }

        cat_product_filter_checks.forEach(function (input) {
            input.addEventListener("change", cat_product_render);
        });

        cat_product_min_range.addEventListener("input", cat_product_render);
        cat_product_max_range.addEventListener("input", cat_product_render);
        cat_product_sort_select.addEventListener("change", cat_product_render);
        cat_product_show_select.addEventListener("change", cat_product_render);

        cat_product_clear_filter.addEventListener("click", function () {
            cat_product_filter_checks.forEach(function (input) {
                input.checked = false;
            });

            cat_product_min_range.value = 0;
            cat_product_max_range.value = 2500;
            cat_product_sort_select.value = "default";
            cat_product_show_select.value = "default";

            cat_product_render();
        });

        document.addEventListener("keydown", function (event) {
            if (event.key === "Escape") {
                cat_product_close_filter();
            }
        });

        cat_product_render();
    });
</script>
@endsection