@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            2. LOAN INFORMATION
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('loans.store.step-2') }}" method="post" enctype="multipart/form-data">
                @csrf
                <x-form.input type="text" class="numeric-input" label="Principal Amount" name="principal_amount" required
                    value="{{ old('principal_amount', optional($loan)['principal_amount']) }}"
                    placeholder="Principal Amount" />

                <x-form.input type="text" label="Interest Rate (%)" name="interest_rate" required class="numeric-input"
                    value="{{ old('interest_rate', optional($loan)['interest_rate']) }}" placeholder="Interest Rate" />


                <x-form.input type="text" label="Installments" name="installments" required class="numeric-input"
                    value="{{ old('installments', optional($loan)['installments']) }}" placeholder="Loan Installments" />

                <x-form.input type="date" label="First Installment Date" name="first_installment_date" required
                    value="{{ old('first_installment_date', optional($loan)['first_installment_date']) }}" />

                {{-- <x-form.select label="Loan Charge" name="charge_id" :options="$charges"
                    value="{{ old('charge_id', optional($loan)['charge_id']) }}" required /> --}}
                <x-form.select label="Installment Period Type" name="installment_period_type" :options="$installment_period_types"
                    value="{{ old('installment_period_type', optional($loan)['installment_period_type']) }}" required />

                <div class="flex mt-10 justify-between">
                    <x-link route="{{ route('loans.create') }}" isButton class="">{{ __('Back') }}</x-link>
                    <x-button type="sumbit" label="Next" />
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2(); 
        });
    </script>
@endpush('scripts')