Filtres du démon JS

app/Http/Controllers/BouteilleController.php

@@ -25,24 +25,43 @@ public function __construct()
     public function index(Request $request)
     {
         $searchTerm = $request->input('query');
+        $rouge = $request->rouge;
+        $blanc = $request->blanc;
+        $rose = $request->rose;
+        $orange = $request->orange;
+        $pays = $request->pays;
+
         // On verifie si on a un terme de recherche
-        if ($searchTerm) {
+        if ($searchTerm || $rouge || $blanc || $rose || $orange || $pays) {
+
+            // On verifie si on a une couleur, une catégorie, un pays ou une région
             $bouteilles = Bouteille::search($searchTerm)
-                ->where('existe_plus', false)
                 ->orderBy('nom', 'asc')
+                ->when($pays, function ($query) use ($pays) {
+                    return $query->where('pays_fr', $pays);
+                })
+                ->when(($rouge || $blanc || $rose || $orange), function ($query) use ($rouge, $blanc, $rose, $orange) {
+                    $colors = array_filter([$rouge, $blanc, $rose, $orange]);
+                    return $query->whereIn('couleur_fr', $colors);
+                })
                 ->paginate(30);
 
             $message = __('messages.add');
             // On ajoute le message afin de l'avoir dans la bonne langue dans la vue
             foreach ($bouteilles as $bouteille) {
                 $bouteille->message = $message;
+                $bouteille->nombreBouteilles = $bouteilles->total();
             }
-
             // On retourne les bouteilles en json
             return response()->json($bouteilles);
+
         } else {
             $celliers = Cellier::where('user_id', auth()->id())->get();
-            return view('bouteilles.index', compact('celliers'));
+            //filter pays by alphabetical order
+            $pays = Bouteille::select('pays_fr')->distinct()->get()->sortBy('pays_fr');
+            $regions = Bouteille::select('region_fr')->distinct()->get()->sortBy('region_fr');
+            $prix = Bouteille::select('prix')->distinct()->get();
+            return view('bouteilles.index', compact('celliers', 'pays', 'regions', 'prix'));
         }
     }
 

public/css/filtres.css

@@ -0,0 +1,62 @@
+.filtres-tris-conteneur {
+    display: flex;
+    gap: 10px;
+    margin: 10px;
+    margin-top: 0;
+    max-width: 100%;
+    max-height: 100px;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+.filtres-tris-conteneur > * {
+    min-width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: 5px;
+    background-color: var(--light-brown);
+    padding-block: 10px;
+}
+.filtres-tris-conteneur > * img {
+    max-width: 40px;
+    max-height: 40px;
+}
+
+.resultats {
+    margin-inline: auto;
+}
+.zone-pillules {
+    margin-inline: 10px;
+    display: flex;
+}
+.zone-pillules > div {
+    display: flex;
+    background-color: rgb(187, 187, 187);
+    color: black;
+    border-radius: 25px;
+    padding: 5px;
+    padding-top: 7px;
+    padding-left: 7px;
+    margin: 5px;
+    font-size: 14px;
+    font-weight: bold;
+    max-width: fit-content;
+}
+.zone-pillules > div p {
+    margin: 0;
+    margin-top: 1px;
+    padding: 0;
+    text-align: center;;
+}
+.zone-pillules > div button {
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    height: 10px;
+}
+.zone-pillules > div img {
+    max-height: 100%;
+}

public/css/hamburger.css

@@ -134,7 +134,7 @@
     height: calc(100% - 100px);
     margin-top: 100px;
     background-color: rgba(0, 0, 0, 0.3);
-    display: none; 
+    display: none;
 }
 
 .show {

public/css/recherche.css

@@ -2,7 +2,7 @@
 .rechercheConteneur {
     position: sticky; /* Set the position to sticky */
     top: 0; /* Stick the element at the top of the container */
-    z-index: 2;
+    z-index: 1;
     margin-inline: 0;
     min-width: 100%;
     display: flex;

public/js/hamburger.js

@@ -5,7 +5,6 @@ window.onload = function() {
 
 
     menuBouton.addEventListener("click", function() {
-        console.log("Allo")
         menuMobile.classList.toggle("is-active");
         overlayGrey.classList.toggle("show");
     })