<?php $title = 'Apply for Loan'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-file-invoice mr-2"></i>Apply for Loan</h1>
    <a href="<?= $baseUrl ?>/loans/my" class="glass-btn"><i class="fas fa-arrow-left mr-1"></i>My Loans</a>
</div>
<div class="glass-card">
    <form method="POST" action="<?= $baseUrl ?>/loans/store" id="loanForm">
        <div class="form-group">
            <label style="color:rgba(255,255,255,0.7);">Loan Type *</label>
            <select name="loan_type_id" id="loan_type_id" class="form-control glass-input" required>
                <option value="">-- Select Loan Type --</option>
                <?php foreach ($types as $t): ?>
                <option value="<?= $t->id ?>"
                    data-rate="<?= $t->interest_rate ?>"
                    data-min="<?= $t->min_amount ?>"
                    data-max="<?= $t->max_amount ?>"
                    data-min-dur="<?= $t->min_duration_months ?>"
                    data-max-dur="<?= $t->max_duration_months ?>">
                    <?= htmlspecialchars($t->name) ?> (<?= $t->interest_rate ?>% interest)
                </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label style="color:rgba(255,255,255,0.7);">Amount (GHS) *</label>
                <input type="number" step="0.01" name="amount" id="amount" class="form-control glass-input" required>
                <small id="amountHelp" style="color:rgba(255,255,255,0.4);"></small>
            </div>
            <div class="col-md-6 form-group">
                <label style="color:rgba(255,255,255,0.7);">Duration (months) *</label>
                <input type="number" min="1" name="duration_months" id="duration_months" class="form-control glass-input" required>
                <small id="durationHelp" style="color:rgba(255,255,255,0.4);"></small>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label style="color:rgba(255,255,255,0.7);">Repayment Frequency *</label>
                <select name="repayment_frequency" id="repayment_frequency" class="form-control glass-input">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="bi-weekly">Bi-Weekly</option>
                    <option value="monthly" selected>Monthly</option>
                    <option value="quarterly">Quarterly</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label style="color:rgba(255,255,255,0.7);">Purpose</label>
            <textarea name="purpose" class="form-control glass-input" rows="3" placeholder="Brief description of what the loan is for..."></textarea>
        </div>
        <div id="calcSummary" class="p-3 mb-3 rounded" style="background:rgba(255,255,255,0.05);display:none;">
            <h6 class="text-white font-weight-bold">Loan Summary</h6>
            <div class="row text-center">
                <div class="col-4"><span id="calcAmount" style="font-size:1.2rem;font-weight:700;color:#fff;">GHS 0</span><br><small style="color:rgba(255,255,255,0.5);">Principal</small></div>
                <div class="col-4"><span id="calcTotal" style="font-size:1.2rem;font-weight:700;color:#1cc88a;">GHS 0</span><br><small style="color:rgba(255,255,255,0.5);">Total Payable</small></div>
                <div class="col-4"><span id="calcMonthly" style="font-size:1.2rem;font-weight:700;color:#4e73df;">GHS 0</span><br><small style="color:rgba(255,255,255,0.5);">Monthly Payment</small></div>
            </div>
        </div>
        <div class="text-right">
            <a href="<?= $baseUrl ?>/loans/my" class="glass-btn mr-2">Cancel</a>
            <button type="submit" class="glass-btn glass-btn-primary"><i class="fas fa-paper-plane mr-1"></i>Submit Application</button>
        </div>
    </form>
</div>
<script>
var freqMultiplier = {daily:30, weekly:4, 'bi-weekly':2, monthly:1, quarterly:0.3333};
function updateCalc() {
    var sel = document.getElementById('loan_type_id');
    var amount = parseFloat(document.getElementById('amount').value) || 0;
    var months = parseInt(document.getElementById('duration_months').value) || 0;
    var freq = document.getElementById('repayment_frequency').value;
    if (!sel.value || !amount || !months) { document.getElementById('calcSummary').style.display = 'none'; return; }
    var opt = sel.options[sel.selectedIndex];
    var rate = parseFloat(opt.dataset.rate) || 0;
    var total = amount + (amount * rate / 100);
    var mult = freqMultiplier[freq] || 1;
    var installments = Math.max(1, Math.round(months * mult));
    var perInstallment = total / installments;
    document.getElementById('calcAmount').textContent = 'GHS ' + amount.toFixed(2);
    document.getElementById('calcTotal').textContent = 'GHS ' + total.toFixed(2);
    document.getElementById('calcMonthly').textContent = 'GHS ' + perInstallment.toFixed(2) + ' × ' + installments + ' installments';
    document.getElementById('calcSummary').style.display = '';
}
document.getElementById('loan_type_id').addEventListener('change', function() {
    var opt = this.options[this.selectedIndex];
    if (opt.value) {
        document.getElementById('amount').min = opt.dataset.min;
        document.getElementById('amount').max = opt.dataset.max;
        document.getElementById('amount').placeholder = 'GHS ' + parseFloat(opt.dataset.min).toLocaleString() + ' - GHS ' + parseFloat(opt.dataset.max).toLocaleString();
        document.getElementById('amountHelp').textContent = 'Range: GHS ' + parseFloat(opt.dataset.min).toFixed(2) + ' - GHS ' + parseFloat(opt.dataset.max).toFixed(2);
        document.getElementById('duration_months').min = opt.dataset.minDur;
        document.getElementById('duration_months').max = opt.dataset.maxDur;
        document.getElementById('duration_months').placeholder = opt.dataset.minDur + ' - ' + opt.dataset.maxDur + ' months';
        document.getElementById('durationHelp').textContent = 'Range: ' + opt.dataset.minDur + ' - ' + opt.dataset.maxDur + ' months';
    }
    updateCalc();
});
document.getElementById('amount').addEventListener('input', updateCalc);
document.getElementById('duration_months').addEventListener('input', updateCalc);
document.getElementById('repayment_frequency').addEventListener('change', updateCalc);
</script>
