{{-- ================================ --}}
{{-- DESKTOP TABLE — md and above     --}}
{{-- ================================ --}}
<div class="hidden md:block bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm text-left">
            <thead>
                <tr class="bg-primary-900 text-white text-xs uppercase tracking-wider">
                    <th class="px-5 py-4 font-semibold">@lang('S.N.')</th>
                    <th class="px-5 py-4 font-semibold">@lang('Installment Date')</th>
                    <th class="px-5 py-4 font-semibold">@lang('Given On')</th>
                    <th class="px-5 py-4 font-semibold">@lang('Delay')</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-primary-100">
                @forelse($installments as $installment)
                    @php $isOverdue = !$installment->given_at && $installment->installment_date < today(); @endphp
                    <tr class="hover:bg-primary-50 transition-colors duration-150">

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

                        {{-- Installment Date --}}
                        <td class="px-5 py-4">
                            @if ($isOverdue)
                                <span class="inline-flex items-center gap-1.5 text-rose-600 font-semibold">
                                    <i data-lucide="circle-alert" class="h-3.5 w-3.5 shrink-0"></i>
                                    {{ showDateTime($installment->installment_date, 'd M, Y') }}
                                </span>
                            @else
                                <span class="text-primary-800 font-medium">
                                    {{ showDateTime($installment->installment_date, 'd M, Y') }}
                                </span>
                            @endif
                        </td>

                        {{-- Given On --}}
                        <td class="px-5 py-4">
                            @if ($installment->given_at)
                                <span class="inline-flex items-center gap-1.5 text-emerald-600 font-medium">
                                    <i data-lucide="circle-check" class="h-3.5 w-3.5 shrink-0"></i>
                                    {{ showDateTime($installment->given_at, 'd M, Y') }}
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 text-primary-400 text-xs italic">
                                    <i data-lucide="clock" class="h-3.5 w-3.5 shrink-0"></i>
                                    @lang('Not yet')
                                </span>
                            @endif
                        </td>

                        {{-- Delay --}}
                        <td class="px-5 py-4">
                            @if ($installment->given_at)
                                @php $delayDays = $installment->given_at->diffInDays($installment->installment_date); @endphp
                                @if ($delayDays > 0)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-rose-100 text-rose-600">
                                        +{{ $delayDays }} @lang('Day')
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-600">
                                        @lang('On time')
                                    </span>
                                @endif
                            @else
                                <span class="text-primary-300 text-sm">—</span>
                            @endif
                        </td>

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

    {{-- Pagination --}}
    @if ($installments->hasPages())
        <div class="px-5 py-3 border-t border-primary-100 bg-primary-50/40">
            {{ paginateLinks($installments) }}
        </div>
    @endif
</div>

{{-- ================================ --}}
{{-- MOBILE CARDS — below md          --}}
{{-- ================================ --}}
<div class="flex flex-col gap-4 md:hidden">
    @forelse($installments as $installment)
        @php
            $isOverdue = !$installment->given_at && $installment->installment_date < today();
            $delayDays = $installment->given_at ? $installment->given_at->diffInDays($installment->installment_date) : null;
        @endphp

        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

            {{-- Card Header --}}
            <div class="flex items-center justify-between px-4 py-3 bg-primary-900">
                <span class="text-xs text-primary-300 font-medium">
                    #{{ __($loop->index + $installments->firstItem()) }}
                </span>
                @if ($installment->given_at)
                    @if ($delayDays > 0)
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-rose-500/20 text-rose-300">
                            +{{ $delayDays }} @lang('Day Delay')
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-emerald-500/20 text-emerald-300">
                            <i data-lucide="check" class="h-3 w-3"></i> @lang('On time')
                        </span>
                    @endif
                @elseif ($isOverdue)
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-rose-500/20 text-rose-300">
                        <i data-lucide="circle-alert" class="h-3 w-3"></i> @lang('Overdue')
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-white/10 text-primary-300">
                        <i data-lucide="clock" class="h-3 w-3"></i> @lang('Pending')
                    </span>
                @endif
            </div>

            {{-- Dates --}}
            <div class="grid grid-cols-2 divide-x divide-primary-100">
                <div class="px-4 py-3">
                    <p class="text-xs text-primary-400 mb-0.5">@lang('Installment Date')</p>
                    <p class="text-sm font-semibold {{ $isOverdue ? 'text-rose-600' : 'text-primary-900' }}">
                        {{ showDateTime($installment->installment_date, 'd M, Y') }}
                    </p>
                </div>
                <div class="px-4 py-3">
                    <p class="text-xs text-primary-400 mb-0.5">@lang('Given On')</p>
                    @if ($installment->given_at)
                        <p class="text-sm font-semibold text-emerald-600">
                            {{ showDateTime($installment->given_at, 'd M, Y') }}
                        </p>
                    @else
                        <p class="text-xs italic text-primary-400">@lang('Not yet')</p>
                    @endif
                </div>
            </div>

        </div>
    @empty
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft px-5 py-10 text-center text-primary-400 italic">
            {{ __($emptyMessage) }}
        </div>
    @endforelse

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