1370 lines
48 KiB
PHP
1370 lines
48 KiB
PHP
|
@extends('admin.layouts.app')
|
||
|
|
|
||
|
|
@section('page-title', 'Order Details')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<style>
|
||
|
|
/* Global Styles */
|
||
|
|
.orders-container {
|
||
|
|
font-family: 'Inter', 'Segoe UI', sans-serif;
|
||
|
|
color: #333;
|
||
|
|
background: #f8fafc;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orders-wrapper {
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orders-title {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 25px;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 15px;
|
||
|
|
font-size: 22px;
|
||
|
|
letter-spacing: -0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-left {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orders-title i {
|
||
|
|
color: white;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-area {
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cross Button */
|
||
|
|
.btn-close-page {
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-close-page:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
transform: rotate(90deg);
|
||
|
|
border-color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tabs Navigation */
|
||
|
|
.detail-tabs {
|
||
|
|
display: flex;
|
||
|
|
background: #f8fafc;
|
||
|
|
border-radius: 10px 10px 0 0;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 0;
|
||
|
|
border-bottom: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn {
|
||
|
|
flex: 1;
|
||
|
|
padding: 18px 25px;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
color: #64748b;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 10px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn:hover {
|
||
|
|
color: #475569;
|
||
|
|
background: #f1f5f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn.active {
|
||
|
|
background: white;
|
||
|
|
color: #4f46e5;
|
||
|
|
font-weight: 600;
|
||
|
|
border-bottom: 2px solid #4f46e5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn i {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn .badge {
|
||
|
|
font-size: 11px;
|
||
|
|
padding: 3px 8px;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tab Content */
|
||
|
|
.tab-content {
|
||
|
|
display: none;
|
||
|
|
background: white;
|
||
|
|
padding: 0;
|
||
|
|
animation: fadeIn 0.4s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-content.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(8px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Order Summary Card */
|
||
|
|
.order-summary-card {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 25px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-id {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 0 0 8px 0;
|
||
|
|
letter-spacing: -0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-meta {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 15px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-item {
|
||
|
|
text-align: center;
|
||
|
|
padding: 15px;
|
||
|
|
background: rgba(255,255,255,0.1);
|
||
|
|
border-radius: 8px;
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-item:hover {
|
||
|
|
background: rgba(255,255,255,0.15);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
border-color: rgba(255,255,255,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-label {
|
||
|
|
font-size: 11px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
opacity: 0.9;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-value {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Status Badges */
|
||
|
|
.status-badge {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 6px 16px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-pending {
|
||
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-delivered {
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-in-transit {
|
||
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-completed {
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #047857 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-cancelled {
|
||
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tables Styling - Mild Colors */
|
||
|
|
.table-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
||
|
|
margin-bottom: 25px;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Gradient Table Titles */
|
||
|
|
.table-header-order {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header-shipment {
|
||
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header-invoice {
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header {
|
||
|
|
color: white;
|
||
|
|
padding: 18px 25px;
|
||
|
|
margin: 0;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header i {
|
||
|
|
font-size: 18px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-count {
|
||
|
|
background: rgba(255,255,255,0.2);
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 16px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-responsive {
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Mild colored table headers */
|
||
|
|
.custom-table thead {
|
||
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table th {
|
||
|
|
padding: 14px 20px;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #475569;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
border-bottom: 2px solid #c7d2fe;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table td {
|
||
|
|
padding: 14px 20px;
|
||
|
|
border-bottom: 1px solid #f1f5f9;
|
||
|
|
vertical-align: middle;
|
||
|
|
color: #64748b;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Highlight current order in shipment table */
|
||
|
|
.current-order {
|
||
|
|
background-color: rgba(102, 126, 234, 0.1) !important;
|
||
|
|
border-left: 3px solid #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-order td {
|
||
|
|
font-weight: 500;
|
||
|
|
color: #4f46e5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table tbody tr {
|
||
|
|
background: white;
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table tbody tr:nth-child(even) {
|
||
|
|
background-color: #fafbfc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table tbody tr:last-child td {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Totals Grid */
|
||
|
|
.totals-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
|
|
gap: 12px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin: 25px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-item {
|
||
|
|
background: white;
|
||
|
|
padding: 18px 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-item:hover {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
|
||
|
|
border-color: #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: #667eea;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-value {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1e293b;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Shipment Card */
|
||
|
|
.shipment-card {
|
||
|
|
background: white;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 25px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-card:hover {
|
||
|
|
border-color: #3b82f6;
|
||
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 2px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-title {
|
||
|
|
color: #1e293b;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 16px;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-title i {
|
||
|
|
color: #3b82f6;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-summary {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding: 18px;
|
||
|
|
background: #f8fafc;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-box {
|
||
|
|
text-align: center;
|
||
|
|
padding: 12px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-box:hover {
|
||
|
|
border-color: #3b82f6;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: #64748b;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1e293b;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Invoice Styling */
|
||
|
|
.invoice-container {
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 30px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
||
|
|
margin: 25px 0;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-container:hover {
|
||
|
|
border-color: #10b981;
|
||
|
|
box-shadow: 0 6px 25px rgba(16, 185, 129, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-container:before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
border-bottom: 2px solid #e2e8f0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-header h2 {
|
||
|
|
color: #1e293b;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 24px;
|
||
|
|
letter-spacing: -0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-header .invoice-no {
|
||
|
|
color: #10b981;
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-details {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 25px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-from, .invoice-to {
|
||
|
|
padding: 20px;
|
||
|
|
background: #f8fafc;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-from:hover, .invoice-to:hover {
|
||
|
|
border-color: #10b981;
|
||
|
|
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-from h4, .invoice-to h4 {
|
||
|
|
color: #1e293b;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-from p, .invoice-to p {
|
||
|
|
color: #475569;
|
||
|
|
line-height: 1.6;
|
||
|
|
margin: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-meta-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
padding: 20px;
|
||
|
|
background: #f8fafc;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-meta-item {
|
||
|
|
padding: 12px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-meta-item:hover {
|
||
|
|
border-color: #10b981;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-meta-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: #64748b;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-meta-value {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1e293b;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-totals-section {
|
||
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
|
|
padding: 25px;
|
||
|
|
border-radius: 10px;
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-totals-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-total-item {
|
||
|
|
background: white;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-total-item:hover {
|
||
|
|
border-color: #10b981;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-total-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #059669;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-total-value {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1e293b;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-grand-total {
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
border: 2px solid #10b981;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-grand-total:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grand-total-label {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #64748b;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grand-total-value {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #10b981;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-footer {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 30px;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid #e2e8f0;
|
||
|
|
color: #64748b;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-footer p {
|
||
|
|
margin: 8px 0;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-footer .thank-you {
|
||
|
|
color: #10b981;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 15px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-footer .contact-info {
|
||
|
|
color: #475569;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* No Data State */
|
||
|
|
.no-data {
|
||
|
|
text-align: center;
|
||
|
|
padding: 50px 20px;
|
||
|
|
color: #64748b;
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-data i {
|
||
|
|
font-size: 48px;
|
||
|
|
color: #cbd5e1;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-data p {
|
||
|
|
font-size: 15px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Alert Styling */
|
||
|
|
.alert {
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid;
|
||
|
|
padding: 15px;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-warning {
|
||
|
|
background-color: #fffbeb;
|
||
|
|
border-color: #f59e0b;
|
||
|
|
color: #92400e;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.order-meta,
|
||
|
|
.totals-grid,
|
||
|
|
.shipment-summary,
|
||
|
|
.invoice-totals-grid {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.orders-title {
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 20px;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-left {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-area {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-tabs {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn {
|
||
|
|
justify-content: flex-start;
|
||
|
|
padding: 15px 20px;
|
||
|
|
border-bottom: 1px solid #e2e8f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn.active {
|
||
|
|
border-bottom: 2px solid #4f46e5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-meta,
|
||
|
|
.totals-grid,
|
||
|
|
.invoice-totals-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-details {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shipment-summary {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-table th,
|
||
|
|
.custom-table td {
|
||
|
|
padding: 10px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-header h2 {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Print Styles */
|
||
|
|
@media print {
|
||
|
|
.orders-container {
|
||
|
|
background: white;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orders-wrapper {
|
||
|
|
box-shadow: none;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orders-title,
|
||
|
|
.detail-tabs,
|
||
|
|
.btn-close-page {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-content {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-container {
|
||
|
|
box-shadow: none;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-card {
|
||
|
|
box-shadow: none;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
page-break-inside: avoid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-grid,
|
||
|
|
.invoice-totals-section {
|
||
|
|
background: #f8f8f8 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="orders-container">
|
||
|
|
<div class="orders-wrapper">
|
||
|
|
{{-- =====================================================
|
||
|
|
HEADER WITH CLOSE BUTTON
|
||
|
|
====================================================== --}}
|
||
|
|
<div class="orders-title">
|
||
|
|
<div class="title-left">
|
||
|
|
<i class="fas fa-box-open"></i>
|
||
|
|
<span>Order #{{ $orderData['order_id'] }}</span>
|
||
|
|
</div>
|
||
|
|
<a href="{{ route('admin.orders') }}" class="btn-close-page" title="Close and return to Orders">
|
||
|
|
<i class="fas fa-times"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- =====================================================
|
||
|
|
TABS NAVIGATION
|
||
|
|
====================================================== --}}
|
||
|
|
<div class="detail-tabs">
|
||
|
|
<button class="tab-btn active" data-tab="order-details">
|
||
|
|
<i class="fas fa-info-circle"></i> Order Details
|
||
|
|
</button>
|
||
|
|
<button class="tab-btn" data-tab="shipment-details">
|
||
|
|
<i class="fas fa-shipping-fast"></i> Shipments
|
||
|
|
<span class="badge bg-primary ms-2">{{ count($shipmentsData) }}</span>
|
||
|
|
</button>
|
||
|
|
<button class="tab-btn" data-tab="invoice-details">
|
||
|
|
<i class="fas fa-file-invoice-dollar"></i> Invoice
|
||
|
|
@if($invoiceData)
|
||
|
|
<span class="badge bg-success ms-2">Available</span>
|
||
|
|
@else
|
||
|
|
<span class="badge bg-secondary ms-2">Not Generated</span>
|
||
|
|
@endif
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-area">
|
||
|
|
{{-- =====================================================
|
||
|
|
ORDER DETAILS TAB
|
||
|
|
====================================================== --}}
|
||
|
|
<div id="order-details" class="tab-content active">
|
||
|
|
{{-- Order Summary --}}
|
||
|
|
<div class="order-summary-card">
|
||
|
|
<h3 class="order-id">{{ $orderData['order_id'] }}</h3>
|
||
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
||
|
|
<span class="status-badge status-{{ strtolower(str_replace(' ', '-', $orderData['status'])) }}">
|
||
|
|
{{ ucfirst($orderData['status']) }}
|
||
|
|
</span>
|
||
|
|
<span style="color: rgba(255,255,255,0.85); font-size: 14px;">
|
||
|
|
<i class="far fa-calendar me-1"></i>
|
||
|
|
{{ $order->created_at?->format('d-m-Y') }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="order-meta">
|
||
|
|
<div class="meta-item">
|
||
|
|
<div class="meta-label">Total Orders</div>
|
||
|
|
<div class="meta-value">
|
||
|
|
{{ $order->shipments->sum(function($shipment) {
|
||
|
|
return $shipment->orders->count();
|
||
|
|
}) ?: 1 }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="meta-item">
|
||
|
|
<div class="meta-label">Origin</div>
|
||
|
|
<div class="meta-value">{{ $order->origin ?? 'N/A' }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="meta-item">
|
||
|
|
<div class="meta-label">Destination</div>
|
||
|
|
<div class="meta-value">{{ $order->destination ?? 'N/A' }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="meta-item">
|
||
|
|
<div class="meta-label">Mark No</div>
|
||
|
|
<div class="meta-value">{{ $order->mark_no ?? 'N/A' }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Order Items Table --}}
|
||
|
|
<div class="table-card">
|
||
|
|
<div class="table-header table-header-order">
|
||
|
|
<span><i class="fas fa-boxes me-2"></i>Order Items</span>
|
||
|
|
<span class="item-count">{{ count($orderData['items']) }} items</span>
|
||
|
|
</div>
|
||
|
|
<div class="table-responsive">
|
||
|
|
@if(count($orderData['items']) > 0)
|
||
|
|
<table class="custom-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>Description</th>
|
||
|
|
<th>CTN</th>
|
||
|
|
<th>QTY</th>
|
||
|
|
<th>TTL/QTY</th>
|
||
|
|
<th>Unit</th>
|
||
|
|
<th>Price (₹)</th>
|
||
|
|
<th>TTL Amount (₹)</th>
|
||
|
|
<th>CBM</th>
|
||
|
|
<th>TTL CBM</th>
|
||
|
|
<th>KG</th>
|
||
|
|
<th>TTL KG</th>
|
||
|
|
<th>Shop No</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
@foreach($orderData['items'] as $index => $item)
|
||
|
|
<tr>
|
||
|
|
<td>{{ $index + 1 }}</td>
|
||
|
|
<td>{{ $item->description }}</td>
|
||
|
|
<td>{{ $item->ctn }}</td>
|
||
|
|
<td>{{ $item->qty }}</td>
|
||
|
|
<td>{{ $item->ttl_qty }}</td>
|
||
|
|
<td>{{ $item->unit }}</td>
|
||
|
|
<td>₹{{ number_format($item->price ?? 0, 2) }}</td>
|
||
|
|
<td><strong>₹{{ number_format($item->ttl_amount ?? 0, 2) }}</strong></td>
|
||
|
|
<td>{{ number_format($item->cbm ?? 0, 3) }}</td>
|
||
|
|
<td>{{ number_format($item->ttl_cbm ?? 0, 3) }}</td>
|
||
|
|
<td>{{ number_format($item->kg ?? 0, 3) }}</td>
|
||
|
|
<td>{{ number_format($item->ttl_kg ?? 0, 3) }}</td>
|
||
|
|
<td>{{ $item->shop_no ?? '-' }}</td>
|
||
|
|
</tr>
|
||
|
|
@endforeach
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
@else
|
||
|
|
<div class="no-data">
|
||
|
|
<i class="fas fa-box-open"></i>
|
||
|
|
<p>No order items found.</p>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Order Totals --}}
|
||
|
|
<div class="totals-grid">
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total CTN</div>
|
||
|
|
<div class="total-value">{{ $orderData['totals']['ctn'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total QTY</div>
|
||
|
|
<div class="total-value">{{ $orderData['totals']['qty'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL/QTY</div>
|
||
|
|
<div class="total-value">{{ $orderData['totals']['ttl_qty'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL KG</div>
|
||
|
|
<div class="total-value">{{ number_format($orderData['totals']['ttl_kg'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total Amount</div>
|
||
|
|
<div class="total-value">₹{{ number_format($orderData['totals']['amount'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total CBM</div>
|
||
|
|
<div class="total-value">{{ number_format($orderData['totals']['cbm'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL CBM</div>
|
||
|
|
<div class="total-value">{{ number_format($orderData['totals']['ttl_cbm'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total KG</div>
|
||
|
|
<div class="total-value">{{ number_format($orderData['totals']['kg'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- =====================================================
|
||
|
|
SHIPMENT DETAILS TAB - CORRECTED
|
||
|
|
====================================================== --}}
|
||
|
|
<div id="shipment-details" class="tab-content">
|
||
|
|
@if(count($shipmentsData) > 0)
|
||
|
|
@foreach($shipmentsData as $shipment)
|
||
|
|
<div class="shipment-card">
|
||
|
|
<div class="shipment-header">
|
||
|
|
<h4 class="shipment-title">
|
||
|
|
<i class="fas fa-ship"></i> {{ $shipment['shipment_id'] }}
|
||
|
|
</h4>
|
||
|
|
<div class="d-flex align-items-center gap-4">
|
||
|
|
<div>
|
||
|
|
<div class="summary-label">Orders in Shipment</div>
|
||
|
|
<div class="summary-value">{{ $shipment['total_orders'] }}</div>
|
||
|
|
</div>
|
||
|
|
<span class="status-badge status-{{ strtolower(str_replace(' ', '-', $shipment['status'])) }}">
|
||
|
|
{{ ucfirst($shipment['status']) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shipment-summary">
|
||
|
|
<div class="summary-box">
|
||
|
|
<div class="summary-label">Shipment Date</div>
|
||
|
|
<div class="summary-value">
|
||
|
|
@if($shipment['date'])
|
||
|
|
{{ \Carbon\Carbon::parse($shipment['date'])->format('d-m-Y') }}
|
||
|
|
@else
|
||
|
|
N/A
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-box">
|
||
|
|
<div class="summary-label">Orders in Shipment</div>
|
||
|
|
<div class="summary-value">{{ $shipment['total_orders'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-box">
|
||
|
|
<div class="summary-label">Total CTN</div>
|
||
|
|
<div class="summary-value">{{ $shipment['totals']['ctn'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-box">
|
||
|
|
<div class="summary-label">Total Amount</div>
|
||
|
|
<div class="summary-value">₹{{ number_format($shipment['totals']['amount'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Show ONLY orders that are ACTUALLY in this shipment --}}
|
||
|
|
@if(count($shipment['orders']) > 0)
|
||
|
|
<div class="table-card mt-4">
|
||
|
|
<div class="table-header table-header-shipment">
|
||
|
|
<span><i class="fas fa-list-ol me-2"></i>Orders in This Shipment</span>
|
||
|
|
<span class="item-count">{{ count($shipment['orders']) }} orders</span>
|
||
|
|
</div>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="custom-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>Order ID</th>
|
||
|
|
<th>Origin</th>
|
||
|
|
<th>Destination</th>
|
||
|
|
<th>Description</th>
|
||
|
|
<th>CTN</th>
|
||
|
|
<th>QTY</th>
|
||
|
|
<th>TTL/QTY</th>
|
||
|
|
<th>Amount (₹)</th>
|
||
|
|
<th>Status</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
@foreach($shipment['orders'] as $index => $orderItem)
|
||
|
|
<tr class="{{ $orderItem['order_id'] == $orderData['order_id'] ? 'current-order' : '' }}">
|
||
|
|
<td>{{ $index + 1 }}</td>
|
||
|
|
<td>
|
||
|
|
<strong>{{ $orderItem['order_id'] ?? '-' }}</strong>
|
||
|
|
@if($orderItem['order_id'] == $orderData['order_id'])
|
||
|
|
<span class="badge bg-primary ms-1">Current</span>
|
||
|
|
@endif
|
||
|
|
</td>
|
||
|
|
<td>{{ $orderItem['origin'] ?? '-' }}</td>
|
||
|
|
<td>{{ $orderItem['destination'] ?? '-' }}</td>
|
||
|
|
<td>{{ $orderItem['description'] ?? '-' }}</td>
|
||
|
|
<td>{{ $orderItem['ctn'] ?? '-' }}</td>
|
||
|
|
<td>{{ $orderItem['qty'] ?? '-' }}</td>
|
||
|
|
<td>{{ $orderItem['ttl_qty'] ?? '-' }}</td>
|
||
|
|
<td><strong>₹{{ number_format($orderItem['amount'] ?? 0, 2) }}</strong></td>
|
||
|
|
<td>
|
||
|
|
<span class="badge bg-info">In Shipment</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@endforeach
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@else
|
||
|
|
<div class="alert alert-warning mt-3">
|
||
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||
|
|
No orders found in this shipment.
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
{{-- Shipment Totals --}}
|
||
|
|
<div class="totals-grid mt-4">
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total CTN in Shipment</div>
|
||
|
|
<div class="total-value">{{ $shipment['totals']['ctn'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total QTY in Shipment</div>
|
||
|
|
<div class="total-value">{{ $shipment['totals']['qty'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL/QTY</div>
|
||
|
|
<div class="total-value">{{ $shipment['totals']['ttl_qty'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total CBM</div>
|
||
|
|
<div class="total-value">{{ number_format($shipment['totals']['cbm'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total KG</div>
|
||
|
|
<div class="total-value">{{ number_format($shipment['totals']['kg'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL CBM</div>
|
||
|
|
<div class="total-value">{{ number_format($shipment['totals']['ttl_cbm'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total TTL KG</div>
|
||
|
|
<div class="total-value">{{ number_format($shipment['totals']['ttl_kg'], 3) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="total-label">Total Amount</div>
|
||
|
|
<div class="total-value">₹{{ number_format($shipment['totals']['amount'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
@else
|
||
|
|
<div class="no-data">
|
||
|
|
<i class="fas fa-truck"></i>
|
||
|
|
<p>This order is not part of any shipment.</p>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- =====================================================
|
||
|
|
INVOICE DETAILS TAB
|
||
|
|
====================================================== --}}
|
||
|
|
<div id="invoice-details" class="tab-content">
|
||
|
|
@if($invoiceData)
|
||
|
|
<div class="invoice-container">
|
||
|
|
<div class="invoice-header">
|
||
|
|
<h2>TAX INVOICE</h2>
|
||
|
|
<p class="invoice-no">INVOICE NO: {{ $invoiceData['invoice_no'] }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="invoice-details">
|
||
|
|
<div class="invoice-from">
|
||
|
|
<h4>From:</h4>
|
||
|
|
<p><strong>Kent Logistic</strong><br>
|
||
|
|
123 Logistics Street<br>
|
||
|
|
Mumbai, Maharashtra 400001<br>
|
||
|
|
Email: support@kentlogistic.com<br>
|
||
|
|
Phone: +91 1234567890</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="invoice-to">
|
||
|
|
<h4>To:</h4>
|
||
|
|
<p><strong>{{ $invoiceData['customer']['name'] }}</strong><br>
|
||
|
|
{{ $invoiceData['customer']['address'] }}<br>
|
||
|
|
Pincode: {{ $invoiceData['customer']['pincode'] }}<br>
|
||
|
|
Email: {{ $invoiceData['customer']['email'] }}<br>
|
||
|
|
Phone: {{ $invoiceData['customer']['mobile'] }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="invoice-meta-grid">
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Invoice ID</div>
|
||
|
|
<div class="invoice-meta-value">{{ $invoiceData['invoice_no'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Status</div>
|
||
|
|
<div class="invoice-meta-value">
|
||
|
|
<span class="status-badge status-{{ strtolower(str_replace(' ', '-', $invoiceData['status'])) }}">
|
||
|
|
{{ ucfirst($invoiceData['status']) }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Belongs to Shipment</div>
|
||
|
|
<div class="invoice-meta-value">{{ $order->invoice->shipment_id ?? 'N/A' }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Order ID</div>
|
||
|
|
<div class="invoice-meta-value">{{ $orderData['order_id'] }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Invoice Date</div>
|
||
|
|
<div class="invoice-meta-value">
|
||
|
|
@if($invoiceData['invoice_date'])
|
||
|
|
{{ \Carbon\Carbon::parse($invoiceData['invoice_date'])->format('d-m-Y') }}
|
||
|
|
@else
|
||
|
|
N/A
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-meta-item">
|
||
|
|
<div class="invoice-meta-label">Due Date</div>
|
||
|
|
<div class="invoice-meta-value">
|
||
|
|
@if($invoiceData['due_date'])
|
||
|
|
{{ \Carbon\Carbon::parse($invoiceData['due_date'])->format('d-m-Y') }}
|
||
|
|
@else
|
||
|
|
N/A
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Invoice Items Table --}}
|
||
|
|
<div class="table-card">
|
||
|
|
<div class="table-header table-header-invoice">
|
||
|
|
<span><i class="fas fa-list-alt me-2"></i>Invoice Items</span>
|
||
|
|
<span class="item-count">{{ count($invoiceData['items']) }} items</span>
|
||
|
|
</div>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="custom-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>Description</th>
|
||
|
|
<th>CTN</th>
|
||
|
|
<th>QTY</th>
|
||
|
|
<th>TTL/QTY</th>
|
||
|
|
<th>Unit</th>
|
||
|
|
<th>Price (₹)</th>
|
||
|
|
<th>TTL Amount (₹)</th>
|
||
|
|
<th>CBM</th>
|
||
|
|
<th>TTL CBM</th>
|
||
|
|
<th>KG</th>
|
||
|
|
<th>TTL KG</th>
|
||
|
|
<th>Shop No</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
@foreach($invoiceData['items'] as $index => $item)
|
||
|
|
<tr>
|
||
|
|
<td>{{ $index + 1 }}</td>
|
||
|
|
<td>{{ $item->description }}</td>
|
||
|
|
<td>{{ $item->ctn ?? '-' }}</td>
|
||
|
|
<td>{{ $item->qty }}</td>
|
||
|
|
<td>{{ $item->qty }}</td>
|
||
|
|
<td>{{ $item->unit ?? '-' }}</td>
|
||
|
|
<td>₹{{ number_format($item->rate, 2) }}</td>
|
||
|
|
<td><strong>₹{{ number_format($item->amount, 2) }}</strong></td>
|
||
|
|
<td>{{ number_format($item->cbm ?? 0, 3) }}</td>
|
||
|
|
<td>{{ number_format(($item->cbm ?? 0) * $item->qty, 3) }}</td>
|
||
|
|
<td>{{ number_format($item->kg ?? 0, 3) }}</td>
|
||
|
|
<td>{{ number_format(($item->kg ?? 0) * $item->qty, 3) }}</td>
|
||
|
|
<td>{{ $item->shop_no ?? '-' }}</td>
|
||
|
|
</tr>
|
||
|
|
@endforeach
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Invoice Totals --}}
|
||
|
|
<div class="invoice-totals-section">
|
||
|
|
<div class="invoice-totals-grid">
|
||
|
|
<div class="invoice-total-item">
|
||
|
|
<div class="invoice-total-label">Amount:</div>
|
||
|
|
<div class="invoice-total-value">₹{{ number_format($invoiceData['summary']['amount'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-total-item">
|
||
|
|
<div class="invoice-total-label">CGST (0%):</div>
|
||
|
|
<div class="invoice-total-value">₹{{ number_format($invoiceData['summary']['cgst'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="invoice-total-item">
|
||
|
|
<div class="invoice-total-label">SGST (0%):</div>
|
||
|
|
<div class="invoice-total-value">₹{{ number_format($invoiceData['summary']['sgst'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="invoice-grand-total">
|
||
|
|
<div class="grand-total-label">Total Payable:</div>
|
||
|
|
<div class="grand-total-value">₹{{ number_format($invoiceData['summary']['total'], 2) }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="invoice-footer">
|
||
|
|
<p class="thank-you">Thank you for your business!</p>
|
||
|
|
<p class="contact-info">For any inquiries, contact us at support@kentlogistic.com</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@else
|
||
|
|
<div class="no-data">
|
||
|
|
<i class="fas fa-file-invoice-dollar"></i>
|
||
|
|
<p>No invoice generated for this order.</p>
|
||
|
|
<p class="text-muted mt-2">An invoice can be generated from the orders list.</p>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Tab Switching
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
||
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
||
|
|
|
||
|
|
tabBtns.forEach(btn => {
|
||
|
|
btn.addEventListener('click', function() {
|
||
|
|
const tabId = this.getAttribute('data-tab');
|
||
|
|
|
||
|
|
// Remove active class from all buttons and contents
|
||
|
|
tabBtns.forEach(b => b.classList.remove('active'));
|
||
|
|
tabContents.forEach(c => c.classList.remove('active'));
|
||
|
|
|
||
|
|
// Add active class to clicked button and corresponding content
|
||
|
|
this.classList.add('active');
|
||
|
|
document.getElementById(tabId).classList.add('active');
|
||
|
|
|
||
|
|
// Store active tab in session storage
|
||
|
|
sessionStorage.setItem('activeOrderTab', tabId);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Restore active tab from session storage
|
||
|
|
const activeTab = sessionStorage.getItem('activeOrderTab');
|
||
|
|
if (activeTab) {
|
||
|
|
const activeBtn = document.querySelector(`[data-tab="${activeTab}"]`);
|
||
|
|
if (activeBtn) {
|
||
|
|
activeBtn.click();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Auto-hide alerts
|
||
|
|
setTimeout(function() {
|
||
|
|
const alerts = document.querySelectorAll('.alert');
|
||
|
|
alerts.forEach(alert => {
|
||
|
|
const bsAlert = new bootstrap.Alert(alert);
|
||
|
|
bsAlert.close();
|
||
|
|
});
|
||
|
|
}, 5000);
|
||
|
|
</script>
|
||
|
|
@endsection
|