Ümit Tunç
365 lines
12 KiB
PHP
365 lines
12 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
|
||
@php
|
||
$accounts = $page->data['bank_accounts'] ?? [];
|
||
$currencySymbols = [
|
||
'TRY' => '₺',
|
||
'USD' => '$',
|
||
'EUR' => '€',
|
||
'GBP' => '£',
|
||
];
|
||
@endphp
|
||
|
||
<style>
|
||
.bank-accounts-section {
|
||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
|
||
}
|
||
.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;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
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: 220px;
|
||
height: 88px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.75rem 1rem;
|
||
background: #ffffff;
|
||
border-radius: 1rem;
|
||
border: 1px solid #e2e8f0;
|
||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||
margin: 0 auto;
|
||
}
|
||
.bank-account-card__logo-wrap img {
|
||
max-width: 100%;
|
||
max-height: 72px;
|
||
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-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: 0.9375rem;
|
||
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 {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
margin-top: 0.5rem;
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: var(--bs-primary);
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.bank-account-card__copy-btn:hover {
|
||
opacity: 0.8;
|
||
text-decoration: underline;
|
||
}
|
||
.bank-account-card__copy-btn.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;
|
||
}
|
||
.bank-accounts-tabs {
|
||
display: inline-flex;
|
||
gap: 0;
|
||
border-bottom: 2px solid #e2e8f0;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.bank-accounts-tabs a,
|
||
.bank-accounts-tabs span {
|
||
padding: 0.75rem 1.25rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
color: #64748b;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -2px;
|
||
transition: color 0.2s, border-color 0.2s;
|
||
}
|
||
.bank-accounts-tabs a:hover {
|
||
color: #334155;
|
||
}
|
||
.bank-accounts-tabs .is-active {
|
||
color: var(--bs-primary);
|
||
border-bottom-color: var(--bs-primary);
|
||
}
|
||
</style>
|
||
|
||
<section class="wrapper bank-accounts-section">
|
||
<div class="container pt-14 pb-14 xl:pt-20 xl:pb-20 lg:pt-20 lg:pb-20 md:pt-20 md:pb-20">
|
||
|
||
<div class="row text-center mb-8">
|
||
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||
<h1 class="display-1 mb-3">{!! $page->title !!}</h1>
|
||
@if($page->excerpt)
|
||
<p class="lead fs-lg mb-0">{!! $page->excerpt !!}</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<nav class="bank-accounts-tabs" aria-label="{!! t('Ödeme yöntemi') !!}">
|
||
<a href="{{ route('page.show', ['slug' => 'online-odeme']) }}">{!! t('Kart ile Ödeme') !!}</a>
|
||
<span class="is-active">{!! t('Havale / EFT (IBAN)') !!}</span>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="row gy-6 justify-content-center">
|
||
@forelse($accounts as $index => $account)
|
||
@php
|
||
$currency = $account['currency'] ?? 'TRY';
|
||
$currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
|
||
@endphp
|
||
<div class="col-md-6 col-xl-4">
|
||
<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">{!! t('Hesap Sahibi') !!}</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 class="bank-account-card__iban" id="iban-{{ $index }}">{{ $account['iban'] }}</div>
|
||
<button
|
||
type="button"
|
||
class="bank-account-card__copy-btn"
|
||
data-iban="{{ $account['iban'] }}"
|
||
data-copy-label="{!! t('Kopyala') !!}"
|
||
data-copied-label="{!! t('Kopyalandı') !!}"
|
||
aria-label="{!! t('IBAN kopyala') !!}"
|
||
>
|
||
<i class="uil uil-copy"></i>
|
||
<span>{!! t('Kopyala') !!}</span>
|
||
</button>
|
||
</div>
|
||
</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">{!! t('Henüz banka hesabı eklenmemiş.') !!}</h3>
|
||
<p class="text-slate-400 mb-0">{!! t('Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.') !!}</p>
|
||
</div>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
@if($page->content)
|
||
<div class="row mt-14">
|
||
<div class="col-lg-10 mx-auto">
|
||
<div class="prose max-w-none text-center text-gray-600">
|
||
{!! $page->content !!}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
</section>
|
||
|
||
@push('scripts')
|
||
<script>
|
||
document.querySelectorAll('.bank-account-card__copy-btn').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var iban = this.getAttribute('data-iban');
|
||
var copyLabel = this.getAttribute('data-copy-label');
|
||
var copiedLabel = this.getAttribute('data-copied-label');
|
||
var span = this.querySelector('span');
|
||
var icon = this.querySelector('i');
|
||
|
||
function showCopied() {
|
||
btn.classList.add('is-copied');
|
||
if (span) span.textContent = copiedLabel;
|
||
if (icon) icon.className = 'uil uil-check';
|
||
setTimeout(function () {
|
||
btn.classList.remove('is-copied');
|
||
if (span) span.textContent = copyLabel;
|
||
if (icon) icon.className = 'uil uil-copy';
|
||
}, 2000);
|
||
}
|
||
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(iban).then(showCopied).catch(function () {
|
||
fallbackCopy(iban);
|
||
showCopied();
|
||
});
|
||
} else {
|
||
fallbackCopy(iban);
|
||
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);
|
||
}
|
||
</script>
|
||
@endpush
|
||
|
||
@endsection
|