975 lines
31 KiB
PHP
975 lines
31 KiB
PHP
|
@extends('admin.layouts.app')
|
||
|
|
|
||
|
|
@section('page-title', 'Shipment Details')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* ===== ANIMATIONS ===== */
|
||
|
|
.fade-in {
|
||
|
|
animation: fadeIn 0.6s ease-out;
|
||
|
|
}
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(10px); }
|
||
|
|
to { opacity: 1; transform: translateY(0px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== CARD STYLES ===== */
|
||
|
|
.card {
|
||
|
|
border-radius: 20px;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0 15px 35px rgba(13, 38, 76, 0.08);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
|
|
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card:hover {
|
||
|
|
transform: translateY(-6px);
|
||
|
|
box-shadow: 0 20px 40px rgba(103, 126, 234, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header h5 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 800;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== GLASSMORPHISM BUTTON ===== */
|
||
|
|
.glass-btn {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(103, 126, 234, 0.25) 0%,
|
||
|
|
rgba(118, 75, 162, 0.25) 100%
|
||
|
|
);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
-webkit-backdrop-filter: blur(12px);
|
||
|
|
border: 1.5px solid rgba(255, 255, 255, 0.4);
|
||
|
|
color: #ffffff !important;
|
||
|
|
padding: 12px 24px;
|
||
|
|
border-radius: 14px;
|
||
|
|
font-weight: 700;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
box-shadow:
|
||
|
|
0 8px 32px rgba(103, 126, 234, 0.2),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(103, 126, 234, 0.4) 0%,
|
||
|
|
rgba(118, 75, 162, 0.4) 100%
|
||
|
|
);
|
||
|
|
z-index: -1;
|
||
|
|
transition: opacity 0.4s ease;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn:hover {
|
||
|
|
transform: translateY(-4px) scale(1.05);
|
||
|
|
box-shadow:
|
||
|
|
0 15px 40px rgba(103, 126, 234, 0.35),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
border-color: rgba(255, 255, 255, 0.6);
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(103, 126, 234, 0.15) 0%,
|
||
|
|
rgba(118, 75, 162, 0.15) 100%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn:hover::before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn:active {
|
||
|
|
transform: translateY(-1px) scale(0.98);
|
||
|
|
transition: transform 0.1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn i {
|
||
|
|
font-size: 18px;
|
||
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== HEADER STYLES ===== */
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: #fff;
|
||
|
|
padding: 22px 28px;
|
||
|
|
border-radius: 20px 20px 0 0 !important;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: linear-gradient(
|
||
|
|
to right,
|
||
|
|
rgba(255, 255, 255, 0.1) 0%,
|
||
|
|
rgba(255, 255, 255, 0.05) 100%
|
||
|
|
);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-controls {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-cancel-btn {
|
||
|
|
background: rgba(255, 255, 255, 0.15);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
color: rgba(255, 255, 255, 0.95);
|
||
|
|
border: 1.5px solid rgba(255, 255, 255, 0.3);
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-cancel-btn:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.25);
|
||
|
|
border-color: rgba(255, 255, 255, 0.5);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== INFO BLOCKS ===== */
|
||
|
|
.shipment-info-box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 24px;
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-item {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 220px;
|
||
|
|
background: linear-gradient(145deg, #ffffff, #f8fafc);
|
||
|
|
padding: 24px;
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow:
|
||
|
|
0 5px 20px rgba(0, 0, 0, 0.05),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||
|
|
text-align: center;
|
||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-item::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.4s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-item:hover {
|
||
|
|
transform: translateY(-6px);
|
||
|
|
box-shadow:
|
||
|
|
0 15px 35px rgba(103, 126, 234, 0.15),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-item:hover::before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-label {
|
||
|
|
color: #64748b;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-info-value {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 800;
|
||
|
|
color: #1e293b;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== TOTAL BOXES ===== */
|
||
|
|
.total-box {
|
||
|
|
background: linear-gradient(145deg, #ffffff, #f8fafc);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow:
|
||
|
|
0 5px 20px rgba(0, 0, 0, 0.05),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||
|
|
text-align: center;
|
||
|
|
min-width: 160px;
|
||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-box::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 3px;
|
||
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
||
|
|
transform: translateX(-100%);
|
||
|
|
transition: transform 0.4s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-box:hover {
|
||
|
|
transform: translateY(-5px) scale(1.03);
|
||
|
|
box-shadow:
|
||
|
|
0 15px 35px rgba(103, 126, 234, 0.15),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-box:hover::after {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-title {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #64748b;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-value {
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: 900;
|
||
|
|
color: #1e293b;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== TABLE STYLES ===== */
|
||
|
|
.table {
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 0;
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table thead th {
|
||
|
|
background: #667eea ;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 700;
|
||
|
|
padding: 18px;
|
||
|
|
white-space: nowrap;
|
||
|
|
border: none;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table thead th::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 15px;
|
||
|
|
right: 15px;
|
||
|
|
height: 1px;
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table tbody tr {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border-left: 3px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table tbody tr:hover {
|
||
|
|
background: linear-gradient(90deg, rgba(103, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
|
||
|
|
transform: translateX(4px);
|
||
|
|
border-left: 3px solid #667eea;
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table tbody td {
|
||
|
|
padding: 16px;
|
||
|
|
vertical-align: middle;
|
||
|
|
white-space: nowrap;
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== GLASSMORPHISM MODAL ===== */
|
||
|
|
#newOrderModal .modal-content {
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
backdrop-filter: blur(20px) saturate(180%);
|
||
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
|
|
border-radius: 24px;
|
||
|
|
border: 1.5px solid rgba(255, 255, 255, 0.3);
|
||
|
|
box-shadow:
|
||
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .modal-header {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||
|
|
padding: 24px 32px;
|
||
|
|
border-radius: 24px 24px 0 0;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .modal-header::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: linear-gradient(
|
||
|
|
to right,
|
||
|
|
rgba(255, 255, 255, 0.1) 0%,
|
||
|
|
rgba(255, 255, 255, 0.05) 100%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .modal-title {
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 800;
|
||
|
|
font-size: 22px;
|
||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .btn-close {
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 8px;
|
||
|
|
opacity: 0.9;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .btn-close:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
opacity: 1;
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .modal-body {
|
||
|
|
background: rgba(248, 250, 252, 0.7);
|
||
|
|
padding: 32px;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .modal-footer {
|
||
|
|
background: rgba(255, 255, 255, 0.8);
|
||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.4);
|
||
|
|
padding: 24px 32px;
|
||
|
|
border-radius: 0 0 24px 24px;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal h6 {
|
||
|
|
color: #1e293b;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== ORDER LIST ITEMS ===== */
|
||
|
|
#availableOrdersList,
|
||
|
|
#deletedOrdersList {
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
border-radius: 16px;
|
||
|
|
background: rgba(255, 255, 255, 0.6);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-group-item {
|
||
|
|
background: rgba(255, 255, 255, 0.7);
|
||
|
|
border: 1.5px solid rgba(255, 255, 255, 0.4);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
border-radius: 12px !important;
|
||
|
|
padding: 16px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-group-item:hover {
|
||
|
|
background: rgba(103, 126, 234, 0.1);
|
||
|
|
border-color: rgba(103, 126, 234, 0.3);
|
||
|
|
transform: translateX(4px);
|
||
|
|
box-shadow: 0 5px 15px rgba(103, 126, 234, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-group-item strong {
|
||
|
|
color: #1e293b;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-group-item .small {
|
||
|
|
color: #64748b;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-checkbox {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
border-radius: 6px;
|
||
|
|
border: 2px solid #cbd5e1;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-checkbox:checked {
|
||
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
|
|
border-color: #667eea;
|
||
|
|
box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== MODAL BUTTONS ===== */
|
||
|
|
#newOrderModal .btn-secondary {
|
||
|
|
background: rgba(100, 116, 139, 0.2);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1.5px solid rgba(100, 116, 139, 0.3);
|
||
|
|
color: #64748b;
|
||
|
|
padding: 12px 28px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .btn-secondary:hover {
|
||
|
|
background: rgba(100, 116, 139, 0.3);
|
||
|
|
border-color: rgba(100, 116, 139, 0.5);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .btn-success {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(34, 197, 94, 0.25) 0%,
|
||
|
|
rgba(21, 128, 61, 0.25) 100%
|
||
|
|
);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
border: 1.5px solid rgba(34, 197, 94, 0.4);
|
||
|
|
color: #166534;
|
||
|
|
padding: 12px 28px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 700;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-shadow:
|
||
|
|
0 8px 25px rgba(34, 197, 94, 0.2),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
#newOrderModal .btn-success:hover {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(34, 197, 94, 0.35) 0%,
|
||
|
|
rgba(21, 128, 61, 0.35) 100%
|
||
|
|
);
|
||
|
|
border-color: rgba(34, 197, 94, 0.6);
|
||
|
|
color: #14532d;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow:
|
||
|
|
0 12px 30px rgba(34, 197, 94, 0.3),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== SCROLLBAR STYLING ===== */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: rgba(0, 0, 0, 0.05);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: linear-gradient(135deg, #5a6fe8, #6a42a0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== ACTION BUTTONS ===== */
|
||
|
|
.btn-secondary {
|
||
|
|
background: linear-gradient(135deg, #94a3b8, #64748b);
|
||
|
|
border: none;
|
||
|
|
color: white;
|
||
|
|
padding: 12px 28px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary:hover {
|
||
|
|
background: linear-gradient(135deg, #8492a6, #565e6e);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 10px 25px rgba(100, 116, 139, 0.3);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== RESPONSIVE ADJUSTMENTS ===== */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.shipment-info-item,
|
||
|
|
.total-box {
|
||
|
|
min-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-controls {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-btn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="container-fluid py-4">
|
||
|
|
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="title-row">
|
||
|
|
<h5 class="mb-0"><i class="bi bi-truck me-2"></i>Shipment Details</h5>
|
||
|
|
<!-- <small class="text-white-50" style="margin-left:8px; font-weight:600;">{{ $shipment->shipment_id ?? '' }}</small> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header-controls">
|
||
|
|
<!-- Add Order button (top-right) with glass effect -->
|
||
|
|
@if($mode === 'edit' && $shipment->status === 'pending')
|
||
|
|
<a href="#" data-bs-toggle="modal" data-bs-target="#newOrderModal" class="glass-btn">
|
||
|
|
<i class="bi bi-plus-circle"></i> Add Order
|
||
|
|
</a>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
<!-- Cancel/close: goes back to shipments list -->
|
||
|
|
<a href="{{ route('admin.shipments') }}" class="btn header-cancel-btn" title="Cancel / Back">
|
||
|
|
<i class="bi bi-x-lg"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-body">
|
||
|
|
|
||
|
|
<!-- ================================ -->
|
||
|
|
<!-- SHIPMENT MAIN DETAILS -->
|
||
|
|
<!-- ================================ -->
|
||
|
|
<div class="shipment-info-box">
|
||
|
|
|
||
|
|
<div class="shipment-info-item">
|
||
|
|
<div class="shipment-info-label">Shipment ID</div>
|
||
|
|
<div class="shipment-info-value">{{ $shipment->shipment_id }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shipment-info-item">
|
||
|
|
<div class="shipment-info-label">Status</div>
|
||
|
|
<div class="shipment-info-value text-capitalize">
|
||
|
|
{{ str_replace('_', ' ', $shipment->status) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shipment-info-item">
|
||
|
|
<div class="shipment-info-label">Shipment Date</div>
|
||
|
|
<div class="shipment-info-value">
|
||
|
|
{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shipment-info-item">
|
||
|
|
<div class="shipment-info-label">Total Orders</div>
|
||
|
|
<div class="shipment-info-value">{{ $orders->count() }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ================================ -->
|
||
|
|
<!-- SHIPMENT TOTAL BLOCKS -->
|
||
|
|
<!-- ================================ -->
|
||
|
|
<h5 class="fw-bold mb-3 mt-4" style="color: #1e293b;">Shipment Summary</h5>
|
||
|
|
<div class="d-flex flex-wrap gap-3">
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL CTN</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_ctn }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL QTY</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_qty }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL CBM</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_cbm }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL KG</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_kg }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL TTL QTY</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_ttl_qty }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL TTL CBM</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_ttl_cbm }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL TTL KG</div>
|
||
|
|
<div class="total-value">{{ $shipment->total_ttl_kg }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="total-box">
|
||
|
|
<div class="total-title">TOTAL AMOUNT</div>
|
||
|
|
<div class="total-value text-success">
|
||
|
|
₹{{ number_format($shipment->total_amount, 2) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ================================ -->
|
||
|
|
<!-- ORDERS TABLE LIST -->
|
||
|
|
<!-- ================================ -->
|
||
|
|
<h5 class="fw-bold mb-3 mt-5" style="color: #1e293b;">Orders in This Shipment</h5>
|
||
|
|
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-bordered table-hover">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<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>
|
||
|
|
<!-- Conditionally show Delete column header -->
|
||
|
|
@if($mode === 'edit' && $shipment->status === 'pending')
|
||
|
|
<th>Delete</th>
|
||
|
|
@endif
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody>
|
||
|
|
@foreach($orders as $order)
|
||
|
|
<tr>
|
||
|
|
<td class="fw-bold text-primary">{{ $order->order_id }}</td>
|
||
|
|
<td>{{ $order->origin }}</td>
|
||
|
|
<td>{{ $order->destination }}</td>
|
||
|
|
<td>{{ $order->ctn }}</td>
|
||
|
|
<td>{{ $order->qty }}</td>
|
||
|
|
<td>{{ $order->ttl_qty }}</td>
|
||
|
|
<td>{{ $order->cbm }}</td>
|
||
|
|
<td>{{ $order->ttl_cbm }}</td>
|
||
|
|
<td>{{ $order->kg }}</td>
|
||
|
|
<td>{{ $order->ttl_kg }}</td>
|
||
|
|
<td class="fw-bold text-success">
|
||
|
|
₹{{ number_format($order->ttl_amount, 2) }}
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- Conditionally show Delete button -->
|
||
|
|
@if($mode === 'edit' && $shipment->status === 'pending')
|
||
|
|
<td>
|
||
|
|
<form method="POST" action="{{ route('admin.shipments.removeOrder') }}" onsubmit="return confirmDelete()">
|
||
|
|
@csrf
|
||
|
|
<input type="hidden" name="shipment_id" value="{{ $shipment->id }}">
|
||
|
|
<input type="hidden" name="order_id" value="{{ $order->id }}">
|
||
|
|
<button type="submit" class="btn btn-danger btn-sm" style="border-radius: 10px; padding: 8px 16px;">
|
||
|
|
<i class="bi bi-trash"></i> Delete
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</td>
|
||
|
|
@endif
|
||
|
|
</tr>
|
||
|
|
@endforeach
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Action Buttons -->
|
||
|
|
<div class="d-flex justify-content-between mt-4">
|
||
|
|
<!-- <a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
|
||
|
|
<i class="bi bi-arrow-left"></i> Back to Shipments
|
||
|
|
</a>
|
||
|
|
-->
|
||
|
|
@if($mode === 'edit' && $shipment->status === 'pending')
|
||
|
|
<div>
|
||
|
|
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}"
|
||
|
|
class="btn btn-warning me-2">
|
||
|
|
<i class="bi bi-pencil"></i> Edit Shipment
|
||
|
|
</a> -->
|
||
|
|
|
||
|
|
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'view']) }}"
|
||
|
|
class="btn btn-info">
|
||
|
|
<i class="bi bi-eye"></i> View Mode
|
||
|
|
</a> -->
|
||
|
|
</div>
|
||
|
|
@elseif($shipment->status === 'pending')
|
||
|
|
<div>
|
||
|
|
<!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}"
|
||
|
|
class="btn btn-primary">
|
||
|
|
<i class="bi bi-pencil"></i> Edit Shipment
|
||
|
|
</a> -->
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- New Order Modal -->
|
||
|
|
<div class="modal fade" id="newOrderModal" tabindex="-1" aria-labelledby="newOrderModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="newOrderModalLabel">Add Orders to Shipment</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6>Deleted Orders (recently removed)</h6>
|
||
|
|
<div id="deletedOrdersList" class="list-group"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6>Available Orders</h6>
|
||
|
|
<div id="availableOrdersList" class="list-group"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-3">
|
||
|
|
<small class="text-muted">Select orders to add back to this shipment, then click "Add Selected".</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||
|
|
<button id="addSelectedOrdersBtn" type="button" class="btn btn-success">Add Selected</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function confirmDelete() {
|
||
|
|
return confirm('Are you sure you want to remove this order from the shipment?');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
const csrfToken = '{{ csrf_token() }}';
|
||
|
|
const shipmentId = {{ $shipment->id }};
|
||
|
|
let availableOrders = @json($availableOrders ?? []);
|
||
|
|
let deletedOrders = [];
|
||
|
|
|
||
|
|
function renderOrdersList(containerId, orders) {
|
||
|
|
const container = document.getElementById(containerId);
|
||
|
|
container.innerHTML = '';
|
||
|
|
if (!orders.length) {
|
||
|
|
container.innerHTML = '<div class="text-muted py-3">No orders</div>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
orders.forEach(order => {
|
||
|
|
const item = document.createElement('label');
|
||
|
|
item.className = 'list-group-item d-flex justify-content-between align-items-center';
|
||
|
|
item.innerHTML = `
|
||
|
|
<div>
|
||
|
|
<input type="checkbox" class="me-2 order-checkbox" data-order='${JSON.stringify(order)}'>
|
||
|
|
<strong>${order.order_id}</strong>
|
||
|
|
<div class="small text-muted"> ${order.origin} → ${order.destination} • ${order.qty} qty • ₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits:2})}</div>
|
||
|
|
</div>
|
||
|
|
<div class="small text-muted">ID: ${order.id}</div>
|
||
|
|
`;
|
||
|
|
container.appendChild(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
renderOrdersList('availableOrdersList', availableOrders);
|
||
|
|
renderOrdersList('deletedOrdersList', deletedOrders);
|
||
|
|
|
||
|
|
// Intercept remove-order forms (update selector if form action different)
|
||
|
|
document.querySelectorAll('form[action="{{ route('admin.shipments.removeOrder') }}"]').forEach(form => {
|
||
|
|
form.addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!confirm('Are you sure you want to remove this order from the shipment?')) return;
|
||
|
|
|
||
|
|
const formData = new FormData(this);
|
||
|
|
|
||
|
|
fetch(this.action, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(data => {
|
||
|
|
if (!data.success) { alert(data.message || 'Failed'); return; }
|
||
|
|
|
||
|
|
// Remove row from DOM
|
||
|
|
const row = this.closest('tr');
|
||
|
|
// Build deleted order object from row cells if present
|
||
|
|
const orderObj = {
|
||
|
|
id: formData.get('order_id'),
|
||
|
|
order_id: row ? row.querySelector('td:first-child')?.innerText.trim() : ('Order-'+formData.get('order_id')),
|
||
|
|
origin: row ? row.cells[1]?.innerText.trim() : '',
|
||
|
|
destination: row ? row.cells[2]?.innerText.trim() : '',
|
||
|
|
qty: row ? row.cells[4]?.innerText.trim() : '',
|
||
|
|
ttl_amount: row ? row.cells[10]?.innerText.replace('₹','').replace(',','').trim() : 0
|
||
|
|
};
|
||
|
|
|
||
|
|
if (row) row.remove();
|
||
|
|
|
||
|
|
deletedOrders.unshift(orderObj);
|
||
|
|
renderOrdersList('deletedOrdersList', deletedOrders);
|
||
|
|
|
||
|
|
// Optional: update totals by refetching shipment summary endpoint or reload
|
||
|
|
if (data.shipment) updateTotalsInDOM(data.shipment);
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.error(err);
|
||
|
|
alert('Remove failed.');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Open modal from add-order button
|
||
|
|
document.querySelectorAll('.glass-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', function(e) {
|
||
|
|
renderOrdersList('availableOrdersList', availableOrders);
|
||
|
|
renderOrdersList('deletedOrdersList', deletedOrders);
|
||
|
|
const modal = new bootstrap.Modal(document.getElementById('newOrderModal'));
|
||
|
|
modal.show();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add selected orders
|
||
|
|
document.getElementById('addSelectedOrdersBtn').addEventListener('click', function() {
|
||
|
|
const checked = Array.from(document.querySelectorAll('.order-checkbox:checked'));
|
||
|
|
if (!checked.length) { alert('Please select orders'); return; }
|
||
|
|
|
||
|
|
const orderIds = checked.map(cb => JSON.parse(cb.getAttribute('data-order')).id);
|
||
|
|
|
||
|
|
fetch(`/admin/shipments/${shipmentId}/add-orders`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
|
||
|
|
body: JSON.stringify({ order_ids: orderIds })
|
||
|
|
})
|
||
|
|
.then(r => r.json())
|
||
|
|
.then(data => {
|
||
|
|
if (!data.success) { alert(data.message || 'Failed'); return; }
|
||
|
|
|
||
|
|
// Update orders table — simplest approach: reload page to reflect DB
|
||
|
|
// But we can also append rows from data.orders (if provided)
|
||
|
|
location.reload();
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.error(err);
|
||
|
|
alert('Add failed.');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateTotalsInDOM(shipment) {
|
||
|
|
try {
|
||
|
|
if (document.getElementById('total_qty')) {
|
||
|
|
document.getElementById('total_qty').innerText = shipment.total_qty;
|
||
|
|
}
|
||
|
|
if (document.getElementById('total_amount')) {
|
||
|
|
document.getElementById('total_amount').innerText = '₹' + parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits:2});
|
||
|
|
}
|
||
|
|
// add other totals similarly...
|
||
|
|
} catch(e) { console.warn(e); }
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.addEventListener('hidden.bs.modal', function (event) {
|
||
|
|
document.body.classList.remove('modal-open');
|
||
|
|
let backdrop = document.querySelector('.modal-backdrop');
|
||
|
|
if (backdrop) backdrop.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
@endsection
|