<x-layouts.superadmin pageTitle="Suscripciones">
    <x-page-header title="Suscripciones" subtitle="Estado de las suscripciones de cada empresa" />

    <div class="flex flex-wrap gap-2 mb-4">
        @foreach ([null => 'Todas', 'trial' => 'En prueba', 'active' => 'Activas', 'past_due' => 'Pago vencido', 'cancelled' => 'Canceladas', 'expired' => 'Vencidas'] as $value => $label)
            <a href="{{ route('superadmin.subscriptions.index', $value ? ['status' => $value] : []) }}"
               @class([
                   'px-3 py-1.5 rounded-lg text-sm font-medium transition',
                   'bg-indigo-600 text-white' => $status === $value,
                   'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50' => $status !== $value,
               ])>
                {{ $label }}
            </a>
        @endforeach
    </div>

    <x-card padding="false">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-4 py-3 text-left">Empresa</th>
                        <th class="px-4 py-3 text-left">Plan</th>
                        <th class="px-4 py-3 text-left">Estado</th>
                        <th class="px-4 py-3 text-left">Ciclo</th>
                        <th class="px-4 py-3 text-right">Monto</th>
                        <th class="px-4 py-3 text-left">Periodo actual</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($subscriptions as $sub)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 font-medium text-gray-900">{{ $sub->company?->name }}</td>
                            <td class="px-4 py-3">{{ $sub->plan?->name }}</td>
                            <td class="px-4 py-3"><x-badge :color="$sub->status->color()">{{ $sub->status->label() }}</x-badge></td>
                            <td class="px-4 py-3 text-gray-600">{{ ucfirst($sub->billing_cycle) }}</td>
                            <td class="px-4 py-3 text-right font-mono">$ {{ number_format($sub->amount, 0, ',', '.') }}</td>
                            <td class="px-4 py-3 text-gray-600 text-xs">
                                @if ($sub->current_period_start)
                                    {{ $sub->current_period_start->format('d/m/Y') }} → {{ $sub->current_period_end?->format('d/m/Y') }}
                                @else
                                    —
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6"><x-empty-state title="Sin suscripciones" /></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($subscriptions->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $subscriptions->links() }}</div>
        @endif
    </x-card>
</x-layouts.superadmin>
