@extends($activeTemplate . 'layouts.master')

@section('content')
    <div class="flex flex-col xl:flex-row gap-6 items-start">

        {{-- LEFT — Loan Summary --}}
        <div class="w-full xl:max-w-sm shrink-0">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                {{-- Header --}}
                <div class="bg-gradient-to-br from-primary-900 to-primary-700 px-6 py-5 text-center">
                    <h5 class="text-white font-semibold text-base">@lang('You are applying for a Loan')</h5>
                    <p class="text-accent-300 text-sm mt-1 font-medium">
                        (@lang('Be Sure Before Confirm'))
                    </p>
                </div>

                {{-- Loan Details List --}}
                <div class="divide-y divide-primary-100">

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">@lang($plan->name)</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Plan Name')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($amount) }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Loan Amount')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ $plan->total_installment }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Total Installments')</span>
                    </div>

                    @php $per_installment = $amount * $plan->per_installment / 100; @endphp

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-secondary-500">{{ $general->cur_sym . showAmount($per_installment) }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Per Installment')</span>
                    </div>

                    {{-- Total Payable — warning row --}}
                    <div class="flex items-center justify-between px-5 py-3.5 bg-accent-50 hover:bg-accent-100 transition-colors duration-150">
                        <span class="text-sm font-bold text-accent-700">
                            {{ $general->cur_sym . showAmount($per_installment * $plan->total_installment) }}
                        </span>
                        <span class="text-xs font-semibold text-accent-600">@lang('You Need To Pay')</span>
                    </div>

                </div>

                {{-- Delay Charge Notice --}}
                @if ($plan->delay_value && getAmount($plan->delay_charge))
                    <div class="mx-4 mb-4 mt-3 flex items-start gap-2.5 p-3.5 bg-amber-50 border border-amber-200 rounded-xl">
                        <i class="las la-clock text-amber-500 text-base shrink-0 mt-0.5"></i>
                        <p class="text-xs text-amber-700 leading-relaxed">
                            @lang('If an installment is delayed for')
                            <span class="font-bold">{{ $plan->delay_value }}</span>
                            @lang('or more days then, an amount of')
                            <span class="font-bold">{{ $general->cur_sym . showAmount($plan->delay_charge) }}</span>
                            @lang('will be applied for each day.')
                        </p>
                    </div>
                @endif

            </div>
        </div>

        {{-- RIGHT — Application Form --}}
        <div class="flex-1 min-w-0">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                {{-- Header --}}
                <div class="bg-gradient-to-br from-primary-900 to-primary-700 px-6 py-5">
                    <h5 class="text-white font-semibold text-base">@lang('Application Form')</h5>
                    <p class="text-primary-200 text-xs mt-1">@lang('Fill in the details below to complete your loan application')</p>
                </div>

                <div class="px-6 py-6">
                    <form action="{{ route('user.loan.apply.confirm') }}" method="post" enctype="multipart/form-data" class="flex flex-col gap-5">
                        @csrf

                        {{-- Plan Instruction --}}
                        @if ($plan->instruction)
                            <div class="flex items-start gap-3 p-4 bg-primary-50 border border-primary-200 rounded-xl">
                                <i class="las la-info-circle text-primary-500 text-base shrink-0 mt-0.5"></i>
                                <div class="text-sm text-primary-600 leading-relaxed">
                                    @php echo $plan->instruction @endphp
                                </div>
                            </div>
                        @endif

                        {{-- Dynamic Form Fields --}}
                        <x-viser-form identifier="id" identifierValue="{{ $plan->form_id }}" />

                        {{-- Submit --}}
                        <button type="submit"
                                class="w-full mt-1 py-3 rounded-xl text-sm font-semibold bg-primary-900 text-white hover:bg-primary-700 transition-all duration-200 shadow-glow">
                            @lang('Apply for Loan')
                        </button>

                    </form>
                </div>

            </div>
        </div>

    </div>
@endsection

@push('bottom-menu')
    <div class="w-full order-4 lg:order-3">
        <div class="flex items-center gap-2 md:gap-3">

            <a href="{{ route('user.loan.plans') }}"
               class="px-5 py-2.5 rounded-xl text-sm font-semibold bg-primary-900 text-white border-2 border-primary-900 hover:bg-primary-700 hover:border-primary-700 transition-all duration-200 shadow-glow">
                @lang('Loan Plans')
            </a>

            <a href="{{ route('user.loan.list') }}"
               class="px-5 py-2.5 rounded-xl text-sm font-semibold border-2 border-primary-700 text-primary-700 hover:bg-primary-700 hover:text-white transition-all duration-200">
                @lang('My Loan List')
            </a>

        </div>
    </div>
@endpush