@extends('layouts/contentNavbarLayout')

@section('title', 'Activando cuenta')

@section('content')
<div class="row justify-content-center">
  <div class="col-lg-5 col-md-7">
    <div class="card border-0 shadow-sm">
      <div class="card-body p-4 p-md-5 text-center">

        {{-- Estado: cargando (por defecto) --}}
        <div id="state-loading">
          <div class="mb-4">
            <span class="spinner-border text-primary" style="width:3rem;height:3rem;"></span>
          </div>
          <h5 class="mb-2">Preparando tu pago</h5>
          <p class="text-muted small">Abriendo checkout seguro de ePayco…</p>
        </div>

        {{-- Estado: error --}}
        <div id="state-error" class="d-none">
          <div class="mb-3">
            <i class="bx bx-error-circle text-danger" style="font-size:3rem;"></i>
          </div>
          <h5 class="mb-2">No se pudo iniciar el pago</h5>
          <p id="error-message" class="text-muted small mb-4"></p>
          <button id="btn-retry" class="btn btn-primary w-100 fw-semibold mb-3">
            <i class="bx bx-refresh me-2"></i>Intentar de nuevo
          </button>
          <a href="{{ route('mariachi.metrics') }}" class="text-muted small d-block">Volver al panel</a>
        </div>

        {{-- Estado: checkout abierto --}}
        <div id="state-open" class="d-none">
          <div class="mb-3">
            <i class="bx bx-credit-card text-primary" style="font-size:3rem;"></i>
          </div>
          <h5 class="mb-2">Completa tu pago</h5>
          <p class="text-muted small mb-1">
            El formulario de pago está abierto en pantalla.
          </p>
          @if($activationPlan)
          <p class="fw-semibold text-primary mb-4">
            ${{ number_format($activationPlan->amount_cop, 0, ',', '.') }} COP — pago único
          </p>
          @endif
          <button id="btn-reopen" class="btn btn-outline-primary btn-sm">
            <i class="bx bx-window-open me-1"></i>¿No se ve? Abrir de nuevo
          </button>
          <div class="mt-4">
            <a href="{{ route('mariachi.metrics') }}" class="text-muted small">Cancelar y volver al panel</a>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
@endsection

@section('page-script')
<script src="{{ $epayco['checkout_js_url'] ?? 'https://checkout.epayco.co/checkout-v2.js' }}"></script>
<script>
(function () {
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
  const endpoint  = @json(route('mariachi.account.activation.checkout'));

  const stateLoading = document.getElementById('state-loading');
  const stateError   = document.getElementById('state-error');
  const stateOpen    = document.getElementById('state-open');
  const errorMsg     = document.getElementById('error-message');

  let checkoutInstance = null;

  function show(state) {
    stateLoading.classList.toggle('d-none', state !== 'loading');
    stateError.classList.toggle('d-none',   state !== 'error');
    stateOpen.classList.toggle('d-none',    state !== 'open');
  }

  function showError(msg) {
    errorMsg.textContent = msg;
    show('error');
  }

  async function startCheckout() {
    show('loading');

    let data;
    try {
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': csrfToken,
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      });
      data = await res.json();
    } catch {
      showError('Error de red. Verifica tu conexión e intenta de nuevo.');
      return;
    }

    if (!data.ok) {
      showError(data.message ?? 'Ocurrió un error al iniciar el pago.');
      return;
    }

    const { session_id, checkout_type, is_test_mode } = data.checkout;

    if (typeof ePayco === 'undefined' || !ePayco?.checkout) {
      showError('No se pudo cargar el sistema de pagos. Recarga la página e intenta de nuevo.');
      return;
    }

    checkoutInstance = ePayco.checkout.configure({
      sessionId: session_id,
      type: checkout_type,
      test: is_test_mode,
    });

    checkoutInstance.open();
    show('open');
  }

  document.getElementById('btn-retry')?.addEventListener('click', startCheckout);
  document.getElementById('btn-reopen')?.addEventListener('click', () => checkoutInstance?.open());

  // Arranca automáticamente al cargar la página
  window.addEventListener('load', startCheckout);
})();
</script>
@endsection