{% from "_icons.html" import icon %}
{#
  Thanh điều hướng dưới + bảng "Thêm" DÙNG CHUNG cho các trang STANDALONE
  (kiem_kho, edit_history, users, audit_log — những trang không extends base.html).
  base.html có bản RIÊNG (kèm mục Bật thông báo / Nhạc chuông / badge cần JS push) — bản này
  BỎ 2 mục đó cho gọn, chỉ giữ điều hướng. Icon đồng bộ SVG (không emoji). Active theo request.path.
  Trang dùng: {% include '_more_nav.html' %} (cần có sẵn CSS #bottom-nav/.more-item + biến --gold-*).
#}
<nav id="bottom-nav">
  <div class="nav-grid">
    <a href="/" class="nav-item {{ 'active' if request.path == '/' else '' }}"><span class="nav-ic">{{ icon('price') }}</span><span>Bảng giá</span></a>
    <a href="/pos" class="nav-item {{ 'active' if request.path == '/pos' else '' }}"><span class="nav-ic">{{ icon('pos') }}</span><span>Bán hàng</span></a>
    <a href="/inventory" class="nav-item {{ 'active' if request.path == '/inventory' else '' }}"><span class="nav-ic">{{ icon('inventory') }}</span><span>Tồn kho</span></a>
    <a href="/cashbook" class="nav-item {{ 'active' if request.path == '/cashbook' else '' }}"><span class="nav-ic">{{ icon('cashbook') }}</span><span>Sổ quỹ</span></a>
    <button type="button" onclick="toggleMoreSheet()" class="nav-item active"><span class="nav-ic">{{ icon('more') }}</span><span>Thêm</span></button>
  </div>
</nav>
<div id="more-backdrop" onclick="toggleMoreSheet(false)"></div>
<div id="more-sheet">
  <div class="w-10 h-1.5 bg-gray-300 rounded-full mx-auto mb-3"></div>
  <h3 class="font-bold text-gray-500 text-xs uppercase tracking-wider mb-3 px-1">Thêm chức năng</h3>
  <div id="more-scroll">
  <div class="more-grid">
    <a href="/tong-quan" class="more-item {{ 'active' if request.path == '/tong-quan' else '' }}" id="more-tong-quan" style="display:none"><span class="more-ic">{{ icon('home', 24) }}</span>Tổng quan</a>
    <a href="/reports" class="more-item {{ 'active' if request.path == '/reports' else '' }}" id="more-reports" style="display:none"><span class="more-ic">{{ icon('reports', 24) }}</span>Báo cáo</a>
    <a href="/purchase-form" class="more-item {{ 'active' if request.path == '/purchase-form' else '' }}"><span class="more-ic">{{ icon('purchase', 24) }}</span>Mua hàng</a>
    <a href="/doi-hang" class="more-item {{ 'active' if request.path == '/doi-hang' else '' }}"><span class="more-ic">{{ icon('arrows-right-left', 24) }}</span>Đổi hàng bù tiền</a>
    <a href="/nhac-lich" class="more-item {{ 'active' if request.path == '/nhac-lich' else '' }}"><span class="more-ic">{{ icon('bell', 24) }}</span>Nhắc lịch</a>
    <a href="/pawn" class="more-item {{ 'active' if request.path == '/pawn' else '' }}"><span class="more-ic">{{ icon('pawn', 24) }}</span>Cầm hàng</a>
    <a href="/orders" class="more-item {{ 'active' if request.path == '/orders' else '' }}"><span class="more-ic">{{ icon('orders', 24) }}</span>Đặt lấy hàng</a>
    <a href="/gia-cong" class="more-item {{ 'active' if request.path == '/gia-cong' else '' }}"><span class="more-ic">{{ icon('gia-cong', 24) }}</span>Đặt gia công</a>
    <a href="/bang-luong" class="more-item {{ 'active' if request.path == '/bang-luong' else '' }}"><span class="more-ic">{{ icon('scale', 24) }}</span>Bảng lương</a>
    <a href="/khach-hang" class="more-item {{ 'active' if request.path == '/khach-hang' else '' }}" id="more-khach-hang" style="display:none"><span class="more-ic">{{ icon('users', 24) }}</span>Khách hàng</a>
    <a href="/nhan-su" class="more-item {{ 'active' if request.path == '/nhan-su' else '' }}" id="more-nhan-su" style="display:none"><span class="more-ic">{{ icon('identification', 24) }}</span>Nhân sự</a>
    <a href="/kiem-kho" class="more-item {{ 'active' if request.path == '/kiem-kho' else '' }}"><span class="more-ic">{{ icon('search', 24) }}</span>Kiểm kho</a>
    <a href="/xuong" class="more-item {{ 'active' if request.path == '/xuong' else '' }}"><span class="more-ic">{{ icon('switch', 24) }}</span>Xuất Nhập Đổi</a>
    <a href="/studio-anh" class="more-item {{ 'active' if request.path == '/studio-anh' else '' }}"><span class="more-ic">{{ icon('camera', 24) }}</span>Studio Ảnh</a>
    <a href="/quan-ly-loai-vang" class="more-item {{ 'active' if request.path == '/quan-ly-loai-vang' else '' }}" id="more-loai-vang" style="display:none"><span class="more-ic">{{ icon('price', 24) }}</span>Loại vàng &amp; TV</a>
    <a href="/cong-thuc" class="more-item {{ 'active' if request.path == '/cong-thuc' else '' }}" id="more-cong-thuc" style="display:none"><span class="more-ic">{{ icon('cong-thuc', 24) }}</span>Công thức giá</a>
    <a href="/cham-cong" class="more-item {{ 'active' if request.path == '/cham-cong' else '' }}"><span class="more-ic">{{ icon('clock', 24) }}</span>Chấm công</a>
    <a href="/display" target="_blank" onclick="event.preventDefault();var w=window.open('/display','manhinhtv','popup=yes,width='+screen.availWidth+',height='+screen.availHeight+',left=0,top=0');if(w)w.focus();return false;" class="more-item"><span class="more-ic">{{ icon('tv', 24) }}</span>Màn hình TV</a>
    <a href="/man-hinh-khach" target="_blank" onclick="event.preventDefault();var w=window.open('/man-hinh-khach','manhinhkhach','popup=yes,width='+screen.availWidth+',height='+screen.availHeight+',left=0,top=0');if(w)w.focus();return false;" class="more-item"><span class="more-ic">{{ icon('tv', 24) }}</span>Màn hình khách</a>
    <a href="/huong-dan" class="more-item {{ 'active' if request.path == '/huong-dan' else '' }}"><span class="more-ic">{{ icon('document-text', 24) }}</span>Hướng dẫn</a>
    <!-- 27/08/2026: đã xóa "/audit-log" + "/lich-su-chinh-sua" (trùng lặp, kém hơn /nhat-ky) -->
    <a href="/nhat-ky" class="more-item {{ 'active' if request.path == '/nhat-ky' else '' }}" id="more-nhat-ky" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Nhật ký hoạt động</a>
    <a href="/thiet-bi-rfid" class="more-item {{ 'active' if request.path == '/thiet-bi-rfid' else '' }}" id="more-thiet-bi-rfid" style="display:none"><span class="more-ic">{{ icon('scale', 24) }}</span>Thiết bị RFID</a>
    <a href="/khoi-phuc" class="more-item {{ 'active' if request.path == '/khoi-phuc' else '' }}" id="more-khoi-phuc" style="display:none"><span class="more-ic">{{ icon('arrow-uturn-left', 24) }}</span>Khôi phục xóa</a>
    <a href="/thiet-ke-tem" class="more-item {{ 'active' if request.path == '/thiet-ke-tem' else '' }}" id="more-thiet-ke-tem" style="display:none"><span class="more-ic">{{ icon('pencil', 24) }}</span>Thiết kế tem</a>
    <a href="/mau-giay-dam-bao" class="more-item {{ 'active' if request.path == '/mau-giay-dam-bao' else '' }}" id="more-mau-giay" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Mẫu giấy đảm bảo</a>
    <a href="/mau-hoa-don" class="more-item {{ 'active' if request.path == '/mau-hoa-don' else '' }}" id="more-mau-hoa-don" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Mẫu hóa đơn</a>
    <a href="/kpi-cua-toi" class="more-item {{ 'active' if request.path == '/kpi-cua-toi' else '' }}"><span class="more-ic">{{ icon('chart-pie', 24) }}</span>KPI của tôi</a>
    <!-- 27/08/2026: "KPI nhân viên" đã nhúng vào tab KPI của Nhân sự, bỏ mục menu riêng -->
    <a href="/thiet-lap-cua-hang" class="more-item {{ 'active' if request.path == '/thiet-lap-cua-hang' else '' }}" id="more-thiet-lap" style="display:none"><span class="more-ic">{{ icon('home', 24) }}</span>Thiết lập cửa hàng</a>
    <a href="/tuy-chinh" class="more-item {{ 'active' if request.path == '/tuy-chinh' else '' }}" id="more-tuy-chinh" title="Giao diện (mọi người) + tính năng thêm (Giám đốc)"><span class="more-ic">{{ icon('pencil', 24) }}</span>Tùy chỉnh</a>
    <a href="/chi-nhanh" class="more-item {{ 'active' if request.path == '/chi-nhanh' else '' }}" id="more-chi-nhanh" style="display:none"><span class="more-ic">{{ icon('home', 24) }}</span>Chi nhánh</a>
    <a href="/bao-cao-chi-nhanh" class="more-item {{ 'active' if request.path == '/bao-cao-chi-nhanh' else '' }}" id="more-bao-cao-chi-nhanh" style="display:none"><span class="more-ic">{{ icon('chart-pie', 24) }}</span>Báo cáo chi nhánh</a>
    <a href="/giay-dam-bao" class="more-item {{ 'active' if request.path == '/giay-dam-bao' else '' }}" id="more-giay-dam-bao" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Giấy đảm bảo</a>
    <a href="/kho-phieu" class="more-item {{ 'active' if request.path == '/kho-phieu' else '' }}" id="more-kho-phieu"><span class="more-ic">{{ icon('arrow-down-tray', 24) }}</span>Phiếu Xuất/Nhập Kho</a>
    <a href="/dai-ly" class="more-item {{ 'active' if request.path == '/dai-ly' else '' }}" id="more-dai-ly" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Đại lý & Hợp đồng</a>
    <a href="/tai-san-co-dinh" class="more-item {{ 'active' if request.path == '/tai-san-co-dinh' else '' }}" id="more-tai-san-co-dinh" style="display:none"><span class="more-ic">{{ icon('document-text', 24) }}</span>Tài sản cố định</a>
    <a href="/tai-ve" class="more-item {{ 'active' if request.path == '/tai-ve' else '' }}" id="more-tai-ve"><span class="more-ic">{{ icon('arrow-down-tray', 24) }}</span>Tải về</a>
    <a href="/quan-ly-nguoi-dung" class="more-item {{ 'active' if request.path == '/quan-ly-nguoi-dung' else '' }}" id="more-tai-khoan" style="display:none"><span class="more-ic">{{ icon('users', 24) }}</span>Tài khoản</a>
    <a href="/yeu-cau-cua-toi" class="more-item {{ 'active' if request.path == '/yeu-cau-cua-toi' else '' }}"><span class="more-ic">{{ icon('document-text', 24) }}</span>Yêu cầu của tôi</a>
    <a href="/duyet-yeu-cau" class="more-item {{ 'active' if request.path == '/duyet-yeu-cau' else '' }}" id="more-duyet-yc" style="display:none"><span class="more-ic">{{ icon('check-circle', 24) }}</span>Duyệt yêu cầu</a>
  </div>
  </div>
  <div id="more-fade"></div>
</div>
<style>
  /* Nhiều mục hơn 1 màn hình ĐT → giới hạn chiều cao, phần dưới CUỘN bằng cách giữ và
     vuốt ngay trên các ô (không cần chạm đúng thanh trượt). Đồng bộ với base.html. */
  #more-sheet { max-height: 76vh; display: flex; flex-direction: column; }
  #more-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
                 flex: 1; min-height: 0; padding-bottom: 6px; scrollbar-width: thin; }
  #more-scroll::-webkit-scrollbar { width: 4px; }
  #more-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
  #more-fade { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
               height: 34px; pointer-events: none; border-radius: 0 0 26px 26px; opacity: 0;
               background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,0));
               transition: opacity .2s ease; }
  #more-sheet.co-them #more-fade { opacity: 1; }
</style>
<script>
function toggleMoreSheet(force) {
  const sheet = document.getElementById('more-sheet');
  const bg = document.getElementById('more-backdrop');
  const show = (force === undefined) ? !sheet.classList.contains('show') : force;
  sheet.classList.toggle('show', show);
  bg.classList.toggle('show', show);
  document.body.style.overflow = show ? 'hidden' : '';
  if (show) { const sc = document.getElementById('more-scroll'); if (sc) { sc.scrollTop = 0; _moreFade(); } }
}
function _moreFade() {
  const sc = document.getElementById('more-scroll'), sheet = document.getElementById('more-sheet');
  if (!sc || !sheet) return;
  sheet.classList.toggle('co-them', sc.scrollHeight - sc.clientHeight - sc.scrollTop > 8);
}
(function(){
  const sc = document.getElementById('more-scroll');
  if (sc) sc.addEventListener('scroll', _moreFade, {passive: true});
  window.addEventListener('resize', _moreFade);
  // Kéo tấm xuống để đóng — chỉ ở phần đầu, vùng danh sách để cuộn tự nhiên
  const sheet = document.getElementById('more-sheet');
  if (!sheet) return;
  let y0 = null, dy = 0;
  function batDau(e){ const t = e.target; if (t.closest('#more-scroll')) return;
    y0 = (e.touches ? e.touches[0].clientY : e.clientY); dy = 0; sheet.style.transition = 'none'; }
  function keo(e){ if (y0 === null) return;
    dy = (e.touches ? e.touches[0].clientY : e.clientY) - y0; if (dy < 0) dy = 0;
    sheet.style.transform = 'translateY(' + dy + 'px)'; }
  function thaTay(){ if (y0 === null) return;
    sheet.style.transition = ''; sheet.style.transform = '';
    if (dy > 90) toggleMoreSheet(false); y0 = null; dy = 0; }
  sheet.addEventListener('touchstart', batDau, {passive: true});
  sheet.addEventListener('touchmove', keo, {passive: true});
  sheet.addEventListener('touchend', thaTay);
  sheet.addEventListener('mousedown', batDau);
  window.addEventListener('mousemove', keo);
  window.addEventListener('mouseup', thaTay);
})();
(function applyPermsMenu() {
  fetch('/api/my-perms', { cache: 'no-store' }).then(r => r.json()).then(d => {
    if (!d) return;
    const show = id => { const el = document.getElementById(id); if (el) el.style.display = ''; };
    if (d.perms && d.perms.reports) show('more-tong-quan');
    // Hồ sơ khách hàng: CHỈ Giám đốc / Phó GĐ
    if (d.perms && d.perms.hr) show('more-nhan-su');
    if (d.perms && d.perms.dai_ly) show('more-dai-ly');
    if (d.perms && d.perms.tai_san_co_dinh) show('more-tai-san-co-dinh');
    // Khách hàng (CRM): mở cho mọi vai trò có quyền 'crm' (24/08/2026)
    if (d.perms && d.perms.crm) show('more-khach-hang');
    if (d.perms && d.perms['sales:view']) show('more-giay-dam-bao');
    if (d.role === 'giam_doc' || d.role === 'pho_giam_doc') {
      ['more-reports','more-cong-thuc','more-loai-vang','more-nhat-ky','more-tai-khoan','more-duyet-yc','more-khoi-phuc','more-thiet-bi-rfid','more-thiet-ke-tem','more-mau-giay','more-mau-hoa-don','more-thiet-lap','more-chi-nhanh','more-bao-cao-chi-nhanh'].forEach(show);
    }
  }).catch(() => {});
})();
</script>
<script>
/* Ẩn menu/đường dẫn của mô-đun KHÔNG có trong gói bản quyền (server vẫn chặn 403 nếu gõ thẳng). */
(function () {
  const KHOA = {{ (duong_dan_bi_khoa or [])|tojson }};
  if (!KHOA.length) return;
  const an = () => document.querySelectorAll('a[href]').forEach(a => {
    const h = a.getAttribute('href') || '';
    if (KHOA.some(p => h === p || h.startsWith(p.replace(/\/$/, '') + '/') || h.startsWith(p + '?'))) a.style.display = 'none';
  });
  an(); document.addEventListener('DOMContentLoaded', an); setTimeout(an, 800); setTimeout(an, 2500);
})();
</script>
{# Ô cảnh báo tròn + chuông thông báo (1.8.9): script trong partial tự chuyển khối vào hàng header của trang. #}
{% include '_header_tien_ich.html' %}