@extends('layouts.app')
@section('title', 'Bank Transactions')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">Finance</a></li><li class="breadcrumb-item active">Bank Transactions</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">Bank Reconciliation</h1><p class="text-muted mb-0">Match bank statements with ledger entries</p></div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-primary btn-sm"><i class="bi bi-upload me-1"></i>Import Statement</button>
        <button class="btn btn-outline-success btn-sm"><i class="bi bi-file-earmark-excel me-1"></i>Export</button>
    </div>
</div>
<div class="row g-3 mb-4">
    @php $stats = [['label'=>'Total Transactions','count'=>$stats['total']??0,'icon'=>'bi-bank','color'=>'primary'],['label'=>'Matched','count'=>$stats['matched']??0,'icon'=>'bi-check-circle','color'=>'success'],['label'=>'Unmatched','count'=>$stats['unmatched']??0,'icon'=>'bi-exclamation-circle','color':'warning'],['label'=>'Bank Balance','count'=>'₹'.number_format($stats['bank_balance']??0,2),'icon'=>'bi-wallet2','color'=>'info']]; @endphp
    @foreach($stats as $stat)<div class="col"><x-kpi-card :title="$stat['label']" :value="$stat['count']" :icon="$stat['icon']" :color="$stat['color']" /></div>@endforeach
</div>
<div class="row g-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between"><h5 class="mb-0 fw-semibold">Bank Statement</h5><span class="badge bg-success-subtle text-success">Matched: {{ $matchedCount ?? 0 }}</span></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light"><tr><th class="px-3 small fw-semibold text-muted">Date</th><th class="px-3 small fw-semibold text-muted">Description</th><th class="px-3 small fw-semibold text-muted text-end">Debit</th><th class="px-3 small fw-semibold text-muted text-end">Credit</th><th class="px-3 small fw-semibold text-muted text-center">Match</th></tr></thead>
                        <tbody>
                            @forelse($bankTransactions ?? [] as $bt)
                            <tr class="{{ $bt->is_matched ? 'table-success bg-success-subtle' : '' }}">
                                <td class="px-3 small">{{ optional($bt->date)->format('d M Y') ?? '' }}</td>
                                <td class="px-3 small">{{ Str::limit($bt->description ?? '', 30) }}</td>
                                <td class="px-3 small text-end">{{ ($bt->debit ?? 0) > 0 ? number_format($bt->debit, 2) : '-' }}</td>
                                <td class="px-3 small text-end">{{ ($bt->credit ?? 0) > 0 ? number_format($bt->credit, 2) : '-' }}</td>
                                <td class="px-3 small text-center"><input type="checkbox" class="form-check-input" {{ $bt->is_matched ? 'checked disabled' : '' }}></td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center py-4 text-muted">No bank transactions</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between"><h5 class="mb-0 fw-semibold">Ledger Entries</h5><span class="badge bg-warning-subtle text-warning">Pending: {{ $pendingCount ?? 0 }}</span></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light"><tr><th class="px-3 small fw-semibold text-muted">Date</th><th class="px-3 small fw-semibold text-muted">Account</th><th class="px-3 small fw-semibold text-muted text-end">Debit</th><th class="px-3 small fw-semibold text-muted text-end">Credit</th><th class="px-3 small fw-semibold text-muted text-center">Match</th></tr></thead>
                        <tbody>
                            @forelse($ledgerEntries ?? [] as $le)
                            <tr class="{{ $le->is_matched ? 'table-success bg-success-subtle' : '' }}">
                                <td class="px-3 small">{{ optional($le->date)->format('d M Y') ?? '' }}</td>
                                <td class="px-3 small">{{ Str::limit($le->ledgerAccount->name ?? '', 25) }}</td>
                                <td class="px-3 small text-end">{{ ($le->debit ?? 0) > 0 ? number_format($le->debit, 2) : '-' }}</td>
                                <td class="px-3 small text-end">{{ ($le->credit ?? 0) > 0 ? number_format($le->credit, 2) : '-' }}</td>
                                <td class="px-3 small text-center"><input type="checkbox" class="form-check-input" {{ $le->is_matched ? 'checked disabled' : '' }}></td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center py-4 text-muted">No unmatched entries</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-center mt-4"><button class="btn btn-primary px-4" id="autoMatchBtn"><i class="bi bi-magic me-1"></i>Auto-Match Selected</button></div>
@endsection
@push('scripts')
<script>$(document).ready(function(){ $('#autoMatchBtn').on('click',function(){ Swal.fire('Auto-Match','Matching selected transactions...','info'); }); });</script>
@endpush