@extends('seller/layout')
@section('title')
    {{ labels('admin_labels.point_of_sale', 'Point Of Sale') }}
@endsection
@section('content')
    <section class="main-content">
        <div class="container-fluid mt-5 mb-5 px-6">
            <x-seller.breadcrumb :title="labels('admin_labels.point_of_sale', 'Point Of Sale')" :subtitle="labels(
                'admin_labels.grow_your_sales_with_the_right_tools',
                'Grow Your Sales With The Right Tools',
            )" :breadcrumbs="[
                ['label' => labels('admin_labels.manage', 'Manage')],
                ['label' => labels('admin_labels.point_of_sale', 'Point Of Sale')],
            ]" />


            <section class="pos-data row">
                <div class="col-md-12 col-xxl-8">
                    <div class="card content-area ps-5 pe-5 ">
                        <div class="mt-4 col-md-12 additional-info-nav-header d-flex">
                            <div class="col-sm-6">
                                <nav class="w-100">
                                    <div class="nav nav-tabs" id="media-tab" role="tablist">
                                        <a class="nav-item nav-link pos-nav-tab-link active" data-tab="product_tab"
                                            data-bs-toggle="tab" href="#nav-product" role="tab"
                                            aria-controls="nav-product"
                                            aria-selected="true">{{ labels('admin_labels.products', 'Products') }}</a>
                                        <a class="nav-item nav-link pos-nav-tab-link" data-tab="combo_product_tab"
                                            data-bs-toggle="tab" href="#nav-combo-poduct" role="tab"
                                            aria-controls="nav-combo-poduct"
                                            aria-selected="false">{{ labels('admin_labels.combo_products', 'Combo Products') }}</a>
                                    </div>
                                </nav>
                            </div>
                            <div class="col-sm-6">
                                <div class="align-items-center d-flex form-group justify-content-end row">

                                    <div class="col-md-5">

                                        <select class="form-select" id="product_categories" name="category_parent">
                                            <option value="">
                                                Select Categories                                            </option>
                                            {!! getCategoriesOptionHtml($categories) !!}

                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="input-group me-3 search-input-grp product-search">
                                            <span class="search-icon"><i class='bx bx-search-alt'></i></span>
                                            <input type="text" name="search_products" class="form-control"
                                                id="search_products" value="" placeholder="Search Products">
                                        </div>
                                        <div class="input-group me-3 search-input-grp combo-product-search d-none">
                                            <span class="search-icon"><i class='bx bx-search-alt'></i></span>
                                            <input type="text" name="search_products" class="form-control"
                                                id="search_combo_products" value=""
                                                placeholder="Search combo Products">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade active show" id="nav-product" role="tabpanel"
                                aria-labelledby="nav-product-tab">

                                <div class="mt-4">

                                    @php

                                        use App\Models\Seller;
                                        use Illuminate\Support\Facades\Auth;

                                        $user_id = Auth::user()->id;
                                        $seller_id = Seller::where('user_id', $user_id)->value('id');
                                    @endphp
                                    <input type="hidden" name="session_user_id" id="session_user_id"
                                        value="{{ $seller_id }}" />
                                    <input type="hidden" name="limit" id="limit" value="8" />
                                    <input type="hidden" name="offset" id="offset" value="0" />
                                    <input type="hidden" name="total" id="total_products" />
                                    <input type="hidden" name="current_page" id="current_page" value="0" />
                                    <div class="row d-flex align-content-center" class="img-thumbnail" id="get_products">
                                        <!-- product display in this container -->
                                    </div>

                                </div>
                                <div class="card-footer text-muted mt-8">
                                    <div class="pagination-container"></div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="nav-combo-poduct" role="tabpanel">

                                <div class="mt-4">
                                    <input type="hidden" name="session_user_id" id="session_user_id"
                                        value="