{% extends "base.html" %}
{% from "user/_perfil_icons.html" import ico %}
{% block title %}My Account | BancaNet{% endblock %}
{% block content %}
<div class="perfil-page">
  <div class="perfil-banner-wrap">
  <section class="perfil-banner">
    <div class="perfil-banner__glow" aria-hidden="true"></div>
    <div class="perfil-banner__inner">
      <div class="perfil-banner__top">
        <div class="perfil-avatar" aria-hidden="true">
          <svg viewBox="0 0 24 24"><path d="M12 3.8c1.9 0 3.4 1.5 3.4 3.3S13.9 10.4 12 10.4 8.6 8.9 8.6 7.1 10.1 3.8 12 3.8z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M5.2 18.8c.8-2.8 3.2-4.4 6.8-4.4s6 1.6 6.8 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
        </div>
        <div class="perfil-identity__text">
          <p class="perfil-kicker">{{ t('profile.account') }}</p>
          <h1>{{ user.phone }}</h1>
          <strong class="perfil-wallet__amount"><em>MX$</em> {{ "%.2f"|format(total_balance or 0) }}</strong>
        </div>
      </div>
      <div class="perfil-wallet__actions">
        <a href="{{ url_for('user.recharge') }}">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 18V7.5M8.8 10.8 12 7.5l3.2 3.3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          {{ t('profile.recharge') }}
        </a>
        <a class="is-outline" href="{{ url_for('user.withdraw') }}">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v10.5M15.2 13.2 12 16.5 8.8 13.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          {{ t('profile.withdraw') }}
        </a>
      </div>
    </div>
  </section>
  </div>

  <section class="perfil-gift" aria-label="Codigo sorpresa">
    <label class="perfil-gift__label" for="surprise_code_input">Codigo sorpresa</label>
    <form class="perfil-gift__form" method="post" action="{{ url_for('user.claim_surprise_code') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input id="surprise_code_input" type="text" name="surprise_code" placeholder="Introduce tu codigo" autocomplete="off" maxlength="32">
      <button type="submit" id="cuenta-surprise-btn">Canjear</button>
    </form>
    {% if active_discount %}
    <p class="perfil-gift__hint" id="cuenta-surprise-hint">Descuento del {{ active_discount.surprise_code.value|float|round(2) }}% activo para tu próxima compra.</p>
    {% endif %}
  </section>

  <section class="perfil-metrics" aria-label="Resumen">
    <article>
      <span class="perfil-metrics__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M7 3.5v2M17 3.5v2M4.5 9h15M6.5 5.5h11A2 2 0 0 1 19.5 7.5v11a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 13h2v2h-2zM13.5 13h2v2h-2z" fill="currentColor"/></svg>
      </span>
      <div class="perfil-metrics__body">
        <span>Hoy</span>
        <strong>MX$ {{ "%.2f"|format(today_earnings or 0) }}</strong>
      </div>
    </article>
    <article>
      <span class="perfil-metrics__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M4.5 18.5V7.5L12 4l7.5 3.5v11L12 21.5 4.5 18.5z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 11.5v7M8.2 13.2 12 15l3.8-1.8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <div class="perfil-metrics__body">
        <span>Totales</span>
        <strong>MX$ {{ "%.2f"|format(lifetime_earnings or 0) }}</strong>
      </div>
    </article>
    <article>
      <span class="perfil-metrics__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M16.2 8.2a3.2 3.2 0 1 0-3.4-5.4 3.2 3.2 0 0 0 3.4 5.4zM7.8 8.2A3.2 3.2 0 1 1 11.2 2.8 3.2 3.2 0 0 1 7.8 8.2z" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M3.8 19.5c.7-2.6 2.7-4 6-4s5.3 1.4 6 4M14.2 15.5c1.1-.4 2.4-.5 3.8-.5 3.3 0 5.3 1.4 6 4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
      </span>
      <div class="perfil-metrics__body">
        <span>Comisiones</span>
        <strong>MX$ {{ "%.2f"|format(total_commission or 0) }}</strong>
      </div>
    </article>
  </section>

  <section class="perfil-block">
    <h2 class="perfil-section-title">{{ t('profile.ops') }}</h2>
    <div class="perfil-tiles">
      <a href="{{ url_for('user.withdrawals_history') }}">
        {{ ico('retiros') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.withdrawals') }}</strong><small>{{ t('profile.history') }}</small></span>
      </a>
      <a href="{{ url_for('user.reports') }}">
        {{ ico('recargas') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.recharges') }}</strong><small>{{ t('profile.history') }}</small></span>
      </a>
      <a href="{{ url_for('user.earnings_history') }}">
        {{ ico('ganancias') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.earnings') }}</strong><small>{{ t('profile.history') }}</small></span>
      </a>
      <a href="{{ url_for('user.fortuna') }}">
        {{ ico('suerte') }}
        <span class="perfil-tiles__text"><strong>Fortuna</strong></span>
      </a>
    </div>
  </section>

  <section class="perfil-block">
    <h2 class="perfil-section-title">{{ t('profile.account_section') }}</h2>
    <div class="perfil-tiles">
      <a href="{{ url_for('user.share') }}">
        {{ ico('invitar') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.invite') }}</strong><small>{{ t('profile.code') }}</small></span>
      </a>
      <a href="{{ url_for('user.card') }}">
        {{ ico('tarjeta') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.card') }}</strong><small>{{ t('profile.bank') }}</small></span>
      </a>
      <button type="button" id="perfil-pwd-open" class="perfil-tiles__btn">
        {{ ico('password') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.password') }}</strong><small>{{ t('profile.security') }}</small></span>
      </button>
      <a href="{{ url_for('user.about') }}">
        {{ ico('ajustes') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.settings') }}</strong><small>{{ t('profile.info') }}</small></span>
      </a>
      <button type="button" id="cuenta-clear-cache">
        {{ ico('cache') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.cache') }}</strong><small>{{ t('profile.clear') }}</small></span>
      </button>
      <a class="is-danger" href="{{ url_for('auth.logout') }}">
        {{ ico('salir') }}
        <span class="perfil-tiles__text"><strong>{{ t('profile.logout') }}</strong><small>{{ t('profile.close') }}</small></span>
      </a>
    </div>
  </section>

  <section class="perfil-footer-banner" aria-label="Banner">
    <img
      src="{{ url_for('static', filename='images/9878799879.png') }}?v=1"
      alt=""
      width="1672"
      height="941"
      loading="lazy"
      decoding="async"
    >
  </section>
</div>

<div class="pwd-modal" id="pwd-modal" hidden>
  <button type="button" class="pwd-modal__backdrop" data-pwd-close aria-label="Cerrar"></button>
  <section class="pwd-modal__panel" role="dialog" aria-modal="true" aria-labelledby="pwd-modal-title">
    <button type="button" class="pwd-modal__close" data-pwd-close aria-label="Cerrar">&times;</button>
    <h2 id="pwd-modal-title">{{ t('pwd.title') }}</h2>
    <p class="pwd-modal__hint">{{ t('pwd.hint') }}</p>
    <form method="post" action="{{ url_for('security.change_password') }}" class="pwd-modal__form" autocomplete="off">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <label class="pwd-modal__field">
        <span>Contraseña actual</span>
        <input type="password" name="current_password" autocomplete="current-password" required>
      </label>
      <label class="pwd-modal__field">
        <span>{{ t('pwd.new') }}</span>
        <input type="password" name="password" minlength="6" maxlength="128" placeholder="{{ t('pwd.placeholder') }}" autocomplete="new-password" required>
      </label>
      <label class="pwd-modal__field">
        <span>{{ t('pwd.confirm') }}</span>
        <input type="password" name="confirm_password" minlength="6" maxlength="128" placeholder="{{ t('pwd.repeat') }}" autocomplete="new-password" required>
      </label>
      <label class="pwd-modal__confirm">
        <input type="checkbox" name="confirm_change" value="y" required>
        <span>Confirmo que quiero cambiar mi contraseña</span>
      </label>
      <button class="pwd-modal__submit" type="submit">{{ t('pwd.save') }}</button>
    </form>
  </section>
</div>
{% if surprise_notice %}
<div class="surprise-announcement" id="surprise-announcement" role="dialog" aria-modal="true" aria-labelledby="surprise-announcement-title">
  <button class="surprise-announcement__backdrop" type="button" data-surprise-close aria-label="Cerrar anuncio"></button>
  <section class="surprise-announcement__card">
    <div class="surprise-announcement__icon" aria-hidden="true">{% if surprise_notice.kind == 'discount' %}%{% else %}${% endif %}</div>
    <p class="surprise-announcement__kicker">Código sorpresa</p>
    <h2 id="surprise-announcement-title">{{ surprise_notice.title }}</h2>
    <p>{{ surprise_notice.message }}</p>
    <button class="surprise-announcement__accept" type="button" data-surprise-close>Entendido</button>
  </section>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
(() => {
  const cacheBtn = document.getElementById("cuenta-clear-cache");
  if (cacheBtn) {
    cacheBtn.addEventListener("click", () => {
      try { localStorage.clear(); sessionStorage.clear(); } catch (e) {}
      const label = cacheBtn.querySelector("strong");
      if (!label) return;
      const prev = label.textContent;
      label.textContent = "Cache eliminada";
      setTimeout(() => { label.textContent = prev; }, 1600);
    });
  }

  const pwdModal = document.getElementById("pwd-modal");
  const pwdOpen = document.getElementById("perfil-pwd-open");
  if (pwdModal && pwdOpen) {
    const openPwd = () => {
      pwdModal.hidden = false;
      document.body.classList.add("pwd-modal-open");
      const first = pwdModal.querySelector('input[name="current_password"]');
      if (first) first.focus();
    };
    const closePwd = () => {
      pwdModal.hidden = true;
      document.body.classList.remove("pwd-modal-open");
    };
    pwdOpen.addEventListener("click", openPwd);
    pwdModal.querySelectorAll("[data-pwd-close]").forEach((el) => el.addEventListener("click", closePwd));
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && !pwdModal.hidden) closePwd();
    });
  }

  const announcement = document.getElementById("surprise-announcement");
  if (announcement) {
    const close = () => announcement.remove();
    announcement.querySelectorAll("[data-surprise-close]").forEach((button) => button.addEventListener("click", close));
    document.addEventListener("keydown", (event) => { if (event.key === "Escape") close(); }, { once: true });
  }
})();
</script>
{% endblock %}