200 lines
6.3 KiB
PHP
200 lines
6.3 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ $invoice->invoice_number }}</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
|
|
font-size: 14px;
|
|
background: #f6f8fb;
|
|
color: #2f3440;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.header-box {
|
|
text-align: center;
|
|
border-bottom: 3px solid #1b2430;
|
|
background: linear-gradient(to right, #0766ad 0%, #85c6ee 100%);
|
|
padding: 26px 0 18px 0;
|
|
margin-bottom: 28px;
|
|
border-radius: 0 0 15px 15px;
|
|
box-shadow: 0 2px 12px rgba(35,82,124,0.08);
|
|
}
|
|
.logo {
|
|
width: 120px;
|
|
margin-bottom: 12px;
|
|
filter: drop-shadow(0 2px 5px #0001);
|
|
}
|
|
.title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #1a4c8b;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 5px;
|
|
text-shadow: 0 2px 9px #90caf944;
|
|
}
|
|
.subtitle {
|
|
font-size: 15px;
|
|
margin-top: 3px;
|
|
color: #376f9e;
|
|
font-weight: 500;
|
|
letter-spacing: 1px;
|
|
}
|
|
.section-title {
|
|
font-size: 19px;
|
|
font-weight: bold;
|
|
margin-top: 28px;
|
|
margin-bottom: 10px;
|
|
color: #0766ad;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-left: 4px solid #0766ad;
|
|
padding-left: 12px;
|
|
}
|
|
.info-box {
|
|
border: 1px solid #d3e3fd;
|
|
padding: 13px 18px;
|
|
line-height: 1.8;
|
|
background: #ecf7ff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 8px rgba(100,143,176,0.05);
|
|
margin-bottom: 7px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 15px;
|
|
background: #fff;
|
|
box-shadow: 0 2px 18px rgba(91,146,196,0.05);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
th {
|
|
background: linear-gradient(90deg, #e3f1fb 80%, #f0f6ff 100%);
|
|
padding: 10px 7px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #085d99;
|
|
border: 1px solid #b1cbe1;
|
|
text-align: center;
|
|
}
|
|
td {
|
|
padding: 8px 7px;
|
|
border: 1px solid #dae5ec;
|
|
color: #395471;
|
|
font-size: 13px;
|
|
background: #fafcff;
|
|
text-align: center;
|
|
}
|
|
tbody tr:nth-child(even) td {
|
|
background: #f3fafd;
|
|
}
|
|
tbody tr:hover td {
|
|
background: #e2f1fa;
|
|
transition: background 0.2s;
|
|
}
|
|
.totals-box {
|
|
margin-top: 22px;
|
|
margin-bottom: 16px;
|
|
padding: 14px 22px;
|
|
border: 1.5px solid #b1cbe1;
|
|
background: linear-gradient(90deg, #eaf6fb 70%, #f8fbfe 100%);
|
|
font-size: 16px;
|
|
line-height: 2.1;
|
|
border-radius: 11px;
|
|
box-shadow: 0 2px 10px rgba(120,160,200,0.08);
|
|
}
|
|
.totals-box strong {
|
|
color: #0766ad;
|
|
font-size: 15.5px;
|
|
}
|
|
@media (max-width: 680px) {
|
|
.header-box, .info-box, .totals-box {
|
|
padding: 10px;
|
|
}
|
|
.section-title {
|
|
font-size: 15.5px;
|
|
padding-left: 7px;
|
|
margin-bottom: 7px;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<div class="header-box">
|
|
<img src="{{ public_path('images/kent_logo2.png') }}" alt="logo" class="logo">
|
|
<div class="title">KENT LOGISTICS</div>
|
|
<div class="subtitle">Official Invoice</div>
|
|
</div>
|
|
<!-- INVOICE INFO -->
|
|
<div class="info-box">
|
|
<strong>Invoice No:</strong> {{ $invoice->invoice_number }} <br>
|
|
<strong>Invoice Date:</strong> {{ $invoice->invoice_date }} <br>
|
|
<strong>Due Date:</strong> {{ $invoice->due_date }} <br>
|
|
<strong>Status:</strong> {{ ucfirst($invoice->status) }}
|
|
</div>
|
|
<!-- CUSTOMER DETAILS -->
|
|
<div class="section-title">Customer Details</div>
|
|
<div class="info-box">
|
|
<strong>{{ $invoice->customer_name }}</strong><br>
|
|
{{ $invoice->company_name }} <br>
|
|
{{ $invoice->customer_mobile }} <br>
|
|
{{ $invoice->customer_email }} <br>
|
|
{{ $invoice->customer_address }}
|
|
</div>
|
|
<!-- ITEMS TABLE -->
|
|
<div class="section-title">Invoice Items</div>
|
|
<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($invoice->items as $i => $item)
|
|
<tr>
|
|
<td>{{ $i + 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, 2) }}</td>
|
|
<td>{{ number_format($item->ttl_amount, 2) }}</td>
|
|
<td>{{ $item->cbm }}</td>
|
|
<td>{{ $item->ttl_cbm }}</td>
|
|
<td>{{ $item->kg }}</td>
|
|
<td>{{ $item->ttl_kg }}</td>
|
|
<td>{{ $item->shop_no }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<!-- TOTALS -->
|
|
<div class="section-title">Totals</div>
|
|
<div class="totals-box">
|
|
<strong>Amount:</strong> ₹{{ number_format($invoice->final_amount, 2) }} <br>
|
|
<strong>GST ({{ $invoice->gst_percent }}%):</strong> ₹{{ number_format($invoice->gst_amount, 2) }} <br>
|
|
<strong>Total With GST:</strong> <strong>₹{{ number_format($invoice->final_amount_with_gst, 2) }}</strong>
|
|
</div>
|
|
</body>
|
|
</html>
|