truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement A4 letterhead preview and print functionality for bank account details

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-02 19:54:39 +03:00
parent 864f80c7b8
commit f195d22342
1 changed files with 399 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/corporate/bank-accounts.blade.php
+399
View File
@@ -352,6 +352,162 @@
.btn-copy-inline.is-copied {
color: #16a34a;
}
/* A4 Letterhead Preview Modal & Printing Styles */
.a4-letterhead-preview-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(8px);
z-index: 10000;
overflow-y: auto;
padding: 2.5rem 1rem;
box-sizing: border-box;
}
.a4-letterhead-preview-modal.is-active {
display: block;
}
.a4-letterhead-preview-content {
background: #ffffff;
width: 210mm;
height: 297mm;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border-radius: 8px;
position: relative;
padding: 20mm 15mm;
box-sizing: border-box;
margin: 0 auto;
color: #0f172a !important;
overflow: hidden;
}
.a4-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 130mm;
height: 130mm;
background-image: url('/logos/truncgil-dikey.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.a4-letterhead-inner {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
}
.border-bottom-premium {
border-bottom: 2px solid #e2e8f0;
position: relative;
}
.border-bottom-premium::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 15%;
height: 2px;
background: var(--bs-primary);
}
.bg-light-premium {
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.a4-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.a4-table th {
background: #f1f5f9;
border-bottom: 2px solid #cbd5e1;
padding: 8px 12px;
font-size: 8pt;
font-weight: 700;
text-align: left;
color: #475569;
text-transform: uppercase;
line-height: 1.3;
}
.a4-table td {
padding: 12px;
font-size: 7.5pt;
border-bottom: 1px solid #e2e8f0;
vertical-align: top;
line-height: 1.4;
}
.a4-table tr:last-child td {
border-bottom: 2px solid #cbd5e1;
}
.a4-badge {
display: inline-block;
background: #e0f2fe;
color: #0369a1;
font-weight: 700;
font-size: 7pt;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
}
@media print {
/* Hide everything by default */
body * {
visibility: hidden;
}
html, body {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
width: 210mm !important;
height: 297mm !important;
}
#letterheadModal {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 210mm !important;
height: 297mm !important;
padding: 0 !important;
background: none !important;
backdrop-filter: none !important;
overflow: hidden !important;
}
.a4-letterhead-modal-header {
display: none !important;
}
.a4-letterhead-print {
visibility: visible !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 210mm !important;
height: 297mm !important;
padding: 20mm 15mm !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
background: #ffffff !important;
}
.a4-letterhead-print * {
visibility: visible !important;
}
@page {
size: A4 portrait;
margin: 0;
}
}
</style>
<section class="wrapper bank-accounts-section">
@@ -373,6 +529,17 @@
</nav>
</div>
<div class="text-center mb-8 d-flex justify-content-center gap-3 flex-wrap">
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-4" onclick="toggleLetterheadModal(true)">
<i class="uil uil-eye me-1" style="font-size: 1.1rem; vertical-align: middle;"></i>
<span>{!! t('Antetli Kağıt Önizle / Preview Letterhead') !!}</span>
</button>
<button type="button" class="btn btn-primary btn-sm rounded-pill px-5" onclick="printLetterhead()">
<i class="uil uil-file-download-alt me-1" style="font-size: 1.1rem; vertical-align: middle;"></i>
<span>{!! t('Resmi PDF İndir / Download Official PDF') !!}</span>
</button>
</div>
<div class="bank-accounts-grid">
@forelse($accounts as $index => $account)
@php
@@ -565,6 +732,211 @@
</div>
</section>
@php
$locale = app()->getLocale();
$isTr = ($locale === 'tr');
@endphp
<!-- A4 Letterhead Preview Modal -->
<div id="letterheadModal" class="a4-letterhead-preview-modal" onclick="if(event.target === this) toggleLetterheadModal(false)">
<div class="a4-letterhead-modal-header d-flex justify-content-between align-items-center mb-4 mx-auto" style="max-width: 210mm; width: 100%;">
<h4 class="text-white mb-0">
@if($isTr)
Antetli Kağıt Önizleme
@else
Official Letterhead Preview
@endif
</h4>
<div class="d-flex gap-2">
<button type="button" class="btn btn-light btn-sm rounded-pill px-4" onclick="printLetterhead()">
<i class="uil uil-print me-1"></i>
@if($isTr)
Yazdır / PDF İndir
@else
Print / Download PDF
@endif
</button>
<button type="button" class="btn btn-danger btn-sm rounded-circle p-2" onclick="toggleLetterheadModal(false)" style="width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; line-height: 1;">
<i class="uil uil-multiply"></i>
</button>
</div>
</div>
<!-- The actual A4 letterhead container -->
<div class="a4-letterhead-print a4-letterhead-preview-content">
<!-- Center faded Watermark -->
<div class="a4-watermark"></div>
<!-- Content Area -->
<div class="a4-letterhead-inner">
<!-- Header Row -->
<div class="d-flex justify-content-between align-items-start pb-3 mb-4 border-bottom-premium">
<div class="a4-logo-wrap" style="margin-top: 0; padding-top: 0; line-height: 1;">
<img src="{{ asset('logos/truncgil-dikey.svg') }}" alt="Trunçgil Teknoloji" style="height: 28mm; max-height: 28mm; width: auto; object-fit: contain; display: block; margin-top: 0;">
</div>
<div class="text-end a4-company-info" style="font-size: 8pt; line-height: 1.4; color: #334155; font-weight: 500; margin-top: -1.5mm;">
<h5 style="font-size: 10pt; font-weight: 800; color: #0f172a; margin: 0 0 4px 0; padding: 0; line-height: 1.1;">TRUNÇGİL TEKNOLOJİ SAN. VE TİC. LTD. ŞTİ.</h5>
<div>Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark</div>
<div>No: 4A İç Kapı No: 1 Şahinbey / Gaziantep / TÜRKİYE</div>
@if($isTr)
<div class="mt-1"><strong>Vergi Dairesi:</strong> Şahinbey V.D. &nbsp;|&nbsp; <strong>Vergi No:</strong> 8591492435</div>
<div><strong>MERSİS No:</strong> 0859149243500001 &nbsp;|&nbsp; <strong>D-U-N-S No:</strong> 595948152</div>
<div><strong>E-Posta:</strong> info@truncgil.com.tr &nbsp;|&nbsp; <strong>Web:</strong> www.truncgil.com.tr</div>
@else
<div class="mt-1"><strong>Tax Office:</strong> Şahinbey V.D. &nbsp;|&nbsp; <strong>Tax ID:</strong> 8591492435</div>
<div><strong>MERSİS No:</strong> 0859149243500001 &nbsp;|&nbsp; <strong>D-U-N-S No:</strong> 595948152</div>
<div><strong>Email:</strong> info@truncgil.com.tr &nbsp;|&nbsp; <strong>Web:</strong> www.truncgil.com.tr</div>
@endif
</div>
</div>
<!-- Title and Date -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h4 class="a4-doc-title mb-1" style="font-size: 13pt; font-weight: 800; letter-spacing: 0.05em; color: #0f172a;">
@if($isTr)
BANKA HESAP BİLGİLERİ
@else
BANK ACCOUNT DETAILS
@endif
</h4>
<p class="text-muted mb-0" style="font-size: 7.5pt; font-style: italic;">
@if($isTr)
Resmi Tedarikçi Kayıt Bildirimi
@else
Official Vendor Registration Bank Declaration
@endif
</p>
</div>
<div class="text-end" style="font-size: 8pt; font-weight: 600; color: #475569;">
@if($isTr)
<div><strong>Tarih:</strong> {{ date('d.m.Y') }}</div>
<div><strong>Konu:</strong> Banka Hesap Bildirimi</div>
@else
<div><strong>Date:</strong> {{ date('d.m.Y') }}</div>
<div><strong>Subject:</strong> Bank Account Declaration</div>
@endif
</div>
</div>
<!-- Description Statement -->
<div class="p-3 bg-light-premium rounded mb-4" style="border-left: 3.5px solid var(--bs-primary); font-size: 8pt; line-height: 1.5; color: #334155; font-weight: 500;">
@if($isTr)
<p class="mb-0"><strong>Sayın Yetkili,</strong> Şirketimizin resmi banka hesap bilgileri aşağıda bilgilerinize sunulmuştur. Tedarikçi kayıt süreçlerinde ve tüm ticari işlemlerimizde bu hesapların kullanılmasını rica ederiz.</p>
@else
<p class="mb-0"><strong>Dear Sir/Madam,</strong> The official and active bank account details of our company are presented below for your registration and commercial processes.</p>
@endif
</div>
<!-- Bank Accounts Table -->
<table class="a4-table mb-5">
<thead>
<tr>
<th style="width: 30%;">
@if($isTr)
Banka Adı
@else
Bank Name
@endif
</th>
<th style="width: 30%;">
@if($isTr)
Hesap Sahibi
@else
Account Holder
@endif
</th>
<th style="width: 10%;">
@if($isTr)
Para Birimi
@else
Currency
@endif
</th>
<th style="width: 30%;">IBAN / SWIFT / BIC</th>
</tr>
</thead>
<tbody>
@foreach($accounts as $index => $account)
@php
$currency = $account['currency'] ?? 'TRY';
$currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
$swiftCode = !empty($account['swift_code']) ? $account['swift_code'] : 'TRHBTR2A';
@endphp
<tr>
<td class="font-bold" style="color: #0f172a;">
<strong>{{ $account['bank_name'] }}</strong>
@if(!empty($account['branch_name']))
<div style="font-size: 7pt; color: #64748b; font-weight: 500; margin-top: 2px;">{{ $account['branch_name'] }}</div>
@endif
</td>
<td style="font-size: 7.5pt; font-weight: 600; color: #334155;">{{ $account['account_holder'] }}</td>
<td><span class="a4-badge">{{ $currency }}</span></td>
<td>
<div style="font-family: monospace; font-size: 8pt; font-weight: 700; letter-spacing: 0.02em; color: var(--bs-primary);">
{{ $account['iban'] }}
</div>
<div style="font-size: 7pt; color: #64748b; margin-top: 4px; font-weight: 500;">
<strong>SWIFT / BIC:</strong> <span style="font-family: monospace; font-weight: 700; color: #334155;">{{ $swiftCode }}</span>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- Sign & Stamp section -->
<div class="row mt-5 pt-3">
<div class="col-6">
<div style="font-size: 7.5pt; line-height: 1.5; color: #64748b;">
<strong>
@if($isTr)
İletişim:
@else
Contact:
@endif
</strong><br>
Trunçgil Site Office: Gaziantep Teknopark<br>
Tel: +90 (850) 302 46 22<br>
Web: www.truncgil.com.tr
</div>
</div>
<div class="col-6 text-end">
<div style="display: inline-block; text-align: center; border-top: 1.5px solid #cbd5e1; padding-top: 8px; width: 65mm;">
<h6 class="mb-1" style="font-size: 8.5pt; font-weight: 800; color: #0f172a;">TRUNÇGİL TEKNOLOJİ SAN. VE TİC. LTD. ŞTİ.</h6>
<span style="font-size: 7pt; color: #64748b; font-weight: 600; text-transform: uppercase;">
@if($isTr)
Yetkili İmza & Kaşe
@else
Authorized Signature & Stamp
@endif
</span>
<div style="height: 20mm; position: relative;" class="stamp-signature-space">
<!-- A subtle premium hint for stamp placement -->
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1.5px dashed #cbd5e1; border-radius: 50%; width: 16mm; height: 16mm; display: flex; align-items: center; justify-content: center; font-size: 6pt; color: #94a3b8; pointer-events: none;">
Stamp
</div>
</div>
</div>
</div>
</div>
<!-- Absolute footer page number / disclaimer -->
<div style="position: absolute; bottom: 15mm; left: 15mm; right: 15mm; font-size: 6.5pt; color: #94a3b8; border-top: 1px solid #e2e8f0; padding-top: 8px;" class="d-flex justify-content-between align-items-center">
<span>
@if($isTr)
* Bu belge elektronik olarak üretilmiştir.
@else
* This document has been generated electronically.
@endif
</span>
<span>Page 1 of 1</span>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
document.querySelectorAll('.bank-account-card__copy-btn-icon').forEach(function (btn) {
@@ -661,6 +1033,33 @@ document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
}
});
});
function toggleLetterheadModal(show) {
var modal = document.getElementById('letterheadModal');
if (show) {
modal.classList.add('is-active');
document.body.style.overflow = 'hidden';
} else {
modal.classList.remove('is-active');
document.body.style.overflow = '';
}
}
function printLetterhead() {
var modal = document.getElementById('letterheadModal');
var isModalActive = modal.classList.contains('is-active');
if (!isModalActive) {
modal.classList.add('is-active');
}
setTimeout(function() {
window.print();
if (!isModalActive) {
modal.classList.remove('is-active');
}
}, 150);
}
</script>
@endpush