@extends('layouts.app')

@section('breadcrumb', 'Movimientos bancarios')

@section('content')
    <x-page-header
        title="Movimientos bancarios"
        description="Importa extractos CSV y centraliza los movimientos para conciliación."
    />

    <x-flash-messages />

    <section class="surface mb-4">
        <div class="surface__header">
            <h2 class="surface__title">Importar CSV bancario</h2>
        </div>
        <div class="surface__body">
            <form method="POST" action="{{ route('bank.movements.import') }}" enctype="multipart/form-data" class="row g-3">
                @csrf
                <div class="col-md-4">
                    <label class="form-label">Cuenta bancaria</label>
                    <select name="bank_account_id" class="form-select" required>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->bank_name }} — {{ $account->account_alias }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Perfil banco</label>
                    <select name="bank_profile" class="form-select" required>
                        <option value="generic">Genérico</option>
                        <option value="sabadell">Sabadell</option>
                        <option value="caixabank">CaixaBank</option>
                        <option value="santander">Santander</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Archivo CSV</label>
                    <input type="file" name="csv_file" class="form-control" accept=".csv,.txt" required>
                </div>
                <div class="col-12">
                    <button class="btn btn-primary">Importar movimientos</button>
                </div>
            </form>
            <p class="small text-secondary mt-3 mb-0">
                Columnas esperadas: fecha, concepto, importe y saldo (según perfil).
            </p>
        </div>
    </section>

    <section class="surface surface--flush">
        <div class="surface__header">
            <h2 class="surface__title">Últimos movimientos</h2>
        </div>
        <div class="data-table-wrap">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Cuenta</th>
                    <th>Concepto</th>
                    <th>Importe</th>
                    <th>Saldo</th>
                </tr>
                </thead>
                <tbody>
                @forelse($movements as $movement)
                    <tr>
                        <td class="cell-muted">{{ $movement->movement_date?->format('d/m/Y') }}</td>
                        <td>{{ $movement->account?->bank_name }}</td>
                        <td class="cell-muted text-break">{{ $movement->concept }}</td>
                        <td class="amount {{ (float) $movement->amount < 0 ? 'amount--negative' : 'amount--positive' }}">
                            {{ number_format((float) $movement->amount, 2, ',', '.') }} €
                        </td>
                        <td class="amount cell-muted">
                            {{ $movement->balance !== null ? number_format((float) $movement->balance, 2, ',', '.') . ' €' : '—' }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5">
                            <div class="empty-state">No hay movimientos importados.</div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($movements->hasPages())
            <div class="surface__body pt-0">{{ $movements->links() }}</div>
        @endif
    </section>
@endsection