@extends('layouts.app')

@section('title', 'Contas bancárias — '.config('app.name'))

{{--
    As contas bancárias da arena — cadastro INFORMATIVO.

    Não há conexão com banco, saldo nem extrato: é a lista dos bancos que a arena
    usa. O ícone é escolhido num seletor montado em JavaScript a partir da
    biblioteca @edusites/bancos-brasil; o que fica gravado é só o slug.

    Grade de cartões, e não tabela: o cadastro tem dois campos e o ícone é o que
    identifica a conta de relance. Uma tabela de duas colunas gastaria a largura
    toda para dizer o mesmo.
--}}

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-head__title">Contas bancárias</h1>
            <p class="page-head__subtitle">Os bancos que a sua arena usa. Cadastro informativo — nada é conectado.</p>
        </div>

        @can('create', App\Models\BankAccount::class)
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bank-account-create">
                <i class="bi bi-plus-lg me-1"></i> Nova conta
            </button>
        @endcan
    </div>

    @include('partials.status')

    <div class="row g-3">
        @forelse ($accounts as $account)
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100">
                    <div class="card-body d-flex align-items-center gap-3">
                        {{-- O SVG é preenchido pelo JS a partir do slug. Vazio no
                             HTML de propósito: nada de marcação vinda do banco. --}}
                        <span data-bank-icon="{{ $account->icon }}" data-bank-size="40"></span>

                        <span class="flex-grow-1 text-truncate">
                            <span class="d-block fw-semibold text-truncate">{{ $account->name }}</span>

                            @if ($account->is_default)
                                <span class="badge text-bg-light">Padrão</span>
                            @endif
                        </span>

                        <span class="text-nowrap">
                            {{-- Ações sempre visíveis, no canto direito do card.

                                 O `anchor` saiu junto com o menu flutuante: ele
                                 existia porque, numa listagem em card, não há
                                 <tr> nem <li> de onde o JS deduzir o que dispara
                                 o hover. Sem hover, não há o que ancorar. --}}
                            @include('partials.row-actions', [
                                'label' => $account->name,
                                'editModal' => auth()->user()->can('update', $account) ? 'bank-account-'.$account->id : null,
                                'deleteUrl' => auth()->user()->can('delete', $account) ? route('financial.bank-accounts.destroy', $account) : null,
                                'inline' => true,
                            ])
                        </span>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="bi bi-bank fs-3 text-body-secondary d-block mb-2"></i>
                        <span class="text-body-secondary">Nenhuma conta cadastrada ainda.</span>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    {{-- Modais FORA da grade: um <form> dentro de outro é HTML inválido. --}}
    @can('create', App\Models\BankAccount::class)
        @include('financial.bank-accounts._form', ['modalId' => 'bank-account-create', 'account' => null])
    @endcan

    @foreach ($accounts as $account)
        @can('update', $account)
            @include('financial.bank-accounts._form', [
                'modalId' => 'bank-account-'.$account->id,
                'account' => $account,
            ])
        @endcan
    @endforeach
@endsection