@php
    $isAr = $view === 'ar';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header
            :title="__('Aged Receivables & Payables')"
            :subtitle="__('Who owes you and who you owe, bucketed by how overdue the balance is.')"
        >
            <a href="{{ route('reports.index') }}"
               class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="arrow-right" class="h-4 w-4 rotate-180" />
                {{ __('All reports') }}
            </a>
            <x-secondary-button onclick="window.print()">
                <x-icon name="arrow-down-tray" class="h-4 w-4 text-slate-400" />
                {{ __('Print') }}
            </x-secondary-button>
        </x-page-header>

        {{-- AR / AP toggle --}}
        <div class="inline-flex rounded-xl border border-slate-200 bg-slate-50 p-1">
            <button type="button" wire:click="$set('view', 'ar')"
                @class([
                    'rounded-lg px-4 py-2 text-sm font-semibold transition',
                    'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $isAr,
                    'text-slate-500 hover:text-slate-700' => ! $isAr,
                ])>
                {{ __('Aged Receivables') }}
            </button>
            <button type="button" wire:click="$set('view', 'ap')"
                @class([
                    'rounded-lg px-4 py-2 text-sm font-semibold transition',
                    'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => ! $isAr,
                    'text-slate-500 hover:text-slate-700' => $isAr,
                ])>
                {{ __('Aged Payables') }}
            </button>
        </div>

        {{-- KPI cards --}}
        <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-card class="flex items-start gap-4 p-5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm ring-1 ring-white/40" style="background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                        <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <p class="mt-1 truncate text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</p>
                        <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500">
                            {{ $kpi['sub'] }}
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        {{-- Ageing matrix --}}
        <x-card class="overflow-hidden">
            <div class="flex items-center justify-between border-b border-slate-100 p-5">
                <h2 class="text-base font-semibold text-slate-900">
                    {{ $isAr ? __('Receivables by Customer') : __('Payables by Supplier') }}
                </h2>
                <span class="text-xs text-slate-400">{{ __('Amounts in') }} {{ $baseCode }}</span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ $isAr ? __('Customer') : __('Supplier') }}</th>
                            @foreach ($buckets as $key => $label)
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ $label }}</th>
                            @endforeach
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Total') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($aging['rows'] as $row)
                            <tr class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $row['name'] }}</td>
                                @foreach ($buckets as $key => $label)
                                    @php $amt = $row['buckets'][$key]; @endphp
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $amt > 0 && $key !== 'current' ? 'text-rose-600 font-medium' : ($amt > 0 ? 'text-slate-700' : 'text-slate-300') }}">
                                        {{ $amt > 0 ? number_format($amt, 2) : '—' }}
                                    </td>
                                @endforeach
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-bold tabular-nums text-slate-900">{{ number_format($row['total'], 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ count($buckets) + 2 }}" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="check-circle"
                                        :title="$isAr ? __('No outstanding receivables') : __('No outstanding payables')"
                                        :message="$isAr ? __('Every invoice is settled, nothing is owed to the business.') : __('Every supplier bill is settled, the business owes nothing.')"
                                        class="border-0 bg-transparent py-0"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if (! empty($aging['rows']))
                        <tfoot>
                            <tr class="border-t-2 border-slate-200 bg-slate-50/80 text-sm font-bold text-slate-900">
                                <td class="px-3 lg:px-4 py-4">{{ __('Total') }}</td>
                                @foreach ($buckets as $key => $label)
                                    <td class="px-3 lg:px-4 py-4 text-right tabular-nums">{{ number_format($aging['bucketTotals'][$key], 2) }}</td>
                                @endforeach
                                <td class="px-3 lg:px-4 py-4 text-right tabular-nums">{{ number_format($aging['grandTotal'], 2) }}</td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
        </x-card>
    </div>
</div>