137 lines
6.9 KiB
PHP
137 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Helvetica', Arial, sans-serif; color: #374151; font-size: 13px; padding: 40px; }
|
|
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
|
|
.logo { font-size: 22px; font-weight: 900; color: {{ $invoiceSettings->accent_color ?? '#FFB7C5' }}; }
|
|
.logo-sub { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
|
.inv-number { font-size: 22px; font-weight: 700; color: #1F2937; text-align: right; }
|
|
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #FDE68A; color: #92400E; }
|
|
.section-title { font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
|
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; }
|
|
.billing-name { font-weight: 700; font-size: 15px; color: #111827; }
|
|
.billing-detail { font-size: 12px; color: #6B7280; margin-top: 2px; }
|
|
.detail-table { width: 100%; font-size: 12px; }
|
|
.detail-table td { padding: 3px 0; }
|
|
.detail-table td:first-child { color: #9CA3AF; }
|
|
.detail-table td:last-child { font-weight: 600; text-align: right; }
|
|
table.items { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
|
|
table.items thead { background: #FFF0F5; }
|
|
table.items th { padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; }
|
|
table.items th:last-child, table.items td:last-child { text-align: right; }
|
|
table.items th:nth-child(2), table.items td:nth-child(2) { text-align: center; }
|
|
table.items td { padding: 10px 12px; border-bottom: 1px solid #FDE8F0; font-size: 12px; }
|
|
.totals { display: flex; justify-content: flex-end; margin-bottom: 24px; }
|
|
.totals-box { width: 260px; }
|
|
.totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
|
|
.totals-row.total { border-top: 2px solid {{ $invoiceSettings->accent_color ?? '#FFB7C5' }}; margin-top: 6px; padding-top: 8px; font-size: 15px; font-weight: 800; color: {{ $invoiceSettings->accent_color ?? '#FFB7C5' }}; }
|
|
.bank-box { background: #FFF5F7; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
|
|
.bank-title { font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
|
|
.bank-detail { font-size: 12px; color: #6B7280; }
|
|
.notes { font-size: 11px; color: #9CA3AF; font-style: italic; }
|
|
.footer { margin-top: 40px; text-align: center; font-size: 11px; color: #D1D5DB; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<div style="display:flex; align-items:center; gap:12px;">
|
|
@if($invoiceSettings->header_logo && file_exists(storage_path('app/public/' . $invoiceSettings->header_logo)))
|
|
<img src="{{ storage_path('app/public/' . $invoiceSettings->header_logo) }}"
|
|
style="width:52px; height:52px; object-fit:cover; border-radius:12px;" alt="Logo">
|
|
@endif
|
|
<div>
|
|
<div class="logo">{{ $invoiceSettings->header_name ?: 'KOL Manager' }}</div>
|
|
<div class="logo-sub">{{ $invoiceSettings->header_title ?: 'Personal Talent Assistant' }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:right">
|
|
<div class="inv-number">{{ $invoice->invoice_number }}</div>
|
|
<div style="margin-top:4px"><span class="badge">{{ $invoice->status->label() }}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="billing-grid">
|
|
<div>
|
|
<div class="section-title">Bill To</div>
|
|
@if($invoice->client)
|
|
<div class="billing-name">{{ $invoice->client->name }}</div>
|
|
@if($invoice->client->company) <div class="billing-detail">{{ $invoice->client->company }}</div> @endif
|
|
@if($invoice->client->email) <div class="billing-detail">{{ $invoice->client->email }}</div> @endif
|
|
@if($invoice->client->full_address) <div class="billing-detail">{{ $invoice->client->full_address }}</div> @endif
|
|
@else
|
|
<div class="billing-detail">—</div>
|
|
@endif
|
|
</div>
|
|
<div style="text-align:right">
|
|
<div class="section-title">Invoice Details</div>
|
|
<table class="detail-table">
|
|
<tr><td>Issue Date</td><td>{{ $invoice->issue_date->format('d M Y') }}</td></tr>
|
|
<tr><td>Due Date</td><td>{{ $invoice->due_date->format('d M Y') }}</td></tr>
|
|
@if($invoice->paid_date)
|
|
<tr><td>Paid Date</td><td>{{ $invoice->paid_date->format('d M Y') }}</td></tr>
|
|
@endif
|
|
<tr><td>Currency</td><td>{{ $invoice->currency }}</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="items">
|
|
<thead>
|
|
<tr>
|
|
<th>Description</th>
|
|
<th>Qty</th>
|
|
<th style="text-align:right">Unit Price</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($invoice->items as $item)
|
|
<tr>
|
|
<td>
|
|
{{ $item->description }}
|
|
@if(!$item->is_taxable)
|
|
<span style="margin-left:6px; font-size:10px; background:#F3F4F6; color:#6B7280; padding:2px 8px; border-radius:10px; font-weight:600;">Non-Taxable</span>
|
|
@endif
|
|
</td>
|
|
<td style="text-align:center">{{ $item->quantity }}</td>
|
|
<td style="text-align:right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
|
<td style="text-align:right; font-weight:600">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="totals">
|
|
<div class="totals-box">
|
|
<div class="totals-row"><span>Subtotal</span><span>Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span></div>
|
|
@if($invoice->tax_rate > 0)
|
|
<div class="totals-row" style="color:#D97706"><span>Tax ({{ $invoice->tax_rate }}% — paid by client)</span><span>Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span></div>
|
|
@endif
|
|
<div class="totals-row total"><span>Total (you receive)</span><span>{{ $invoice->formatted_total }}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($invoice->bank_name)
|
|
<div class="bank-box">
|
|
<div class="bank-title">Payment Information</div>
|
|
<div class="bank-detail">
|
|
{{ $invoice->bank_name }}
|
|
@if($invoice->branch_name) · {{ $invoice->branch_name }} @endif
|
|
· {{ $invoice->bank_account }} · a/n {{ $invoice->bank_holder }}
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($invoice->notes)
|
|
<div class="notes">{{ $invoice->notes }}</div>
|
|
@endif
|
|
|
|
<div class="footer">Generated by KOL Manager · Thank you for the collaboration! 🐱</div>
|
|
|
|
</body>
|
|
</html>
|