@extends('layouts/layoutMaster')

@section('title', 'Conectando pago con ePayco')

@section('content')
  <div class="row justify-content-center">
    <div class="col-xl-7 col-lg-8">
      <div class="card mt-6">
        <div class="card-body p-6 p-lg-8 text-center">
          <span class="badge bg-label-primary mb-3">ePayco</span>
          <h3 class="mb-3">Abriendo checkout seguro</h3>
          <p class="text-muted mb-4">
            Estamos preparando tu pago en ePayco. Si no se abre automáticamente en unos segundos, puedes intentarlo manualmente.
          </p>

          <dl class="row small mb-5 text-start">
            <dt class="col-sm-4 text-muted">Referencia</dt>
            <dd class="col-sm-8">{{ $reference }}</dd>

            <dt class="col-sm-4 text-muted">Monto</dt>
            <dd class="col-sm-8">${{ number_format($amountCop, 0, ',', '.') }} {{ $currency }}</dd>

            <dt class="col-sm-4 text-muted">Ambiente</dt>
            <dd class="col-sm-8">{{ $isTestMode ? 'Sandbox' : 'Producción' }}</dd>
          </dl>

          <div class="d-flex gap-2 flex-wrap justify-content-center">
            <button type="button" id="epaycoLaunchButton" class="btn btn-primary">Abrir checkout ePayco</button>
            <a href="{{ $returnUrl }}" class="btn btn-label-secondary">Cancelar y volver</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="{{ $scriptUrl }}"></script>
  <script>
    (() => {
      let opened = false;

      const launch = () => {
        if (opened || typeof ePayco === 'undefined' || !ePayco.checkout) {
          return;
        }

        opened = true;

        const checkout = ePayco.checkout.configure({
          sessionId: @json($sessionId),
          type: @json($checkoutType),
          test: @json($isTestMode),
        });

        checkout.open();
      };

      document.getElementById('epaycoLaunchButton')?.addEventListener('click', launch);
      window.addEventListener('load', () => window.setTimeout(launch, 350));
    })();
  </script>
@endsection