<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoice — Order #{{ $order->order_number }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root { --primary: #0f766e; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; }
* { box-sizing: border-box; }
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: var(--ink);
margin: 0;
padding: 24px;
background: #f3f4f6;
}
.sheet {
max-width: 860px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.toolbar {
max-width: 860px;
margin: 0 auto 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.btn {
display: inline-block;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid var(--line);
background: #fff;
color: var(--ink);
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.letterhead {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 24px;
border-bottom: 2px solid var(--ink);
margin-bottom: 24px;
}
.letterhead img { max-height: 56px; margin-bottom: 8px; }
.store-name { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.store-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 320px; }
.invoice-title { text-align: right; }
.invoice-title h1 { font-size: 26px; letter-spacing: 2px; margin: 0 0 6px; color: var(--primary); }
.invoice-title .meta-row { font-size: 13px; color: var(--muted); }
.invoice-title .meta-row strong { color: var(--ink); }
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
}
.badge-pending, .badge-confirmed { background: #fef3c7; color: #92400e; }
.badge-processing { background: #e0e7ff; color: #3730a3; }
.badge-shipped, .badge-out_for_delivery { background: #ede9fe; color: #5b21b6; }
.badge-delivered { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-paid { background: #d1fae5; color: #065f46; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-refunded { background: #f3f4f6; color: #374151; }
.badge-unpaid { background: #fef3c7; color: #92400e; }
.addresses {
display: flex;
gap: 32px;
margin-bottom: 28px;
}
.addresses .col { flex: 1; }
.addresses h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--muted);
margin: 0 0 8px;
}
.addresses p { margin: 0; font-size: 13.5px; line-height: 1.6; }
table.items {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
table.items th {
text-align: left;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--muted);
padding: 10px 8px;
border-bottom: 2px solid var(--ink);
}
table.items td {
padding: 12px 8px;
font-size: 13.5px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
table.items th.num, table.items td.num { text-align: right; }
.prod-name { font-weight: 600; }
.prod-sub { color: var(--muted); font-size: 12px; }
.totals-wrap { display: flex; justify-content: flex-end; margin-bottom: 28px; }
table.totals { width: 300px; border-collapse: collapse; }
table.totals td { padding: 6px 8px; font-size: 13.5px; }
table.totals td.label { color: var(--muted); }
table.totals td.amount { text-align: right; }
table.totals tr.grand td { border-top: 2px solid var(--ink); font-weight: 800; font-size: 16px; padding-top: 10px; }
.footer-grid { display: flex; gap: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-grid .col { flex: 1; }
.footer-grid h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--muted);
margin: 0 0 8px;
}
.footer-grid p { margin: 0; font-size: 13px; line-height: 1.6; }
.note-box { font-size: 13px; color: var(--ink); background: #f9fafb; border-radius: 8px; padding: 12px 14px; }
.thanks { text-align: center; margin-top: 32px; font-size: 12.5px; color: var(--muted); }
@media print {
body { background: #fff; padding: 0; }
.toolbar { display: none; }
.sheet { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
}
</style>
</head>
<body>
<div class="toolbar">
<a href="javascript:window.print()" class="btn btn-primary">🖨️ Print / Save as PDF</a>
<a href="javascript:window.close()" class="btn">Close</a>
</div>
<div class="sheet">
{{-- Letterhead --}}
<div class="letterhead">
<div>
@if(!empty($store['store_logo']))
<img src="{{ \Illuminate\Support\Facades\Storage::url($store['store_logo']) }}" alt="{{ $store['store_name'] ?? config('app.name') }}">
@endif
<div class="store-name">{{ $store['store_name'] ?? config('app.name', 'STP Ecommerce') }}</div>
<div class="store-meta">
@if(!empty($store['address_line_1']))
{{ $store['address_line_1'] }}{{ !empty($store['address_line_2']) ? ', ' . $store['address_line_2'] : '' }}<br>
@endif
@php
$cityLine = implode(', ', array_filter([
$store['city'] ?? null,
$store['state'] ?? null,
$store['postal_code'] ?? null,
]));
@endphp
@if($cityLine)
{{ $cityLine }}<br>
@endif
@if(!empty($store['country']))
{{ $store['country'] }}<br>
@endif
@if(!empty($store['store_phone']))
Phone: {{ $store['store_phone'] }}<br>
@endif
@if(!empty($store['store_email']))
Email: {{ $store['store_email'] }}<br>
@endif
@if(!empty($tax['tax_number']))
{{ $tax['tax_label'] ?? 'Tax' }} No: {{ $tax['tax_number'] }}
@endif
</div>
</div>
<div class="invoice-title">
<h1>INVOICE</h1>
<div class="meta-row"><strong>Order #:</strong> {{ $order->order_number }}</div>
<div class="meta-row"><strong>Date:</strong> {{ $order->created_at->format('d M Y, h:i A') }}</div>
<div class="meta-row" style="margin-top:8px;">
<span class="badge badge-{{ $order->status }}">{{ ucfirst(str_replace('_', ' ', $order->status)) }}</span>
<span class="badge badge-{{ $order->payment_status ?? 'unpaid' }}">{{ ucfirst($order->payment_status ?? 'unpaid') }}</span>
</div>
</div>
</div>
{{-- Bill To / Ship To --}}
<div class="addresses">
<div class="col">
<h3>Bill To</h3>
<p>
<strong>{{ $order->getCustomerDisplayName() }}</strong><br>
@if($order->user?->email ?? $order->guest_email)
{{ $order->user->email ?? $order->guest_email }}<br>
@endif
@if($order->guest_phone)
{{ $order->guest_phone }}
@endif
</p>
</div>
<div class="col">
<h3>Ship To</h3>
@php $addr = $order->shipping_address; @endphp
@if($addr)
<p>
{{ $addr['name'] ?? $order->getCustomerDisplayName() }}<br>
@if(!empty($addr['phone'])){{ $addr['phone'] }}<br>@endif
{{ $addr['address_line_1'] ?? $addr['line1'] ?? $addr['street'] ?? '' }}<br>
@if(!empty($addr['address_line_2'])){{ $addr['address_line_2'] }}<br>@endif
@php
$shipCityLine = implode(', ', array_filter([
$addr['city'] ?? null,
$addr['state'] ?? null,
$addr['zip'] ?? $addr['postal_code'] ?? null,
]));
@endphp
@if($shipCityLine){{ $shipCityLine }}<br>@endif
{{ $addr['country'] ?? '' }}
</p>
@else
<p>—</p>
@endif
</div>
</div>
{{-- Items --}}
<table class="items">
<thead>
<tr>
<th>Product</th>
<th class="num">Qty</th>
<th class="num">Unit Price</th>
<th class="num">Discount</th>
<th class="num">Total</th>
</tr>
</thead>
<tbody>
@foreach($order->items as $item)
<tr>
<td>
<div class="prod-name">{{ $item->product_name }}</div>
@if($item->variant_label || $item->sku)
<div class="prod-sub">
{{ $item->variant_label }}{{ $item->variant_label && $item->sku ? ' · ' : '' }}{{ $item->sku ? 'SKU: ' . $item->sku : '' }}
</div>
@endif
</td>
<td class="num">{{ $item->quantity }}</td>
<td class="num">{{ $order->currency ?? 'NPR' }} {{ number_format($item->unit_price, 2) }}</td>
<td class="num">{{ number_format($item->discount_amount ?? 0, 2) }}</td>
<td class="num"><strong>{{ $order->currency ?? 'NPR' }} {{ number_format($item->total_price, 2) }}</strong></td>
</tr>
@endforeach
</tbody>
</table>
{{-- Totals --}}
<div class="totals-wrap">
<table class="totals">
<tr>
<td class="label">Subtotal</td>
<td class="amount">{{ $order->currency ?? 'NPR' }} {{ number_format($order->subtotal, 2) }}</td>
</tr>
@if($order->discount_amount > 0)
<tr>
<td class="label">Discount</td>
<td class="amount">- {{ number_format($order->discount_amount, 2) }}</td>
</tr>
@endif
@if($order->coupon_code)
<tr>
<td class="label">Coupon ({{ $order->coupon_code }})</td>
<td class="amount">- {{ number_format($order->coupon_discount ?? 0, 2) }}</td>
</tr>
@endif
<tr>
<td class="label">Shipping</td>
<td class="amount">{{ number_format($order->shipping_amount ?? 0, 2) }}</td>
</tr>
<tr>
<td class="label">{{ $tax['tax_label'] ?? 'Tax' }}</td>
<td class="amount">{{ number_format($order->tax_amount ?? 0, 2) }}</td>
</tr>
<tr class="grand">
<td class="label">Total</td>
<td class="amount">{{ $order->currency ?? 'NPR' }} {{ number_format($order->total_amount, 2) }}</td>
</tr>
</table>
</div>
{{-- Payment / Shipping / Notes --}}
<div class="footer-grid">
<div class="col">
<h3>Payment</h3>
<p>
Method: {{ $order->payment_method ? strtoupper($order->payment_method) : '—' }}<br>
Status: {{ ucfirst($order->payment_status ?? 'unpaid') }}<br>
@if($order->paid_at)
Paid on: {{ $order->paid_at->format('d M Y, h:i A') }}
@endif
</p>
</div>
<div class="col">
<h3>Shipping</h3>
<p>
Method: {{ $order->shipping_method ?? '—' }}<br>
@if($order->tracking_number)
Tracking #: {{ $order->tracking_number }}<br>
@endif
@if($order->courier_name)
Courier: {{ $order->courier_name }}
@endif
</p>
</div>
@if($order->customer_note)
<div class="col">
<h3>Note</h3>
<div class="note-box">{{ $order->customer_note }}</div>
</div>
@endif
</div>
<div class="thanks">
Thank you for shopping with {{ $store['store_name'] ?? config('app.name', 'STP Ecommerce') }}.
@if(!empty($store['store_tagline'])) {{ $store['store_tagline'] }} @endif
</div>
</div>
</body>
</html>