From bd93dd0bf729ef57996a0606d0458dccdffc2bef Mon Sep 17 00:00:00 2001
From: Russ Long <rl@tfmm.co>
Date: Fri, 1 May 2026 12:20:35 -0400
Subject: [PATCH] feat: make showcars table sortable using list.js

---
 resources/views/showcars.blade.php | 33 +++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/resources/views/showcars.blade.php b/resources/views/showcars.blade.php
index 237441c..de32108 100644
--- a/resources/views/showcars.blade.php
+++ b/resources/views/showcars.blade.php
@@ -16,24 +16,24 @@
             <div class="col-12">
                 <div class="card">
                     <div class="table-responsive">
-                        <table class="table table-vcenter card-table">
+                        <table class="table table-vcenter card-table" id="showcars-table">
                             <thead>
                                 <tr>
-                                    <th>Bidder #</th>
-                                    <th>Make</th>
-                                    <th>Model</th>
-                                    <th>Year</th>
-                                    <th>Owner</th>
+                                    <th class="sort" data-sort="bidder-num">Bidder #</th>
+                                    <th class="sort" data-sort="make">Make</th>
+                                    <th class="sort" data-sort="model">Model</th>
+                                    <th class="sort" data-sort="year">Year</th>
+                                    <th class="sort" data-sort="owner">Owner</th>
                                 </tr>
                             </thead>
-                            <tbody>
+                            <tbody class="list">
                                 @foreach($vehicles as $vehicle)
                                     <tr>
-                                        <td>{{ $vehicle->vehicleOwner->bidder_assigned_number ?? 'N/A' }}</td>
-                                        <td>{{ $vehicle->make }}</td>
-                                        <td>{{ $vehicle->model }}</td>
-                                        <td>{{ $vehicle->year }}</td>
-                                        <td>
+                                        <td class="bidder-num">{{ $vehicle->vehicleOwner->bidder_assigned_number ?? 'N/A' }}</td>
+                                        <td class="make">{{ $vehicle->make }}</td>
+                                        <td class="model">{{ $vehicle->model }}</td>
+                                        <td class="year">{{ $vehicle->year }}</td>
+                                        <td class="owner">
                                             @if($vehicle->vehicleOwner)
                                                 {{ $vehicle->vehicleOwner->bidder_fname }} {{ $vehicle->vehicleOwner->bidder_lname }}
                                             @else
@@ -51,3 +51,12 @@
     </div>
 </div>
 @endsection
+
+@section('js')
+<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
+<script>
+    new List('showcars-table', {
+        valueNames: ['bidder-num', 'make', 'model', 'year', 'owner']
+    });
+</script>
+@endsection