{% extends "base.html" %}

{% block head %}
{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block content %}
<div class="apply-loan-container loan-workspace blocks-workspace">
    <div class="page-header">
        <h1>Apply for Loan</h1>
        <p class="page-subtitle">Fill out the form below to apply for a new loan</p>
    </div>

    <div class="application-form-wrapper">
        <form id="loanApplicationForm" onsubmit="submitLoanApplication(event)">
            <div class="form-section">
                <h2>Loan Details</h2>

                <div class="form-group">
                    <label for="principal_amount">Loan Amount ({{ currency }}) *</label>
                    <input type="number" id="principal_amount" name="principal_amount" min="1000" max="100000000"
                        step="100" required oninput="calculateEMI()">
                    <small class="form-hint">Enter the amount you wish to borrow (Min: {{ currency }}1,000)</small>
                </div>

                <div class="form-group">
                    <label for="interest_rate">Annual Interest Rate (%) *</label>
                    <input type="number" id="interest_rate" name="interest_rate" value="{{ default_interest_rate }}"
                        min="0.1" max="50" step="0.1" required oninput="calculateEMI()">
                    <small class="form-hint">Default rate: {{ default_interest_rate }}% per annum</small>
                </div>

                <div class="form-group">
                    <label for="tenure_months">Loan Tenure (Months) *</label>
                    <input type="number" id="tenure_months" name="tenure_months" value="12" min="1" max="360" required
                        oninput="calculateEMI()">
                    <small class="form-hint">Enter the number of months (e.g., 12 for 1 year)</small>
                </div>

                <div class="form-group">
                    <label for="purpose">Loan Purpose</label>
                    <select id="purpose" name="purpose">
                        <option value="personal">Personal Use</option>
                        <option value="business">Business</option>
                        <option value="education">Education</option>
                        <option value="home_improvement">Home Improvement</option>
                        <option value="medical">Medical</option>
                        <option value="vehicle">Vehicle Purchase</option>
                        <option value="other">Other</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="start_date">Loan Start Date *</label>
                    <input type="date" id="start_date" name="start_date" required>
                    <small class="form-hint">Select the date when the loan will start</small>
                </div>
            </div>

            <!-- EMI Calculator Preview -->
            <div class="emi-calculator-preview">
                <h2>EMI Calculation Preview</h2>
                <div class="emi-results" id="emiResults">
                    <div class="emi-result-item">
                        <span class="emi-label">Monthly EMI:</span>
                        <span class="emi-value" id="emi_display">{{ currency }}0.00</span>
                    </div>
                    <div class="emi-result-item">
                        <span class="emi-label">Total Payment:</span>
                        <span class="emi-value" id="total_payment_display">{{ currency }}0.00</span>
                    </div>
                    <div class="emi-result-item">
                        <span class="emi-label">Total Interest:</span>
                        <span class="emi-value" id="total_interest_display">{{ currency }}0.00</span>
                    </div>
                </div>
                <div class="emi-breakdown-chart">
                    <canvas id="emiBreakdownChart"></canvas>
                </div>
            </div>

            <!-- Terms and Conditions -->
            <div class="form-section">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" id="accept_terms" required>
                        I accept the terms and conditions *
                    </label>
                </div>
                <div class="terms-box">
                    <h4>Terms & Conditions</h4>
                    <ul>
                        <li>All loan applications are subject to approval</li>
                        <li>Interest is calculated on a reducing balance basis</li>
                        <li>Late payment penalties apply after {{ penalty_grace_days }} days grace
                            period</li>
                        <li>Penalty rate: {{ penalty_rate }}% per month on overdue amount</li>
                        <li>Early repayment is allowed without penalty</li>
                        <li>All payments must be made on or before the due date</li>
                    </ul>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="form-actions">
                <button type="submit" class="blocks-button blocks-button-primary">
                    <i class="fa fa-check"></i> Submit Application
                </button>
                <a href="/plugins/loan/my-loans" class="blocks-button blocks-button-secondary">
                    <i class="fa fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<div id="apply-loan-config" class="loan-config" data-currency="{{ currency }}"></div>
{% endblock %}

{% block scripts %}
<script src="/plugins/loan/assets/js/apply-loan.js"></script>
{% endblock %}