@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="landmark" 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('FDR Investment')</p>
                    <h3 class="relative z-10 text-white font-extrabold text-lg">{{ __($fdr->plan->name) }}</h3>
                    <div class="relative z-10 w-10 h-1 bg-secondary-500 rounded-full mx-auto mt-3"></div>
                </div>

                {{-- Info List --}}
                <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('Plan')</span>
                        <span class="text-sm font-bold text-primary-900">{{ __($fdr->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('Profit Rate')</span>
                        <span class="text-sm font-bold text-primary-900">{{ getAmount($fdr->plan->interest_rate) }}%</span>
                    </li>
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Your Amount')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($fdr->amount) }}</span>
                    </li>

                    {{-- Profit per interval — highlighted --}}
                    <li class="flex items-center justify-between px-6 py-4 bg-emerald-50 border-t border-emerald-200">
                        <span class="text-sm font-bold text-emerald-700">
                            @lang('Profit Every') {{ $fdr->plan->installment_interval }} @lang('Days')
                        </span>
                        <span class="text-base font-extrabold text-emerald-600">
                            {{ $general->cur_sym . showAmount(($fdr->amount * $fdr->plan->interest_rate) / 100) }}
                        </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.fdr.download', $fdr->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.fdr.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('FDR Plans')
            </a>
            <a href="{{ route('user.fdr.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 FDR List')
            </a>
        </div>
    </div>
@endpush