order popup

resources/views/admin/dashboard.blade.php

@@ -428,10 +428,13 @@ body, .container-fluid { background: #f4f7fc; }
               <tr>
                 <td>{{ $order->id }}</td>
                 <td>
-                  <a href="{{ route('admin.orders.show', $order->id) }}" class="fw-semibold text-primary">
+                  <a href="javascript:void(0)"
+                    class="fw-semibold text-primary open-order-modal"
+                    data-id="{{ $order->id }}">
                     {{ $order->order_id }}
                   </a>
                 </td>
+
                 <td>{{ $order->mark_no }}</td>
                 <td>{{ $order->origin }}</td>
                 <td>{{ $order->destination }}</td>
@@ -725,4 +728,52 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 
+<!-- ORDER DETAILS MODAL -->
+<div class="modal fade" id="orderDetailsModal" tabindex="-1">
+  <div class="modal-dialog modal-xl modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Order Details</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+
+      <div class="modal-body" id="orderDetailsBody">
+        <p class="text-center text-muted">Loading...</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+
+  document.querySelectorAll('.open-order-modal').forEach(button => {
+
+    button.addEventListener('click', function () {
+
+      let id = this.dataset.id;
+      let modal = new bootstrap.Modal(document.getElementById('orderDetailsModal'));
+
+      document.getElementById('orderDetailsBody').innerHTML =
+          "<p class='text-center text-muted'>Loading...</p>";
+
+      modal.show();
+
+      fetch(`/admin/orders/view/${id}`)
+        .then(response => response.text())
+        .then(html => {
+          document.getElementById('orderDetailsBody').innerHTML = html;
+        })
+        .catch(() => {
+          document.getElementById('orderDetailsBody').innerHTML =
+              "<p class='text-danger text-center'>Failed to load order details.</p>";
+        });
+    });
+
+  });
+
+});
+</script>
+
+
 @endsection