From 691c7e3765009bfb70335ffb8c54b5855bc49cab Mon Sep 17 00:00:00 2001
From: pbao9 <pbao.business@gmail.com>
Date: Sat, 14 Feb 2026 22:10:30 +0700
Subject: [PATCH] feat: Enhance Select2 functionality with clearable options
 and custom placeholders, and apply new card styling to the order add page.

---
 .../administrator/layout/master.blade.php     | 14 ++---
 .../administrator/pages/order/add.blade.php   | 54 +++++++++----------
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/resources/views/administrator/layout/master.blade.php b/resources/views/administrator/layout/master.blade.php
index 8db0230..97b435f 100644
--- a/resources/views/administrator/layout/master.blade.php
+++ b/resources/views/administrator/layout/master.blade.php
@@ -78,17 +78,19 @@
         window.initSelect2 = function() {
             $(".select2").each(function () {
                 if (!$(this).hasClass('select2-hidden-accessible')) {
+                    var placeholder = $(this).data('placeholder') || 'Select an option';
                     $(this).select2({
-                        allowClear: false,
+                        allowClear: true,
                         width: "100%",
+                        placeholder: placeholder,
                     });
                 }
             });
         };
 
-            $(document).ready(function () {
-                window.initSelect2();
-            });
+        $(document).ready(function () {
+            window.initSelect2();
+        });
 
         // Global ModalManager initialization
         document.addEventListener('DOMContentLoaded', function() {
@@ -107,8 +109,8 @@
 
     @stack('custom-scripts')
     <script type="text/javascript">
-        var apiMedia = '{{ route('api.GetAllImage') }}';
-        var apiUpload = '{{ route('media.upload') }}';
+        var apiMedia = "{{ route('api.GetAllImage') }}";
+        var apiUpload = "{{ route('media.upload') }}";
     </script>
 </body>
 
diff --git a/resources/views/administrator/pages/order/add.blade.php b/resources/views/administrator/pages/order/add.blade.php
index 76bed80..69cdde0 100644
--- a/resources/views/administrator/pages/order/add.blade.php
+++ b/resources/views/administrator/pages/order/add.blade.php
@@ -3,11 +3,11 @@
 
 @section('breadcrumb')
     @php
-        $breadcrumbItems = [
-            ['label' => 'Order'],
-            ['label' => 'Order Management', 'url' => route('administrator.pages.order.index')],
-            ['label' => 'Add New Order', 'active' => true],
-        ];
+$breadcrumbItems = [
+    ['label' => 'Order'],
+    ['label' => 'Order Management', 'url' => route('administrator.pages.order.index')],
+    ['label' => 'Add New Order', 'active' => true],
+];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
@@ -18,12 +18,12 @@
             @csrf
             <div class="row align-items-start">
                 <div class="col-md-8">
-                    <div class="card card-outline card-primary">
-                        <div class="card-header bg-white">
+                    <div class="card card-outline card-primary rounded-4 shadow-none">
+                        <div class="card-header bg-white rounded-top-4">
                             <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                 <li class="nav-item">
-                                    <a class="nav-link active" data-bs-toggle="tab" href="#detail" role="tab"
-                                        aria-controls="detail" aria-selected="true">Customer Information</a>
+                                    <a class="nav-link active" data-bs-toggle="tab" href="#detail" role="tab" aria-controls="detail"
+                                        aria-selected="true">Customer Information</a>
                                 </li>
                                 <li class="nav-item">
                                     <a class="nav-link" data-bs-toggle="tab" href="#product" role="tab" aria-controls="product"
@@ -36,7 +36,8 @@
                                 <div class="tab-pane fade active show" id="detail" role="tabpanel" aria-labelledby="detail">
                                     <div class="form-group mb-3">
                                         <label for="customer_id">Client User</label>
-                                        <select class="form-control select2" name="customer_id" id="customer_id">
+                                        <select class="form-control select2" name="customer_id" id="customer_id" data-placeholder="Select Customer">
+                                            <option value=""></option>
                                             @if($customer->count())
                                                 @foreach($customer->all() as $item)
                                                     <option value="{{ $item->id }}">
@@ -49,7 +50,8 @@
 
                                     <div class="form-group mb-3">
                                         <label for="payment_id">Payment Method</label>
-                                        <select class="form-control select2" name="payment_id" id="payment_id">
+                                        <select class="form-control select2" name="payment_id" id="payment_id" data-placeholder="Select Payment">
+                                            <option value=""></option>
                                             @if($payment->count())
                                                 @foreach($payment->all() as $item)
                                                     <option value="{{ $item->id }}">{{ $item->name }}</option>
@@ -60,8 +62,8 @@
 
                                     <div class="form-group mb-3">
                                         <label for="discount_id">Promotion Code</label>
-                                        <select class="form-control select2" name="discount_id" id="discount_id">
-                                            <option value="">--------</option>
+                                        <select class="form-control select2" name="discount_id" id="discount_id" data-placeholder="Select Discount">
+                                            <option value=""></option>
                                             @if($discount->count())
                                                 @foreach($discount->all() as $item)
                                                     <option value="{{ $item->id }}">{{ $item->code }}</option>
@@ -80,8 +82,8 @@
 
                                     <div class="form-group mb-3">
                                         <div class="form-check">
-                                            <input type="checkbox" name="create_invoice" id="create_invoice"
-                                                class="form-check-input" value="1" checked>
+                                            <input type="checkbox" name="create_invoice" id="create_invoice" class="form-check-input"
+                                                value="1" checked>
                                             <label class="form-check-label" for="create_invoice">
                                                 Create Invoice
                                             </label>
@@ -96,8 +98,7 @@
                                                 <div class="col-md-6 mb-3">
                                                     <label>Product Type (*)</label>
                                                     <select class="form-control select2 order_product_type"
-                                                        data-append="product[0][product_id]" name="product[0][type]"
-                                                        id="product_type">
+                                                        data-append="product[0][product_id]" name="product[0][type]" id="product_type">
                                                         <option value="">-----------</option>
                                                         @foreach(ProductTypeEnums::cases() as $type)
                                                             <option value="{{ $type->value }}">{{ $type->label() }}</option>
@@ -106,8 +107,8 @@
                                                 </div>
                                                 <div class="col-md-6 mb-3">
                                                     <label>Product (*)</label>
-                                                    <select class="form-control select2 product_id"
-                                                        name="product[0][product_id]" id="product_id">
+                                                    <select class="form-control select2 product_id" name="product[0][product_id]"
+                                                        id="product_id">
                                                         <option value="">-----------</option>
                                                     </select>
                                                 </div>
@@ -128,13 +129,12 @@
                                                 </div>
                                                 <div class="col-md-6 mb-3">
                                                     <label>Quantity (*)</label>
-                                                    <input type="number" class="form-control" name="product[0][quantity]"
-                                                        value="1" min="1">
+                                                    <input type="number" class="form-control" name="product[0][quantity]" value="1" min="1">
                                                 </div>
                                                 <div class="col-md-6 mb-3">
                                                     <label>Price Override</label>
-                                                    <input type="number" class="form-control" name="product[0][price_custom]"
-                                                        value="" min="1">
+                                                    <input type="number" class="form-control" name="product[0][price_custom]" value=""
+                                                        min="1">
                                                 </div>
                                             </div>
                                         </div>
@@ -146,11 +146,11 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                    </div>
 
-                <div class="col-md-4">
-                    <div class="card card-outline card-primary">
-                        <div class="card-header bg-white">
+                    <div class="col-md-4">
+                        <div class="card card-outline card-primary rounded-4 shadow-none">
+                            <div class="card-header bg-white rounded-top-4">
                             <h5 class="card-title m-0">Order Summary</h5>
                         </div>
                         <div class="card-body">