1579 lines
46 KiB
PHP
1579 lines
46 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'Shipment Preview')
|
|
|
|
@section('content')
|
|
<style>
|
|
/* ===== GLOBAL ENHANCEMENTS ===== */
|
|
body {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
.container-fluid {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ===== MAIN CARD DESIGN ===== */
|
|
.card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
background: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== SHIPMENT HEADER DESIGN ===== */
|
|
.shipment-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 25px 30px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shipment-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
|
animation: shimmer 3s infinite linear;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%) rotate(45deg); }
|
|
100% { transform: translateX(100%) rotate(45deg); }
|
|
}
|
|
|
|
.shipment-header h3 {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.shipment-header .btn-primary {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shipment-header .btn-primary:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ===== SECTION HEADERS ===== */
|
|
.fw-bold {
|
|
color: #2d3748;
|
|
font-weight: 700;
|
|
margin: 30px 25px 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
position: relative;
|
|
}
|
|
|
|
.fw-bold i {
|
|
color: #667eea;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* ===== SHIPMENT INFO TABLE ===== */
|
|
.table.table-bordered.table-hover {
|
|
margin: 0 25px 30px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.table.table-bordered.table-hover th {
|
|
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
|
|
color: #4a5568;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
padding: 18px 20px;
|
|
width: 200px;
|
|
border-right: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.table.table-bordered.table-hover td {
|
|
padding: 18px 20px;
|
|
font-size: 1rem;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.table.table-bordered.table-hover tbody tr {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table.table-bordered.table-hover tbody tr:hover {
|
|
background: linear-gradient(90deg, #f8fafc, #f1f5f9);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ===== STATUS BADGE ENHANCEMENT ===== */
|
|
.badge {
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.badge.bg-warning {
|
|
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
|
|
color: white;
|
|
}
|
|
|
|
.badge.bg-info {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
|
|
color: white;
|
|
}
|
|
|
|
.badge.bg-primary {
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
|
|
color: white;
|
|
}
|
|
|
|
.badge.bg-success {
|
|
background: linear-gradient(135deg, #10b981, #059669) !important;
|
|
color: white;
|
|
}
|
|
|
|
.badge.bg-secondary {
|
|
background: linear-gradient(135deg, #6b7280, #4b5563) !important;
|
|
color: white;
|
|
}
|
|
|
|
/* ===== ORDERS TABLE DESIGN ===== */
|
|
.table-responsive {
|
|
margin: 0 25px 30px;
|
|
}
|
|
|
|
.table.table-hover.table-striped {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.table.table-hover.table-striped thead {
|
|
background: linear-gradient(135deg, #2937, #374151);
|
|
}
|
|
|
|
.table.table-hover.table-striped thead th {
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 18px 15px;
|
|
border: none;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
border-bottom: 2px solid #4b5563;
|
|
}
|
|
|
|
.table.table-hover.table-striped thead th:first-child {
|
|
border-radius: 12px 0 0 0;
|
|
}
|
|
|
|
.table.table-hover.table-striped thead th:last-child {
|
|
border-radius: 0 12px 0 0;
|
|
}
|
|
|
|
.table.table-hover.table-striped tbody tr {
|
|
border-bottom: 1px solid #f3f4f6;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table.table-hover.table-striped tbody tr:nth-of-type(odd) {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.table.table-hover.table-striped tbody tr:nth-of-type(even) {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.table.table-hover.table-striped tbody tr:hover {
|
|
background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.table.table-hover.table-striped tbody td {
|
|
padding: 15px;
|
|
vertical-align: middle;
|
|
color: #4a5568;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* ===== DATA BADGES ===== */
|
|
.badge.bg-light {
|
|
background: #f1f5f9 !important;
|
|
color: #4b5563;
|
|
border: 1px solid #e2e8f0;
|
|
padding: 5px 12px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== REMOVE BUTTON ===== */
|
|
.btn-outline-danger {
|
|
background: linear-gradient(135deg, #fef2f2, #fee2e2);
|
|
border: 1px solid #fecaca;
|
|
color: #dc2626;
|
|
padding: 6px 15px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-outline-danger:hover {
|
|
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
|
color: white;
|
|
border-color: #dc2626;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
|
|
}
|
|
|
|
/* ===== SHIPMENT TOTALS SECTION ===== */
|
|
.row {
|
|
margin: 0 25px;
|
|
}
|
|
|
|
.table.table-bordered {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #e2e8f0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.table.table-bordered th {
|
|
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
|
|
color: #4a5568;
|
|
font-weight: 600;
|
|
padding: 15px 20px;
|
|
border-right: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.table.table-bordered td {
|
|
padding: 15px 20px;
|
|
color: #2d3748;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* ===== TOTAL AMOUNT ALERT ===== */
|
|
.alert-success {
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
color: white;
|
|
margin: 0 25px 30px;
|
|
box-shadow: 0 6px 25px rgba(16, 185, 129, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.alert-success::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #10b981, #059669, #10b981);
|
|
}
|
|
|
|
.alert-success h6 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.alert-success .float-end {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* ===== BACK BUTTON ===== */
|
|
.mt-4 {
|
|
margin: 30px 25px 25px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
|
|
border: 1px solid #d1d5db;
|
|
color: #4b5568;
|
|
padding: 12px 25px;
|
|
border-radius: 10px;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
|
|
color: #374151;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* ===== MODAL DESIGN (FROM CREATE NEW SHIPMENT) ===== */
|
|
.modal-content {
|
|
border-radius: 20px;
|
|
border: none;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 25px 30px 15px;
|
|
border-radius: 20px 20px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 5%;
|
|
width: 90%;
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.modal-title {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: invert(1);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.btn-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-close-white {
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.8;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-close-white:hover {
|
|
opacity: 1;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* ===== MODAL BODY ===== */
|
|
.modal-body {
|
|
padding: 30px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* ===== FORM STYLES (FROM CREATE NEW SHIPMENT) ===== */
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #5a6c7d;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 10px;
|
|
border: 1px solid #e2e8f0;
|
|
padding: 12px 16px;
|
|
font-size: 15px;
|
|
transition: all 0.3s ease;
|
|
background: #fafbfc;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #a3bffa;
|
|
box-shadow: 0 0 0 3px rgba(163, 191, 250, 0.2);
|
|
background: white;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: #a0aec0;
|
|
}
|
|
|
|
/* Date Input Styling */
|
|
input[type="date"] {
|
|
position: relative;
|
|
}
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
background: transparent;
|
|
bottom: 0;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
height: auto;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: auto;
|
|
}
|
|
|
|
input[type="date"] {
|
|
position: relative;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
input[type="date"]:after {
|
|
content: "📅";
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* ===== BUTTON STYLES (FROM CREATE NEW SHIPMENT) ===== */
|
|
.btn-cancel {
|
|
background: #f7fafc;
|
|
color: #718096;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
padding: 12px 30px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #edf2f7;
|
|
color: #4a5568;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.btn-create {
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
border-radius: 10px;
|
|
padding: 12px 35px;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-create:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(72, 187, 120, 0.3);
|
|
background: linear-gradient(135deg, #38a169, #2f855a);
|
|
}
|
|
|
|
/* ===== CUSTOM TABLE IN MODAL (FROM CREATE NEW SHIPMENT) ===== */
|
|
.custom-table-modal {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
margin: 0;
|
|
min-width: 1300px;
|
|
}
|
|
|
|
.custom-table-modal thead th {
|
|
background: linear-gradient(135deg, #ebf8ff, #f0fff4);
|
|
color: #2b6cb0;
|
|
font-weight: 600;
|
|
padding: 16px 10px;
|
|
border: 1px solid #e2e8f0;
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.custom-table-modal thead th:first-child {
|
|
border-top-left-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
}
|
|
|
|
.custom-table-modal thead th:last-child {
|
|
border-top-right-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
|
|
.custom-table-modal tbody tr {
|
|
background: #fdfdfe;
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.custom-table-modal tbody tr:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
border-color: #e2e8f0;
|
|
background: white;
|
|
}
|
|
|
|
.custom-table-modal tbody td {
|
|
padding: 14px 10px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: none;
|
|
font-weight: 500;
|
|
position: relative;
|
|
color: #4a5568;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.custom-table-modal tbody tr td:first-child {
|
|
border-top-left-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.custom-table-modal tbody tr td:last-child {
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
/* Checkbox Styling */
|
|
input[type="checkbox"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 6px;
|
|
border: 2px solid #cbd5e0;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
background: #f7fafc;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background: #4361ee;
|
|
border-color: #4361ee;
|
|
}
|
|
|
|
.form-check-input {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: #667eea;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
/* ===== ORDERS SELECTION TABLE ===== */
|
|
.h6.fw-bold {
|
|
color: #2d3748;
|
|
margin-bottom: 15px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.alert-warning {
|
|
background: linear-gradient(135deg, #fef3c7, #fde68a);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: #92400e;
|
|
padding: 15px 20px;
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
|
|
/* TABLE CONTAINER WITHOUT VERTICAL SCROLL */
|
|
.table-responsive.border.rounded {
|
|
border: 1px solid #e2e8f0 !important;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
|
max-height: none !important;
|
|
overflow-y: visible !important;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-responsive.border.rounded table {
|
|
margin-bottom: 0;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.table.table-hover.align-middle {
|
|
margin: 0;
|
|
}
|
|
|
|
/* STICKY HEADER */
|
|
.table.table-hover.align-middle thead.table-light {
|
|
background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.table.table-hover.align-middle thead th {
|
|
font-weight: 600;
|
|
color: #4a5568 !important;
|
|
padding: 15px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* TABLE ROWS */
|
|
.table.table-hover.align-middle tbody tr {
|
|
border-bottom: 1px solid #f3f4f6;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table.table-hover.align-middle tbody tr:hover {
|
|
background: linear-gradient(90deg, #f8fafc, #f1f5f9);
|
|
}
|
|
|
|
.table.table-hover.align-middle tbody td {
|
|
padding: 12px 15px;
|
|
vertical-align: middle;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ===== MODAL FOOTER ===== */
|
|
.modal-footer.bg-light {
|
|
background: #f8fafc !important;
|
|
border-top: 1px solid #e2e8f0;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.modal-footer .btn-secondary {
|
|
background: #f1f5f9;
|
|
border: 1px solid #d1d5db;
|
|
color: #6b7280;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-footer .btn-primary {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 25px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-footer .btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
/* ===== TEXT COLORS ===== */
|
|
.text-primary {
|
|
color: #667eea !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-success {
|
|
color: #10b981 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== PAGINATION STYLES ===== */
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 25px;
|
|
margin: 20px 25px 10px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pagination-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pagination-btn {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
color: #4a5568;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.pagination-btn:hover:not(:disabled) {
|
|
background: #667eea;
|
|
color: white;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.pagination-btn:disabled {
|
|
background: #f8fafc;
|
|
color: #cbd5e0;
|
|
border-color: #e2e8f0;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.pagination-page-btn {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
color: #4a5568;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination-page-btn:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.pagination-page-btn.active {
|
|
background: #667eea;
|
|
color: white;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.pagination-pages {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.pagination-ellipsis {
|
|
color: #9ba5bb;
|
|
font-size: 14px;
|
|
padding: 0 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 36px;
|
|
}
|
|
|
|
/* ===== RESPONSIVE DESIGN ===== */
|
|
@media (max-width: 768px) {
|
|
.container-fluid {
|
|
padding: 10px;
|
|
}
|
|
|
|
.shipment-header {
|
|
padding: 20px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.shipment-header h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.fw-bold {
|
|
margin: 20px 15px 15px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.table.table-bordered.table-hover,
|
|
.table-responsive,
|
|
.row,
|
|
.alert-success,
|
|
.mt-4 {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.table.table-hover.table-striped thead th,
|
|
.table.table-hover.table-striped tbody td {
|
|
padding: 10px 8px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.row.g-3.mb-3 {
|
|
padding: 15px;
|
|
}
|
|
|
|
/* MOBILE VERSION साठी horizontal scroll राहील */
|
|
.table-responsive.border.rounded {
|
|
max-height: none;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-responsive.border.rounded table {
|
|
min-width: 1000px;
|
|
}
|
|
|
|
/* Pagination responsive */
|
|
.pagination-container {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
align-items: stretch;
|
|
margin: 20px 15px 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.pagination-controls {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pagination-info {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.shipment-header .btn-primary {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table-responsive {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.table.table-hover.table-striped {
|
|
min-width: 1000px;
|
|
}
|
|
|
|
.table.table-bordered.table-hover th,
|
|
.table.table-bordered.table-hover td {
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.alert-success {
|
|
padding: 20px;
|
|
}
|
|
|
|
.alert-success .float-end {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.pagination-page-btn {
|
|
min-width: 32px;
|
|
height: 32px;
|
|
padding: 4px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.pagination-btn {
|
|
min-width: 32px;
|
|
height: 32px;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed !important;
|
|
transform: none !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="card shadow-sm">
|
|
<div class="shipment-header d-flex justify-content-between align-items-center p-4 border-bottom">
|
|
<h3 class="mb-0">
|
|
<i class="bi bi-box-seam me-2"></i>
|
|
Shipment Details - {{ $shipment->shipment_id }}
|
|
</h3>
|
|
|
|
{{-- SHOW BUTTON ONLY FOR PENDING --}}
|
|
@if($shipment->status === 'pending')
|
|
<button type="button"
|
|
class="btn btn-primary btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#createShipmentModal">
|
|
<i class="bi bi-plus-circle me-1"></i>
|
|
Add Orders to This Shipment
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<h5 class="fw-bold mt-4 mb-3">
|
|
<i class="bi bi-ship me-2"></i>
|
|
Shipment Information
|
|
</h5>
|
|
<table class="table table-bordered table-hover">
|
|
<tbody>
|
|
<tr>
|
|
<th style="width: 200px;">Shipment ID</th>
|
|
<td class="fw-bold text-primary">{{ $shipment->shipment_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Origin</th>
|
|
<td>{{ $shipment->origin }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Destination</th>
|
|
<td>{{ $shipment->destination }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td>
|
|
@php
|
|
$statusColors = [
|
|
'pending' => 'warning',
|
|
'loading' => 'info',
|
|
'in_transit' => 'primary',
|
|
'dispatched' => 'success',
|
|
'delivered' => 'success',
|
|
];
|
|
$statusColor = $statusColors[$shipment->status] ?? 'secondary';
|
|
@endphp
|
|
<span class="badge bg-{{ $statusColor }}">
|
|
{{ ucfirst(str_replace('_', ' ', $shipment->status)) }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Date</th>
|
|
<td>{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="fw-bold mt-5 mb-3">
|
|
<i class="bi bi-collection me-2"></i>
|
|
Orders Contained in Shipment
|
|
</h5>
|
|
|
|
@if($shipment->orders->isEmpty())
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
No orders found in this shipment.
|
|
</div>
|
|
@else
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-striped align-middle" id="ordersTable">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Order ID</th>
|
|
<th>Origin</th>
|
|
<th>Destination</th>
|
|
<th>Mark No</th>
|
|
<th>Description</th>
|
|
<th>CTN</th>
|
|
<th>QTY</th>
|
|
<th>TTL/QTY</th>
|
|
<th>KG</th>
|
|
<th>TTL/KG</th>
|
|
<th>Amount</th>
|
|
<th style="width: 100px;">Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ordersTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination-container">
|
|
<div class="pagination-info" id="pageInfo">
|
|
Showing <span id="startCount">1</span> to <span id="endCount">0</span> of
|
|
<span id="totalCount">0</span> entries
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<button class="pagination-btn" id="prevPageBtn" title="Previous page" disabled>
|
|
<i class="bi bi-chevron-left"></i>
|
|
</button>
|
|
<div class="pagination-pages" id="paginationPages">
|
|
</div>
|
|
<button class="pagination-btn" id="nextPageBtn" title="Next page" disabled>
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<h5 class="fw-bold mt-5 mb-3">
|
|
<i class="bi bi-calculator me-2"></i>
|
|
Shipment Totals
|
|
</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th style="width: 150px;">Total CTN</th>
|
|
<td class="fw-bold">{{ $shipment->total_ctn }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total QTY</th>
|
|
<td class="fw-bold">{{ $shipment->total_qty }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total TTL QTY</th>
|
|
<td class="fw-bold">{{ $shipment->total_ttl_qty }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th style="width: 150px;">Total CBM</th>
|
|
<td class="fw-bold">{{ $shipment->total_cbm }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total KG</th>
|
|
<td class="fw-bold">{{ $shipment->total_kg }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Total TTL KG</th>
|
|
<td class="fw-bold">{{ $shipment->total_ttl_kg }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-success mt-3">
|
|
<h6 class="mb-0">
|
|
<i class="bi bi-currency-rupee me-2"></i>
|
|
<strong>Total Amount:</strong>
|
|
<span class="float-end">₹{{ number_format($shipment->total_amount, 2) }}</span>
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
|
|
<i class="bi bi-arrow-left me-2"></i>
|
|
Back to Shipments
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createShipmentModalLabel">
|
|
<i class="bi bi-plus-circle me-2"></i>
|
|
Add Orders to Shipment {{ $shipment->shipment_id }}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<form id="createShipmentForm" method="POST" action="{{ route('admin.shipments.addOrders', $shipment->id) }}">
|
|
@csrf
|
|
|
|
<input type="hidden" name="shipment_id" value="{{ $shipment->id }}">
|
|
|
|
<div class="row g-3 pb-2">
|
|
<div class="col-md-4">
|
|
<label class="form-label">
|
|
<i class="bi bi-geo-alt me-2"></i>
|
|
Origin
|
|
</label>
|
|
<input type="text" class="form-control" value="{{ $shipment->origin }}" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label class="form-label">
|
|
<i class="bi bi-geo me-2"></i>
|
|
Destination
|
|
</label>
|
|
<input type="text" class="form-control" value="{{ $shipment->destination }}" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label class="form-label">
|
|
<i class="bi bi-calendar-event me-2"></i>
|
|
Shipment Date
|
|
</label>
|
|
<input type="text" class="form-control"
|
|
value="{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('Y-m-d') }}"
|
|
readonly>
|
|
</div>
|
|
</div>
|
|
|
|
@php
|
|
$usedOrderIds = \App\Models\ShipmentItem::pluck('order_id')->toArray();
|
|
$availableOrders = \App\Models\Order::whereNotIn('id', $usedOrderIds)->get();
|
|
@endphp
|
|
|
|
<h6 class="fw-bold mb-2">
|
|
<i class="bi bi-collection me-2"></i>
|
|
Select Orders to add <span class="text-danger">*</span>
|
|
</h6>
|
|
|
|
@if($availableOrders->isEmpty())
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
No available orders. All orders are already assigned to shipments.
|
|
</div>
|
|
@else
|
|
<div class="table-responsive mt-4" style="border-radius:12px;">
|
|
<table class="custom-table-modal">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Order ID</th>
|
|
<th>Origin</th>
|
|
<th>Destination</th>
|
|
<th>CTN</th>
|
|
<th>QTY</th>
|
|
<th>TTL/QTY</th>
|
|
<th>CBM</th>
|
|
<th>TTL CBM</th>
|
|
<th>KG</th>
|
|
<th>TTL KG</th>
|
|
<th>Amount (₹)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="availableOrdersTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination-container mt-3" id="modalPaginationContainer">
|
|
<div class="pagination-info" id="modalPageInfo">
|
|
Showing <span id="modalStartCount">1</span> to <span id="modalEndCount">0</span> of
|
|
<span id="modalTotalCount">0</span> entries
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<button class="pagination-btn" id="modalPrevPageBtn" title="Previous page" disabled>
|
|
<i class="bi bi-chevron-left"></i>
|
|
</button>
|
|
<div class="pagination-pages" id="modalPaginationPages">
|
|
</div>
|
|
<button class="pagination-btn" id="modalNextPageBtn" title="Next page" disabled>
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<small class="form-text text-muted d-block mt-2">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Use the checkboxes to select one or more orders for this shipment.
|
|
</small>
|
|
@endif
|
|
|
|
@error('order_ids')
|
|
<div class="invalid-feedback d-block">{{ $message }}</div>
|
|
@enderror
|
|
|
|
<div class="d-flex justify-content-end mt-4 mb-2">
|
|
<button type="button" class="btn-cancel me-3" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn-create" onclick="submitCreateShipmentForm()">
|
|
<i class="bi bi-check-lg me-2"></i>Add Orders
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// --- Existing Shipment Orders Pagination Variables ---
|
|
let currentPage = 1;
|
|
const itemsPerPage = 10;
|
|
let orders = @json($shipment->orders);
|
|
|
|
// --- New Available Orders Modal Pagination Variables ---
|
|
let modalCurrentPage = 1;
|
|
const modalItemsPerPage = 10;
|
|
let availableOrders = @json($availableOrders);
|
|
|
|
|
|
// Initialize pagination when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialization for main shipment orders table
|
|
if (orders.length > 0) {
|
|
renderOrdersTable();
|
|
updatePaginationControls();
|
|
|
|
// Bind pagination events
|
|
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
|
|
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
|
|
} else {
|
|
// If no orders, hide pagination
|
|
const container = document.querySelector('.pagination-container');
|
|
if (container) {
|
|
container.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Initialization for modal available orders table
|
|
if (availableOrders.length > 0) {
|
|
renderAvailableOrdersTable();
|
|
updateModalPaginationControls();
|
|
|
|
// Bind modal pagination events
|
|
document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
|
|
document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
|
|
} else {
|
|
// If no available orders, hide pagination container in modal
|
|
const modalContainer = document.getElementById('modalPaginationContainer');
|
|
if (modalContainer) {
|
|
modalContainer.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// =========================================================================
|
|
// --- EXISTING SHIPMENT ORDERS PAGINATION FUNCTIONS ---
|
|
// =========================================================================
|
|
|
|
// Function to go to previous page (main table)
|
|
function goToPreviousPage() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
renderOrdersTable();
|
|
updatePaginationControls();
|
|
}
|
|
}
|
|
|
|
// Function to go to next page (main table)
|
|
function goToNextPage() {
|
|
const totalPages = Math.ceil(orders.length / itemsPerPage);
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
renderOrdersTable();
|
|
updatePaginationControls();
|
|
}
|
|
}
|
|
|
|
// Function to update pagination controls (main table)
|
|
function updatePaginationControls() {
|
|
const totalPages = Math.ceil(orders.length / itemsPerPage);
|
|
const prevBtn = document.getElementById('prevPageBtn');
|
|
const nextBtn = document.getElementById('nextPageBtn');
|
|
const paginationPages = document.getElementById('paginationPages');
|
|
|
|
// Update button states
|
|
prevBtn.disabled = currentPage === 1;
|
|
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
|
|
|
|
// Update page info
|
|
const startIndex = (currentPage - 1) * itemsPerPage + 1;
|
|
const endIndex = Math.min(currentPage * itemsPerPage, orders.length);
|
|
document.getElementById('startCount').textContent = startIndex;
|
|
document.getElementById('endCount').textContent = endIndex;
|
|
document.getElementById('totalCount').textContent = orders.length;
|
|
|
|
// Generate page numbers
|
|
paginationPages.innerHTML = '';
|
|
|
|
if (totalPages <= 7) {
|
|
// Show all pages for 7 or less
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
addPageButton(i, paginationPages, totalPages, false); // false for main table
|
|
}
|
|
} else {
|
|
// Show first page, current page range, and last page
|
|
addPageButton(1, paginationPages, totalPages, false);
|
|
|
|
if (currentPage > 3) {
|
|
const ellipsis = document.createElement('span');
|
|
ellipsis.className = 'pagination-ellipsis';
|
|
ellipsis.textContent = '...';
|
|
paginationPages.appendChild(ellipsis);
|
|
}
|
|
|
|
const start = Math.max(2, currentPage - 1);
|
|
const end = Math.min(totalPages - 1, currentPage + 1);
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
addPageButton(i, paginationPages, totalPages, false);
|
|
}
|
|
|
|
if (currentPage < totalPages - 2) {
|
|
const ellipsis = document.createElement('span');
|
|
ellipsis.className = 'pagination-ellipsis';
|
|
ellipsis.textContent = '...';
|
|
paginationPages.appendChild(ellipsis);
|
|
}
|
|
|
|
addPageButton(totalPages, paginationPages, totalPages, false);
|
|
}
|
|
}
|
|
|
|
// Function to add page button (main table)
|
|
function addPageButton(pageNumber, container, totalPages, isModal) {
|
|
const button = document.createElement('button');
|
|
button.className = 'pagination-page-btn';
|
|
const activePage = isModal ? modalCurrentPage : currentPage;
|
|
const renderFunction = isModal ? renderAvailableOrdersTable : renderOrdersTable;
|
|
const updateFunction = isModal ? updateModalPaginationControls : updatePaginationControls;
|
|
|
|
if (pageNumber === activePage) {
|
|
button.classList.add('active');
|
|
}
|
|
button.textContent = pageNumber;
|
|
button.addEventListener('click', () => {
|
|
if (isModal) {
|
|
modalCurrentPage = pageNumber;
|
|
} else {
|
|
currentPage = pageNumber;
|
|
}
|
|
renderFunction();
|
|
updateFunction();
|
|
});
|
|
container.appendChild(button);
|
|
}
|
|
|
|
// Function to render orders table with pagination (main table)
|
|
function renderOrdersTable() {
|
|
const tbody = document.getElementById('ordersTableBody');
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const paginatedOrders = orders.slice(startIndex, endIndex);
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (paginatedOrders.length === 0) {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td colspan="12" class="text-center py-4 text-muted">
|
|
No orders found
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
return;
|
|
}
|
|
|
|
paginatedOrders.forEach(order => {
|
|
const row = document.createElement('tr');
|
|
|
|
// Fixed: Correct route parameter - use the shipment's ID
|
|
const removeRoute = "{{ route('admin.shipments.removeOrder', ['shipment' => $shipment->id, 'order' => 'ORDER_ID']) }}".replace('ORDER_ID', order.id);
|
|
|
|
row.innerHTML = `
|
|
<td class="fw-bold">${order.order_id}</td>
|
|
<td>${order.origin || 'N/A'}</td>
|
|
<td>${order.destination || 'N/A'}</td>
|
|
<td>${order.mark_no || 'ITEM001'}</td>
|
|
<td>${order.description || 'Manufacturing Equipment'}</td>
|
|
<td><span class="badge bg-light text-dark">${order.ctn}</span></td>
|
|
<td><span class="badge bg-light text-dark">${order.qty}</span></td>
|
|
<td>${order.ttl_qty}</td>
|
|
<td>${order.kg || '0.00'}</td>
|
|
<td>${order.ttl_kg || '0.00'}</td>
|
|
<td class="fw-bold text-success">₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
|
<td>
|
|
@if($shipment->status === 'pending')
|
|
<form method="POST" action="${removeRoute}" onsubmit="return confirm('Are you sure you want to remove this order from shipment?');">
|
|
@csrf @method('DELETE')
|
|
<button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
|
|
</form>
|
|
@endif
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
|
|
// =========================================================================
|
|
// --- NEW MODAL AVAILABLE ORDERS PAGINATION FUNCTIONS ---
|
|
// =========================================================================
|
|
|
|
// Function to go to previous page (modal table)
|
|
function goToModalPreviousPage() {
|
|
if (modalCurrentPage > 1) {
|
|
modalCurrentPage--;
|
|
renderAvailableOrdersTable();
|
|
updateModalPaginationControls();
|
|
}
|
|
}
|
|
|
|
// Function to go to next page (modal table)
|
|
function goToModalNextPage() {
|
|
const totalPages = Math.ceil(availableOrders.length / modalItemsPerPage);
|
|
if (modalCurrentPage < totalPages) {
|
|
modalCurrentPage++;
|
|
renderAvailableOrdersTable();
|
|
updateModalPaginationControls();
|
|
}
|
|
}
|
|
|
|
// Function to update pagination controls (modal table)
|
|
function updateModalPaginationControls() {
|
|
const totalPages = Math.ceil(availableOrders.length / modalItemsPerPage);
|
|
const prevBtn = document.getElementById('modalPrevPageBtn');
|
|
const nextBtn = document.getElementById('modalNextPageBtn');
|
|
const paginationPages = document.getElementById('modalPaginationPages');
|
|
|
|
// Update button states
|
|
prevBtn.disabled = modalCurrentPage === 1;
|
|
nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
|
|
|
|
// Update page info
|
|
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
|
|
const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, availableOrders.length);
|
|
document.getElementById('modalStartCount').textContent = startIndex;
|
|
document.getElementById('modalEndCount').textContent = endIndex;
|
|
document.getElementById('modalTotalCount').textContent = availableOrders.length;
|
|
|
|
// Generate page numbers
|
|
paginationPages.innerHTML = '';
|
|
|
|
if (totalPages <= 7) {
|
|
// Show all pages for 7 or less
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
addPageButton(i, paginationPages, totalPages, true); // true for modal table
|
|
}
|
|
} else {
|
|
// Show first page, current page range, and last page
|
|
addPageButton(1, paginationPages, totalPages, true);
|
|
|
|
if (modalCurrentPage > 3) {
|
|
const ellipsis = document.createElement('span');
|
|
ellipsis.className = 'pagination-ellipsis';
|
|
ellipsis.textContent = '...';
|
|
paginationPages.appendChild(ellipsis);
|
|
}
|
|
|
|
const start = Math.max(2, modalCurrentPage - 1);
|
|
const end = Math.min(totalPages - 1, modalCurrentPage + 1);
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
addPageButton(i, paginationPages, totalPages, true);
|
|
}
|
|
|
|
if (modalCurrentPage < totalPages - 2) {
|
|
const ellipsis = document.createElement('span');
|
|
ellipsis.className = 'pagination-ellipsis';
|
|
ellipsis.textContent = '...';
|
|
paginationPages.appendChild(ellipsis);
|
|
}
|
|
|
|
addPageButton(totalPages, paginationPages, totalPages, true);
|
|
}
|
|
}
|
|
|
|
// Function to render orders table with pagination (modal table)
|
|
function renderAvailableOrdersTable() {
|
|
const tbody = document.getElementById('availableOrdersTableBody');
|
|
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
|
|
const endIndex = startIndex + modalItemsPerPage;
|
|
const paginatedOrders = availableOrders.slice(startIndex, endIndex);
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (paginatedOrders.length === 0) {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td colspan="12" class="text-center py-4 text-muted" style="border-radius:10px;">
|
|
No orders found
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
return;
|
|
}
|
|
|
|
paginatedOrders.forEach(order => {
|
|
const row = document.createElement('tr');
|
|
|
|
row.innerHTML = `
|
|
<td>
|
|
<input type="checkbox"
|
|
class="form-check-input order-checkbox"
|
|
name="order_ids[]"
|
|
value="${order.id}">
|
|
</td>
|
|
<td class="fw-bold text-primary">${order.order_id}</td>
|
|
<td>${order.origin || 'N/A'}</td>
|
|
<td>${order.destination || 'N/A'}</td>
|
|
<td>${order.ctn}</td>
|
|
<td>${order.qty}</td>
|
|
<td>${order.ttl_qty}</td>
|
|
<td>${order.cbm || '0.000'}</td>
|
|
<td>${order.ttl_cbm || '0.000'}</td>
|
|
<td>${order.kg || '0.000'}</td>
|
|
<td>${order.ttl_kg || '0.000'}</td>
|
|
<td class="fw-bold text-success">
|
|
₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
|
|
// =========================================================================
|
|
// --- UTILITY FUNCTIONS ---
|
|
// =========================================================================
|
|
|
|
// Function to submit create shipment form
|
|
function submitCreateShipmentForm() {
|
|
const form = document.getElementById('createShipmentForm');
|
|
const checkboxes = document.querySelectorAll('.order-checkbox:checked');
|
|
|
|
if (!checkboxes.length) {
|
|
alert('Please select at least one order');
|
|
return false;
|
|
}
|
|
form.submit();
|
|
}
|
|
</script>
|
|
@endsection |