@extends('layouts.app')

@section('title', 'Rekening & E-Wallet')

@php
$swatchColors  = ['#0066AE','#003DA5','#003087','#F16522','#289748','#7B0C42','#EE3124','#FF6B00','#3b82f6','#64748b'];
$bankPresets   = [
    'BCA'        => '#0066AE',
    'BRI'        => '#003DA5',
    'Mandiri'    => '#003087',
    'BNI'        => '#F16522',
    'BSI'        => '#289748',
    'CIMB Niaga' => '#7B0C42',
    'Danamon'    => '#EE3124',
    'Permata'    => '#7D253E',
    'BTN'        => '#FF6B00',
    'Maybank'    => '#EFBA00',
];
$ewalletPresets = [
    'GoPay'      => '#00AED6',
    'OVO'        => '#4C3494',
    'DANA'       => '#108BE3',
    'ShopeePay'  => '#EE4D2D',
    'LinkAja'    => '#E82529',
    'Jenius'     => '#2B2A6E',
];
@endphp

@section('styles')
<style>
    .bank-card { border:none; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.07); transition:box-shadow .2s,transform .2s; overflow:hidden; }
    .bank-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.12); transform:translateY(-2px); }
    .bank-card.inactive { opacity:0.6; }
    .bank-logo { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:900; color:#fff; flex-shrink:0; letter-spacing:-0.5px; }
    .acc-number { font-family:'Courier New',monospace; font-size:1rem; font-weight:700; letter-spacing:2px; color:#1e293b; }
    .color-swatch { width:26px; height:26px; border-radius:6px; border:2px solid #e2e8f0; cursor:pointer; transition:transform .15s,border-color .15s; display:inline-block; }
    .color-swatch:hover { transform:scale(1.15); }
    .color-swatch.selected { border-color:#1e293b; transform:scale(1.15); }
    .preset-btn { cursor:pointer; border-radius:8px; padding:5px 10px; border:2px solid #e2e8f0; font-size:0.75rem; font-weight:700; transition:border-color .15s,background .15s; background:#fff; }
    .preset-btn:hover { border-color:#3b82f6; background:#eff6ff; }
    .type-tab-btn { border:2px solid #e2e8f0; border-radius:10px; padding:0.5rem 1.25rem; font-weight:600; font-size:0.82rem; cursor:pointer; transition:.15s; background:#f8fafc; color:#64748b; }
    .type-tab-btn.active { border-color:#3b82f6; background:#eff6ff; color:#1d4ed8; }
    .section-nav .nav-link { font-weight:600; color:#64748b; border-radius:10px 10px 0 0; }
    .section-nav .nav-link.active { color:#1d4ed8; background:#eff6ff; border-bottom-color:#eff6ff; }
</style>
@endsection

@section('content')
<div class="container-fluid px-4">

{{-- Header --}}
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
    <div>
        <h4 class="fw-bold text-dark mb-1">Rekening &amp; E-Wallet</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0" style="font-size:0.82rem;">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Rekening &amp; E-Wallet</li>
            </ol>
        </nav>
    </div>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah">
        <i class="bi bi-plus-circle me-1"></i>Tambah
    </button>
</div>

{{-- Flash --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show d-flex gap-2" style="border-radius:10px;">
    <i class="bi bi-check-circle-fill mt-1 flex-shrink-0"></i>
    <div>{!! session('success') !!}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show d-flex gap-2" style="border-radius:10px;">
    <i class="bi bi-exclamation-triangle-fill mt-1 flex-shrink-0"></i>
    <div>{!! session('error') !!}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Info banner --}}
<div class="alert d-flex gap-3 align-items-start mb-4" style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;">
    <i class="bi bi-info-circle-fill text-primary mt-1 flex-shrink-0"></i>
    <div style="font-size:0.84rem;">
        <strong>Rekening &amp; e-wallet aktif</strong> akan ditampilkan otomatis kepada pelanggan di halaman detail tagihan sebagai panduan transfer pembayaran.
        Yang <strong>dinonaktifkan</strong> tidak akan muncul di portal pelanggan.
    </div>
</div>

{{-- Summary stats --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center p-3" style="border-radius:12px;">
            <div class="fw-bold" style="font-size:1.5rem;color:#3b82f6;">{{ $banks->count() }}</div>
            <div class="text-muted" style="font-size:0.7rem;font-weight:600;text-transform:uppercase;">Rekening Bank</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center p-3" style="border-radius:12px;">
            <div class="fw-bold" style="font-size:1.5rem;color:#8b5cf6;">{{ $ewallets->count() }}</div>
            <div class="text-muted" style="font-size:0.7rem;font-weight:600;text-transform:uppercase;">E-Wallet</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center p-3" style="border-radius:12px;">
            <div class="fw-bold" style="font-size:1.5rem;color:#10b981;">{{ $banks->where('is_active', true)->count() + $ewallets->where('is_active', true)->count() }}</div>
            <div class="text-muted" style="font-size:0.7rem;font-weight:600;text-transform:uppercase;">Aktif</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center p-3" style="border-radius:12px;">
            <div class="fw-bold" style="font-size:1.5rem;color:#94a3b8;">{{ $banks->where('is_active', false)->count() + $ewallets->where('is_active', false)->count() }}</div>
            <div class="text-muted" style="font-size:0.7rem;font-weight:600;text-transform:uppercase;">Nonaktif</div>
        </div>
    </div>
</div>

{{-- Tabs --}}
<ul class="nav nav-tabs section-nav mb-4" id="mainTabs">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabBank">
            <i class="bi bi-bank2 me-1"></i>Rekening Bank
            @if($banks->count()) <span class="badge bg-primary ms-1" style="font-size:0.65rem;">{{ $banks->count() }}</span> @endif
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEwallet">
            <i class="bi bi-phone me-1"></i>E-Wallet
            @if($ewallets->count()) <span class="badge bg-purple ms-1" style="font-size:0.65rem;background:#8b5cf6!important;">{{ $ewallets->count() }}</span> @endif
        </button>
    </li>
</ul>

<div class="tab-content">

    {{-- ── Tab: Rekening Bank ── --}}
    <div class="tab-pane fade show active" id="tabBank">
        @if($banks->isEmpty())
        <div class="card border-0 shadow-sm text-center py-5" style="border-radius:16px;">
            <div class="text-muted">
                <i class="bi bi-bank2 fs-1 d-block mb-3 opacity-30"></i>
                <div class="fw-semibold mb-1">Belum ada rekening bank</div>
                <small>Klik <strong>Tambah</strong> lalu pilih tipe <em>Rekening Bank</em>.</small>
            </div>
        </div>
        @else
        <div class="row g-3">
            @foreach($banks as $acc)
            @php $abbr = strtoupper(substr(preg_replace('/\W/', '', $acc->bank_name), 0, 3)); @endphp
            <div class="col-12 col-md-6 col-xl-4">
                @include('bank-accounts._card', ['acc' => $acc, 'abbr' => $abbr])
            </div>
            @endforeach
        </div>
        @endif
    </div>

    {{-- ── Tab: E-Wallet ── --}}
    <div class="tab-pane fade" id="tabEwallet">
        @if($ewallets->isEmpty())
        <div class="card border-0 shadow-sm text-center py-5" style="border-radius:16px;">
            <div class="text-muted">
                <i class="bi bi-phone fs-1 d-block mb-3 opacity-30"></i>
                <div class="fw-semibold mb-1">Belum ada e-wallet</div>
                <small>Klik <strong>Tambah</strong> lalu pilih tipe <em>E-Wallet</em>.</small>
            </div>
        </div>
        @else
        <div class="row g-3">
            @foreach($ewallets as $acc)
            @php $abbr = strtoupper(substr(preg_replace('/\W/', '', $acc->bank_name), 0, 3)); @endphp
            <div class="col-12 col-md-6 col-xl-4">
                @include('bank-accounts._card', ['acc' => $acc, 'abbr' => $abbr])
            </div>
            @endforeach
        </div>
        @endif
    </div>

</div>{{-- /tab-content --}}

</div>{{-- /container --}}

{{-- ═══════════════════════ MODAL TAMBAH ═══════════════════════ --}}
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold"><i class="bi bi-plus-circle text-primary me-2"></i>Tambah Rekening / E-Wallet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('bank-accounts.store') }}" method="POST">
                @csrf
                <div class="modal-body pt-3">

                    @if($errors->any())
                    <div class="alert alert-danger py-2 mb-3" style="font-size:0.82rem;">
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $e)
                            <li>{{ $e }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    {{-- Type selector --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Tipe <span class="text-danger">*</span></label>
                        <div class="d-flex gap-3">
                            <label class="type-tab-btn active d-flex align-items-center gap-2" id="addTypeBankBtn">
                                <input type="radio" name="type" value="bank" class="d-none" checked>
                                <i class="bi bi-bank2"></i>Rekening Bank
                            </label>
                            <label class="type-tab-btn d-flex align-items-center gap-2" id="addTypeEwalletBtn">
                                <input type="radio" name="type" value="ewallet" class="d-none">
                                <i class="bi bi-phone"></i>E-Wallet
                            </label>
                        </div>
                    </div>

                    {{-- Bank presets --}}
                    <div class="mb-3" id="addBankPresetsWrap">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Pilih Bank Cepat</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($bankPresets as $bname => $bcolor)
                            <span class="preset-btn"
                                  style="color:{{ $bcolor }};"
                                  data-name="{{ $bname }}"
                                  data-color="{{ $bcolor }}"
                                  onclick="applyPreset(this,'add')">{{ $bname }}</span>
                            @endforeach
                        </div>
                    </div>

                    {{-- E-wallet presets --}}
                    <div class="mb-3 d-none" id="addEwalletPresetsWrap">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Pilih E-Wallet Cepat</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($ewalletPresets as $bname => $bcolor)
                            <span class="preset-btn"
                                  style="color:{{ $bcolor }};"
                                  data-name="{{ $bname }}"
                                  data-color="{{ $bcolor }}"
                                  onclick="applyPreset(this,'add')">{{ $bname }}</span>
                            @endforeach
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;" id="addNameLabel">Nama Bank <span class="text-danger">*</span></label>
                            <input type="text" name="bank_name" id="addBankName" class="form-control"
                                   value="{{ old('bank_name') }}" placeholder="BCA, BRI, Mandiri..." required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;" id="addNumLabel">Nomor Rekening <span class="text-danger">*</span></label>
                            <input type="text" name="account_number" id="addAccNum" class="form-control"
                                   value="{{ old('account_number') }}" placeholder="1234567890" required
                                   style="font-family:monospace;letter-spacing:1px;">
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Nama Pemilik <span class="text-danger">*</span></label>
                            <input type="text" name="account_holder" class="form-control"
                                   value="{{ old('account_holder') }}" placeholder="Nama sesuai rekening" required>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Urutan Tampil</label>
                            <input type="number" name="sort_order" class="form-control"
                                   value="{{ old('sort_order', 0) }}" min="0">
                            <div class="form-text">Angka kecil tampil duluan</div>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label fw-semibold d-block" style="font-size:0.82rem;">Warna</label>
                            <div class="d-flex flex-wrap gap-2" id="swAdd">
                                @foreach($swatchColors as $c)
                                <span class="color-swatch {{ $c === '#3b82f6' ? 'selected' : '' }}"
                                      style="background:{{ $c }};"
                                      data-color="{{ $c }}"
                                      onclick="pickSwatch('swAdd','addColor',this)"></span>
                                @endforeach
                            </div>
                            <input type="hidden" name="bank_color" id="addColor" value="{{ old('bank_color','#3b82f6') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Catatan</label>
                            <input type="text" name="notes" class="form-control"
                                   value="{{ old('notes') }}" placeholder="Contoh: Rekening utama, a.n. perusahaan">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ═══════════════════════ MODAL EDIT ═══════════════════════ --}}
<div class="modal fade" id="modalEdit" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold"><i class="bi bi-pencil text-warning me-2"></i>Edit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEdit" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body pt-3">

                    {{-- Type selector --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Tipe</label>
                        <div class="d-flex gap-3">
                            <label class="type-tab-btn d-flex align-items-center gap-2" id="editTypeBankBtn">
                                <input type="radio" name="type" id="editTypeBank" value="bank" class="d-none">
                                <i class="bi bi-bank2"></i>Rekening Bank
                            </label>
                            <label class="type-tab-btn d-flex align-items-center gap-2" id="editTypeEwalletBtn">
                                <input type="radio" name="type" id="editTypeEwallet" value="ewallet" class="d-none">
                                <i class="bi bi-phone"></i>E-Wallet
                            </label>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;" id="editNameLabel">Nama <span class="text-danger">*</span></label>
                            <input type="text" name="bank_name" id="editBankName" class="form-control" required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;" id="editNumLabel">Nomor Rekening <span class="text-danger">*</span></label>
                            <input type="text" name="account_number" id="editAccNum" class="form-control" required
                                   style="font-family:monospace;letter-spacing:1px;">
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Nama Pemilik <span class="text-danger">*</span></label>
                            <input type="text" name="account_holder" id="editAccHolder" class="form-control" required>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Urutan Tampil</label>
                            <input type="number" name="sort_order" id="editSortOrder" class="form-control" min="0">
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label fw-semibold d-block" style="font-size:0.82rem;">Warna</label>
                            <div class="d-flex flex-wrap gap-2" id="swEdit">
                                @foreach($swatchColors as $c)
                                <span class="color-swatch"
                                      style="background:{{ $c }};"
                                      data-color="{{ $c }}"
                                      onclick="pickSwatch('swEdit','editColor',this)"></span>
                                @endforeach
                            </div>
                            <input type="hidden" name="bank_color" id="editColor" value="#3b82f6">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Catatan</label>
                            <input type="text" name="notes" id="editNotes" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning text-white">
                        <i class="bi bi-check2 me-1"></i>Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ═══════════════════════ MODAL HAPUS ═══════════════════════ --}}
<div class="modal fade" id="modalHapus" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:14px;">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold text-danger"><i class="bi bi-trash3-fill me-2"></i>Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-2">
                <div class="alert alert-danger mb-0" style="border-radius:8px;font-size:0.875rem;" id="hapusMsg"></div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                <form id="formHapus" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash3 me-1"></i>Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// ── Swatch picker ──────────────────────────────────────────────
function pickSwatch(containerId, inputId, el) {
    document.querySelectorAll('#' + containerId + ' .color-swatch').forEach(function(s) { s.classList.remove('selected'); });
    el.classList.add('selected');
    document.getElementById(inputId).value = el.dataset.color;
}

function syncSwatches(containerId, color) {
    document.querySelectorAll('#' + containerId + ' .color-swatch').forEach(function(s) {
        s.classList.toggle('selected', s.dataset.color.toLowerCase() === color.toLowerCase());
    });
}

// ── Preset quick-fill ──────────────────────────────────────────
function applyPreset(el, prefix) {
    document.getElementById(prefix + 'BankName').value = el.dataset.name;
    document.getElementById(prefix + 'Color').value    = el.dataset.color;
    syncSwatches('sw' + (prefix === 'add' ? 'Add' : 'Edit'), el.dataset.color);
}

// ── Type toggle (Add modal) ────────────────────────────────────
function setAddType(type) {
    var isEwallet = (type === 'ewallet');
    document.getElementById('addTypeBankBtn').classList.toggle('active', !isEwallet);
    document.getElementById('addTypeEwalletBtn').classList.toggle('active', isEwallet);
    document.getElementById('addBankPresetsWrap').classList.toggle('d-none', isEwallet);
    document.getElementById('addEwalletPresetsWrap').classList.toggle('d-none', !isEwallet);
    document.getElementById('addNameLabel').innerHTML = (isEwallet ? 'Nama E-Wallet' : 'Nama Bank') + ' <span class="text-danger">*</span>';
    document.getElementById('addNumLabel').innerHTML  = (isEwallet ? 'Nomor HP / ID' : 'Nomor Rekening') + ' <span class="text-danger">*</span>';
    document.getElementById('addAccNum').placeholder  = isEwallet ? '0812xxxx / GoPay ID' : '1234567890';
    document.querySelector('#addTypeBankBtn input').checked    = !isEwallet;
    document.querySelector('#addTypeEwalletBtn input').checked = isEwallet;
}
document.getElementById('addTypeBankBtn').addEventListener('click', function() { setAddType('bank'); });
document.getElementById('addTypeEwalletBtn').addEventListener('click', function() { setAddType('ewallet'); });

// ── Type toggle (Edit modal) ───────────────────────────────────
function setEditType(type) {
    var isEwallet = (type === 'ewallet');
    document.getElementById('editTypeBankBtn').classList.toggle('active', !isEwallet);
    document.getElementById('editTypeEwalletBtn').classList.toggle('active', isEwallet);
    document.getElementById('editNameLabel').innerHTML = (isEwallet ? 'Nama E-Wallet' : 'Nama Bank') + ' <span class="text-danger">*</span>';
    document.getElementById('editNumLabel').innerHTML  = (isEwallet ? 'Nomor HP / ID' : 'Nomor Rekening') + ' <span class="text-danger">*</span>';
    document.getElementById('editTypeBank').checked    = !isEwallet;
    document.getElementById('editTypeEwallet').checked = isEwallet;
}
document.getElementById('editTypeBankBtn').addEventListener('click', function() { setEditType('bank'); });
document.getElementById('editTypeEwalletBtn').addEventListener('click', function() { setEditType('ewallet'); });

// ── Open edit modal ────────────────────────────────────────────
function openEdit(btn) {
    var id     = btn.dataset.id;
    var bank   = btn.dataset.bank;
    var num    = btn.dataset.num;
    var holder = btn.dataset.holder;
    var color  = btn.dataset.color;
    var notes  = btn.dataset.notes  || '';
    var sort   = btn.dataset.sort   || 0;
    var type   = btn.dataset.type   || 'bank';

    document.getElementById('editBankName').value  = bank;
    document.getElementById('editAccNum').value    = num;
    document.getElementById('editAccHolder').value = holder;
    document.getElementById('editNotes').value     = notes;
    document.getElementById('editSortOrder').value = sort;
    document.getElementById('editColor').value     = color;
    document.getElementById('formEdit').action     = btn.dataset.url;
    setEditType(type);
    syncSwatches('swEdit', color);
    new bootstrap.Modal(document.getElementById('modalEdit')).show();
}

// ── Open delete modal ──────────────────────────────────────────
function openHapus(btn) {
    var name = btn.dataset.bank;
    var id   = btn.dataset.id;
    document.getElementById('hapusMsg').innerHTML =
        'Anda akan menghapus <strong>' + name + '</strong>. Tindakan ini tidak dapat dibatalkan.';
    document.getElementById('formHapus').action = btn.dataset.url;
    new bootstrap.Modal(document.getElementById('modalHapus')).show();
}

// ── Copy account number ────────────────────────────────────────
function copyText(text, btn) {
    navigator.clipboard.writeText(text).then(function() {
        var icon = btn.querySelector('i');
        icon.className = 'bi bi-check2';
        btn.classList.add('text-success');
        setTimeout(function() { icon.className = 'bi bi-copy'; btn.classList.remove('text-success'); }, 1500);
    });
}

// ── Re-open add modal if validation error ──────────────────────
@if($errors->any())
document.addEventListener('DOMContentLoaded', function() {
    var type = '{{ old('type', 'bank') }}';
    setAddType(type);
    new bootstrap.Modal(document.getElementById('modalTambah')).show();
});
@endif
</script>
@endsection