266 lines
10 KiB
PHP
266 lines
10 KiB
PHP
@php
|
|
$brandColor = $brandColor ?? '#1a56db';
|
|
|
|
$frontendLabels = [
|
|
'nextjs' => 'Next.js',
|
|
'react' => 'React',
|
|
'vue' => 'Vue',
|
|
'nuxt' => 'Nuxt',
|
|
'astro' => 'Astro',
|
|
'angular' => 'Angular',
|
|
];
|
|
$frontendLabel = $quote->frontend_framework
|
|
? ($frontendLabels[$quote->frontend_framework] ?? $quote->frontend_framework)
|
|
: null;
|
|
|
|
$items = is_array($quote->items) ? $quote->items : [];
|
|
$referenceWebsites = is_array($quote->reference_websites) ? $quote->reference_websites : [];
|
|
|
|
$vatAmount = round(($quote->subtotal - $quote->discount) * $quote->vat_percent / 100, 2);
|
|
$fmt = fn ($n) => number_format((float) $n, 0, ',', '.');
|
|
@endphp
|
|
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Báo giá {{ $quote->quote_number }}</title>
|
|
<style>
|
|
@page { size: A4; margin: 16mm 18mm; }
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: "DejaVu Sans", "Times New Roman", serif;
|
|
color: #1f2937;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
background: #fff;
|
|
}
|
|
|
|
/* Header */
|
|
.top-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
|
|
.top-table td { vertical-align: top; }
|
|
.logo-cell { width: 32mm; }
|
|
.logo-cell img { width: 30mm; max-height: 16mm; }
|
|
.company-cell { padding-left: 8px; font-size: 10px; line-height: 1.5; }
|
|
.company-cell .company-name { font-size: 13px; font-weight: bold; text-transform: uppercase; color: {{ $brandColor }}; }
|
|
.meta-cell { width: 52mm; font-size: 10px; text-align: right; }
|
|
|
|
.doc-title { text-align: center; margin: 10px 0 2px; }
|
|
.doc-title h1 { font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: {{ $brandColor }}; }
|
|
.doc-title .sub { font-size: 11px; font-style: italic; color: #6b7280; }
|
|
|
|
.divider { border: none; border-top: 2px solid {{ $brandColor }}; margin: 8px 0 10px; }
|
|
|
|
/* Section */
|
|
.section { margin-bottom: 10px; }
|
|
.section-title {
|
|
font-size: 12px; font-weight: bold; text-transform: uppercase;
|
|
color: {{ $brandColor }}; border-bottom: 1px solid #e5e7eb;
|
|
padding-bottom: 3px; margin-bottom: 6px;
|
|
}
|
|
|
|
.info-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
|
|
.info-table td { padding: 2px 8px 2px 0; vertical-align: top; }
|
|
.info-table .lbl { width: 34mm; font-weight: bold; color: #374151; }
|
|
|
|
.two-col { width: 100%; border-collapse: collapse; table-layout: fixed; }
|
|
.two-col > tbody > tr > td { width: 50%; vertical-align: top; padding-right: 10px; }
|
|
|
|
/* Items table */
|
|
.items-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 10px; table-layout: fixed; }
|
|
.items-table th, .items-table td { border: 1px solid #d1d5db; padding: 6px 7px; vertical-align: top; overflow-wrap: break-word; }
|
|
.items-table thead th { background: {{ $brandColor }}; color: #fff; font-weight: bold; text-align: center; }
|
|
.items-table tr { page-break-inside: avoid; }
|
|
.items-table td.center { text-align: center; }
|
|
.items-table td.right { text-align: right; }
|
|
.items-table .item-desc { color: #6b7280; font-size: 9px; }
|
|
|
|
/* Summary */
|
|
.summary-table { width: 62mm; border-collapse: collapse; margin-top: 6px; margin-left: auto; font-size: 11px; }
|
|
.summary-table td { padding: 3px 6px; }
|
|
.summary-table .lbl { text-align: left; color: #374151; }
|
|
.summary-table .val { text-align: right; }
|
|
.summary-table tr.total td {
|
|
font-weight: bold; font-size: 13px; color: {{ $brandColor }};
|
|
border-top: 1.5px solid {{ $brandColor }};
|
|
}
|
|
|
|
.note-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 3px; padding: 7px 9px; margin-top: 6px; }
|
|
|
|
.badge { display: inline-block; padding: 1px 6px; border: 1px solid {{ $brandColor }}; border-radius: 3px; color: {{ $brandColor }}; font-size: 9px; }
|
|
|
|
ul.ref-list { margin: 2px 0 0 14px; }
|
|
|
|
/* Footer / sign */
|
|
.sign-table { width: 100%; border-collapse: collapse; margin-top: 12mm; text-align: center; page-break-inside: avoid; }
|
|
.sign-table td { width: 50%; vertical-align: top; }
|
|
.sign-title { font-weight: bold; }
|
|
.sign-hint { font-size: 9px; font-style: italic; color: #6b7280; }
|
|
.footer-note { margin-top: 8mm; text-align: center; font-size: 9px; font-style: italic; color: #6b7280; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table class="top-table">
|
|
<tr>
|
|
@if ($companyLogo)
|
|
<td class="logo-cell"><img src="{{ $companyLogo }}" alt="logo"/></td>
|
|
@endif
|
|
<td class="company-cell">
|
|
<div class="company-name">{{ $companyName }}</div>
|
|
@if ($companyAddress)<div>Địa chỉ: {{ $companyAddress }}</div>@endif
|
|
@if ($companyPhone)<div>Điện thoại: {{ $companyPhone }}</div>@endif
|
|
@if ($companyEmail)<div>Email: {{ $companyEmail }}</div>@endif
|
|
@if ($companyTaxCode)<div>MST: {{ $companyTaxCode }}</div>@endif
|
|
</td>
|
|
<td class="meta-cell">
|
|
<div><strong>Số báo giá:</strong> {{ $quote->quote_number }}</div>
|
|
<div><strong>Ngày lập:</strong> {{ $quote->created_at?->format('d/m/Y') }}</div>
|
|
@if ($quote->valid_until)
|
|
<div><strong>Hiệu lực đến:</strong> {{ $quote->valid_until->format('d/m/Y') }}</div>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="doc-title">
|
|
<h1>Báo giá thiết kế website</h1>
|
|
<div class="sub">Kính gửi Quý khách hàng</div>
|
|
</div>
|
|
|
|
<hr class="divider"/>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Thông tin khách hàng</div>
|
|
<table class="two-col">
|
|
<tr>
|
|
<td>
|
|
<table class="info-table">
|
|
<tr><td class="lbl">Khách hàng:</td><td>{{ $quote->customer_name }}</td></tr>
|
|
@if ($quote->customer_company)
|
|
<tr><td class="lbl">Công ty:</td><td>{{ $quote->customer_company }}</td></tr>
|
|
@endif
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<table class="info-table">
|
|
@if ($quote->customer_phone)
|
|
<tr><td class="lbl">Điện thoại:</td><td>{{ $quote->customer_phone }}</td></tr>
|
|
@endif
|
|
@if ($quote->customer_email)
|
|
<tr><td class="lbl">Email:</td><td>{{ $quote->customer_email }}</td></tr>
|
|
@endif
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Thông tin dự án website</div>
|
|
<table class="info-table">
|
|
<tr><td class="lbl">Website:</td><td>{{ $quote->website_name }}</td></tr>
|
|
<tr><td class="lbl">Thể loại:</td><td>{{ $quote->website_category }}</td></tr>
|
|
<tr>
|
|
<td class="lbl">Nền tảng:</td>
|
|
<td>
|
|
{{ $platformLabel }}
|
|
@if ($frontendLabel) — Frontend: {{ $frontendLabel }} @endif
|
|
@if ($quote->custom_admin) <span class="badge">Custom Admin</span> @endif
|
|
</td>
|
|
</tr>
|
|
@if ($licenseFeeUsd > 0)
|
|
<tr><td class="lbl">Bản quyền:</td><td>Elementor Pro — {{ $licenseFeeUsd }}$/năm</td></tr>
|
|
@endif
|
|
@if ($quote->description)
|
|
<tr><td class="lbl">Mô tả:</td><td>{{ $quote->description }}</td></tr>
|
|
@endif
|
|
@if ($quote->requirements)
|
|
<tr><td class="lbl">Yêu cầu:</td><td>{{ $quote->requirements }}</td></tr>
|
|
@endif
|
|
@if (count($referenceWebsites) > 0)
|
|
<tr>
|
|
<td class="lbl">Website mẫu:</td>
|
|
<td>
|
|
<ul class="ref-list">
|
|
@foreach ($referenceWebsites as $ref)
|
|
<li>{{ $ref }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Chi tiết báo giá</div>
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 8mm;">STT</th>
|
|
<th>Hạng mục</th>
|
|
<th style="width: 12mm;">SL</th>
|
|
<th style="width: 26mm;">Đơn giá ({{ $quote->currency }})</th>
|
|
<th style="width: 28mm;">Thành tiền ({{ $quote->currency }})</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($items as $i => $item)
|
|
<tr>
|
|
<td class="center">{{ $i + 1 }}</td>
|
|
<td>
|
|
{{ $item['name'] ?? '' }}
|
|
@if (!empty($item['description']))
|
|
<div class="item-desc">{{ $item['description'] }}</div>
|
|
@endif
|
|
</td>
|
|
<td class="center">{{ $item['quantity'] ?? 1 }}</td>
|
|
<td class="right">{{ $fmt($item['unit_price'] ?? 0) }}</td>
|
|
<td class="right">{{ $fmt(($item['quantity'] ?? 1) * ($item['unit_price'] ?? 0)) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="summary-table">
|
|
<tr><td class="lbl">Tạm tính:</td><td class="val">{{ $fmt($quote->subtotal) }}</td></tr>
|
|
@if ($quote->discount > 0)
|
|
<tr><td class="lbl">Giảm giá:</td><td class="val">-{{ $fmt($quote->discount) }}</td></tr>
|
|
@endif
|
|
@if ($quote->vat_percent > 0)
|
|
<tr><td class="lbl">VAT ({{ rtrim(rtrim(number_format($quote->vat_percent, 2, '.', ''), '0'), '.') }}%):</td><td class="val">{{ $fmt($vatAmount) }}</td></tr>
|
|
@endif
|
|
<tr class="total"><td class="lbl">Tổng cộng:</td><td class="val">{{ $fmt($quote->total) }} {{ $quote->currency }}</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
@if ($quote->note)
|
|
<div class="note-box">
|
|
<strong>Ghi chú:</strong> {{ $quote->note }}
|
|
</div>
|
|
@endif
|
|
|
|
<table class="sign-table">
|
|
<tr>
|
|
<td>
|
|
<div class="sign-title">Đại diện khách hàng</div>
|
|
<div class="sign-hint">(Ký, ghi rõ họ tên)</div>
|
|
</td>
|
|
<td>
|
|
<div class="sign-title">Đại diện {{ $companyName }}</div>
|
|
<div class="sign-hint">(Ký, ghi rõ họ tên)</div>
|
|
@if ($quote->creator)
|
|
<div style="margin-top: 16mm;">{{ $quote->creator->name }}</div>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="footer-note">
|
|
Báo giá có hiệu lực {{ $quote->valid_until ? 'đến ngày ' . $quote->valid_until->format('d/m/Y') : 'trong 30 ngày kể từ ngày lập' }}.
|
|
Cảm ơn Quý khách đã quan tâm đến dịch vụ thiết kế website của {{ $companyName }}.
|
|
</div>
|
|
</body>
|
|
</html>
|