@extends('admin.layouts.app')

@section('content')


@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/loansettings.css') }}">
@endpush

<div class="ls-page">

<div class="ls-wrap">


{{-- =====================================================
     BACK
====================================================== --}}

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


{{-- =====================================================
     PAGE HEADING
====================================================== --}}

<div class="ls-head">

    <div>

        <h1>
            Loan Settings
        </h1>

        <p>
            Configure the rules used when clients calculate and apply for loans.
        </p>

    </div>

</div>


{{-- =====================================================
     SUCCESS
====================================================== --}}

@if(session('success'))

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

@endif


{{-- =====================================================
     ERRORS
====================================================== --}}

@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')


{{-- =====================================================
     LOAN SYSTEM
====================================================== --}}

<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>


{{-- =====================================================
     INTEREST & PROCESSING FEE
====================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Interest & Processing Fee
        </h2>

        <span>
            Current loan pricing
        </span>

    </div>


    <div class="ls-body">


        {{-- =================================================
             INTEREST ON / OFF
        ================================================== --}}

        <div class="ls-toggle">

            <div>

                <div class="ls-toggle-title">
                    Enable Interest
                </div>

                <div class="ls-toggle-sub">
                    Turn this on to apply interest rates based on loan type.
                    Keep it off for 0% interest loans.
                </div>

            </div>


            <label class="switch">

                <input
                    type="checkbox"
                    name="interest_enabled"
                    value="1"
                    id="interest_enabled"
                    @checked(
                        old(
                            'interest_enabled',
                            $settings->interest_enabled ?? false
                        )
                    )
                >

                <span class="slider"></span>

            </label>

        </div>


        {{-- =================================================
             INTEREST STATUS
        ================================================== --}}

        <div
            id="interestStatus"
            style="margin-top:15px;"
        >

            <div class="zero-box">

                <div>

                    <strong id="interestStatusTitle">
                        @if(
                            old(
                                'interest_enabled',
                                $settings->interest_enabled ?? false
                            )
                        )
                            Interest Enabled
                        @else
                            0% Interest Loan
                        @endif
                    </strong>

                    <div
                        id="interestStatusText"
                        style="margin-top:3px"
                    >

                        @if(
                            old(
                                'interest_enabled',
                                $settings->interest_enabled ?? false
                            )
                        )

                            Loan interest will be calculated according to the selected loan type.

                        @else

                            Clients pay no interest on the principal amount.

                        @endif

                    </div>

                </div>


                <span id="interestStatusBadge">

                    @if(
                        old(
                            'interest_enabled',
                            $settings->interest_enabled ?? false
                        )
                    )

                        Interest is ON

                    @else

                        Interest is OFF

                    @endif

                </span>

            </div>

        </div>


        {{-- =================================================
             LOAN TYPE-WISE INTEREST RATES
        ================================================== --}}

        <div
            id="loanTypeInterestSection"
            class="loan-type-interest"
            style="
                display:
                {{
                    old(
                        'interest_enabled',
                        $settings->interest_enabled ?? false
                    )
                    ? 'block'
                    : 'none'
                }};
            "
        >

            <div class="loan-type-interest-head">

                <div>

                    <div class="loan-type-interest-title">
                        Loan Type-wise Interest Rate
                    </div>

                    <div class="loan-type-interest-sub">
                        Set the annual interest rate for each active loan type.
                    </div>

                </div>

            </div>


            @if(isset($loanTypes) && $loanTypes->count())

                <div class="loan-type-list">

                    @foreach($loanTypes as $loanType)

                        <div class="loan-type-row">

                            <div class="loan-type-info">

                                <div class="loan-type-name">
                                    {{ $loanType->name }}
                                </div>

                                @if($loanType->code)

                                    <div class="loan-type-code">
                                        {{ $loanType->code }}
                                    </div>

                                @endif

                            </div>


                            <div class="loan-type-rate">

                                <input
                                    type="number"
                                    name="loan_type_interest_rates[{{ $loanType->id }}]"
                                    value="{{ old(
                                        'loan_type_interest_rates.' . $loanType->id,
                                        $loanType->interest_rate ?? 0
                                    ) }}"
                                    min="0"
                                    max="100"
                                    step="0.01"
                                    inputmode="decimal"
                                    aria-label="{{ $loanType->name }} interest rate"
                                >

                                <span class="loan-type-percent">
                                    %
                                </span>

                            </div>

                        </div>

                    @endforeach

                </div>


                <div class="interest-disabled-note">

                    <strong style="color:#233a55;font-size:10px">
                        Interest calculation
                    </strong>

                    <br>

                    When Interest is ON, the above rate will be used according
                    to the selected loan type.

                    When Interest is OFF, all active loan types will be saved
                    automatically at <strong>0%</strong>.

                </div>

            @else

                <div class="interest-disabled-note">

                    No active loan types found.

                </div>

            @endif

        </div>


        {{-- =================================================
             GLOBAL INTEREST RATE COMPATIBILITY
        ================================================== --}}

        <input
            type="hidden"
            name="interest_rate"
            value="{{ old(
                'interest_rate',
                $settings->interest_rate ?? 0
            ) }}"
        >


        {{-- =================================================
             PROCESSING FEE
        ================================================== --}}

        <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>


{{-- =====================================================
     EMI CARD UNLOCK
====================================================== --}}

<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>


{{-- =====================================================
     LOAN AMOUNT LIMITS
====================================================== --}}

<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>


{{-- =====================================================
     ALLOWED TENURES
====================================================== --}}

<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>


{{-- =====================================================
     OVERDUE FINE
====================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Overdue Fine
        </h2>

        <span>
            Late EMI payment charges
        </span>

    </div>


    <div class="ls-body">

        <div class="ls-grid">


            {{-- FINE TYPE --}}

            <div class="ls-field">

                <label for="overdue_fine_type">
                    Fine Type
                </label>

                <select
                    name="overdue_fine_type"
                    id="overdue_fine_type"
                >

                    <option
                        value="fixed"
                        @selected(
                            old(
                                'overdue_fine_type',
                                $settings->overdue_fine_type ?? 'fixed'
                            ) === 'fixed'
                        )
                    >
                        Fixed Amount
                    </option>

                    <option
                        value="percentage"
                        @selected(
                            old(
                                'overdue_fine_type',
                                $settings->overdue_fine_type ?? 'fixed'
                            ) === 'percentage'
                        )
                    >
                        Percentage
                    </option>

                </select>

                <div class="ls-help">
                    Choose how the overdue fine should be calculated.
                </div>

                @error('overdue_fine_type')

                    <div class="ls-errors">
                        {{ $message }}
                    </div>

                @enderror

            </div>


            {{-- FINE AMOUNT --}}

            <div class="ls-field">

                <label for="overdue_fine_amount">
                    Fine Amount
                </label>

                <input
                    type="number"
                    id="overdue_fine_amount"
                    name="overdue_fine_amount"
                    min="0"
                    step="0.01"
                    value="{{ old(
                        'overdue_fine_amount',
                        $settings->overdue_fine_amount ?? 0
                    ) }}"
                    required
                >

                <div
                    class="ls-help"
                    id="overdueFineHelp"
                >
                    Fixed amount charged for overdue EMI.
                </div>

                @error('overdue_fine_amount')

                    <div class="ls-errors">
                        {{ $message }}
                    </div>

                @enderror

            </div>


            {{-- GRACE PERIOD --}}

            <div class="ls-field">

                <label for="overdue_grace_days">
                    Grace Period
                </label>

                <input
                    type="number"
                    id="overdue_grace_days"
                    name="overdue_grace_days"
                    min="0"
                    max="365"
                    step="1"
                    value="{{ old(
                        'overdue_grace_days',
                        $settings->overdue_grace_days ?? 0
                    ) }}"
                    required
                >

                <div class="ls-help">
                    Fine will start after this many days from the EMI due date.
                </div>

                @error('overdue_grace_days')

                    <div class="ls-errors">
                        {{ $message }}
                    </div>

                @enderror

            </div>


            {{-- MAXIMUM FINE --}}

            <div class="ls-field">

                <label for="overdue_max_fine">
                    Maximum Fine
                </label>

                <input
                    type="number"
                    id="overdue_max_fine"
                    name="overdue_max_fine"
                    min="0"
                    step="0.01"
                    value="{{ old(
                        'overdue_max_fine',
                        $settings->overdue_max_fine ?? 0
                    ) }}"
                    required
                >

                <div class="ls-help">
                    Maximum fine allowed. Enter 0 for no maximum limit.
                </div>

                @error('overdue_max_fine')

                    <div class="ls-errors">
                        {{ $message }}
                    </div>

                @enderror

            </div>

        </div>


        <div class="fee-note">

            <strong
                style="
                    color:#233a55;
                    font-size:11px;
                "
            >
                Example
            </strong>

            <br>

            Fixed ₹50 → ₹50 fine for an overdue EMI.

            <br>

            Percentage 2% → 2% of the overdue EMI amount.

            <br>

            Grace Period 3 days → Fine starts after 3 days overdue.

            <br>

            Maximum Fine ₹1,000 → Fine cannot exceed ₹1,000.

        </div>

    </div>

</div>


{{-- =====================================================
     ACTIONS
====================================================== --}}

<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>


{{-- =====================================================
     PROCESSING FEE SCRIPT
====================================================== --}}

<script>

(function(){

    const type =
        document.getElementById(
            'processing_fee_type'
        );

    const help =
        document.getElementById(
            'feeHelp'
        );


    if (!type || !help) {
        return;
    }


    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>


{{-- =====================================================
     OVERDUE FINE SCRIPT
====================================================== --}}

<script>

(function(){

    const type =
        document.getElementById(
            'overdue_fine_type'
        );

    const help =
        document.getElementById(
            'overdueFineHelp'
        );


    if (!type || !help) {
        return;
    }


    function updateOverdueFineHelp()
    {

        if (
            type.value === 'percentage'
        ) {

            help.textContent =
                'Enter a percentage. Example: 2 means 2% of the overdue EMI amount.';

        } else {

            help.textContent =
                'Enter the fixed fine amount for an overdue EMI.';

        }

    }


    type.addEventListener(
        'change',
        updateOverdueFineHelp
    );


    updateOverdueFineHelp();

})();

</script>


{{-- =====================================================
     INTEREST ON / OFF SCRIPT
====================================================== --}}

<script>

(function(){

    const interestToggle =
        document.getElementById(
            'interest_enabled'
        );

    const title =
        document.getElementById(
            'interestStatusTitle'
        );

    const text =
        document.getElementById(
            'interestStatusText'
        );

    const badge =
        document.getElementById(
            'interestStatusBadge'
        );

    const loanTypeSection =
        document.getElementById(
            'loanTypeInterestSection'
        );


    if (
        !interestToggle ||
        !title ||
        !text ||
        !badge ||
        !loanTypeSection
    ) {
        return;
    }


    function updateInterestStatus()
    {

        if (
            interestToggle.checked
        ) {

            title.textContent =
                'Interest Enabled';

            text.textContent =
                'Loan interest will be calculated according to the selected loan type.';

            badge.textContent =
                'Interest is ON';

            loanTypeSection.style.display =
                'block';

        } else {

            title.textContent =
                '0% Interest Loan';

            text.textContent =
                'Clients pay no interest on the principal amount.';

            badge.textContent =
                'Interest is OFF';

            loanTypeSection.style.display =
                'none';

        }

    }


    interestToggle.addEventListener(
        'change',
        updateInterestStatus
    );


    updateInterestStatus();

})();

</script>

@endsection