{% extends 'base.html' %}
{% load static %}
{% load custom_filters %}

{% block page_title %}Loan Management{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLoanModal">
        <i class="fas fa-plus me-1"></i> Add Loan
    </button>
    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addPaymentModal">
        <i class="fas fa-hand-holding-usd me-1"></i> Add Payment
    </button>
    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <!-- Summary Stats -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-primary h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Active Loans
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ summary.total_active }}</div>
                        <div class="text-muted">{{ summary.total_amount_active|floatformat:2 }} KSh total</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-primary text-white">
                            <i class="fas fa-hand-holding-usd"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-success h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Paid Loans
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ summary.total_paid }}</div>
                        <div class="text-muted">{{ summary.total_amount_paid|floatformat:2 }} KSh total</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-success text-white">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-warning h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Overdue Loans
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ overdue_count|default:"0" }}</div>
                        <div class="text-muted">Require attention</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-warning text-white">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-danger h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-danger text-uppercase mb-1">
                            Defaulted
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ summary.total_defaulted }}</div>
                        <div class="text-muted">Unpaid loans</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-danger text-white">
                            <i class="fas fa-times-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Loan Filters</h5>
                <div class="btn-group">
                    <a href="{% url 'loans_dashboard' %}" class="btn btn-sm btn-outline-secondary {% if not request.GET.status %}active{% endif %}">
                        All
                    </a>
                    <a href="{% url 'loans_dashboard' %}?status=active" class="btn btn-sm btn-outline-primary {% if request.GET.status == 'active' %}active{% endif %}">
                        Active
                    </a>
                    <a href="{% url 'loans_dashboard' %}?status=paid" class="btn btn-sm btn-outline-success {% if request.GET.status == 'paid' %}active{% endif %}">
                        Paid
                    </a>
                    <a href="{% url 'loans_dashboard' %}?status=defaulted" class="btn btn-sm btn-outline-danger {% if request.GET.status == 'defaulted' %}active{% endif %}">
                        Defaulted
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Loans Table -->
    <div class="col-lg-8 mb-4">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-list me-2"></i>All Loans</h5>
                <span class="badge bg-primary">{{ loans.count }} loans</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover data-table">
                        <thead class="table-light">
                            <tr>
                                <th>Borrower</th>
                                <th>Amount</th>
                                <th>Interest</th>
                                <th>Total Due</th>
                                <th>Issued</th>
                                <th>Due Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in loans %}
                            <tr class="{% if loan.is_overdue %}table-warning{% endif %}">
                                <td>
                                    <div>
                                        <strong>{{ loan.borrower_name }}</strong>
                                        {% if loan.borrower_phone %}
                                        <small class="text-muted d-block">{{ loan.borrower_phone }}</small>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <strong>KSh {{ loan.amount|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ loan.interest_rate }}%</span>
                                </td>
                                <td>
                                    <strong>KSh {{ loan.total_due|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    {{ loan.issued_date|date:"M d, Y" }}
                                </td>
                                <td>
                                    <div>
                                        {{ loan.due_date|date:"M d, Y" }}
                                        {% if loan.days_remaining > 0 %}
                                        <small class="text-success d-block">{{ loan.days_remaining }} days left</small>
                                        {% elif loan.is_overdue %}
                                        <small class="text-danger d-block">{{ loan.days_remaining|abs }} days overdue</small>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    {% if loan.status == 'active' %}
                                        {% if loan.is_overdue %}
                                        <span class="badge bg-danger">Overdue</span>
                                        {% else %}
                                        <span class="badge bg-primary">Active</span>
                                        {% endif %}
                                    {% elif loan.status == 'paid' %}
                                    <span class="badge bg-success">Paid</span>
                                    {% elif loan.status == 'defaulted' %}
                                    <span class="badge bg-danger">Defaulted</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary btn-action" 
                                                onclick="viewLoanDetails({{ loan.id }})"
                                                title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-success btn-action" 
                                                onclick="addPaymentToLoan({{ loan.id }}, '{{ loan.borrower_name|escapejs }}', {{ loan.total_due }})"
                                                title="Add Payment">
                                            <i class="fas fa-money-bill-wave"></i>
                                        </button>
                                        <button class="btn btn-outline-warning btn-action" 
                                                onclick="editLoan({{ loan.id }})"
                                                title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-action" 
                                                onclick="deleteLoan({{ loan.id }}, '{{ loan.borrower_name|escapejs }}')"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <i class="fas fa-hand-holding-usd fa-3x text-muted mb-3"></i>
                                    <h5>No loans found</h5>
                                    <p class="text-muted">Add your first loan using the "Add Loan" button.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Loan Statistics -->
    <div class="col-lg-4 mb-4">
        <!-- Overdue Loans -->
        <div class="card shadow mb-4">
            <div class="card-header bg-danger text-white">
                <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Overdue Loans</h5>
            </div>
            <div class="card-body">
                {% if overdue_loans %}
                <div class="list-group list-group-flush">
                    {% for loan in overdue_loans|slice:":5" %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ loan.borrower_name }}</h6>
                                <small class="text-muted">Due: {{ loan.due_date|date:"M d, Y" }}</small>
                            </div>
                            <div class="text-end">
                                <strong>KSh {{ loan.total_due|floatformat:2 }}</strong>
                                <div class="text-danger small">{{ loan.days_remaining }} days overdue</div>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-outline-danger w-100 mt-2" 
                                onclick="addPaymentToLoan({{ loan.id }}, '{{ loan.borrower_name|escapejs }}', {{ loan.total_due }})">
                            <i class="fas fa-money-bill-wave me-1"></i> Add Payment
                        </button>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center mb-0">No overdue loans</p>
                {% endif %}
            </div>
        </div>
        
        <!-- Recent Payments -->
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-history me-2"></i>Recent Payments</h5>
            </div>
            <div class="card-body">
                {% if recent_payments %}
                <div class="list-group list-group-flush">
                    {% for payment in recent_payments|slice:":5" %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ payment.loan.borrower_name }}</h6>
                                <small class="text-muted">{{ payment.payment_date|date:"M d, H:i" }}</small>
                            </div>
                            <div class="text-end">
                                <strong class="text-success">KSh {{ payment.amount|floatformat:2 }}</strong>
                                <div class="small">{{ payment.payment_method }}</div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center mb-0">No recent payments</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Add Loan Modal -->
<div class="modal fade" id="addLoanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Add New Loan
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Error Container -->
                <div id="loanFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div class="mb-3">
                    <label for="borrowerName" class="form-label">Borrower Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="borrowerName" required>
                </div>
                
                <div class="mb-3">
                    <label for="borrowerPhone" class="form-label">Phone Number</label>
                    <input type="text" class="form-control" id="borrowerPhone" placeholder="e.g., 0712345678">
                </div>
                
                <div class="mb-3">
                    <label for="loanAmount" class="form-label">Loan Amount (KSh) <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">KSh</span>
                        <input type="number" step="0.01" min="0" class="form-control" id="loanAmount" required>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="interestRate" class="form-label">Interest Rate (%)</label>
                    <div class="input-group">
                        <input type="number" step="0.01" min="0" max="100" class="form-control" id="interestRate" value="0">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="dueDate" class="form-label">Due Date <span class="text-danger">*</span></label>
                    <input type="date" class="form-control" id="dueDate" required>
                </div>
                
                <div class="mb-3">
                    <label for="loanPurpose" class="form-label">Purpose (Optional)</label>
                    <textarea class="form-control" id="loanPurpose" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveLoanBtn" onclick="saveLoan()">
                    <i class="fas fa-save me-1"></i> Save Loan
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add Payment Modal -->
<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <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>Add Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Error Container -->
                <div id="paymentFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div class="mb-3">
                    <label for="paymentLoanSelect" class="form-label">Select Loan <span class="text-danger">*</span></label>
                    <select class="form-select" id="paymentLoanSelect" required>
                        <option value="">Select loan...</option>
                        {% for loan in active_loans %}
                        <option value="{{ loan.id }}">
                            {{ loan.borrower_name }} - KSh {{ loan.total_due|floatformat:2 }} due
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div id="loanInfo" class="mb-3 p-3 bg-light rounded d-none">
                    <!-- Loan info will be loaded here -->
                </div>
                
                <div class="mb-3">
                    <label for="paymentAmount" class="form-label">Payment Amount (KSh) <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">KSh</span>
                        <input type="number" step="0.01" min="0" class="form-control" id="paymentAmount" required>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="paymentMethod" class="form-label">Payment Method <span class="text-danger">*</span></label>
                    <select class="form-select" id="paymentMethod" required>
                        <option value="cash">Cash</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="bank">Bank Transfer</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="paymentNotes" class="form-label">Notes (Optional)</label>
                    <textarea class="form-control" id="paymentNotes" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="savePaymentBtn" onclick="savePayment()">
                    <i class="fas fa-check me-1"></i> Record Payment
                </button>
            </div>
        </div>
    </div>
</div>

<!-- View Loan Details Modal -->
<div class="modal fade" id="viewLoanModal" 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">
                    <i class="fas fa-eye me-2"></i>Loan Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="loanDetailsContent">
                    <!-- Loan details will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="printLoanStatement()">
                    <i class="fas fa-print me-1"></i> Print Statement
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteLoanModal" 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">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteLoanMessage">Are you sure you want to delete this loan?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Warning:</strong> Deleting a loan will also delete all payment records.
                    This action cannot be undone.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmLoanDeleteBtn">
                    <i class="fas fa-trash me-1"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .stat-card {
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .btn-action {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.2rem;
    }
    .table-warning {
        background-color: #fff3cd !important;
    }
    .loading-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
    // CSRF Token setup
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    
    // Helper function to show notifications
    function showNotification(message, type = 'success', duration = 5000) {
        const alertClass = {
            'success': 'alert-success',
            'danger': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div id="${alertId}" class="alert ${alertClass} alert-dismissible fade show" role="alert" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                ${message}
                <button type="button" class="btn-close" onclick="$('#${alertId}').alert('close')"></button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        setTimeout(function() {
            $(`#${alertId}`).alert('close');
        }, duration);
    }
    
    // Initialize date pickers
    $(document).ready(function() {
        // Set default due date to 30 days from now
        const today = new Date();
        const dueDate = new Date();
        dueDate.setDate(today.getDate() + 30);
        $('#dueDate').val(dueDate.toISOString().split('T')[0]);
        
        // Initialize DataTables
        $('.data-table').DataTable({
            pageLength: 25,
            responsive: true,
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search loans...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            columnDefs: [
                { orderable: false, targets: -1 } // Make actions column not sortable
            ]
        });
        
        // Loan selection for payment
        $('#paymentLoanSelect').change(function() {
            const loanId = $(this).val();
            if (loanId) {
                loadLoanInfo(loanId);
            } else {
                $('#loanInfo').addClass('d-none').html('');
            }
        });
    });
    
    // Load loan information for payment
    function loadLoanInfo(loanId) {
        $.ajax({
            url: `/api/loan-details/${loanId}/`,
            method: 'GET',
            success: function(loan) {
                const totalPaid = loan.total_paid || 0;
                const remaining = parseFloat(loan.total_due) - parseFloat(totalPaid);
                
                $('#loanInfo').html(`
                    <div class="row">
                        <div class="col-6">
                            <small>Borrower:</small><br>
                            <strong>${loan.borrower_name}</strong>
                        </div>
                        <div class="col-6">
                            <small>Total Due:</small><br>
                            <strong>KSh ${parseFloat(loan.total_due).toFixed(2)}</strong>
                        </div>
                        <div class="col-6">
                            <small>Amount Paid:</small><br>
                            <strong class="text-success">KSh ${parseFloat(totalPaid).toFixed(2)}</strong>
                        </div>
                        <div class="col-6">
                            <small>Remaining:</small><br>
                            <strong class="text-danger">KSh ${remaining.toFixed(2)}</strong>
                        </div>
                    </div>
                `);
                $('#loanInfo').removeClass('d-none');
                
                // Set payment amount to remaining balance
                $('#paymentAmount').val(remaining.toFixed(2));
            },
            error: function() {
                showNotification('Error loading loan information', 'danger');
            }
        });
    }
    
    // Save new loan
    function saveLoan() {
        const borrowerName = $('#borrowerName').val().trim();
        const borrowerPhone = $('#borrowerPhone').val().trim();
        const loanAmount = $('#loanAmount').val();
        const interestRate = $('#interestRate').val() || 0;
        const dueDate = $('#dueDate').val();
        const purpose = $('#loanPurpose').val().trim();
        
        // Validate
        if (!borrowerName || !loanAmount || !dueDate) {
            showNotification('Please fill all required fields', 'warning');
            return;
        }
        
        // Show loading state
        const saveBtn = $('#saveLoanBtn');
        const originalText = saveBtn.html();
        saveBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Saving...');
        
        $.ajax({
            url: '/api/add-loan/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                borrower_name: borrowerName,
                borrower_phone: borrowerPhone,
                amount: loanAmount,
                interest_rate: interestRate,
                due_date: dueDate,
                purpose: purpose
            }),
            success: function(response) {
                if (response.success) {
                    showNotification('Loan added successfully!', 'success');
                    
                    // Reset form and close modal
                    $('#addLoanModal').modal('hide');
                    resetLoanForm();
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                    
                } else {
                    showNotification('Error: ' + response.error, 'danger');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                showNotification('An error occurred while saving the loan', 'danger');
            },
            complete: function() {
                // Restore button state
                saveBtn.prop('disabled', false).html(originalText);
            }
        });
    }
    
    // Save payment
    function savePayment() {
        const loanId = $('#paymentLoanSelect').val();
        const amount = $('#paymentAmount').val();
        const method = $('#paymentMethod').val();
        const notes = $('#paymentNotes').val().trim();
        
        // Validate
        if (!loanId || !amount || !method) {
            showNotification('Please fill all required fields', 'warning');
            return;
        }
        
        // Show loading state
        const saveBtn = $('#savePaymentBtn');
        const originalText = saveBtn.html();
        saveBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Processing...');
        
        $.ajax({
            url: '/api/record-payment/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                loan_id: loanId,
                amount: amount,
                payment_method: method,
                notes: notes
            }),
            success: function(response) {
                if (response.success) {
                    showNotification('Payment recorded successfully!', 'success');
                    
                    // Reset form and close modal
                    $('#addPaymentModal').modal('hide');
                    resetPaymentForm();
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                    
                } else {
                    showNotification('Error: ' + response.error, 'danger');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                showNotification('An error occurred while recording payment', 'danger');
            },
            complete: function() {
                // Restore button state
                saveBtn.prop('disabled', false).html(originalText);
            }
        });
    }
    
    // Add payment to specific loan
    function addPaymentToLoan(loanId, borrowerName, totalDue) {
        $('#paymentLoanSelect').val(loanId);
        loadLoanInfo(loanId);
        $('#addPaymentModal').modal('show');
    }
    
    // View loan details
    function viewLoanDetails(loanId) {
        $.ajax({
            url: `/api/loan-details/${loanId}/`,
            method: 'GET',
            success: function(loan) {
                const totalPaid = loan.total_paid || 0;
                const remaining = parseFloat(loan.total_due) - parseFloat(totalPaid);
                const progress = (parseFloat(totalPaid) / parseFloat(loan.total_due)) * 100;
                
                const details = `
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6>Loan Information</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Borrower:</strong></td>
                                    <td>${loan.borrower_name}</td>
                                </tr>
                                <tr>
                                    <td><strong>Phone:</strong></td>
                                    <td>${loan.borrower_phone || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td><strong>Amount:</strong></td>
                                    <td>KSh ${parseFloat(loan.amount).toFixed(2)}</td>
                                </tr>
                                <tr>
                                    <td><strong>Interest:</strong></td>
                                    <td>${loan.interest_rate}%</td>
                                </tr>
                                <tr>
                                    <td><strong>Total Due:</strong></td>
                                    <td>KSh ${parseFloat(loan.total_due).toFixed(2)}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>Dates & Status</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Issued:</strong></td>
                                    <td>${new Date(loan.issued_date).toLocaleDateString()}</td>
                                </tr>
                                <tr>
                                    <td><strong>Due Date:</strong></td>
                                    <td>${new Date(loan.due_date).toLocaleDateString()}</td>
                                </tr>
                                <tr>
                                    <td><strong>Days Remaining:</strong></td>
                                    <td>
                                        ${loan.days_remaining > 0 ? 
                                            `<span class="text-success">${loan.days_remaining} days</span>` : 
                                            `<span class="text-danger">${Math.abs(loan.days_remaining)} days overdue</span>`}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        ${loan.status === 'active' ? 
                                            `<span class="badge bg-primary">Active</span>` : 
                                            loan.status === 'paid' ? 
                                            `<span class="badge bg-success">Paid</span>` : 
                                            `<span class="badge bg-danger">Defaulted</span>`}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h6>Payment Progress</h6>
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar" role="progressbar" 
                                 style="width: ${progress}%;" 
                                 aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
                                ${progress.toFixed(1)}%
                            </div>
                        </div>
                        <div class="d-flex justify-content-between mt-2">
                            <span>Paid: KSh ${parseFloat(totalPaid).toFixed(2)}</span>
                            <span>Remaining: KSh ${remaining.toFixed(2)}</span>
                        </div>
                    </div>
                    
                    ${loan.purpose ? `
                    <div class="mb-4">
                        <h6>Purpose</h6>
                        <p>${loan.purpose}</p>
                    </div>
                    ` : ''}
                    
                    <div class="mb-4">
                        <h6>Payment History</h6>
                        ${loan.payments && loan.payments.length > 0 ? `
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Amount</th>
                                        <th>Method</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${loan.payments.map(payment => `
                                    <tr>
                                        <td>${new Date(payment.payment_date).toLocaleString()}</td>
                                        <td>KSh ${parseFloat(payment.amount).toFixed(2)}</td>
                                        <td>${payment.payment_method}</td>
                                        <td>${payment.notes || ''}</td>
                                    </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                        ` : '<p class="text-muted">No payments recorded yet.</p>'}
                    </div>
                `;
                
                $('#loanDetailsContent').html(details);
                $('#viewLoanModal').modal('show');
            },
            error: function() {
                showNotification('Error loading loan details', 'danger');
            }
        });
    }
    
    // Edit loan
    function editLoan(loanId) {
        // Redirect to edit page or show edit modal
        showNotification('Edit feature coming soon!', 'info');
    }
    
    // Delete loan
    let loanToDelete = null;
    let loanNameToDelete = '';
    
    function deleteLoan(loanId, borrowerName) {
        loanToDelete = loanId;
        loanNameToDelete = borrowerName;
        $('#deleteLoanMessage').html(`Are you sure you want to delete the loan for "<strong>${borrowerName}</strong>"?`);
        $('#deleteLoanModal').modal('show');
    }
    
    $('#confirmLoanDeleteBtn').click(function() {
        if (!loanToDelete) return;
        
        // Show loading state
        $(this).prop('disabled', true).html('<span class="loading-spinner"></span> Deleting...');
        
        $.ajax({
            url: `/api/delete-loan/${loanToDelete}/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                if (response.success) {
                    showNotification(response.message, 'success');
                    
                    // Close modal and reload
                    $('#deleteLoanModal').modal('hide');
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    
                } else {
                    showNotification(response.message, 'danger');
                    $('#deleteLoanModal').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                showNotification('An error occurred: ' + error, 'danger');
                $('#deleteLoanModal').modal('hide');
            },
            complete: function() {
                // Reset delete button
                $('#confirmLoanDeleteBtn').prop('disabled', false).html('<i class="fas fa-trash me-1"></i> Delete');
            }
        });
    });
    
    // Print loan statement
    function printLoanStatement() {
        const loanContent = $('#loanDetailsContent').html();
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Loan Statement</title>
                <style>
                    body { font-family: Arial, sans-serif; padding: 20px; }
                    .text-center { text-align: center; }
                    .text-end { text-align: right; }
                    .table { width: 100%; border-collapse: collapse; }
                    .table th, .table td { border: 1px solid #ddd; padding: 8px; }
                    .progress { height: 20px; margin: 10px 0; }
                    .progress-bar { background-color: #007bff; }
                </style>
            </head>
            <body>
                <h2 class="text-center">Loan Statement</h2>
                <hr>
                ${loanContent}
                <script>
                    window.onload = function() {
                        window.print();
                        setTimeout(function() {
                            window.close();
                        }, 1000);
                    }
                <\/script>
            </body>
            </html>
        `);
        printWindow.document.close();
    }
    
    // Reset forms
    function resetLoanForm() {
        $('#borrowerName').val('');
        $('#borrowerPhone').val('');
        $('#loanAmount').val('');
        $('#interestRate').val('0');
        const dueDate = new Date();
        dueDate.setDate(dueDate.getDate() + 30);
        $('#dueDate').val(dueDate.toISOString().split('T')[0]);
        $('#loanPurpose').val('');
        $('#loanFormErrors').addClass('d-none').html('');
    }
    
    function resetPaymentForm() {
        $('#paymentLoanSelect').val('');
        $('#paymentAmount').val('');
        $('#paymentMethod').val('cash');
        $('#paymentNotes').val('');
        $('#loanInfo').addClass('d-none').html('');
        $('#paymentFormErrors').addClass('d-none').html('');
    }
    
    // Reset modals when closed
    $('#addLoanModal').on('hidden.bs.modal', function() {
        resetLoanForm();
    });
    
    $('#addPaymentModal').on('hidden.bs.modal', function() {
        resetPaymentForm();
    });
</script>
{% endblock %}