@include('accounting::admin.accounting._styles')

<div class="acc-wrap">
    <div class="acc-header">
        <div class="acc-header-left">
            <div class="acc-header-icon" style="background:linear-gradient(135deg,#0891b2,#0e7490)">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
            </div>
            <div>
                <h1>{{ $recon->account->account_name }}</h1>
                <div class="acc-header-sub">Statement: {{ $recon->statement_date->format('d M Y') }} &bull; {!! $recon->status_badge !!}</div>
            </div>
        </div>
        <div style="display:flex;gap:8px;">
            @if($recon->status === 'open')
            <form method="POST" action="{{ route('admin.accounting.bank-reconciliation.finalise', $recon->id) }}" onsubmit="return confirm('Finalise this reconciliation? This cannot be undone.')">
                @csrf <button class="btn btn-success">Finalise</button>
            </form>
            @endif
            <a href="{{ route('admin.accounting.bank-reconciliation.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left me-1"></i> Back</a>
        </div>
    </div>

    @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif

    {{-- Summary bar --}}
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div class="acc-stat" style="min-width:0;"><div class="acc-stat-icon blue"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
            <div><div class="acc-stat-value" style="font-size:13px;">₹ {{ number_format($recon->statement_balance,2) }}</div><div class="acc-stat-label">Statement</div></div>
        </div>
        <div class="acc-stat" style="min-width:0;"><div class="acc-stat-icon green"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13"/></svg></div>
            <div><div class="acc-stat-value" style="font-size:13px;">₹ {{ number_format($recon->book_balance,2) }}</div><div class="acc-stat-label">Book Balance</div></div>
        </div>
        <div class="acc-stat" style="min-width:0;"><div class="acc-stat-icon {{ abs($recon->difference) < 0.01 ? 'green' : 'red' }}"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
            <div><div class="acc-stat-value" style="font-size:13px;color:{{ abs($recon->difference) < 0.01 ? '#059669' : '#dc2626' }};">₹ {{ number_format(abs($recon->difference),2) }}</div><div class="acc-stat-label">Difference</div></div>
        </div>
        <div class="acc-stat" style="min-width:0;"><div class="acc-stat-icon gray"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div>
            <div><div class="acc-stat-value" style="font-size:13px;" id="cleared-count">{{ $recon->lines->where('is_cleared',true)->count() }}/{{ $recon->lines->count() }}</div><div class="acc-stat-label">Cleared</div></div>
        </div>
    </div>

    {{-- Lines --}}
    <div class="acc-card">
        <div class="acc-card-header"><h3>Transactions to Reconcile</h3>
            @if($recon->status === 'open')
            <span style="font-size:12px;color:var(--text-muted);">Check items that appear on the bank statement</span>
            @endif
        </div>
        <div class="acc-card-body" style="padding:0;">
            <div style="overflow-x:auto;">
                <table style="width:100%;border-collapse:collapse;font-size:13px;">
                    <thead>
                        <tr style="background:var(--body-bg);">
                            <th style="padding:10px 16px;width:44px;">Clear</th>
                            <th style="padding:10px 16px;">Date</th>
                            <th style="padding:10px 16px;">Voucher #</th>
                            <th style="padding:10px 16px;">Type</th>
                            <th style="padding:10px 16px;">Narration</th>
                            <th style="padding:10px 16px;text-align:right;">Debit (₹)</th>
                            <th style="padding:10px 16px;text-align:right;">Credit (₹)</th>
                            <th style="padding:10px 16px;">Cleared Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recon->lines as $line)
                        <tr style="border-top:1px solid var(--card-border);{{ $line->is_cleared ? 'background:rgba(5,150,105,.04);' : '' }}" id="recon-row-{{ $line->id }}">
                            <td style="padding:10px 16px;text-align:center;">
                                @if($recon->status === 'open')
                                <input type="checkbox" class="recon-clear-cb" data-line-id="{{ $line->id }}"
                                       {{ $line->is_cleared ? 'checked' : '' }}
                                       style="width:18px;height:18px;cursor:pointer;">
                                @else
                                <span style="color:{{ $line->is_cleared ? '#059669' : '#dc2626' }};">{{ $line->is_cleared ? '✓' : '✕' }}</span>
                                @endif
                            </td>
                            <td style="padding:10px 16px;white-space:nowrap;">{{ $line->voucherLine->voucher->voucher_date->format('d M Y') }}</td>
                            <td style="padding:10px 16px;">
                                <a href="{{ route('admin.accounting.vouchers.show', $line->voucherLine->voucher->id) }}" style="color:var(--primary);font-weight:600;text-decoration:none;">{{ $line->voucherLine->voucher->voucher_number }}</a>
                            </td>
                            <td style="padding:10px 16px;font-size:11px;color:var(--text-muted);">{{ $line->voucherLine->voucher->type_label }}</td>
                            <td style="padding:10px 16px;color:var(--text-muted);">{{ $line->voucherLine->narration ?: $line->voucherLine->voucher->narration ?: '—' }}</td>
                            <td style="padding:10px 16px;text-align:right;font-weight:600;color:#1d4ed8;">{{ $line->voucherLine->debit > 0 ? '₹ '.number_format($line->voucherLine->debit,2) : '' }}</td>
                            <td style="padding:10px 16px;text-align:right;font-weight:600;color:#059669;">{{ $line->voucherLine->credit > 0 ? '₹ '.number_format($line->voucherLine->credit,2) : '' }}</td>
                            <td style="padding:10px 16px;font-size:12px;color:var(--text-muted);" id="cleared-date-{{ $line->id }}">{{ $line->cleared_date ? $line->cleared_date->format('d M Y') : '—' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="8" style="padding:24px;text-align:center;color:var(--text-muted);">No transactions found for this bank account up to the statement date.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@if($recon->status === 'open')
<script>
document.querySelectorAll('.recon-clear-cb').forEach(cb => {
    cb.addEventListener('change', function() {
        const lineId = this.dataset.lineId;
        const cleared = this.checked;
        fetch('{{ route("admin.accounting.bank-reconciliation.mark-line", $recon->id) }}', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
            body: JSON.stringify({line_id: lineId, is_cleared: cleared})
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const row = document.getElementById('recon-row-' + lineId);
                row.style.background = cleared ? 'rgba(5,150,105,.04)' : '';
                const dateEl = document.getElementById('cleared-date-' + lineId);
                if (dateEl) dateEl.textContent = cleared ? new Date().toLocaleDateString('en-IN',{day:'2-digit',month:'short',year:'numeric'}) : '—';
                // Update counter
                const total = document.querySelectorAll('.recon-clear-cb').length;
                const done  = document.querySelectorAll('.recon-clear-cb:checked').length;
                document.getElementById('cleared-count').textContent = done + '/' + total;
            }
        })
        .catch(() => { this.checked = !cleared; alert('Failed to update. Please try again.'); });
    });
});
</script>
@endif