@extends('agency.layouts.app')

@section('title', 'Şirket Bilgilerim')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center flex-wrap gap-3 mb-2">
                <a href="{{ route('agency.settings') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius: 12px; border-color: #e2e8f0; font-weight: 600;">
                    <i class="fas fa-arrow-left me-1"></i> Ayarlara Dön
                </a>
                <div class="settings-icon-wrapper ms-2">
                    <i class="fas fa-building" style="color:#0f766e"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Şirket Bilgilerim</h1>
                    <p class="text-muted mb-0">Faturalarda ve resmi belgelerde kullanılacak şirket, vergi ve iletişim bilgileriniz.</p>
                </div>
                <div class="ms-auto">
                    <a href="{{ route('agency.settings.company.pdf') }}" class="btn fw-bold px-4 py-2 text-white"
                       style="border-radius:12px; background:linear-gradient(135deg,#0f766e,#115e59); border:none;">
                        <i class="fas fa-file-pdf me-2"></i>PDF Olarak İndir
                    </a>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success" style="border-radius:12px">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger" style="border-radius:12px">{{ $errors->first() }}</div>
    @endif

    <form action="{{ route('agency.settings.company.update') }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row g-4">
            <!-- Şirket Kimliği -->
            <div class="col-lg-6">
                <div class="settings-card shadow-sm h-100" style="background:white; border-radius:20px; border:1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4">
                        <h4 class="fw-bold text-dark mb-4"><i class="fas fa-building me-2" style="color:#0f766e"></i>Şirket Kimliği</h4>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Acente Adı</label>
                            <input type="text" class="form-control" value="{{ $agency->name }}" disabled style="border-radius:10px; background:#f8fafc;">
                            <div class="form-text" style="font-size:.72rem">Acente adı buradan değiştirilemez.</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Ticari Unvan (Fatura Unvanı)</label>
                            <input type="text" name="legal_name" class="form-control" maxlength="255" style="border-radius:10px"
                                   value="{{ old('legal_name', $agency->legal_name) }}" placeholder="Örn: Örnek Turizm Seyahat Acentası Ltd. Şti.">
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">TÜRSAB Belge No</label>
                                <input type="text" name="tursab_number" class="form-control" maxlength="50" style="border-radius:10px"
                                       value="{{ old('tursab_number', $agency->tursab_number) }}" placeholder="Örn: 1234">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Web Sitesi</label>
                                <input type="url" name="website_url" class="form-control" maxlength="255" style="border-radius:10px"
                                       value="{{ old('website_url', $agency->website_url) }}" placeholder="https://www.orneksite.com">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vergi ve Sicil -->
            <div class="col-lg-6">
                <div class="settings-card shadow-sm h-100" style="background:white; border-radius:20px; border:1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4">
                        <h4 class="fw-bold text-dark mb-4"><i class="fas fa-stamp me-2" style="color:#b45309"></i>Vergi ve Sicil Bilgileri</h4>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Vergi Dairesi</label>
                                <input type="text" name="tax_office" class="form-control" maxlength="255" style="border-radius:10px"
                                       value="{{ old('tax_office', $agency->tax_office) }}" placeholder="Örn: Kadıköy V.D.">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Vergi Numarası</label>
                                <input type="text" name="tax_number" class="form-control" maxlength="50" style="border-radius:10px"
                                       value="{{ old('tax_number', $agency->tax_number) }}" placeholder="Örn: 1234567890">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Ticaret Sicil Numarası</label>
                            <input type="text" name="trade_registry_number" class="form-control" maxlength="100" style="border-radius:10px"
                                   value="{{ old('trade_registry_number', $agency->trade_registry_number) }}" placeholder="Örn: 123456-5">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">MERSİS Numarası</label>
                            <input type="text" name="mersis_number" class="form-control" maxlength="50" style="border-radius:10px"
                                   value="{{ old('mersis_number', $agency->mersis_number) }}" placeholder="Örn: 0123456789012345">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fatura İletişim -->
            <div class="col-lg-6">
                <div class="settings-card shadow-sm h-100" style="background:white; border-radius:20px; border:1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4">
                        <h4 class="fw-bold text-dark mb-4"><i class="fas fa-address-book me-2" style="color:#4f46e5"></i>Fatura İletişim Bilgileri</h4>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Fatura Adresi</label>
                            <textarea name="invoice_address" class="form-control" rows="3" maxlength="1000" style="border-radius:10px"
                                      placeholder="Şirket merkezinizin fatura adresi">{{ old('invoice_address', $agency->invoice_address) }}</textarea>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">Telefon</label>
                                <input type="text" name="invoice_phone" class="form-control" maxlength="50" style="border-radius:10px"
                                       value="{{ old('invoice_phone', $agency->invoice_phone) }}" placeholder="Örn: 0212 000 00 00">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">E-posta</label>
                                <input type="email" name="invoice_email" class="form-control" maxlength="255" style="border-radius:10px"
                                       value="{{ old('invoice_email', $agency->invoice_email) }}" placeholder="fatura@orneksite.com">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">KEP Adresi</label>
                            <input type="text" name="kep_address" class="form-control" maxlength="255" style="border-radius:10px"
                                   value="{{ old('kep_address', $agency->kep_address) }}" placeholder="ornek@hs01.kep.tr">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Banka -->
            <div class="col-lg-6">
                <div class="settings-card shadow-sm h-100" style="background:white; border-radius:20px; border:1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <h4 class="fw-bold text-dark mb-0"><i class="fas fa-university me-2" style="color:#0891b2"></i>Banka Bilgileri</h4>
                            <span class="bank-count-pill"><b id="bankCount">0</b> hesap</span>
                        </div>
                        <p class="text-muted small mb-4">Faturalarda ve şirket PDF'inde görünecek hesaplarınız. Birden fazla hesap ekleyebilirsiniz.</p>

                        @php
                            $bankAccounts = collect(old('bank_accounts', $agency->bankAccountsList()))->values()->all();
                        @endphp

                        <div id="bankAccountsWrap" class="d-flex flex-column gap-3">
                            @foreach($bankAccounts as $i => $acc)
                                <div class="bank-card">
                                    <div class="bank-card-top">
                                        <span class="bank-chip"></span>
                                        <i class="fas fa-wifi bank-contactless"></i>
                                        <span class="bank-card-no">HESAP <b class="bank-row-no">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</b></span>
                                        <button type="button" class="bank-remove-btn" title="Hesabı kaldır"><i class="fas fa-times"></i></button>
                                    </div>
                                    <input type="text" name="bank_accounts[{{ $i }}][iban]" class="bank-input bank-input-iban" maxlength="50"
                                           value="{{ $acc['iban'] ?? '' }}" placeholder="TR00 0000 0000 0000 0000 0000 00" autocomplete="off" spellcheck="false">
                                    <div class="bank-card-bottom">
                                        <div class="bank-field">
                                            <span class="bank-field-label">Banka</span>
                                            <input type="text" name="bank_accounts[{{ $i }}][bank_name]" class="bank-input bank-input-name" maxlength="255"
                                                   value="{{ $acc['bank_name'] ?? '' }}" placeholder="Banka adı" autocomplete="off">
                                        </div>
                                        <div class="bank-field bank-field-label-col">
                                            <span class="bank-field-label">Açıklama</span>
                                            <input type="text" name="bank_accounts[{{ $i }}][label]" class="bank-input bank-input-tag" maxlength="100"
                                                   value="{{ $acc['label'] ?? '' }}" placeholder="Örn: TL Hesabı">
                                        </div>
                                    </div>
                                    <label class="bank-visibility">
                                        <input type="hidden" name="bank_accounts[{{ $i }}][show_on_site]" value="0">
                                        <input type="checkbox" class="bank-vis-input" name="bank_accounts[{{ $i }}][show_on_site]" value="1"
                                               {{ !empty($acc['show_on_site']) ? 'checked' : '' }}>
                                        <span class="bank-vis-track"><span class="bank-vis-knob"></span></span>
                                        <span class="bank-vis-text">
                                            <i class="fas fa-globe"></i> Sitede göster
                                            <span class="bank-vis-hint">Paylaşılan şirket sayfasında bu hesap görünür</span>
                                        </span>
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <button type="button" id="bankAddBtn" class="bank-add-ghost mt-3">
                            <span class="bank-add-icon"><i class="fas fa-plus"></i></span>
                            <span class="text-start">
                                <span class="d-block fw-bold">Yeni Hesap Ekle</span>
                                <span class="bank-add-sub">Banka adı, IBAN ve açıklama girin</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Paylaşılabilir Şirket Sayfası -->
            @php
                $profile = $agency->companyProfileSettings();
                $profileUrl = $agency->companyProfileUrl();
                $profileOld = fn ($key) => old('company_profile.' . $key, $profile[$key]);
                $isPublished = (bool) old('company_profile_published', $agency->company_profile_published);
                $shareSections = [
                    ['show_identity', 'Şirket kimliği', 'Ticari unvan, acente adı ve logo', 'fa-building'],
                    ['show_tursab', 'TÜRSAB bilgileri', 'TÜRSAB belge numaranız rozet olarak görünür', 'fa-certificate'],
                    ['show_certificates', 'Sertifikalar / belgeler', 'Ayarlar → Sertifikalar’da “web sitesinde göster” işaretli belgeler', 'fa-award'],
                    ['show_contact', 'İletişim bilgileri', 'Adres, telefon, e-posta ve KEP adresi', 'fa-address-book'],
                    ['show_tax', 'Vergi ve sicil bilgileri', 'Vergi dairesi, VKN, ticaret sicil ve MERSİS numaraları', 'fa-stamp'],
                    ['show_banks', 'Banka hesapları', 'Yalnızca yukarıda “Sitede göster” işaretli hesaplar', 'fa-university'],
                    ['show_social', 'Web ve sosyal medya', 'Web sitesi ve sosyal medya bağlantılarınız', 'fa-share-nodes'],
                ];
            @endphp
            <div class="col-12">
                <div class="settings-card shadow-sm" style="background:white; border-radius:20px; border:1px solid rgba(0,0,0,0.03);">
                    <div class="card-body p-4">
                        <div class="cshare-head">
                            <div>
                                <h4 class="fw-bold text-dark mb-1">
                                    <i class="fas fa-share-nodes me-2" style="color:#4f46e5"></i>Paylaşılabilir Şirket Sayfası
                                </h4>
                                <p class="text-muted small mb-0">
                                    Şirket bilgilerinizi herkese açık tek bir bağlantı olarak paylaşın.
                                    Aşağıdan hangi bölümlerin görüneceğini seçin.
                                </p>
                            </div>
                            <label class="cshare-publish {{ $isPublished ? 'on' : '' }}" id="csharePublishLabel">
                                <input type="hidden" name="company_profile_published" value="0">
                                <input type="checkbox" id="cSharePublish" name="company_profile_published" value="1" {{ $isPublished ? 'checked' : '' }}>
                                <span class="cshare-pub-track"><span class="cshare-pub-knob"></span></span>
                                <span class="cshare-pub-text">
                                    <b id="cSharePubTitle">{{ $isPublished ? 'Yayında' : 'Yayında değil' }}</b>
                                    <span id="cSharePubSub">{{ $isPublished ? 'Bağlantıya sahip herkes görebilir' : 'Bağlantı açıldığında sayfa bulunamaz' }}</span>
                                </span>
                            </label>
                        </div>

                        <div class="cshare-link {{ $isPublished ? '' : 'muted' }}">
                            <i class="fas fa-link"></i>
                            <input type="text" id="cShareUrl" value="{{ $profileUrl }}" readonly onclick="this.select()">
                            <button type="button" class="cshare-btn" id="cShareCopy"><i class="fas fa-copy"></i> Linki Kopyala</button>
                            <a class="cshare-btn ghost" href="{{ $profileUrl }}" target="_blank" rel="noopener"><i class="fas fa-arrow-up-right-from-square"></i> Önizle</a>
                        </div>
                        <p class="cshare-note">
                            <i class="fas fa-circle-info"></i>
                            Sayfa arama motorlarına kapalıdır; yalnızca bağlantıyı paylaştığınız kişiler erişir.
                            Yayından kaldırdığınızda bağlantı çalışmaz.
                        </p>

                        <div class="cshare-grid">
                            @foreach($shareSections as [$key, $label, $desc, $icon])
                                <label class="cshare-item">
                                    <input type="hidden" name="company_profile[{{ $key }}]" value="0">
                                    <input type="checkbox" name="company_profile[{{ $key }}]" value="1" {{ $profileOld($key) ? 'checked' : '' }}>
                                    <span class="cshare-box"><i class="fas fa-check"></i></span>
                                    <span class="cshare-ic"><i class="fas {{ $icon }}"></i></span>
                                    <span class="cshare-txt">
                                        <b>{{ $label }}</b>
                                        <span>{{ $desc }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>

                        <div class="mt-4">
                            <label class="form-label small fw-bold text-secondary">Tanıtım Metni <span class="text-muted fw-normal">(isteğe bağlı)</span></label>
                            <textarea name="company_profile[intro]" class="form-control" rows="3" maxlength="2000" style="border-radius:10px"
                                      placeholder="Sayfanın üst bölümünde görünecek kısa tanıtım yazısı...">{{ old('company_profile.intro', $profile['intro']) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-primary fw-bold px-5 py-2" style="border-radius:12px; background:linear-gradient(135deg,#0f766e,#115e59); border:none;">
                    <i class="fas fa-save me-2"></i>Bilgileri Kaydet
                </button>
            </div>
        </div>
    </form>
</div>

<style>
    .settings-icon-wrapper {
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(15, 118, 110, 0.12);
    }

    .fw-800 { font-weight: 800; }
    .fw-600 { font-weight: 600; }

    .header-divider {
        height: 3px;
        width: 60px;
        background: linear-gradient(to right, #0f766e, transparent);
        border-radius: 10px;
    }

    /* ─── Banka Hesapları: kart estetiği ─────────────────────────── */
    .bank-count-pill {
        font-size: .72rem;
        font-weight: 700;
        color: #0e7490;
        background: #ecfeff;
        border: 1px solid #a5f3fc;
        border-radius: 999px;
        padding: 3px 12px;
        letter-spacing: .04em;
    }

    .bank-card {
        position: relative;
        border-radius: 18px;
        padding: 16px 18px 14px;
        color: #fff;
        background: linear-gradient(128deg, #062c33 0%, #0b4a54 45%, #0e7490 100%);
        box-shadow: 0 14px 30px -12px rgba(8, 51, 68, .55), inset 0 1px 0 rgba(255,255,255,.12);
        overflow: hidden;
        isolation: isolate;
        animation: bankCardIn .35s cubic-bezier(.22,1,.36,1) both;
    }
    .bank-card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(circle at 85% -20%, rgba(103,232,249,.28), transparent 55%),
            radial-gradient(circle at -10% 115%, rgba(14,116,144,.55), transparent 60%);
    }
    .bank-card::after {
        content: '';
        position: absolute;
        right: -46px;
        top: -46px;
        width: 148px;
        height: 148px;
        border-radius: 50%;
        border: 1.5px solid rgba(255,255,255,.09);
        z-index: -1;
    }
    @keyframes bankCardIn {
        from { opacity: 0; transform: translateY(12px) scale(.97); }
        to   { opacity: 1; transform: none; }
    }

    .bank-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .bank-chip {
        width: 34px;
        height: 25px;
        border-radius: 6px;
        background:
            linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 8px / 100% 8px no-repeat,
            linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 15px 0 / 8px 100% no-repeat,
            linear-gradient(135deg, #fde68a, #d4a437 70%, #b8860b);
        box-shadow: inset 0 0 0 1px rgba(120, 80, 0, .4);
        flex-shrink: 0;
    }
    .bank-contactless {
        transform: rotate(90deg);
        color: rgba(255,255,255,.45);
        font-size: .85rem;
    }
    .bank-card-no {
        margin-left: auto;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .18em;
        color: rgba(255,255,255,.55);
    }
    .bank-card-no b { color: #67e8f9; font-weight: 800; }
    .bank-remove-btn {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 8px;
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.65);
        font-size: .72rem;
        transition: all .15s;
        flex-shrink: 0;
    }
    .bank-remove-btn:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }

    .bank-input {
        display: block;
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px dashed rgba(255,255,255,.25);
        color: #fff;
        padding: 4px 2px 6px;
        outline: none;
        transition: border-color .15s;
    }
    .bank-input:focus { border-bottom: 1px solid #67e8f9; }
    .bank-input::placeholder { color: rgba(255,255,255,.32); }

    .bank-input-iban {
        font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
        font-size: 1.02rem;
        letter-spacing: .14em;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0,0,0,.35);
        margin-bottom: 12px;
    }

    .bank-card-bottom { display: flex; gap: 16px; }
    .bank-field { flex: 1 1 60%; min-width: 0; }
    .bank-field-label-col { flex: 1 1 40%; }
    .bank-field-label {
        display: block;
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255,255,255,.45);
        margin-bottom: 1px;
    }
    .bank-input-name { font-size: .88rem; font-weight: 700; }
    .bank-input-tag { font-size: .82rem; color: #a5f3fc; }

    .bank-add-ghost {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 18px;
        background: #f8fafc;
        border: 2px dashed #cbd5e1;
        border-radius: 18px;
        color: #64748b;
        transition: all .2s;
        cursor: pointer;
    }
    .bank-add-ghost:hover {
        border-color: #0891b2;
        background: #ecfeff;
        color: #0e7490;
    }
    .bank-add-ghost:hover .bank-add-icon { background: #0891b2; color: #fff; transform: rotate(90deg); }
    .bank-add-ghost:disabled { opacity: .45; cursor: not-allowed; }
    .bank-add-icon {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #e2e8f0;
        color: #475569;
        transition: all .2s;
        flex-shrink: 0;
    }
    .bank-add-sub { display: block; font-size: .72rem; color: #94a3b8; }

    /* ─── Banka kartı: "Sitede göster" anahtarı ───────────────────── */
    .bank-visibility {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 14px -18px -14px;
        padding: 10px 18px 12px;
        border-top: 1px solid rgba(255, 255, 255, .12);
        cursor: pointer;
        user-select: none;
    }
    .bank-vis-input { position: absolute; opacity: 0; width: 0; height: 0; }
    .bank-vis-track {
        position: relative;
        width: 36px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .18);
        transition: background .18s, border-color .18s;
    }
    .bank-vis-knob {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #cbd5e1;
        transition: transform .18s, background .18s;
    }
    .bank-vis-input:checked + .bank-vis-track { background: #22d3ee; border-color: #67e8f9; }
    .bank-vis-input:checked + .bank-vis-track .bank-vis-knob { transform: translateX(16px); background: #05323b; }
    .bank-vis-input:focus-visible + .bank-vis-track { outline: 2px solid #67e8f9; outline-offset: 2px; }
    .bank-vis-text { font-size: .76rem; font-weight: 700; color: rgba(255, 255, 255, .8); line-height: 1.25; }
    .bank-vis-text i { color: #67e8f9; margin-right: 3px; }
    .bank-vis-hint { display: block; font-size: .64rem; font-weight: 500; color: rgba(255, 255, 255, .4); }

    /* ─── Paylaşılabilir şirket sayfası paneli ────────────────────── */
    .cshare-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }
    .cshare-publish {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        padding: 10px 16px;
        border-radius: 14px;
        border: 1px solid var(--border-1, #e2e8f0);
        background: var(--bg-inset, #f8fafc);
        cursor: pointer;
        user-select: none;
        transition: border-color .18s, background .18s;
    }
    .cshare-publish.on { border-color: #4f46e5; background: #eef2ff; }
    .cshare-publish input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .cshare-pub-track {
        position: relative;
        width: 42px;
        height: 23px;
        flex-shrink: 0;
        border-radius: 999px;
        background: var(--bg-raise, #e2e8f0);
        transition: background .18s;
    }
    .cshare-pub-knob {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
        transition: transform .18s;
    }
    .cshare-publish.on .cshare-pub-track { background: #4f46e5; }
    .cshare-publish.on .cshare-pub-knob { transform: translateX(19px); }
    .cshare-pub-text { font-size: .82rem; line-height: 1.3; }
    .cshare-pub-text b { display: block; font-weight: 800; color: var(--text-1, #0f172a); }
    .cshare-pub-text span { font-size: .7rem; color: var(--text-3, #94a3b8); }

    .cshare-link {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 12px 10px 16px;
        border-radius: 14px;
        border: 1px dashed var(--border-1, #cbd5e1);
        background: var(--bg-inset, #f8fafc);
        transition: opacity .18s;
    }
    .cshare-link.muted { opacity: .58; }
    .cshare-link > i { color: #4f46e5; }
    .cshare-link input {
        flex: 1 1 240px;
        min-width: 0;
        border: none;
        background: transparent;
        outline: none;
        font-size: .84rem;
        font-weight: 600;
        color: var(--text-2, #475569);
        font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    }
    .cshare-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: none;
        border-radius: 10px;
        padding: 8px 15px;
        font-size: .78rem;
        font-weight: 700;
        background: #4f46e5;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        transition: filter .15s;
        white-space: nowrap;
    }
    .cshare-btn:hover { filter: brightness(1.1); color: #fff; }
    .cshare-btn.ghost {
        background: var(--bg-card, #fff);
        color: #4f46e5;
        border: 1px solid var(--border-1, #e2e8f0);
    }
    .cshare-btn.ghost:hover { color: #4f46e5; border-color: #4f46e5; }
    .cshare-btn.done { background: #059669; }

    .cshare-note {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin: 10px 2px 0;
        font-size: .72rem;
        color: var(--text-3, #94a3b8);
    }
    .cshare-note i { margin-top: 2px; }

    .cshare-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
        margin-top: 20px;
    }
    .cshare-item {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid var(--border-1, #e2e8f0);
        background: var(--bg-card, #fff);
        cursor: pointer;
        user-select: none;
        transition: border-color .16s, background .16s;
    }
    .cshare-item:hover { border-color: #a5b4fc; }
    .cshare-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .cshare-box {
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        margin-top: 2px;
        border-radius: 6px;
        border: 1.5px solid var(--border-1, #cbd5e1);
        background: var(--bg-card, #fff);
        display: flex;
        align-items: center;
        justify-content: center;
        color: transparent;
        font-size: .62rem;
        transition: all .16s;
    }
    .cshare-item input:checked ~ .cshare-box { background: #4f46e5; border-color: #4f46e5; color: #fff; }
    .cshare-item input:focus-visible ~ .cshare-box { outline: 2px solid #4f46e5; outline-offset: 2px; }
    .cshare-ic {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-inset, #f1f5f9);
        color: var(--text-3, #94a3b8);
        font-size: .78rem;
        transition: all .16s;
    }
    .cshare-item input:checked ~ .cshare-ic { background: #eef2ff; color: #4f46e5; }
    .cshare-txt { font-size: .78rem; line-height: 1.35; min-width: 0; }
    .cshare-txt b { display: block; font-weight: 700; color: var(--text-1, #0f172a); }
    .cshare-txt span { color: var(--text-3, #94a3b8); font-size: .7rem; }

    @media (max-width: 575.98px) {
        .cshare-head { flex-direction: column; }
        .cshare-publish { width: 100%; }
        .cshare-btn { flex: 1 1 auto; justify-content: center; }
    }
</style>

<script>
(function () {
    const wrap = document.getElementById('bankAccountsWrap');
    const addBtn = document.getElementById('bankAddBtn');
    const countEl = document.getElementById('bankCount');
    const MAX_ACCOUNTS = 15;

    function cardTemplate(index) {
        const div = document.createElement('div');
        div.className = 'bank-card';
        div.innerHTML = `
            <div class="bank-card-top">
                <span class="bank-chip"></span>
                <i class="fas fa-wifi bank-contactless"></i>
                <span class="bank-card-no">HESAP <b class="bank-row-no">0${index + 1}</b></span>
                <button type="button" class="bank-remove-btn" title="Hesabı kaldır"><i class="fas fa-times"></i></button>
            </div>
            <input type="text" name="bank_accounts[${index}][iban]" class="bank-input bank-input-iban" maxlength="50"
                   placeholder="TR00 0000 0000 0000 0000 0000 00" autocomplete="off" spellcheck="false">
            <div class="bank-card-bottom">
                <div class="bank-field">
                    <span class="bank-field-label">Banka</span>
                    <input type="text" name="bank_accounts[${index}][bank_name]" class="bank-input bank-input-name" maxlength="255"
                           placeholder="Banka adı" autocomplete="off">
                </div>
                <div class="bank-field bank-field-label-col">
                    <span class="bank-field-label">Açıklama</span>
                    <input type="text" name="bank_accounts[${index}][label]" class="bank-input bank-input-tag" maxlength="100"
                           placeholder="Örn: TL Hesabı">
                </div>
            </div>
            <label class="bank-visibility">
                <input type="hidden" name="bank_accounts[${index}][show_on_site]" value="0">
                <input type="checkbox" class="bank-vis-input" name="bank_accounts[${index}][show_on_site]" value="1">
                <span class="bank-vis-track"><span class="bank-vis-knob"></span></span>
                <span class="bank-vis-text">
                    <i class="fas fa-globe"></i> Sitede göster
                    <span class="bank-vis-hint">Paylaşılan şirket sayfasında bu hesap görünür</span>
                </span>
            </label>`;
        return div;
    }

    function reindex() {
        const cards = wrap.querySelectorAll('.bank-card');
        cards.forEach((card, i) => {
            card.querySelector('.bank-row-no').textContent = String(i + 1).padStart(2, '0');
            card.querySelectorAll('input').forEach((input) => {
                input.name = input.name.replace(/bank_accounts\[\d+\]/, `bank_accounts[${i}]`);
            });
        });
        countEl.textContent = cards.length;
        addBtn.disabled = cards.length >= MAX_ACCOUNTS;
    }

    // IBAN'ı yazarken 4'lü gruplara ayır, büyük harfe çevir
    function formatIban(input) {
        const raw = input.value.replace(/\s+/g, '').toUpperCase().slice(0, 34);
        input.value = raw.replace(/(.{4})/g, '$1 ').trim();
    }

    addBtn.addEventListener('click', () => {
        const count = wrap.querySelectorAll('.bank-card').length;
        if (count >= MAX_ACCOUNTS) return;
        const card = cardTemplate(count);
        wrap.appendChild(card);
        reindex();
        card.querySelector('.bank-input-iban').focus();
    });

    wrap.addEventListener('click', (e) => {
        const btn = e.target.closest('.bank-remove-btn');
        if (!btn) return;
        btn.closest('.bank-card').remove();
        reindex();
    });

    wrap.addEventListener('input', (e) => {
        if (e.target.classList.contains('bank-input-iban')) formatIban(e.target);
    });

    wrap.querySelectorAll('.bank-input-iban').forEach(formatIban);
    reindex();
})();

/* ── Paylaşılabilir şirket sayfası: yayın anahtarı + linki kopyala ── */
(function () {
    const publishInput = document.getElementById('cSharePublish');
    const publishLabel = document.getElementById('csharePublishLabel');
    const linkBox = document.querySelector('.cshare-link');
    const title = document.getElementById('cSharePubTitle');
    const sub = document.getElementById('cSharePubSub');
    const copyBtn = document.getElementById('cShareCopy');
    const urlInput = document.getElementById('cShareUrl');

    if (publishInput) {
        publishInput.addEventListener('change', function () {
            const on = publishInput.checked;
            publishLabel.classList.toggle('on', on);
            linkBox.classList.toggle('muted', !on);
            title.textContent = on ? 'Yayında' : 'Yayında değil';
            sub.textContent = on ? 'Bağlantıya sahip herkes görebilir' : 'Bağlantı açıldığında sayfa bulunamaz';
        });
    }

    if (copyBtn && urlInput) {
        copyBtn.addEventListener('click', function () {
            const done = function () {
                copyBtn.classList.add('done');
                copyBtn.innerHTML = '<i class="fas fa-check"></i> Kopyalandı';
                setTimeout(function () {
                    copyBtn.classList.remove('done');
                    copyBtn.innerHTML = '<i class="fas fa-copy"></i> Linki Kopyala';
                }, 1800);
            };

            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(urlInput.value).then(done).catch(function () {});
                return;
            }
            urlInput.select();
            try { document.execCommand('copy'); done(); } catch (e) {}
        });
    }
})();
</script>
@endsection