{% extends "base.html" %}
{% block title %}Withdraw | BancaNet{% endblock %}
{% block content %}
<div class="rch-kia">
  <section class="wdr-card">
    <div class="wdr-card__head">
      <h2>Seleccionar tarjeta</h2>
      {% if has_bank_account %}
      <a href="{{ url_for('user.card') }}">Cambiar</a>
      {% endif %}
    </div>

    {% if not has_bank_account %}
    <a class="wdr-card__empty" href="{{ url_for('user.card') }}">
      <span class="wdr-card__empty-icon" aria-hidden="true">
        <svg viewBox="0 0 48 48"><rect x="6" y="14" width="36" height="22" rx="4" fill="none" stroke="currentColor" stroke-width="2.2"/><path d="M6 22h36M14 30h10" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M34 8v8M30 12h8" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
      </span>
      <span class="wdr-card__empty-text">
        <strong>Sin tarjeta registrada</strong>
        <small>Toca para agregar tu cuenta bancaria</small>
      </span>
      <span class="wdr-card__chevron" aria-hidden="true">→</span>
    </a>
    {% else %}
    <button type="button" class="wdr-card__option" id="select-card" data-selected="0" aria-pressed="false">
      <span class="wdr-card__radio" aria-hidden="true"></span>
      <span class="wdr-card__meta">
        <strong>{{ user.withdrawal_bank_name }}</strong>
        <small>{{ user.withdrawal_account_holder }}</small>
        <span>CLABE ···· {{ (user.withdrawal_clabe or '')[-4:] }}</span>
      </span>
      <span class="wdr-card__badge">Cuenta</span>
    </button>
    <p class="wdr-card__hint" id="card-hint">Selecciona la cuenta destino para continuar el retiro.</p>
    {% endif %}
  </section>

  <section class="rch-kia__card">
    <h2>Monto</h2>
    <p class="rch-kia__avail">Disponible para retiro: <strong>MX$ {{ "%.2f"|format(available_balance or 0) }}</strong></p>
    {% if bonus_balance and bonus_balance > 0 %}
    <p class="rch-kia__hint">Bono de bienvenida MX$ {{ "%.2f"|format(bonus_balance) }} (solo para comprar planes, no retirable).</p>
    {% endif %}

    {% if not has_bank_account %}
      <p class="rch-kia__hint">Primero agrega y selecciona una tarjeta arriba.</p>
    {% else %}
      {% if not has_active_investment %}
      <div class="alert" style="margin-bottom:12px;">Para retirar (incluye comisiones) necesitas un producto activo. Puedes recibir comisiones sin plan.</div>
      {% endif %}
      <form class="rch-kia__form" method="post" action="{{ url_for('user.withdraw_review') }}" id="withdraw-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="card_selected" id="card_selected" value="0">
        <label class="rch-kia__field" for="amount">
          <span>MXN</span>
          <input id="amount" name="amount" type="number" min="{{ withdrawal_min_amount or 50 }}" max="{{ withdrawal_max_amount or 20000 }}" step="0.01" required placeholder="Ingresa el monto" disabled>
        </label>
        <div class="rch-kia__chips">
          {% for amount in withdraw_amounts %}
          <button class="rch-kia__chip" type="button" data-amount="{{ amount }}" disabled>{{ amount }}</button>
          {% endfor %}
        </div>
        <label class="rch-kia__field" for="pin">
          <span>PIN</span>
          <input id="pin" name="pin" type="password" inputmode="numeric" minlength="4" maxlength="6" required placeholder="PIN de retiro" disabled>
        </label>
        <p class="rch-kia__hint">Mínimo MX$ {{ "%.0f"|format(withdrawal_min_amount or 50) }} · {{ withdrawal_schedule_label }}</p>
        <button class="rch-kia__submit" type="submit" id="withdraw-submit" disabled>Revisar retiro</button>
      </form>
    {% endif %}
  </section>

  <section class="rch-kia__note">
    <p>La solicitud se revisa antes de procesarse. El monto llega a la cuenta bancaria que selecciones arriba.</p>
    <a href="{{ url_for('user.withdrawals_history') }}">Ver historial de retiros</a>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const selectBtn = document.getElementById("select-card");
  const form = document.getElementById("withdraw-form");
  const cardSelected = document.getElementById("card_selected");
  const amount = document.getElementById("amount");
  const pin = document.getElementById("pin");
  const submit = document.getElementById("withdraw-submit");
  const hint = document.getElementById("card-hint");
  const chips = document.querySelectorAll("[data-amount]");
  const canWithdraw = {{ "true" if has_active_investment else "false" }};

  function setFormEnabled(on) {
    const enable = on && canWithdraw;
    if (amount) amount.disabled = !enable;
    if (pin) pin.disabled = !enable;
    if (submit) submit.disabled = !enable;
    chips.forEach((c) => { c.disabled = !enable; });
    if (cardSelected) cardSelected.value = on ? "1" : "0";
    if (hint) {
      hint.textContent = on
        ? (canWithdraw ? "Cuenta seleccionada. Ingresa el monto y el PIN." : "Cuenta seleccionada. Necesitas un producto activo para retirar (incluye comisiones).")
        : "Selecciona la cuenta destino para continuar el retiro.";
    }
  }

  if (selectBtn) {
    selectBtn.addEventListener("click", () => {
      const selected = selectBtn.dataset.selected === "1";
      const next = !selected;
      selectBtn.dataset.selected = next ? "1" : "0";
      selectBtn.classList.toggle("is-selected", next);
      selectBtn.setAttribute("aria-pressed", next ? "true" : "false");
      setFormEnabled(next);
    });
  }

  chips.forEach((btn) => {
    btn.addEventListener("click", () => {
      if (btn.disabled || !amount) return;
      amount.value = btn.dataset.amount || "";
      chips.forEach((c) => c.classList.remove("is-active"));
      btn.classList.add("is-active");
    });
  });

  if (amount) {
    amount.addEventListener("input", () => {
      const value = amount.value.trim();
      chips.forEach((c) => c.classList.toggle("is-active", c.dataset.amount === value));
    });
  }

  if (form) {
    form.addEventListener("submit", (event) => {
      if (!cardSelected || cardSelected.value !== "1") {
        event.preventDefault();
        if (hint) hint.textContent = "Selecciona la cuenta destino antes de continuar.";
        selectBtn && selectBtn.focus();
      }
    });
  }
})();
</script>
{% endblock %}