@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