filter query

app/Http/Controllers/ProductController.php

@@ -8,29 +8,62 @@ use App\Repositories\Catalog\CategoryRepository;
 use App\Repositories\Catalog\GenderRepository;
 use App\Repositories\Catalog\ProductRepository;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Cache;
 
 class ProductController extends Controller
 {
     public function index(Request $request)
     {
-
+        $limit = 20;
         $page = $request->page ?? 1;
 
+        $search = $request->search;
+
         $filter = $request->filter ?? [];
         $sortBy = $request->sort_by ?? 'relevance';
 
+        $price_range_start = $request->price_range_start ?? null;
+        $price_range_end = $request->price_range_end ?? null;
+
         $genderRepository = new GenderRepository;
         $categoryRepository = new CategoryRepository;
 
         $genders = $genderRepository->getList([]);
         $categories = $categoryRepository->getList([]);
 
+
+
+        $user = auth()->user();
+        $userId = $user ? $user->id : 0;
+        [$location_id, $is_consignment] = Cache::remember('employee_user_'.$userId, 60 * 60 * 24, function () use ($user) {
+
+            if ($user == null) {
+                return [10, false];
+            }
+
+            $employee = @$user->employee;
+            $location_id = @$employee->location_id;
+            $location = @$employee->location;
+            $is_consignment = (bool) @$location->is_consignment;
+
+            return [$location_id, $is_consignment];
+
+        });
+
         $productRepository = new ProductRepository;
         $products = $productRepository->getList([
-            'limit' => 20,
+            'limit' => $page * $limit,
-            'sort_by' => $sortBy,
+            'sort' => $sortBy,
+            'category_id' => $filter['category'] ?? null,
+            'gender_id' => $filter['gender'] ?? null,
+            'search' => $search,
+            'location_id' => $location_id,
+            'is_consignment' => $is_consignment,
+            'price_range_start' => $price_range_start,
+            'price_range_end' => $price_range_end,
         ]);
 
+
         if (isset($filter['category']) && $filter['category']){
             $category = StoreCategory::find($filter['category']);
 
@@ -53,7 +86,9 @@ class ProductController extends Controller
         }
 
         $filters = $filter;
-        
+
+        $min_max_price = $productRepository->getMinMaxPrice();
+
 
         return view('shop.catalog-fashion', [
             'filters' => $filters,
@@ -62,6 +97,7 @@ class ProductController extends Controller
 
             'products' => $products,
             'page'  => $page,
+            'min_max_price' => $min_max_price,
         ]);
     }
 

app/Models/Items.php

@@ -2,32 +2,31 @@
 
 namespace App\Models;
 
-use Illuminate\Database\Eloquent\Model;
+use Awobaz\Compoships\Compoships;
 use Illuminate\Database\Eloquent\Builder;
-use Cviebrock\EloquentSluggable\Sluggable;
-use Illuminate\Database\Eloquent\SoftDeletes;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\DB;
-use Awobaz\Compoships\Compoships;
-use Spatie\Activitylog\LogOptions;
-
 use Illuminate\Support\Facades\Storage;
+use Spatie\Activitylog\LogOptions;
 
 class Items extends Model
 {
-    use HasFactory, SoftDeletes;
     use Compoships;
+    use HasFactory, SoftDeletes;
 
     public function getActivitylogOptions(): LogOptions
     {
         return LogOptions::defaults();
-   }
+    }
 
     // protected $with = ['brands', 'categories'];
     protected $table = 'items';
+
     protected $primaryKey = 'id';
+
     protected $guarded = ['id'];
 
     protected $fillable = [
@@ -63,15 +62,15 @@ class Items extends Model
         'group_type',
         'model_type',
 
-        'slug'
+        'slug',
     ];
 
     public function scopeFilter(Builder $query, array $filters)
     {
         $query->when($filters['search'] ?? false, function ($query, $search) {
             return $query
-                ->where('number', 'iLIKE', '%' . $search . '%')
+                ->where('number', 'iLIKE', '%'.$search.'%')
-                ->orWhere('name', 'iLIKE', '%' . $search . '%');
+                ->orWhere('name', 'iLIKE', '%'.$search.'%');
         });
     }
 
@@ -82,39 +81,38 @@ class Items extends Model
 
     public function dimension()
     {
-        return $this->hasOne(ItemDimension::class,"no","number");
+        return $this->hasOne(ItemDimension::class, 'no', 'number');
     }
 
     public function reference()
     {
-        return $this->hasOne(ItemReference::class,'item_id')
+        return $this->hasOne(ItemReference::class, 'item_id')
-                ->where(function($query){
+            ->where(function ($query) {
-                        $query->whereNull("item_variant_id")->orWhere("item_variant_id",0);
+                $query->whereNull('item_variant_id')->orWhere('item_variant_id', 0);
-                });
+            });
     }
 
     public function variants()
     {
-        return $this->hasMany(ItemVariant::class,"item_id")
+        return $this->hasMany(ItemVariant::class, 'item_id')
-            ->leftJoin("stocks","item_variant_id","=","item_variants.id")
+            ->leftJoin('stocks', 'item_variant_id', '=', 'item_variants.id')
-            ->select("item_variants.id","item_variants.code","item_variants.display_name","item_variants.is_publish", DB::raw("SUM(quantity) as stock"),"description","item_variants.item_id")
+            ->select('item_variants.id', 'item_variants.code', 'item_variants.display_name', 'item_variants.is_publish', DB::raw('SUM(quantity) as stock'), 'description', 'item_variants.item_id')
-            ->groupBy("item_variants.id","item_variants.code","description","item_variants.item_id","item_variants.display_name","item_variants.is_publish");
+            ->groupBy('item_variants.id', 'item_variants.code', 'description', 'item_variants.item_id', 'item_variants.display_name', 'item_variants.is_publish');
     }
 
-
     public function images()
     {
-        return $this->hasMany(ItemImage::class,'item_id')->whereNull('item_variant_id');
+        return $this->hasMany(ItemImage::class, 'item_id')->whereNull('item_variant_id');
     }
 
     public function itemVariants()
     {
-        return $this->hasMany(ItemVariant::class,"item_id")->with("reference");
+        return $this->hasMany(ItemVariant::class, 'item_id')->with('reference');
     }
 
     public function publishedItemVariants()
     {
-        return $this->hasMany(ItemVariant::class,"item_id")->with("reference")->where('is_publish', true);
+        return $this->hasMany(ItemVariant::class, 'item_id')->with('reference')->where('is_publish', true);
     }
 
     public function brands()
@@ -147,10 +145,10 @@ class Items extends Model
         $user = auth()->user();
 
         [$location_id, $is_consignment] = Cache::remember(
-            'employee_user_' . optional($user)->id,
+            'employee_user_'.optional($user)->id,
             60 * 60 * 24,
             function () use ($user) {
-                if (!$user) {
+                if (! $user) {
                     return [10, false];
                 }
 
@@ -163,7 +161,6 @@ class Items extends Model
                 ];
             }
         );
-        
 
         // return $this->hasOne(Discount::class,DB::raw("item_reference.item_id"))
         //     ->leftJoin('discount_items', 'discount_items.discount_id', '=', 'discounts.id')
@@ -192,55 +189,56 @@ class Items extends Model
         //         'discount_items.price',
         //     ]);
 
-     return $this->hasOne(DiscountItem::class, 'item_reference_id', 'id')
+        return $this->hasOne(DiscountItem::class, 'item_reference_id', 'id')
-        ->leftJoin('discounts', 'discounts.id', '=', 'discount_items.discount_id')
+            ->leftJoin('discounts', 'discounts.id', '=', 'discount_items.discount_id')
-        ->leftJoin('item_reference', 'item_reference.id', '=', 'discount_items.item_reference_id')
+            ->leftJoin('item_reference', 'item_reference.id', '=', 'discount_items.item_reference_id')
-        ->where('discounts.type', 'discount')
+            ->where('discounts.type', 'discount')
-        ->where(function ($q) {
+            ->where(function ($q) {
-            $q->whereNull('discounts.valid_at')
+                $q->whereNull('discounts.valid_at')
-            ->orWhere('discounts.valid_at', '<=', now());
+                    ->orWhere('discounts.valid_at', '<=', now());
-        })
+            })
-        ->where(function ($q) {
+            ->where(function ($q) {
-            $q->whereNull('discounts.expired_at')
+                $q->whereNull('discounts.expired_at')
-            ->orWhere('discounts.expired_at', '>=', now());
+                    ->orWhere('discounts.expired_at', '>=', now());
-        })
+            })
-        ->where(function ($q) use ($location_id, $is_consignment) {
+            ->where(function ($q) use ($location_id, $is_consignment) {
-            if (!$is_consignment) {
+                if (! $is_consignment) {
-                $q->whereNull('discounts.location_id');
+                    $q->whereNull('discounts.location_id');
-            }
+                }
 
-            if ($location_id) {
+                if ($location_id) {
-                $q->orWhere('discounts.location_id', $location_id);
+                    $q->orWhere('discounts.location_id', $location_id);
-            }
+                }
-        })
+            })
-        ->orderByDesc('discounts.created_at')
+            ->orderByDesc('discounts.created_at')
-        ->select([
+            ->select([
-            'item_reference.item_id',
+                'item_reference.item_id',
-            'discount_items.price',
+                'discount_items.price',
-        ]);
+            ]);
 
     }
 
-
     public function price()
     {
 
         $user = auth()->user();
         $userId = $user ? $user->id : 0;
-        list($location_id, $is_consignment) = Cache::remember("employee_user_".$userId, 60 * 60 * 24, function() use ($user){
+        [$location_id, $is_consignment] = Cache::remember('employee_user_'.$userId, 60 * 60 * 24, function () use ($user) {
 
-    if ($user == null)
+            if ($user == null) {
-               return [10, false];
+                return [10, false];
+            }
 
             $employee = @$user->employee;
             $location_id = @$employee->location_id;
             $location = @$employee->location;
-            $is_consignment = (boolean) @$location->is_consignment;
+            $is_consignment = (bool) @$location->is_consignment;
+
             return [$location_id, $is_consignment];
 
         });
 
-       return $this->hasOne(Discount::class, 'id', 'item_reference_id')
+        return $this->hasOne(Discount::class, 'id', 'item_reference_id')
             ->leftJoin('discount_items', 'discount_items.discount_id', '=', 'discounts.id')
             ->where('discounts.type', 'price')
             ->where(function ($query) {
@@ -252,7 +250,7 @@ class Items extends Model
                     ->orWhereNull('expired_at');
             })
             ->where(function ($query) use ($location_id, $is_consignment) {
-                if (!$is_consignment) {
+                if (! $is_consignment) {
                     $query->whereNull('discounts.location_id');
                 }
 
@@ -269,13 +267,13 @@ class Items extends Model
 
     public function stock()
     {
-        return $this->hasOne(Stock::class,"item_id")
+        return $this->hasOne(Stock::class, 'item_id')
-            ->leftJoin("locations","locations.id","=","location_id")
+            ->leftJoin('locations', 'locations.id', '=', 'location_id')
-            ->whereNotNull("locations.display_name")
+            ->whereNotNull('locations.display_name')
-            ->where("locations.display_name","<>","")
+            ->where('locations.display_name', '<>', '')
-            ->where("quantity",">","0")
+            ->where('quantity', '>', '0')
-            ->groupBy("item_id")
+            ->groupBy('item_id')
-            ->select("item_id",DB::raw("SUM(quantity) as quantity"));
+            ->select('item_id', DB::raw('SUM(quantity) as quantity'));
     }
 
     public function attributes()
@@ -287,28 +285,23 @@ class Items extends Model
     {
         $image = $this->images->first()->filename ?? null;
 
-
+        if (str_contains($image, 'http')) {
-
-        if (str_contains($image,"http")) {
             return $image;
         }
 
         return $image ? Storage::disk('wms')->url($image) : null;
     }
 
-
     public function getImageUrlsAttribute()
     {
         $images = $this->images ?? [];
 
-
         $imgs = [];
 
-
         foreach ($images as $img) {
             $image = $img->filename;
 
-            if (str_contains($image,"http")) {
+            if (str_contains($image, 'http')) {
                 $imgs[] = $image;
             } else {
                 $imgs[] = $image ? Storage::disk('wms')->url($image) : null;
@@ -318,15 +311,14 @@ class Items extends Model
         return $imgs;
     }
 
-
     public function conversion_value()
     {
         $convertion = 1;
-        if (($this->display_unit != $this->unit) and ($this->display_unit)){
+        if (($this->display_unit != $this->unit) and ($this->display_unit)) {
-           $convertions =  DB::select("select to_qty / from_qty as conv
+            $convertions = DB::select('select to_qty / from_qty as conv
-           from item_convertions where from_unit = ? and to_unit =  ?",
+           from item_convertions where from_unit = ? and to_unit =  ?',
-           [$this->display_unit, $this->unit] );
+                [$this->display_unit, $this->unit]);
-           $convertion = max((float) @$convertions[0]->conv,1);
+            $convertion = max((float) @$convertions[0]->conv, 1);
         }
 
         return $convertion;
@@ -346,13 +338,13 @@ class Items extends Model
         }
     }
 
-
     public function getDisplayDiscountPriceAttribute()
     {
         try {
             $convertion = $this->conversion_value();
 
             $discountPrice = @$this->discount->price ?? 0;
+
             return (float) $discountPrice * $convertion;
         } catch (\Exception $e) {
             return 0;

app/Repositories/Catalog/ProductRepository.php

@@ -2,6 +2,7 @@
 
 namespace App\Repositories\Catalog;
 
+use App\Models\DiscountItem;
 use App\Models\Items;
 use App\Models\StoreCategoryMap;
 use Illuminate\Support\Facades\DB;
@@ -18,6 +19,67 @@ class ProductRepository
         $brand_id = @$params["brand_id"];
         $gender_id = @$params["gender_id"];
         $limit = @$params["limit"];
+
+        $location_id = @$params["location_id"];
+        $is_consignment = @$params["is_consignment"];
+
+        $price_range_start = @$params["price_range_start"];
+        $price_range_end = @$params["price_range_end"];
+
+
+        $sorting_ids = [];
+        if ($sort == "price_low_to_high" || $sort == "price_high_to_low"){
+            $sorting_ids = DiscountItem::whereHas('discount', function($query) use ($location_id, $is_consignment) {
+                $query->where('type', 'price')
+                    ->where(function ($query) {
+                        $query->where('valid_at', '<=', now())
+                            ->orWhereNull('valid_at');
+                    })
+                    ->where(function ($query) {
+                        $query->where('expired_at', '>', now())
+                            ->orWhereNull('expired_at');
+                    })
+                    ->where(function ($query) use ($location_id, $is_consignment) {
+                        if (! $is_consignment) {
+                            $query->whereNull('discounts.location_id');
+                        }
+
+                        if ($location_id) {
+                            $query->orWhere('discounts.location_id', $location_id);
+                        }
+                    });
+            })
+            ->orderBy('discount_items.price', $sort == "price_low_to_high" ? 'asc' : 'desc')
+            ->pluck('item_reference_id')->toArray();
+        }
+
+        $where_ids = [];
+        if ($price_range_start && $price_range_end) {
+            $where_ids = DiscountItem::whereHas('discount', function($query) use ($location_id, $is_consignment, $price_range_start, $price_range_end) {
+                $query->where('type', 'price')
+                    ->where(function ($query) {
+                        $query->where('valid_at', '<=', now())
+                            ->orWhereNull('valid_at');
+                    })
+                    ->where(function ($query) {
+                        $query->where('expired_at', '>', now())
+                            ->orWhereNull('expired_at');
+                    })
+                    ->where(function ($query) use ($location_id, $is_consignment) {
+                        if (! $is_consignment) {
+                            $query->whereNull('discounts.location_id');
+                        }
+
+                        if ($location_id) {
+                            $query->orWhere('discounts.location_id', $location_id);
+                        }
+                    })
+                    ->where('discount_items.price', '>=', $price_range_start)
+                    ->where('discount_items.price', '<=', $price_range_end);
+            })
+            ->pluck('item_reference_id')->toArray();
+        }
+
         $builder = Items::select('items.*','percent')
             ->leftJoin('item_dimension', 'item_dimension.no', 'items.number')
            ->leftJoin(DB::raw("(select distinct on (item_id) item_id, percent, discounts.created_at,
@@ -30,7 +92,7 @@ class ProductRepository
                 ( discounts.valid_at is null or discounts.expired_at >= now())
             order by item_id, discounts.created_at desc
                 ) as d"),"d.item_id","=","items.id")
-            ->when(true, function($query) use ($event, $sort){
+            ->when(true, function($query) use ($event, $sort,$sorting_ids){
             if ($event){
                 $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
 
@@ -41,11 +103,12 @@ class ProductRepository
             $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
             } */
 
-            if ($sort == "new"){
+            if (!empty($sorting_ids)) {
-            \Log::info($sort);
+                $ids = implode(',', $sorting_ids);
-
+                $query->orderByRaw("array_position(ARRAY[$ids], items.id)");
+            }else if ($sort == "new"){
                 $query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
-            }else{
+            } else {
                 $query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
             }
 
@@ -92,9 +155,21 @@ class ProductRepository
             });
         }
 
+      
         return $builder->paginate($limit);
     }
 
+
+    public function getMinMaxPrice()
+    {
+        return [
+            'min' => DiscountItem::min('price'),
+            'max' => DiscountItem::max('price'),
+        ];
+    }
+   
+
+
     public function show($slug)
     {
         $product = Items::where('slug', $slug)->first();

lang/en/header.php

@@ -0,0 +1,4 @@
+<?php
+return [
+    'categories' => 'Categories',
+];

lang/id/header.php

@@ -0,0 +1,4 @@
+<?php
+return [
+    'categories' => 'Kategori',
+];

resources/views/components/layout/header.blade.php

@@ -1,145 +1,364 @@
-<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
+<div>
-      <div class="container py-2 py-lg-3">
-        <div class="d-flex align-items-center gap-3">
 
-          <!-- Mobile offcanvas menu toggler (Hamburger) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
-          <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+        aria-labelledby="shoppingCartLabel" style="width: 500px">
-            <span class="navbar-toggler-icon"></span>
-          </button>
 
-          <!-- Country selector visible on screens > 768px wide (md breakpoint) -->
+        <!-- Header -->
-          <x-language-selector />
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
-
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
-          <!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
-          <x-location-selector />
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
         </div>
 
-        <!-- Navbar brand (Logo) -->
+        <!-- Items -->
-        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
-        
-          <img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;"/>
-            <img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;"/>
-        </a>
 
-        <!-- Button group -->
+            <!-- Item -->
-        <div class="d-flex align-items-center">
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden
+                            laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
 
-          <!-- Navbar stuck nav toggler -->
+            <!-- Item -->
-          <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
+            <div class="d-flex align-items-center">
-            <span class="navbar-toggler-icon"></span>
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-          </button>
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
 
-          <!-- Theme switcher (light/dark/auto) -->
+            <!-- Item -->
-          <div class="dropdown">
+            <div class="d-flex align-items-center">
-            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-              <span class="theme-icon-active d-flex animate-target">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
-                <i class="ci-sun"></i>
+                        alt="Thumbnail">
-              </span>
+                </a>
-            </button>
+                <div class="w-100 min-w-0 ps-3">
-            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                    <h5 class="d-flex animate-underline mb-2">
-              <li>
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
-                  <span class="theme-icon d-flex fs-base me-2">
+                    </h5>
-                    <i class="ci-sun"></i>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del>
-                  </span>
+                    </div>
-                  <span class="theme-label">Light</span>
+                    <div class="d-flex align-items-center justify-content-between">
-                  <i class="item-active-indicator ci-check ms-auto"></i>
+                        <div class="count-input rounded-2">
-                </button>
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-              </li>
+                                aria-label="Decrement quantity">
-              <li>
+                                <i class="ci-minus"></i>
-                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
+                            </button>
-                  <span class="theme-icon d-flex fs-base me-2">
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                    <i class="ci-moon"></i>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                  </span>
+                                aria-label="Increment quantity">
-                  <span class="theme-label">Dark</span>
+                                <i class="ci-plus"></i>
-                  <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
-                </button>
+                        </div>
-              </li>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-              <li>
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
+                            aria-label="Remove from cart"></button>
-                  <span class="theme-icon d-flex fs-base me-2">
+                    </div>
-                    <i class="ci-auto"></i>
+                </div>
-                  </span>
+            </div>
-                  <span class="theme-label">Auto</span>
-                  <i class="item-active-indicator ci-check ms-auto"></i>
-                </button>
-              </li>
-            </ul>
-          </div>
-
-          <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
-          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
-            <i class="ci-search animate-target"></i>
-          </button>
-
-          <!-- Account button visible on screens > 768px wide (md breakpoint) -->
-          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
-            <i class="ci-user animate-target"></i>
-            <span class="visually-hidden">Account</span>
-          </a>
-
-          <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
-          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
-            <i class="ci-heart animate-target"></i>
-            <span class="visually-hidden">Wishlist</span>
-          </a>
-
-          <!-- Cart button -->
-          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
-            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
-            <i class="ci-shopping-bag animate-target me-1"></i>
-          </button>
         </div>
-      </div>
 
-      <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <!-- Footer -->
-      <div class="collapse navbar-stuck-hide" id="stuckNav">
+        <div class="offcanvas-header flex-column align-items-start">
-        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
-          <div class="offcanvas-header py-3">
+                <span class="text-light-emphasis">Subtotal:</span>
-            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                <span class="h6 mb-0">$197.00</span>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
-          </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
 
-          <!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
-          <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
-            <x-language-selector-sidebar />
+            <form class="container d-flex align-items-center">
-            <x-location-selector-sidebar />
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
-          </div>
+                    placeholder="Search the products" data-autofocus="offcanvas">
-          <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas"
-            <div class="container pb-lg-2 px-0 px-lg-3">
+                    aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
 
-              <div class="position-relative d-lg-flex align-items-center justify-content-between">
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1"
+                style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
+        data-sticky-navbar='{"offset": 500}'>
+        <div class="container py-2 py-lg-3">
+            <div class="d-flex align-items-center gap-3">
 
-                <!-- Categories mega menu -->
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
-                <x-layout.navbar-category />
+                <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
-                
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
-
+                    <span class="navbar-toggler-icon"></span>
-                <!-- Navbar nav -->
-                <x-layout.navbar-menu />
-
-                <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
-                <button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">
-                  <i class="ci-search fs-base ms-n1 me-2"></i>
-                  <span class="text-body-tertiary fw-normal">Search</span>
                 </button>
-              </div>
-            </div>
-          </div>
 
-          <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <!-- Country selector visible on screens > 768px wide (md breakpoint) -->
-          <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                <x-language-selector />
-            <div class="nav nav-justified w-100">
+
-              <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                <!-- LOcation selector visible on screens > 768px wide (md breakpoint) -->
-                <i class="ci-user fs-lg opacity-60 me-2"></i>
+                <x-location-selector />
-                Account
+
-              </a>
-              <a class="nav-link" href="#!">
-                <i class="ci-heart fs-lg opacity-60 me-2"></i>
-                Wishlist
-              </a>
             </div>
-          </div>
+
-        </nav>
+            <!-- Navbar brand (Logo) -->
-      </div>
+            <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">
+
+                <img src="{{ asset('logo/logo-colored.png') }}" class="d-none d-lg-block" style="height:32px;" />
+                <img src="{{ asset('logo/logo-app.png') }}" class="d-lg-none" style="height:42px;" />
+            </a>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Navbar stuck nav toggler -->
+                <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
+                    data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
+                    aria-label="Toggle navigation in navbar stuck state">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                    href="#!">
+                    <i class="ci-heart animate-target"></i>
+                    <span class="visually-hidden">Wishlist</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span
+                        class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <div class="collapse navbar-stuck-hide" id="stuckNav">
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                        aria-label="Close"></button>
+                </div>
+
+                <!-- Country and City selects visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+                    <x-language-selector-sidebar />
+                    <x-location-selector-sidebar />
+                </div>
+                <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                    <div class="container pb-lg-2 px-0 px-lg-3">
+
+                        <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                            <!-- Categories mega menu -->
+                            <x-layout.navbar-category />
+
+
+                            <!-- Navbar nav -->
+                            <x-layout.navbar-menu />
+
+                            <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                            <button type="button"
+                                class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
+                                style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
+                                aria-controls="searchBox">
+                                <i class="ci-search fs-base ms-n1 me-2"></i>
+                                <span class="text-body-tertiary fw-normal">Search</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                    <div class="nav nav-justified w-100">
+                        <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user fs-lg opacity-60 me-2"></i>
+                            Account
+                        </a>
+                        <a class="nav-link" href="#!">
+                            <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                            Wishlist
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
     </header>
+</div>

resources/views/components/layout/navbar-category.blade.php

@@ -3,7 +3,7 @@
         <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown"
             data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
             <i class="ci-menu fs-lg me-2"></i>
-            <span class="animate-target">Categories</span>
+            <span class="animate-target">{{ __('header.categories') }}</span>
         </button>
         <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
 

resources/views/home/fashion-v1.blade.php

@@ -1,193 +1,7 @@
 @extends('layouts.landing', ['title' => 'AsiaGolf Store'])
 
 @section('content')
-    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+    
-        style="width: 500px">
-
-        <!-- Header -->
-        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
-                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </div>
-            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
-                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
-            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
-                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
-                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
-                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
-            </div>
-        </div>
-
-        <!-- Items -->
-        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$74.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$27.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                            aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="offcanvas-header flex-column align-items-start">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
-                <span class="text-light-emphasis">Subtotal:</span>
-                <span class="h6 mb-0">$197.00</span>
-            </div>
-            <div class="d-flex w-100 gap-3">
-                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
-                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
-            </div>
-        </div>
-    </div>
-
-    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
-        <div class="offcanvas-header border-bottom p-0 py-lg-1">
-            <form class="container d-flex align-items-center">
-                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
-                    placeholder="Search the products" data-autofocus="offcanvas">
-                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </form>
-        </div>
-        <div class="offcanvas-body px-0">
-            <div class="container text-center">
-                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
-                    viewBox="0 0 512 512" fill="currentColor">
-                    <path
-                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
-                </svg>
-                <h6 class="mb-2">Your search results will appear here</h6>
-                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
-        <div class="container position-relative d-flex min-w-0">
-            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
-                <div class="nav me-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
-                        <i class="ci-chevron-left"></i>
-                    </button>
-                </div>
-                <div class="swiper fs-sm text-white"
-                    data-swiper='{
-            "spaceBetween": 24,
-            "loop": true,
-            "autoplay": {
-              "delay": 5000,
-              "disableOnInteraction": false
-            },
-            "navigation": {
-              "prevEl": "#topbarPrev",
-              "nextEl": "#topbarNext"
-            }
-          }'>
-                    <div class="swiper-wrapper min-w-0">
-                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
-                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
-                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
-                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
-                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
-                                class="d-none d-sm-inline">We've got you covered!</span></div>
-                    </div>
-                </div>
-                <div class="nav ms-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
-                        <i class="ci-chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
-                data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
-    </div>
 
     <x-layout.header />
 

resources/views/shop/catalog-fashion.blade.php

@@ -1,193 +1,7 @@
 @extends('layouts.landing', ['title' => 'Fashion Store - Catalog'])
 
 @section('content')
-    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+    
-        style="width: 500px">
-
-        <!-- Header -->
-        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
-                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </div>
-            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
-                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
-            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
-                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
-                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
-                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
-            </div>
-        </div>
-
-        <!-- Items -->
-        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$74.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$27.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
-                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
-                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                            aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="offcanvas-header flex-column align-items-start">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
-                <span class="text-light-emphasis">Subtotal:</span>
-                <span class="h6 mb-0">$197.00</span>
-            </div>
-            <div class="d-flex w-100 gap-3">
-                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
-                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
-            </div>
-        </div>
-    </div>
-
-    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
-        <div class="offcanvas-header border-bottom p-0 py-lg-1">
-            <form class="container d-flex align-items-center">
-                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
-                    placeholder="Search the products" data-autofocus="offcanvas">
-                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </form>
-        </div>
-        <div class="offcanvas-body px-0">
-            <div class="container text-center">
-                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
-                    viewBox="0 0 512 512" fill="currentColor">
-                    <path
-                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
-                </svg>
-                <h6 class="mb-2">Your search results will appear here</h6>
-                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
-        <div class="container position-relative d-flex min-w-0">
-            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
-                <div class="nav me-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
-                        <i class="ci-chevron-left"></i>
-                    </button>
-                </div>
-                <div class="swiper fs-sm text-white"
-                    data-swiper='{
-            "spaceBetween": 24,
-            "loop": true,
-            "autoplay": {
-              "delay": 5000,
-              "disableOnInteraction": false
-            },
-            "navigation": {
-              "prevEl": "#topbarPrev",
-              "nextEl": "#topbarNext"
-            }
-          }'>
-                    <div class="swiper-wrapper min-w-0">
-                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
-                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
-                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
-                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
-                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
-                                class="d-none d-sm-inline">We've got you covered!</span></div>
-                    </div>
-                </div>
-                <div class="nav ms-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
-                        <i class="ci-chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
-                data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
-    </div>
 
     <x-layout.header />
 
@@ -310,21 +124,19 @@
                                         aria-labelledby="headingPrice">
                                         <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
                                             <div class="range-slider"
-                                                data-range-slider='{"startMin": 40, "startMax": 150, "min": 0, "max": 200, "step": 1, "tooltipPrefix": "$"}'
+                                                data-range-slider='{"startMin": 0, "startMax": {{ $min_max_price['max'] }}, "min": 0, "max": {{ $min_max_price['max'] }}, "step": 1000000, "tooltipPrefix": "Rp"}'
                                                 aria-labelledby="headingPrice">
                                                 <div class="range-slider-ui"></div>
                                                 <div class="d-flex align-items-center">
                                                     <div class="position-relative w-50">
-                                                        <i
+                                                        
-                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control"
-                                                        <input type="number" class="form-control form-icon-start"
                                                             min="0" data-range-slider-min>
                                                     </div>
                                                     <i class="ci-minus text-body-emphasis mx-2"></i>
                                                     <div class="position-relative w-50">
-                                                        <i
+                                                      
-                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control"
-                                                        <input type="number" class="form-control form-icon-start"
                                                             min="0" data-range-slider-max>
                                                     </div>
                                                 </div>
@@ -677,7 +489,7 @@
                                     <option value="popularity" {{ request('sort_by') == 'popularity' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_popularity') }}</option>
                                     <option value="price_low_to_high" {{ request('sort_by') == 'price_low_to_high' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_low_to_high') }}</option>
                                     <option value="price_high_to_low" {{ request('sort_by') == 'price_high_to_low' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_high_to_low') }}</option>
-                                    <option value="newest_arrivals" {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_newest_arrivals') }}</option>
+                                    <option value="new" {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_newest_arrivals') }}</option>
                                 </select>
                             </div>
                         </div>

resources/views/shop/product-fashion.blade.php

@@ -403,195 +403,7 @@
         </div>
     </div>
 
-    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
+    
-        aria-labelledby="shoppingCartLabel" style="width: 500px">
-
-        <!-- Header -->
-        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
-                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </div>
-            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
-                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
-            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
-                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
-                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
-                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
-            </div>
-        </div>
-
-        <!-- Items -->
-        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="#!">
-                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Leather sneakers
-                            with golden laces</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$74.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                            aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="#!">
-                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Classic cotton
-                            men's shirt</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$27.00</div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                            aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Item -->
-            <div class="d-flex align-items-center">
-                <a class="flex-shrink-0" href="#!">
-                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
-                        alt="Thumbnail">
-                </a>
-                <div class="w-100 min-w-0 ps-3">
-                    <h5 class="d-flex animate-underline mb-2">
-                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Polarized
-                            sunglasses for men</a>
-                    </h5>
-                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="count-input rounded-2">
-                            <button type="button" class="btn btn-icon btn-sm" data-decrement
-                                aria-label="Decrement quantity">
-                                <i class="ci-minus"></i>
-                            </button>
-                            <input type="number" class="form-control form-control-sm" value="1" readonly>
-                            <button type="button" class="btn btn-icon btn-sm" data-increment
-                                aria-label="Increment quantity">
-                                <i class="ci-plus"></i>
-                            </button>
-                        </div>
-                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
-                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
-                            aria-label="Remove from cart"></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="offcanvas-header flex-column align-items-start">
-            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
-                <span class="text-light-emphasis">Subtotal:</span>
-                <span class="h6 mb-0">$197.00</span>
-            </div>
-            <div class="d-flex w-100 gap-3">
-                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
-                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
-            </div>
-        </div>
-    </div>
-
-    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
-        <div class="offcanvas-header border-bottom p-0 py-lg-1">
-            <form class="container d-flex align-items-center">
-                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
-                    placeholder="Search the products" data-autofocus="offcanvas">
-                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            </form>
-        </div>
-        <div class="offcanvas-body px-0">
-            <div class="container text-center">
-                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
-                    viewBox="0 0 512 512" fill="currentColor">
-                    <path
-                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
-                </svg>
-                <h6 class="mb-2">Your search results will appear here</h6>
-                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
-        <div class="container position-relative d-flex min-w-0">
-            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
-                <div class="nav me-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
-                        <i class="ci-chevron-left"></i>
-                    </button>
-                </div>
-                <div class="swiper fs-sm text-white"
-                    data-swiper='{
-            "spaceBetween": 24,
-            "loop": true,
-            "autoplay": {
-              "delay": 5000,
-              "disableOnInteraction": false
-            },
-            "navigation": {
-              "prevEl": "#topbarPrev",
-              "nextEl": "#topbarNext"
-            }
-          }'>
-                    <div class="swiper-wrapper min-w-0">
-                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
-                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
-                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
-                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
-                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
-                                class="d-none d-sm-inline">We've got you covered!</span></div>
-                    </div>
-                </div>
-                <div class="nav ms-2">
-                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
-                        <i class="ci-chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
-                data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
-    </div>
 
     <x-layout.header />