@php
    $amountInCents = (int) bcmul((string) $order->grand_total, '100', 0);
@endphp

<x-storefront-layout title="Pagar con tarjeta">
    <div class="max-w-md mx-auto px-4 py-16 text-center">
        <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Pedido {{ $order->order_number }}</h1>
        <p class="text-gray-500 dark:text-gray-400 mb-6">Total a pagar: S/ {{ number_format($order->grand_total, 2) }}</p>

        @if (session('error'))
            <div class="mb-4 inline-block px-3 py-2 rounded-md bg-red-50 text-red-700 text-sm">{{ session('error') }}</div>
        @endif

        <p class="text-sm text-gray-500 dark:text-gray-400">Abriendo la ventana de pago segura de Culqi...</p>

        <form id="culqi-form" method="POST" action="{{ route('checkout.culqi.card.charge', $order) }}">
            @csrf
            <input type="hidden" name="token_id" id="token_id">
        </form>
    </div>

    <script src="https://checkout.culqi.com/js/v4"></script>
    <script>
        Culqi.publicKey = '{{ config('services.culqi.public_key') }}';

        Culqi.settings({
            title: '{{ config('app.name') }}',
            currency: 'PEN',
            amount: {{ $amountInCents }},
        });

        Culqi.options({
            lang: 'auto',
            installments: false,
        });

        function culqi() {
            if (Culqi.token) {
                document.getElementById('token_id').value = Culqi.token.id;
                document.getElementById('culqi-form').submit();
            } else if (Culqi.error) {
                alert(Culqi.error.user_message);
            }
        }

        Culqi.open();
    </script>
</x-storefront-layout>