@extends('layouts.app')

@section('title', 'Loan Approvals')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-5">
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <h2><i class="fas fa-file-signature me-2"></i> Pending Loan Approvals</h2>
    
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            @if ($pendingLoans->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Member</th>
                                <th>Loan Product</th>
                                <th>Amount</th>
                                <th>Installments</th>
                                <th>Applied On</th>
                                <th>Credit Officer</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($pendingLoans as $loan)
                                <tr>
                                    <td>{{ $loan->loan_id }}</td>
                                    <td>{{ $loan->member->full_name }}</td>
                                    <td>{{ $loan->loanProduct->name }}</td>
                                    <td>{{ number_format($loan->loan_amount, 2) }}</td>
                                    <td>{{ $loan->installments }}</td>
                                    <td>{{ $loan->created_at->format('Y-m-d') }}</td>
                                    <td>{{ $loan->creditOfficer->name }}</td>
                                    <td>
                                        <div class="d-flex gap-2">
                                            <a href="{{ route('loan-approvals.show', $loan->id) }}" 
                                               class="btn btn-sm btn-info" 
                                               data-bs-toggle="modal" 
                                               data-bs-target="#loanDetailsModal"
                                               data-loan-id="{{ $loan->id }}">
                                                <i class="fas fa-eye"></i> View
                                            </a>
                                            
                                            <form method="POST" action="{{ route('loan-approvals.approve', $loan->id) }}" class="d-inline">
                                                @csrf
                                                <div class="input-group input-group-sm">
                                                    <input type="date" name="first_installment_date" 
                                                           class="form-control form-control-sm" 
                                                           value="{{ now()->addMonth()->format('Y-m-d') }}" 
                                                           required>
                                                    <button type="submit" class="btn btn-sm btn-success">
                                                        <i class="fas fa-check"></i> Approve
                                                    </button>
                                                </div>
                                            </form>
                                            
                                            <button type="button" class="btn btn-sm btn-danger reject-btn"
                                                    data-loan-id="{{ $loan->id }}"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#rejectModal">
                                                <i class="fas fa-times"></i> Reject
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                {{ $pendingLoans->links() }}
            @else
                <div class="alert alert-info">No pending loan applications found.</div>
            @endif
        </div>
    </div>
</div>

<!-- Loan Details Modal -->
<div class="modal fade" id="loanDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Loan Application Details</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="loanDetailsContent">
                <!-- Content loaded via AJAX -->
                <div class="text-center my-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a id="printAgreementBtn" href="#" class="btn btn-primary" target="_blank">
                    <i class="fas fa-print me-1"></i> Print Agreement
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Reject Loan Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Reject Loan Application</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="rejectForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="loan_id" id="rejectLoanId">
                    <div class="mb-3">
                        <label for="rejectReason" class="form-label">Reason for Rejection</label>
                        <textarea class="form-control" id="rejectReason" name="reject_reason" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Confirm Rejection</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Load loan details in modal
    $('#loanDetailsModal').on('show.bs.modal', function(event) {
        const button = $(event.relatedTarget);
        const loanId = button.data('loan-id');
        
        // Update print button href with current loan ID
        $('#printAgreementBtn').attr('href', '/loan-agreement/' + loanId);
        
        $.ajax({
            url: '/loan-approvals/' + loanId,
            method: 'GET',
            success: function(response) {
                $('#loanDetailsContent').html(response);
            },
            error: function(xhr, status, error) {
                $('#loanDetailsContent').html(`
                    <div class="alert alert-danger">
                        Error loading loan details: ${error}
                    </div>
                `);
            }
        });
    });

    // Set loan ID for rejection
    $('.reject-btn').click(function() {
        const loanId = $(this).data('loan-id');
        $('#rejectLoanId').val(loanId);
        $('#rejectForm').attr('action', '/loan-approvals/' + loanId + '/reject');
    });
});
</script>
@endsection