@extends('layouts.app')
@section('title','Settings')
@section('page-title','System Settings')

@section('content')
<div class="section-header mb-4">
    <div>
        <div class="section-title">Credit Union Settings</div>
        <div class="section-sub">Configure system-wide parameters and exchange rates</div>
    </div>
</div>

<form method="POST" action="{{ route('admin.settings.update') }}">
    @csrf
    <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-building-columns me-2" style="color:#c9a84c;"></i>Organisation Info</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Credit Union Name</label>
                            <input type="text" name="credit_union_name" class="form-control" value="{{ $settings['credit_union_name']->value ?? 'University of Liberia Credit Union' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email Address</label>
                            <input type="email" name="credit_union_email" class="form-control" value="{{ $settings['credit_union_email']->value ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone Number</label>
                            <input type="text" name="credit_union_phone" class="form-control" value="{{ $settings['credit_union_phone']->value ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-coins me-2" style="color:#c9a84c;"></i>Dual Currency — Exchange Rate</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">LRD Exchange Rate (L$ per US$1)</label>
                            <div class="input-group">
                                <span class="input-group-text" style="font-weight:700;">L$</span>
                                <input type="number" name="lrd_exchange_rate" id="rateInput" class="form-control"
                                    step="0.01" value="{{ $settings['lrd_exchange_rate']->value ?? '195.00' }}" placeholder="195.00">
                                <span class="input-group-text">per US$1</span>
                            </div>
                            <div style="font-size:.72rem;color:#6b7a8d;margin-top:4px;">
                                L$1 = US$<span id="inverseDisplay">{{ number_format(1/($settings['lrd_exchange_rate']->value ?? 195),4) }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Quick Reference</label>
                            <div style="background:rgba(201,168,76,.08);border-radius:9px;padding:12px 16px;">
                                @foreach([100,500,1000] as $usd)
                                <div class="d-flex justify-content-between {{ !$loop->last ? 'mb-1' : '' }}">
                                    <span style="font-size:.82rem;">US$ {{ number_format($usd) }}</span>
                                    <span class="amount ref-lrd" data-usd="{{ $usd }}" style="color:#1565c0;font-size:.82rem;">
                                        L$ {{ number_format($usd * ($settings['lrd_exchange_rate']->value ?? 195), 2) }}
                                    </span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-warning mt-3 mb-0" style="font-size:.82rem;">
                        <i class="fa-solid fa-triangle-exclamation me-2"></i>
                        <strong>Note:</strong> Rate changes apply to <em>new</em> transactions only. Existing records retain the rate at time of creation.
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-hand-holding-dollar me-2" style="color:#1565c0;"></i>Loan Configuration</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Default Interest Rate (%)</label>
                            <input type="number" name="default_interest_rate" class="form-control" step="0.1"
                                value="{{ $settings['default_interest_rate']->value ?? '12' }}">
                            <div style="font-size:.72rem;color:#aaa;margin-top:3px;">Per annum</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Max Loan Multiplier</label>
                            <input type="number" name="max_loan_multiplier" class="form-control" step="0.5"
                                value="{{ $settings['max_loan_multiplier']->value ?? '3' }}">
                            <div style="font-size:.72rem;color:#aaa;margin-top:3px;">× savings balance (USD)</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Min Savings Period (months)</label>
                            <input type="number" name="min_savings_period" class="form-control"
                                value="{{ $settings['min_savings_period']->value ?? '3' }}">
                            <div style="font-size:.72rem;color:#aaa;margin-top:3px;">Before loan eligibility</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><div class="card-header-title">Role Permissions</div></div>
                <div class="card-body">
                    @foreach([
                        ['Administrator','Full system access'],
                        ['Finance Officer','Savings, loans, repayments'],
                        ['Auditor','Read-only — reports only'],
                        ['Member','Self-service portal only'],
                    ] as [$title,$desc])
                    <div class="{{ !$loop->last ? 'mb-3' : '' }}">
                        <div style="font-weight:600;font-size:.85rem;">{{ $title }}</div>
                        <div style="font-size:.78rem;color:#6b7a8d;">{{ $desc }}</div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="card">
                <div class="card-header"><div class="card-header-title"><i class="fa-solid fa-file-excel me-2" style="color:#1d6f42;"></i>Salary Debit Export</div></div>
                <div class="card-body">
                    <p style="font-size:.82rem;color:#6b7a8d;">Monthly deduction schedule for all active loans in USD and LRD.</p>
                    <form method="GET" action="{{ route('export.salary.debit') }}" target="_blank">
                        <div class="mb-2">
                            <label class="form-label">Select Month</label>
                            <input type="month" name="month" class="form-control" value="{{ now()->format('Y-m') }}">
                        </div>
                        <button type="submit" class="btn btn-outline-navy w-100" style="font-size:.85rem;">
                            <i class="fa-solid fa-download me-1"></i> Download Excel
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-gold px-5">
            <i class="fa-solid fa-floppy-disk me-1"></i> Save Settings
        </button>
    </div>
</form>

@push('scripts')
<script>
document.querySelector('[name=share_price_usd]')?.addEventListener('input', function() {
    const r = parseFloat(document.getElementById('rateInput').value) || 0;
    const p = parseFloat(this.value) || 0;
    const el = document.getElementById('sharePriceLrd');
    if (el && r && p) el.textContent = 'L$' + (p*r).toLocaleString('en',{minimumFractionDigits:2});
});

document.getElementById('rateInput').addEventListener('input', function () {
    const r = parseFloat(this.value) || 0;
    if (!r) return;
    document.getElementById('inverseDisplay').textContent = (1 / r).toFixed(4);
    document.querySelectorAll('.ref-lrd').forEach(el => {
        const usd = parseFloat(el.dataset.usd);
        el.textContent = 'L$ ' + (usd * r).toLocaleString('en', { minimumFractionDigits: 2 });
    });
});
</script>
@endpush
@endsection