ismailmasseran
cde136516d
Reviewed-on: #31 Co-authored-by: ISMAIL MASSERAN <ismail@koppkb.com> Co-committed-by: ISMAIL MASSERAN <ismail@koppkb.com>
347 lines
10 KiB
PHP
347 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BSAS eCert — {{ $ecert_no ?? 'Preview' }}</title>
|
|
<style>
|
|
:root {
|
|
--ink: #1a2332;
|
|
--muted: #5a6570;
|
|
--line: #c5a572;
|
|
--line-soft: #e2d4bc;
|
|
--accent: #0f4c5c;
|
|
--paper: #fbf8f2;
|
|
--panel: #ffffff;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #d9dde3;
|
|
color: var(--ink);
|
|
font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
.preview-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
background: #0f4c5c;
|
|
color: #fff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
.preview-bar .badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border: 1px solid rgba(255,255,255,.55);
|
|
border-radius: 3px;
|
|
letter-spacing: .08em;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.preview-bar button,
|
|
.preview-bar a {
|
|
border: 0;
|
|
background: #c5a572;
|
|
color: #1a2332;
|
|
font-weight: 700;
|
|
padding: 7px 14px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-stack {
|
|
padding: 24px 12px 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 28px;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
background: var(--paper);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.18);
|
|
overflow: hidden;
|
|
padding: 16mm 16mm 18mm;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: calc(297mm - 34mm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-body {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.cert-title {
|
|
margin: 0 0 6px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
letter-spacing: .18em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
.cert-no {
|
|
text-align: center;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 13px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.cert-no strong {
|
|
color: var(--accent);
|
|
letter-spacing: .04em;
|
|
}
|
|
|
|
.gold-rule {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--line), transparent);
|
|
margin: 0 8%;
|
|
}
|
|
|
|
.statement {
|
|
margin: 20px auto 24px;
|
|
max-width: 92%;
|
|
text-align: center;
|
|
font-size: 13.5px;
|
|
line-height: 1.65;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.section-label {
|
|
margin: 0 0 10px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
letter-spacing: .16em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
border-left: 3px solid var(--line);
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.detail-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 2px;
|
|
padding: 14px 16px 8px;
|
|
}
|
|
|
|
.detail-grid {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
}
|
|
.detail-grid tr td {
|
|
padding: 7px 8px;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid #eee6d8;
|
|
}
|
|
.detail-grid tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
.detail-grid .label {
|
|
width: 38%;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
}
|
|
.detail-grid .value {
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.commodity-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
.commodity-table th,
|
|
.commodity-table td {
|
|
border: 1px solid var(--line-soft);
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
}
|
|
.commodity-table th {
|
|
background: #f3eee4;
|
|
color: var(--accent);
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
}
|
|
.commodity-table td.num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.murabaha-box {
|
|
margin-top: 14px;
|
|
padding: 10px 12px;
|
|
border: 1px dashed var(--line);
|
|
background: rgba(197, 165, 114, .08);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.murabaha-box .k {
|
|
font-size: 11px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
}
|
|
.murabaha-box .v {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media print {
|
|
body { background: #fff; }
|
|
.preview-bar { display: none !important; }
|
|
.sheet-stack { padding: 0; gap: 0; }
|
|
.page {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
page-break-after: always;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
.page:last-child { page-break-after: auto; }
|
|
}
|
|
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
@php
|
|
$certificates = $certificates ?? [];
|
|
$lines = $lines ?? [];
|
|
$ecertNo = $ecert_no ?? 'CPO21OCT26-0000031-000';
|
|
$isDummy = $isDummy ?? false;
|
|
$pageTotal = count($certificates) + 1;
|
|
@endphp
|
|
|
|
<div class="preview-bar">
|
|
<div>
|
|
@if($isDummy)
|
|
<span class="badge">DUMMY PREVIEW</span>
|
|
BSAS e-Certificate layout — {{ $pageTotal }} pages A4
|
|
@else
|
|
BSAS e-Certificate — {{ $ecertNo }}
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<button type="button" onclick="window.print()">Print / PDF</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sheet-stack">
|
|
@foreach($certificates as $index => $certificate)
|
|
<section class="page">
|
|
<x-print.bsas.watermark />
|
|
|
|
<div class="content">
|
|
<x-print.bsas.header />
|
|
|
|
<div class="page-body">
|
|
<h1 class="cert-title">{{ $certificate['title'] }}</h1>
|
|
<div class="cert-no">Certificate Number: <strong>{{ $certificate['ecert_no'] ?? $ecertNo }}</strong></div>
|
|
<div class="gold-rule"></div>
|
|
|
|
<p class="statement">{!! $certificate['statement'] !!}</p>
|
|
|
|
<h2 class="section-label">Detail</h2>
|
|
<div class="detail-panel">
|
|
<table class="detail-grid">
|
|
@foreach($certificate['rows'] as $row)
|
|
<tr>
|
|
<td class="label">{{ $row['label'] }}</td>
|
|
<td class="value">{{ $row['value'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
|
|
@if(!empty($certificate['show_murabaha']))
|
|
<div class="murabaha-box">
|
|
<span class="k">Murabaha Value</span>
|
|
<span class="v">{{ $certificate['currency'] ?? 'MYR' }} {{ $certificate['murabaha'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<x-print.bsas.footer
|
|
:page="$index + 1"
|
|
:total="$pageTotal"
|
|
/>
|
|
</div>
|
|
</section>
|
|
@endforeach
|
|
|
|
<section class="page">
|
|
<x-print.bsas.watermark />
|
|
|
|
<div class="content">
|
|
<x-print.bsas.header />
|
|
|
|
<div class="page-body">
|
|
<h1 class="cert-title" style="font-size:18px;">Commodity Schedule</h1>
|
|
<div class="cert-no">Certificate Number: <strong>{{ $ecertNo }}</strong></div>
|
|
<div class="gold-rule"></div>
|
|
|
|
<h2 class="section-label" style="margin-top:28px;">Commodity Information</h2>
|
|
<div class="detail-panel">
|
|
<table class="commodity-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Commodity Supplying Participant</th>
|
|
<th style="width:28%;text-align:right;">Commodity Volume</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($lines as $line)
|
|
<tr>
|
|
<td>{{ $line['supplier'] ?? '-' }}</td>
|
|
<td class="num">{{ $line['volume'] ?? '-' }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<x-print.bsas.footer :page="$pageTotal" :total="$pageTotal">
|
|
This schedule forms part of Certificate No. {{ $ecertNo }}
|
|
</x-print.bsas.footer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|