{% extends "base.html" %}
{% block title %}Pago | BancaNet{% endblock %}
{% block head %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  body.app-body.user-theme:has(.bank-transfer-page) {
    background: #f3f4f6 !important;
  }
  body.app-body.user-theme:has(.bank-transfer-page) .app-shell {
    max-width: 26rem;
    margin: 0 auto;
    padding: 0 !important;
  }
  .bank-transfer-page {
    min-height: 100svh;
    width: 100%;
    background: #f3f4f6;
    color: #111827;
    padding-bottom: 1.5rem;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .bank-transfer-page h1,
  .bank-transfer-page .payment-amount,
  .bank-transfer-page .step-title,
  .bank-transfer-page .data-row .value,
  .bank-transfer-page .copy-btn {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  body.app-body.user-theme .bank-transfer-page h1,
  body.app-body.user-theme .bank-transfer-page .payment-amount {
    font-weight: 500 !important;
  }
  body.app-body.user-theme .bank-transfer-page .data-row .value {
    font-weight: 500 !important;
  }
  body.app-body.user-theme .bank-transfer-page .step-title {
    font-weight: 600 !important;
  }
  .bank-transfer-header {
    position: relative;
    height: 13rem;
    background: #48c992;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
  }
  .bank-transfer-header::before {
    content: "";
    position: absolute;
    width: 14.5rem;
    height: 14.5rem;
    right: -4rem;
    left: auto;
    bottom: -7.75rem;
    border-radius: 50%;
    background: #5ed9a8;
  }
  .bank-transfer-header::after {
    content: "";
    position: absolute;
    width: 5.5rem;
    height: 5.5rem;
    top: auto;
    right: auto;
    left: -1.6rem;
    bottom: 0.85rem;
    border-radius: 50%;
    background: #3eb882;
  }
  .bank-transfer-back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
    text-decoration: none;
  }
  .bank-transfer-back svg { width: 1.1rem; height: 1.1rem; }
  .bank-transfer-content {
    margin-top: -10.2rem;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
  }
  .bank-card {
    border-radius: 1.35rem;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
  }
  .bank-card + .bank-card { margin-top: 1rem; }
  .payment-card { padding: 1.15rem 1rem 0.35rem; }
  .payment-label { font-size: 0.78rem; color: #111827; font-weight: 300; }
  .payment-amount {
    margin-top: 0.2rem;
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    line-height: 1.1;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: #1f2937;
  }
  .payment-amount .currency {
    color: #48c992;
    font-weight: 500;
    font-size: 0.38em;
    letter-spacing: 0.06em;
    vertical-align: 0.35em;
  }
  .payment-hint {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 300;
    color: #111827;
  }
  .payment-divider {
    margin: 0.85rem 0 0.35rem;
    border: 0;
    border-top: 1px solid #f1f5f9;
  }
  .data-list { display: flex; flex-direction: column; }
  .data-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .data-row:last-child {
    border-bottom: 0;
    padding-bottom: 0.55rem;
  }
  .data-row label {
    font-size: 0.76rem;
    color: #111827;
    font-weight: 300;
    line-height: 1.25;
  }
  .data-row .value {
    font-size: 0.88rem;
    font-weight: 500 !important;
    color: #1f2937;
    word-break: break-word;
  }
  .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border: 0;
    border-radius: 0.55rem;
    background: #f3f4f6;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #48c992;
    white-space: nowrap;
    cursor: pointer;
  }
  .copy-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    fill: #48c992;
  }
  .copy-btn svg rect {
    fill: #48c992;
  }
  .steps-card { padding: 1rem 1rem 1.1rem; }
  .step-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
  }
  .step-item + .step-item { margin-top: 1rem; }
  .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #48c992;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .step-title {
    font-size: 0.92rem;
    font-weight: 600 !important;
    color: #1f2937;
  }
  .step-text {
    margin-top: 0.18rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    color: #6b7280;
  }
  .copy-toast {
    opacity: 0;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 60;
    transform: translate(-50%, 8px);
    transition: opacity 180ms ease, transform 180ms ease;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #ffffff;
  }
  .copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }
</style>
{% endblock %}
{% block content %}
{% set amount_text = "%.2f"|format(amount or 0) %}
{% set bank_name = (recharge_bank_details.bank_name if recharge_bank_details else None) or "Banco" %}
{% set account_holder = (recharge_bank_details.account_holder if recharge_bank_details else None) or "Titular" %}
{% set account_number = (recharge_bank_details.account_number if recharge_bank_details else None) or "" %}
{% set clabe_value = (recharge_bank_details.clabe if recharge_bank_details else None) or account_number or "Fuera de linea por el momento" %}
{% set concept_value = "pago" %}

<section class="bank-transfer-page">
  <header class="bank-transfer-header" aria-hidden="true"></header>

  <div class="bank-transfer-content">
    <article class="bank-card payment-card">
      <h1 class="payment-amount">${{ amount_text }} <span class="currency">MXN</span></h1>
      <p class="payment-hint">Completa la transferencia para continuar.</p>

      <hr class="payment-divider">

      <div class="data-list">
        <div class="data-row">
          <label>Clabe</label>
          <div class="value">{{ clabe_value }}</div>
          <button type="button" class="copy-btn" data-copy-value="{{ clabe_value }}" aria-label="Copiar CLABE">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="3" width="12" height="14" rx="2.5"></rect>
              <rect x="9" y="7" width="12" height="14" rx="2.5"></rect>
            </svg>
            Copiar
          </button>
        </div>

        <div class="data-row">
          <label>Banco Destino</label>
          <div class="value">{{ bank_name }}</div>
          <button type="button" class="copy-btn" data-copy-value="{{ bank_name }}" aria-label="Copiar banco destino">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="3" width="12" height="14" rx="2.5"></rect>
              <rect x="9" y="7" width="12" height="14" rx="2.5"></rect>
            </svg>
            Copiar
          </button>
        </div>

        <div class="data-row">
          <label>Beneficiario</label>
          <div class="value">{{ account_holder }}</div>
          <button type="button" class="copy-btn" data-copy-value="{{ account_holder }}" aria-label="Copiar beneficiario">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="3" width="12" height="14" rx="2.5"></rect>
              <rect x="9" y="7" width="12" height="14" rx="2.5"></rect>
            </svg>
            Copiar
          </button>
        </div>

        <div class="data-row">
          <label>Concepto (opcional)</label>
          <div class="value">{{ concept_value }}</div>
          <button type="button" class="copy-btn" data-copy-value="{{ concept_value }}" aria-label="Copiar concepto">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="3" width="12" height="14" rx="2.5"></rect>
              <rect x="9" y="7" width="12" height="14" rx="2.5"></rect>
            </svg>
            Copiar
          </button>
        </div>
      </div>
    </article>

    <article class="bank-card steps-card">
      <div class="step-item">
        <span class="step-badge">1</span>
        <div>
          <p class="step-title">Paso 1</p>
          <p class="step-text">Copia la CLABE.</p>
        </div>
      </div>
      <div class="step-item">
        <span class="step-badge">2</span>
        <div>
          <p class="step-title">Paso 2</p>
          <p class="step-text">Ingrese a tu aplicación del banco, pega la CLABE, ingrese el monto de recarga y paga.</p>
        </div>
      </div>
      <div class="step-item">
        <span class="step-badge">3</span>
        <div>
          <p class="step-title">Paso 3</p>
          <p class="step-text">Revisa si ya recibió el monto en la cuenta. (puede tener retrasos en la cuenta, si aún no has recibido, favor revisar más tarde.)</p>
        </div>
      </div>
    </article>
  </div>

  <span class="copy-toast">Copiado</span>
</section>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const toast = document.querySelector(".copy-toast");
  const copyButtons = document.querySelectorAll(".copy-btn[data-copy-value]");
  const showToast = () => {
    if (!toast) return;
    toast.classList.add("is-visible");
    window.clearTimeout(window.__copyToastTimer);
    window.__copyToastTimer = window.setTimeout(() => toast.classList.remove("is-visible"), 1400);
  };
  const copyText = async (value) => {
    try {
      await navigator.clipboard.writeText(value);
      showToast();
    } catch (_) {
      const input = document.createElement("textarea");
      input.value = value;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      input.remove();
      showToast();
    }
  };
  copyButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const value = (button.dataset.copyValue || "").trim();
      if (!value || value === "Fuera de linea por el momento" || value === "Sin registrar") return;
      copyText(value);
    });
  });
})();
</script>
{% endblock %}