feat: make all dropdowns searchable using tomselect

resources/views/checkout_select_form.blade.php

@@ -1,34 +1,6 @@
 @extends('tablar::page')
 
 @section('content')
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
-<style>
-    .ts-wrapper .ts-control, .ts-wrapper .ts-control input { background-color: #ffffff !important; border: 1px solid #ced4da !important; }
-    .ts-dropdown { background-color: #ffffff !important; }
-</style>
-<script>
-    document.addEventListener("DOMContentLoaded", () => {
-        document.querySelectorAll('select').forEach((el) => {
-            if (el.tomselect) return;
-            new TomSelect(el, {
-                copyClassesToDropdown: false,
-                dropdownParent: 'body',
-                controlInput: '<input>',
-                sortField: {
-                    field: 'text',
-                    direction: 'asc',
-                    func: function(a, b) {
-                        const numA = parseInt(a.text, 10);
-                        const numB = parseInt(b.text, 10);
-                        return numA - numB;
-                    }
-                }
-            });
-        });
-    });
-</script>
-
 <div class="page-header d-print-none">
     <div class="container-xl">
         <div class="row g-2 align-items-center">
@@ -65,3 +37,4 @@
     </div>
 </div>
 @endsection
+@include('components.tomselect')