@php
$currency = $brandCurrency;
@endphp
<div class="mx-auto max-w-screen-xl">
    @if ($payment['name'] == 'WebPay')
    @if ($responseCode == '0')
    <div id="content-to-download" class="p-4 md:p-4 max-w-screen-md mx-auto mt-20 bg-white dark:bg-gray-900">
        <div class="mb-6 text-center">
            <div class="">
                <h2 class="text-2xl dark:text-white">Tu pago ha sido</h2>
                <h2 class="text-2xl dark:text-white"><strong>realizado con éxito!</strong></h2>
                <h2 class="text-2xl dark:text-white">🎉</h2>
            </div>
            <div class="text-lg dark:text-gray-400 mt-2">
                <span>Has pagado <strong>{{ $currency['symbol'] }} {{ number_format($total, $currency['decimals'],
                        $currency['decimal_separator'], $currency['thousands_separator']) }}</strong> a las
                    <strong>{{ $transactionDate }}</strong></span>
            </div>
            <div class="text-lg dark:text-gray-400 mt-2">
                <span>Si quieres ver el estado de tu pedido entra en</span>
                <a href="{{ route('orders') }}"
                    class="items-center whitespace-nowrap decoration-red-700 decoration-4 md:hover:underline underline-offset-6">
                    <strong class="text-red-600 dark:text-red-400 font-medium">
                        Mis Pedidos
                    </strong>
                </a>
            </div>
        </div>
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <tbody>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Fecha transacción
                    </th>
                    <td class="px-6 py-4">
                        {{ $transactionDate }}
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        N° Orden
                    </th>
                    <td class="px-6 py-4">
                        {{ $buyOrder }}
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Medio de pago
                    </th>
                    <td class="px-6 py-4">
                        Webpay
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Código de autorización
                    </th>
                    <td class="px-6 py-4">
                        {{ $authorizationCode }}
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Tipo de tarjeta
                    </th>
                    <td class="px-6 py-4">
                        {{ $paymentTypeCode }}
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Últimos dígitos tarjeta
                    </th>
                    <td class="px-6 py-4">
                        {{ $cardNumber }}
                    </td>
                </tr>
                @if ($installmentsNumber)
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Número de cuotas
                    </th>
                    <td class="px-6 py-4">
                        {{ $installmentsNumber }}
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Monto de cuotas
                    </th>
                    <td class="px-6 py-4">
                        {{ $currency['symbol'] }} {{ number_format($installmentsAmount, $currency['decimals'],
                        $currency['decimal_separator'], $currency['thousands_separator']) }}
                    </td>
                </tr>
                @endif

                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        Total
                    </th>
                    <td class="px-6 py-4">
                        {{ $currency['symbol'] }} {{ number_format($total, $currency['decimals'],
                        $currency['decimal_separator'], $currency['thousands_separator']) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="p-4 md:p-4 max-w-screen-md mx-auto text-right">
        <button id="download-button" type="button"
            class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
            Descargar Comprobante
        </button>

    </div>
    @else
    <div id="content-to-download" class="p-4 md:p-4 max-w-screen-md mx-auto mt-20">
        <div class="mb-6 text-center">
            @if ($status == 'error')
            <div class="">
                <h2 class="text-2xl dark:text-white">Al parecer ocurrió un error por:
                    <strong>{{ $responseCodeErrorText }}</strong>
                </h2>
                <h2 class="text-2xl dark:text-white"><strong>Intenta nuevamente!</strong></h2>
                <h2 class="text-2xl dark:text-white">🥺</h2>
            </div>
            @endif
            @if ($status == 'aborted')
            <div class="">
                <h2 class="text-2xl dark:text-white">Has cancelado la transacción en el formulario de pago.
                </h2>
                <h2 class="text-2xl dark:text-white"><strong>Intenta nuevamente!</strong></h2>
                <h2 class="text-2xl dark:text-white">😭</h2>
            </div>
            @endif
            @if ($status == 'timeout')
            <div class="">
                <h2 class="text-2xl dark:text-white">Superaste el tiempo máximo que puedes estar en el
                    formulario de pago (10 minutos). La transacción fue cancelada por WebPay.</h2>
                <h2 class="text-2xl dark:text-white"><strong>Intenta nuevamente!</strong></h2>
                <h2 class="text-2xl dark:text-white">⏱</h2>
            </div>
            @endif
            <div class="p-4 md:p-4 max-w-screen-md mx-auto text-center">
                <button type="button" wire:click="reOrder()"
                    class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
                    Reintentar Pago
                </button>
            </div>
        </div>
    </div>
    @endif
    @else
    <div id="content-to-download" class="p-4 md:p-4 max-w-screen-md mx-auto mt-20 bg-white dark:bg-gray-900">
        <div class="mb-6 text-center">
            <div class="">
                <h2 class="text-2xl dark:text-white">Tu pedido ha sido</h2>
                <h2 class="text-2xl dark:text-white"><strong>realizado con éxito!</strong></h2>
                <h2 class="text-2xl dark:text-white">🎉</h2>
            </div>
            <div class="text-lg dark:text-gray-400 mt-2">
                <span>Si quieres ver el estado de tu pedido entra en</span>
                <a href="{{ route('orders') }}"
                    class="items-center whitespace-nowrap decoration-red-700 decoration-4 md:hover:underline underline-offset-6">
                    <strong class="text-red-600 dark:text-red-400 font-medium">
                        Mis Pedidos
                    </strong>
                </a>
            </div>
        </div>
    </div>
    @endif

</div>