@extends('frontend.layout_2')
@section('title', 'Loan Apply')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}
select::-ms-expand { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .smooth-press:active { transform: translateY(1px); }
}
</style>
@endpush

@section('sub_layout')
<div class="mx-auto max-w-md px-4 py-6" style="margin-bottom: 200px;">
    <div class="bg-white/90 backdrop-blur rounded-2xl shadow-lg ring-1 ring-black/5 p-6">

        <h1 class="text-center text-xl font-extrabold tracking-wide">
            <span class="bg-gradient-to-r from-rose-600 to-red-600 bg-clip-text text-transparent">
                লোন অ্যাপ্লিকেশন ফর্ম
            </span>
        </h1>

        @if ($errors->any())
            <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50/70 px-3 py-2 text-sm text-rose-700">
                @foreach ($errors->all() as $error)
                    <div class="flex items-start gap-2">
                        <i class="fa-solid fa-circle-exclamation mt-0.5"></i>
                        <span>{{ $error }}</span>
                    </div>
                @endforeach
            </div>
        @endif

        <form action="{{ route('loan.store') }}" method="POST" novalidate class="mt-6 space-y-4">
            @csrf

            {{-- পূর্ণ নাম (read only) --}}
            <div>
                <label for="full_name" class="mb-1 block text-sm font-semibold text-slate-700">
                    পূর্ণ নাম
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-user"></i>
                    </span>
                    <input
                        id="full_name"
                        type="text"
                        value="{{ auth()->user()->name }}"
                        readonly
                        class="w-full rounded-xl border border-slate-200 bg-slate-50 pl-10 pr-3 py-2.5 text-[15px] text-slate-700 shadow-inner
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500
                               disabled:opacity-60 disabled:cursor-not-allowed transition"
                    />
                </div>
                <p class="mt-1 text-xs text-slate-500">এই তথ্যটি আপনার প্রোফাইল থেকে নেওয়া হয়েছে।</p>
            </div>

            {{-- নমিনি নাম --}}
            <div>
                <label for="nominee_name" class="mb-1 block text-sm font-semibold text-slate-700">
                    নমিনির নাম
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-user-plus"></i>
                    </span>
                    <input
                        id="nominee_name"
                        name="nominee_name"
                        type="text"
                        value="{{ old('nominee_name', auth()->user()->nominee_name) }}"
                        placeholder="নমিনির নাম লিখুন"
                        class="w-full rounded-xl border border-slate-200 bg-white pl-10 pr-3 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500 transition"
                    />
                </div>
                @error('nominee_name')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            {{-- নমিনির ফোন --}}
            <div>
                <label for="nominee_phone" class="mb-1 block text-sm font-semibold text-slate-700">
                    নমিনির ফোন নম্বর
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-phone"></i>
                    </span>
                    <input
                        id="nominee_phone"
                        name="nominee_phone"
                        type="text"
                        value="{{ old('nominee_phone', auth()->user()->nominee_phone) }}"
                        placeholder="নমিনির ফোন নম্বর লিখুন"
                        class="w-full rounded-xl border border-slate-200 bg-white pl-10 pr-3 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500 transition"
                    />
                </div>
                @error('nominee_phone')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            {{-- নমিনির সম্পর্ক --}}
            <div>
                <label for="nominee_relation" class="mb-1 block text-sm font-semibold text-slate-700">
                    নমিনির সাথে সম্পর্ক
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-people-arrows"></i>
                    </span>
                    <input
                        id="nominee_relation"
                        name="nominee_relation"
                        type="text"
                        value="{{ old('nominee_relation', auth()->user()->nominee_relation) }}"
                        placeholder="যেমন: ভাই, বোন, স্ত্রী, মা"
                        class="w-full rounded-xl border border-slate-200 bg-white pl-10 pr-3 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500 transition"
                    />
                </div>
                @error('nominee_relation')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            {{-- লোনের পরিমাণ --}}
            @php $amountOptions = $amountOptions ?? []; @endphp
            <div>
                <label for="amount" class="mb-1 block text-sm font-semibold text-slate-700">
                    লোনের পরিমাণ
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-sack-dollar"></i>
                    </span>
                    <select
                        name="amount" id="amount"
                        class="appearance-none w-full rounded-xl border border-slate-200 bg-white
                               pl-10 pr-10 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500
                               disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed transition"
                        @if(empty($amountOptions)) disabled @endif
                    >
                        @if(!empty($amountOptions))
                            <option value="" disabled {{ old('amount') ? '' : 'selected' }}>একটি পরিমাণ নির্বাচন করুন</option>
                            @foreach($amountOptions as $amount)
                                <option value="{{ $amount }}" {{ old('amount') == $amount ? 'selected' : '' }}>
                                    {{ number_format($amount) }} টাকা
                                </option>
                            @endforeach
                        @else
                            <option value="">আপনার লোন লিমিট শেষ হয়ে গেছে, নতুন লোন নিতে পারবেন না।</option>
                        @endif
                    </select>
                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-chevron-down text-xs"></i>
                    </span>
                </div>
                @error('amount')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            {{-- মেয়াদ --}}
            @php $tenureOptions = $tenureOptions ?? []; @endphp
            <div>
                <label for="tenure_months" class="mb-1 block text-sm font-semibold text-slate-700">
                    মেয়াদ (মাস)
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-hourglass-half"></i>
                    </span>
                    <select
                        name="tenure_months" id="tenure_months"
                        class="appearance-none w-full rounded-xl border border-slate-200 bg-white
                               pl-10 pr-10 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500
                               disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed transition"
                        {{ empty($tenureOptions) ? 'disabled' : '' }}
                    >
                        <option value="" disabled {{ old('tenure_months') ? '' : 'selected' }}>মেয়াদ নির্বাচন করুন</option>
                        @foreach($tenureOptions as $month)
                            <option value="{{ $month }}" {{ old('tenure_months') == $month ? 'selected' : '' }}>
                                {{ $month }} মাস
                            </option>
                        @endforeach
                        @if(empty($tenureOptions))
                            <option value="">কোনো মেয়াদ পাওয়া যায়নি।</option>
                        @endif
                    </select>
                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-chevron-down text-xs"></i>
                    </span>
                </div>
                @error('tenure_months')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            {{-- লোনের কারণ --}}
            @php $purposes = $purposes ?? []; @endphp
            <div>
                <label for="purpose" class="mb-1 block text-sm font-semibold text-slate-700">
                    লোনের কারণ
                </label>
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-list-check"></i>
                    </span>
                    <select
                        name="purpose" id="purpose"
                        class="appearance-none w-full rounded-xl border border-slate-200 bg-white
                               pl-10 pr-10 py-2.5 text-[15px] text-slate-700
                               focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500
                               disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed transition"
                        {{ empty($purposes) ? 'disabled' : '' }}
                    >
                        <option value="" disabled {{ old('purpose') ? '' : 'selected' }}>কারণ নির্বাচন করুন</option>
                        @foreach($purposes as $key => $label)
                            <option value="{{ $key }}" {{ old('purpose') == $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                        @if(empty($purposes))
                            <option value="">কোনো কারণ তালিকা পাওয়া যায়নি।</option>
                        @endif
                    </select>
                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-400">
                        <i class="fa-solid fa-chevron-down text-xs"></i>
                    </span>
                </div>
                @error('purpose')
                    <div class="mt-1 text-xs font-medium text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            @if(isset($loanLimit))
                <div class="rounded-xl border border-amber-200 bg-amber-50/70 px-3 py-2 text-xs text-amber-800">
                    মোট লোন লিমিট: <span class="font-semibold">{{ number_format($loanLimit) }} BDT</span>,
                    অবশিষ্ট: <span class="font-semibold">{{ number_format($availableLimit ?? 0) }} BDT</span>
                </div>
            @endif

            <button
                type="submit"
                class="smooth-press group mt-1 inline-flex w-full items-center justify-center gap-2 rounded-full
                       bg-gradient-to-r from-rose-600 to-red-600 px-5 py-3 text-sm font-semibold text-white
                       shadow-lg shadow-rose-600/20 ring-1 ring-inset ring-white/10
                       transition hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-offset-2
                       focus:ring-rose-500 disabled:opacity-60 disabled:cursor-not-allowed">
                <i class="fa-solid fa-paper-plane group-active:translate-y-px transition"></i>
                আবেদন করুন
            </button>
        </form>
    </div>
</div>
@endsection