@if (!empty($pos_settings['product_show_style_second']))
    <div class="row" id="featured_products_box" style="display: none;" style="margin-top: 5px;">
        @if (!empty($featured_products))
            @include('sale_pos.partials.featured_products')
        @endif
    </div>
    <div class="row tw-mb-1" style="display: none !important;">
        {{-- @if (!empty($categories)) --}}
        <!-- OLD CATEGORY/BRAND DRAWER - HIDDEN (using new tab system below) -->
        <div class="col-md-3 !tw-px-2" id="product_category_div" style="margin-top: 5px; display: none !important;">
            <div class="tw-dw-drawer tw-dw-drawer-end">
                <input id="my-drawer-4" type="checkbox" class="tw-dw-drawer-toggle">
                <div class="tw-dw-drawer-content">
                    <!-- Page content here g-->

                    <label for="my-drawer-4"
                        class=" focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2  lg:tw-w-[98%] tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base md:tw-text-lg tw-text-black tw-font-semibold tw-cursor-pointer"
                        style="background-color: #ffb600">

                        @lang('category.category')
                    </label>
                </div>
                <!----drawer for category --->
                <div class="tw-dw-drawer-side" style="z-index: 4000">
                    <label for="my-drawer-4" aria-label="close sidebar"
                        class="tw-dw-drawer-overlay overlay-category"></label>
                    <div class="tw-dw-menu tw-w-1/4 tw-min-h-full tw-bg-white tw-p-6">
                        <div class="tw-flex tw-items-center tw-mb-16">
                            <button type="button"
                                class="tw-dw-btn tw-dw-btn-accent category-back tw-bg-transparent tw-border-2"
                                style="display: none">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="tw-w-5 icon icon-tabler icon-tabler-chevron-left" width="44"
                                    height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50"
                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M15 6l-6 6l6 6" />
                                </svg>
                            </button>

                            <h3 class="tw-text-center tw-flex-grow mx-auto category_heading tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-inline-block tw-text-transparent tw-bg-clip-text tw-font-bold tw-text-base md:tw-text-2xl"
                                style="margin-bottom: 0px; margin-top:5px;">@lang('category.category')</h3>

                            <button type="button" class="tw-dw-btn tw-dw-btn-error close-side-bar-category">
                                <i class="fa fa-times-circle" aria-hidden="true"></i>
                            </button>

                        </div>
                        <div class="row tw-mr-5">





                            {{-- @foreach ($categories as $category)
                                        <div class="col-md-12 col-xs-12 tw-mb-7 tw-w-auto  tw-h-28  tw-cursor-pointer main-category-div  no-print"
                                            data-value="{{ $category['id'] }}" data-name="{{ $category['name'] }}" data-parent="1">
                                            <div
                                                class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-font-semibold !tw-text-center tw-border-2">
                                                <div class="tw-dw-card-body" style="margin-bottom: -20px">
                                                    <h4 class="tw-flex tw-items-center tw-justify-center"
                                                        style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                        {{ $category['name'] }}</h4>
                                                </div>
                                                <div class="tw-dw-card-actions tw-justify-center">
                                                    <button type="button" class="tw-dw-btn tw-dw-btn-accent tw-dw-btn-outline tw-dw-btn-sm main-category tw-mb-2" data-value="{{ $category['id'] }}" data-parent="0">{{ __('lang_v1.all') }}</button>
                                                    @if (!empty($category['sub_categories']))
                                                    <button type="button" class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-outline tw-dw-btn-sm main-category tw-mb-2" data-parent="1" data-value="{{ $category['id'] }}" data-name="{{ $category['name'] }}">@lang('pagination.next')</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                @endforeach
                                @foreach ($categories as $category)
                                    @if (!empty($category['sub_categories']))
                                        <div class="{{ $category['id'] }} all-sub-category" style="display: none">
                                            @foreach ($category['sub_categories'] as $sc)
                                                @if ($sc['parent_id'] != 0)
                                                    <div class="col-md-3 col-xs-12 tw-mb-5 tw-w-auto tw-h-auto tw-cursor-pointer product_category no-print"
                                                        data-value="{{ $sc['id'] }}">
                                                        <div
                                                            class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-font-semibold tw-text-center tw-border-2">
                                                            <div class="tw-dw-card-body">
                                                                <h4 class="tw-flex tw-items-center tw-justify-center"
                                                                    style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                                    {{ $sc['name'] }}</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                @endforeach --}}


                            <!---test--->
                            <div class="">
                                <!-- "All Categories" Card -->
                                <div class="col-md-3 col-xs-12 mb-3 main-category-div main-category no-print"
                                    data-value="all" data-parent="0">
                                    <div class="">
                                        <div class="card-body">
                                            <h4 class="m-0">All Categories</h4>
                                        </div>
                                    </div>
                                </div>


                                <!-- Dynamic Categories -->
                                @foreach ($categories as $category)
                                    <div class="col-md-12 col-xs-12 mb-3 main-category-div main-category no-print"
                                        data-value="{{ $category['id'] }}" data-name="{{ $category['name'] }}"
                                        data-parent="1">

                                        <div class="category-container">
                                            <div class="card-body" style="padding: 1rem">
                                                <button type="button" class="main-category"
                                                    data-value="{{ $category['id'] }}" data-parent="0">
                                                    {{ $category['name'] }}
                                                    @if (!empty($category['sub_categories']))
                                                        »
                                                    @endif
                                                </button>

                                                @if (!empty($category['sub_categories']))
                                                    <div class="sub-category-dropdown">
                                                        <h3 class="text-center category_heading mb-0"
                                                            style="margin-top:5px;">
                                                            {{ $category['name'] }} - Sub Categories
                                                        </h3>
                                                        @foreach ($category['sub_categories'] as $subCategory)
                                                            <div class="product_category no-print"
                                                                data-value="{{ $subCategory['id'] }}">
                                                                <div class="card">
                                                                    <div class="card-body p-2">
                                                                        <h4 class="align-items-center">
                                                                            {{ $subCategory['name'] }}
                                                                        </h4>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <style>
                                /* Hide subcategories by default */
                                .sub-category-dropdown {
                                    display: none;
                                    position: absolute;
                                    background-color: white;
                                    border: 1px solid #ddd;
                                    padding: 10px;
                                    z-index: 1000;
                                    width: max-content;
                                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                                    top: 10px;
                                }

                                /* Show subcategories on hover */
                                .category-container:hover .sub-category-dropdown {
                                    display: block;
                                }

                                /* Styling for the main category button */
                                .main-category {
                                    background: none;
                                    border: none;
                                    cursor: pointer;
                                    font-size: 16px;
                                    font-weight: bold;
                                    color: #333;
                                    text-align: left;
                                    width: 100%;
                                    padding: 0px;
                                }

                                .main-category:hover {
                                    background-color: #f5f5f5;
                                }

                                /* Styling for subcategories */
                                .product_category {
                                    margin-bottom: 5px;
                                }

                                .product_category .card {
                                    border: none;
                                    background-color: #f9f9f9;
                                }

                                .product_category .card-body {
                                    padding: 10px;
                                    cursor: pointer;
                                }

                                .product_category h4 {
                                    margin: 0;
                                    font-size: 14px;
                                    color: #555;
                                }

                                /* Language-specific styles */

                                /* English (LTR) - Show subcategories on the right */
                                [lang="en"] .sub-category-dropdown {
                                    right: 100%;
                                    left: auto;
                                }

                                /* Arabic (RTL) - Show subcategories on the left */
                                [lang="ar"] .sub-category-dropdown {
                                    left: 100%;
                                    right: auto;
                                }
                            </style>
                            <!----test end--->


                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- @endif --}}

        @if (!empty($brands))
            <!-- OLD BRAND DRAWER - HIDDEN (using new tab system below) -->
            <div class="col-sm-3 !tw-px-2" id="product_brand_div" style="margin-top: 5px; display: none !important;">
                <div class="tw-dw-drawer tw-dw-drawer-end">
                    <input id="my-drawer-brand" type="checkbox" class="tw-dw-drawer-toggle">
                    <div class="tw-dw-drawer-content">
                        <!-- Page content here f-->
                        <label for="my-drawer-brand"
                            class="focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2 lg:tw-w-[98%] tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base md:tw-text-lg tw-text-black tw-font-semibold tw-cursor-pointer"
                            style="background-color: #ffb600">

                            @lang('brand.brands')
                        </label>

                    </div>
                    <div class="tw-dw-drawer-side" style="z-index: 4000">
                        <label for="my-drawer-brand" aria-label="close sidebar"
                            class="tw-dw-drawer-overlay overlay-brand"></label>
                        <div class="tw-dw-menu tw-min-h-full tw-bg-white" style="width: 20%">

                            <div class="tw-flex tw-items-center tw-mb-16">
                                <h3 class="tw-text-center tw-mx-auto tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-text-transparent tw-bg-clip-text tw-font-bold tw-text-base md:tw-text-2xl tw-mb-16"
                                    style="margin-bottom: 0px; margin-top:5px;">@lang('brand.brands')</h3>
                                <button type="button" class="tw-dw-btn tw-dw-btn-error close-side-bar-brand">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i>
                                </button>
                            </div>

                            <div class="" style="display: flex;flex-direction: column;">
                                @foreach ($brands as $key => $brand)
                                    <div class="col-xs-12 tw-w-auto tw-h-auto tw-cursor-pointer product_brand no-print"
                                        data-value="{{ $key }}">
                                        <div class=""
                                            style="border: 1px solid #ddd;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
                                            <div class="tw-dw-card-body" style="padding: 1rem;border-radius: 20px;
">
                                                <h4 class=""
                                                    style="margin-bottom: 0px; margin-top:0px; font-size: 16px; font-weight: 700;">
                                                    {{ $brand }}
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif



        <!-- used in repair : filter for service/product -->
        <div class="col-md-4 hide" id="product_service_div" style="margin-top: 5px;">
            {!! Form::select(
                'is_enabled_stock',
                ['' => __('messages.all'), 'product' => __('sale.product'), 'service' => __('lang_v1.service')],
                null,
                ['id' => 'is_enabled_stock', 'class' => 'select2', 'name' => null, 'style' => 'width:100% !important'],
            ) !!}
        </div>

        <div class="col-sm-4 @if (empty($featured_products)) hide @endif" id="feature_product_div"
            style="margin-top: 5px;">
            <button type="button" class="btn btn-primary btn-flat " id="show_featured_products">
                @lang('lang_v1.featured_products')
            </button>
        </div>

        <!---OLD product search with grid list - HIDDEN (using new tab system below) -->
        <!-- Keep search input hidden but functional for existing JS compatibility -->
        <div class="col-md-4" style="margin-top: 5px; display: none !important; position: absolute; left: -9999px; visibility: hidden;">
            <input type="text" name="search_suggestion_list" id="search_suggestion_list" class="form-control" placeholder="@lang('lang_v1.search_product')" autocomplete="off">
        </div>
        
        <!-- Keep grid toggle hidden but functional for existing JS compatibility -->
        <div class="col-sm-2" style="margin-top: 5px; display: none !important; position: absolute; left: -9999px; visibility: hidden;">
            <button type="button" class="btn btn-flat" id="product_show_style_switch" style="background-color: #FFB600">
                <i class="fa fa-th-large"></i>
            </button>
        </div>

        <!---------OLD product search with grid end - HIDDEN--------->



    </div>


    <!-- Product Display Section with Category/Brands Tabs -->
    <div class="row" style="background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; margin-top: 10px;">
        <!-- Category and Brands Tabs -->
        <div class="col-md-12" style="margin-bottom: 15px;">
            <div class="product-filter-tabs" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                <button type="button" class="filter-tab-btn active" id="category_tab_btn" data-tab="category" style="background-color: #ffb600; color: #111827; font-weight: 600; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;">
                    @lang('category.category')
                </button>
                @if (!empty($brands))
                <button type="button" class="filter-tab-btn" id="brands_tab_btn" data-tab="brands" style="background-color: #ffb600; color: #111827; font-weight: 600; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;">
                    @lang('brand.brands')
                </button>
                @endif
                <div style="flex: 1;"></div>
                <input type="text" name="search_suggestion_list_tab" id="search_suggestion_list_tab" class="form-control" placeholder="@lang('lang_v1.search_product')" autocomplete="off" style="max-width: 250px; height: 40px;">
                <button type="button" class="btn btn-flat" id="product_show_style_switch_tab" style="background-color: #FFB600; height: 40px; padding: 0 15px;">
                    <i class="fa fa-th-large"></i>
                </button>
            </div>
        </div>

        <!-- Category Selection Section (shown when Category tab is active) -->
        @if (!empty($categories))
        <div class="col-md-12" id="category_selection_section" style="display: block; margin-bottom: 15px;">
            <div class="category-grid" style="display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 8px;">
                <div class="category-item active" data-category="all" style="background: linear-gradient(135deg, #0b5394 0%, #084d82 100%); border: none; border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 12px rgba(11, 83, 148, 0.25);">
                    <i class="fa fa-th-large" style="font-size: 24px; color: #ffffff; margin-bottom: 2px;"></i>
                    <span style="font-weight: 700; font-size: 13px; color: #ffffff; letter-spacing: 0.3px;">@lang('lang_v1.all_category')</span>
                </div>
                @foreach ($categories as $category)
                <div class="category-item" data-category="{{ $category['id'] }}" style="background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
                    <div style="width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 2px;">
                        <i class="fa fa-tag" style="font-size: 20px; color: #0b5394;"></i>
                    </div>
                    <span style="font-weight: 600; font-size: 12px; color: #374151; line-height: 1.3;">{{ $category['name'] }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @else
        <div class="col-md-12" id="category_selection_section" style="display: block; margin-bottom: 15px;">
            <div class="category-grid" style="display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px;">
                <div class="category-item active" data-category="all" style="background: linear-gradient(135deg, #0b5394 0%, #084d82 100%); border: none; border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 12px rgba(11, 83, 148, 0.25);">
                    <i class="fa fa-th-large" style="font-size: 24px; color: #ffffff; margin-bottom: 2px;"></i>
                    <span style="font-weight: 700; font-size: 13px; color: #ffffff; letter-spacing: 0.3px;">@lang('lang_v1.all_category')</span>
                </div>
            </div>
        </div>
        @endif

        <!-- Brands Selection Section (shown when Brands tab is active) -->
        @if (!empty($brands))
        <div class="col-md-12" id="brands_selection_section" style="display: none; margin-bottom: 15px;">
            <div class="brand-grid" style="display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 8px;">
                <div class="brand-item active" data-brand="all" style="background: linear-gradient(135deg, #0b5394 0%, #084d82 100%); border: none; border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 12px rgba(11, 83, 148, 0.25);">
                    <i class="fa fa-th-large" style="font-size: 24px; color: #ffffff; margin-bottom: 2px;"></i>
                    <span style="font-weight: 700; font-size: 13px; color: #ffffff; letter-spacing: 0.3px;">@lang('lang_v1.all')</span>
                </div>
                @foreach ($brands as $key => $brand)
                <div class="brand-item" data-brand="{{ $key }}" style="background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-width: 120px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
                    <div style="width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 2px;">
                        <i class="fa fa-star" style="font-size: 20px; color: #0b5394;"></i>
                    </div>
                    <span style="font-weight: 600; font-size: 12px; color: #374151; line-height: 1.3;">{{ $brand }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Products Display Section -->
        <div class="col-md-12">
            <input type="hidden" id="suggestion_page" value="1">
            <input type="hidden" id="suggestion_style" value="list">
            <input type="hidden" id="selected_category" value="all">
            <input type="hidden" id="selected_brand" value="all">
            <div class="eq-height-row" id="product_list_body"></div>
        </div>
        <div class="col-md-12 text-center" id="suggestion_page_loader" style="display: none;">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
        </div>
    </div>

    <style>
        .filter-tab-btn {
            transition: all 0.3s ease;
        }
        .filter-tab-btn:hover {
            background-color: #ffc933 !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .filter-tab-btn.active {
            background-color: #ffb600 !important;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .category-item:hover, .brand-item:hover {
            border-color: #0b5394 !important;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 6px 16px rgba(11, 83, 148, 0.2),
                        0 2px 6px rgba(0, 0, 0, 0.1) !important;
            background: #f8fafc !important;
        }
        .category-item:hover > div:first-child {
            background: linear-gradient(135deg, #0b5394 0%, #084d82 100%) !important;
        }
        .category-item:hover > div:first-child i {
            color: #ffffff !important;
        }
        .category-item:hover span {
            color: #0b5394 !important;
            font-weight: 700 !important;
        }
        .category-item.active, .brand-item.active {
            background: linear-gradient(135deg, #0b5394 0%, #084d82 100%) !important;
            border-color: #0b5394 !important;
            box-shadow: 0 4px 16px rgba(11, 83, 148, 0.3),
                        0 2px 8px rgba(11, 83, 148, 0.2) !important;
            transform: translateY(-2px);
        }
        .category-item.active i,
        .category-item.active span,
        .brand-item.active i,
        .brand-item.active span {
            color: #ffffff !important;
        }
        .category-item.active > div:first-child {
            background: rgba(255, 255, 255, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        .category-item.active > div:first-child i {
            color: #ffffff !important;
        }
        .category-item:not(.active) i,
        .category-item:not(.active) span,
        .brand-item:not(.active) i,
        .brand-item:not(.active) span {
            color: #374151 !important;
        }
        /* Single row scrollable category/brand container - Enhanced Design */
        .category-grid, .brand-grid {
            scrollbar-width: thin;
            scrollbar-color: #0b5394 #f3f4f6;
        }
        .category-grid::-webkit-scrollbar, .brand-grid::-webkit-scrollbar {
            height: 6px;
        }
        .category-grid::-webkit-scrollbar-track, .brand-grid::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 6px;
        }
        .category-grid::-webkit-scrollbar-thumb, .brand-grid::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #0b5394 0%, #084d82 100%);
            border-radius: 6px;
        }
        .category-grid::-webkit-scrollbar-thumb:hover, .brand-grid::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #084d82 0%, #073d6b 100%);
        }
        
        /* Enhanced category item styles */
        .category-item, .brand-item {
            position: relative;
            overflow: hidden;
        }
        
        .category-item::before, .brand-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(11, 83, 148, 0.1), transparent);
            transition: left 0.5s ease;
        }
        
        .category-item:hover::before, .brand-item:hover::before {
            left: 100%;
        }
        
        /* Hide product filter tabs */
        .product-filter-tabs {
            display: none !important;
        }
    </style>

    <script>
        // Wait for jQuery and pos.js to be fully loaded
        // This script runs when pos_sidebar is included, so we must wait for jQuery which loads later
        (function() {
            // Function to check if jQuery is loaded
            function waitForJQuery(callback) {
                if (typeof window.jQuery !== 'undefined') {
                    callback();
                } else {
                    setTimeout(function() {
                        waitForJQuery(callback);
                    }, 50);
                }
            }
            
            // Wait for both DOM, jQuery and pos.js to be ready
            function initCategoryFiltering() {
                // Check if jQuery is available
                if (typeof window.jQuery === 'undefined') {
                    setTimeout(initCategoryFiltering, 100);
                    return;
                }
                
                // Check if pos.js has loaded (check for global variables and function)
                if (typeof window.global_p_category_id === 'undefined' || typeof window.get_product_suggestion_list !== 'function') {
                    // Retry after a short delay
                    setTimeout(initCategoryFiltering, 100);
                    return;
                }
                
                // Now attach event handlers
                attachCategoryHandlers();
            }
            
            function attachCategoryHandlers() {
                // Ensure jQuery is available - use window.jQuery to access it
                if (typeof window.jQuery === 'undefined') {
                    console.error('jQuery is not available');
                    return;
                }
                
                // Use jQuery directly instead of $ to avoid conflicts
                var $j = window.jQuery;
                
                // Check if handlers are already attached to prevent duplicates
                if ($j('.category-item').data('handlers-attached')) {
                    return; // Already attached
                }
                
                // Mark as attached
                $j('.category-item').data('handlers-attached', true);
                
                // Tab switching functionality
                $j('.filter-tab-btn').off('click').on('click', function() {
                    var tab = $j(this).data('tab');
                    
                    // Update active tab
                    $j('.filter-tab-btn').removeClass('active');
                    $j(this).addClass('active');
                    
                    // Show/hide sections
                    if (tab === 'category') {
                        $j('#category_selection_section').show();
                        $j('#brands_selection_section').hide();
                    } else if (tab === 'brands') {
                        $j('#category_selection_section').hide();
                        $j('#brands_selection_section').show();
                    }
                });

                // Category selection - EXACTLY matches existing POS system behavior
                // Use off() first to prevent duplicate handlers
                // Category item click handler - ensures only one is active
                $j(document).off('click', '.category-item').on('click', '.category-item', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    var $item = $j(this);
                    
                    // Remove active class and reset styles from ALL category items first
                    $j('.category-item').removeClass('active');
                    $j('.category-item').each(function() {
                        var $cat = $j(this);
                        var catId = $cat.attr('data-category');
                        
                        // Reset to default style for all items
                        if (catId === 'all') {
                            $cat.css({
                                'background': '#ffffff',
                                'border': '1.5px solid #e5e7eb',
                                'box-shadow': '0 1px 3px rgba(0, 0, 0, 0.05)',
                                'transform': 'translateY(0)'
                            });
                            $cat.find('i').css('color', '#374151');
                            $cat.find('span').css({
                                'color': '#374151',
                                'font-weight': '600'
                            });
                            // For "all" category, there's no icon container div, just icon directly
                            if ($cat.find('> div:first-child').length === 0) {
                                // No icon container, just reset icon
                                $cat.find('i').css('color', '#374151');
                            }
                        } else {
                            $cat.css({
                                'background': '#ffffff',
                                'border': '1.5px solid #e5e7eb',
                                'box-shadow': '0 1px 3px rgba(0, 0, 0, 0.05)',
                                'transform': 'translateY(0)'
                            });
                            $cat.find('span').css({
                                'color': '#374151',
                                'font-weight': '600'
                            });
                            $cat.find('> div:first-child').css({
                                'background': 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)'
                            });
                            $cat.find('> div:first-child i').css('color', '#0b5394');
                        }
                    });
                    
                    // Get category ID from data attribute
                    var categoryId = $item.attr('data-category');
                    if (!categoryId) {
                        categoryId = $item.data('category');
                    }
                    
                    // Convert to appropriate type - backend expects numeric ID or 'all'
                    // Ensure numeric IDs are converted properly
                    var categoryIdParam;
                    if (categoryId === 'all' || categoryId === '' || categoryId === null || categoryId === undefined) {
                        categoryIdParam = 'all';
                    } else {
                        // Convert to number if it's numeric, otherwise keep as string
                        var numId = parseInt(categoryId, 10);
                        categoryIdParam = (!isNaN(numId) && numId > 0) ? numId : categoryId;
                    }
                    
                    console.log('Category clicked:', {
                        raw: categoryId,
                        processed: categoryIdParam,
                        element: $item.text().trim()
                    });
                    
                    // Now apply active styles to the clicked item
                    $item.addClass('active');
                    var clickedCatId = categoryId;
                    
                    // Apply active styles to clicked item
                    if (clickedCatId === 'all') {
                        $item.css({
                            'background': 'linear-gradient(135deg, #0b5394 0%, #084d82 100%)',
                            'border': 'none',
                            'box-shadow': '0 4px 12px rgba(11, 83, 148, 0.25)',
                            'transform': 'translateY(-2px)'
                        });
                        $item.find('i').css('color', '#ffffff');
                        $item.find('span').css({
                            'color': '#ffffff',
                            'font-weight': '700'
                        });
                    } else {
                        $item.css({
                            'background': 'linear-gradient(135deg, #0b5394 0%, #084d82 100%)',
                            'border': 'none',
                            'border-color': '#0b5394',
                            'box-shadow': '0 4px 16px rgba(11, 83, 148, 0.3), 0 2px 8px rgba(11, 83, 148, 0.2)',
                            'transform': 'translateY(-2px)'
                        });
                        $item.find('span').css({
                            'color': '#ffffff',
                            'font-weight': '700'
                        });
                        if ($item.find('> div:first-child').length > 0) {
                            $item.find('> div:first-child').css({
                                'background': 'rgba(255, 255, 255, 0.2)',
                                'border': '1px solid rgba(255, 255, 255, 0.3)'
                            });
                            $item.find('> div:first-child i').css('color', '#ffffff');
                        }
                    }
                    
                    // Update hidden input
                    $j('#selected_category').val(categoryIdParam);
                    
                    // Set global category variable EXACTLY like existing code does
                    // This must match: global_p_category_id = $(this).data('value');
                    window.global_p_category_id = categoryIdParam;
                    if (typeof global_p_category_id !== 'undefined') {
                        global_p_category_id = categoryIdParam;
                    }
                    
                    console.log('Global category set to:', global_p_category_id);
                    
                    // Reset page to 1 (required for pagination) - IMPORTANT!
                    $j('input#suggestion_page').val(1);
                    
                    // Clear any search terms when filtering by category
                    $j('#search_suggestion_list').val('');
                    $j('#search_suggestion_list_tab').val('');
                    
                    // Get location ID
                    var location_id = $j('input#location_id').val();
                    if (!location_id || location_id == '') {
                        console.error('Location ID is missing!');
                        return false;
                    }
                    
                    // Get current brand (keep existing filter)
                    var currentBrand = null;
                    if (typeof window.global_brand_id !== 'undefined' && window.global_brand_id !== null && window.global_brand_id !== '') {
                        currentBrand = window.global_brand_id;
                    } else if (typeof global_brand_id !== 'undefined' && global_brand_id !== null && global_brand_id !== '') {
                        currentBrand = global_brand_id;
                    }
                    
                    // Use the correct category ID
                    var categoryToUse = window.global_p_category_id || global_p_category_id || categoryIdParam;
                    
                    console.log('Calling get_product_suggestion_list with:', {
                        category: categoryToUse,
                        categoryType: typeof categoryToUse,
                        brand: currentBrand,
                        location: location_id
                    });
                    
                    // Clear product list first to show loading state
                    $j('div#product_list_body').html('');
                    $j('#suggestion_page_loader').show();
                    
                    // Call get_product_suggestion_list EXACTLY like existing code
                    // This matches: get_product_suggestion_list(global_p_category_id, global_brand_id, $('input#location_id').val(), null);
                    if (location_id != '' && location_id != undefined) {
                        if (typeof window.get_product_suggestion_list === 'function') {
                            window.get_product_suggestion_list(
                                categoryToUse,
                                currentBrand,
                                location_id,
                                null
                            );
                        } else if (typeof get_product_suggestion_list === 'function') {
                            get_product_suggestion_list(
                                categoryToUse,
                                currentBrand,
                                location_id,
                                null
                            );
                        } else {
                            console.error('get_product_suggestion_list function not found');
                        }
                    }
                    
                    // Also trigger featured products (matching existing behavior)
                    if (typeof window.get_featured_products === 'function') {
                        window.get_featured_products();
                    } else if (typeof get_featured_products === 'function') {
                        get_featured_products();
                    }
                    
                    return false;
                });

                // Brand selection - integrates with existing POS JS
                // Use off() first to prevent duplicate handlers
                $j(document).off('click', '.brand-item').on('click', '.brand-item', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    var $item = $j(this);
                    var brandId = $item.data('brand');
                    
                    // Update active brand
                    $j('.brand-item').removeClass('active');
                    $item.addClass('active');
                    
                    // Update hidden input
                    $j('#selected_brand').val(brandId);
                    
                    // Set global brand variable directly (these are declared in pos.js)
                    window.global_brand_id = brandId;
                    if (typeof global_brand_id !== 'undefined') {
                        global_brand_id = brandId;
                    }
                    
                    // Reset page to 1
                    $j('input#suggestion_page').val(1);
                    
                    // Get location ID
                    var location_id = $j('input#location_id').val();
                    
                    // Get current category
                    var currentCategory = window.global_p_category_id || global_p_category_id || 'all';
                    
                    // Call the existing product suggestion function
                    if (location_id != '' && location_id != undefined) {
                        if (typeof window.get_product_suggestion_list === 'function') {
                            window.get_product_suggestion_list(
                                currentCategory,
                                brandId,
                                location_id,
                                null
                            );
                        } else if (typeof get_product_suggestion_list === 'function') {
                            get_product_suggestion_list(
                                currentCategory,
                                brandId,
                                location_id,
                                null
                            );
                        }
                    }
                    
                    // Also trigger featured products update if function exists
                    if (typeof window.get_featured_products === 'function') {
                        window.get_featured_products();
                    } else if (typeof get_featured_products === 'function') {
                        get_featured_products();
                    }
                });

                // Sync search inputs - remove old handlers first
                $j('#search_suggestion_list_tab').off('keyup').on('keyup', function() {
                    var searchVal = $j(this).val();
                    $j('#search_suggestion_list').val(searchVal);
                    // Trigger search if the original input has handlers
                    if ($j('#search_suggestion_list').length) {
                        $j('#search_suggestion_list').trigger('keyup');
                    }
                });
                
                $j('#search_suggestion_list').off('keyup.category-sync').on('keyup.category-sync', function() {
                    $j('#search_suggestion_list_tab').val($j(this).val());
                });

                // Sync grid/list toggle
                $j('#product_show_style_switch_tab').off('click').on('click', function() {
                    if ($j('#product_show_style_switch').length) {
                        $j('#product_show_style_switch').trigger('click');
                    }
                });

                // Initialize: select "All Categories" by default
                var allCategoryItem = $j('.category-item[data-category="all"]');
                if (allCategoryItem.length && !allCategoryItem.hasClass('active')) {
                    allCategoryItem.addClass('active');
                }
            }
            
            // Start initialization - wait for jQuery first, then DOM, then pos.js
            // Since this script runs when the partial is included (before jQuery loads),
            // we need to wait until window is fully loaded
            waitForJQuery(function() {
                // Now jQuery is available, wait for DOM
                window.jQuery(document).ready(function() {
                    // Wait a bit for pos.js to load, then initialize
                    setTimeout(initCategoryFiltering, 500);
                });
            });
        })();
    </script>
@else
    <div class="row" id="featured_products_box" style="display: none;">
        @if (!empty($featured_products))
            @include('sale_pos.partials.featured_products')
        @endif
    </div>
    <div class="row tw-mb-1">
        @if (!empty($categories))
            <div class="col-md-6 !tw-px-2" id="product_category_div">
                <div class="tw-dw-drawer tw-dw-drawer-end">
                    <input id="my-drawer-4" type="checkbox" class="tw-dw-drawer-toggle">
                    <div class="tw-dw-drawer-content">
                        <!-- Page content here s -->
                        <label for="my-drawer-4"
                            class="tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 hover:tw-from-indigo-600 hover:tw-to-blue-600 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2 active:tw-from-indigo-700 active:tw-to-blue-700 lg:tw-w-[98%] tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base md:tw-text-lg tw-text-white tw-font-semibold tw-rounded-xl tw-h-12 tw-cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="tw-w-5 icon icon-tabler icon-tabler-category-plus" width="44"
                                height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"
                                fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M4 4h6v6h-6zm10 0h6v6h-6zm-10 10h6v6h-6zm10 3h6m-3 -3v6" />
                            </svg>
                            @lang('category.category')
                        </label>
                    </div>
                    <div class="tw-dw-drawer-side" style="z-index: 4000">
                        <label for="my-drawer-4" aria-label="close sidebar"
                            class="tw-dw-drawer-overlay overlay-category"></label>
                        <div class="tw-dw-menu tw-w-2/4 tw-min-h-full tw-bg-white tw-p-6">
                            <div class="tw-flex tw-items-center tw-mb-16">
                                <button type="button"
                                    class="tw-dw-btn tw-dw-btn-accent category-back tw-bg-transparent tw-border-2"
                                    style="display: none">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="tw-w-5 icon icon-tabler icon-tabler-chevron-left" width="44"
                                        height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M15 6l-6 6l6 6" />
                                    </svg>
                                </button>

                                <h3 class="tw-text-center tw-flex-grow mx-auto category_heading tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-inline-block tw-text-transparent tw-bg-clip-text tw-font-bold tw-text-base md:tw-text-2xl"
                                    style="margin-bottom: 0px; margin-top:5px;">@lang('category.category')</h3>

                                <button type="button" class="tw-dw-btn tw-dw-btn-error close-side-bar-category">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i>
                                </button>

                            </div>
                            <div class="row tw-mr-5">
                                <div class="col-md-3 col-xs-12 tw-mb-7 tw-w-auto  tw-h-auto tw-cursor-pointer  main-category-div main-category no-print"
                                    data-value="all" data-parent="0">
                                    <div
                                        class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer !tw-text-xs md:!tw-text-sm tw-font-semibold tw-text-center tw-border-2">
                                        <div class="tw-dw-card-body">
                                            <h4 class="tw-flex tw-items-center tw-justify-center"
                                                style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                @lang('lang_v1.all_category')</h4>
                                        </div>
                                    </div>
                                </div>
                                @foreach ($categories as $category)
                                    <div class="col-md-3 col-xs-12 tw-mb-7 tw-w-auto  tw-h-28  tw-cursor-pointer main-category-div  no-print"
                                        data-value="{{ $category['id'] }}" data-name="{{ $category['name'] }}"
                                        data-parent="1">
                                        <div
                                            class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-font-semibold !tw-text-center tw-border-2">
                                            <div class="tw-dw-card-body" style="margin-bottom: -20px">
                                                <h4 class="tw-flex tw-items-center tw-justify-center"
                                                    style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                    {{ $category['name'] }}</h4>
                                            </div>
                                            <div class="tw-dw-card-actions tw-justify-center">
                                                <button type="button"
                                                    class="tw-dw-btn tw-dw-btn-accent tw-dw-btn-outline tw-dw-btn-sm main-category tw-mb-2"
                                                    data-value="{{ $category['id'] }}"
                                                    data-parent="0">{{ __('lang_v1.all') }}</button>
                                                @if (!empty($category['sub_categories']))
                                                    <button type="button"
                                                        class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-outline tw-dw-btn-sm main-category tw-mb-2"
                                                        data-parent="1" data-value="{{ $category['id'] }}"
                                                        data-name="{{ $category['name'] }}">@lang('pagination.next')</button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                @foreach ($categories as $category)
                                    @if (!empty($category['sub_categories']))
                                        <div class="{{ $category['id'] }} all-sub-category" style="display: none">
                                            @foreach ($category['sub_categories'] as $sc)
                                                @if ($sc['parent_id'] != 0)
                                                    <div class="col-md-3 col-xs-12 tw-mb-5 tw-w-auto tw-h-auto tw-cursor-pointer product_category no-print"
                                                        data-value="{{ $sc['id'] }}">
                                                        <div
                                                            class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-font-semibold tw-text-center tw-border-2">
                                                            <div class="tw-dw-card-body">
                                                                <h4 class="tw-flex tw-items-center tw-justify-center"
                                                                    style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                                    {{ $sc['name'] }}</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (!empty($brands))
            <div class="col-sm-6 !tw-px-2" id="product_brand_div">
                <div class="tw-dw-drawer tw-dw-drawer-end">
                    <input id="my-drawer-brand" type="checkbox" class="tw-dw-drawer-toggle">
                    <div class="tw-dw-drawer-content">
                        <!-- Page content here 6-->
                        <label for="my-drawer-brand"
                            class="tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 hover:tw-from-indigo-600 hover:tw-to-blue-600 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2 active:tw-from-indigo-700 active:tw-to-blue-700 lg:tw-w-[98%] tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base md:tw-text-lg tw-text-white tw-font-semibold tw-rounded-xl tw-h-12 tw-cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="tw-w-5 icon icon-tabler icon-tabler-brand-beats" width="44" height="44"
                                viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                <path d="M12.5 12.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
                                <path d="M9 12v-8" />
                            </svg>
                            @lang('brand.brands')
                        </label>

                    </div>
                    <div class="tw-dw-drawer-side" style="z-index: 4000">
                        <label for="my-drawer-brand" aria-label="close sidebar"
                            class="tw-dw-drawer-overlay overlay-brand"></label>
                        <div class="tw-dw-menu tw-w-2/4 tw-min-h-full tw-bg-white tw-p-6">

                            <div class="tw-flex tw-items-center tw-mb-16">
                                <h3 class="tw-text-center tw-mx-auto tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-text-transparent tw-bg-clip-text tw-font-bold tw-text-base md:tw-text-2xl tw-mb-16"
                                    style="margin-bottom: 0px; margin-top:5px;">@lang('brand.brands')</h3>
                                <button type="button" class="tw-dw-btn tw-dw-btn-error close-side-bar-brand">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i>
                                </button>
                            </div>

                            <div class="row tw-mr-5">
                                @foreach ($brands as $key => $brand)
                                    <div class="col-md-4 col-xs-12 tw-mb-5 tw-w-auto tw-h-auto tw-cursor-pointer product_brand no-print"
                                        data-value="{{ $key }}">
                                        <div
                                            class="tw-dw-card tw-w-25 tw-bg-base-100 tw-shadow-sm tw-h-auto tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white hover:tw-bg-white/60 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-font-semibold tw-text-center tw-border-2">
                                            <div class="tw-dw-card-body">
                                                <h4 class="tw-flex tw-items-center tw-justify-center"
                                                    style="margin-bottom: 0px; margin-top:0px; font-size: inherit; font-weight: inherit;">
                                                    {{ $brand }}
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- used in repair : filter for service/product -->
        <div class="col-md-6 hide" id="product_service_div">
            {!! Form::select(
                'is_enabled_stock',
                ['' => __('messages.all'), 'product' => __('sale.product'), 'service' => __('lang_v1.service')],
                null,
                ['id' => 'is_enabled_stock', 'class' => 'select2', 'name' => null, 'style' => 'width:100% !important'],
            ) !!}
        </div>

        <div class="col-sm-4 @if (empty($featured_products)) hide @endif" id="feature_product_div">
            <button type="button" class="btn btn-primary btn-flat"
                id="show_featured_products">@lang('lang_v1.featured_products')</button>
        </div>

    </div>
    <div class="row">
        <input type="hidden" id="suggestion_page" value="1">
        <div class="col-md-12">
            <div class="eq-height-row" id="product_list_body"></div>
        </div>
        <div class="col-md-12 text-center" id="suggestion_page_loader" style="display: none;">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
        </div>
    </div>

@endif