DONE: confirmation and list online form

2026-09-03 15:34:52 +08:00
parent 6f4507dc08
commit effe268e3b
15 changed files with 1976 additions and 87 deletions
@@ -0,0 +1,44 @@
+@props([
+    'showCopies' => true,
+])
+
+<style>
+    .print-footer {
+        margin-top: 14px;
+        font-family: Arial, Helvetica, sans-serif;
+        color: #222;
+    }
+    .print-footer .copies {
+        margin-top: 10px;
+        font-size: 10px;
+    }
+    .print-footer .copies span {
+        display: inline-block;
+        border: 1px solid #111;
+        width: 11px;
+        height: 11px;
+        margin-right: 4px;
+        vertical-align: -1px;
+    }
+    .print-footer .notes {
+        margin-top: 10px;
+        font-size: 9.5px;
+        line-height: 1.45;
+    }
+    .print-footer .notes b { font-size: 10px; }
+    .print-footer .notes p { margin: 2px 0; }
+</style>
+
+<div {{ $attributes->merge(['class' => 'print-footer']) }}>
+    @if($showCopies)
+        <div class="copies">
+            Salinan: <span></span> Kad Pengenalan &nbsp;&nbsp; <span></span> Akaun Bank/ Slip/ Penyata Bank
+        </div>
+    @endif
+
+    @if(trim($slot) !== '')
+        <div class="notes">
+            {{ $slot }}
+        </div>
+    @endif
+</div>
@@ -0,0 +1,101 @@
+@props([
+    'cawangan' => '',
+    'kodcaw' => '',
+    'alamat1' => '',
+    'alamat2' => '',
+    'notel' => '',
+    'tarikh' => '',
+    'norujukan' => '',
+    'rujukanLabel' => 'No. Rujukan SAG',
+    'showDummyBadge' => false,
+])
+
+<style>
+    .print-header {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+        align-items: start;
+        column-gap: 12px;
+        border-bottom: 2px solid #111;
+        padding-bottom: 8px;
+        font-family: Arial, Helvetica, sans-serif;
+        color: #111;
+    }
+    .print-header .org {
+        min-width: 0;
+    }
+    .print-header .org p {
+        margin: 0;
+        font-size: 10px;
+        line-height: 1.35;
+    }
+    .print-header .org .name {
+        font-size: 11px;
+        font-weight: bold;
+    }
+    .print-header .logos {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding-top: 2px;
+    }
+    .print-header .logos img {
+        display: block;
+        height: 40px;
+        width: auto;
+        max-width: 70px;
+        object-fit: contain;
+    }
+    .print-header .meta {
+        text-align: right;
+        font-size: 10px;
+        line-height: 1.4;
+    }
+    .print-header .meta .label { color: #444; }
+    .print-header .dummy-badge {
+        display: inline-block;
+        margin-top: 4px;
+        padding: 1px 6px;
+        border: 1px solid #c0392b;
+        color: #c0392b;
+        font-size: 9px;
+        font-weight: bold;
+        letter-spacing: 0.08em;
+    }
+    @media print {
+        .print-header .dummy-badge { display: none !important; }
+    }
+</style>
+
+<div {{ $attributes->merge(['class' => 'print-header']) }}>
+    <div class="org">
+        <p class="name">KOPERASI PERMODALAN KELANTAN BERHAD (D-5-0228)</p>
+        <p>Ar-Rahn {{ $cawangan }}</p>
+        <p>{{ $alamat1 }}</p>
+        <p>{{ $alamat2 }}</p>
+        <p>Tel: {{ $notel }}</p>
+    </div>
+    <div class="logos">
+        <img src="{{ asset('img/kopkb.png') }}" alt="KPKB">
+        <img src="{{ asset('img/logo-arrahn.jpeg') }}" alt="Ar-Rahn">
+    </div>
+    <div class="meta">
+        @if($kodcaw || $cawangan)
+            <div>
+                <span class="label">Cawangan</span><br>
+                <b>{{ trim(implode(' — ', array_filter([$kodcaw, $cawangan]))) }}</b>
+            </div>
+        @endif
+        @if($tarikh)
+            <div style="{{ ($kodcaw || $cawangan) ? 'margin-top:6px' : '' }}"><span class="label">Tarikh</span><br><b>{{ $tarikh }}</b></div>
+        @endif
+        @if($norujukan)
+            <div style="margin-top:6px"><span class="label">{{ $rujukanLabel }}</span><br><b>{{ $norujukan }}</b></div>
+        @endif
+        {{ $slot }}
+        @if($showDummyBadge)
+            <div class="dummy-badge">CONTOH SAHAJA</div>
+        @endif
+    </div>
+</div>
@@ -0,0 +1,25 @@
+<style>
+    .print-watermark {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        pointer-events: none;
+        z-index: 0;
+    }
+    .print-watermark img {
+        height: 160px;
+        max-width: 240px;
+        object-fit: contain;
+        opacity: 0.12;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+</style>
+
+<div class="print-watermark" aria-hidden="true">
+    <img src="{{ asset('img/logo_kad.jpeg') }}" alt="">
+    <img src="{{ asset('img/logo-arrahn.jpeg') }}" alt="">
+</div>