@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="flex flex-col xl:flex-row gap-6">

        {{-- FDR Detail Card --}}
        <div class="w-full xl:w-1/3">
            <div class="bg-white rounded-2xl shadow-soft border border-primary-100 overflow-hidden">
                <div class="bg-gradient-to-br from-primary-900 to-primary-700 px-5 py-4">
                    <h6 class="text-primary-200 text-xs font-semibold uppercase tracking-widest">@lang('FDR Details')</h6>
                </div>
                <div class="divide-y divide-primary-100">

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ $fdr->fdr_number }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('FDR Number')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ $fdr->plan->name }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Plan')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ showAmount($fdr->amount) }} {{ $general->cur_text }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Deposited')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ getAmount($fdr->interest_rate) }}%</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Interest Rate')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-secondary-500">{{ showAmount($fdr->per_installment) }} {{ $general->cur_text }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Per Installment')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ $fdr->installments->count() }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Received Installment')</span>
                    </div>

                    <div class="flex items-center justify-between px-5 py-3.5 hover:bg-primary-50 transition-colors duration-150">
                        <span class="text-sm font-bold text-primary-900">{{ getAmount($fdr->profit) }} {{ $general->cur_text }}</span>
                        <span class="text-xs text-primary-500 font-medium">@lang('Profit Received')</span>
                    </div>

                </div>
            </div>
        </div>

        {{-- Installment Table --}}
        <div class="w-full xl:w-2/3">
            @include($activeTemplate . 'partials.installment_table')
        </div>

    </div>
@endsection

@push('bottom-menu')
    <div class="w-full order-4 lg:order-3">
        <div class="flex items-center gap-2 md:gap-3">

            <a href="{{ route('user.fdr.plans') }}"
               class="px-5 py-2.5 rounded-xl text-sm font-semibold border-2 border-primary-700 text-primary-700 hover:bg-primary-700 hover:text-white transition-all duration-200">
                @lang('FDR Plans')
            </a>

            <a href="{{ route('user.fdr.list') }}"
               class="px-5 py-2.5 rounded-xl text-sm font-semibold bg-primary-900 text-white border-2 border-primary-900 hover:bg-primary-700 hover:border-primary-700 transition-all duration-200 shadow-glow">
                @lang('My FDR List')
            </a>

        </div>
    </div>
@endpush