@extends('layouts.app')
@section('title', 'Apply for Loan')
@section('page-title', 'Loan Application')

@section('content')
<div class="section-header mb-4">
    <div>
        <div class="section-title">Apply for a Loan</div>
        <div class="section-sub">Choose your currency — USD or LRD · Rate: L${{ number_format($rate,2) }}=US$1</div>
    </div>
</div>

@if($member->loans()->where('status','pending')->count() > 0)
<div class="alert alert-warning mb-4">
    <i class="fa-solid fa-clock me-2"></i> You have a pending application under review. Please wait until it is processed.
</div>
@endif

<div class="row g-3">
    <div class="col-lg-8">
        <form method="POST" action="{{ route('member.loans.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card mb-3">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-file-signature me-2" style="color:#c9a84c;"></i>Loan Request</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Loan Type <span class="text-danger">*</span></label>
                            <select name="loan_type" class="form-select" required>
                                <option value="">Select type...</option>
                                @foreach(['personal'=>'Personal Loan','emergency'=>'Emergency Loan','school_fees'=>'School Fees','medical'=>'Medical Loan','business'=>'Business Loan'] as $v=>$l)
                                    <option value="{{ $v }}" {{ old('loan_type')===$v?'selected':'' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Currency selector --}}
                        <div class="col-md-6">
                            <label class="form-label">Currency <span class="text-danger">*</span></label>
                            <div class="d-flex gap-2">
                                @foreach(['USD'=>['$','#2e7d52'],'LRD'=>['L$','#1565c0']] as $cur=>[$sym,$color])
                                <label style="flex:1;cursor:pointer;">
                                    <input type="radio" name="currency" value="{{ $cur }}" {{ old('currency','USD')===$cur?'checked':'' }}
                                        style="display:none;" class="apply-cur-radio" data-symbol="{{ $sym }}" data-color="{{ $color }}">
                                    <div class="apply-cur-card" data-color="{{ $color }}" style="border:2px solid {{ old('currency','USD')===$cur?$color:'var(--border)' }};border-radius:10px;padding:10px;text-align:center;transition:all .2s;">
                                        <div style="font-size:1rem;font-weight:700;color:{{ $color }};">{{ $sym }} {{ $cur }}</div>
                                    </div>
                                </label>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Requested Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text" id="applySymbol" style="font-weight:700;">$</span>
                                <input type="number" name="amount" class="form-control @error('amount') is-invalid @enderror"
                                    value="{{ old('amount') }}" step="0.01" placeholder="0.00" id="applyAmount" required>
                            </div>
                            <div id="applyConverted" style="font-size:.72rem;color:#6b7a8d;margin-top:3px;"></div>
                            @error('amount')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Preferred Term <span class="text-danger">*</span></label>
                            <select name="term_months" class="form-select" required id="applyTerm">
                                @foreach([3,6,12,18,24,36] as $t)
                                    <option value="{{ $t }}" {{ old('term_months',12)==$t?'selected':'' }}>{{ $t }} months</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Purpose <span class="text-danger">*</span></label>
                            <textarea name="purpose" class="form-control" rows="4" required
                                placeholder="Describe clearly how you intend to use this loan (minimum 20 characters)...">{{ old('purpose') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Supporting Documents</label>
                            <input type="file" name="documents[]" class="form-control" multiple accept=".pdf,.jpg,.jpeg,.png">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><div class="card-header-title"><i class="fa-solid fa-handshake me-2" style="color:#2e7d52;"></i>Guarantor</div></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4"><label class="form-label">Name</label><input type="text" name="guarantor_name" class="form-control" value="{{ old('guarantor_name') }}"></div>
                        <div class="col-md-4"><label class="form-label">Member ID</label><input type="text" name="guarantor_member_id" class="form-control" value="{{ old('guarantor_member_id') }}" placeholder="UL-XXXX"></div>
                        <div class="col-md-4"><label class="form-label">Phone</label><input type="text" name="guarantor_phone" class="form-control" value="{{ old('guarantor_phone') }}"></div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="agree_terms" id="agreeTerms" required>
                        <label class="form-check-label" for="agreeTerms" style="font-size:.85rem;">
                            I confirm all information is accurate and agree to the Credit Union's loan terms.
                        </label>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-gold px-5"><i class="fa-solid fa-paper-plane me-1"></i> Submit Application</button>
                        <a href="{{ route('member.dashboard') }}" class="btn btn-outline-navy">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header"><div class="card-header-title">Loan Estimate</div></div>
            <div class="card-body">
                <div style="background:rgba(201,168,76,.08);border-radius:9px;padding:16px;margin-bottom:10px;">
                    <div style="font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;">At {{ $defaultRate }}% p.a.</div>
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;">Monthly (USD)</span>
                        <span class="amount" id="calc-monthly-usd">—</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;">Monthly (LRD)</span>
                        <span class="amount" id="calc-monthly-lrd" style="color:#1565c0;">—</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;">Total Interest</span>
                        <span class="amount" id="calc-interest">—</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span style="font-size:.82rem;font-weight:600;">Total Payable</span>
                        <span class="amount" style="font-weight:600;" id="calc-total">—</span>
                    </div>
                </div>
                <div style="font-size:.7rem;color:#aaa;text-align:center;">Exact terms confirmed upon approval</div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header"><div class="card-header-title">Your Account</div></div>
            <div class="card-body">
                @foreach([
                    ['Savings (USD)', '$'.number_format($member->savings_balance,2)],
                    ['Savings (LRD)', 'L$'.number_format($member->savings_balance * $rate,2)],
                    ['Monthly Contribution', '$'.number_format($member->monthly_contribution,2)],
                    ['Max Eligible (3× savings)', '$'.number_format($member->savings_balance*3,2)],
                ] as [$lbl,$val])
                <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid var(--border);font-size:.85rem;">
                    <span style="color:#6b7a8d;">{{ $lbl }}</span><strong>{{ $val }}</strong>
                </div>
                @endforeach
            </div>
        </div>

        <div class="card" style="background:rgba(13,27,42,.03);">
            <div class="card-body">
                <div style="font-size:.82rem;font-weight:600;margin-bottom:8px;"><i class="fa-solid fa-info-circle me-1" style="color:#c9a84c;"></i> How it works</div>
                <ol style="font-size:.78rem;color:#6b7a8d;padding-left:16px;margin:0;line-height:1.9;">
                    <li>Choose currency (USD or LRD)</li>
                    <li>Submit application with documents</li>
                    <li>Review within 2–5 business days</li>
                    <li>Approval & disbursement</li>
                    <li>Monthly payroll deductions begin</li>
                </ol>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const xRate = {{ $rate }};
const intRate = {{ $defaultRate }};
let applyCurrency = 'USD';

document.querySelectorAll('.apply-cur-radio').forEach(r => {
    r.addEventListener('change', function () {
        applyCurrency = this.value;
        document.getElementById('applySymbol').textContent = this.dataset.symbol;
        document.querySelectorAll('.apply-cur-card').forEach(c => c.style.borderColor = 'var(--border)');
        this.nextElementSibling.style.borderColor = this.dataset.color;
        updateCalc();
    });
});

function updateCalc() {
    const raw  = parseFloat(document.getElementById('applyAmount').value) || 0;
    const term = parseInt(document.getElementById('applyTerm').value) || 12;
    const hint = document.getElementById('applyConverted');

    if (raw && hint) {
        hint.textContent = applyCurrency === 'USD'
            ? '≈ L$' + (raw * xRate).toLocaleString('en', {minimumFractionDigits:2}) + ' LRD'
            : '≈ $'  + (raw / xRate).toLocaleString('en', {minimumFractionDigits:2}) + ' USD';
    }

    if (!raw || !term) return;
    const amtUsd = applyCurrency === 'LRD' ? raw / xRate : raw;
    const r = (intRate / 100) / 12;
    const m = r === 0 ? amtUsd/term : amtUsd*(r*Math.pow(1+r,term))/(Math.pow(1+r,term)-1);
    const total = m * term;
    document.getElementById('calc-monthly-usd').textContent = '$'  + m.toFixed(2);
    document.getElementById('calc-monthly-lrd').textContent = 'L$' + (m * xRate).toFixed(2);
    document.getElementById('calc-interest').textContent    = '$'  + (total - amtUsd).toFixed(2);
    document.getElementById('calc-total').textContent       = '$'  + total.toFixed(2);
}

document.getElementById('applyAmount').addEventListener('input', updateCalc);
document.getElementById('applyTerm').addEventListener('change', updateCalc);
</script>
@endpush
@endsection