@php
    $actionBtnClass = 'inline-flex h-8 w-8 items-center justify-center rounded-xl border border-white/70 bg-white/55 text-[#E83646] shadow-[0_6px_14px_rgba(15,23,42,0.08)] backdrop-blur transition hover:-translate-y-0.5 hover:bg-rose-50/90 hover:shadow-[0_8px_16px_rgba(232,54,70,0.2)]';
@endphp

<script type="application/json" class="live-index-sync">@json([
    'filteredTotalAmount' => $filteredTotalAmount ?? 0,
    'filteredInvoiceCount' => $filteredInvoiceCount ?? 0,
])</script>

<div class="overflow-x-auto">
    <table class="min-w-full text-sm">
        <thead>
            <tr class="border-b border-slate-200 text-left text-slate-500">
                <th class="py-3 pr-4">Date</th>
                <th class="py-3 pr-4">Carte</th>
                <th class="py-3 pr-4">Libelle</th>
                <th class="py-3 pr-4 text-right">Montant</th>
                <th class="py-3 pr-4">Fichier</th>
                <th class="py-3 pr-4">Taille</th>
                <th class="py-3 text-center">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 text-slate-700">
            @forelse ($invoices as $invoice)
                @php
                    $previewUrl = route('credit-card-invoices.file', $invoice);
                    $downloadUrl = $previewUrl.'?download=1';
                @endphp
                <tr>
                    <td class="py-3 pr-4 whitespace-nowrap">{{ $invoice->invoice_date->format('d/m/Y') }}</td>
                    <td class="py-3 pr-4 font-medium">{{ $invoice->creditCard?->name ?? '-' }}</td>
                    <td class="py-3 pr-4">{{ $invoice->label ?: '-' }}</td>
                    <td class="py-3 pr-4 text-right font-medium whitespace-nowrap">{{ $invoice->formattedAmount() }}</td>
                    <td class="py-3 pr-4">
                        <div class="flex items-center gap-2">
                            @if($invoice->isImage())
                                <a href="{{ $previewUrl }}" target="_blank" class="block h-10 w-10 shrink-0 overflow-hidden rounded border border-slate-200">
                                    <img src="{{ $previewUrl }}" alt="" class="h-full w-full object-cover">
                                </a>
                            @else
                                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded border border-slate-200 bg-slate-100 text-[10px] font-bold uppercase text-slate-500">
                                    {{ $invoice->extension() ?: '?' }}
                                </div>
                            @endif
                            <span class="max-w-[180px] truncate" title="{{ $invoice->original_name }}">{{ $invoice->original_name }}</span>
                        </div>
                    </td>
                    <td class="py-3 pr-4 text-slate-500">{{ $invoice->formattedSize() }}</td>
                    <td class="py-3">
                        <div class="flex flex-wrap justify-center gap-1.5">
                            @if($invoice->isPreviewable())
                                <button type="button"
                                        class="cci-preview-btn {{ $actionBtnClass }}"
                                        title="Apercu"
                                        aria-label="Apercu"
                                        data-preview-url="{{ $previewUrl }}"
                                        data-preview-type="{{ $invoice->isPdf() ? 'pdf' : 'image' }}"
                                        data-preview-title="{{ $invoice->displayName() }}">
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                                    </svg>
                                </button>
                            @endif
                            <a href="{{ $downloadUrl }}"
                               class="{{ $actionBtnClass }}"
                               title="Telecharger"
                               aria-label="Telecharger">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1m-4-4-4 4m0 0 4-4m-4 4V4"/>
                                </svg>
                            </a>
                            <a href="{{ route('credit-card-invoices.edit', $invoice) }}"
                               class="{{ $actionBtnClass }}"
                               title="Modifier">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m15.1 5.1 3.8 3.8M4 20l4.2-1 10-10a1.8 1.8 0 0 0-2.6-2.6l-10 10L4 20Z"/>
                                </svg>
                            </a>
                            <button type="button"
                                    class="{{ $actionBtnClass }}"
                                    title="Supprimer"
                                    aria-label="Supprimer"
                                    onclick="openConfirmDelete({ action: @js(route('credit-card-invoices.destroy', $invoice)), message: @js('Supprimer cette facture ?') })">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M9 7V5h6v2m-8 0 1 12h8l1-12M10 11v5m4-5v5"/>
                                </svg>
                            </button>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="py-6 text-center text-slate-500">
                        @if (($filters['search'] ?? '') !== '' || ($filters['credit_card_id'] ?? '') || ($filters['date_from'] ?? '') || ($filters['date_to'] ?? ''))
                            Aucune facture ne correspond aux filtres.
                        @else
                            Aucune facture carte bancaire pour le moment.
                        @endif
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $invoices->links() }}
</div>