style(pdf): overhaul invoice and label templates for brand consistency
Update the styling and layout of PDF invoices and labels to align with the new brand identity (Navy and Amber color scheme). Key changes: - Refactor `invoice.blade.php` to use a structured table-based layout for better Dompdf compatibility. - Implement a new color palette using Navy (#1a1a2e) and Amber (#f59e0b). - Redesign `label.blade.php` with a split-cell layout (barcode left, info right) for improved readability. - Standardize typography and spacing across all document templates. - Remove obsolete sample PDF files from the repository.
This commit is contained in:
parent
93bcfb9ce7
commit
e6c67e217a
@ -3,360 +3,416 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
/* ════════ Base & Page ════════ */
|
||||
* { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: DejaVu Sans, Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #000;
|
||||
font-size: 9px;
|
||||
color: #111827;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* ⚠️ Dompdf از box-sizing: border-box پشتیبانی نمیکند —
|
||||
حاشیهها با @page و width با 100% ناحیه چاپ */
|
||||
@page { margin: 10mm; }
|
||||
.page {
|
||||
width: 100%;
|
||||
@page {
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 12mm;
|
||||
margin-right: 12mm;
|
||||
}
|
||||
.page { width: 100%; }
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 2px solid #f37021;
|
||||
padding-bottom: 8px;
|
||||
/* ════════ Brand Colors (matching AWB) ════════ */
|
||||
/* Navy: #1a1a2e | Amber: #f59e0b | Gray bg: #f3f4f6 */
|
||||
|
||||
/* ════════ Header ════════ */
|
||||
.header-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border-bottom: 3px solid #1a1a2e;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.header h1 {
|
||||
.header-table td {
|
||||
vertical-align: middle;
|
||||
padding: 4px 6px 8px 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.header-logo {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 22px;
|
||||
color: #f37021;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 2px;
|
||||
font-weight: bold;
|
||||
color: #1a1a2e;
|
||||
text-align: center;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.header-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
font-size: 9px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.header-meta .awb-box {
|
||||
background: #f9f9f9;
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed #f37021;
|
||||
.header-awb {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
color: #1a1a2e;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ─── SECTIONS ─── */
|
||||
.two-col {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
/* ════════ Route Bar ════════ */
|
||||
.route-bar {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.section {
|
||||
flex: 1;
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
.route-arrow {
|
||||
color: #f59e0b;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
.section-title {
|
||||
background: #f37021;
|
||||
color: #fff;
|
||||
padding: 3px 6px;
|
||||
|
||||
/* ════════ Grid (Shipper / Consignee) ════════ */
|
||||
.grid-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.grid-table > tbody > tr > td {
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
border: 1.5px solid #1a1a2e;
|
||||
}
|
||||
.grid-table > tbody > tr > td.left {
|
||||
border-right: 0.5px solid #1a1a2e;
|
||||
}
|
||||
|
||||
/* ════════ Section Header ════════ */
|
||||
.section-header {
|
||||
background: #1a1a2e;
|
||||
color: #ffffff;
|
||||
padding: 4px 8px;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
margin: -6px -6px 6px -6px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
font-size: 9px;
|
||||
}
|
||||
.label {
|
||||
width: 110px;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #000;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
/* ─── CONTENT ─── */
|
||||
.content-section {
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content-section .section-title {
|
||||
background: #f37021;
|
||||
color: #fff;
|
||||
}
|
||||
.content-desc {
|
||||
font-size: 10px;
|
||||
margin-bottom: 6px;
|
||||
padding: 4px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
/* ─── ITEMS TABLE ─── */
|
||||
table {
|
||||
/* ════════ Field Table ════════ */
|
||||
.field-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 9px;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
.field-table td {
|
||||
padding: 2px 8px;
|
||||
vertical-align: top;
|
||||
border-bottom: 0.5px solid #e5e7eb;
|
||||
}
|
||||
th {
|
||||
background: #f37021;
|
||||
color: #fff;
|
||||
.field-table td.label {
|
||||
width: 40%;
|
||||
color: #6b7280;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
td.text-center { text-align: center; }
|
||||
td.text-right { text-align: right; }
|
||||
.total-row {
|
||||
background: #f9f9f9;
|
||||
font-weight: bold;
|
||||
.field-table td.value {
|
||||
color: #111827;
|
||||
}
|
||||
.field-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ─── WEIGHT & DIMENSION ─── */
|
||||
.weight-section {
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
/* ════════ Items Table ════════ */
|
||||
.details-section {
|
||||
border: 1.5px solid #1a1a2e;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.weight-box {
|
||||
flex: 1;
|
||||
.details-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 8.5px;
|
||||
}
|
||||
.details-table th {
|
||||
background: #1a1a2e;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
border: 0.5px solid #1a1a2e;
|
||||
}
|
||||
.details-table td {
|
||||
padding: 3px 4px;
|
||||
border: 0.5px solid #d1d5db;
|
||||
color: #111827;
|
||||
}
|
||||
.details-table tr:nth-child(even) td {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.details-total td {
|
||||
background: #f3f4f6 !important;
|
||||
font-weight: bold;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* ════════ Weight & Dimensions ════════ */
|
||||
.weight-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 6px;
|
||||
border: 1.5px solid #1a1a2e;
|
||||
}
|
||||
.weight-table td {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-right: 1px solid #1a1a2e;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.weight-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.weight-label {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
color: #6b7280;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.weight-value {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #f37021;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* ─── REASON FOR EXPORT ─── */
|
||||
.reason-section {
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
margin-bottom: 10px;
|
||||
/* ════════ Reason & Declaration ════════ */
|
||||
.reason-section,
|
||||
.declaration {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 5px 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 8.5px;
|
||||
line-height: 1.5;
|
||||
color: #4b5563;
|
||||
}
|
||||
.reason-section .section-title {
|
||||
background: #f37021;
|
||||
color: #fff;
|
||||
.reason-section .section-header,
|
||||
.declaration .section-header {
|
||||
margin: -5px -8px 5px -8px;
|
||||
}
|
||||
.reason-text {
|
||||
font-size: 10px;
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* ─── DECLARATION ─── */
|
||||
.declaration {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 9px;
|
||||
line-height: 1.6;
|
||||
color: #111827;
|
||||
}
|
||||
.declaration strong {
|
||||
color: #f37021;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.signature-area {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
/* ════════ Signature ════════ */
|
||||
.signature-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.signature-box {
|
||||
width: 45%;
|
||||
.signature-table td {
|
||||
width: 50%;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
font-size: 8px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.signature-line {
|
||||
border-top: 1px solid #000;
|
||||
margin-top: 25px;
|
||||
.sig-line {
|
||||
border-top: 1px solid #1a1a2e;
|
||||
margin-top: 28px;
|
||||
padding-top: 3px;
|
||||
font-size: 8px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ─── BOTTOM BARCODE ─── */
|
||||
.bottom-barcode {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
padding: 6px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.bottom-barcode img {
|
||||
height: 35px;
|
||||
}
|
||||
.bottom-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 9px;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
/* ════════ Footer ════════ */
|
||||
.footer {
|
||||
margin-top: 10px;
|
||||
border-top: 2px solid #f37021;
|
||||
padding-top: 5px;
|
||||
border-top: 2px solid #1a1a2e;
|
||||
padding-top: 4px;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.footer-brand {
|
||||
color: #1a1a2e;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.footer-track {
|
||||
font-size: 9px;
|
||||
color: #999;
|
||||
color: #f59e0b;
|
||||
font-weight: bold;
|
||||
margin: 1px 0;
|
||||
}
|
||||
.footer-meta {
|
||||
font-size: 7px;
|
||||
color: #9ca3af;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- HEADER -->
|
||||
<div class="header">
|
||||
<h1>INVOICE</h1>
|
||||
<div class="header-meta">
|
||||
<span>DATE: {{ $shipment->created_at?->format('m/d/Y') }}</span>
|
||||
<span class="awb-box">INVOICE NO: {{ $shipment->awb_no }}</span>
|
||||
</div>
|
||||
|
||||
<!-- ════════ HEADER ════════ -->
|
||||
<table class="header-table">
|
||||
<tr>
|
||||
<td style="width: 30%;">
|
||||
<img src="{{ public_path('images/ifnex-logo.png') }}" class="header-logo" alt="IFNEX">
|
||||
</td>
|
||||
<td style="width: 40%;" align="center">
|
||||
<div class="header-title">INVOICE</div>
|
||||
</td>
|
||||
<td style="width: 30%;" class="header-meta">
|
||||
<div class="header-awb">INV: {{ $shipment->awb_no }}</div>
|
||||
<div>Date: {{ $shipment->created_at?->format('m/d/Y') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- ════════ ROUTE BAR ════════ -->
|
||||
<div class="route-bar">
|
||||
From: {{ strtoupper($shipment->fromCountry?->name ?? '—') }} ({{ $shipment->fromCountry?->iso_code }})
|
||||
<span class="route-arrow"> → </span>
|
||||
To: {{ strtoupper($shipment->toCountry?->name ?? '—') }} ({{ $shipment->toCountry?->iso_code }})
|
||||
</div>
|
||||
|
||||
<!-- SHIPPER & CONSIGNEE -->
|
||||
<div class="two-col">
|
||||
<div class="section">
|
||||
<div class="section-title">SHIPPER</div>
|
||||
<div class="row"><span class="label">SHIPPER:</span><span class="value">{{ $shipper['city'] }}, {{ $shipment->fromCountry?->name }} ({{ $shipment->fromCountry?->iso_code }})</span></div>
|
||||
<div class="row"><span class="label">COMPANY NAME:</span><span class="value">{{ $shipper['company'] ?: '—' }}</span></div>
|
||||
<div class="row"><span class="label">CONTACT PERSON:</span><span class="value">{{ $shipper['name'] }}</span></div>
|
||||
<div class="row"><span class="label">ADDRESS:</span><span class="value">{{ $shipper['address'] }}</span></div>
|
||||
<div class="row"><span class="label">PHONE:</span><span class="value">{{ $shipper['phone'] }}</span></div>
|
||||
<div class="row"><span class="label">EMAIL:</span><span class="value">{{ $shipper['email'] ?: '—' }}</span></div>
|
||||
</div>
|
||||
<!-- ════════ SHIPPER & CONSIGNEE ════════ -->
|
||||
<table class="grid-table">
|
||||
<tr>
|
||||
<td class="left">
|
||||
<div class="section-header">SHIPPER</div>
|
||||
<table class="field-table">
|
||||
<tr><td class="label">Company</td><td class="value">{{ $shipper['company'] ?: $shipper['name'] }}</td></tr>
|
||||
<tr><td class="label">Contact Person</td><td class="value">{{ $shipper['name'] ?: '—' }}</td></tr>
|
||||
<tr><td class="label">Address</td><td class="value">{{ $shipper['address'] ?: '—' }}</td></tr>
|
||||
@if($shipper['city'])
|
||||
<tr><td class="label">City</td><td class="value">{{ $shipper['city'] }}</td></tr>
|
||||
@endif
|
||||
@if($shipper['zip'])
|
||||
<tr><td class="label">Zip Code</td><td class="value">{{ $shipper['zip'] }}</td></tr>
|
||||
@endif
|
||||
<tr><td class="label">Phone</td><td class="value">{{ $shipper['phone'] ?: '—' }}</td></tr>
|
||||
@if($shipper['email'])
|
||||
<tr><td class="label">Email</td><td class="value">{{ $shipper['email'] }}</td></tr>
|
||||
@endif
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<div class="section-header">CONSIGNEE</div>
|
||||
<table class="field-table">
|
||||
<tr><td class="label">Company</td><td class="value">{{ $receiver['company'] ?: $receiver['name'] }}</td></tr>
|
||||
<tr><td class="label">Contact Person</td><td class="value">{{ $receiver['name'] ?: '—' }}</td></tr>
|
||||
<tr><td class="label">Address</td><td class="value">{{ $receiver['address'] ?: '—' }}</td></tr>
|
||||
@if($receiver['city'])
|
||||
<tr><td class="label">City</td><td class="value">{{ $receiver['city'] }}</td></tr>
|
||||
@endif
|
||||
@if($receiver['zip'])
|
||||
<tr><td class="label">Zip Code</td><td class="value">{{ $receiver['zip'] }}</td></tr>
|
||||
@endif
|
||||
<tr><td class="label">Phone</td><td class="value">{{ $receiver['phone'] ?: '—' }}</td></tr>
|
||||
@if($receiver['email'])
|
||||
<tr><td class="label">Email</td><td class="value">{{ $receiver['email'] }}</td></tr>
|
||||
@endif
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CONSIGNEE</div>
|
||||
<div class="row"><span class="label">CONSIGNEE:</span><span class="value">{{ $receiver['city'] }}, {{ $shipment->toCountry?->name }} ({{ $shipment->toCountry?->iso_code }})</span></div>
|
||||
<div class="row"><span class="label">COMPANY NAME:</span><span class="value">{{ $receiver['company'] ?: '—' }}</span></div>
|
||||
<div class="row"><span class="label">CONTACT PERSON:</span><span class="value">{{ $receiver['name'] }}</span></div>
|
||||
<div class="row"><span class="label">ADDRESS:</span><span class="value">{{ $receiver['address'] }}</span></div>
|
||||
<div class="row"><span class="label">Zip Code & City:</span><span class="value">{{ $receiver['zip'] }} {{ $receiver['city'] }}</span></div>
|
||||
<div class="row"><span class="label">PHONE:</span><span class="value">{{ $receiver['phone'] }}</span></div>
|
||||
<div class="row"><span class="label">EMAIL:</span><span class="value">{{ $receiver['email'] ?: '—' }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content-section">
|
||||
<div class="section-title">Content</div>
|
||||
<div class="content-desc">{{ $shipment->content_description ?: 'General Goods' }}</div>
|
||||
|
||||
<table>
|
||||
<!-- ════════ ITEMS TABLE ════════ -->
|
||||
<div class="details-section">
|
||||
<div class="section-header">SHIPMENT DETAILS</div>
|
||||
<table class="details-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 30px">NO</th>
|
||||
<th>DESCRIPTION</th>
|
||||
<th style="width: 90px">H.S. CODE</th>
|
||||
<th style="width: 60px">QUANTITY</th>
|
||||
<th style="width: 80px">UNIT PRICE</th>
|
||||
<th style="width: 90px">TOTAL IN USD</th>
|
||||
<th style="width: 5%;">No</th>
|
||||
<th style="width: 40%;">Description</th>
|
||||
<th style="width: 15%;">H.S. Code</th>
|
||||
<th style="width: 10%;">Qty</th>
|
||||
<th style="width: 15%;">Unit Price (USD)</th>
|
||||
<th style="width: 15%;">Total (USD)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($items as $item)
|
||||
<tr>
|
||||
<td class="text-center">{{ $item->row_number }}</td>
|
||||
<td>{{ $item->row_number }}</td>
|
||||
<td>{{ $item->description }}</td>
|
||||
<td class="text-center">{{ $item->hs_code }}</td>
|
||||
<td class="text-center">{{ $item->quantity }}</td>
|
||||
<td class="text-right">{{ number_format($item->unit_price, 2) }}</td>
|
||||
<td class="text-right">{{ number_format($item->total_usd, 2) }}</td>
|
||||
<td>{{ $item->hs_code ?: '—' }}</td>
|
||||
<td>{{ $item->quantity }}</td>
|
||||
<td>{{ number_format($item->unit_price, 2) }}</td>
|
||||
<td>{{ number_format($item->total_usd, 2) }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="6" class="text-center">No items</td></tr>
|
||||
<tr><td colspan="6" style="text-align:center; color:#9ca3af;">No items</td></tr>
|
||||
@endforelse
|
||||
|
||||
{{-- Fill empty rows to match reference (9 rows) --}}
|
||||
@for($i = $items->count() + 1; $i <= 9; $i++)
|
||||
<tr>
|
||||
<td class="text-center">{{ $i }}</td>
|
||||
<td> </td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@endfor
|
||||
|
||||
<tr class="total-row">
|
||||
<td colspan="5" class="text-right">TOTAL INVOICE AMOUNT IN USD</td>
|
||||
<td class="text-right">{{ number_format($invoice_total_usd, 2) }}</td>
|
||||
<tr class="details-total">
|
||||
<td colspan="5" style="text-align: right;">TOTAL INVOICE AMOUNT (USD):</td>
|
||||
<td>{{ number_format($invoice_total_usd, 2) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- WEIGHT & DIMENSION -->
|
||||
<div class="weight-section">
|
||||
<div class="weight-box">
|
||||
<div class="weight-label">Gross Weight</div>
|
||||
<div class="weight-value">{{ $shipment->weight }} KG</div>
|
||||
</div>
|
||||
<div class="weight-box">
|
||||
<div class="weight-label">Volumetric Weight</div>
|
||||
<div class="weight-value">{{ $shipment->volumetric_weight }} KG</div>
|
||||
</div>
|
||||
<div class="weight-box">
|
||||
<div class="weight-label">W * L * H (cm)</div>
|
||||
<div class="weight-value">{{ $shipment->dimensions ?: '—' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ════════ WEIGHT & DIMENSIONS ════════ -->
|
||||
<table class="weight-table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="weight-label">Gross Weight</div>
|
||||
<div class="weight-value">{{ number_format($shipment->weight ?? 0, 3) }} KG</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="weight-label">Volumetric Weight</div>
|
||||
<div class="weight-value">{{ number_format($shipment->volumetric_weight ?? 0, 3) }} KG</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="weight-label">W × L × H (cm)</div>
|
||||
<div class="weight-value">{{ $shipment->dimensions ?: '—' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- REASON FOR EXPORT -->
|
||||
<!-- ════════ REASON FOR EXPORT ════════ -->
|
||||
@if($shipment->reason_for_export)
|
||||
<div class="reason-section">
|
||||
<div class="section-title">REASON FOR EXPORT</div>
|
||||
<div class="reason-text">
|
||||
{{ strtoupper($shipment->reason_for_export ?: 'ITEM BEING SENT AS A SAMPLE, NOT FOR SALE') }}
|
||||
</div>
|
||||
<div class="section-header">REASON FOR EXPORT</div>
|
||||
<div class="reason-text">{{ $shipment->reason_for_export }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- DECLARATION -->
|
||||
<!-- ════════ DECLARATION & SIGNATURE ════════ -->
|
||||
<div class="declaration">
|
||||
<strong>I HEREBY STATE THAT THE ABOVE INFORMATION IS TRUE AND CORRECT TO THE BEST OF MY KNOWLEDGE AND I, THE UNDERSIGNED, AM LIABLE FOR ANY CONSEQUENCES THAT MAY ARISE DUE TO NON-DISCLOSURE OF FACTS.</strong>
|
||||
<div class="signature-area">
|
||||
<div class="signature-box">
|
||||
NAME - SIGNATURE
|
||||
<div class="signature-line"></div>
|
||||
</div>
|
||||
<div class="signature-box">
|
||||
DATE
|
||||
<div class="signature-line">...../...../..........</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-header">DECLARATION</div>
|
||||
<p>I hereby certify that the information on this invoice is true and correct, and that the goods originated from the country shown above. This invoice is for customs purposes only.</p>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BARCODE & INFO -->
|
||||
<div class="bottom-barcode">
|
||||
@if($barcode_base64)
|
||||
<img src="{{ $barcode_base64 }}" alt="barcode">
|
||||
@endif
|
||||
<div class="bottom-info">
|
||||
<span><strong>{{ $shipment->awb_no }}</strong></span>
|
||||
<span>{{ $shipment->weight }} KG</span>
|
||||
<span>{{ $shipment->created_at?->format('m/d/Y') }}</span>
|
||||
<span>{{ $shipment->fromCountry?->name }} → {{ $shipment->toCountry?->name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="signature-table">
|
||||
<tr>
|
||||
<td style="border-left: 1px solid #e5e7eb;">
|
||||
Shipper Name & Signature
|
||||
<div class="sig-line"></div>
|
||||
</td>
|
||||
<td>
|
||||
Date
|
||||
<div class="sig-line">...../...../..........</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<!-- ════════ FOOTER ════════ -->
|
||||
<div class="footer">
|
||||
IFNEX Logistics — We Deliver Value | AWB: {{ $shipment->awb_no }} | Generated: {{ now()->format('Y-m-d H:i') }}
|
||||
<div class="footer-brand">IFNEX LOGISTICS — We Deliver Value</div>
|
||||
<div class="footer-track">Track Your Shipment: http://ifnex.net</div>
|
||||
<div class="footer-meta">
|
||||
Invoice: {{ $shipment->awb_no }} | Generated: {{ now()->format('Y-m-d H:i') }} | © {{ date('Y') }} IFNEX Logistics
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -3,247 +3,191 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
/* ════════ Base — A5 Landscape (210×148mm) ════════ */
|
||||
* { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: DejaVu Sans, Arial, sans-serif;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
font-size: 9px;
|
||||
color: #000000;
|
||||
line-height: 1.3;
|
||||
}
|
||||
@page {
|
||||
margin-top: 6mm;
|
||||
margin-bottom: 6mm;
|
||||
margin-left: 6mm;
|
||||
margin-right: 6mm;
|
||||
}
|
||||
/* A5 افقی: 210x148 mm — استفاده از min-height نه height */
|
||||
.label-page {
|
||||
width: 200mm;
|
||||
padding: 4mm;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 3px solid #f37021;
|
||||
padding-bottom: 2mm;
|
||||
/* ════════ Main Layout: بارکد سمت چپ + اطلاعات سمت راست ════════ */
|
||||
.main-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border: 2px solid #000000;
|
||||
margin-bottom: 3mm;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #f37021;
|
||||
}
|
||||
.brand-tagline {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
}
|
||||
.header-date {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ─── MAIN: 2 ستون ─── */
|
||||
.main {
|
||||
display: flex;
|
||||
gap: 4mm;
|
||||
}
|
||||
|
||||
/* ─── ستون چپ: بارکد ─── */
|
||||
.barcode-col {
|
||||
width: 45%;
|
||||
border: 2px solid #000;
|
||||
.main-table > tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
padding: 3mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.barcode-col img {
|
||||
max-width: 100%;
|
||||
.barcode-cell {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
border-right: 1.5px solid #000000;
|
||||
}
|
||||
.info-cell {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* ════════ Barcode ════════ */
|
||||
.barcode-cell img {
|
||||
max-width: 100mm;
|
||||
height: 25mm;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto 1mm;
|
||||
}
|
||||
.awb-label {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 2mm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.awb-display {
|
||||
font-size: 16px;
|
||||
.awb-number {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 3px;
|
||||
font-family: 'Courier New', 'DejaVu Sans Mono', monospace;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-top: 1mm;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* ─── ستون راست: اطلاعات ─── */
|
||||
.info-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2mm;
|
||||
}
|
||||
|
||||
/* ─── مسیر کشورها ─── */
|
||||
.route {
|
||||
border: 2px solid #000;
|
||||
padding: 2mm;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.country-box {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.country-label {
|
||||
.awb-label-small {
|
||||
font-size: 7px;
|
||||
color: #666;
|
||||
color: #666666;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
/* ════════ Info Column (Reference/Weight/Origin/Date/Destination) ════════ */
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 8px;
|
||||
}
|
||||
.info-table td {
|
||||
padding: 1.5mm 2mm;
|
||||
border-bottom: 0.5px solid #cccccc;
|
||||
}
|
||||
.info-table td.info-label {
|
||||
width: 45%;
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.country-name {
|
||||
font-size: 11px;
|
||||
.info-table td.info-value {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.country-iso {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #f37021;
|
||||
.info-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 20px;
|
||||
color: #f37021;
|
||||
padding: 0 2mm;
|
||||
.country-iso-big {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* ─── جدول وزن ─── */
|
||||
.weights {
|
||||
display: flex;
|
||||
border: 2px solid #000;
|
||||
/* ════════ Weight & Dimensions Row (bottom) ════════ */
|
||||
.weights-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
.weight-cell {
|
||||
flex: 1;
|
||||
border-right: 1px solid #000;
|
||||
padding: 2mm;
|
||||
.weights-table td {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
padding: 2.5mm 2mm;
|
||||
border-right: 1px solid #000000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.weight-cell:last-child {
|
||||
.weights-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.weight-label {
|
||||
.weight-label-bottom {
|
||||
font-size: 7px;
|
||||
color: #666;
|
||||
color: #666666;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1mm;
|
||||
}
|
||||
.weight-value {
|
||||
font-size: 12px;
|
||||
.weight-value-bottom {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
/* ─── ZIP ─── */
|
||||
.zip {
|
||||
border: 2px solid #000;
|
||||
padding: 2mm;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fffde7;
|
||||
}
|
||||
.zip-label {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.zip-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
.footer {
|
||||
border-top: 2px solid #f37021;
|
||||
padding-top: 2mm;
|
||||
margin-top: 3mm;
|
||||
font-size: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #666;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="label-page">
|
||||
<!-- HEADER -->
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="brand-name">IFNEx LOGISTICS</div>
|
||||
<div class="brand-tagline">We Deliver Value</div>
|
||||
</div>
|
||||
<div class="header-date">Date: {{ $shipment->created_at?->format('m/d/Y') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<!-- BARCODE -->
|
||||
<div class="barcode-col">
|
||||
@if($barcode_base64)
|
||||
<img src="{{ $barcode_base64 }}" alt="barcode">
|
||||
@endif
|
||||
<div class="awb-label">AWB Number</div>
|
||||
<div class="awb-display">{{ $shipment->awb_no }}</div>
|
||||
</div>
|
||||
<!-- ════════ Main: Barcode + Info ════════ -->
|
||||
<table class="main-table">
|
||||
<tr>
|
||||
<!-- Barcode (left) -->
|
||||
<td class="barcode-cell">
|
||||
@if($barcode_base64)
|
||||
<img src="{{ $barcode_base64 }}" alt="barcode">
|
||||
@endif
|
||||
<div class="awb-number">{{ $shipment->awb_no }}</div>
|
||||
<div class="awb-label-small">Reference Number</div>
|
||||
</td>
|
||||
<!-- Info (right) -->
|
||||
<td class="info-cell">
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="info-label">Weight</td>
|
||||
<td class="info-value">{{ number_format($shipment->weight ?? 0, 3) }} KG</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Origin</td>
|
||||
<td class="info-value">
|
||||
{{ strtoupper($shipment->fromCountry?->name ?? '—') }}
|
||||
<span class="country-iso-big">({{ $origin_iso }})</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Date</td>
|
||||
<td class="info-value">{{ $shipment->created_at?->format('m/d/Y') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Destination</td>
|
||||
<td class="info-value">
|
||||
{{ strtoupper($shipment->toCountry?->name ?? '—') }}
|
||||
<span class="country-iso-big">({{ $dest_iso }})</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- INFO -->
|
||||
<div class="info-col">
|
||||
<!-- ROUTE -->
|
||||
<div class="route">
|
||||
<div class="country-box">
|
||||
<div class="country-label">ORIGIN</div>
|
||||
<div class="country-name">{{ $shipment->fromCountry?->name ?? '—' }}</div>
|
||||
<div class="country-iso">{{ $origin_iso }}</div>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="country-box">
|
||||
<div class="country-label">DESTINATION</div>
|
||||
<div class="country-name">{{ $shipment->toCountry?->name ?? '—' }}</div>
|
||||
<div class="country-iso">{{ $dest_iso }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ════════ Weights & Dimensions (bottom row) ════════ -->
|
||||
<table class="weights-table">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="weight-label-bottom">Gross Weight</div>
|
||||
<div class="weight-value-bottom">{{ number_format($shipment->weight ?? 0, 3) }} KG</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="weight-label-bottom">Volumetric Weight</div>
|
||||
<div class="weight-value-bottom">{{ number_format($shipment->volumetric_weight ?? 0, 3) }} KG</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="weight-label-bottom">W × L × H (cm)</div>
|
||||
<div class="weight-value-bottom">{{ $shipment->dimensions ?: '—' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- WEIGHTS -->
|
||||
<div class="weights">
|
||||
<div class="weight-cell">
|
||||
<div class="weight-label">Gross Weight</div>
|
||||
<div class="weight-value">{{ $shipment->weight }} kg</div>
|
||||
</div>
|
||||
<div class="weight-cell">
|
||||
<div class="weight-label">Volumetric</div>
|
||||
<div class="weight-value">{{ $shipment->volumetric_weight }} kg</div>
|
||||
</div>
|
||||
<div class="weight-cell">
|
||||
<div class="weight-label">W*L*H</div>
|
||||
<div class="weight-value">{{ $shipment->dimensions ?: '—' }} cm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZIP -->
|
||||
<div class="zip">
|
||||
<span class="zip-label">DEST ZIP</span>
|
||||
<span class="zip-value">{{ $shipment->receiver_zip ?: '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="footer">
|
||||
<span>IFNEx Logistics — We Deliver Value</span>
|
||||
<span><strong>{{ $shipment->awb_no }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user