@extends('layouts.app')

@section('content')
<style>
.btn-group .btn {
    margin-right: 2px;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;

}
.btn-group .btn:last-child {
    margin-right: 0;
}
.modal-footer .btn {
    margin-left: 5px;
}
.modal-footer .btn:first-child {
    margin-left: 0;
}
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4><i class="fas fa-money-bill-wave me-2"></i>Loan Disbursements</h4>
                        <div>
                            <button class="btn btn-light btn-sm" onclick="window.print()">
                                <i class="fas fa-print me-1"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Business Loans Section -->
                    @if($businessLoans->count() > 0)
                    <div class="mb-4">
                        <h5 class="text-primary">
                            <i class="fas fa-building me-2"></i>Business Loans
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Loan ID</th>
                                        <th>Member</th>
                                        <th>Product</th>
                                        <th>Amount</th>
                                        <th>Installments</th>
                                        <th>Branch</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($businessLoans as $loan)
                                    <tr>
                                        <td><strong>{{ $loan->id }}</strong></td>
                                        <td>
                                            <strong>{{ $loan->member->full_name ?? $loan->member->name }}</strong><br>
                                            <small class="text-muted">{{ $loan->member->nic }}</small>
                                        </td>
                                        <td>{{ $loan->loanProduct->name }}</td>
                                        <td class="text-end">Rs. {{ number_format($loan->loan_amount, 2) }}</td>
                                        <td class="text-center">{{ $loan->installments }}</td>
                                        <td>{{ $loan->branch->branch_name ?? $loan->branch->name }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('loan-disbursements.agreement', ['business_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-info" 
                                                   title="Print Agreement">
                                                    <i class="fas fa-file-contract me-1"></i> Agreement
                                                </a>
                                                <a href="{{ route('loan-disbursements.guarantor-bond', ['business_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Guarantor Bond">
                                                    <i class="fas fa-user-shield me-1"></i> Guarantor Bond
                                                </a>
                                                <a href="{{ route('loan-disbursements.promisory', ['business_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Promisory Note">
                                                    <i class="fas fa-user-shield me-1"></i> Promisory Note
                                                </a>
                                                <button class="btn btn-sm btn-success" 
                                                        onclick="disburseLoan('business_loan', '{{ $loan->id }}', '{{ $loan->member->full_name ?? $loan->member->name }}', '{{ $loan->loan_amount }}')"
                                                        title="Disburse Loan">
                                                    <i class="fas fa-check me-1"></i> Disburse
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    <!-- Lease Loans Section -->
                    @if($leaseLoans->count() > 0)
                    <div class="mb-4">
                        <h5 class="text-success">
                            <i class="fas fa-car me-2"></i>Lease Loans
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Loan ID</th>
                                        <th>Member</th>
                                        <th>Product</th>
                                        <th>Amount</th>
                                        <th>Installments</th>
                                        <th>Branch</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($leaseLoans as $loan)
                                    <tr>
                                        <td><strong>{{ $loan->id }}</strong></td>
                                        <td>
                                            <strong>{{ $loan->member->full_name ?? $loan->member->name }}</strong><br>
                                            <small class="text-muted">{{ $loan->member->nic }}</small>
                                        </td>
                                        <td>{{ $loan->loanProduct->name }}</td>
                                        <td class="text-end">Rs. {{ number_format($loan->loan_amount, 2) }}</td>
                                        <td class="text-center">{{ $loan->installments }}</td>
                                        <td>{{ $loan->branch->branch_name ?? $loan->branch->name }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('loan-disbursements.agreement', ['lease_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-info" 
                                                   title="Print Agreement">
                                                    <i class="fas fa-file-contract me-1"></i> Agreement
                                                </a>
                                                <a href="{{ route('loan-disbursements.guarantor-bond', ['lease_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Guarantor Bond">
                                                    <i class="fas fa-user-shield me-1"></i> Guarantor Bond
                                                </a>
                                                <a href="{{ route('loan-disbursements.promisory', ['lease_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Promisory Note">
                                                    <i class="fas fa-user-shield me-1"></i> Promisory Note
                                                </a>
                                                <button class="btn btn-sm btn-success" 
                                                        onclick="disburseLoan('lease_loan', '{{ $loan->id }}', '{{ $loan->member->full_name ?? $loan->member->name }}', '{{ $loan->loan_amount }}')"
                                                        title="Disburse Loan">
                                                    <i class="fas fa-check me-1"></i> Disburse
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    <!-- Micro Loans Section -->
                    @if($microLoans->count() > 0)
                    <div class="mb-4">
                        <h5 class="text-warning">
                            <i class="fas fa-hand-holding-usd me-2"></i>Micro Loans
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Loan ID</th>
                                        <th>Member</th>
                                        <th>Product</th>
                                        <th>Amount</th>
                                        <th>Installments</th>
                                        <th>Branch</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($microLoans as $loan)
                                    <tr>
                                        <td><strong>{{ $loan->id }}</strong></td>
                                        <td>
                                            <strong>{{ $loan->member->full_name ?? $loan->member->name }}</strong><br>
                                            <small class="text-muted">{{ $loan->member->nic }}</small>
                                        </td>
                                        <td>{{ $loan->loanProduct->name }}</td>
                                        <td class="text-end">Rs. {{ number_format($loan->loan_amount, 2) }}</td>
                                        <td class="text-center">{{ $loan->installments }}</td>
                                        <td>{{ $loan->branch->branch_name ?? $loan->branch->name }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('loan-disbursements.agreement', ['micro_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-info" 
                                                   title="Print Agreement">
                                                    <i class="fas fa-file-contract me-1"></i> Agreement
                                                </a>
                                                <a href="{{ route('loan-disbursements.guarantor-bond', ['micro_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Guarantor Bond">
                                                    <i class="fas fa-user-shield me-1"></i> Guarantor Bond
                                                </a>
                                                <a href="{{ route('loan-disbursements.promisory', ['micro_loan', $loan->id]) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-warning" 
                                                   title="Print Promisory Note">
                                                    <i class="fas fa-user-shield me-1"></i> Promisory Note
                                                </a>
                                                <button class="btn btn-sm btn-success" 
                                                        onclick="disburseLoan('micro_loan', '{{ $loan->id }}', '{{ $loan->member->full_name ?? $loan->member->name }}', '{{ $loan->loan_amount }}')"
                                                        title="Disburse Loan">
                                                    <i class="fas fa-check me-1"></i> Disburse
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                    @if($businessLoans->count() == 0 && $leaseLoans->count() == 0 && $microLoans->count() == 0)
                    <div class="text-center py-5">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No approved loans pending disbursement</h5>
                        <p class="text-muted">All approved loans have been disbursed or are in other statuses.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Disbursement Modal -->
<div class="modal fade" id="disbursementModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-money-bill-wave me-2"></i>Loan Disbursement
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="disbursementForm">
                <div class="modal-body">
                    <!-- Agreement Reminder -->
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Important:</strong> Please ensure the loan agreement has been printed and signed before proceeding with disbursement.
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Member Name</label>
                                <input type="text" class="form-control" id="memberName" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Loan Amount</label>
                                <input type="text" class="form-control" id="loanAmount" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Disbursement Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="disburse_date" required value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Disbursement Method <span class="text-danger">*</span></label>
                                <select class="form-control" name="disburse_method" required>
                                    <option value="">Select Method</option>
                                    <option value="cash">Cash</option>
                                    <option value="cheque">Cheque</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="chequeDetails" style="display: none;">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Cheque Number</label>
                                <input type="text" class="form-control" name="cheque_no">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bank Name</label>
                                <input type="text" class="form-control" name="bank_name">
                            </div>
                        </div>
                    </div>
                    <div class="row" id="bankDetails" style="display: none;">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bank Name</label>
                                <input type="text" class="form-control" name="bank_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Account Number</label>
                                <input type="text" class="form-control" name="account_number">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="loan_id" id="loanId">
                    <input type="hidden" name="loan_type" id="loanType">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" id="printAgreementBtn" style="display: none;">
                        <i class="fas fa-file-contract me-1"></i> Print Agreement
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-1"></i> Disburse Loan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function disburseLoan(loanType, loanId, memberName, loanAmount) {
    document.getElementById('loanType').value = loanType;
    document.getElementById('loanId').value = loanId;
    document.getElementById('memberName').value = memberName;
    document.getElementById('loanAmount').value = 'Rs. ' + parseFloat(loanAmount).toLocaleString('en-US', {minimumFractionDigits: 2});
    
    // Show the agreement print button and set up its functionality
    const printAgreementBtn = document.getElementById('printAgreementBtn');
    printAgreementBtn.style.display = 'inline-block';
    printAgreementBtn.onclick = function() {
        const agreementUrl = '{{ route("loan-disbursements.agreement", [":loanType", ":loanId"]) }}'
            .replace(':loanType', loanType)
            .replace(':loanId', loanId);
        window.open(agreementUrl, '_blank');
    };
    
    const modal = new bootstrap.Modal(document.getElementById('disbursementModal'));
    modal.show();
}

// Show/hide additional fields based on disbursement method
document.querySelector('select[name="disburse_method"]').addEventListener('change', function() {
    const chequeDetails = document.getElementById('chequeDetails');
    const bankDetails = document.getElementById('bankDetails');
    
    chequeDetails.style.display = 'none';
    bankDetails.style.display = 'none';
    
    if (this.value === 'cheque') {
        chequeDetails.style.display = 'block';
    } else if (this.value === 'bank_transfer') {
        bankDetails.style.display = 'block';
    }
});

// Handle form submission
document.getElementById('disbursementForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Confirm that agreement has been printed
    const hasPrintedAgreement = confirm('Have you printed and signed the loan agreement? Click OK to proceed with disbursement.');
    if (!hasPrintedAgreement) {
        alert('Please print and sign the loan agreement before proceeding with disbursement.');
        return;
    }
    
    const formData = new FormData(this);
    
    fetch('{{ route("loan-disbursements.disburse") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(Object.fromEntries(formData))
    })
    .then(response => response.json())
    .then(data => {
        console.log('Disbursement response:', data); // Debug log
        
        if (data.success) {
            // Show success message
            alert('Loan disbursed successfully!');
            
            // Print voucher - use a more robust URL generation
            if (data.journal_id) {
                const voucherUrl = '{{ url("loan-disbursements/voucher") }}/' + data.journal_id;
                console.log('Opening voucher URL:', voucherUrl); // Debug log
                window.open(voucherUrl, '_blank');
            } else {
                console.warn('No journal ID received for voucher printing');
                alert('Warning: Voucher could not be printed due to missing journal ID');
            }
            
            // Close modal and reload page
            bootstrap.Modal.getInstance(document.getElementById('disbursementModal')).hide();
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while processing the disbursement.');
    });
});
</script>
@endsection