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

    {{-- Header: Search + Download --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
        <x-search-form placeholder="FDR No.| Plan" dateSearch='yes' btn="btn--base" />
        @if (request()->date || request()->search)
            <a class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold border-2 border-primary-400 text-primary-700 hover:bg-primary-100 transition-all duration-200"
               href="{{ request()->fullUrlWithQuery(['download' => 'pdf']) }}">
                <i class="la la-download"></i> @lang('Download PDF')
            </a>
        @endif
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-2xl shadow-soft border border-primary-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gradient-to-r from-primary-900 to-primary-700 text-primary-100">
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('S.N.')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('FDR No.') | @lang('Plan')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Amount')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Profit')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Next Installment')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Lock In Period')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Status')</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wider">@lang('Action')</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-primary-100">
                    @forelse($allFdr as $fdr)
                        <tr class="hover:bg-primary-50 transition-colors duration-150">

                            {{-- S.N. --}}
                            <td class="px-5 py-4 text-primary-400 font-medium">
                                {{ $loop->index + $allFdr->firstItem() }}
                            </td>

                            {{-- FDR No. | Plan --}}
                            <td class="px-5 py-4">
                                <span class="block font-bold text-primary-900">{{ $fdr->fdr_number }}</span>
                                <span class="block text-xs text-secondary-500 mt-0.5">{{ __($fdr->plan->name) }}</span>
                            </td>

                            {{-- Amount --}}
                            <td class="px-5 py-4">
                                <span class="block font-bold text-primary-900">{{ $general->cur_sym . showAmount($fdr->amount) }}</span>
                                <span class="block text-xs text-secondary-500 mt-0.5">
                                    @lang('With') {{ getAmount($fdr->interest_rate) }}% @lang('Profit Rate')
                                </span>
                            </td>

                            {{-- Profit / Per Installment --}}
                            <td class="px-5 py-4">
                                <span class="block font-bold text-primary-900">{{ $general->cur_sym . showAmount($fdr->per_installment) }}</span>
                                <span class="block text-xs text-secondary-500 mt-0.5">
                                    @lang('Per') {{ $fdr->installment_interval }} @lang('Days')
                                </span>
                            </td>

                            {{-- Next Installment --}}
                            <td class="px-5 py-4 text-primary-800 font-medium">
                                @if ($fdr->status != 2)
                                    {{ showDateTime($fdr->next_installment_date, 'd M, Y') }}
                                @else
                                    <span class="text-primary-300">@lang('N/A')</span>
                                @endif
                            </td>

                            {{-- Lock In Period --}}
                            <td class="px-5 py-4">
                                <span class="block font-medium text-primary-900">
                                    {{ showDateTime($fdr->locked_date->endOfDay(), 'd M, Y h:i A') }}
                                </span>
                                <span class="block text-xs text-secondary-500 mt-0.5">
                                    {{ diffForHumans($fdr->locked_date, 'd M, Y') }}
                                </span>
                            </td>

                            {{-- Status --}}
                            <td class="px-5 py-4">
                                @php echo $fdr->statusBadge; @endphp
                            </td>

                            {{-- Actions --}}
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <button type="button"
                                            data-id="{{ $fdr->id }}"
                                            class="closeBtn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border-2 border-primary-700 text-primary-700 hover:bg-primary-700 hover:text-white transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-primary-700"
                                            @disabled(($fdr->locked_date->endOfDay() >= now() && $fdr->status == 1) || $fdr->status == 2)>
                                        <i class="fa fa-stop-circle"></i> @lang('Close')
                                    </button>

                                    <a href="{{ route('user.fdr.instalment.logs', $fdr->fdr_number) }}"
                                       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border-2 border-secondary-500 text-secondary-600 hover:bg-secondary-500 hover:text-white transition-all duration-200">
                                        <i class="las la-wallet"></i> @lang('Installments')
                                    </a>
                                </div>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%" class="px-5 py-12 text-center text-primary-400 font-medium">
                                {{ __($emptyMessage) }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if ($allFdr->hasPages())
        <div class="mt-5">
            {{ paginateLinks($allFdr) }}
        </div>
    @endif

@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

@push('modal')
    <div class="modal fade" id="closeFdr" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" role="document">

            {{-- Modal shell — keep Bootstrap modal JS working, restyle the content --}}
            <div class="bg-white rounded-2xl shadow-soft border border-primary-100 overflow-hidden w-full">

                {{-- Header --}}
                <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-primary-900 to-primary-700">
                    <h5 class="text-white font-semibold text-base">@lang('Close FDR')</h5>
                    <button type="button" class="text-primary-200 hover:text-white transition-colors" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times text-xl"></i>
                    </button>
                </div>

                <form action="" method="post">
                    @csrf
                    <input type="hidden" name="user_token" required>

                    {{-- Body --}}
                    <div class="px-6 py-5">
                        <input type="hidden" name="id" class="transferId" required>
                        <p class="text-primary-800 text-sm">@lang('Are you sure to close this FDR?')</p>
                    </div>

                    {{-- Footer --}}
                    <div class="flex items-center justify-end gap-3 px-6 py-4 bg-primary-50 border-t border-primary-100">
                        <button type="button"
                                class="px-5 py-2 rounded-xl text-sm font-semibold bg-accent-600 text-white hover:bg-accent-700 transition-all duration-200"
                                data-bs-dismiss="modal">
                            @lang('No')
                        </button>
                        <button type="submit"
                                class="px-5 py-2 rounded-xl text-sm font-semibold bg-primary-900 text-white hover:bg-primary-700 transition-all duration-200 shadow-glow">
                            @lang('Yes')
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.closeBtn').on('click', function() {
                let modal = $('#closeFdr');
                let form = modal.find('form')[0];
                form.action = `{{ route('user.fdr.close', '') }}/${$(this).data('id')}`;
                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush