{% extends "base.html" %}
{% block title %}Bank Card | BancaNet{% endblock %}
{% block content %}
<div class="card-kia" id="card-kia" data-has-card="{{ '1' if has_card else '0' }}">
  <h1 class="card-kia__title">Tarjeta bancaria</h1>

  {% if has_card %}
  <section class="card-kia__preview" id="card-preview">
    <p class="card-kia__bank">{{ user.withdrawal_bank_name }}</p>
    <p class="card-kia__clabe">···· {{ (user.withdrawal_clabe or '')[-4:] }}</p>
    <p class="card-kia__holder">{{ user.withdrawal_account_holder }}</p>
    <button type="button" class="card-kia__open" id="card-open-btn">Editar tarjeta</button>
  </section>
  {% else %}
  <section class="card-kia__gate" id="card-gate">
    <span class="card-kia__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/><path d="M6 15h4"/></svg>
    </span>
    <p class="card-kia__empty">Sin datos registrados</p>
    <button type="button" class="card-kia__open" id="card-open-btn">Ingresar tarjeta</button>
  </section>
  {% endif %}

  <form method="post" class="card-kia__form is-hidden" id="card-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="save">
    <label class="card-kia__field">Contraseña actual<input type="password" name="current_password" autocomplete="current-password" required></label>
    {% if user.withdrawal_pin_hash %}<label class="card-kia__field">PIN de retiro actual<input type="password" name="current_pin" inputmode="numeric" autocomplete="off" required></label>{% endif %}

    <label class="card-kia__field" for="bank_name">
      <span>Banco</span>
      <select id="bank_name" name="bank_name" required>
        <option value="">Selecciona</option>
        {% for bank in spei_banks %}
        <option value="{{ bank }}" {% if user.withdrawal_bank_name == bank %}selected{% endif %}>{{ bank }}</option>
        {% endfor %}
      </select>
    </label>

    <label class="card-kia__field" for="account_holder">
      <span>Titular</span>
      <input id="account_holder" name="account_holder" value="{{ user.withdrawal_account_holder or '' }}" required autocomplete="name" placeholder="Nombre completo">
    </label>

    <label class="card-kia__field" for="clabe">
      <span>CLABE</span>
      <input id="clabe" name="clabe" value="{{ user.withdrawal_clabe or '' }}" inputmode="numeric" pattern="[0-9]{18}" maxlength="18" required placeholder="18 dígitos">
    </label>

    <label class="card-kia__field" for="pin">
      <span>PIN de retiro</span>
      <input id="pin" name="pin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" maxlength="6" {% if not has_card %}required{% endif %} placeholder="{% if has_card %}Nuevo (opcional){% else %}4 a 6 dígitos{% endif %}">
      <small>Sirve para autorizar tus retiros. No es el NIP de tu banco.</small>
    </label>

    <button class="card-kia__submit" type="submit">Guardar</button>
    <button type="button" class="card-kia__cancel" id="card-cancel-btn">Cancelar</button>
  </form>

  {% if has_card %}
  <form method="post" class="card-kia__delete" onsubmit="return confirm('¿Eliminar la tarjeta?')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="delete">
    <label class="card-kia__field">Contraseña actual<input type="password" name="current_password" autocomplete="current-password" required></label>
    {% if user.withdrawal_pin_hash %}<label class="card-kia__field">PIN de retiro actual<input type="password" name="current_pin" inputmode="numeric" autocomplete="off" required></label>{% endif %}
    <button type="submit">Eliminar</button>
  </form>
  {% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const openBtn = document.getElementById("card-open-btn");
  const cancelBtn = document.getElementById("card-cancel-btn");
  const form = document.getElementById("card-form");
  const gate = document.getElementById("card-gate");
  const preview = document.getElementById("card-preview");
  if (!openBtn || !form) return;

  const showForm = () => {
    form.classList.remove("is-hidden");
    if (gate) gate.classList.add("is-hidden");
    if (preview) preview.classList.add("is-hidden");
  };
  const hideForm = () => {
    form.classList.add("is-hidden");
    if (gate) gate.classList.remove("is-hidden");
    if (preview) preview.classList.remove("is-hidden");
  };

  openBtn.addEventListener("click", showForm);
  if (cancelBtn) cancelBtn.addEventListener("click", hideForm);
})();
</script>
{% endblock %}