{% extends "customer/base.html" %}
{% block title %}Đăng ký — {{ brand.ten_hien_thi }}{% endblock %}
{% block header %}
<div class="header">
  <a href="/khach/dang-nhap" class="header-back">←</a>
  <div>
    <div class="header-title">Tạo tài khoản</div>
    <div class="header-sub">{{ brand.ten_hien_thi }}</div>
  </div>
</div>
{% endblock %}

{% block content %}
<div style="max-width:360px;margin:0 auto">
  <div id="alert" class="alert alert-error hidden"></div>

  <div class="form-group">
    <label class="form-label">Họ và tên *</label>
    <input id="name" type="text" class="form-input" placeholder="Nguyễn Văn A"
           autocomplete="name">
  </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">Email *</label>
    <input id="email" type="email" class="form-input" placeholder="ten@email.com"
           autocomplete="email">
    <div class="form-hint">Dùng để nhận mã xác nhận và thông báo đơn hàng</div>
  </div>

  <div class="form-group">
    <label class="form-label">Mật khẩu *</label>
    <input id="password" type="password" class="form-input" placeholder="Tối thiểu 6 ký tự"
           autocomplete="new-password">
  </div>

  <div class="form-group">
    <label class="form-label">Xác nhận mật khẩu *</label>
    <input id="password2" type="password" class="form-input" placeholder="Nhập lại mật khẩu"
           autocomplete="new-password">
  </div>

  <button class="btn btn-gold" id="btnRegister" onclick="doRegister()">Tạo tài khoản</button>

  <div class="text-center mt-16">
    <span class="text-sm" style="color:#6b7280">Đã có tài khoản? </span>
    <a href="/khach/dang-nhap" class="text-sm text-gold font-bold">Đăng nhập</a>
  </div>

  <div class="alert alert-info mt-16" style="margin-top:16px">
    🔒 Thông tin của bạn được bảo mật tuyệt đối theo chính sách bảo mật của tiệm.
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function doRegister() {
  const name      = document.getElementById('name').value.trim();
  const phone     = document.getElementById('phone').value.trim();
  const email     = document.getElementById('email').value.trim();
  const password  = document.getElementById('password').value.trim();
  const password2 = document.getElementById('password2').value.trim();
  const btn       = document.getElementById('btnRegister');

  clearAlert();

  if (!name || !phone || !email || !password) {
    showAlert('Vui lòng điền đầy đủ thông tin', 'error'); return;
  }
  if (password !== password2) {
    showAlert('Mật khẩu xác nhận không khớp', 'error'); return;
  }
  if (password.length < 6) {
    showAlert('Mật khẩu phải từ 6 ký tự', 'error'); return;
  }

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

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

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

  btn.innerHTML = 'Tạo tài khoản';
  btn.disabled  = false;
}

function showAlert(msg, type) {
  const el = document.getElementById('alert');
  el.textContent = msg;
  el.className = `alert alert-${type}`;
}
function clearAlert() {
  document.getElementById('alert').className = 'alert alert-error hidden';
}
</script>
{% endblock %}