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

@section('content')
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('admin.loans.index') }}" class="btn btn-outline-navy" style="padding:7px 14px;">
        <i class="fa-solid fa-arrow-left me-1"></i> Back
    </a>
    <div>
        <div class="section-title">{{ isset($loan) ? 'Edit Loan' : 'Issue / Process Loan' }}</div>
        <div class="section-sub">Fill in loan details accurately</div>
    </div>
</div>

<form method="POST" action="{{ isset($loan) ? route('admin.loans.update', $loan) : route('admin.loans.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($loan)) @method('PUT') @endif

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-hand-holding-dollar me-2" style="color:#c9a84c;"></i>Loan Information</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label">Member <span class="text-danger">*</span></label>
                            <select name="member_id" class="form-select @error('member_id') is-invalid @enderror" required>
                                <option value="">-- Select Member --</option>
                                @foreach($members as $m)
                                    <option value="{{ $m->id }}" {{ (old('member_id', request('member_id') ?? ($loan->member_id ?? '')) == $m->id) ? 'selected' : '' }}>
                                        {{ $m->name }} ({{ $m->member_id }})
                                    </option>
                                @endforeach
                            </select>
                            @error('member_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Currency <span class="text-danger">*</span></label>
                            <select name="currency" class="form-select" id="loanCurrency" required>
                                <option value="USD" {{ old('currency', $loan->currency ?? 'USD') === 'USD' ? 'selected' : '' }}>USD — US Dollar ($)</option>
                                <option value="LRD" {{ old('currency', $loan->currency ?? '') === 'LRD' ? 'selected' : '' }}>LRD — Liberian Dollar (L$)</option>
                            </select>
                            <div style="font-size:.72rem;color:#6b7a8d;margin-top:3px;">Rate: L${{ number_format($rate,2) }} = US$1.00</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Loan Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text" id="loanSymbol">$</span>
                                <input type="number" name="amount" class="form-control @error('amount') is-invalid @enderror"
                                    value="{{ old('amount', $loan->amount ?? '') }}" step="0.01" placeholder="0.00" required id="loanAmount">
                            </div>
                            <div id="loanConverted" style="font-size:.75rem;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">Term (Months) <span class="text-danger">*</span></label>
                            <select name="term_months" class="form-select" required>
                                @foreach([3,6,12,18,24,36,48,60] as $t)
                                    <option value="{{ $t }}" {{ old('term_months', $loan->term_months ?? 12) == $t ? 'selected' : '' }}>{{ $t }} months</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Interest Rate (% per annum)</label>
                            <input type="number" name="interest_rate" class="form-control"
                                value="{{ old('interest_rate', $loan->interest_rate ?? $defaultRate) }}" step="0.1">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Loan Type</label>
                            <select name="loan_type" class="form-select">
                                @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', $loan->loan_type ?? '') === $v ? 'selected' : '' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Purpose <span class="text-danger">*</span></label>
                            <textarea name="purpose" class="form-control" rows="3" placeholder="Describe the purpose of this loan..." required>{{ old('purpose', $loan->purpose ?? '') }}</textarea>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Supporting Documents</label>
                            <input type="file" name="documents[]" class="form-control" multiple accept=".pdf,.jpg,.jpeg,.png">
                            <div style="font-size:.75rem; color:#6b7a8d; margin-top:4px;">Upload application letter, guarantor forms, etc.</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Guarantor --}}
            <div class="card">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-handshake me-2" style="color:#2e7d52;"></i>Guarantor Information</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Guarantor Name</label>
                            <input type="text" name="guarantor_name" class="form-control"
                                value="{{ old('guarantor_name', $loan->guarantor_name ?? '') }}" placeholder="Full name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Guarantor Phone</label>
                            <input type="text" name="guarantor_phone" class="form-control"
                                value="{{ old('guarantor_phone', $loan->guarantor_phone ?? '') }}" placeholder="+231...">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Guarantor Member ID</label>
                            <input type="text" name="guarantor_member_id" class="form-control"
                                value="{{ old('guarantor_member_id', $loan->guarantor_member_id ?? '') }}" placeholder="e.g. UL-0012">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><div class="card-header-title">Loan Calculator</div></div>
                <div class="card-body">
                    <div id="calc-result" style="background:rgba(201,168,76,.08); border-radius:10px; padding:16px;">
                        <div style="font-size:.75rem; color:#aaa; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;">Estimated Payment</div>
                        <div class="d-flex justify-content-between mb-2">
                            <span style="font-size:.82rem;">Monthly Installment</span>
                            <span class="amount" id="calc-monthly">—</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 Repayment</span>
                            <span class="amount" style="font-weight:600;" id="calc-total">—</span>
                        </div>
                    </div>
                    <div style="font-size:.72rem; color:#aaa; margin-top:8px; text-align:center;">Calculated on reducing balance</div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Initial Status</label>
                        <select name="status" class="form-select">
                            <option value="pending" {{ old('status', $loan->status ?? 'pending') === 'pending' ? 'selected' : '' }}>Pending Review</option>
                            <option value="approved" {{ old('status', $loan->status ?? '') === 'approved' ? 'selected' : '' }}>Approved (Skip Review)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Admin Notes</label>
                        <textarea name="admin_notes" class="form-control" rows="3" placeholder="Internal notes...">{{ old('admin_notes', $loan->admin_notes ?? '') }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-gold w-100 mb-2">
                        <i class="fa-solid fa-floppy-disk me-1"></i>
                        {{ isset($loan) ? 'Update Loan' : 'Submit Application' }}
                    </button>
                    <a href="{{ route('admin.loans.index') }}" class="btn btn-outline-navy w-100">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
const xRate = {{ $rate ?? 195 }};

// Currency symbol swap
document.getElementById('loanCurrency')?.addEventListener('change', function () {
    document.getElementById('loanSymbol').textContent = this.value === 'LRD' ? 'L$' : '$';
    calcLoan();
});

function fmt(n) { return n.toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }

function calcLoan() {
    const raw      = parseFloat(document.getElementById('loanAmount')?.value) || 0;
    const term     = parseInt(document.querySelector('[name=term_months]')?.value) || 12;
    const intRate  = parseFloat(document.querySelector('[name=interest_rate]')?.value) || 0;
    const currency = document.getElementById('loanCurrency')?.value || 'USD';

    // Conversion hint
    const hint = document.getElementById('loanConverted');
    if (hint && raw) {
        hint.textContent = currency === 'USD'
            ? '≈ L$' + fmt(raw * xRate) + ' LRD'
            : '≈ $'  + fmt(raw / xRate) + ' USD';
    }

    if (!raw || !term) return;

    const amountUsd = currency === 'LRD' ? raw / xRate : raw;
    const r = (intRate / 100) / 12;
    const monthly = r === 0
        ? amountUsd / term
        : amountUsd * (r * Math.pow(1 + r, term)) / (Math.pow(1 + r, term) - 1);
    const total    = monthly * term;
    const interest = total - amountUsd;

    document.getElementById('calc-monthly').textContent = '$' + fmt(monthly) + ' / L$' + fmt(monthly * xRate);
    document.getElementById('calc-interest').textContent = '$' + fmt(interest);
    document.getElementById('calc-total').textContent   = '$' + fmt(total)   + ' / L$' + fmt(total * xRate);
}

document.querySelectorAll('[name=amount],[name=term_months],[name=interest_rate]').forEach(el => {
    el.addEventListener('input',  calcLoan);
    el.addEventListener('change', calcLoan);
});
calcLoan();
</script>
@endpush
@endsection