@extends('layouts.app')

@section('title', 'Bulk Micro Loan Payment')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header d-flex justify-content-between align-items-center">
                <h1 class="mb-0"><i class="fas fa-users me-2"></i>Bulk Micro Loan Payment</h1>
                <a href="{{ route('cashier.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Cashier
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-times-circle me-2"></i>
            <ul class="mb-0">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card mb-4">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-building me-2"></i>Select CBO Center</h5>
        </div>
        <div class="card-body">
            <form id="cboSelectForm">
                <div class="row align-items-end">
                    <div class="col-md-6">
                        <label for="cbo_id" class="form-label">CBO Center</label>
                        <select name="cbo_id" id="cbo_id" class="form-control" required>
                            <option value="">-- Select CBO --</option>
                            @foreach($cbos as $cbo)
                                <option value="{{ $cbo->cbo_id }}">{{ $cbo->cbo_name }} ({{ $cbo->cbo_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="loadMicroLoansBtn" class="btn btn-success w-100">
                            <i class="fas fa-search me-2"></i>Load Micro Loans
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <form id="bulkPaymentForm" action="{{ route('cashier.bulk-micro-loan-payment.process') }}" method="POST">
        @csrf
        <input type="hidden" name="cbo_id" id="bulk_cbo_id">
        
        <div id="microLoansTableContainer"></div>
        
        <div class="mt-4 d-none" id="bulkPaymentActions">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Payment Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Payment Method</label>
                            <select name="payment_method" class="form-control" required>
                                <option value="cash">Cash</option>
                                <option value="cheque">Cheque</option>
                                <option value="bank_transfer">Bank Transfer</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Reference Number</label>
                            <input type="text" name="reference_number" class="form-control" placeholder="Cheque/Transfer Ref.">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2" placeholder="Optional notes for all payments"></textarea>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-lg btn-success">
                                <i class="fas fa-check me-2"></i>Process All Payments
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById('loadMicroLoansBtn').addEventListener('click', function() {
        let cboId = document.getElementById('cbo_id').value;
        if (!cboId) {
            alert('Please select a CBO center.');
            return;
        }
        document.getElementById('bulk_cbo_id').value = cboId;
        fetchMicroLoans(cboId);
    });

    function fetchMicroLoans(cboId) {
        fetch("{{ route('cashier.get-micro-loans-by-cbo') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ cbo_id: cboId })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Debug info:', data.debug); // Log debug info to console
            renderMicroLoansTable(data.loans || []);
        })
        .catch(() => alert('Failed to load micro loans.'));
    }

    function renderMicroLoansTable(loans) {
        console.log('renderMicroLoansTable called with:', loans);
        console.log('loans.length:', loans.length);
        let html = '';
        if (!loans.length) {
            html = '<div class="alert alert-warning">No pending micro loans found for this CBO.</div>';
            document.getElementById('bulkPaymentActions').classList.add('d-none');
        } else {
            html += `<div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>Pending Micro Loans</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>Member</th>
                                    <th>Group</th>
                                    <th>Loan ID</th>
                                    <th>Due Amount</th>
                                    <th>Installments</th>
                                    <th>Pay Amount</th>
                                </tr>
                            </thead>
                            <tbody>`;
            loans.forEach(loan => {
                html += `<tr>
                    <td>${loan.member.full_name} <br><small class="text-muted">${loan.member.nic}</small></td>
                    <td>${loan.member.group ? loan.member.group.group_name : '-'}</td>
                    <td>${loan.id}</td>
                    <td><span class="text-danger fw-bold">Rs. ${parseFloat(loan.total_due).toLocaleString(undefined, {minimumFractionDigits:2})}</span></td>
                    <td>${loan.pending_installments}</td>
                    <td>
                        <input type="number" name="payments[${loan.id}][amount]" class="form-control" min="0.01" max="${loan.total_due}" step="0.01" placeholder="0.00">
                        <input type="hidden" name="payments[${loan.id}][loan_id]" value="${loan.id}">
                    </td>
                </tr>`;
            });
            html += `</tbody></table></div></div></div>`;
            document.getElementById('bulkPaymentActions').classList.remove('d-none');
        }
        document.getElementById('microLoansTableContainer').innerHTML = html;
    }
</script>

<style>
.card { border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.card-header { border-bottom: none; }
.btn { border-radius: 8px; }
.table th { border-top: none; }
</style>
@endsection