<x-layouts.tenant pageTitle="Pagos">
    <x-page-header title="Pagos" subtitle="Estructura base para pagos manuales y Wompi.">
        <form method="POST" action="{{ route('tenant.payments.create-pending') }}">
            @csrf
            <x-btn type="submit">Crear pago pendiente</x-btn>
        </form>
    </x-page-header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <x-card title="Pasarelas">
            <div class="space-y-3">
                @foreach ($drivers as $driver)
                    <div class="flex items-center justify-between rounded-lg border border-gray-100 p-3">
                        <div>
                            <p class="font-semibold text-gray-900">{{ $driver['name'] }}</p>
                            <p class="text-xs text-gray-500">{{ $driver['key'] }}</p>
                        </div>
                        <x-badge :color="$driver['enabled'] ? 'emerald' : 'gray'">{{ $driver['enabled'] ? 'Activa' : 'Inactiva' }}</x-badge>
                    </div>
                @endforeach
            </div>
        </x-card>

        <x-card title="Configuración Wompi" class="lg:col-span-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div class="rounded-lg bg-gray-50 p-3">
                    <p class="text-gray-500">Ambiente</p>
                    <p class="font-semibold text-gray-900">{{ config('payments.drivers.wompi.environment') }}</p>
                </div>
                <div class="rounded-lg bg-gray-50 p-3">
                    <p class="text-gray-500">Llave pública</p>
                    <p class="font-semibold text-gray-900">{{ config('payments.drivers.wompi.public_key') ? 'Configurada' : 'Pendiente' }}</p>
                </div>
                <div class="rounded-lg bg-gray-50 p-3">
                    <p class="text-gray-500">Llave privada</p>
                    <p class="font-semibold text-gray-900">{{ config('payments.drivers.wompi.private_key') ? 'Configurada' : 'Pendiente' }}</p>
                </div>
                <div class="rounded-lg bg-gray-50 p-3">
                    <p class="text-gray-500">Integridad</p>
                    <p class="font-semibold text-gray-900">{{ config('payments.drivers.wompi.integrity_key') ? 'Configurada' : 'Pendiente' }}</p>
                </div>
            </div>
        </x-card>
    </div>

    <x-card title="Pagos de suscripción" class="mt-6">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <thead class="bg-gray-50 text-left text-xs font-semibold uppercase text-gray-500">
                    <tr>
                        <th class="px-4 py-3">Referencia</th>
                        <th class="px-4 py-3">Driver</th>
                        <th class="px-4 py-3">Estado</th>
                        <th class="px-4 py-3">Valor</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($payments as $payment)
                        <tr>
                            <td class="px-4 py-3 font-medium text-gray-900">{{ $payment->reference }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $payment->driver }}</td>
                            <td class="px-4 py-3"><x-badge :color="$payment->status->color()">{{ $payment->status->label() }}</x-badge></td>
                            <td class="px-4 py-3 text-gray-600">$ {{ number_format($payment->amount, 0, ',', '.') }} {{ $payment->currency }}</td>
                            <td class="px-4 py-3 text-right">
                                <form method="POST" action="{{ route('tenant.payments.checkout', $payment) }}">
                                    @csrf
                                    <x-btn size="sm" variant="secondary">Checkout</x-btn>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8">
                                <x-empty-state title="Sin pagos" message="Crea un pago pendiente para iniciar el flujo." />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $payments->links() }}</div>
    </x-card>
</x-layouts.tenant>
