{% extends "customer/base.html" %}
{% block title %}Đăng nhập — {{ brand.ten_hien_thi }}{% endblock %}
{% block header %}
<div class="header">
  <div class="header-logo">💛</div>
  <div>
    <div class="header-title">{{ brand.ten_hien_thi }}</div>
    <div class="header-sub">Đăng nhập tài khoản</div>
  </div>
</div>
{% endblock %}

{% block content %}
<div style="max-width:360px;margin:20px auto">
  <div class="price-banner text-center mb-16" style="margin-bottom:20px">
    <div style="font-size:48px;margin-bottom:8px">💛</div>
    <div style="font-size:18px;font-weight:800">Chào mừng trở lại!</div>
    <div style="font-size:13px;opacity:.8;margin-top:4px">Đặt mua/bán vàng an toàn, tiện lợi</div>
  </div>

  <div id="alert" class="alert alert-error hidden"></div>

  <div class="form-group">
    <label class="form-label">Số điện thoại</label>
    <input id="phone" type="tel" class="form-input" placeholder="0901234567"
           inputmode="numeric" autocomplete="tel">
  </div>

  <div class="form-group">
    <label class="form-label">Mật khẩu</label>
    <input id="password" type="password" class="form-input" placeholder="••••••"
           autocomplete="current-password">
  </div>

  <button class="btn btn-gold" id="btnLogin" onclick="doLogin()">Đăng nhập</button>

  <div class="text-center mt-16">
    <span class="text-sm text-gray" style="color:#6b7280">Chưa có tài khoản? </span>
    <a href="/khach/dang-ky" class="text-sm text-gold font-bold">Đăng ký ngay</a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function doLogin() {
  const phone    = document.getElementById('phone').value.trim();
  const password = document.getElementById('password').value.trim();
  const btn      = document.getElementById('btnLogin');
  const alert    = document.getElementById('alert');

  alert.className = 'alert alert-error hidden';

  if (!phone || !password) {
    showAlert('Vui lòng điền đầy đủ thông tin', 'error'); return;
  }

  btn.innerHTML = '<span class="spinner"></span>';
  btn.disabled  = true;

  try {
    const r = await fetch('/khach/api/dang-nhap', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({phone, password}),
    });
    const d = await r.json();

    if (d.ok) {
      window.location.href = d.redirect;
    } else if (d.need_verify) {
      window.location.href = '/khach/xac-nhan?email=' + encodeURIComponent(d.email);
    } else {
      showAlert(d.msg || 'Đăng nhập thất bại', 'error');
    }
  } catch(e) {
    showAlert('Lỗi kết nối. Thử lại.', 'error');
  }

  btn.innerHTML = 'Đăng nhập';
  btn.disabled  = false;
}

function showAlert(msg, type) {
  const el = document.getElementById('alert');
  el.textContent = msg;
  el.className   = `alert alert-${type}`;
}

// Enter key
document.addEventListener('keydown', e => { if (e.key === 'Enter') doLogin(); });
</script>
{% endblock %}