{% extends "base.html" %}

{% block title %}Apply for Loan - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Apply for Loan</h4>
            </div>
            <div class="card-body">
                <form method="POST" id="loanForm">
                    <div class="mb-3">
                        <label for="amount" class="form-label">Loan Amount (₦)</label>
                        <div class="input-group">
                            <span class="input-group-text">₦</span>
                            <input type="number" class="form-control" id="amount" name="amount" 
                                   min="1000" step="100" required placeholder="Enter loan amount">
                        </div>
                        <small class="form-text text-muted">Minimum loan: ₦1,000</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="duration_months" class="form-label">Loan Duration (Months)</label>
                        <select class="form-select" id="duration_months" name="duration_months" required>
                            <option value="">Select duration</option>
                            <option value="3">3 months</option>
                            <option value="6">6 months</option>
                            <option value="12">12 months</option>
                            <option value="18">18 months</option>
                            <option value="24">24 months</option>
                            <option value="36">36 months</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="purpose" class="form-label">Loan Purpose</label>
                        <textarea class="form-control" id="purpose" name="purpose" rows="4" 
                                  required placeholder="Describe the purpose of this loan..."></textarea>
                    </div>
                    
                    <div class="card bg-light mb-3">
                        <div class="card-body">
                            <h6 class="card-title">Loan Summary</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1">Principal Amount:</p>
                                    <h5 id="principal-amount">₦0.00</h5>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1">Interest Rate:</p>
                                    <h5 class="text-warning">5% per annum</h5>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <p class="mb-1">Total Interest:</p>
                                    <h5 id="total-interest">₦0.00</h5>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1">Total Payable:</p>
                                    <h5 id="total-payable" class="text-danger">₦0.00</h5>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <p class="mb-1">Monthly Payment:</p>
                                    <h5 id="monthly-payment">₦0.00</h5>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1">Your Wallet Balance:</p>
                                    <h5 class="text-success">₦{{ "%.2f"|format(wallet.balance if wallet else 0) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Loan Terms & Conditions</h6>
                        <ul class="mb-0">
                            <li>Interest rate: 5% per annum</li>
                            <li>Loan approval subject to management discretion</li>
                            <li>Repayment starts from the month following approval</li>
                            <li>Late payments attract additional charges</li>
                            <li>Your contribution history will be considered</li>
                        </ul>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-orange">
                            <i class="fas fa-paper-plane me-2"></i>Submit Application
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('amount').addEventListener('input', calculateLoan);
document.getElementById('duration_months').addEventListener('change', calculateLoan);

function calculateLoan() {
    const amount = parseFloat(document.getElementById('amount').value) || 0;
    const duration = parseInt(document.getElementById('duration_months').value) || 0;
    
    if (amount > 0 && duration > 0) {
        const interestRate = 5.0; // 5% per annum
        const totalInterest = (amount * interestRate / 100) * (duration / 12);
        const totalPayable = amount + totalInterest;
        const monthlyPayment = totalPayable / duration;
        
        document.getElementById('principal-amount').textContent = '₦' + amount.toFixed(2);
        document.getElementById('total-interest').textContent = '₦' + totalInterest.toFixed(2);
        document.getElementById('total-payable').textContent = '₦' + totalPayable.toFixed(2);
        document.getElementById('monthly-payment').textContent = '₦' + monthlyPayment.toFixed(2);
    } else {
        document.getElementById('principal-amount').textContent = '₦0.00';
        document.getElementById('total-interest').textContent = '₦0.00';
        document.getElementById('total-payable').textContent = '₦0.00';
        document.getElementById('monthly-payment').textContent = '₦0.00';
    }
}
</script>
{% endblock %}