<x-layouts::app :title="__('Statement of Account - ' . ($tenant->school_name ?? $tenant->id))">
    <div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <a href="{{ route('admin.billing.baddebts.index') }}" class="inline-flex items-center rounded-xl border border-slate-200 bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-200">
            <i class="fas fa-arrow-left mr-2"></i> {{ __('Back to Debtor List') }}
        </a>
        <button type="button" onclick="window.print()" class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-50">
            <i class="fas fa-print mr-2"></i> {{ __('Print Statement') }}
        </button>
    </div>

    <flux:card>
        <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
            <div class="space-y-2 text-slate-900">
                <h3 class="text-xl font-semibold">{{ __('Statement of Account') }}</h3>
                <p class="text-sm text-slate-600">{{ __('PayRide Management') }}</p>
                <p class="text-sm text-slate-600">{{ __('Central Administration') }}</p>
                <p class="text-sm text-slate-600">admin@isptickets.com</p>
            </div>
            <div class="space-y-2 text-right text-slate-900">
                <h3 class="text-xl font-semibold">{{ $tenant->school_name ?? 'N/A' }}</h3>
                <p class="text-sm">{{ __('School ID:') }} {{ $tenant->id }}</p>
                <p class="text-sm">{{ __('Subdomain:') }} {{ $tenant->domains->first()->domain ?? 'N/A' }}</p>
            </div>
        </div>

        <div class="mt-6 overflow-x-auto">
            <table class="min-w-full table-reset divide-y divide-slate-200 border border-slate-200">
                <thead class="bg-slate-50 text-slate-600 text-left text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-4 py-3">{{ __('Date') }}</th>
                        <th class="px-4 py-3">{{ __('Invoice #') }}</th>
                        <th class="px-4 py-3">{{ __('Description') }}</th>
                        <th class="px-4 py-3">{{ __('Amount') }}</th>
                        <th class="px-4 py-3">{{ __('Status') }}</th>
                    </tr>
                </thead>
                <tbody class=" divide-y divide-slate-200">
                    @php $totalOut = 0; @endphp
                    @forelse($invoices as $invoice)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-3 text-sm text-slate-700">{{ $invoice->created_at->format('M d, Y') }}</td>
                            <td class="px-4 py-3 text-sm font-semibold text-slate-900">#{{ $invoice->id }}</td>
                            <td class="px-4 py-3 text-sm text-slate-700">{{ $invoice->description }}</td>
                            <td class="px-4 py-3 text-sm font-semibold {{ $invoice->status == 'paid' ? 'text-emerald-700' : 'text-rose-700' }}">${{ number_format($invoice->amount, 2) }}</td>
                            <td class="px-4 py-3 text-sm">
                                <flux:badge color="{{ $invoice->status == 'paid' ? 'success' : 'warning' }}">{{ strtoupper($invoice->status) }}</flux:badge>
                            </td>
                        </tr>
                        @if($invoice->status != 'paid')
                            @php $totalOut += $invoice->amount; @endphp
                        @endif
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">{{ __('No transactions recorded for this school.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot class="bg-slate-50 text-slate-900 font-semibold">
                    <tr>
                        <td colspan="3" class="px-4 py-4 text-right">{{ __('Total Outstanding Balance:') }}</td>
                        <td colspan="2" class="px-4 py-4 text-rose-700 text-lg">${{ number_format($totalOut, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </flux:card>

    <style>
        @media print {
            .btn, footer, .sidebar, #content-wrapper nav {
                display: none !important;
            }
            .card {
                border: none !important;
                box-shadow: none !important;
            }
            body {
                background-color: white !important;
                color: black !important;
            }
        }
    </style>
</x-layouts::app>
