Ümit Tunç
850 lines
31 KiB
PHP
850 lines
31 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
|
||
@php
|
||
$accounts = $page->data['bank_accounts'] ?? [];
|
||
$currencySymbols = [
|
||
'TRY' => '₺',
|
||
'USD' => '$',
|
||
'EUR' => '€',
|
||
'GBP' => '£',
|
||
];
|
||
$locale = app()->getLocale();
|
||
$isTr = ($locale === 'tr');
|
||
@endphp
|
||
|
||
<style>
|
||
.bank-accounts-section {
|
||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
||
}
|
||
|
||
/* Optimized mobile padding */
|
||
.bank-accounts-section .main-container {
|
||
padding-top: 2rem;
|
||
padding-bottom: 2rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.bank-accounts-section .main-container {
|
||
padding-top: 4rem;
|
||
padding-bottom: 4rem;
|
||
}
|
||
}
|
||
|
||
.bank-account-card {
|
||
background: #ffffff;
|
||
border-radius: 1.25rem;
|
||
border: 1px solid #e2e8f0;
|
||
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
||
overflow: hidden;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
||
}
|
||
.bank-account-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
|
||
border-color: #cbd5e1;
|
||
}
|
||
.bank-account-card__header {
|
||
position: relative;
|
||
padding: 2rem 1.5rem 1.75rem;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
text-align: center;
|
||
min-height: 180px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.bank-account-card__logo-wrap {
|
||
width: 100%;
|
||
max-width: 240px;
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
margin: 0 auto;
|
||
}
|
||
.bank-account-card__logo-wrap img {
|
||
max-width: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
.bank-account-card__logo-placeholder {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 1rem;
|
||
background: rgba(var(--bs-primary-rgb), 0.1);
|
||
color: var(--bs-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
}
|
||
.bank-account-card__currency {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
padding: 0.35rem 0.75rem;
|
||
border-radius: 9999px;
|
||
background: #ffffff;
|
||
border: 1px solid #e2e8f0;
|
||
color: var(--bs-primary);
|
||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
|
||
}
|
||
.bank-account-card__body {
|
||
padding: 1.5rem;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bank-account-card__title {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin-bottom: 0.25rem;
|
||
line-height: 1.3;
|
||
}
|
||
.bank-account-card__branch {
|
||
font-size: 0.875rem;
|
||
color: #64748b;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.bank-account-card__field {
|
||
margin-bottom: 1rem;
|
||
}
|
||
.bank-account-card__field:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
.bank-account-card__label {
|
||
display: block;
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #94a3b8;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.bank-account-card__value {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
line-height: 1.4;
|
||
}
|
||
.bank-account-card__iban-box {
|
||
margin-top: auto;
|
||
padding-top: 1rem;
|
||
border-top: 1px dashed #e2e8f0;
|
||
}
|
||
.bank-account-card__iban {
|
||
font-size: 0.8375rem;
|
||
font-weight: 700;
|
||
color: var(--bs-primary);
|
||
letter-spacing: 0.02em;
|
||
word-break: break-all;
|
||
line-height: 1.5;
|
||
padding: 0.75rem 1rem;
|
||
background: #f8fafc;
|
||
border-radius: 0.75rem;
|
||
border: 1px solid #e2e8f0;
|
||
user-select: all;
|
||
}
|
||
.bank-account-card__copy-btn-icon {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 8px;
|
||
bottom: 8px;
|
||
margin: auto 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
background: transparent;
|
||
width: 34px;
|
||
height: 34px;
|
||
color: var(--bs-primary);
|
||
cursor: pointer;
|
||
transition: color 0.2s, transform 0.1s;
|
||
z-index: 2;
|
||
}
|
||
.bank-account-card__copy-btn-icon:hover {
|
||
color: #0f172a;
|
||
}
|
||
.bank-account-card__copy-btn-icon:active {
|
||
transform: scale(0.9);
|
||
}
|
||
.bank-account-card__copy-btn-icon.is-copied {
|
||
color: #16a34a;
|
||
}
|
||
.bank-account-card__footer-bar {
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--bs-primary), #3b82f6);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.4s ease;
|
||
}
|
||
.bank-account-card:hover .bank-account-card__footer-bar {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.bank-accounts-empty {
|
||
padding: 3rem 2rem;
|
||
background: #ffffff;
|
||
border-radius: 1.25rem;
|
||
border: 1px dashed #cbd5e1;
|
||
text-align: center;
|
||
max-width: 420px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Premium tab styles inspired by why-choose-us */
|
||
.nav-tabs.nav-tabs-bg {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
border: none;
|
||
background: #f1f5f9;
|
||
border-radius: 1rem;
|
||
padding: 0.5rem;
|
||
gap: 0.5rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.nav-tabs.nav-tabs-bg {
|
||
flex-direction: row !important;
|
||
}
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-item {
|
||
margin-bottom: 0 !important;
|
||
flex: 1;
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-link {
|
||
border: none;
|
||
background: transparent;
|
||
padding: 1rem 1.25rem;
|
||
border-radius: 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: left;
|
||
color: #64748b;
|
||
transition: all 0.2s ease;
|
||
height: 100%;
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-link:hover {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
color: #0f172a;
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-link.active {
|
||
background: #ffffff;
|
||
color: #0f172a;
|
||
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-link .icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 0.75rem;
|
||
background: #f8fafc;
|
||
font-size: 1.5rem;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.nav-tabs.nav-tabs-bg .nav-link.active .icon {
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.bank-accounts-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.bank-accounts-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.bank-accounts-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
/* Legal info box adaptations */
|
||
.legal-info-box {
|
||
background: #ffffff;
|
||
border-radius: 1.25rem;
|
||
border: 1px solid #e2e8f0;
|
||
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
||
padding: 2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
||
}
|
||
.legal-info-box:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 20px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
|
||
border-color: #cbd5e1;
|
||
}
|
||
.legal-info-box__title {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.legal-info-box__title i {
|
||
color: var(--bs-primary);
|
||
font-size: 1.5rem;
|
||
}
|
||
.legal-info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.legal-info-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.legal-info-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
.legal-info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.legal-info-item__label {
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #94a3b8;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.legal-info-item__value {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
line-height: 1.4;
|
||
}
|
||
.legal-info-box__decor {
|
||
position: absolute;
|
||
bottom: -20px;
|
||
right: -20px;
|
||
font-size: 8rem;
|
||
color: #f1f5f9;
|
||
line-height: 1;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.legal-info-box__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.btn-copy-inline {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 4px;
|
||
color: #94a3b8;
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
line-height: 1;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
transition: color 0.2s, background-color 0.2s, transform 0.1s;
|
||
}
|
||
.btn-copy-inline:hover {
|
||
color: var(--bs-primary);
|
||
background-color: #f1f5f9;
|
||
}
|
||
.btn-copy-inline:active {
|
||
transform: scale(0.9);
|
||
}
|
||
.btn-copy-inline.is-copied {
|
||
color: #16a34a;
|
||
}
|
||
|
||
/* Elegant Letterhead tab view styles */
|
||
.letterhead-tab-container {
|
||
background: #f1f5f9;
|
||
border-radius: 1.25rem;
|
||
padding: 2rem 1rem;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.letterhead-tab-container {
|
||
padding: 3rem 2rem;
|
||
}
|
||
}
|
||
|
||
.a4-letterhead-preview-content {
|
||
background: #ffffff;
|
||
width: 210mm;
|
||
height: 297mm;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||
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.15;
|
||
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: transparent;
|
||
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 absolutely everything else */
|
||
body * {
|
||
visibility: hidden !important;
|
||
}
|
||
html, body {
|
||
background: #ffffff !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
width: 210mm !important;
|
||
height: 297mm !important;
|
||
max-height: 297mm !important;
|
||
overflow: hidden !important;
|
||
}
|
||
#letterheadPrintArea, #letterheadPrintArea * {
|
||
visibility: visible !important;
|
||
}
|
||
#letterheadPrintArea {
|
||
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;
|
||
box-sizing: border-box !important;
|
||
}
|
||
@page {
|
||
size: A4 portrait;
|
||
margin: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<section class="wrapper bank-accounts-section">
|
||
<div class="container main-container">
|
||
|
||
<!-- Header -->
|
||
<div class="row text-center mb-8">
|
||
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||
<h1 class="display-2 mb-3">{!! $page->translate('title') ?: $page->title !!}</h1>
|
||
@if($page->translate('excerpt') ?: $page->excerpt)
|
||
<p class="lead fs-lg mb-0 text-muted">{!! $page->translate('excerpt') ?: $page->excerpt !!}</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3-Tab Header Row -->
|
||
<div class="row mb-8">
|
||
<div class="col-12 col-xl-10 mx-auto">
|
||
<ul class="nav nav-tabs nav-tabs-bg flex flex-col md:flex-row justify-between" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<a class="nav-link active" data-bs-toggle="tab" href="#tab-bank-accounts" aria-selected="true" role="tab">
|
||
<div class="icon text-primary me-3 flex-shrink-0">
|
||
<i class="uil uil-university"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="mb-0 fs-16 font-bold">{!! $isTr ? t('Banka Hesapları') : t('Bank Accounts') !!}</h4>
|
||
<span class="fs-12 text-muted">{!! $isTr ? t('EFT / Havale Bilgileri') : t('EFT / Wire Transfer Details') !!}</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a class="nav-link" data-bs-toggle="tab" href="#tab-legal-info" aria-selected="false" role="tab">
|
||
<div class="icon text-success me-3 flex-shrink-0">
|
||
<i class="uil uil-shield-check"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="mb-0 fs-16 font-bold">{!! $isTr ? t('Yasal Bilgiler') : t('Legal Information') !!}</h4>
|
||
<span class="fs-12 text-muted">{!! $isTr ? t('Fatura & Sicil Kayıtları') : t('Billing & Registry Records') !!}</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a class="nav-link" data-bs-toggle="tab" href="#tab-letterhead" aria-selected="false" role="tab">
|
||
<div class="icon text-warning me-3 flex-shrink-0">
|
||
<i class="uil uil-file-check-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="mb-0 fs-16 font-bold">{!! $isTr ? t('Antetli Kağıt') : t('Letterhead') !!}</h4>
|
||
<span class="fs-12 text-muted">{!! $isTr ? t('Resmi Yazı & Hızlı Yazdır') : t('Official Letter & Quick Print') !!}</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab Content -->
|
||
<div class="row">
|
||
<div class="col-12 col-xl-10 mx-auto">
|
||
<div class="tab-content">
|
||
|
||
<!-- Tab 1: Bank Accounts -->
|
||
<div class="tab-pane fade show active" id="tab-bank-accounts" role="tabpanel">
|
||
<div class="bank-accounts-grid">
|
||
@forelse($accounts as $index => $account)
|
||
@php
|
||
$currency = $account['currency'] ?? 'TRY';
|
||
$currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
|
||
@endphp
|
||
<div>
|
||
<article class="bank-account-card">
|
||
<div class="bank-account-card__header">
|
||
<span class="bank-account-card__currency">{{ $currencyLabel }}</span>
|
||
|
||
@if(!empty($account['logo']))
|
||
<div class="bank-account-card__logo-wrap">
|
||
<img
|
||
src="{{ asset('storage/' . $account['logo']) }}"
|
||
alt="{{ $account['bank_name'] }}"
|
||
loading="lazy"
|
||
>
|
||
</div>
|
||
@else
|
||
<div class="bank-account-card__logo-placeholder" aria-hidden="true">
|
||
<i class="uil uil-university"></i>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="bank-account-card__body">
|
||
<h2 class="bank-account-card__title">{{ $account['bank_name'] }}</h2>
|
||
@if(!empty($account['branch_name']))
|
||
<p class="bank-account-card__branch">{{ $account['branch_name'] }}</p>
|
||
@endif
|
||
|
||
<div class="bank-account-card__field">
|
||
<span class="bank-account-card__label">{!! $isTr ? t('Hesap Sahibi') : t('Account Holder') !!}</span>
|
||
<div class="bank-account-card__value">{{ $account['account_holder'] }}</div>
|
||
</div>
|
||
|
||
<div class="bank-account-card__iban-box">
|
||
<span class="bank-account-card__label">IBAN</span>
|
||
<div style="position: relative;">
|
||
<div class="bank-account-card__iban" id="iban-{{ $index }}" style="padding-right: 3rem;">{{ $account['iban'] }}</div>
|
||
<button
|
||
type="button"
|
||
class="bank-account-card__copy-btn-icon"
|
||
data-iban="{{ $account['iban'] }}"
|
||
data-copy-label="{!! $isTr ? t('Kopyala') : t('Copy') !!}"
|
||
data-copied-label="{!! $isTr ? t('Kopyalandı') : t('Copied') !!}"
|
||
aria-label="{!! $isTr ? t('IBAN kopyala') : t('Copy IBAN') !!}"
|
||
>
|
||
<i class="uil uil-copy" style="font-size: 1.15rem;"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
@php
|
||
$swiftCode = !empty($account['swift_code']) ? $account['swift_code'] : 'TRHBTR2A';
|
||
@endphp
|
||
@if($currency !== 'TRY' || !empty($account['swift_code']))
|
||
<div class="bank-account-card__swift-box mt-3">
|
||
<span class="bank-account-card__label">SWIFT / BIC</span>
|
||
<div style="position: relative;">
|
||
<div class="bank-account-card__iban" id="swift-{{ $index }}" style="padding-right: 3rem;">{{ $swiftCode }}</div>
|
||
<button
|
||
type="button"
|
||
class="bank-account-card__copy-btn-icon"
|
||
data-iban="{{ $swiftCode }}"
|
||
data-copy-label="{!! $isTr ? t('Kopyala') : t('Copy') !!}"
|
||
data-copied-label="{!! $isTr ? t('Kopyalandı') : t('Copied') !!}"
|
||
aria-label="{!! $isTr ? t('SWIFT kopyala') : t('Copy SWIFT') !!}"
|
||
>
|
||
<i class="uil uil-copy" style="font-size: 1.15rem;"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="bank-account-card__footer-bar" aria-hidden="true"></div>
|
||
</article>
|
||
</div>
|
||
@empty
|
||
<div class="col-12">
|
||
<div class="bank-accounts-empty">
|
||
<i class="uil uil-wallet text-6xl text-slate-300 mb-4 d-block"></i>
|
||
<h3 class="h4 text-slate-500 mb-2">{!! $isTr ? t('Henüz banka hesabı eklenmemiş.') : t('No bank accounts have been added yet.') !!}</h3>
|
||
<p class="text-slate-400 mb-0">{!! $isTr ? t('Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.') : t('You can add your bank accounts from the administration panel.') !!}</p>
|
||
</div>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2: Legal Information -->
|
||
<div class="tab-pane fade" id="tab-legal-info" role="tabpanel">
|
||
@include('templates.corporate.partials.bank-accounts-legal-info')
|
||
</div>
|
||
|
||
<!-- Tab 3: Official Letterhead Preview & Print -->
|
||
<div class="tab-pane fade" id="tab-letterhead" role="tabpanel">
|
||
<div class="text-center mb-6 d-flex justify-content-center gap-3 flex-wrap">
|
||
<button type="button" class="btn btn-outline-primary rounded-pill px-4 shadow-sm" onclick="window.print()">
|
||
<i class="uil uil-print me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
|
||
<strong>{!! $isTr ? t('Yazdır') : t('Print') !!}</strong>
|
||
</button>
|
||
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm text-white" style="background-color: #e31e24 !important; border-color: #e31e24 !important; color: #ffffff !important;" onclick="downloadPDF(this)">
|
||
<i class="uil uil-file-download-alt me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
|
||
<strong>{!! $isTr ? t('PDF İndir') : t('Download PDF') !!}</strong>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="letterhead-tab-container">
|
||
<div class="table-responsive" style="overflow-x: auto; width: 100%;">
|
||
<div style="min-width: 215mm; padding: 10px 0;">
|
||
@include('templates.corporate.partials.bank-accounts-letterhead')
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dynamic Content from DB -->
|
||
@php
|
||
$pageContent = $page->translate('content') ?: $page->content;
|
||
@endphp
|
||
@if($pageContent)
|
||
<div class="row mt-12">
|
||
<div class="col-lg-10 mx-auto">
|
||
<div class="prose max-w-none text-center text-gray-600">
|
||
{!! $pageContent !!}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
</section>
|
||
|
||
@push('scripts')
|
||
<script>
|
||
document.querySelectorAll('.bank-account-card__copy-btn-icon').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var text = this.getAttribute('data-iban');
|
||
var icon = this.querySelector('i');
|
||
|
||
function showCopied() {
|
||
btn.classList.add('is-copied');
|
||
if (icon) icon.className = 'uil uil-check';
|
||
setTimeout(function () {
|
||
btn.classList.remove('is-copied');
|
||
if (icon) icon.className = 'uil uil-copy';
|
||
}, 2000);
|
||
}
|
||
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(showCopied).catch(function () {
|
||
fallbackCopy(text);
|
||
showCopied();
|
||
});
|
||
} else {
|
||
fallbackCopy(text);
|
||
showCopied();
|
||
}
|
||
});
|
||
});
|
||
|
||
function fallbackCopy(text) {
|
||
var ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
ta.setAttribute('readonly', '');
|
||
ta.style.position = 'absolute';
|
||
ta.style.left = '-9999px';
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(ta);
|
||
}
|
||
|
||
document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var text = this.getAttribute('data-copy-target');
|
||
var icon = this.querySelector('i');
|
||
|
||
function showCopied() {
|
||
btn.classList.add('is-copied');
|
||
if (icon) icon.className = 'uil uil-check text-success';
|
||
setTimeout(function () {
|
||
btn.classList.remove('is-copied');
|
||
if (icon) icon.className = 'uil uil-copy';
|
||
}, 1500);
|
||
}
|
||
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(showCopied).catch(function () {
|
||
fallbackCopy(text);
|
||
showCopied();
|
||
});
|
||
} else {
|
||
fallbackCopy(text);
|
||
showCopied();
|
||
}
|
||
});
|
||
});
|
||
|
||
function downloadPDF(btn) {
|
||
var originalHTML = btn.innerHTML;
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; vertical-align: middle;"></span> <strong>' + (document.documentElement.lang === 'tr' ? 'Lütfen bekleyin...' : 'Please wait...') + '</strong>';
|
||
|
||
function run() {
|
||
var element = document.getElementById('letterheadPrintArea');
|
||
|
||
// Save original styles
|
||
var originalShadow = element.style.boxShadow;
|
||
var originalHeight = element.style.height;
|
||
|
||
// Apply temporary safe styles for PDF capture to fit exactly in 1 page (A4 is 297mm)
|
||
element.style.boxShadow = 'none';
|
||
element.style.height = '296mm';
|
||
|
||
var opt = {
|
||
margin: 0,
|
||
filename: 'truncgil-bank-accounts.pdf',
|
||
image: { type: 'jpeg', quality: 0.98 },
|
||
html2canvas: { scale: 2, useCORS: true, letterRendering: true, scrollY: 0 },
|
||
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
||
};
|
||
|
||
html2pdf().set(opt).from(element).save().then(function() {
|
||
// Restore styles
|
||
element.style.boxShadow = originalShadow;
|
||
element.style.height = originalHeight;
|
||
|
||
btn.disabled = false;
|
||
btn.innerHTML = originalHTML;
|
||
}).catch(function(err) {
|
||
console.error(err);
|
||
// Restore styles
|
||
element.style.boxShadow = originalShadow;
|
||
element.style.height = originalHeight;
|
||
|
||
btn.disabled = false;
|
||
btn.innerHTML = originalHTML;
|
||
});
|
||
}
|
||
|
||
if (typeof html2pdf === 'undefined') {
|
||
var script = document.createElement('script');
|
||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js';
|
||
script.onload = run;
|
||
script.onerror = function() {
|
||
alert('PDF library could not be loaded. Please try again.');
|
||
btn.disabled = false;
|
||
btn.innerHTML = originalHTML;
|
||
};
|
||
document.head.appendChild(script);
|
||
} else {
|
||
run();
|
||
}
|
||
}
|
||
</script>
|
||
@endpush
|
||
|
||
@endsection
|