2025-11-17 10:33:11 +05:30
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>{{ $invoice->invoice_number }}</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
2025-11-18 14:35:58 +05:30
|
|
|
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
|
2025-11-21 16:15:10 +05:30
|
|
|
background: #F7FBFC;
|
|
|
|
|
color: #1A222B;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-size: 15px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.container {
|
|
|
|
|
max-width: 850px;
|
|
|
|
|
margin: 24px auto 0 auto;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 13px;
|
|
|
|
|
box-shadow: 0 2px 14px rgba(40,105,160,0.08);
|
|
|
|
|
padding: 35px 32px 18px 32px;
|
|
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
border-bottom: 2px solid #E6EBF0;
|
|
|
|
|
padding-bottom: 13px;
|
|
|
|
|
}
|
|
|
|
|
.logo-company {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
|
|
|
|
.logo {
|
2025-11-21 16:15:10 +05:30
|
|
|
height: 50px;
|
|
|
|
|
margin-right: 13px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.company-details {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.company-title {
|
|
|
|
|
font-size: 21px;
|
2025-11-17 10:33:11 +05:30
|
|
|
font-weight: bold;
|
2025-11-21 16:15:10 +05:30
|
|
|
margin-bottom: 2px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.company-sub {
|
|
|
|
|
font-size: 16px;
|
2025-11-17 10:33:11 +05:30
|
|
|
margin-bottom: 8px;
|
2025-11-18 14:35:58 +05:30
|
|
|
font-weight: 500;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.invoice-details {
|
|
|
|
|
text-align: right;
|
|
|
|
|
min-width: 220px;
|
|
|
|
|
}
|
|
|
|
|
.invoice-title {
|
2025-11-17 10:33:11 +05:30
|
|
|
font-weight: bold;
|
2025-11-21 16:15:10 +05:30
|
|
|
font-size: 23px;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
margin-bottom: 2px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.paid-label {
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
}
|
|
|
|
|
.paid-tag {
|
|
|
|
|
background: #23BF47;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding: 4px 16px 4px 22px;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.paid-tag:before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 7px;
|
|
|
|
|
top: 7px;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.paid-date {
|
2025-11-17 10:33:11 +05:30
|
|
|
font-size: 14px;
|
2025-11-21 16:15:10 +05:30
|
|
|
color: #23BF47;
|
|
|
|
|
margin-top: 2px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
|
|
|
|
|
2025-11-21 16:15:10 +05:30
|
|
|
.bill-section {
|
|
|
|
|
background: #F3F7FB;
|
|
|
|
|
border-radius: 11px;
|
|
|
|
|
padding: 20px 18px 13px 18px;
|
|
|
|
|
margin: 28px 0 16px 0;
|
|
|
|
|
box-shadow: 0 0px 0px #0000;
|
|
|
|
|
}
|
|
|
|
|
.bill-title {
|
|
|
|
|
font-size: 17px;
|
2025-11-17 10:33:11 +05:30
|
|
|
font-weight: bold;
|
2025-11-21 16:15:10 +05:30
|
|
|
color: #23355D;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
letter-spacing: 0.3px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.bill-details {
|
|
|
|
|
font-size: 15px;
|
2025-11-17 10:33:11 +05:30
|
|
|
line-height: 1.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
2025-11-21 16:15:10 +05:30
|
|
|
margin-top: 9px;
|
|
|
|
|
margin-bottom: 13px;
|
2025-11-18 14:35:58 +05:30
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
overflow: hidden;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
|
|
|
|
th {
|
2025-11-21 16:15:10 +05:30
|
|
|
background: #F6F7F9;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #6781A6;
|
2025-11-17 10:33:11 +05:30
|
|
|
font-weight: bold;
|
2025-11-21 16:15:10 +05:30
|
|
|
border: none;
|
|
|
|
|
text-align: left;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
|
|
|
|
td {
|
2025-11-21 16:15:10 +05:30
|
|
|
padding: 7px 0;
|
|
|
|
|
color: #222;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
border: none;
|
|
|
|
|
text-align: left;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
tbody tr:not(:last-child) td {
|
|
|
|
|
border-bottom: 1px solid #E6EBF0;
|
|
|
|
|
}
|
|
|
|
|
tbody tr:last-child td {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
.totals-row td {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #23355D;
|
|
|
|
|
}
|
|
|
|
|
.gst-row td {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #23BF47;
|
|
|
|
|
}
|
|
|
|
|
.total-row td {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
color: #222;
|
2025-11-18 14:35:58 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.payment-info {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
margin-bottom: 9px;
|
|
|
|
|
font-size: 15px;
|
2025-11-18 14:35:58 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.ref-number {
|
2025-11-17 10:33:11 +05:30
|
|
|
font-size: 14px;
|
2025-11-21 16:15:10 +05:30
|
|
|
color: #6781A6;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
margin-top: 2px;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
2025-11-21 16:15:10 +05:30
|
|
|
.footer {
|
|
|
|
|
border-top: 1.2px solid #E6EBF0;
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
padding-top: 12px;
|
2025-11-18 14:35:58 +05:30
|
|
|
font-size: 16px;
|
2025-11-21 16:15:10 +05:30
|
|
|
color: #888;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.footer strong {
|
|
|
|
|
color: #222;
|
|
|
|
|
font-weight: 500;
|
2025-11-17 10:33:11 +05:30
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-11-21 16:15:10 +05:30
|
|
|
<div class="container">
|
|
|
|
|
<!-- Header Section -->
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="logo-company">
|
|
|
|
|
<img src="{{ public_path('images/kent_logo2.png') }}" class="logo">
|
|
|
|
|
<div class="company-details">
|
|
|
|
|
<div class="company-title">{{ $invoice->company_name ?? 'Kent International Pvt. Ltd.' }}</div>
|
|
|
|
|
<div class="company-sub"></div>
|
|
|
|
|
{{ $invoice->company_address ?? '123 Business Park, Sector 5' }}<br>
|
|
|
|
|
{{ $invoice->company_city ?? 'Gurugram, Haryana 122001' }}<br>
|
|
|
|
|
{{ $invoice->company_country ?? 'India' }}<br>
|
|
|
|
|
GST: {{ $invoice->company_gst ?? 'GST123456789' }}<br>
|
|
|
|
|
Email: {{ $invoice->company_email ?? 'billing@kent.com' }}<br>
|
|
|
|
|
Phone: {{ $invoice->company_phone ?? '+91 124 123 4567' }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="invoice-details">
|
|
|
|
|
<div class="invoice-title">INVOICE</div>
|
|
|
|
|
Invoice #: {{ $invoice->invoice_number }}<br>
|
|
|
|
|
Issue Date: {{ date('d M Y', strtotime($invoice->invoice_date)) }}<br>
|
|
|
|
|
Due Date: {{ date('d M Y', strtotime($invoice->due_date)) }}
|
|
|
|
|
@if(strtolower($invoice->status) == 'paid')
|
|
|
|
|
<div class="paid-label">
|
|
|
|
|
<span class="paid-tag">Paid</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="paid-date">
|
|
|
|
|
Paid on: {{ date('d M Y', strtotime($invoice->paid_date ?? now())) }}
|
|
|
|
|
</div>
|
|
|
|
|
@else
|
|
|
|
|
<div class="paid-date" style="color:#d00;">Status: {{ ucfirst($invoice->status) }}</div>
|
|
|
|
|
@endif
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Bill To Section -->
|
|
|
|
|
<div class="bill-section">
|
|
|
|
|
<div class="bill-title">Bill To</div>
|
|
|
|
|
<div class="bill-details">
|
|
|
|
|
<strong>{{ $invoice->customer_name }}</strong><br>
|
|
|
|
|
{{ $invoice->customer_address }}<br>
|
|
|
|
|
GST: {{ $invoice->customer_gst ?? '-' }}<br>
|
|
|
|
|
Email: {{ $invoice->customer_email }}<br>
|
|
|
|
|
Phone: {{ $invoice->customer_mobile }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Items Table -->
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
<th>Qty</th>
|
|
|
|
|
<th>Rate (₹)</th>
|
|
|
|
|
<th>Amount (₹)</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
@foreach($invoice->items as $item)
|
|
|
|
|
<tr>
|
|
|
|
|
<td>{{ $item->description }}</td>
|
|
|
|
|
<td>{{ $item->qty }}</td>
|
|
|
|
|
<td>{{ number_format($item->price, 0) }}</td>
|
|
|
|
|
<td>{{ number_format($item->ttl_amount, 0) }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
@endforeach
|
|
|
|
|
<tr class="totals-row">
|
|
|
|
|
<td colspan="3" style="text-align:right;">Subtotal:</td>
|
|
|
|
|
<td>{{ number_format($invoice->subtotal, 0) }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="gst-row">
|
|
|
|
|
<td colspan="3" style="text-align:right;">GST ({{ $invoice->gst_percent }}%):</td>
|
|
|
|
|
<td>{{ number_format($invoice->gst_amount, 0) }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="total-row">
|
|
|
|
|
<td colspan="3" style="text-align:right;">Total:</td>
|
|
|
|
|
<td>{{ number_format($invoice->final_amount_with_gst, 0) }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<!-- Payment Info & Reference -->
|
|
|
|
|
<div class="payment-info">
|
|
|
|
|
<strong>Payment Method:</strong> {{ $invoice->payment_method ?? 'Bank Transfer' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ref-number">
|
|
|
|
|
Reference Number: {{ $invoice->reference_no ?? "REF123456789" }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Footer -->
|
|
|
|
|
<div class="footer">
|
|
|
|
|
Thank you for your business!<br>
|
|
|
|
|
For any queries, please contact us at <strong>{{ $invoice->company_email ?? 'billing@kent.com' }}</strong>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
