From dda17846902559ffbc0bf0bf34f51aa98c4f1ecc Mon Sep 17 00:00:00 2001
From: Femi Novia Lina <77434812+FemiNoviaLina@users.noreply.github.com>
Date: Sun, 15 May 2022 13:42:03 +0700
Subject: [PATCH] fix and complete find vehicles

---
 .../Auth/AuthenticatedSessionController.php   |   2 +-
 .../Auth/RegisteredUserController.php         |   2 +-
 app/Http/Controllers/RentController.php       |  41 +-
 config/filesystems.php                        |   2 +-
 .../2022_05_10_091301_create_brands_table.php |  32 -
 ...022_05_10_094616_create_vehicles_table.php |   2 +-
 database/seeders/BrandSeeder.php              |  28 -
 database/seeders/VehicleSeeder.php            |  64 ++
 public/css/app.css                            | 621 +++++++++---------
 resources/views/components/navbar.blade.php   |   4 +-
 resources/views/find-vehicles.blade.php       |  17 +-
 resources/views/guide.blade.php               |   2 +-
 resources/views/order-history.blade.php       |   7 +
 resources/views/rent-form.blade.php           |  34 +-
 resources/views/test-up.blade.php             |   5 +
 resources/views/test-view.blade.php           |   1 +
 resources/views/vehicles-list.blade.php       | 145 ++--
 routes/web.php                                |  31 +-
 18 files changed, 556 insertions(+), 484 deletions(-)
 delete mode 100644 database/migrations/2022_05_10_091301_create_brands_table.php
 delete mode 100644 database/seeders/BrandSeeder.php
 create mode 100644 database/seeders/VehicleSeeder.php
 create mode 100644 resources/views/order-history.blade.php
 create mode 100644 resources/views/test-up.blade.php
 create mode 100644 resources/views/test-view.blade.php

diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index 43617b1..5b5a05a 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -39,7 +39,7 @@ public function store(LoginRequest $request)
             return redirect(route('admin_dashboard'));
         }
         
-        return redirect()->intended(RouteServiceProvider::HOME);
+        return back()->withInput();
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index 487fedb..31cd728 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -49,6 +49,6 @@ public function store(Request $request)
 
         Auth::login($user);
 
-        return redirect(RouteServiceProvider::HOME);
+        return redirect('update-profile');
     }
 }
diff --git a/app/Http/Controllers/RentController.php b/app/Http/Controllers/RentController.php
index b02b55d..a14f2b1 100644
--- a/app/Http/Controllers/RentController.php
+++ b/app/Http/Controllers/RentController.php
@@ -20,16 +20,30 @@ public function getFindCar()
     public function findVehicles() {
         $request = request()->input();
         $type = $request['type'];
+        $pickup_date = $request['pickup_date'];
+        $dropoff_date = $request['dropoff_date'];
+        $transmission = isset($request['transmission']) ? $request['transmission'] : 'All';
+        $brand = isset($request['brand']) ? $request['brand'] : 'All';
 
-        $vehicles = Vehicle::join('orders', 'vehicles.id', '=', 'orders.vehicle_id')
-        ->select("vehicles.id", "vehicles.name", "vehicles.brand_id", "vehicles.transmission", "vehicles.cc", "vehicles.price", "vehicles.type", "vehicles.photo", "vehicles.year")
-        ->where("orders.dropoff_date", "<", $request['pickup_date'])
-        ->orWhere("orders.pickup_date", ">", $request['dropoff_date'])
+        $vehicles = Vehicle::leftJoin('orders', 'vehicles.id', '=', 'orders.vehicle_id')
+        ->select("vehicles.id", "vehicles.name", "vehicles.brand", "vehicles.transmission", "vehicles.cc", "vehicles.fuel", "vehicles.price", "vehicles.type", "vehicles.photo", "vehicles.year")
+        ->where("type", "=", $type)
+        ->whereNull("orders.pickup_date")
+        ->when($pickup_date && $dropoff_date, function($query) use ($pickup_date, $dropoff_date) {
+                $query->orWhere("orders.dropoff_date", "<", $pickup_date)
+                    ->orWhere("orders.pickup_date", ">", $dropoff_date);
+        })
+        ->when($brand != 'All', function($query, $brand) {
+            $query->where('vehicles.brand', $brand);
+        }) 
+        ->when($transmission != 'All', function($query, $transmission) {
+            $query->where('vehicles.transmission', $transmission);
+        }) 
         ->groupBy("vehicles.id")
         ->having('vehicles.available_unit', '>', DB::raw('count(orders.id)'))
         ->get();
 
-        return redirect()->route('rent-'. strtolower($type). 's', ['vehicles' => $vehicles]);
+        return redirect()->route('rent-'. strtolower($type). 's')->with(['vehicles' => $vehicles, 'pickup_date' => $pickup_date, 'dropoff_date' => $dropoff_date]);
     }
 
     public function getFindMotor()
@@ -37,23 +51,24 @@ public function getFindMotor()
         return view('find-vehicles', ['type' => 'Motor']);
     }
 
-    public function getRentCarForm()
+    public function getRentForm($id)
     {
-        return view('rent-form');
-    }
+        $vehicle = Vehicle::find($id);
 
-    public function getRentMotorForm()
-    {
-        return view('rent-form');
+        return view('rent-form', ['vehicle' => $vehicle]);
     }
 
     public function getRentCars()
     {
-        return view('vehicles-list', ['vehicles' => session('vehicles'), 'type' => 'car']);
+        if(!session('vehicles')) return redirect()->route(('find-car'));
+
+        return view('vehicles-list', ['vehicles' => session('vehicles'), 'pickup_date' => session('pickup_date'), 'dropoff_date' => session('dropoff_date'), 'type' => 'Car']);
     }
 
     public function getRentMotors()
     {
-        return view('vehicles-list', ['vehicles' => session('vehicles'), 'type' => 'motor']);
+        if(session('vehicles') == null) return redirect()->route(('find-motor'));
+
+        return view('vehicles-list', ['vehicles' => session('vehicles'), 'pickup_date' => session('pickup_date'), 'dropoff_date' => session('dropoff_date'), 'type' => 'Motor']);
     }
 }
diff --git a/config/filesystems.php b/config/filesystems.php
index e9d9dbd..3e3e6e4 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -70,7 +70,7 @@
     */
 
     'links' => [
-        public_path('storage') => storage_path('app/public'),
+        public_path('storage') => storage_path('app/public')
     ],
 
 ];
diff --git a/database/migrations/2022_05_10_091301_create_brands_table.php b/database/migrations/2022_05_10_091301_create_brands_table.php
deleted file mode 100644
index 3830fcd..0000000
--- a/database/migrations/2022_05_10_091301_create_brands_table.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('brands', function (Blueprint $table) {
-            $table->id();
-            $table->string('name');
-            $table->timestamps();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('brands');
-    }
-};
diff --git a/database/migrations/2022_05_10_094616_create_vehicles_table.php b/database/migrations/2022_05_10_094616_create_vehicles_table.php
index eb9d0c9..f8481ef 100644
--- a/database/migrations/2022_05_10_094616_create_vehicles_table.php
+++ b/database/migrations/2022_05_10_094616_create_vehicles_table.php
@@ -16,7 +16,7 @@ public function up()
         Schema::create('vehicles', function (Blueprint $table) {
             $table->id();
             $table->string('name');
-            $table->integer('brand_id')->references('id')->on('brands');
+            $table->string('brand');
             $table->string('transmission');
             $table->string('fuel');
             $table->integer('cc')->unsigned();
diff --git a/database/seeders/BrandSeeder.php b/database/seeders/BrandSeeder.php
deleted file mode 100644
index 564335b..0000000
--- a/database/seeders/BrandSeeder.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-
-namespace Database\Seeders;
-
-use Illuminate\Database\Console\Seeds\WithoutModelEvents;
-use Illuminate\Database\Seeder;
-
-class BrandSeeder extends Seeder
-{
-    /**
-     * Run the database seeds.
-     *
-     * @return void
-     */
-    public function run()
-    {
-        $data = [
-            [ 'name' => 'Honda' ],
-            [ 'name' => 'Suzuki' ],
-            [ 'name' => 'Toyota' ],
-            [ 'name' => 'Yamaha' ],
-            [ 'name' => 'Daihatsu' ],
-            [ 'name' => 'Nissan' ]
-        ];
-
-        \DB::table('brands')->insert($data);
-    }
-}
diff --git a/database/seeders/VehicleSeeder.php b/database/seeders/VehicleSeeder.php
new file mode 100644
index 0000000..c12cf78
--- /dev/null
+++ b/database/seeders/VehicleSeeder.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class VehicleSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $data = [
+            [
+                'name' => 'Honda Scoopy Smart Key',
+                'brand' => 'Honda',
+                'transmission' => 'Automatic',
+                'fuel' => 'Pertamax',
+                'cc' => 110,
+                'price' => 105000,
+                'type' => 'motor',
+                'photo' => 'Honda Scoopy Smart Key.jpg',
+                'created_at' => date("Y-m-d H:i:s"),
+                'updated_at' => date("Y-m-d H:i:s"),
+                'year' => 2022,
+                'available_unit' => 3
+            ],
+            [
+                'name' => 'Honda Revo X',
+                'brand' => 'Honda',
+                'transmission' => 'Manual',
+                'fuel' => 'Pertamax',
+                'cc' => 110,
+                'price' => 90000,
+                'type' => 'motor',
+                'photo' => 'Honda Revo X.jpg',
+                'created_at' => date("Y-m-d H:i:s"),
+                'updated_at' => date("Y-m-d H:i:s"),
+                'year' => 2019,
+                'available_unit' => 2
+            ],
+            [
+                'name' => 'Honda BeAT FI',
+                'brand' => 'Honda',
+                'transmission' => 'Automatic',
+                'fuel' => 'Pertamax',
+                'cc' => 110,
+                'price' => 85000,
+                'type' => 'motor',
+                'photo' => 'Honda BeAT FI.jpg',
+                'created_at' => date("Y-m-d H:i:s"),
+                'updated_at' => date("Y-m-d H:i:s"),
+                'year' => 2019,
+                'available_unit' => 3
+            ]
+        ];
+
+        \DB::table('vehicles')->insert($data);
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index dd84834..362cbcf 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -595,9 +595,6 @@ select {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-.pointer-events-none {
-  pointer-events: none;
-}
 .fixed {
   position: fixed;
 }
@@ -607,10 +604,6 @@ select {
 .relative {
   position: relative;
 }
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
-}
 .inset-x-0 {
   left: 0px;
   right: 0px;
@@ -618,12 +611,12 @@ select {
 .top-0 {
   top: 0px;
 }
-.right-0 {
-  right: 0px;
-}
 .-left-4 {
   left: -1rem;
 }
+.right-0 {
+  right: 0px;
+}
 .left-0 {
   left: 0px;
 }
@@ -636,11 +629,8 @@ select {
 .z-50 {
   z-index: 50;
 }
-.m-1 {
-  margin: 0.25rem;
-}
-.m-auto {
-  margin: auto;
+.order-1 {
+  order: 1;
 }
 .m-3 {
   margin: 0.75rem;
@@ -648,49 +638,55 @@ select {
 .m-2 {
   margin: 0.5rem;
 }
-.mx-20 {
-  margin-left: 5rem;
-  margin-right: 5rem;
+.m-auto {
+  margin: auto;
 }
-.mx-8 {
-  margin-left: 2rem;
-  margin-right: 2rem;
+.m-1 {
+  margin: 0.25rem;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
 }
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
 }
-.my-32 {
-  margin-top: 8rem;
-  margin-bottom: 8rem;
+.mx-20 {
+  margin-left: 5rem;
+  margin-right: 5rem;
 }
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
@@ -698,6 +694,36 @@ select {
 .-ml-px {
   margin-left: -1px;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-0 {
+  margin-top: 0px;
+}
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-10 {
+  margin-left: 2.5rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.mr-6 {
+  margin-right: 1.5rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -707,14 +733,41 @@ select {
 .mt-4 {
   margin-top: 1rem;
 }
-.mt-6 {
-  margin-top: 1.5rem;
+.mt-24 {
+  margin-top: 6rem;
+}
+.mr-2 {
+  margin-right: 0.5rem;
+}
+.mb-20 {
+  margin-bottom: 5rem;
+}
+.mb-10 {
+  margin-bottom: 2.5rem;
 }
 .ml-4 {
   margin-left: 1rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
+.ml-1 {
+  margin-left: 0.25rem;
+}
+.ml-12 {
+  margin-left: 3rem;
+}
+.-mt-px {
+  margin-top: -1px;
+}
+.mt-20 {
+  margin-top: 5rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-32 {
+  margin-bottom: 8rem;
+}
+.ml-20 {
+  margin-left: 5rem;
 }
 .mt-40 {
   margin-top: 10rem;
@@ -725,21 +778,12 @@ select {
 .mt-28 {
   margin-top: 7rem;
 }
-.mt-8 {
-  margin-top: 2rem;
-}
-.ml-20 {
-  margin-left: 5rem;
-}
 .mt-16 {
   margin-top: 4rem;
 }
 .mt-44 {
   margin-top: 11rem;
 }
-.ml-12 {
-  margin-left: 3rem;
-}
 .ml-44 {
   margin-left: 11rem;
 }
@@ -749,62 +793,14 @@ select {
 .ml-8 {
   margin-left: 2rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-.mt-20 {
-  margin-top: 5rem;
-}
-.ml-1 {
-  margin-left: 0.25rem;
-}
-.mr-2 {
-  margin-right: 0.5rem;
-}
-.-mt-px {
-  margin-top: -1px;
-}
-.mt-24 {
-  margin-top: 6rem;
-}
-.mb-20 {
-  margin-bottom: 5rem;
-}
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-.ml-2\.5 {
-  margin-left: 0.625rem;
-}
-.ml-10 {
-  margin-left: 2.5rem;
-}
-.mr-6 {
-  margin-right: 1.5rem;
-}
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-.mt-0 {
-  margin-top: 0px;
-}
 .mt-12 {
   margin-top: 3rem;
 }
-.mt-3 {
-  margin-top: 0.75rem;
-}
 .-mr-2 {
   margin-right: -0.5rem;
 }
-.mt-36 {
-  margin-top: 9rem;
+.mt-10 {
+  margin-top: 2.5rem;
 }
 .block {
   display: block;
@@ -821,6 +817,9 @@ select {
 .inline-flex {
   display: inline-flex;
 }
+.table {
+  display: table;
+}
 .grid {
   display: grid;
 }
@@ -830,14 +829,23 @@ select {
 .h-5 {
   height: 1.25rem;
 }
-.h-7 {
-  height: 1.75rem;
+.h-1 {
+  height: 0.25rem;
 }
-.h-auto {
-  height: auto;
+.h-11 {
+  height: 2.75rem;
 }
-.h-9 {
-  height: 2.25rem;
+.h-0\.5 {
+  height: 0.125rem;
+}
+.h-0 {
+  height: 0px;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-20 {
+  height: 5rem;
 }
 .h-8 {
   height: 2rem;
@@ -845,38 +853,32 @@ select {
 .h-16 {
   height: 4rem;
 }
-.h-4 {
-  height: 1rem;
+.h-96 {
+  height: 24rem;
 }
-.h-1 {
-  height: 0.25rem;
+.h-40 {
+  height: 10rem;
 }
-.h-0\.5 {
-  height: 0.125rem;
+.h-7 {
+  height: 1.75rem;
 }
-.h-0 {
-  height: 0px;
+.h-auto {
+  height: auto;
+}
+.h-9 {
+  height: 2.25rem;
 }
 .h-full {
   height: 100%;
 }
-.h-20 {
-  height: 5rem;
-}
 .h-10 {
   height: 2.5rem;
 }
 .h-6 {
   height: 1.5rem;
 }
-.h-screen {
-  height: 100vh;
-}
-.h-40 {
-  height: 10rem;
-}
-.h-11 {
-  height: 2.75rem;
+.h-4\/5 {
+  height: 80%;
 }
 .min-h-screen {
   min-height: 100vh;
@@ -884,23 +886,11 @@ select {
 .w-5 {
   width: 1.25rem;
 }
-.w-full {
-  width: 100%;
-}
-.w-7 {
-  width: 1.75rem;
-}
-.w-64 {
-  width: 16rem;
-}
-.w-72 {
-  width: 18rem;
-}
-.w-10 {
-  width: 2.5rem;
+.w-screen {
+  width: 100vw;
 }
-.w-36 {
-  width: 9rem;
+.w-24 {
+  width: 6rem;
 }
 .w-20 {
   width: 5rem;
@@ -908,8 +898,8 @@ select {
 .w-8 {
   width: 2rem;
 }
-.w-auto {
-  width: auto;
+.w-40 {
+  width: 10rem;
 }
 .w-6 {
   width: 1.5rem;
@@ -920,20 +910,38 @@ select {
 .w-3 {
   width: 0.75rem;
 }
+.w-full {
+  width: 100%;
+}
+.w-auto {
+  width: auto;
+}
 .w-32 {
   width: 8rem;
 }
-.w-4 {
-  width: 1rem;
+.w-80 {
+  width: 20rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-11\/12 {
+  width: 91.666667%;
+}
+.w-7 {
+  width: 1.75rem;
+}
+.w-64 {
+  width: 16rem;
 }
-.w-screen {
-  width: 100vw;
+.w-72 {
+  width: 18rem;
 }
-.w-24 {
-  width: 6rem;
+.w-10 {
+  width: 2.5rem;
 }
-.w-40 {
-  width: 10rem;
+.w-36 {
+  width: 9rem;
 }
 .w-4\/5 {
   width: 80%;
@@ -941,32 +949,28 @@ select {
 .w-1 {
   width: 0.25rem;
 }
-.w-3\/6 {
-  width: 50%;
-}
 .w-48 {
   width: 12rem;
 }
-.w-60 {
-  width: 15rem;
+.min-w-fit {
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
 }
-.w-1\/4 {
-  width: 25%;
-}
-.w-96 {
-  width: 24rem;
+.max-w-7xl {
+  max-width: 80rem;
 }
-.w-80 {
-  width: 20rem;
+.max-w-xl {
+  max-width: 36rem;
 }
-.w-2 {
-  width: 0.5rem;
+.max-w-6xl {
+  max-width: 72rem;
 }
-.w-11\/12 {
-  width: 91.666667%;
+.max-w-2xl {
+  max-width: 42rem;
 }
-.max-w-xl {
-  max-width: 36rem;
+.max-w-3xl {
+  max-width: 48rem;
 }
 .max-w-md {
   max-width: 28rem;
@@ -974,15 +978,6 @@ select {
 .max-w-4xl {
   max-width: 56rem;
 }
-.max-w-6xl {
-  max-width: 72rem;
-}
-.max-w-7xl {
-  max-width: 80rem;
-}
-.max-w-sm {
-  max-width: 24rem;
-}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1004,12 +999,6 @@ select {
 .basis-3\/12 {
   flex-basis: 25%;
 }
-.basis-8\/12 {
-  flex-basis: 66.666667%;
-}
-.basis-4\/12 {
-  flex-basis: 33.333333%;
-}
 .origin-top-left {
   transform-origin: top left;
 }
@@ -1061,6 +1050,9 @@ select {
 .grid-rows-2 {
   grid-template-rows: repeat(2, minmax(0, 1fr));
 }
+.flex-row {
+  flex-direction: row;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -1094,11 +1086,8 @@ select {
 .gap-2 {
   gap: 0.5rem;
 }
-.gap-32 {
-  gap: 8rem;
-}
-.gap-8 {
-  gap: 2rem;
+.gap-5 {
+  gap: 1.25rem;
 }
 .gap-4 {
   gap: 1rem;
@@ -1106,6 +1095,12 @@ select {
 .gap-2\.5 {
   gap: 0.625rem;
 }
+.gap-32 {
+  gap: 8rem;
+}
+.gap-8 {
+  gap: 2rem;
+}
 .gap-x-5 {
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
@@ -1129,23 +1124,26 @@ select {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.break-all {
+  word-break: break-all;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-full {
   border-radius: 9999px;
 }
-.rounded-2xl {
-  border-radius: 1rem;
-}
-.rounded-lg {
-  border-radius: 0.5rem;
+.rounded {
+  border-radius: 0.25rem;
 }
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded {
-  border-radius: 0.25rem;
+.rounded-2xl {
+  border-radius: 1rem;
 }
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
@@ -1169,15 +1167,15 @@ select {
 .border-2 {
   border-width: 2px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-t {
   border-top-width: 1px;
 }
 .border-r {
   border-right-width: 1px;
 }
-.border-l-2 {
-  border-left-width: 2px;
-}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1191,14 +1189,18 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 248 / var(--tw-border-opacity));
 }
-.border-lilac-100 {
+.border-black {
   --tw-border-opacity: 1;
-  border-color: rgb(124 125 220 / var(--tw-border-opacity));
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 .border-gray-50 {
   --tw-border-opacity: 1;
   border-color: rgb(93 93 148 / var(--tw-border-opacity));
 }
+.border-lilac-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(124 125 220 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1206,10 +1208,6 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(226 226 226 / var(--tw-border-opacity));
 }
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1218,10 +1216,6 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(124 125 220 / var(--tw-bg-opacity));
 }
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
-}
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 248 / var(--tw-bg-opacity));
@@ -1230,6 +1224,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(93 93 148 / var(--tw-bg-opacity));
 }
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
+}
 .bg-cover {
   background-size: cover;
 }
@@ -1249,14 +1247,8 @@ select {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.p-5 {
-  padding: 1.25rem;
-}
-.p-2 {
-  padding: 0.5rem;
-}
-.p-6 {
-  padding: 1.5rem;
+.p-3 {
+  padding: 0.75rem;
 }
 .p-10 {
   padding: 2.5rem;
@@ -1264,8 +1256,14 @@ select {
 .p-4 {
   padding: 1rem;
 }
-.p-3 {
-  padding: 0.75rem;
+.p-2 {
+  padding: 0.5rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+.p-5 {
+  padding: 1.25rem;
 }
 .p-8 {
   padding: 2rem;
@@ -1282,6 +1280,10 @@ select {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1302,25 +1304,21 @@ select {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
 }
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.py-20 {
-  padding-top: 5rem;
-  padding-bottom: 5rem;
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .py-12 {
   padding-top: 3rem;
@@ -1334,9 +1332,20 @@ select {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
+.pl-1 {
+  padding-left: 0.25rem;
+}
+.pl-10 {
+  padding-left: 2.5rem;
+}
+.pt-1 {
+  padding-top: 0.25rem;
+}
+.pt-8 {
+  padding-top: 2rem;
+}
+.pr-8 {
+  padding-right: 2rem;
 }
 .pt-52 {
   padding-top: 13rem;
@@ -1350,21 +1359,6 @@ select {
 .pt-44 {
   padding-top: 11rem;
 }
-.pt-8 {
-  padding-top: 2rem;
-}
-.pt-1 {
-  padding-top: 0.25rem;
-}
-.pl-10 {
-  padding-left: 2.5rem;
-}
-.pr-8 {
-  padding-right: 2rem;
-}
-.pl-1 {
-  padding-left: 0.25rem;
-}
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1386,9 +1380,6 @@ select {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
 .text-center {
   text-align: center;
 }
@@ -1399,37 +1390,37 @@ select {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 .font-medium {
   font-weight: 500;
@@ -1437,12 +1428,12 @@ select {
 .font-bold {
   font-weight: 700;
 }
-.font-semibold {
-  font-weight: 600;
-}
 .font-normal {
   font-weight: 400;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .font-extrabold {
   font-weight: 800;
 }
@@ -1468,29 +1459,29 @@ select {
   --tw-text-opacity: 1;
   color: rgb(124 125 220 / var(--tw-text-opacity));
 }
-.text-black {
+.text-gray-50 {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(93 93 148 / var(--tw-text-opacity));
 }
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-lilac-200 {
-  --tw-text-opacity: 1;
-  color: rgb(147 149 222 / var(--tw-text-opacity));
-}
-.text-lilac-300 {
+.text-black {
   --tw-text-opacity: 1;
-  color: rgb(169 169 231 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(243 244 248 / var(--tw-text-opacity));
 }
-.text-gray-50 {
+.text-lilac-200 {
   --tw-text-opacity: 1;
-  color: rgb(93 93 148 / var(--tw-text-opacity));
+  color: rgb(147 149 222 / var(--tw-text-opacity));
+}
+.text-lilac-300 {
+  --tw-text-opacity: 1;
+  color: rgb(169 169 231 / var(--tw-text-opacity));
 }
 .underline {
   -webkit-text-decoration-line: underline;
@@ -1526,16 +1517,6 @@ select {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-.shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1660,17 +1641,17 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 248 / var(--tw-border-opacity));
 }
-.hover\:bg-lilac-200:hover {
+.hover\:bg-lilac-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 149 222 / var(--tw-bg-opacity));
+  background-color: rgb(124 125 220 / var(--tw-bg-opacity));
 }
 .hover\:bg-lilac-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(169 169 231 / var(--tw-bg-opacity));
 }
-.hover\:bg-lilac-100:hover {
+.hover\:bg-lilac-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(124 125 220 / var(--tw-bg-opacity));
+  background-color: rgb(147 149 222 / var(--tw-bg-opacity));
 }
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
@@ -1726,6 +1707,10 @@ select {
     margin-bottom: -1px;
   }
 
+  .sm\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
   .sm\:ml-10 {
     margin-left: 2.5rem;
   }
@@ -1793,10 +1778,6 @@ select {
 }
 @media (min-width: 768px) {
 
-  .md\:mb-0 {
-    margin-bottom: 0px;
-  }
-
   .md\:inline {
     display: inline;
   }
@@ -1805,8 +1786,8 @@ select {
     max-height: 0px;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
+  .md\:w-full {
+    width: 100%;
   }
 
   .md\:basis-full {
@@ -1819,10 +1800,26 @@ select {
 }
 @media (min-width: 1024px) {
 
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .lg\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
   .lg\:hidden {
     display: none;
   }
 
+  .lg\:basis-8\/12 {
+    flex-basis: 66.666667%;
+  }
+
+  .lg\:basis-3\/12 {
+    flex-basis: 25%;
+  }
+
   .lg\:basis-1\/2 {
     flex-basis: 50%;
   }
@@ -1839,6 +1836,14 @@ select {
     grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 4e7116f..d2cebb3 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,4 +1,4 @@
-<div class="fixed mt-0 top-0 inset-x-0 bg-white">
+<div class="fixed mt-0 top-0 inset-x-0 bg-white z-10">
     <div class="w-screen h-1 bg-lilac-100"></div>
     <div class="navbar flex justify-between">
         <a href="{{ url('/') }}"><div class="navbar-logo basis-1/4 text-lilac-100">Rent.ly</div></a>
@@ -9,7 +9,7 @@
                 @endguest
                 @auth
                     @if(auth()->user()->hasRole('user'))
-                    <?php $values = array('Rent' => 'rent', 'My order' => 'me/order', 'Guide' => 'guide', 'Help' => 'help', 'About' => 'about'); ?>
+                    <?php $values = array('Rent' => 'rent', 'My order' => 'me/orders', 'Guide' => 'guide', 'Help' => 'help', 'About' => 'about'); ?>
                     @else
                     <?php $values = array('Order' => 'dashboard/orders', 'Product' => 'dashboard/vehicles', 'Customer' => 'dashboard/customers') ?>
                     @endif 
diff --git a/resources/views/find-vehicles.blade.php b/resources/views/find-vehicles.blade.php
index 88c648b..c7d7bf2 100644
--- a/resources/views/find-vehicles.blade.php
+++ b/resources/views/find-vehicles.blade.php
@@ -1,19 +1,18 @@
 <x-base-layout>
     <x-base-body selected="true">
         <div class="min-h-screen flex flex-col sm:justify-center items-center sm:pt-0 bg-">
-            <div class="w-3/6 max-w-4xl mt-6 px-12 py-20 bg-white shadow-md overflow-hidden sm:rounded-lg">
+            <div class="w-full max-w-2xl mt-6 px-8 py-20 bg-white shadow-md overflow-hidden sm:rounded-lg">
                 <h3 class="font-bold text-center text-3xl text-lilac-100 mt-2">Search for {{ $type }} Rent</h3>
-                <form action=" {{ '/find/'.$type }}" method="post" class="px-20 mt-8">
-                    @csrf
+                <form action=" {{ '/'.strtolower($type).'s' }}" method="get" class=" mt-8">
                     <x-label for="pickup" value="Pick up" class="block font-bold text-base mt-6"/>
-                    <div class="date-time flex">
-                        <x-input id="pickup-date" class="block basis-8/12" type="date" name="pickup_date" value="{{ date('Y-m-d') }}" required />
-                        <x-input id="pickup-time" class="block basis-4/12 ml-4" type="time" name="pickup_time" value="{{ explode(' ', gmdate('Y-m-d h:i \G\M\T'))[1] }}" required />
+                    <div class="date-time flex flex-wrap lg:flex-row">
+                        <x-input id="pickup-date" class="block lg:basis-8/12 md:w-full min-w-fit sm:mt-2 lg:mt-0" type="date" name="pickup_date" value="{{ date('Y-m-d') }}" required />
+                        <x-input id="pickup-time" class="block lg:basis-3/12 lg:ml-2 md:w-full min-w-fit sm:mt-2 lg:mt-0 " type="time" name="pickup_time" value="{{ explode(' ', gmdate('Y-m-d h:i \G\M\T'))[1] }}" required />
                     </div>
                     <x-label for="dropoff" value="Drop off" class="block font-bold text-base mt-6"/>
-                    <div class="date-time flex">
-                        <x-input id="dropoff-date" class="block basis-8/12" type="date" name="dropoff_date" value="{{ date('Y-m-d', strtotime('tomorrow')) }}" required />
-                        <x-input id="dropoff-time" class="block basis-4/12 ml-4" type="time" name="dropoff_time" value="{{ explode(' ', gmdate('Y-m-d h:i \G\M\T'))[1] }}" required />
+                    <div class="date-time flex flex-wrap lg:flex-row ">
+                        <x-input id="dropoff-date" class="block lg:basis-8/12 md:w-full min-w-fit sm:mt-2 lg:mt-0 " type="date" name="dropoff_date" value="{{ date('Y-m-d', strtotime('tomorrow')) }}" required />
+                        <x-input id="dropoff-time" class="block lg:basis-3/12 lg:ml-2 md:w-full min-w-fit sm:mt-2 lg:mt-0" type="time" name="dropoff_time" value="{{ explode(' ', gmdate('Y-m-d h:i \G\M\T'))[1] }}" required />
                     </div>
                     <input type="hidden" name="type" value="{{ strtolower($type) }}">
                     <div class="mt-6 flex justify-center">
diff --git a/resources/views/guide.blade.php b/resources/views/guide.blade.php
index 1a1d27b..673ffa9 100644
--- a/resources/views/guide.blade.php
+++ b/resources/views/guide.blade.php
@@ -14,7 +14,7 @@
                 </svg>
                 How to Rent A Vehicle
             </a> 
-            <a href="{{ url('/guide/rules') }}" class="py-2 px-10 font-bold text-lilac-100 bg-white rounded-r-sm border border-lilac-100 hover:bg-lilac-300 hover:text-white transition duration-500">
+            <a href="{{ url('/rules') }}" class="py-2 px-10 font-bold text-lilac-100 bg-white rounded-r-sm border border-lilac-100 hover:bg-lilac-300 hover:text-white transition duration-500">
                 <svg class="fill-lilac-100 inline mr-2" width="32" height="32" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M23.5002 4.70001C33.8872 4.70001 42.3002 13.113 42.3002 23.5C42.3002 33.887 33.8872 42.3 23.5002 42.3C13.1132 42.3 4.7002 33.887 4.7002 23.5C4.7002 13.113 13.1132 4.70001 23.5002 4.70001ZM26.1557 26.743L26.9782 11.562H20.0222L20.8447 26.743H26.1557ZM25.9442 34.639C26.5082 34.0985 26.8137 33.3465 26.8137 32.383C26.8137 31.396 26.5317 30.644 25.9677 30.1035C25.4037 29.563 24.5812 29.281 23.4767 29.281C22.3722 29.281 21.5497 29.563 20.9622 30.1035C20.3747 30.644 20.0927 31.396 20.0927 32.383C20.0927 33.3465 20.3982 34.0985 20.9857 34.639C21.5967 35.1795 22.4192 35.438 23.4767 35.438C24.5342 35.438 25.3567 35.1795 25.9442 34.639Z"/>
                 </svg>    
diff --git a/resources/views/order-history.blade.php b/resources/views/order-history.blade.php
new file mode 100644
index 0000000..0e55a1f
--- /dev/null
+++ b/resources/views/order-history.blade.php
@@ -0,0 +1,7 @@
+<x-base-layout>
+    <x-base-body selected="My Order">
+        <h1 class="font-bold text-3xl text-lilac-100 mt-24 ml-20">Your order's progress</h1>
+        <h2 class="font-bold text-xl text-lilac-100 ml-20">Lihat progress dari pengajuan rental yang telah dilakukan</h2>
+
+    </x-base-body>
+</x-base-layout>
\ No newline at end of file
diff --git a/resources/views/rent-form.blade.php b/resources/views/rent-form.blade.php
index f1bcb9d..94edc5d 100644
--- a/resources/views/rent-form.blade.php
+++ b/resources/views/rent-form.blade.php
@@ -1,43 +1,43 @@
 <x-base-layout>
     <x-base-body selected="Rent">
-        <div class="vehicles-detail flex mt-12 mx-20">
+        <div class="vehicles-detail flex flex-wrap mt-12 mx-20">
             <div class="details-text lg:basis-1/2 mt-12 sm:basis-full md:basis-full">
-                <h2 class="font-extrabold text-4xl text-lilac-100">Honda Scoopy Smart Key</h2>
-                <h3 class="font-bold text-3xl text-lilac-100 mt-2">IDR 90000/day</h3>
-                <div class="mt-2 grid spec-container grid-cols-2 grid-rows-2">
+                <h2 class="font-extrabold text-4xl text-lilac-100">{{ $vehicle->name }}</h2>
+                <h3 class="font-bold text-3xl text-lilac-100 mt-2">IDR {{ $vehicle->price }}/day</h3>
+                <div class="mt-2 grid spec-container lg:grid-cols-2 lg:grid-rows-2">
                     <div class="engine my-2 flex items-center">
-                        <img src="{{ asset('/images/engine-icon.svg') }}" class="inline w-8" alt="trasmission">
-                        <p class="font-bold inline pl-4">Automatic</p>
+                        <img src="{{ asset('/images/engine-icon.svg') }}" class="inline w-8" alt="transmission">
+                        <p class="font-bold inline pl-4">{{ $vehicle->transmission }}</p>
                     </div>
                     <div class="cc my-2 flex items-center">
                         <img src="{{ asset('/images/gear-icon.svg') }}" class="inline w-8" alt="cc">
-                        <p class="font-bold inline pl-4">110cc</p>
+                        <p class="font-bold inline pl-4">{{ $vehicle->cc }}cc</p>
                     </div>
                     <div class="year my-2 flex items-center">
                         <img src="{{ asset('/images/time-icon.svg') }}" class="inline w-8" alt="year">
-                        <p class="font-bold inline pl-4">2022</p>
+                        <p class="font-bold inline pl-4">{{ $vehicle->year }}</p>
                     </div>
                     <div class="fuel my-2 flex items-center">
                         <img src="{{ asset('/images/fuel-icon.svg') }}" class="inline w-8" alt="fuel">
-                        <p class="font-bold inline pl-4">Pertamax</p>
+                        <p class="font-bold inline pl-4">{{ $vehicle->fuel }}</p>
                     </div>
                 </div>
             </div>
             <div class="details-pic lg:basis-1/2 sm:basis-full md:basis-full">
-                <img src="{{ asset('images/motor-photo.png') }}" alt="scoopy" class="w-full h-full">
+                <img src="{{ asset('storage/images/'. $vehicle->photo) }}" alt="scoopy" class="w-4/5 h-4/5 mt-10">
             </div>
         </div>
-        <div class="rent-form mt-4 mx-20 px-20 py-10 bg-white shadow-md rounded-lg ">
+        <div class="w-full max-w-7xl mx-auto rent-form my-4 px-20 py-10 bg-white shadow-md rounded-lg ">
             <h1 class="font-extrabold text-4xl text-lilac-100">Customer Rent Form</h1>
             <form action="" method="post" class="flex flex-wrap">
                 @csrf
                 <div class="left-col basis-1/2">
                     <x-label for="name" value="Full Name" class="block font-bold text-base pt-4"/>
-                    <x-input id="name" class="block w-4/5" type="text" name="name" value="" required />
+                    <x-input id="name" class="block w-4/5" type="text" name="name" value="{{ auth()->user()->name }}" required />
                     <x-label for="phone-1" value="Phone Number 1" class="block font-bold text-base pt-4"/>
-                    <x-input id="phone-1" class="block w-4/5" type="text" name="phone-1" value="" required />
+                    <x-input id="phone-1" class="block w-4/5" type="text" name="phone-1" value="{{ auth()->user()->phone_1 }}" required />
                     <x-label for="address-id" value="Address (ID)" class="block font-bold text-base pt-4"/>
-                    <x-text-area id="address-id" class="block w-4/5" name="address-id" required />
+                    <x-text-area id="address-id" class="block w-4/5" name="address-id" required>{{ auth()->user()->address_mlg }}</x-text-area>
                     <div class="date-time flex">
                         <div class="date basis-6/12">
                             <x-label for="pickup-date" value="Pick Up Date" class="block font-bold text-base pt-4"/>
@@ -65,11 +65,11 @@
                 </div>
                 <div class="right-col basis-1/2">
                     <x-label for="email" :value="__('Email')" class="block font-bold text-base pt-4" />
-                    <x-input id="email" class="block w-4/5" type="email" name="email" :value="old('email')" required />
+                    <x-input id="email" class="block w-4/5" type="email" name="email" value="{{ auth()->user()->email }}" required />
                     <x-label for="phone-2" value="Phone Number 2" class="block font-bold text-base  pt-4"/>
-                    <x-input id="phone-2" class="block w-4/5" type="text" name="phone-2" value="" required/>
+                    <x-input id="phone-2" class="block w-4/5" type="text" name="phone-2" value="{{ auth()->user()->phone_2 }}" required/>
                     <x-label for="address-mlg" value="Address (Malang)" class="block font-bold text-base  pt-4"/>
-                    <x-text-area id="address-mlg" class="block w-4/5" name="address-mlg" required />
+                    <x-text-area id="address-mlg" class="block w-4/5" name="address-mlg" required>{{ auth()->user()->address_mlg }}</x-text-area>
                     <div class="date-time flex">    
                         <div class="date basis-6/12">
                             <x-label for="dropoff-date" value="Pick Up Date" class="block font-bold text-base pt-4"/>
diff --git a/resources/views/test-up.blade.php b/resources/views/test-up.blade.php
new file mode 100644
index 0000000..c8ff9c1
--- /dev/null
+++ b/resources/views/test-up.blade.php
@@ -0,0 +1,5 @@
+<form action="/test-up" method="post" enctype="multipart/form-data">
+    @csrf
+    <input type="file" name="image" id="image">
+    <input type="submit" value="submit">
+</form>
\ No newline at end of file
diff --git a/resources/views/test-view.blade.php b/resources/views/test-view.blade.php
new file mode 100644
index 0000000..50f84fe
--- /dev/null
+++ b/resources/views/test-view.blade.php
@@ -0,0 +1 @@
+<img src="{{ asset('/app/images/example.png') }}" alt="">
\ No newline at end of file
diff --git a/resources/views/vehicles-list.blade.php b/resources/views/vehicles-list.blade.php
index 5561953..a4a7bce 100644
--- a/resources/views/vehicles-list.blade.php
+++ b/resources/views/vehicles-list.blade.php
@@ -1,78 +1,99 @@
 <x-base-layout>
     <x-base-body selected="">
-        <div class="flex justify-around mt-32">
-            <div class="flex flex-col sm:justify-center items-center sm:pt-0">
-                <h2 class="text-lilac-200 font-bold text-4xl">Available Cars</h2>
+    <div class="flex justify-between flex-wrap mt-20">
+            <div class="flex flex-col justify-center mx-10">
+                <h2 class="text-lilac-200 font-bold text-4xl">Available {{ $type }}s</h2>
+                <p class="text-lilac-100 font-bold">{{ count($vehicles) }} Vehicles</p>
             </div>
-            <div class="flex gap-2 px-10 justify-center items-center bg-white rounded-xl sm:pt-0 shadow-xl">
-                <div class="text-lilac-200 w-full">
-                    <p>Filter by</p>
-                </div>
-                <div class="w-full md:w-1/3 px-3 py-8 mb-6 md:mb-0 ">
-                    <label class="block tracking-wide font-bold mb-2" for="grid-city">
-                        Brand
-                    </label>
-                    <div class="inline-block w-32">
-                        <select class="focus:ring focus:ring-lilac-200 focus:ring-opacity-50 block appearance-none w-full bg-white border px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
-                            <option>Option 1</option>
-                            <option>Option 2</option>
-                            <option>Option 3</option>
-                        </select>
+            <form action="{{ '/'.$type.'s' }}" method="get" class=>
+                <div class="flex flex-wrap max-w-3xl mx-10 py-10 gap-5 px-10 justify-center bg-white rounded-xl shadow-md">
+                    <div class="flex items-center font-bold text-lilac-200">
+                        <p>Filter by</p>
                     </div>
-                </div>
-                <div class="w-full md:w-1/3 px-3 py-8 mb-6 md:mb-0 ">
-                    <label class="block tracking-wide font-bold mb-2" for="grid-city">
-                        Transmision
-                    </label>
-                    <div class="inline-block w-32">
-                        <select class="focus:ring focus:ring-lilac-200 focus:ring-opacity-50 block appearance-none w-full bg-white border px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
-                            <option>Option 1</option>
-                            <option>Option 2</option>
-                            <option>Option 3</option>
-                        </select>
-                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                            <!-- <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg> -->
+                    <input type="hidden" name="type" value="{{ $type }}">
+                    <input type="hidden" name="pickup_date" value="{{ $pickup_date }}">
+                    <input type="hidden" name="dropoff_date" value="{{ $dropoff_date }}">
+                    <div>
+                        <label class="block tracking-wide font-bold mb-2" for="brand">
+                            Brand
+                        </label>
+                        <div class="inline-block w-32">
+                            @if($type == 'motor')
+                            <?php $brands = array('All', 'Honda', 'Suzuki', 'Yamaha') ?>
+                            @else
+                            <?php $brands = array('All', 'Honda', 'Suzuki', 'Toyota', 'Daihatsu', 'Nissan') ?>
+                            @endif
+                            <select name="brand" class="focus:ring focus:ring-lilac-200 focus:ring-opacity-50 block appearance-none w-full bg-white border px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
+                                @foreach($brands as $brand)    
+                                <option value="{{ $brand }}" >{{ $brand }}</option>
+                                @endforeach    
+                            </select>
                         </div>
                     </div>
+                    <div>
+                        <label class="block tracking-wide font-bold mb-2" for="transmission">
+                            Transmision
+                        </label>
+                        <div class="inline-block w-32">
+                            <?php $transmissions = array('All', 'Manual', 'Automatic') ?>
+                            <select name="transmission" class="focus:ring focus:ring-lilac-200 focus:ring-opacity-50 block appearance-none w-full bg-white border px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
+                                @foreach($transmissions as $transmission)
+                                <option value="{{ $transmission }}">{{ $transmission }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                    </div>
+                    <div class="flex items-center">
+                        <x-button filled="true">Apply Filter</x-button>
+                    </div>
                 </div>
-                <div>
-                    <button class="bg-lilac-100 text-white rounded-lg px-12">Apply Filter</button>
-                </div>
-            </div>
+            </form>
         </div>
-        <div class="ml-20 mt-4">
-            <p class="text-lilac-100 font-bold">5 Vehicles</p>
+        @if(count($vehicles) == 0)
+        <div class="h-96 mt-20 mb-32 flex justify-center items-center">
+            <div class="flex flex-col items-center w-full sm:max-w-md px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+                <p> Belum ada kendaraan yang sesuai </p>
+                <a href="/find/{{ strtolower($type) }}">
+                    <x-button filled="true">Kembali ke Pencarian</x-button>
+                </a>
+            </div>
         </div>
-        <div class="grid justify-center my-8">
-            <div class="w-80 p-8 rounded-lg overflow-hidden shadow-2xl">
-                <div class="">
-                    <img class="w-full h-40 object-cover shadow" src="/images/Rectangle 20.png" alt="">
-                </div>
-                <div class="px-6 py-4">
-                    <div class="font-bold text-xl mb-2 text-center">Honda HR-V</div>
-                    <p class="text-sm text-center">
-                        IDR 102000/day
-                    </p>
-                </div>
-                <div class="grid grid-rows-2 grid-flow-col justify-center gap-4">
-                    <div class="flex gap-2">
-                        <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 23"><path d="M8.83334 0.833252V3.49992H12.8333V6.16659H8.83334L6.16668 8.83325V12.8333H3.50001V8.83325H0.833344V19.4999H3.50001V15.4999H6.16668V19.4999H10.1667L12.8333 22.1666H23.5V16.8333H26.1667V20.8333H30.1667V7.49992H26.1667V11.4999H23.5V6.16659H15.5V3.49992H19.5V0.833252H8.83334Z" fill="#7C7DDC"/></svg>
-                        <p class="font-bold text-xs">Automatic</p>
+        @else
+        <div class="flex flex-wrap flex-row justify-around mx-10 my-10">
+            @foreach($vehicles as $vehicle)
+            <a href="{{ '/rent/'.strtolower($type).'/'.$vehicle->id }}">
+                <div class="w-80 p-8 rounded-lg overflow-hidden shadow-md">
+                    <div>
+                        <img class="w-full h-40 object-cover shadow" src="{{ '/storage/images/'.$vehicle->photo }}" alt="">
                     </div>
-                    <div class="flex gap-2.5">
-                        <svg class="fill-current h-23 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 26"><path d="M0 0.166748H4C4.37333 0.166748 4.70667 0.313415 4.94667 0.553415L7.72 3.34008L8.78667 2.28675C9.33333 1.76675 10 1.50008 10.6667 1.50008H18.6667C19.3333 1.50008 20 1.76675 20.5467 2.28675L21.88 3.62008C22.4 4.16675 22.6667 4.83342 22.6667 5.50008V22.8334C22.6667 23.5407 22.3857 24.2189 21.8856 24.719C21.3855 25.2191 20.7072 25.5001 20 25.5001H6.66667C5.95942 25.5001 5.28115 25.2191 4.78105 24.719C4.28095 24.2189 4 23.5407 4 22.8334V8.16675C4 7.50008 4.26667 6.83342 4.78667 6.28675L5.84 5.22008L3.45333 2.83341H0V0.166748ZM10.6667 4.16675V6.83342H18.6667V4.16675H10.6667ZM11.2133 12.1667L8.54667 9.50008H6.66667V11.3801L9.33333 14.0467V18.2867L6.66667 20.9534V22.8334H8.54667L11.2133 20.1667H15.4533L18.12 22.8334H20V20.9534L17.3333 18.2867V14.0467L20 11.3801V9.50008H18.12L15.4533 12.1667H11.2133ZM12 14.8334H14.6667V17.5001H12V14.8334Z" fill="#7C7DDC"/></svg>
-                        <p class="font-bold text-xs">Pertamax</p>
+                    <div class="px-6 py-4">
+                        <div class="font-bold text-xl mb-2 text-center">{{ $vehicle->name }}</div>
+                        <p class="text-sm text-center">
+                            IDR {{ $vehicle->price }}/day
+                        </p>
                     </div>
-                    <div class="flex gap-2">
-                        <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 32"><path d="M18.3938 9.19375C18.4625 9.61875 18.5 10.0563 18.5 10.4438C18.5 10.9438 18.4625 11.3812 18.3938 11.8062L19.7813 13.0437C20.2188 13.4375 20.4 14.0062 20.1688 14.6062C20.025 14.8812 19.8688 15.2625 19.6938 15.575L19.5 15.9125C19.2563 16.225 19.1063 16.525 18.8875 16.8188C18.5313 17.2938 17.9063 17.45 17.3438 17.2625L15.575 16.6812C14.9063 17.2375 14.1438 17.6812 13.3125 17.9937L12.8813 19.8062C12.8125 20.3875 12.3625 20.85 11.775 20.925C11.3563 20.975 10.9313 21 10.5 21C10.0688 21 9.64376 20.975 9.22501 20.925C8.63751 20.85 8.13126 20.3875 8.06251 19.8062L7.63126 17.9937C6.85626 17.6812 6.09376 17.2375 5.42189 16.6812L3.65814 17.2625C3.09626 17.45 2.47001 17.2938 2.11376 16.8188C1.89251 16.525 1.68626 16.2188 1.49626 15.9062L1.30751 15.575C1.13314 15.2625 0.974513 14.9375 0.832763 14.6062C0.601263 14.0062 0.778638 13.4375 1.22001 13.0437L2.60626 11.8062C2.53626 11.3812 2.44376 10.9438 2.44376 10.4438C2.44376 10.0563 2.53626 9.61875 2.60626 9.19375L1.22001 7.95625C0.778638 7.50625 0.601263 6.9375 0.832763 6.39375C0.974513 6.00625 1.13314 5.73688 1.30689 5.4225L1.49689 5.09438C1.68626 4.77875 1.89251 4.47375 2.11376 4.18062C2.47001 3.70875 3.09626 3.55188 3.65814 3.73688L5.42189 4.31812C6.09376 3.76562 6.85626 3.32063 7.63126 3.00938L8.06251 1.1925C8.13126 0.6125 8.63751 0.148125 9.22501 0.0769376C9.64807 0.0256246 10.0739 -6.80769e-05 10.5 1.35465e-07C10.9313 1.35465e-07 11.3563 0.0261251 11.775 0.0768751C12.3625 0.148125 12.8125 0.6125 12.8813 1.1925L13.3125 3.00938C14.1438 3.32063 14.9063 3.76562 15.575 4.31812L17.3438 3.73688C17.9063 3.55188 18.5313 3.70875 18.8875 4.18062C19.1063 4.4725 19.2563 4.77625 19.5 5.09L19.6938 5.42688C19.8688 5.74 20.025 6.0625 20.1688 6.39375C20.4 6.9375 20.2188 7.50625 19.7813 7.95625L18.3938 9.19375ZM10.5 7.44375C8.84376 7.44375 7.50001 8.84375 7.50001 10.4438C7.50001 12.1562 8.84376 13.4438 10.5 13.4438C12.1563 13.4438 13.5 12.1562 13.5 10.4438C13.5 8.84375 12.1563 7.44375 10.5 7.44375ZM30.8063 29.3937C30.3813 29.4625 29.9438 29.5 29.5 29.5C29.0563 29.5 28.6188 29.4625 28.1938 29.3937L26.9563 30.7812C26.5063 31.2188 25.9375 31.4 25.3938 31.1688C25.0625 31.025 24.7375 30.8687 24.425 30.6938L24.0875 30.5C23.775 30.2563 23.475 30.1063 23.1813 29.8875C22.7063 29.5312 22.55 28.9062 22.7375 28.3438L23.3188 26.575C22.7625 25.9062 22.3188 25.1437 22.0063 24.3125L20.1938 23.8813C19.6125 23.8125 19.15 23.3625 19.075 22.775C19.025 22.3562 19 21.9312 19 21.5C19 21.0688 19.025 20.6438 19.075 20.225C19.15 19.6375 19.6125 19.1313 20.1938 19.0625L22.0063 18.6313C22.3188 17.8563 22.7625 17.0938 23.3188 16.425L22.7375 14.6562C22.55 14.0938 22.7063 13.4688 23.1813 13.1125C23.475 12.8938 23.7813 12.6312 24.0938 12.4937L24.425 12.3062C24.7375 12.1312 25.0063 11.975 25.3938 11.8313C25.9375 11.6 26.5063 11.7812 26.9563 12.2188L28.1938 13.6062C28.6188 13.5375 29.0563 13.5 29.5 13.5C29.9438 13.5 30.3813 13.5375 30.8063 13.6062L32.0438 12.2188C32.4375 11.7812 33.0063 11.6 33.6063 11.8313C33.9375 11.975 34.2625 12.1312 34.575 12.3062L34.9063 12.4937C35.2188 12.6312 35.525 12.8938 35.8188 13.1125C36.2938 13.4688 36.45 14.0938 36.2625 14.6562L35.6813 16.425C36.2375 17.0938 36.6813 17.8563 36.9938 18.6313L38.8063 19.0625C39.3875 19.1313 39.85 19.6375 39.925 20.225C39.975 20.6438 40 21.0688 40 21.5C40 21.9312 39.975 22.3562 39.925 22.775C39.85 23.3625 39.3875 23.8125 38.8063 23.8813L36.9938 24.3125C36.6813 25.1437 36.2375 25.9062 35.6813 26.575L36.2625 28.3438C36.45 28.9062 36.2938 29.5312 35.8188 29.8875C35.525 30.1063 35.225 30.2563 34.9125 30.5L34.575 30.6938C34.2625 30.8687 33.8813 31.025 33.6063 31.1688C33.0063 31.4 32.4375 31.2188 32.0438 30.7812L30.8063 29.3937ZM32.5 21.5C32.5 19.8438 31.1563 18.5 29.5 18.5C27.8438 18.5 26.5 19.8438 26.5 21.5C26.5 23.1562 27.8438 24.5 29.5 24.5C31.1563 24.5 32.5 23.1562 32.5 21.5Z" fill="#7C7DDC"/></svg>
-                        <p class="font-bold text-xs">110cc</p>
-                    </div>
-                    <div class="flex gap-2">
-                        <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 23"><path d="M12.4875 0C5.5875 0 0 5.6 0 12.5C0 19.4 5.5875 25 12.4875 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.4875 0ZM16.6125 18.3875L11.25 13.0125V6.25H13.75V11.9875L18.3875 16.625L16.6125 18.3875Z" fill="#7C7DDC"/></svg>
-                        <p class="font-bold text-xs">2021</p>
+                    <div class="grid grid-rows-2 grid-flow-col justify-center gap-4">
+                        <div class="flex gap-2">
+                            <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 23"><path d="M8.83334 0.833252V3.49992H12.8333V6.16659H8.83334L6.16668 8.83325V12.8333H3.50001V8.83325H0.833344V19.4999H3.50001V15.4999H6.16668V19.4999H10.1667L12.8333 22.1666H23.5V16.8333H26.1667V20.8333H30.1667V7.49992H26.1667V11.4999H23.5V6.16659H15.5V3.49992H19.5V0.833252H8.83334Z" fill="#7C7DDC"/></svg>
+                            <p class="font-bold text-xs">{{ $vehicle->transmission }}</p>
+                        </div>
+                        <div class="flex gap-2.5">
+                            <svg class="fill-current h-23 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 26"><path d="M0 0.166748H4C4.37333 0.166748 4.70667 0.313415 4.94667 0.553415L7.72 3.34008L8.78667 2.28675C9.33333 1.76675 10 1.50008 10.6667 1.50008H18.6667C19.3333 1.50008 20 1.76675 20.5467 2.28675L21.88 3.62008C22.4 4.16675 22.6667 4.83342 22.6667 5.50008V22.8334C22.6667 23.5407 22.3857 24.2189 21.8856 24.719C21.3855 25.2191 20.7072 25.5001 20 25.5001H6.66667C5.95942 25.5001 5.28115 25.2191 4.78105 24.719C4.28095 24.2189 4 23.5407 4 22.8334V8.16675C4 7.50008 4.26667 6.83342 4.78667 6.28675L5.84 5.22008L3.45333 2.83341H0V0.166748ZM10.6667 4.16675V6.83342H18.6667V4.16675H10.6667ZM11.2133 12.1667L8.54667 9.50008H6.66667V11.3801L9.33333 14.0467V18.2867L6.66667 20.9534V22.8334H8.54667L11.2133 20.1667H15.4533L18.12 22.8334H20V20.9534L17.3333 18.2867V14.0467L20 11.3801V9.50008H18.12L15.4533 12.1667H11.2133ZM12 14.8334H14.6667V17.5001H12V14.8334Z" fill="#7C7DDC"/></svg>
+                            <p class="font-bold text-xs">{{ $vehicle->fuel }}</p>
+                        </div>
+                        <div class="flex gap-2">
+                            <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 32"><path d="M18.3938 9.19375C18.4625 9.61875 18.5 10.0563 18.5 10.4438C18.5 10.9438 18.4625 11.3812 18.3938 11.8062L19.7813 13.0437C20.2188 13.4375 20.4 14.0062 20.1688 14.6062C20.025 14.8812 19.8688 15.2625 19.6938 15.575L19.5 15.9125C19.2563 16.225 19.1063 16.525 18.8875 16.8188C18.5313 17.2938 17.9063 17.45 17.3438 17.2625L15.575 16.6812C14.9063 17.2375 14.1438 17.6812 13.3125 17.9937L12.8813 19.8062C12.8125 20.3875 12.3625 20.85 11.775 20.925C11.3563 20.975 10.9313 21 10.5 21C10.0688 21 9.64376 20.975 9.22501 20.925C8.63751 20.85 8.13126 20.3875 8.06251 19.8062L7.63126 17.9937C6.85626 17.6812 6.09376 17.2375 5.42189 16.6812L3.65814 17.2625C3.09626 17.45 2.47001 17.2938 2.11376 16.8188C1.89251 16.525 1.68626 16.2188 1.49626 15.9062L1.30751 15.575C1.13314 15.2625 0.974513 14.9375 0.832763 14.6062C0.601263 14.0062 0.778638 13.4375 1.22001 13.0437L2.60626 11.8062C2.53626 11.3812 2.44376 10.9438 2.44376 10.4438C2.44376 10.0563 2.53626 9.61875 2.60626 9.19375L1.22001 7.95625C0.778638 7.50625 0.601263 6.9375 0.832763 6.39375C0.974513 6.00625 1.13314 5.73688 1.30689 5.4225L1.49689 5.09438C1.68626 4.77875 1.89251 4.47375 2.11376 4.18062C2.47001 3.70875 3.09626 3.55188 3.65814 3.73688L5.42189 4.31812C6.09376 3.76562 6.85626 3.32063 7.63126 3.00938L8.06251 1.1925C8.13126 0.6125 8.63751 0.148125 9.22501 0.0769376C9.64807 0.0256246 10.0739 -6.80769e-05 10.5 1.35465e-07C10.9313 1.35465e-07 11.3563 0.0261251 11.775 0.0768751C12.3625 0.148125 12.8125 0.6125 12.8813 1.1925L13.3125 3.00938C14.1438 3.32063 14.9063 3.76562 15.575 4.31812L17.3438 3.73688C17.9063 3.55188 18.5313 3.70875 18.8875 4.18062C19.1063 4.4725 19.2563 4.77625 19.5 5.09L19.6938 5.42688C19.8688 5.74 20.025 6.0625 20.1688 6.39375C20.4 6.9375 20.2188 7.50625 19.7813 7.95625L18.3938 9.19375ZM10.5 7.44375C8.84376 7.44375 7.50001 8.84375 7.50001 10.4438C7.50001 12.1562 8.84376 13.4438 10.5 13.4438C12.1563 13.4438 13.5 12.1562 13.5 10.4438C13.5 8.84375 12.1563 7.44375 10.5 7.44375ZM30.8063 29.3937C30.3813 29.4625 29.9438 29.5 29.5 29.5C29.0563 29.5 28.6188 29.4625 28.1938 29.3937L26.9563 30.7812C26.5063 31.2188 25.9375 31.4 25.3938 31.1688C25.0625 31.025 24.7375 30.8687 24.425 30.6938L24.0875 30.5C23.775 30.2563 23.475 30.1063 23.1813 29.8875C22.7063 29.5312 22.55 28.9062 22.7375 28.3438L23.3188 26.575C22.7625 25.9062 22.3188 25.1437 22.0063 24.3125L20.1938 23.8813C19.6125 23.8125 19.15 23.3625 19.075 22.775C19.025 22.3562 19 21.9312 19 21.5C19 21.0688 19.025 20.6438 19.075 20.225C19.15 19.6375 19.6125 19.1313 20.1938 19.0625L22.0063 18.6313C22.3188 17.8563 22.7625 17.0938 23.3188 16.425L22.7375 14.6562C22.55 14.0938 22.7063 13.4688 23.1813 13.1125C23.475 12.8938 23.7813 12.6312 24.0938 12.4937L24.425 12.3062C24.7375 12.1312 25.0063 11.975 25.3938 11.8313C25.9375 11.6 26.5063 11.7812 26.9563 12.2188L28.1938 13.6062C28.6188 13.5375 29.0563 13.5 29.5 13.5C29.9438 13.5 30.3813 13.5375 30.8063 13.6062L32.0438 12.2188C32.4375 11.7812 33.0063 11.6 33.6063 11.8313C33.9375 11.975 34.2625 12.1312 34.575 12.3062L34.9063 12.4937C35.2188 12.6312 35.525 12.8938 35.8188 13.1125C36.2938 13.4688 36.45 14.0938 36.2625 14.6562L35.6813 16.425C36.2375 17.0938 36.6813 17.8563 36.9938 18.6313L38.8063 19.0625C39.3875 19.1313 39.85 19.6375 39.925 20.225C39.975 20.6438 40 21.0688 40 21.5C40 21.9312 39.975 22.3562 39.925 22.775C39.85 23.3625 39.3875 23.8125 38.8063 23.8813L36.9938 24.3125C36.6813 25.1437 36.2375 25.9062 35.6813 26.575L36.2625 28.3438C36.45 28.9062 36.2938 29.5312 35.8188 29.8875C35.525 30.1063 35.225 30.2563 34.9125 30.5L34.575 30.6938C34.2625 30.8687 33.8813 31.025 33.6063 31.1688C33.0063 31.4 32.4375 31.2188 32.0438 30.7812L30.8063 29.3937ZM32.5 21.5C32.5 19.8438 31.1563 18.5 29.5 18.5C27.8438 18.5 26.5 19.8438 26.5 21.5C26.5 23.1562 27.8438 24.5 29.5 24.5C31.1563 24.5 32.5 23.1562 32.5 21.5Z" fill="#7C7DDC"/></svg>
+                            <p class="font-bold text-xs">{{ $vehicle->cc }}cc</p>
+                        </div>
+                        <div class="flex gap-2">
+                            <svg class="fill-current h-23 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 23"><path d="M12.4875 0C5.5875 0 0 5.6 0 12.5C0 19.4 5.5875 25 12.4875 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.4875 0ZM16.6125 18.3875L11.25 13.0125V6.25H13.75V11.9875L18.3875 16.625L16.6125 18.3875Z" fill="#7C7DDC"/></svg>
+                            <p class="font-bold text-xs">{{ $vehicle->year }}</p>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </a>
+            @endforeach
         </div>
+        @endif
     </x-base-body>
 </x-base-layout>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f500274..929aac3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,9 @@
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\AdminController;
 
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Http\Request;
+
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -39,15 +42,13 @@
 
 Route::get('/me/profile', [UserController::class, 'getUserProfile']);
 
-Route::post('/me/profile', [UserController::class, 'updateProfile']);
-
-Route::get('/find/motor', [RentController::class, 'getFindMotor']);
+Route::post('/me/profile', [UserController::class, 'updateProfile'])->name('update-profile');
 
-Route::get('/find/car', [RentController::class, 'getFindCar']);
+Route::get('/find/motor', [RentController::class, 'getFindMotor'])->name('find-motor');
 
-Route::post('/find/{type}', [RentController::class, 'findVehicles']);
+Route::get('/find/car', [RentController::class, 'getFindCar'])->name('find-car');
 
-Route::post('/find/motor', [RentController::class, 'findMotor']);
+Route::get('/{type}', [RentController::class, 'findVehicles'])->where('type', '\b(motors|cars)\b');
 
 Route::get('/rent/motors', [RentController::class, 'getRentMotors'])->name('rent-motors');
 
@@ -56,8 +57,8 @@
 Route::get('/list/cars', [BasicViewController::class, 'getList']);
 
 Route::middleware(['auth', 'verified'])-> group(function () {
-    Route::get('/rent/car/{id}', [RentController::class, 'getRentCarForm']);
-    Route::get('/rent/motor/{id}', [RentController::class, 'getRentMotorForm']);
+    Route::get('/rent/car/{id}', [RentController::class, 'getRentForm']);
+    Route::get('/rent/motor/{id}', [RentController::class, 'getRentForm']);
 });
 
 Route::middleware(['auth', 'admin.authenticated'])-> group(function () {
@@ -66,4 +67,18 @@
     Route::get('/dashboard/vehicles', [AdminController::class, 'getVehiclesDashboard']);
 });
 
+Route::get('/test-up', function() {
+    return view('test-up');
+});
+
+Route::post('/test-up', function(Request $request) {
+    $path = $request->file('image')->storeAs(
+        'images', 'example.png'
+    );
+});
+
+Route::get('/uploaded', function() {
+    return view('test-view');
+});
+
 Route::fallback([BasicViewController::class, 'fallback']);
\ No newline at end of file