@php
    $avgRateToPkr = $account->average_conversion_rate_to_pkr;
    $showAverageRate = strtoupper((string) $account->currency) !== 'PKR';
    $latestCreditType = $bucket === 'wallets'
        ? trim((string) $account->getAttribute('latest_credit_type_label'))
        : '';
    $closingStatus = ($bankClosingStatusMap ?? collect())->get((int) $account->id);
    $defaultClosingMonth = $defaultClosingMonth ?? now()->copy()->startOfMonth()->subMonth()->format('Y-m');
    $defaultClosingMonthLabel = $defaultClosingMonthLabel ?? \Illuminate\Support\Carbon::createFromFormat('Y-m', $defaultClosingMonth)->format('F');
    $pendingClosingLabel = 'Pending Closing of '.$defaultClosingMonthLabel;
    $openUrl = route('finance.transactions', ['bucket' => $bucket, 'bank_account_id' => $account->id]);
@endphp

<div class="card card-hover"
   onclick="window.location='{{ $openUrl }}'"
   style="padding:20px;cursor:pointer;display:flex;flex-direction:column;gap:12px;min-height:220px">
    <div class="flex items-center justify-between">
        <div class="bank-logo" style="background:{{ $bucketAccent[1] }};color:var(--text)">{{ $accountInitials($account) }}</div>
        <span class="pill">{{ $maskedAccount($account) }}</span>
    </div>
    <div style="flex:1">
        <div style="font-size:22px;font-weight:800;color:var(--text);line-height:1.15">{{ $account->name }}</div>
        <div class="text-sm mt-1" style="color:var(--muted);font-weight:500">{{ $account->bank_name }}</div>
        @if($latestCreditType !== '')
            <div style="margin-top:8px">
                <span class="pill pill-cyan" style="font-size:10.5px;padding:2px 8px">Credit Type: {{ $latestCreditType }}</span>
            </div>
        @endif
    </div>
    <div class="flex items-end justify-between gap-3">
        <div>
            <div class="text-xs" style="color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600">Balance</div>
            <div class="text-sm font-semibold" style="color:var(--text-2)">{{ $metrics->money($account->current_balance, $account->currency) }}</div>
        </div>
        @if($showAverageRate)
            <div style="text-align:right">
                <div class="text-xs" style="color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600">Avg {{ $account->currency }}-&gt;PKR</div>
                <div class="text-sm font-semibold" style="color:var(--text-2)">
                    {{ $avgRateToPkr !== null ? number_format((float) $avgRateToPkr, 2) : '-' }}
                </div>
            </div>
        @endif
        <div class="tile-arrow" style="width:28px;height:28px">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
    </div>
    <div class="flex items-center justify-end" style="margin-top:auto">
        @if($closingStatus)
            @if($closingStatus['is_closed'])
                <span class="pill pill-green">{{ $defaultClosingMonthLabel }} Closed</span>
            @else
                <form method="POST" action="{{ route('finance.monthly-closing.account-close') }}" style="margin:0" onclick="event.stopPropagation()" onsubmit="return window.financeRequestClosingPassword(this)">
                    @csrf
                    <input type="hidden" name="month" value="{{ $defaultClosingMonth }}">
                    <input type="hidden" name="target_type" value="bank">
                    <input type="hidden" name="target_id" value="{{ $account->id }}">
                    <input type="hidden" name="closing_password" value="">
                    <input type="hidden" name="return_url" value="{{ request()->fullUrl() }}">
                    <button class="btn" type="submit" onclick="event.stopPropagation()" style="padding:9px 14px;background:#dc2626;border-color:#dc2626;color:#fff">{{ $pendingClosingLabel }}</button>
                </form>
            @endif
        @endif
    </div>
</div>

@once
    @push('scripts')
        <style>
            .closing-password-overlay {
                position: fixed;
                inset: 0;
                z-index: 80;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(15, 23, 42, .46);
            }
            .closing-password-overlay[hidden] { display: none; }
            .closing-password-modal {
                width: min(420px, 100%);
                background: var(--card);
                border: 1px solid var(--border);
                border-radius: 14px;
                box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
                padding: 18px;
            }
            .closing-password-modal h3 {
                margin: 0;
                font-size: 17px;
            }
            .closing-password-modal p {
                margin: 6px 0 14px;
                color: var(--muted);
                font-size: 13px;
            }
            .closing-password-field {
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .closing-password-field input {
                flex: 1;
            }
            .closing-password-actions {
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                margin-top: 16px;
            }
        </style>
        <script>
            (function () {
                if (window.financeRequestClosingPassword) {
                    return;
                }

                let pendingClosingForm = null;

                function ensureClosingPasswordDialog() {
                    let overlay = document.getElementById('closingPasswordOverlay');

                    if (overlay) {
                        return overlay;
                    }

                    overlay = document.createElement('div');
                    overlay.id = 'closingPasswordOverlay';
                    overlay.className = 'closing-password-overlay';
                    overlay.hidden = true;
                    overlay.innerHTML = `
                        <div class="closing-password-modal" role="dialog" aria-modal="true" aria-labelledby="closingPasswordTitle">
                            <h3 id="closingPasswordTitle">Closing password</h3>
                            <p>Enter closing password to continue.</p>
                            <div class="closing-password-field">
                                <input id="closingPasswordInput" class="field" type="password" autocomplete="current-password">
                                <button class="btn" type="button" id="closingPasswordToggle">View</button>
                            </div>
                            <div class="closing-password-actions">
                                <button class="btn" type="button" id="closingPasswordCancel">Cancel</button>
                                <button class="btn btn-primary" type="button" id="closingPasswordSubmit">OK</button>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(overlay);

                    const input = overlay.querySelector('#closingPasswordInput');
                    const toggle = overlay.querySelector('#closingPasswordToggle');
                    const cancel = overlay.querySelector('#closingPasswordCancel');
                    const submit = overlay.querySelector('#closingPasswordSubmit');

                    function close() {
                        overlay.hidden = true;
                        input.value = '';
                        input.type = 'password';
                        toggle.textContent = 'View';
                        pendingClosingForm = null;
                    }

                    function submitPendingForm() {
                        const password = input.value;
                        const field = pendingClosingForm ? pendingClosingForm.querySelector('input[name="closing_password"]') : null;

                        if (! password.trim()) {
                            window.alert('Closing password is required.');
                            input.focus();
                            return;
                        }

                        if (field) {
                            field.value = password;
                        }

                        const form = pendingClosingForm;
                        close();

                        if (form) {
                            HTMLFormElement.prototype.submit.call(form);
                        }
                    }

                    overlay.addEventListener('click', function (event) {
                        if (event.target === overlay) {
                            close();
                        }
                    });
                    cancel.addEventListener('click', close);
                    submit.addEventListener('click', submitPendingForm);
                    toggle.addEventListener('click', function () {
                        const shouldShow = input.type === 'password';
                        input.type = shouldShow ? 'text' : 'password';
                        toggle.textContent = shouldShow ? 'Hide' : 'View';
                        input.focus();
                    });
                    input.addEventListener('keydown', function (event) {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                            submitPendingForm();
                        }

                        if (event.key === 'Escape') {
                            close();
                        }
                    });

                    return overlay;
                }

                window.financeRequestClosingPassword = function (form) {
                    pendingClosingForm = form;

                    const overlay = ensureClosingPasswordDialog();
                    overlay.hidden = false;
                    overlay.querySelector('#closingPasswordInput').focus();

                    return false;
                };
            })();
        </script>
    @endpush
@endonce