{% extends "base.html" %}
{% block page_subtitle %}Quản lý chi nhánh{% endblock %}
{% block content %}
<div class="ios-card p-4">
  <div class="flex items-center justify-between gap-2 flex-wrap mb-3">
    <h2 class="font-bold text-gray-800 text-lg">🏢 Danh sách chi nhánh</h2>
    <button id="btn-them-cn" onclick="openStoreForm()" class="tkt-act tkt-emerald"
      {% if not chinh_sach.co_the_them %}disabled aria-disabled="true" title="{{ chinh_sach.ly_do_khoa }}" style="opacity:.5;cursor:not-allowed"{% endif %}>➕ Thêm chi nhánh</button>
  </div>
  <div id="cn-chinh-sach" class="rounded-xl border border-gray-200 bg-gray-50 p-3 mb-3 text-sm text-gray-700">
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
      <div><div class="text-[11px] text-gray-500">Gói hiện tại</div><div class="font-bold" id="cs-goi">{{ chinh_sach.ten_goi }}</div></div>
      <div><div class="text-[11px] text-gray-500">Kèm gói</div><div class="font-bold" id="cs-kem">{{ chinh_sach.so_chi_nhanh_kem_goi }} chi nhánh</div></div>
      <div><div class="text-[11px] text-gray-500">Được dùng</div><div class="font-bold" id="cs-duoc">{{ chinh_sach.so_chi_nhanh_duoc_dung }} chi nhánh</div></div>
      <div><div class="text-[11px] text-gray-500">Đang dùng</div><div class="font-bold" id="cs-dang">{{ chinh_sach.so_chi_nhanh_dang_dung }}</div></div>
    </div>
    <div class="mt-2 text-base font-extrabold {% if chinh_sach.co_the_them %}text-emerald-700{% else %}text-red-700{% endif %}" id="cs-con">
      {% if chinh_sach.co_the_them %}✅ Còn thêm được {{ chinh_sach.so_chi_nhanh_con_them_duoc }} chi nhánh{% else %}⛔ Hết lượt thêm chi nhánh{% endif %}
    </div>
    <ul class="mt-1 text-xs text-gray-600 list-disc pl-5 space-y-0.5" id="cs-chi-tiet">
      {% if chinh_sach.so_chi_nhanh_mua_them_theo_license %}<li>Mua thêm theo license: {{ chinh_sach.so_chi_nhanh_mua_them_theo_license }} chi nhánh.</li>{% endif %}
      <li>Trần tối đa: {% if chinh_sach.tran_toi_da %}{{ chinh_sach.tran_toi_da }} chi nhánh{% else %}không giới hạn (mua thêm chi nhánh bổ sung){% endif %}.</li>
      <li>Giá chi nhánh bổ sung: {% if chinh_sach.mua_them_duoc %}{{ chinh_sach.gia_chi_nhanh_bo_sung_hien_thi }}/năm/chi nhánh{% else %}gói này không mua thêm chi nhánh{% endif %}.</li>
      <li><strong>Nguồn &amp; điều kiện áp dụng:</strong> {{ chinh_sach.dieu_kien_ap_dung }}</li>
      {% if chinh_sach.dieu_kien_bang_gia %}<li>Chính sách bảng giá {{ chinh_sach.phien_ban_bang_gia }} (hiệu lực {{ chinh_sach.hieu_luc_bang_gia }}): {{ chinh_sach.dieu_kien_bang_gia }}</li>{% endif %}
    </ul>
    {% if not chinh_sach.co_the_them %}<div class="mt-2 text-xs font-semibold text-red-700" id="cs-ly-do">🔒 {{ chinh_sach.ly_do_khoa }}</div>{% endif %}
  </div>
  <p class="text-xs text-gray-500 mb-3">
    Mỗi chi nhánh có tồn kho / bán hàng / sổ quỹ / mua hàng riêng. Khách hàng và bảng giá vàng
    dùng CHUNG toàn hệ thống. Xem số liệu gộp/từng nơi ở
    <a href="/bao-cao-chi-nhanh" class="text-amber-700 font-semibold underline">📊 Báo cáo chi nhánh</a>.
  </p>
  <div id="store-license-summary" class="hidden rounded-xl bg-amber-50 border border-amber-200 p-3 mb-3 text-sm text-amber-900"></div>
  <div id="store-list" class="space-y-2"></div>
  <button id="save-store-entitlement" onclick="saveIncludedStores()" class="hidden mt-3 tkt-act tkt-emerald">💾 Lưu chi nhánh được phép tạo giao dịch</button>
</div>

<div id="store-modal" class="hidden fixed inset-0 z-[200] flex items-end sm:items-center justify-center"
     style="background:rgba(0,0,0,.55)" onclick="if(event.target===this)closeStoreForm()">
  <div class="bg-white w-full sm:max-w-md sm:mx-4 max-h-[92vh] overflow-y-auto p-5"
       style="border-radius:24px 24px 0 0">
    <h3 id="sm-title" class="font-extrabold text-gray-800 text-lg mb-3">➕ Thêm chi nhánh</h3>
    <input type="hidden" id="sm-id">
    <div class="space-y-3">
      <div>
        <label class="text-xs font-semibold text-gray-500">Tên chi nhánh *</label>
        <input id="sm-ten" class="input-ios w-full mt-1" placeholder="VD: Thắng Hiếu — Chi nhánh Cẩm Phả">
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Địa chỉ</label>
        <input id="sm-dia-chi" class="input-ios w-full mt-1">
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Hotline</label>
        <input id="sm-hotline" class="input-ios w-full mt-1">
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Người quản lý</label>
        <input id="sm-quan-ly" class="input-ios w-full mt-1">
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Ghi chú</label>
        <input id="sm-ghi-chu" class="input-ios w-full mt-1">
      </div>
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="closeStoreForm()" class="flex-1 py-2.5 rounded-xl bg-gray-100 text-gray-700 font-semibold">Hủy</button>
      <button onclick="saveStore()" class="flex-1 py-2.5 rounded-xl bg-amber-600 text-white font-semibold">💾 Lưu</button>
    </div>
  </div>
</div>

<script>
let _storesCache = [];
let _storeLimit = 0;
let _chinhSach = {{ chinh_sach|tojson }};
function _cnEsc(s) {
  return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function _veChinhSach(cs) {
  if (!cs) return;
  _chinhSach = cs;
  const btn = document.getElementById('btn-them-cn');
  btn.disabled = !cs.co_the_them;
  btn.style.opacity = cs.co_the_them ? '' : '.5';
  btn.style.cursor = cs.co_the_them ? '' : 'not-allowed';
  btn.title = cs.co_the_them ? '' : cs.ly_do_khoa;
  document.getElementById('cs-dang').textContent = cs.so_chi_nhanh_dang_dung;
  document.getElementById('cs-duoc').textContent = cs.so_chi_nhanh_duoc_dung + ' chi nhánh';
  const con = document.getElementById('cs-con');
  con.textContent = cs.co_the_them ? `✅ Còn thêm được ${cs.so_chi_nhanh_con_them_duoc} chi nhánh` : '⛔ Hết lượt thêm chi nhánh';
  con.className = 'mt-2 text-base font-extrabold ' + (cs.co_the_them ? 'text-emerald-700' : 'text-red-700');
  let lyDo = document.getElementById('cs-ly-do');
  if (!cs.co_the_them) {
    if (!lyDo) {
      lyDo = document.createElement('div');
      lyDo.id = 'cs-ly-do';
      lyDo.className = 'mt-2 text-xs font-semibold text-red-700';
      document.getElementById('cn-chinh-sach').appendChild(lyDo);
    }
    lyDo.textContent = '🔒 ' + cs.ly_do_khoa;
  } else if (lyDo) {
    lyDo.remove();
  }
}

function _storeCard(s) {
  const tinhTrang = s.la_goc
    ? '<span class="text-[10px] font-bold bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">CHI NHÁNH GỐC</span>'
    : (s.active ? '<span class="text-[10px] font-bold bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full">Đang hoạt động</span>'
                : '<span class="text-[10px] font-bold bg-gray-200 text-gray-500 px-2 py-0.5 rounded-full">Đã tắt</span>');
  return `<div class="border border-gray-200 rounded-xl p-3">
    <div class="flex items-start justify-between gap-2">
      <div class="min-w-0">
        <div class="font-bold text-gray-800 break-words">${_cnEsc(s.ten)} ${tinhTrang}</div>
        ${s.dia_chi ? `<div class="text-xs text-gray-500 mt-0.5">📍 ${_cnEsc(s.dia_chi)}</div>` : ''}
        ${s.hotline ? `<div class="text-xs text-gray-500">📞 ${_cnEsc(s.hotline)}</div>` : ''}
        ${s.quan_ly ? `<div class="text-xs text-gray-500">👤 QL: ${_cnEsc(s.quan_ly)}</div>` : ''}
      </div>
    </div>
    ${s.active && _storesCache.filter(x => x.active).length > _storeLimit
      ? `<label class="flex items-center gap-2 mt-3 text-sm ${s.ghi_duoc_theo_goi ? 'text-emerald-800' : 'text-amber-800'}">
          <input type="checkbox" class="store-entitlement-choice" value="${s.id}" ${s.ghi_duoc_theo_goi ? 'checked' : ''}>
          ${s.ghi_duoc_theo_goi ? 'Được ghi giao dịch theo license' : 'Chỉ xem, in lại và xuất dữ liệu theo license'}
        </label>` : ''}
    <div class="flex flex-wrap gap-2 mt-2">
      <button onclick="openStoreForm(_storesCache.find(x => x.id === ${Number(s.id)}))" class="tkt-act tkt-blue">✏️ Sửa</button>
      ${!s.la_goc ? `<button onclick="toggleStoreActive(${s.id}, ${s.active ? 0 : 1})" class="tkt-act tkt-amber">
        ${s.active ? '⏸️ Tắt' : '▶️ Bật'}</button>` : ''}
      ${!s.la_goc ? `<button onclick="deleteStore(${Number(s.id)})" class="tkt-act tkt-red">🗑️ Xóa</button>` : ''}
    </div>
  </div>`;
}

async function loadStores() {
  const r = await fetch('/api/chi-nhanh', { cache: 'no-store' });
  const d = await r.json();
  _storesCache = d.stores || [];
  _storeLimit = Number(d.so_chi_nhanh_toi_da || 0);
  _veChinhSach(d.chinh_sach);
  const activeCount = _storesCache.filter(s => s.active).length;
  const summary = document.getElementById('store-license-summary');
  const saveButton = document.getElementById('save-store-entitlement');
  if (activeCount > _storeLimit) {
    summary.textContent = `License hiện cho phép ghi giao dịch tại tối đa ${_storeLimit} chi nhánh. Các chi nhánh còn lại vẫn được giữ nguyên dữ liệu và chỉ xem, in lại, xuất dữ liệu. Chọn các chi nhánh được phép rồi lưu.`;
    summary.classList.remove('hidden');
    saveButton.classList.remove('hidden');
  } else {
    summary.classList.add('hidden');
    saveButton.classList.add('hidden');
  }
  const box = document.getElementById('store-list');
  box.innerHTML = _storesCache.length
    ? _storesCache.map(_storeCard).join('')
    : '<p class="text-sm text-gray-400 text-center py-6">Chưa có chi nhánh nào.</p>';
}

function saveIncludedStores() {
  const chi_nhanh_ids = [...document.querySelectorAll('.store-entitlement-choice:checked')]
    .map(el => Number(el.value));
  askPin({ title: '🔐 Xác nhận chi nhánh được ghi giao dịch' }, async pin => {
    const r = await fetch('/api/chi-nhanh/gioi-han', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ chi_nhanh_ids, pin }),
    });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : d.error); return 'giu'; }
    loadStores();
    if (typeof _loadStoreBadge === 'function') _loadStoreBadge();
  });
}

function openStoreForm(s) {
  if (!s && _chinhSach && !_chinhSach.co_the_them) { alert('🔒 ' + _chinhSach.ly_do_khoa); return; }
  document.getElementById('sm-title').textContent = s ? '✏️ Sửa chi nhánh' : '➕ Thêm chi nhánh';
  document.getElementById('sm-id').value = s ? s.id : '';
  document.getElementById('sm-ten').value = s ? s.ten : '';
  document.getElementById('sm-dia-chi').value = s ? (s.dia_chi || '') : '';
  document.getElementById('sm-hotline').value = s ? (s.hotline || '') : '';
  document.getElementById('sm-quan-ly').value = s ? (s.quan_ly || '') : '';
  document.getElementById('sm-ghi-chu').value = s ? (s.ghi_chu || '') : '';
  document.getElementById('store-modal').classList.remove('hidden');
}
function closeStoreForm() { document.getElementById('store-modal').classList.add('hidden'); }

function saveStore() {
  const ten = document.getElementById('sm-ten').value.trim();
  if (!ten) { alert('Vui lòng nhập tên chi nhánh'); return; }
  const id = document.getElementById('sm-id').value;
  const payload = {
    ten, dia_chi: document.getElementById('sm-dia-chi').value.trim(),
    hotline: document.getElementById('sm-hotline').value.trim(),
    quan_ly: document.getElementById('sm-quan-ly').value.trim(),
    ghi_chu: document.getElementById('sm-ghi-chu').value.trim(),
  };
  askPin({ title: id ? '🔐 Xác nhận sửa chi nhánh' : '🔐 Xác nhận thêm chi nhánh' }, async pin => {
    payload.pin = pin;
    const r = await fetch(id ? `/api/chi-nhanh/${id}` : '/api/chi-nhanh', {
      method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : d.error); return 'giu'; }
    closeStoreForm();
    loadStores();
    if (typeof _loadStoreBadge === 'function') _loadStoreBadge();
  });
}

function toggleStoreActive(id, active) {
  askPin({ title: active ? '🔐 Xác nhận BẬT chi nhánh' : '🔐 Xác nhận TẮT chi nhánh' }, async pin => {
    const r = await fetch(`/api/chi-nhanh/${id}`, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ active, pin }),
    });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : d.error); return 'giu'; }
    loadStores();
    if (typeof _loadStoreBadge === 'function') _loadStoreBadge();
  });
}

function deleteStore(id) {
  const ten = ((_storesCache.find(x => x.id === id) || {}).ten) || ('#' + id);
  askPin({ title: '🗑️ Xóa chi nhánh', message: `Xóa "${ten}"? Chỉ xóa được khi chi nhánh CHƯA CÓ dữ liệu nào.` }, async pin => {
    const r = await fetch(`/api/chi-nhanh/${id}`, {
      method: 'DELETE', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin }),
    });
    const d = await r.json();
    if (!d.success) {
      const msg = d.error === 'chi_nhanh_con_du_lieu' ? 'Chi nhánh còn dữ liệu (sản phẩm/hóa đơn/phiếu...) — không thể xóa, chỉ có thể Tắt.'
        : d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : d.error;
      pinLoi(msg); return 'giu';
    }
    loadStores();
    if (typeof _loadStoreBadge === 'function') _loadStoreBadge();
  });
}

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