156 lines
6.9 KiB
PHP
156 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hóa đơn #{{ $invoice->invoice_number }}</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: DejaVu Sans, Arial, sans-serif; color: #333; font-size: 13px; }
|
|
.invoice-box { max-width: 800px; margin: 0 auto; padding: 30px; }
|
|
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; border-bottom: 3px solid #1a56db; padding-bottom: 20px; }
|
|
.company-info h2 { color: #1a56db; font-size: 20px; margin-bottom: 5px; }
|
|
.company-info p { color: #666; font-size: 12px; margin: 2px 0; }
|
|
.invoice-meta { text-align: right; }
|
|
.invoice-meta h1 { color: #1a56db; font-size: 24px; margin-bottom: 5px; }
|
|
.invoice-meta p { font-size: 12px; color: #555; }
|
|
.billing-info { display: flex; justify-content: space-between; margin-bottom: 25px; }
|
|
.billing-info .col { width: 48%; }
|
|
.billing-info .col h3 { font-size: 13px; color: #1a56db; margin-bottom: 8px; text-transform: uppercase; }
|
|
.billing-info .col p { font-size: 12px; margin: 3px 0; }
|
|
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
|
|
table thead th { background: #1a56db; color: #fff; padding: 10px 12px; text-align: left; font-size: 12px; }
|
|
table tbody td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; font-size: 12px; }
|
|
table tbody tr:nth-child(even) { background: #f9fafb; }
|
|
.summary { display: flex; justify-content: flex-end; margin-bottom: 20px; }
|
|
.summary-table { width: 300px; }
|
|
.summary-table tr td { padding: 6px 10px; font-size: 13px; }
|
|
.summary-table tr td:last-child { text-align: right; font-weight: 600; }
|
|
.summary-table tr.total-row td { border-top: 2px solid #1a56db; font-size: 15px; color: #1a56db; padding-top: 10px; }
|
|
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
|
.status-paid { background: #d1fae5; color: #065f46; }
|
|
.status-unpaid { background: #fee2e2; color: #991b1b; }
|
|
.status-cancelled { background: #f3f4f6; color: #6b7280; }
|
|
.footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #e5e7eb; text-align: center; font-size: 11px; color: #9ca3af; }
|
|
.note { background: #fefce8; border-left: 3px solid #eab308; padding: 10px 14px; margin: 15px 0; font-size: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="invoice-box">
|
|
<div class="header">
|
|
<div class="company-info">
|
|
<h2>{{ $companyName }}</h2>
|
|
@if(isset($companyAddress))
|
|
<p>{{ $companyAddress }}</p>
|
|
@endif
|
|
@if(isset($companyPhone))
|
|
<p>Tel: {{ $companyPhone }}</p>
|
|
@endif
|
|
@if(isset($companyEmail))
|
|
<p>Email: {{ $companyEmail }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="invoice-meta">
|
|
<h1>HÓA ĐƠN</h1>
|
|
<p><strong>Mã hóa đơn:</strong> #{{ $invoice->invoice_number }}</p>
|
|
<p><strong>Ngày tạo:</strong> {{ $invoice->created_at ? $invoice->created_at->format('d/m/Y') : '—' }}</p>
|
|
<p><strong>Hạn thanh toán:</strong> {{ $invoice->due_date ? \Carbon\Carbon::parse($invoice->due_date)->format('d/m/Y') : '—' }}</p>
|
|
<p>
|
|
<strong>Trạng thái:</strong>
|
|
@if($invoice->status == 2)
|
|
<span class="status-badge status-paid">Đã thanh toán</span>
|
|
@elseif($invoice->status == 1)
|
|
<span class="status-badge status-unpaid">Chưa thanh toán</span>
|
|
@else
|
|
<span class="status-badge status-cancelled">Đã hủy</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="billing-info">
|
|
<div class="col">
|
|
<h3>Thông tin khách hàng</h3>
|
|
<p><strong>{{ $customer->fullname }}</strong></p>
|
|
@if($customer->email)
|
|
<p>Email: {{ $customer->email }}</p>
|
|
@endif
|
|
@if($customer->phone)
|
|
<p>Điện thoại: {{ $customer->phone }}</p>
|
|
@endif
|
|
@if($customer->address)
|
|
<p>Địa chỉ: {{ $customer->address }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="col">
|
|
<h3>Thông tin đơn hàng</h3>
|
|
<p><strong>Mã đơn hàng:</strong> #{{ $order->order_num ?? '—' }}</p>
|
|
@if(isset($order) && $order->created_at)
|
|
<p><strong>Ngày đặt:</strong> {{ $order->created_at->format('d/m/Y') }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:5%">#</th>
|
|
<th style="width:35%">Dịch vụ</th>
|
|
<th style="width:15%">Chu kỳ</th>
|
|
<th style="width:10%">Số lượng</th>
|
|
<th style="width:15%">Đơn giá</th>
|
|
<th style="width:20%">Thành tiền</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($invoiceItems as $i => $item)
|
|
<tr>
|
|
<td>{{ $i + 1 }}</td>
|
|
<td>{{ $item->description ?? ($item->product?->name ?? 'Dịch vụ') }}</td>
|
|
<td>{{ $item->billing_label }}</td>
|
|
<td>{{ $item->quantity ?? 1 }}</td>
|
|
<td>{{ number_format($item->unit_price, 0, ',', '.') }} đ</td>
|
|
<td>{{ number_format($item->total_price, 0, ',', '.') }} đ</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="summary">
|
|
<table class="summary-table">
|
|
<tr>
|
|
<td>Tạm tính</td>
|
|
<td>{{ number_format($invoice->sub_total, 0, ',', '.') }} đ</td>
|
|
</tr>
|
|
@if($invoice->discount_amount > 0)
|
|
<tr>
|
|
<td>Giảm giá</td>
|
|
<td>-{{ number_format($invoice->discount_amount, 0, ',', '.') }} đ</td>
|
|
</tr>
|
|
@endif
|
|
@if($invoice->tax > 0)
|
|
<tr>
|
|
<td>Thuế</td>
|
|
<td>{{ number_format($invoice->tax, 0, ',', '.') }} đ</td>
|
|
</tr>
|
|
@endif
|
|
<tr class="total-row">
|
|
<td>Tổng cộng</td>
|
|
<td>{{ number_format($invoice->total, 0, ',', '.') }} đ</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
@if($invoice->note)
|
|
<div class="note">
|
|
<strong>Ghi chú:</strong> {{ $invoice->note }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="footer">
|
|
<p>Cảm ơn quý khách đã sử dụng dịch vụ của {{ $companyName }}.</p>
|
|
<p>Đây là hóa đơn điện tử được tạo tự động, không cần chữ ký số.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |