@extends('layouts.app')
@section('title', 'Bank Accounts')
@section('content')
<x-page-header title="Bank Accounts" />

<div class="px-5 space-y-3">
    @forelse ($bankAccounts as $bank)
        <div class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <div>
                <p class="font-semibold text-sm">{{ $bank->bank_name }} @if($bank->is_default) <span class="text-[10px] bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded-full ml-1">Default</span> @endif</p>
                <p class="text-xs text-neutral-400 mt-0.5">{{ $bank->account_number }} · {{ $bank->account_name }}</p>
                @if ($bank->isInCooldown())
                    <p class="text-[11px] text-amber-400 mt-1">Cooldown until {{ $bank->cooldown_until->format('d M, H:i') }}</p>
                @elseif ($bank->verified)
                    <p class="text-[11px] text-emerald-400 mt-1">Verified</p>
                @endif
            </div>
            <form method="POST" action="{{ route('bank-accounts.destroy', $bank) }}" onsubmit="return confirm('Remove this bank account?')">
                @csrf @method('DELETE')
                <button class="text-red-400 text-xs font-semibold">Remove</button>
            </form>
        </div>
    @empty
        <p class="text-sm text-neutral-500 text-center py-8">No bank accounts yet.</p>
    @endforelse

    <a href="{{ route('bank-accounts.create') }}" class="btn-deposit block text-center text-white font-bold py-4 rounded-full mt-4">Add Bank Account</a>
</div>
@endsection