@extends('layouts.user')

@section('title', __('loans.edit_title'))
@section('page_title', __('loans.edit_title'))
@section('breadcrumb', __('loans.edit_breadcrumb'))

@section('content')
<div class="max-w-4xl mx-auto px-4 py-4">
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="bg-gradient-to-r from-amber-600 via-orange-600 to-rose-600 px-5 py-5 text-white">
            <p class="text-[10px] uppercase tracking-[0.22em] text-white/70 font-semibold">
                {{ __('loans.loan_update') }}
            </p>
            <h1 class="mt-1.5 text-xl font-extrabold leading-tight">{{ __('loans.edit_loan') }}</h1>
            <p class="mt-1.5 text-xs text-white/80">{{ __('loans.edit_hero_text') }}</p>
        </div>

        <form method="POST" action="{{ route('user.loans.update', $loan) }}" class="p-4 md:p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
            @csrf
            @method('PUT')

            <div>
                <label class="mb-1.5 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.5 text-xs font-medium text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                >
                    <option value="">{{ __('loans.select_account') }}</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" @selected(old('user_account_id', $loan->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.5 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', $loan->principal_amount) }}"
                    placeholder="{{ __('loans.enter_principal_amount') }}"
                    required
                    class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                >
                @error('principal_amount')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

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

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

            <div>
                <label class="mb-1.5 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', $loan->interest_rate) }}"
                    placeholder="{{ __('loans.enter_interest_rate') }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                >
                @error('interest_rate')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1.5 block text-xs font-semibold text-slate-700">{{ __('loans.start_date') }}</label>
                <input
                    type="date"
                    name="start_date"
                    value="{{ old('start_date', optional($loan->start_date)->format('Y-m-d')) }}"
                    class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-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.5 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.5 text-xs font-medium text-slate-800 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                >{{ old('note', $loan->note) }}</textarea>
                @error('note')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-3">
                <div class="border border-slate-200 bg-slate-50 px-3 py-2.5">
                    <div class="text-[11px] text-slate-500">{{ __('loans.current_principal') }}</div>
                    <div class="mt-1 text-base font-extrabold text-slate-800">{{ number_format((float) $loan->principal_amount, 2) }}</div>
                </div>

                <div class="border border-slate-200 bg-slate-50 px-3 py-2.5">
                    <div class="text-[11px] text-slate-500">{{ __('loans.remaining') }}</div>
                    <div class="mt-1 text-base font-extrabold text-slate-800">{{ number_format((float) $loan->remaining_amount, 2) }}</div>
                </div>

                <div class="border border-slate-200 bg-slate-50 px-3 py-2.5">
                    <div class="text-[11px] text-slate-500">{{ __('loans.status') }}</div>
                    <div class="mt-1 text-base font-extrabold text-slate-800">{{ ucfirst($loan->status) }}</div>
                </div>
            </div>

            <div class="md:col-span-2 border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs text-slate-700 leading-5">
                {!! __('loans.loan_update_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.update_loan') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection