@extends('layouts.app')

@section('title', 'Bank Reconciliation')

@section('content')
    <x-page-head title="Bank Reconciliation" subtitle="Match bank statements to ledger entries">
        <x-slot:actions>
            <a href="{{ route('accounting.bank-reconciliation.create') }}" class="btn btn-primary">New Reconciliation</a>
        </x-slot:actions>
    </x-page-head>

    <x-panel>
        @if ($reconciliations->isEmpty())
            <x-empty-state title="No reconciliations" message="Start a bank reconciliation to match statement lines with journal entries.">
                <x-slot:action>
                    <a href="{{ route('accounting.bank-reconciliation.create') }}" class="btn btn-primary">Start reconciliation</a>
                </x-slot:action>
            </x-empty-state>
        @else
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Account</th>
                            <th>Statement Date</th>
                            <th>Period</th>
                            <th>Ledger Balance</th>
                            <th>Status</th>
                            <th>Reconciled By</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($reconciliations as $rec)
                            <tr>
                                <td>{{ $rec->account?->name }}</td>
                                <td>{{ optional($rec->statement_date)->format('d M Y') }}</td>
                                <td>{{ optional($rec->period_start)->format('d M') }} – {{ optional($rec->period_end)->format('d M Y') }}</td>
                                <td>{{ number_format($rec->ledger_balance, 2) }}</td>
                                <td><x-badge variant="{{ $rec->status === 'completed' ? 'green' : 'amber' }}">{{ ucfirst($rec->status) }}</x-badge></td>
                                <td>{{ $rec->reconciledBy?->name ?? '—' }}</td>
                                <td><a href="{{ route('accounting.bank-reconciliation.show', $rec) }}" class="btn btn-ghost btn-sm">Open</a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div style="margin-top:16px;">{{ $reconciliations->links() }}</div>
        @endif
    </x-panel>
@endsection
