@extends('layouts.user')

@section('title', __('loans.create_title'))
@section('page_title', __('loans.create_title'))
@section('breadcrumb', __('loans.create_breadcrumb'))

@section('content')
<div class="max-w-4xl mx-auto px-3 py-4">
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="bg-gradient-to-r from-indigo-700 via-slate-900 to-slate-900 px-4 py-4 text-white">
            <p class="text-[10px] uppercase tracking-[0.22em] text-white/70 font-semibold">
                {{ __('loans.loan_entry') }}
            </p>
            <h1 class="mt-1 text-lg font-bold leading-tight">{{ __('loans.create_new_loan') }}</h1>
            <p class="mt-1 text-xs text-white/80">{{ __('loans.create_hero_text') }}</p>
        </div>

        <form method="POST" action="{{ route('user.loans.store') }}" class="grid grid-cols-1 gap-3 p-4 md:grid-cols-2 md:gap-4 md:p-4">
            @csrf

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">
                    {{ __('loans.receive_account') }} <span class="text-rose-500">*</span>
                </label>
                <select
                    name="user_account_id"
                    required
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                    <option value="">{{ __('loans.select_account') }}</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" @selected(old('user_account_id') == $account->id)>
                            {{ $account->name }} ({{ strtoupper($account->type) }})
                        </option>
                    @endforeach
                </select>
                @error('user_account_id')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">
                    {{ __('loans.principal_amount') }} <span class="text-rose-500">*</span>
                </label>
                <input
                    type="number"
                    step="any"
                    min="0"
                    name="principal_amount"
                    value="{{ old('principal_amount') }}"
                    placeholder="{{ __('loans.enter_principal_amount') }}"
                    required
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('principal_amount')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.lender_name') }}</label>
                <input
                    type="text"
                    name="lender_name"
                    value="{{ old('lender_name') }}"
                    placeholder="{{ __('loans.enter_lender_name') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('lender_name')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.loan_no_ref') }}</label>
                <input
                    type="text"
                    name="loan_no"
                    value="{{ old('loan_no') }}"
                    placeholder="{{ __('loans.enter_loan_reference') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('loan_no')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.interest_rate') }}</label>
                <input
                    type="number"
                    step="any"
                    min="0"
                    name="interest_rate"
                    value="{{ old('interest_rate') }}"
                    placeholder="{{ __('loans.enter_interest_rate') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('interest_rate')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.start_date') }}</label>
                <input
                    type="date"
                    name="start_date"
                    value="{{ old('start_date') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('start_date')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.posted_at') }}</label>
                <input
                    type="datetime-local"
                    name="posted_at"
                    value="{{ old('posted_at') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >
                @error('posted_at')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('loans.note') }}</label>
                <textarea
                    name="note"
                    rows="4"
                    placeholder="{{ __('loans.write_additional_note') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100"
                >{{ old('note') }}</textarea>
                @error('note')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2 border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs leading-5 text-slate-700">
                {!! __('loans.loan_create_hint') !!}
            </div>

            <div class="md:col-span-2 flex justify-end gap-2 pt-1">
                <a href="{{ route('user.loans.index') }}"
                   class="border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 hover:border-slate-400">
                    {{ __('loans.back') }}
                </a>

                <button
                    type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-slate-800"
                >
                    {{ __('loans.save_loan') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection