Cyclone
374 lines
16 KiB
PHP
374 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bank Statement - {{ $bankDetails['name'] }}</title>
|
|
<!-- Load Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles for the Inter font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.statement-table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
/* A4 Print Optimization */
|
|
@media print {
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: white;
|
|
font-size: 9pt; /* Reduced from 10pt */
|
|
-webkit-print-color-adjust: exact;
|
|
color-adjust: exact;
|
|
}
|
|
|
|
.statement-container {
|
|
width: 210mm;
|
|
max-width: 210mm;
|
|
margin: 0;
|
|
padding: 10mm 10mm; /* Reduced padding from 20mm 15mm */
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
header {
|
|
border-color: #1f2937 !important;
|
|
}
|
|
|
|
/* Optimize table for print */
|
|
.statement-table {
|
|
font-size: 8pt; /* Smaller font for table */
|
|
width: 100%;
|
|
}
|
|
|
|
.statement-table th {
|
|
padding: 4px 6px !important; /* Reduced padding */
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.statement-table td {
|
|
padding: 3px 6px !important; /* Reduced padding */
|
|
font-size: 8pt;
|
|
}
|
|
|
|
/* Reduce header size */
|
|
header h1 {
|
|
font-size: 20pt !important;
|
|
}
|
|
|
|
header .text-sm {
|
|
font-size: 8pt !important;
|
|
}
|
|
|
|
/* Reduce summary section */
|
|
.bg-blue-50 {
|
|
padding: 8px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
.bg-blue-50 h2 {
|
|
font-size: 14pt !important;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
.bg-blue-50 .text-sm {
|
|
font-size: 8pt !important;
|
|
}
|
|
|
|
/* Reduce final summary box */
|
|
.max-w-lg {
|
|
max-width: 100% !important;
|
|
padding: 12px !important;
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
/* Prevent page breaks inside table rows */
|
|
.statement-table tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Keep header rows on every page if table spans multiple pages */
|
|
.statement-table thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
.statement-table tfoot {
|
|
display: table-footer-group;
|
|
}
|
|
}
|
|
|
|
.statement-container {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.print\:page-break-before {
|
|
page-break-before: always;
|
|
break-before: page;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="p-8">
|
|
|
|
@php
|
|
// Helper function to format currency for the template
|
|
function formatCurrency($amount)
|
|
{
|
|
return is_numeric($amount) ? 'RM ' . number_format($amount, 2) : '-';
|
|
}
|
|
@endphp
|
|
|
|
<div class="statement-container mx-auto bg-white p-8 shadow-lg rounded-lg border border-gray-200">
|
|
|
|
<!-- Header Section -->
|
|
<header class="flex justify-between items-start pb-6 border-b-4 border-gray-800 mb-6">
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-2xl font-extrabold text-gray-800 uppercase tracking-widest">{{ $bankDetails['name'] }}
|
|
</h1>
|
|
<p class="text-sm mt-1 text-gray-600">{!! $bankDetails['address'] !!}</p>
|
|
</div>
|
|
<div class="text-right flex flex-col items-end">
|
|
<div class="text-xl font-bold text-gray-700 mb-2">{{ $gadaian['norujukan'] }}</div>
|
|
<div class="bg-gray-100 p-3 rounded-lg text-sm grid grid-cols-2 gap-x-4 gap-y-1 w-full">
|
|
<span class="font-semibold text-gray-700">IC:</span>
|
|
<span class="text-gray-900 font-mono">{{ $gadaian['nokp'] }}</span>
|
|
|
|
<span class="font-semibold text-gray-700">Tarikh Pembiayaan:</span>
|
|
<span class="text-gray-900">{{ $gadaian['t_gadai'] }}</span>
|
|
|
|
<span class="font-semibold text-gray-700">Tempoh Pembiayaan:</span>
|
|
<span class="text-gray-900 text-xs">{{ $gadaian['tempoh'] }}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Address and Statement Info -->
|
|
<div class="flex justify-between items-start mb-8">
|
|
<!-- Account Holder Address -->
|
|
<div class="w-1/2 pr-4">
|
|
<p class="text-lg font-bold text-gray-900 uppercase">{{ $accountHolder['name'] }}</p>
|
|
<p class="text-sm text-gray-700 uppercase">{!! $accountHolder['address'] !!}</p>
|
|
<p class="text-sm text-gray-700 uppercase">{{ $accountHolder['city_state_zip'] }}</p>
|
|
</div>
|
|
<!-- Branch Info (from PDF structure) -->
|
|
<div class="w-1/2 text-right">
|
|
<p class="text-sm font-semibold text-gray-700">{{ $bankDetails['branch'] }}</p>
|
|
<p class="text-xs text-gray-500 mt-1">Page 1 of 1</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Summary -->
|
|
<div class="mb-8 p-4 bg-blue-50 rounded-lg shadow-inner">
|
|
<h2 class="text-xl font-bold text-blue-800 mb-3 border-b pb-2">Ringkasan Pembiayaan</h2>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
|
|
<!-- Row 1 -->
|
|
<div>
|
|
<div class="font-semibold text-gray-700">Pembiayaan:</div>
|
|
<div class="text-gray-900 font-bold text-lg">{{ formatCurrency($gadaian['pinjaman']) }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-700">Nilai Marhun:</div>
|
|
<div class="text-green-600 font-bold text-lg">{{ formatCurrency($gadaian['nilaimarhun']) }}</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<div class="font-semibold text-gray-700">1 Percent:</div>
|
|
<div class="text-red-600 font-bold text-lg">{{ formatCurrency($gadaian['ujrah']) }}</div>
|
|
<div class="font-semibold text-gray-700">Ujrah:</div>
|
|
<div class="text-red-600 font-bold text-lg">{{ formatCurrency($gadaian['onepercent']) }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-700">Keuntungan:</div>
|
|
<div class="text-red-600 font-bold text-lg">{{ formatCurrency($gadaian['ujrah'] + $gadaian['onepercent']) }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<div>
|
|
<div class="font-semibold text-gray-700">Harga Jualan:</div>
|
|
<div class="text-gray-900">{{ formatCurrency($gadaian['hargajualan']) }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-700">Jumlah Transaksi:</div>
|
|
<div class="text-gray-900">{{ $transaction_count }}</div>
|
|
</div>
|
|
<div class="bg-blue-200 p-2 rounded-md shadow-md">
|
|
<div class="font-semibold text-blue-900">Harga Tebus:</div>
|
|
<div class="text-blue-900 font-extrabold text-xl">{{ formatCurrency($tebusTransaction['duit_masuk']) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transactions Table -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-3 border-b pb-2">Transaksi</h2>
|
|
|
|
<table class="w-full statement-table text-left text-sm">
|
|
<thead>
|
|
<tr class="bg-gray-100 text-gray-700 uppercase tracking-wider">
|
|
<th class="py-3 px-4 border border-gray-300 w-1/12">Tarikh</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-2/12">Deskripsi</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-1/12">Tempoh</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-2/12 text-right">Bayaran</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-1/12 text-right">Upah</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-1/12 text-right">Pembiayaan</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-1/12 text-right">Rebet</th>
|
|
<th class="py-3 px-4 border border-gray-300 w-2/12 text-right">Baki</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php $totalUpah = 0; $totalBayaran = 0; $totalPembiayaan = 0; $totalRebet = 0; @endphp
|
|
@foreach ($ansuranTransaction as $transaction)
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="py-2 px-4 border border-gray-300">{{ date('d/m/Y', strtotime($transaction['created_at'])) }}</td>
|
|
<td class="py-2 px-4 border border-gray-300">{{ ($transaction['teller'] == 'Online') ? 'Bayaran Online' : 'Bayaran Kaunter' }}</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right font-semibold text-gray-800">
|
|
{{ $transaction['beza_tempoh'] }}
|
|
</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right text-green-700 font-medium">
|
|
@if ($transaction['duit_masuk'])
|
|
{{ formatCurrency($transaction['duit_masuk']) }}
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right text-red-700 font-medium">
|
|
@if ($transaction['bayaran_keuntungan'])
|
|
{{ formatCurrency($transaction['bayaran_keuntungan']) }}
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right text-red-700 font-medium">
|
|
@if ($transaction['bayaran_pembiayaan'])
|
|
{{ formatCurrency($transaction['bayaran_pembiayaan']) }}
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right font-semibold text-gray-800">
|
|
{{ formatCurrency($transaction['bayaran_keuntungan'] - $transaction['keuntungan_rebet']) }}
|
|
</td>
|
|
<td class="py-2 px-4 border border-gray-300 text-right font-semibold text-gray-800">
|
|
{{ formatCurrency($transaction['bakipinjaman']) }}
|
|
</td>
|
|
</tr>
|
|
@php $totalUpah += $transaction['bayaran_keuntungan']; $totalBayaran += $transaction['duit_masuk']; $totalPembiayaan += $transaction['bayaran_pembiayaan']; $totalRebet += ($transaction['bayaran_keuntungan'] - $transaction['keuntungan_rebet']);@endphp
|
|
@endforeach
|
|
<!-- Closing Balance Row -->
|
|
<tr class="bg-blue-100 font-bold text-base text-blue-900">
|
|
<td colspan="3" class="py-3 px-4 border border-gray-300 text-right">Jumlah:</td>
|
|
<td class="py-3 px-4 border border-gray-300 text-right">
|
|
{{ formatCurrency($totalBayaran) }}</td>
|
|
<td class="py-3 px-4 border border-gray-300 text-right">
|
|
{{ formatCurrency($totalUpah) }}</td>
|
|
<td class="py-3 px-4 border border-gray-300 text-right">
|
|
{{ formatCurrency($totalPembiayaan) }}</td>
|
|
<td class="py-3 px-4 border border-gray-300 text-right">
|
|
{{ formatCurrency($totalRebet) }}</td>
|
|
<td class="py-3 px-4 border border-gray-300 text-right">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="print:page-break-before p-6 bg-white border border-gray-200 rounded-lg shadow-md max-w-lg mx-auto font-sans">
|
|
<div class="flex items-center mb-4 border-b-2 border-black pb-1">
|
|
<h2 class="text-xl font-bold bg-white px-2 py-1 border border-black inline-block tracking-widest">
|
|
SEMAKAN TERAKHIR</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-y-2 text-sm">
|
|
<div class="col-span-1"></div>
|
|
<div class="col-span-1 text-right font-bold tracking-widest text-xs">JUMLAH</div>
|
|
|
|
{{-- Beginning Balance --}}
|
|
<div class="col-span-1 font-semibold">Baki Pembiayaan</div>
|
|
<div class="col-span-1 text-right font-bold text-base border-b border-black">
|
|
{{ formatCurrency($tebusTransaction['bayaran_pembiayaan']) }}
|
|
</div>
|
|
|
|
{{-- Deposits and Additions --}}
|
|
<div class="col-span-1">Keuntungan 1%</div>
|
|
<div class="col-span-1 text-right">
|
|
{{ formatCurrency($tebusTransaction['onepercent']) }}
|
|
</div>
|
|
|
|
{{-- ATM & Debit Card Withdrawals --}}
|
|
<div class="col-span-1">Rebet Keuntungan 1%</div>
|
|
<div class="col-span-1 text-right text-red-600">
|
|
{{ formatCurrency($tebusTransaction['onepercent'] - $tebusTransaction['onepercent_rebet']) }}
|
|
</div>
|
|
|
|
{{-- Deposits and Additions --}}
|
|
<div class="col-span-1">Ujrah</div>
|
|
<div class="col-span-1 text-right">
|
|
{{ formatCurrency($tebusTransaction['ujrah']) }}
|
|
</div>
|
|
|
|
{{-- ATM & Debit Card Withdrawals --}}
|
|
<div class="col-span-1">Rebet Ujrah</div>
|
|
<div class="col-span-1 text-right text-red-600">
|
|
{{ formatCurrency($tebusTransaction['ujrah'] - $tebusTransaction['ujrah_rebet']) }}
|
|
</div>
|
|
|
|
{{--
|
|
<div class="col-span-1">Ujrah</div>
|
|
<div class="col-span-1 flex justify-end items-center">
|
|
<span class="border-t border-black w-2/5"></span>
|
|
<span class="ml-2 text-right text-red-600">-122.50</span>
|
|
</div> --}}
|
|
|
|
{{-- Separator Line (Visual emphasis for Ending Balance calculation) --}}
|
|
<div class="col-span-2 my-2"></div>
|
|
|
|
{{-- Ending Balance --}}
|
|
<div class="col-span-1 font-extrabold text-base">Jumlah Bayaran</div>
|
|
<div class="col-span-1 text-right font-bold text-lg">
|
|
{{ formatCurrency($tebusTransaction['duit_masuk']) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer / Notices -->
|
|
<footer class="pt-6 border-t border-gray-300 text-center text-xs text-gray-500">
|
|
<p>Ini ialah penyata akaun yang dijana secara automatik. Sila hubungi kami untuk sebarang percanggahan</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Print Button (non-functional in this environment, but useful in a real app) -->
|
|
<div class="no-print max-w-4xl mx-auto mt-4 text-center">
|
|
<button onclick="window.print()"
|
|
class="px-6 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition duration-150">
|
|
<svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
Print Statement
|
|
</button>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|