fix: resolve judgingentry dropdown population and visibility issues

resources/views/components/tomselect.blade.php

@@ -1,24 +1,56 @@
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
+@push('js')
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
 <style>
-    .ts-control { background-color: #ffffff !important; border: 1px solid #ced4da !important; }
+    /* Ensure visibility in both light and dark themes */
+    .ts-wrapper .ts-control {
+        background-color: #ffffff !important;
+        color: #1d273b !important; /* Dark text for white background */
+        border: 1px solid #ced4da !important;
+        padding: 0.5rem 0.75rem !important;
+        border-radius: 4px !important;
+    }
+    .ts-dropdown {
+        background-color: #ffffff !important;
+        color: #1d273b !important;
+    }
+    .ts-dropdown .active {
+        background-color: #f1f5f9 !important;
+    }
+    .ts-dropdown .option {
+        padding: 8px 12px !important;
+    }
 </style>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 <script>
     (function() {
-        const init = () => {
+        const initTomSelect = () => {
             document.querySelectorAll('select').forEach((el) => {
                 if (el.tomselect) return;
+                
+                // Skip if it's hidden or specifically excluded
+                if (el.offsetWidth === 0 && el.offsetHeight === 0) return;
+
                 new TomSelect(el, {
-                    create: false,
+                    copyClassesToDropdown: false,
-                    sortField: { field: 'text', direction: 'asc' }
+                    dropdownParent: 'body',
+                    controlInput: '<input>',
+                    sortField: [{
+                        field: 'text',
+                        direction: 'asc',
+                        func: function(a, b) {
+                            // Natural sort for bidder/car numbers
+                            return a.text.localeCompare(b.text, undefined, {numeric: true, sensitivity: 'base'});
+                        }
+                    }]
                 });
             });
         };
-        // Use a single listener to prevent multiple triggers
+
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', init);
+            document.addEventListener('DOMContentLoaded', initTomSelect);
         } else {
-            init();
+            initTomSelect();
         }
     })();
 </script>
+@endpush

resources/views/judgingentry.blade.php

@@ -20,23 +20,27 @@
                             {{ csrf_field() }}
                             <div class="col-md-4">
                                 <label for="judge_id" class="form-label">Judge</label>
-                                <select name="judge_id" id="judge_id" class="form-select" required>
+                                <select name="judgenum" id="judge_id" class="form-select" required>
+                                    <option value="">Select Judge</option>
                                     @foreach(\App\Models\Judges::all() as $judge)
-                                        <option value="{{ $judge->idjudges }}">{{ $judge->judge_number }}</option>
+                                        <option value="{{ $judge->id }}">{{ $judge->judge_number }}</option>
                                     @endforeach
                                 </select>
                             </div>
                             <div class="col-md-4">
                                 <label for="vehicle_id" class="form-label">Vehicle</label>
-                                <select name="vehicle_id" id="vehicle_id" class="form-select" required>
+                                <select name="vehnum" id="vehicle_id" class="form-select" required>
-                                    @foreach(\App\Models\Vehicles::all() as $vehicle)
+                                    <option value="">Select Vehicle</option>
-                                        <option value="{{ $vehicle->idvehicles }}">{{ $vehicle->make }} {{ $vehicle->model }}</option>
+                                    @foreach(\App\Models\Vehicles::with('vehicleOwner')->get()->sortBy(function($v){ return (int)($v->vehicleOwner->bidder_assigned_number ?? 0); }) as $vehicle)
+                                        <option value="{{ $vehicle->id }}">
+                                            {{ $vehicle->vehicleOwner->bidder_assigned_number ?? '?' }} - {{ $vehicle->make }} {{ $vehicle->model }}
+                                        </option>
                                     @endforeach
                                 </select>
                             </div>
                             <div class="col-md-4">
                                 <label for="score" class="form-label">Score</label>
-                                <input type="number" name="score" id="score" class="form-control" required>
+                                <input type="number" name="vehscore" id="score" class="form-control" required>
                             </div>
                             <div class="col-12">
                                 <button type="submit" class="btn btn-primary">Submit Score</button>
@@ -48,17 +52,6 @@
         </div>
     </div>
 </div>
-
-<script>
-    window.addEventListener('load', function() {
-        document.querySelectorAll('select').forEach(function(el) {
-            new TomSelect(el, {
-                dropdownParent: 'body',
-                create: false,
-                sortField: { field: 'text', direction: 'asc' }
-            });
-        });
-    });
-</script>
 @endsection
+
 @include('components.tomselect')