@extends('layouts.app')

@section('content')

<style>
    .ls-page{min-height:calc(100vh - 70px);background:#f5f8fc;padding:28px;color:#14243a}
    .ls-wrap{max-width:1050px;margin:0 auto}
    .ls-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
    .ls-head h1{margin:0;font-size:27px;font-weight:850;letter-spacing:-.7px}
    .ls-head p{margin:7px 0 0;color:#78889c;font-size:12px}
    .ls-back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#64768c;font-size:11px;font-weight:800;margin-bottom:16px}
    .ls-back:hover{color:#1769e0}
    .ls-card{background:#fff;border:1px solid #e1e8f1;border-radius:18px;box-shadow:0 10px 30px rgba(24,52,86,.05);overflow:hidden;margin-bottom:17px}
    .ls-card-head{padding:17px 20px;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between;align-items:center;gap:12px}
    .ls-card-head h2{margin:0;font-size:14px;font-weight:850;color:#233a55}
    .ls-card-head span{font-size:9px;color:#8998a9}
    .ls-body{padding:20px}
    .ls-alert{padding:12px 14px;border-radius:10px;font-size:11px;font-weight:700;margin-bottom:15px}
    .ls-success{background:#e3f6ec;border:1px solid #c8ead7;color:#146c43}
    .ls-error{background:#fff0f1;border:1px solid #f1cdd2;color:#a52834}
    .ls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
    .ls-field label{display:block;color:#53677f;font-size:10px;font-weight:850;margin-bottom:7px}
    .ls-field input,.ls-field select{width:100%;height:43px;border:1px solid #dfe6ee;border-radius:10px;background:#fbfcfe;padding:0 12px;color:#243a54;font-size:12px;outline:none;box-sizing:border-box}
    .ls-field input:focus,.ls-field select:focus{border-color:#8bb5ed;box-shadow:0 0 0 3px rgba(23,105,224,.07)}
    .ls-help{margin-top:5px;color:#8a98a9;font-size:9px;line-height:1.5}
    .ls-toggle{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;border-radius:12px;background:#f7faff;border:1px solid #e2ebf5}
    .ls-toggle-title{font-size:11px;font-weight:850;color:#263d57}.ls-toggle-sub{margin-top:3px;color:#8796a8;font-size:9px}
    .switch{position:relative;width:46px;height:25px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#cbd5e1;border-radius:50px;cursor:pointer;transition:.2s}.slider:before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.15)}.switch input:checked+.slider{background:#198754}.switch input:checked+.slider:before{transform:translateX(21px)}
    .tenures{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
    .tenure{position:relative}.tenure input{position:absolute;opacity:0}.tenure label{display:block;text-align:center;padding:12px 7px;border:1px solid #dfe6ee;border-radius:10px;background:#fff;color:#53677f;font-size:10px;font-weight:850;cursor:pointer}.tenure input:checked+label{border-color:#1769e0;background:#edf5ff;color:#1769e0;box-shadow:0 0 0 2px rgba(23,105,224,.06)}
    .fee-note{margin-top:12px;padding:11px 13px;border-radius:10px;background:#f7f9fc;border:1px solid #e5ebf2;color:#718197;font-size:9px;line-height:1.6}
    .zero-box{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px;border-radius:12px;background:#eaf8f0;border:1px solid #cdebd9}.zero-box strong{color:#198754;font-size:13px}.zero-box span{color:#5e806e;font-size:9px}
    .ls-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.ls-btn{border:0;border-radius:10px;padding:11px 16px;font-size:11px;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.ls-btn-light{background:#fff;border:1px solid #e1e8f1;color:#52657c}.ls-btn-blue{background:#1769e0;color:#fff}
    .ls-errors{margin-top:5px;color:#b42332;font-size:9px}
    @media(max-width:700px){.ls-page{padding:17px 12px 30px}.ls-head{flex-direction:column}.ls-grid{grid-template-columns:1fr}.tenures{grid-template-columns:repeat(2,1fr)}.ls-actions>*{flex:1}}
</style>

<div class="ls-page">
<div class="ls-wrap">

<a href="{{ route('admin.loans') }}" class="ls-back">← Back to Loan Management</a>

<div class="ls-head">
    <div>
        <h1>Loan Settings</h1>
        <p>Configure the rules used when clients calculate and apply for loans.</p>
    </div>
</div>

@if(session('success'))
    <div class="ls-alert ls-success">{{ session('success') }}</div>
@endif

@if($errors->any())
    <div class="ls-alert ls-error">
        <strong>Please check the following:</strong>
        <ul style="margin:7px 0 0 17px;padding:0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.loan-settings.update') }}">
@csrf
@method('PUT')

<div class="ls-card">
    <div class="ls-card-head">
        <h2>Loan System</h2>
        <span>General availability</span>
    </div>
    <div class="ls-body">
        <div class="ls-toggle">
            <div>
                <div class="ls-toggle-title">Accept new loan applications</div>
                <div class="ls-toggle-sub">Turn this off to temporarily stop clients from submitting new loan applications.</div>
            </div>
            <label class="switch">
                <input type="checkbox" name="enabled" value="1" @checked(old('enabled', $settings->enabled))>
                <span class="slider"></span>
            </label>
        </div>
    </div>
</div>

<div class="ls-card">
    <div class="ls-card-head">
        <h2>Interest & Processing Fee</h2>
        <span>Current loan pricing</span>
    </div>
    <div class="ls-body">

        <div class="zero-box">
            <div>
                <strong>0% Interest Loan</strong>
                <div style="margin-top:3px">
                    Clients pay no interest on the principal amount.
                </div>
            </div>
            <span>Interest is locked to 0%</span>
        </div>

        <input type="hidden" name="interest_rate" value="0">

        <div class="ls-grid" style="margin-top:15px">
            <div class="ls-field">
                <label for="processing_fee_type">Processing Fee Type</label>
                <select name="processing_fee_type" id="processing_fee_type">
                    <option value="fixed" @selected(old('processing_fee_type', $settings->processing_fee_type) === 'fixed')>Fixed Amount</option>
                    <option value="percentage" @selected(old('processing_fee_type', $settings->processing_fee_type) === 'percentage')>Percentage of Loan</option>
                </select>
                <div class="ls-help">Choose whether the fee is a fixed amount or a percentage of the loan amount.</div>
            </div>

            <div class="ls-field">
                <label for="processing_fee">Processing Fee</label>
                <input type="number" id="processing_fee" name="processing_fee" min="0" step="0.01" value="{{ old('processing_fee', $settings->processing_fee) }}" required>
                <div class="ls-help" id="feeHelp">For fixed fee, enter the amount in rupees.</div>
                @error('processing_fee')<div class="ls-errors">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="fee-note">
            Example: Fixed ₹999 means every eligible loan has a ₹999 processing fee.
            Percentage 2% means a ₹50,000 loan has a ₹1,000 processing fee.
        </div>
    </div>
</div>

<div class="ls-card">
    <div class="ls-card-head">
        <h2>EMI Card Unlock</h2>
        <span>Card activation payment</span>
    </div>
    <div class="ls-body">
        <div class="ls-grid">
            <div class="ls-field">
                <label for="card_unlock_amount">Card Unlock Amount</label>
                <input
                    type="number"
                    id="card_unlock_amount"
                    name="card_unlock_amount"
                    min="0"
                    step="0.01"
                    value="{{ old('card_unlock_amount', $settings->card_unlock_amount ?? 199) }}"
                    required
                >
                <div class="ls-help">
                    This amount will be used for the “Unlock Card” payment on both the client and admin side.
                </div>
                @error('card_unlock_amount')
                    <div class="ls-errors">{{ $message }}</div>
                @enderror
            </div>

            <div class="ls-field" style="display:flex;align-items:center">
                <div class="fee-note" style="margin:0;width:100%">
                    <strong style="color:#233a55;font-size:11px">Example</strong><br>
                    Set ₹199 here → Client shows <strong>Unlock Card ₹199</strong>
                    and Admin shows the same amount.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ls-card">
    <div class="ls-card-head">
        <h2>Loan Amount Limits</h2>
        <span>Client application limits</span>
    </div>
    <div class="ls-body">
        <div class="ls-grid">
            <div class="ls-field">
                <label for="minimum_loan_amount">Minimum Loan Amount</label>
                <input type="number" id="minimum_loan_amount" name="minimum_loan_amount" min="1" step="0.01" value="{{ old('minimum_loan_amount', $settings->minimum_loan_amount) }}" required>
                <div class="ls-help">Clients cannot apply below this amount.</div>
            </div>

            <div class="ls-field">
                <label for="maximum_loan_amount">Maximum Loan Amount</label>
                <input type="number" id="maximum_loan_amount" name="maximum_loan_amount" min="1" step="0.01" value="{{ old('maximum_loan_amount', $settings->maximum_loan_amount) }}" required>
                <div class="ls-help">This is also limited by the client's available EMI card limit.</div>
            </div>
        </div>
    </div>
</div>

<div class="ls-card">
    <div class="ls-card-head">
        <h2>Allowed Tenures</h2>
        <span>Select one or more</span>
    </div>
    <div class="ls-body">
        @php
            $selectedTenures = old('allowed_tenures', $settings->allowed_tenures ?? []);
            $availableTenures = [3,6,9,12,18,24,36,48];
        @endphp

        <div class="tenures">
            @foreach($availableTenures as $months)
                <div class="tenure">
                    <input type="checkbox" name="allowed_tenures[]" id="tenure{{ $months }}" value="{{ $months }}" @checked(in_array($months, $selectedTenures))>
                    <label for="tenure{{ $months }}">{{ $months }} Months</label>
                </div>
            @endforeach
        </div>

        <div class="ls-help" style="margin-top:10px">
            Only selected tenures will be available on the client loan application page.
        </div>
    </div>
</div>

<div class="ls-card">
    <div class="ls-body">
        <div class="ls-actions">
            <a href="{{ route('admin.loans') }}" class="ls-btn ls-btn-light">Cancel</a>
            <button type="submit" class="ls-btn ls-btn-blue">Save Loan Settings</button>
        </div>
    </div>
</div>

</form>
</div>
</div>

<script>
(function(){
    const type = document.getElementById('processing_fee_type');
    const help = document.getElementById('feeHelp');

    function updateFeeHelp(){
        if(type.value === 'percentage'){
            help.textContent = 'Enter a percentage. Example: 2 means 2% of the loan amount.';
        }else{
            help.textContent = 'Enter the fixed processing fee amount in rupees.';
        }
    }

    type.addEventListener('change', updateFeeHelp);
    updateFeeHelp();
})();
</script>

@endsection