{% extends "customer/base.html" %}
{% block title %}Đặt lệnh {{ 'mua' if order_type == 'mua' else 'bán' }} vàng{% endblock %}
{% block header %}
<div class="header">
  <a href="/khach/trang-chu" class="header-back">←</a>
  <div>
    <div class="header-title">{{ '🛒 Đặt mua vàng' if order_type == 'mua' else '💰 Đặt bán vàng' }}</div>
    <div class="header-sub">{{ customer.name }}</div>
  </div>
</div>
{% endblock %}

{% block content %}
<div id="alertBox" class="alert alert-error hidden"></div>

<!-- Loại giao dịch -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px">
  <a href="/khach/dat-lenh?type=mua"
     class="btn {{ 'btn-green' if order_type == 'mua' else 'btn-outline' }}"
     style="{{ '' if order_type == 'mua' else 'border-color:#16a34a;color:#16a34a' }}">
    🛒 Mua vàng
  </a>
  <a href="/khach/dat-lenh?type=ban"
     class="btn {{ 'btn-red' if order_type == 'ban' else 'btn-outline' }}"
     style="{{ '' if order_type == 'ban' else 'border-color:#dc2626;color:#dc2626' }}">
    💰 Bán vàng
  </a>
</div>

<div class="card">
  <!-- Giá hiện tại -->
  <div class="card-title">Giá vàng hiện tại</div>
  <div id="priceInfo" style="text-align:center;padding:8px;color:#9ca3af">Đang tải giá...</div>
</div>

<div class="card">
  <div class="card-title">Thông tin đơn hàng</div>

  <div class="form-group">
    <label class="form-label">Loại vàng *</label>
    <select id="loaiVang" class="form-input" onchange="updatePrice()">
      <option value="">-- Chọn loại vàng --</option>
    </select>
  </div>

  <div style="display:grid;grid-template-columns:2fr 1fr;gap:10px">
    <div class="form-group">
      <label class="form-label">Số lượng *</label>
      <input id="soLuong" type="number" class="form-input" placeholder="0"
             min="0.01" step="0.01" inputmode="decimal" oninput="calcTotal()">
    </div>
    <div class="form-group">
      <label class="form-label">Đơn vị</label>
      <select id="donVi" class="form-input" onchange="calcTotal()">
        <option value="chi">Chỉ</option>
        <option value="luong">Lượng</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="form-label">Giá đặt (đồng/chỉ)</label>
    <input id="giaDat" type="text" class="form-input" readonly
           style="background:#f9fafb;color:#374151;font-weight:700">
    <div class="form-hint">Giá tự động theo bảng giá hiện tại</div>
  </div>

  <div class="form-group">
    <label class="form-label">Ghi chú (không bắt buộc)</label>
    <input id="ghiChu" type="text" class="form-input" placeholder="Ví dụ: giao hàng tại tiệm">
  </div>

  <!-- Tổng tiền -->
  <div id="totalBox" class="hidden"
       style="background:var(--gold-bg);border:1.5px solid var(--gold-border);
              border-radius:10px;padding:14px;margin-bottom:16px">
    <div class="flex justify-between items-center">
      <span class="text-sm" style="color:#6b7280">Thành tiền:</span>
      <span style="font-size:22px;font-weight:800;color:var(--gold)" id="totalAmt">0 đ</span>
    </div>
    <div class="text-xs" style="color:#9ca3af;margin-top:4px" id="totalDetail"></div>
  </div>
</div>

{% if order_type == 'mua' %}
<div class="alert alert-info">
  💳 Sau khi đặt lệnh, bạn sẽ nhận mã QR chuyển khoản MB Bank để thanh toán.
  Tiệm xác nhận sau khi nhận được tiền.
</div>
{% else %}
<div class="alert alert-info">
  💰 Sau khi đặt lệnh bán, nhân viên tiệm sẽ liên hệ xác nhận và hướng dẫn giao vàng.
</div>
{% endif %}

<button class="btn {{ 'btn-green' if order_type == 'mua' else 'btn-red' }}"
        id="btnOrder" onclick="placeOrder()" style="margin-top:8px">
  {{ '✅ Xác nhận đặt mua' if order_type == 'mua' else '✅ Xác nhận đặt bán' }}
</button>
{% endblock %}

{% block bottom_nav %}
<nav class="bottom-nav">
  <a href="/khach/trang-chu" class="nav-item">
    <span class="icon">📊</span>Giá vàng
  </a>
  <a href="/khach/dat-lenh?type=mua" class="nav-item {{ 'active' if order_type == 'mua' else '' }}">
    <span class="icon">🛒</span>Mua
  </a>
  <a href="/khach/dat-lenh?type=ban" class="nav-item {{ 'active' if order_type == 'ban' else '' }}">
    <span class="icon">💰</span>Bán
  </a>
  <a href="/khach/don-hang" class="nav-item">
    <span class="icon">📋</span>Đơn hàng
  </a>
</nav>
{% endblock %}

{% block scripts %}
<script>
const ORDER_TYPE = '{{ order_type }}';
let currentPrice = 0;
let prices = [];

async function loadPrices() {
  try {
    const r = await fetch('/khach/api/gia-vang');
    const d = await r.json();
    if (!d.ok) return;

    prices = d.prices;
    const sel = document.getElementById('loaiVang');
    sel.innerHTML = '<option value="">-- Chọn loại vàng --</option>' +
      prices.map(p => `<option value="${p.loai}" data-mua="${p.mua}" data-ban="${p.ban}">${p.loai}</option>`).join('');

    renderPriceInfo(prices);
  } catch(e) {}
}

function renderPriceInfo(prices) {
  const rows = prices.slice(0, 3).map(p => `
    <span style="display:inline-block;margin:4px 8px;font-size:13px">
      <strong>${p.loai}</strong>:
      <span style="color:#16a34a">${(p.mua/1000).toLocaleString('vi-VN')}k</span> /
      <span style="color:#b45309">${(p.ban/1000).toLocaleString('vi-VN')}k</span>
    </span>
  `).join('');
  document.getElementById('priceInfo').innerHTML = rows;
}

function updatePrice() {
  const sel  = document.getElementById('loaiVang');
  const opt  = sel.selectedOptions[0];
  if (!opt || !opt.dataset.ban) { currentPrice = 0; return; }

  currentPrice = ORDER_TYPE === 'mua'
    ? parseFloat(opt.dataset.ban)   // mua = giá bán ra của tiệm
    : parseFloat(opt.dataset.mua);  // bán = giá mua vào của tiệm

  document.getElementById('giaDat').value = currentPrice.toLocaleString('vi-VN') + ' đ';
  calcTotal();
}

function calcTotal() {
  const sl    = parseFloat(document.getElementById('soLuong').value) || 0;
  const donVi = document.getElementById('donVi').value;
  const slChi = donVi === 'luong' ? sl * 10 : sl;
  const total = slChi * currentPrice;
  const box   = document.getElementById('totalBox');
  const amt   = document.getElementById('totalAmt');
  const det   = document.getElementById('totalDetail');

  if (sl > 0 && currentPrice > 0) {
    box.className = '';
    amt.textContent = total.toLocaleString('vi-VN') + ' đ';
    det.textContent = `${sl} ${donVi} × ${(currentPrice/1000).toLocaleString('vi-VN')}k/chỉ`;
  } else {
    box.className = 'hidden';
  }
}

async function placeOrder() {
  const loaiVang = document.getElementById('loaiVang').value;
  const soLuong  = parseFloat(document.getElementById('soLuong').value);
  const donVi    = document.getElementById('donVi').value;
  const giaDat   = currentPrice;
  const ghiChu   = document.getElementById('ghiChu').value.trim();
  const btn      = document.getElementById('btnOrder');

  clearAlert();

  if (!loaiVang) { showAlert('Vui lòng chọn loại vàng', 'error'); return; }
  if (!soLuong || soLuong <= 0) { showAlert('Vui lòng nhập số lượng', 'error'); return; }
  if (!giaDat) { showAlert('Chưa có giá. Vui lòng chọn loại vàng', 'error'); return; }

  const slChi    = donVi === 'luong' ? soLuong * 10 : soLuong;
  const thanhTien = slChi * giaDat;

  const confirmed = confirm(
    `Xác nhận ${ORDER_TYPE === 'mua' ? 'MUA' : 'BÁN'} vàng?\n` +
    `• ${loaiVang}: ${soLuong} ${donVi}\n` +
    `• Thành tiền: ${thanhTien.toLocaleString('vi-VN')} đ`
  );
  if (!confirmed) return;

  btn.innerHTML = '<span class="spinner"></span> Đang xử lý...';
  btn.disabled  = true;

  try {
    const r = await fetch('/khach/api/dat-lenh', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        order_type: ORDER_TYPE, loai_vang: loaiVang,
        so_luong: soLuong, don_vi: donVi,
        gia_dat: giaDat, ghi_chu: ghiChu,
      }),
    });
    const d = await r.json();

    if (d.ok) {
      window.location.href = d.redirect;
    } else {
      showAlert(d.msg || 'Có lỗi xảy ra', 'error');
    }
  } catch(e) {
    showAlert('Lỗi kết nối. Thử lại.', 'error');
  }

  btn.innerHTML = ORDER_TYPE === 'mua' ? '✅ Xác nhận đặt mua' : '✅ Xác nhận đặt bán';
  btn.disabled  = false;
}

function showAlert(msg, type) {
  const el = document.getElementById('alertBox');
  el.textContent = msg;
  el.className = `alert alert-${type}`;
  el.scrollIntoView({behavior:'smooth'});
}
function clearAlert() {
  document.getElementById('alertBox').className = 'alert alert-error hidden';
}

loadPrices();
</script>
{% endblock %}