@extends('layouts.app')
@section('title', 'Reconciliation')

@section('content')
<x-page-header title="Reconciliation" subtitle="Tick each transaction that appears on your bank statement (or cash count) until the difference is zero">
    <a href="{{ route('ledger.accounts.show', $account) }}" class="btn btn-ghost"><i class="bi bi-journal-text" aria-hidden="true"></i> Open {{ $account->name }} ledger</a>
</x-page-header>

<form method="GET" class="card card-body mb-3" data-autosubmit id="rec-setup">
    <div class="row g-3 align-items-end">
        <div class="col-md-4">
            <label class="form-label" for="r-account">Account</label>
            <select id="r-account" name="account_id" class="form-select">@foreach ($accounts as $a)<option value="{{ $a->id }}" @selected($a->id === $account->id)>{{ $a->code }} · {{ $a->name }}</option>@endforeach</select>
        </div>
        <div class="col-md-3"><label class="form-label" for="r-date">Statement date</label><input id="r-date" type="date" name="statement_date" value="{{ $date }}" class="form-control"></div>
        <div class="col-md-3">
            <label class="form-label" for="r-balance">Closing balance on statement</label>
            <div class="input-group"><span class="input-group-text">{{ config('erp.currency') }}</span><input id="r-balance" type="text" name="statement_balance" value="{{ $statement !== null ? $statement : '' }}" class="form-control" inputmode="decimal" placeholder="0.00" data-money></div>
        </div>
        <div class="col-md-2"><button class="btn btn-primary w-100">Start</button></div>
    </div>
</form>

@if ($statement === null)
    <div class="card card-body mb-3"><div class="d-flex gap-3 align-items-center"><span class="icon-chip"><i class="bi bi-info-circle"></i></span>
        <div class="small text-muted">Enter the statement date and the closing balance printed on the statement, then press <strong>Start</strong>. You'll see every transaction not yet reconciled up to that date.</div></div></div>
@else
<form method="POST" action="{{ route('ledger.reconcile.store') }}" id="rec-form" data-no-guard data-opening="{{ $opening }}" data-statement="{{ $statement }}" class="mb-4">
    @csrf
    @include('partials.error-summary')
    <input type="hidden" name="account_id" value="{{ $account->id }}">
    <input type="hidden" name="statement_date" value="{{ $date }}">
    <input type="hidden" name="statement_balance" value="{{ $statement }}">

    <div class="row g-3 mb-3 stagger">
        <div class="col-6 col-xl-3"><div class="card card-body py-3"><div class="stat-label">Already reconciled</div><div class="stat-value" style="font-size:1.25rem">{{ money($opening) }}</div></div></div>
        <div class="col-6 col-xl-3"><div class="card card-body py-3"><div class="stat-label">Ticked now</div><div class="stat-value" style="font-size:1.25rem" id="rec-ticked">{{ money(0) }}</div><div class="small text-muted"><span id="rec-count">0</span> transactions</div></div></div>
        <div class="col-6 col-xl-3"><div class="card card-body py-3"><div class="stat-label">Statement balance</div><div class="stat-value" style="font-size:1.25rem">{{ money($statement) }}</div></div></div>
        <div class="col-6 col-xl-3"><div class="card card-body py-3" id="rec-diff-card"><div class="stat-label">Difference</div><div class="stat-value" style="font-size:1.25rem" id="rec-diff">{{ money($statement - $opening) }}</div><div class="small" id="rec-note">Keep ticking</div></div></div>
    </div>

    <div class="card">
        <div class="card-header"><span class="card-title">Unreconciled transactions up to {{ \Illuminate\Support\Carbon::parse($date)->format('d M Y') }}</span>
            <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="rec-all"><label class="form-check-label" for="rec-all">Tick all</label></div></div>
        <div class="table-wrap">
            <table class="table table-modern table-cards align-middle mb-0">
                <thead><tr><th style="width:44px"></th><th>Date</th><th>Entry</th><th>Reference</th><th>Description</th><th class="num">Debit</th><th class="num">Credit</th></tr></thead>
                <tbody>
                @forelse ($lines as $l)
                    <tr>
                        <td class="cell-title" data-label=""><input class="form-check-input rec-line" type="checkbox" name="lines[]" value="{{ $l->id }}" data-amount="{{ $l->signed }}" id="rl-{{ $l->id }}" aria-label="Reconcile {{ $l->entry->reference }}"></td>
                        <td data-label="Date"><label for="rl-{{ $l->id }}" class="mb-0">{{ $l->entry_date->format('d M Y') }}</label></td>
                        <td data-label="Entry"><a href="{{ route('ledger.journal.show', $l->journal_entry_id) }}" class="tabular">{{ $l->entry->number() }}</a></td>
                        <td data-label="Reference"><a href="{{ $l->entry->sourceUrl() }}">{{ $l->entry->reference ?: '—' }}</a></td>
                        <td data-label="Description"><span class="cell-clip" style="max-width:320px">{{ $l->entry->memo }}</span></td>
                        <td class="num money-in" data-label="Debit">{{ $l->debit > 0 ? money($l->debit) : '' }}</td>
                        <td class="num money-out" data-label="Credit">{{ $l->credit > 0 ? money($l->credit) : '' }}</td>
                    </tr>
                @empty
                    <tr class="empty-row"><td colspan="7"><x-empty icon="check2-all" title="Nothing left to reconcile" text="Every transaction up to this date has been matched." /></td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if ($lines->isNotEmpty())
        <div class="card-footer d-flex flex-wrap align-items-center gap-3">
            <input type="text" name="notes" class="form-control" style="max-width:340px" placeholder="Note (optional)" maxlength="1000" aria-label="Note">
            <span class="ms-auto small text-muted" id="rec-hint">The button turns on when the difference is zero.</span>
            <button class="btn btn-success" id="rec-submit" disabled><i class="bi bi-check2-circle" aria-hidden="true"></i> Reconcile</button>
        </div>
        @endif
    </div>
</form>
@endif

<div class="card">
    <div class="card-header"><span class="card-title">Recent reconciliations — {{ $account->name }}</span></div>
    <div class="table-wrap">
        <table class="table table-modern table-cards align-middle mb-0">
            <thead><tr><th>Statement date</th><th class="num">Statement balance</th><th class="num">Opening</th><th>By</th><th>Note</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
            <tbody>
            @forelse ($history as $h)
                <tr>
                    <td class="cell-title" data-label="Statement date"><span class="cell-main">{{ $h->statement_date->format('d M Y') }}</span></td>
                    <td class="num fw-semibold" data-label="Statement balance">{{ money($h->statement_balance) }}</td>
                    <td class="num" data-label="Opening">{{ money($h->opening_balance) }}</td>
                    <td data-label="By">{{ $h->user?->name ?? '—' }}</td>
                    <td data-label="Note"><span class="cell-clip" style="max-width:240px">{{ $h->notes ?: '—' }}</span></td>
                    <td class="actions-col">
                        @if ($h->id === (int) $latestId)
                            <form method="POST" action="{{ route('ledger.reconcile.destroy', $h) }}" class="d-inline" data-confirm="Its transactions become unreconciled and editable again." data-confirm-title="Undo this reconciliation?" data-confirm-label="Undo" data-confirm-tone="danger">
                                @csrf @method('DELETE')<button class="btn btn-sm btn-ghost"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Undo</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="6"><x-empty icon="check2-square" title="No reconciliations yet" text="Once you reconcile, those transactions are locked against accidental edits." /></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection