@extends('layouts.seller-template')
 @section('page-content')
 <!-- Start right Content here -->
 <!-- ============================================================== -->
 <div class="main-content">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Products</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                                 <li class="breadcrumb-item active">Products</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->

             <div class="row">
                 <div class="col-xl-3 col-lg-4">
                     <div class="card">
                         <div class="card-header">
                             <div class="d-flex mb-3">
                                 <div class="flex-grow-1">
                                     <h5 class="fs-16">Filters</h5>
                                 </div>
                                 <div class="flex-shrink-0">
                                     <a href="#" class="text-decoration-underline">Clear All</a>
                                 </div>
                             </div>

                             <div class="filter-choices-input">
                                 <input class="form-control" data-choices data-choices-removeItem type="text" value="Fan, wire,cables" />
                             </div>
                         </div>

                         <div class="accordion accordion-flush">

                             <div class="card-body border-bottom">
                                 <div>
                                     <p class="text-muted text-uppercase fs-12 fw-medium mb-2">Category</p>
                                     <ul class="list-unstyled mb-0">

                                         <li>
                                             <a class="d-flex py-1" data-bs-toggle="collapse" href="#filterlist-fashion" role="button" aria-expanded="true" aria-controls="filterlist-fashion">
                                                 <div class="flex-grow-1">
                                                     <h5 class="fs-13 mb-0">Mattress</h5>
                                                 </div>
                                                 <div class="flex-shrink-0 ms-2">
                                                     <span class="badge bg-light text-muted">4</span>
                                                 </div>
                                             </a>

                                             <div class="collapse show" id="filterlist-fashion">
                                                 <ul class="ps-4">
                                                     <li><a href="#" class="d-block py-1 text-muted">Comfort Collection</a>
                                                         <div class="collapse show" id="filterlist-fashion">
                                                             <ul class="ps-4">
                                                                 <li><a href="#" class="d-block py-1 text-muted">Comfort Collectioni>
                                                                 <li><a href="#" class="d-block py-1 text-muted">Multicore Cables</a></li>
                                                                 <li><a href="#" class="d-block py-1 text-muted">Wire and Cable Accessories</a></li>
                                                             </ul>
                                                         </div>

                                                     </li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Softy Collection</a></li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Luxury Collections</a></li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Welness Collection</a></li>
                                                 </ul>
                                             </div>
                                         </li>
                                         <li>
                                             <a class="d-flex py-1" data-bs-toggle="collapse" href="#filterlist-electronics" role="button" aria-expanded="false" aria-controls="filterlist-electronics">
                                                 <div class="flex-grow-1">
                                                     <h5 class="fs-13 mb-0">Pillow</h5>
                                                 </div>
                                                 <div class="flex-shrink-0 ms-2">
                                                     <span class="badge bg-light text-muted">3</span>
                                                 </div>
                                             </a>

                                             <div class="collapse" id="filterlist-electronics">
                                                 <ul class="ps-4">
                                                     <li><a href="#" class="d-block py-1 text-muted">Bamboo Latex Pillow</a></li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Luxury Pillow</a></li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Plush Pillow</a></li>
                                                 </ul>
                                             </div>
                                         </li>

                                         <li>
                                             <a class="d-flex py-1" data-bs-toggle="collapse" href="#filterlist-furniture" role="button" aria-expanded="false" aria-controls="filterlist-furniture">
                                                 <div class="flex-grow-1">
                                                     <h5 class="fs-13 mb-0">Accessories</h5>
                                                 </div>
                                                 <div class="flex-shrink-0 ms-2">
                                                     <span class="badge bg-light text-muted">3</span>
                                                 </div>
                                             </a>

                                             <div class="collapse" id="filterlist-furniture">
                                                 <ul class="ps-4">
                                                     <li><a href="#" class="d-block py-1 text-muted">Capsule Bloster</a></li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Fluffy Mattress</a>
                                                     </li>
                                                     <li><a href="#" class="d-block py-1 text-muted">Mattresses protectors</a></li>
                                         </li>
                                     </ul>
                                 </div>
                                 </li>


                                 </ul>
                             </div>
                         </div>

                         <div class="card-body border-bottom">
                             <p class="text-muted text-uppercase fs-12 fw-medium mb-4">Minimum - Maximum Price</p>
                             <div class="formCost d-flex gap-2 align-items-center mt-3">
                                 <input class="form-control form-control-sm" type="text" id="minCost" value="0" /> <span class="fw-semibold text-muted">to</span> <input class="form-control form-control-sm" type="text" id="maxCost" value="1000" />
                             </div>
                         </div>

                         <div class="accordion-item">
                             <h2 class="accordion-header" id="flush-headingBrands">
                                 <button class="accordion-button bg-transparent shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseBrands" aria-expanded="true" aria-controls="flush-collapseBrands">
                                     <span class="text-muted text-uppercase fs-12 fw-medium">Brands</span> <span class="badge bg-success rounded-pill align-middle ms-1">2</span>
                                 </button>
                             </h2>

                             <div id="flush-collapseBrands" class="accordion-collapse collapse show" aria-labelledby="flush-headingBrands">
                                 <div class="accordion-body text-body pt-0">
                                     <div class="search-box search-box-sm">
                                         <input type="text" class="form-control bg-light border-0" placeholder="Search Brands...">
                                         <i class="ri-search-line search-icon"></i>
                                     </div>
                                     <div class="d-flex flex-column gap-2 mt-3">
                                         <div class="form-check">
                                             <input class="form-check-input" type="checkbox" value="" id="productBrandRadio5" checked>
                                             <label class="form-check-label" for="productBrandRadio5">Coir on</label>
                                         </div>
                                         <div class="form-check">
                                             <input class="form-check-input" type="checkbox" value="" id="productBrandRadio4">
                                             <label class="form-check-label" for="productBrandRadio4">Tad</label>
                                         </div>
                                         <div class="form-check">
                                             <input class="form-check-input" type="checkbox" value="" id="productBrandRadio3">
                                             <label class="form-check-label" for="productBrandRadio3">Dr.Back</label>
                                         </div>

                                     </div>
                                 </div>
                             </div>
                         </div>
                         <!-- end accordion-item -->

                     </div>
                 </div>
                 <!-- end card -->
             </div>
             <!-- end col -->

             <div class="col-xl-9 col-lg-8">
                 <div>
                     <div class="card">
                         <div class="card-header border-0">
                             <div class="row g-4">

                                 <div class="col-sm">
                                     <div class="d-flex justify-content-sm-end">
                                         <div class="search-box ms-2">
                                             <input type="text" class="form-control" placeholder="Search Products...">
                                             <i class="ri-search-line search-icon"></i>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>

                         <div class="card-header">
                             <div class="row align-items-center">
                                 <div class="col">
                                     <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                                         <li class="nav-item">
                                             <a class="nav-link active fw-semibold" data-bs-toggle="tab" href="#productnav-all" role="tab">
                                                 All <span class="badge badge-soft-danger align-middle rounded-pill ms-1">2</span>
                                             </a>
                                         </li>
                                         <li class="nav-item">
                                             <a class="nav-link fw-semibold" data-bs-toggle="tab" href="#productnav-published" role="tab">
                                                 Published <span class="badge badge-soft-danger align-middle rounded-pill ms-1">2</span>
                                             </a>
                                         </li>
                                         <li class="nav-item">
                                             <a class="nav-link fw-semibold" data-bs-toggle="tab" href="#productnav-draft" role="tab">
                                                 Draft
                                             </a>
                                         </li>
                                     </ul>
                                 </div>
                                 <div class="col-auto">
                                     <div id="selection-element">
                                         <div class="my-n1 d-flex align-items-center text-muted">
                                             Select <div id="select-content" class="text-body fw-semibold px-1"></div> Result <button type="button" class="btn btn-link link-danger p-0 ms-3" data-bs-toggle="modal" data-bs-target="#removeItemModal">Remove</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <!-- end card header -->
                         <div class="card-body">

                             <div class="tab-content text-muted">
                                 <div class="tab-pane active" id="productnav-all" role="tabpanel">
                                     <div id="table-product-list-all" class="table-card gridjs-border-none">
                                         <div role="complementary" class="gridjs gridjs-container" style="width: 100%;">
                                             <div class="gridjs-wrapper" style="height: auto;">
                                                 <table role="grid" class="gridjs-table" style="height: auto;">
                                                     <thead class="gridjs-thead">
                                                         <tr class="gridjs-tr">
                                                             <th data-column-id="productListAllCheckbox" class="gridjs-th text-muted" style="width: 40px;">
                                                                 <div class="gridjs-th-content">#</div>
                                                             </th>
                                                             <th data-column-id="product" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 360px;">
                                                                 <div class="gridjs-th-content">Product</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>
                                                             @if(auth()->user()->role_id==4)
                                                             <th data-column-id="price" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 101px;">
                                                                 <div class="gridjs-th-content">Vendor</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>

                                                             @endif
                                                             <th data-column-id="price" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 101px;">
                                                                 <div class="gridjs-th-content">Price</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>

                                                             <th data-column-id="action" class="gridjs-th text-muted" style="width: 80px;">
                                                                 <div class="gridjs-th-content">Cart</div>
                                                             </th>
                                                         </tr>
                                                     </thead>
                                                     <tbody class="gridjs-tbody">
                                                         <tr class="gridjs-tr">
                                                             <td data-column-id="productListAllCheckbox" class="gridjs-td"><input type="checkbox" class="gridjs-checkbox"></td>
                                                             <td data-column-id="product" class="gridjs-td"><span>
                                                                     <div class="d-flex align-items-center">
                                                                         <div class="flex-shrink-0 me-3">
                                                                             <div class="avatar-sm bg-light rounded p-1"><img src="{{ asset('admin/images/products/img-3.png') }}" alt="" class="img-fluid d-block"></div>
                                                                         </div>
                                                                         <div class="flex-grow-1">
                                                                             <h5 class="fs-14 mb-1"><a href="{{route('seller-product-details')}}" class="text-dark">TADesign Stellar Supple 6-inch Soft Bonnell Spring Mattress</a></h5>
                                                                             <p class="text-muted mb-0">Category : <span class="fw-medium"> Spring Mattress</span></p>
                                                                             <p class="text-muted mb-0">Brand : <span class="fw-medium"> Tad</span></p>
                                                                         </div>
                                                                     </div>
                                                                 </span></td>
                                                             @if(auth()->user()->role_id==4)
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> Bed N COT</td>
                                                             @endif
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> 10,906.00</td>

                                                             <td data-column-id="action" class="gridjs-td"><span>
                                                                     <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class=" ri-shopping-cart-2-line label-icon align-middle fs-16 ms-2"></i>Purchase</button>
                                                                 </span></td>
                                                         </tr>
                                                         <tr class="gridjs-tr">
                                                             <td data-column-id="productListAllCheckbox" class="gridjs-td"><input type="checkbox" class="gridjs-checkbox"></td>
                                                             <td data-column-id="product" class="gridjs-td"><span>
                                                                     <div class="d-flex align-items-center">
                                                                         <div class="flex-shrink-0 me-3">
                                                                             <div class="avatar-sm bg-light rounded p-1"><img src="{{ asset('admin/images/products/img-3.png') }}" alt="" class="img-fluid d-block"></div>
                                                                         </div>
                                                                         <div class="flex-grow-1">
                                                                             <h5 class="fs-14 mb-1"><a href="{{route('seller-product-details')}}" class="text-dark">
                                                                                     Bamboo Latex Pillow</a></h5>
                                                                             <p class="text-muted mb-0">Category : <span class="fw-medium">Bamboo Latex pillow</span></p>
                                                                             <p class="text-muted mb-0">Brand : <span class="fw-medium"> Coir on</span></p>
                                                                         </div>
                                                                     </div>
                                                                 </span></td>
                                                             @if(auth()->user()->role_id==4)
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> Mattress Club</td>
                                                             @endif
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> 10,906.00</td>

                                                             <td data-column-id="action" class="gridjs-td"><span>
                                                                     <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class=" ri-shopping-cart-2-line label-icon align-middle fs-16 ms-2"></i>Purchase</button>
                                                                 </span></td>
                                                         </tr>

                                                     </tbody>
                                                 </table>
                                             </div>
                                             <div class="gridjs-footer">
                                                 <div class="gridjs-pagination">
                                                     <div role="status" aria-live="polite" class="gridjs-summary" title="Page 1 of 2">Showing <b>1</b> to <b>10</b> of <b>12</b> results</div>
                                                     <div class="gridjs-pages"><button tabindex="0" role="button" disabled="" title="Previous" aria-label="Previous" class="">Previous</button><button tabindex="0" role="button" class="gridjs-currentPage" title="Page 1" aria-label="Page 1">1</button><button tabindex="0" role="button" class="" title="Page 2" aria-label="Page 2">2</button><button tabindex="0" role="button" title="Next" aria-label="Next" class="">Next</button></div>
                                                 </div>
                                             </div>
                                             <div id="gridjs-temp" class="gridjs-temp"></div>
                                         </div>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane" id="productnav-published" role="tabpanel">
                                     <div id="table-product-list-published" class="table-card gridjs-border-none">
                                         <div role="complementary" class="gridjs gridjs-container" style="width: 100%;">
                                             <div class="gridjs-wrapper" style="height: auto;">
                                                 <table role="grid" class="gridjs-table" style="height: auto;">
                                                     <thead class="gridjs-thead">
                                                         <tr class="gridjs-tr">
                                                             <th data-column-id="productListPublishedCheckbox" class="gridjs-th text-muted" style="width: 40px;">
                                                                 <div class="gridjs-th-content">#</div>
                                                             </th>
                                                             <th data-column-id="product" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 360px;">
                                                                 <div class="gridjs-th-content">Product</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>
                                                             @if(auth()->user()->role_id==4)
                                                             <th data-column-id="price" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 101px;">
                                                                 <div class="gridjs-th-content">Vendor</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>

                                                             @endif
                                                             <th data-column-id="price" class="gridjs-th gridjs-th-sort text-muted" tabindex="0" style="width: 101px;">
                                                                 <div class="gridjs-th-content">Price</div><button tabindex="-1" aria-label="Sort column ascending" title="Sort column ascending" class="gridjs-sort gridjs-sort-neutral"></button>
                                                             </th>

                                                             <th data-column-id="action" class="gridjs-th text-muted" style="width: 80px;">
                                                                 <div class="gridjs-th-content">Cart</div>
                                                             </th>
                                                         </tr>
                                                     </thead>
                                                     <tbody class="gridjs-tbody">
                                                         <tr class="gridjs-tr">
                                                             <td data-column-id="productListAllCheckbox" class="gridjs-td"><input type="checkbox" class="gridjs-checkbox"></td>
                                                             <td data-column-id="product" class="gridjs-td"><span>
                                                                     <div class="d-flex align-items-center">
                                                                         <div class="flex-shrink-0 me-3">
                                                                             <div class="avatar-sm bg-light rounded p-1"><img src="{{ asset('admin/images/products/img-3.png') }}" alt="" class="img-fluid d-block"></div>
                                                                         </div>
                                                                         <div class="flex-grow-1">
                                                                             <h5 class="fs-14 mb-1"><a href="{{route('seller-product-details')}}" class="text-dark">TADesign Stellar Supple 6-inch Soft Bonnell Spring Mattress</a></h5>
                                                                             <p class="text-muted mb-0">Category : <span class="fw-medium"> Spring Mattress</span></p>
                                                                             <p class="text-muted mb-0">Brand : <span class="fw-medium"> Tad</span></p>
                                                                         </div>
                                                                     </div>
                                                                 </span></td>
                                                             @if(auth()->user()->role_id==4)
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> Bed N COT</td>
                                                             @endif
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> 10,906.00</td>

                                                             <td data-column-id="action" class="gridjs-td"><span>
                                                                     <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class=" ri-shopping-cart-2-line label-icon align-middle fs-16 ms-2"></i>Purchase</button>
                                                                 </span></td>
                                                         </tr>
                                                         <tr class="gridjs-tr">
                                                             <td data-column-id="productListAllCheckbox" class="gridjs-td"><input type="checkbox" class="gridjs-checkbox"></td>
                                                             <td data-column-id="product" class="gridjs-td"><span>
                                                                     <div class="d-flex align-items-center">
                                                                         <div class="flex-shrink-0 me-3">
                                                                             <div class="avatar-sm bg-light rounded p-1"><img src="{{ asset('admin/images/products/img-3.png') }}" alt="" class="img-fluid d-block"></div>
                                                                         </div>
                                                                         <div class="flex-grow-1">
                                                                             <h5 class="fs-14 mb-1"><a href="{{route('seller-product-details')}}" class="text-dark">
                                                                                     Bamboo Latex Pillow</a></h5>
                                                                             <p class="text-muted mb-0">Category : <span class="fw-medium">Bamboo Latex pillow</span></p>
                                                                             <p class="text-muted mb-0">Brand : <span class="fw-medium"> Coir on</span></p>
                                                                         </div>
                                                                     </div>
                                                                 </span></td>
                                                             @if(auth()->user()->role_id==4)
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i>Mattress Club</td>
                                                             @endif
                                                             <td data-column-id="price" class="gridjs-td"><i class="mdi mdi-currency-inr"></i> 10,906.00</td>

                                                             <td data-column-id="action" class="gridjs-td"><span>
                                                                     <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class=" ri-shopping-cart-2-line label-icon align-middle fs-16 ms-2"></i>Purchase</button>
                                                                 </span></td>
                                                         </tr>
                                                     </tbody>
                                                 </table>
                                             </div>
                                             <div class="gridjs-footer">
                                                 <div class="gridjs-pagination">
                                                     <div role="status" aria-live="polite" class="gridjs-summary" title="Page 1 of 1">Showing <b>1</b> to <b>5</b> of <b>5</b> results</div>
                                                     <div class="gridjs-pages"><button tabindex="0" role="button" disabled="" title="Previous" aria-label="Previous" class="">Previous</button><button tabindex="0" role="button" class="gridjs-currentPage" title="Page 1" aria-label="Page 1">1</button><button tabindex="0" role="button" disabled="" title="Next" aria-label="Next" class="">Next</button></div>
                                                 </div>
                                             </div>
                                             <div id="gridjs-temp" class="gridjs-temp"></div>
                                         </div>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane" id="productnav-draft" role="tabpanel">
                                     <div class="py-4 text-center">
                                         <div>
                                             <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:72px;height:72px">
                                             </lord-icon>
                                         </div>

                                         <div class="mt-4">
                                             <h5>Sorry! No Result Found</h5>
                                         </div>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->
                             </div>
                             <!-- end tab content -->

                         </div>
                         <div class="card-body">

                             <div class="tab-content text-muted">
                                 <div class="tab-pane active" id="productnav-all" role="tabpanel">
                                     <div id="table-product-list-all" class="table-card gridjs-border-none">

                                     </div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane" id="productnav-published" role="tabpanel">
                                     <div id="table-product-list-published" class="table-card gridjs-border-none"></div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane" id="productnav-draft" role="tabpanel">
                                     <div class="py-4 text-center">
                                         <div>
                                             <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:72px;height:72px">
                                             </lord-icon>
                                         </div>

                                         <div class="mt-4">
                                             <h5>Sorry! No Result Found</h5>
                                         </div>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->
                             </div>
                             <!-- end tab content -->

                         </div>
                         <!-- end card body -->
                     </div>
                     <!-- end card -->
                 </div>
             </div>
             <!-- end col -->
         </div>
         <!-- end row -->

     </div>
     <!-- container-fluid -->
 </div>
 <!-- End Page-content -->


 @endsection