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

@section('content')
    <div class="flex justify-center">
        <div class="w-full max-w-2xl">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                {{-- Header --}}
                <div class="bg-gradient-to-br from-primary-900 via-primary-800 to-primary-700 px-6 py-6 text-center relative overflow-hidden">
                    <div class="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white/5"></div>
                    <div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-full bg-white/5"></div>
                    <div class="relative z-10 inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/10 mb-3">
                        <i data-lucide="hand-coins" class="h-6 w-6 text-white"></i>
                    </div>
                    <p class="relative z-10 text-primary-200 text-xs font-semibold uppercase tracking-widest mb-1">@lang('Loan Information')</p>
                    <h3 class="relative z-10 text-white font-extrabold text-lg font-mono tracking-wider">{{ $loan->loan_number }}</h3>
                    <div class="relative z-10 w-10 h-1 bg-secondary-500 rounded-full mx-auto mt-3"></div>
                </div>

                {{-- Info List --}}
                @php $per_installment = $loan->amount * $loan->plan->per_installment / 100; @endphp
                <ul class="divide-y divide-primary-100">
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Loan Name')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $loan->plan->name }}</span>
                    </li>
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Loan Amount')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($loan->amount) }}</span>
                    </li>
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Total Installments')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $loan->plan->total_installment }}</span>
                    </li>
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Per Installment')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($per_installment) }}</span>
                    </li>

                    {{-- Total Payable — highlighted --}}
                    <li class="flex items-center justify-between px-6 py-4 bg-rose-50 border-t border-rose-200">
                        <span class="text-sm font-bold text-rose-600">@lang('You Will Pay')</span>
                        <span class="text-base font-extrabold text-rose-600">
                            {{ $general->cur_sym . showAmount($per_installment * $loan->plan->total_installment) }}
                        </span>
                    </li>
                </ul>

                {{-- Footer — Download --}}
                <div class="flex justify-end px-6 py-4 border-t border-primary-100 bg-primary-50/40">
                    <a href="{{ route('user.loan.download', $loan->id) }}"
                       class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white text-sm font-semibold rounded-xl shadow-soft transition-colors duration-150">
                        <i data-lucide="file-down" class="h-4 w-4"></i>
                        @lang('Download')
                    </a>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('bottom-menu')
    <div class="col-12 order-lg-3 order-4">
        <div class="flex flex-wrap items-center gap-2 md:gap-3">
            <a href="{{ route('user.loan.plans') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 text-white text-sm font-semibold rounded-xl shadow-soft hover:bg-primary-700 transition-colors duration-150">
                <i data-lucide="layout-grid" class="h-4 w-4"></i> @lang('Loan Plans')
            </a>
            <a href="{{ route('user.loan.list') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="list" class="h-4 w-4"></i> @lang('My Loan List')
            </a>
        </div>
    </div>
@endpush