@extends('layouts.app')

@section('content')
<div class="container-fluid py-0" style="height: calc(100vh - 70px);">
    <div class="row h-100 g-0">
        <!-- Left Sidebar: Transactions List -->
        <div class="col-md-4 border-end bg-white h-100 d-flex flex-column">
            <div class="p-4 border-bottom">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold mb-0">Reconcile Account</h5>
                    <a href="{{ route('banking.dashboard') }}" class="btn btn-sm btn-light border px-3">Exit</a>
                </div>
                <div class="card bg-light border-0">
                    <div class="card-body p-3">
                        <div class="small text-muted mb-1">{{ $bankAccount->name }}</div>
                        <div class="h4 fw-bold mb-0">{{ formatCurrency($bankAccount->current_balance) }}</div>
                    </div>
                </div>
            </div>

            <div class="flex-grow-1 overflow-auto">
                <div class="list-group list-group-flush">
                    @forelse($transactions as $tx)
                    <button type="button" class="list-group-item list-group-item-action p-4 border-bottom transaction-item" data-tx-id="{{ $tx->id }}" data-amount="{{ $tx->amount }}" data-type="{{ $tx->type }}">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <span class="small fw-bold text-muted">{{ date('M d, Y', strtotime($tx->date)) }}</span>
                            <span class="fw-bold fs-5 {{ $tx->type === 'credit' ? 'text-success' : 'text-danger' }}">
                                {{ $tx->type === 'credit' ? '+' : '-' }}{{ formatCurrency($tx->amount) }}
                            </span>
                        </div>
                        <div class="text-dark fw-bold mb-1">{{ $tx->description }}</div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge {{ $tx->status === 'cleared' ? 'bg-success' : 'bg-warning' }} rounded-pill small bg-opacity-10 text-{{ $tx->status === 'cleared' ? 'success' : 'warning' }} border border-{{ $tx->status === 'cleared' ? 'success' : 'warning' }}">
                                {{ ucfirst($tx->status) }}
                            </span>
                            <i class="fas fa-chevron-right text-muted small"></i>
                        </div>
                    </button>
                    @empty
                    <div class="p-5 text-center text-muted">
                        <i class="fas fa-check-circle fa-3x mb-3 text-light"></i>
                        <p>All transactions reconciled!</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Right Content: Matching Area -->
        <div class="col-md-8 bg-light h-100 overflow-auto p-5" id="matching-pane">
            <div class="text-center py-5" id="empty-state">
                <div class="mb-4">
                    <i class="fas fa-search fa-4x text-muted opacity-25"></i>
                </div>
                <h4 class="text-muted">Select a transaction to reconcile</h4>
                <p class="text-muted small">We'll help you find matching invoices or categorize it manually.</p>
            </div>

            <!-- Matching Details (Hidden by default) -->
            <div id="matching-details" class="d-none">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="fw-bold mb-0">Reconciliation Workspace</h4>
                    <div class="badge bg-primary px-3 py-2 rounded-pill shadow-sm">Searching for matches...</div>
                </div>

                <div class="row g-4">
                    <div class="col-md-7">
                        <div class="card border-0 shadow-sm rounded-4 mb-4">
                            <div class="card-header bg-white py-3 border-0">
                                <h6 class="fw-bold mb-0">Potential Matches</h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush" id="matches-list">
                                    <div class="p-4 text-center text-muted">No exact matches found for this amount.</div>
                                </div>
                            </div>
                            <div class="card-footer bg-white py-3 border-0 text-center">
                                <button class="btn btn-sm btn-link text-primary fw-bold text-decoration-none">Search all records</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-header bg-white py-3 border-0">
                                <h6 class="fw-bold mb-0">Categorize Manually</h6>
                            </div>
                            <div class="card-body p-4">
                                <form id="categorize-form">
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold">Select Category</label>
                                        <select class="form-select border-0 bg-light">
                                            <option value="">Choose an account...</option>
                                            <option value="sales">Sales Income</option>
                                            <option value="office">Office Supplies</option>
                                            <option value="rent">Rent Expense</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold">Tax Rate</label>
                                        <select class="form-select border-0 bg-light">
                                            <option value="0">Zero Rated (0%)</option>
                                            <option value="18">GST (18%)</option>
                                        </select>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label small fw-bold">Description</label>
                                        <textarea class="form-select border-0 bg-light" rows="2"></textarea>
                                    </div>
                                    <button type="button" class="btn btn-success w-100 py-3 fw-bold rounded-3 shadow-sm" id="btn-reconcile">
                                        Reconcile & Clear
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.transaction-item').forEach(item => {
        item.addEventListener('click', function() {
            // UI state updates
            document.querySelectorAll('.transaction-item').forEach(i => i.classList.remove('active', 'border-primary', 'bg-primary', 'bg-opacity-10'));
            this.classList.add('active', 'border-primary', 'bg-primary', 'bg-opacity-10');
            
            document.getElementById('empty-state').classList.add('d-none');
            document.getElementById('matching-details').classList.remove('d-none');
            
            loadMatches(this.dataset.txId);
        });
    });

    function loadMatches(txId) {
        const list = document.getElementById('matches-list');
        list.innerHTML = '<div class="p-4 text-center text-muted"><div class="spinner-border spinner-border-sm text-primary me-2"></div>Searching...</div>';
        
        fetch(`/banking/transactions/${txId}/matches`)
            .then(res => res.json())
            .then(data => {
                if (data.matches.length > 0) {
                    list.innerHTML = data.matches.map(m => `
                        <div class="list-group-item p-4 border-0 hover-bg-light cursor-pointer">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-bold">${m.number}</span>
                                <span class="fw-bold">${m.symbol}${m.amount}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="small text-muted">${m.contact}</span>
                            </div>
                            <button onclick="matchOne(${txId}, ${m.id}, '${m.type}')" class="btn btn-sm btn-primary mt-3 w-100 rounded-3">Match & Close</button>
                        </div>
                    `).join('');
                } else {
                    list.innerHTML = '<div class="p-4 text-center text-muted">No exact matches found for this amount. <br><button class="btn btn-sm btn-link mt-2">Create new match</button></div>';
                }
            });
    }

    function matchOne(txId, recordId, type) {
        if(!confirm('Confirm match?')) return;
        
        fetch(`/banking/transactions/${txId}/match`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ record_id: recordId, record_type: type })
        }).then(res => res.json()).then(data => {
            if(data.success) {
                document.querySelector(`.transaction-item[data-tx-id="${txId}"]`).remove();
                document.getElementById('empty-state').classList.remove('d-none');
                document.getElementById('matching-details').classList.add('d-none');
                alert('Success!');
            }
        });
    }

    document.getElementById('btn-reconcile').addEventListener('click', function() {
        const activeItem = document.querySelector('.transaction-item.active');
        if (!activeItem) return;
        
        const txId = activeItem.dataset.txId;
        const category = document.getElementById('category_select').value;
        
        if(!category) { alert('Please select a category'); return; }

        fetch(`/banking/transactions/${txId}/categorize`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ category: category, tax_rate: 0 })
        }).then(res => res.json()).then(data => {
            if(data.success) {
                activeItem.remove();
                document.getElementById('empty-state').classList.remove('d-none');
                document.getElementById('matching-details').classList.add('d-none');
                alert('Transaction reconciled successfully!');
            }
        });
    });
</script>

<style>
    .hover-bg-light:hover { background-color: #f8f9fa; }
    .cursor-pointer { cursor: pointer; }
    .transaction-item.active {
        border-right: 4px solid #0d6efd !important;
        position: relative;
    }
    .transaction-item.active::after {
        content: "";
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #fff;
        z-index: 10;
    }
</style>
@endsection