{% extends "base.html" %}
{% block title %}Phiếu kiểm tiền — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Kiểm tiền{% endblock %}

{% block content %}

  <!-- ── LẬP PHIẾU MỚI ── -->
  <div class="ios-card p-5 space-y-4" style="border:1.5px solid #fde68a">
    <div class="flex justify-between items-center flex-wrap gap-2">
      <h2 class="font-bold text-gray-700 text-base">🧮 Lập phiếu kiểm tiền — bàn giao ca</h2>
      <input id="pin-input" type="password" inputmode="numeric" maxlength="10" placeholder="Mã PIN..."
        class="input-ios text-sm font-bold text-center tracking-widest w-28">
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Loại phiếu</label>
        <select id="cc-sel-loai" onchange="ccOnLoaiChange()"
          class="w-full input-ios cursor-pointer font-bold">
          <option value="dau_ca">🌅 Đầu ca — kiểm tiền nhận bàn giao</option>
          <option value="cuoi_ca">🌇 Cuối ca — kiểm tiền giao ca / chốt quỹ</option>
        </select>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tên ca</label>
        <input id="cc-inp-ca" type="text" placeholder="VD: Ca sáng 08/06/2026"
          class="w-full input-ios">
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người kiểm đếm</label>
        <input id="cc-inp-nhanvien" type="text" placeholder="Tên nhân viên"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người giao ca</label>
        <input id="cc-inp-giao" type="text" placeholder="Tên người giao (tùy chọn)"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người nhận ca</label>
        <input id="cc-inp-nhan" type="text" placeholder="Tên người nhận (tùy chọn)"
          class="w-full input-ios">
      </div>
    </div>

    <!-- ── BẢNG ĐẾM TIỀN THEO MỆNH GIÁ ── -->
    <div class="rounded-2xl border border-gray-100 overflow-hidden overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-3 py-2">Mệnh giá</th>
            <th class="text-right px-3 py-2">Số tờ</th>
            <th class="text-right px-3 py-2">Thành tiền</th>
          </tr>
        </thead>
        <tbody id="cc-denom-tbody"></tbody>
        <tfoot>
          <tr class="border-t border-gray-100 bg-gray-50">
            <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ / xu khác (nghìn đ)</td>
            <td class="px-3 py-2 text-right">
              <input id="cc-inp-tienle" type="number" step="0.001" value="0" oninput="ccRecalc()"
                class="input-ios-sm w-24 text-right">
            </td>
            <td class="px-3 py-2 text-right font-semibold" id="cc-lbl-tienle-tt">0</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- ── ĐỐI CHIẾU ── -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <div class="text-xs text-amber-600/80 uppercase font-semibold">Tổng kiểm đếm thực tế <span class="normal-case font-normal text-amber-500/70">(chưa lưu)</span></div>
        <div class="text-2xl font-black text-amber-700 mt-0.5" id="cc-lbl-tong-dem">0</div>
        <div class="text-xs text-amber-600/70">nghìn đồng</div>
      </div>
      <div class="ios-card p-4">
        <div class="text-xs text-gray-400 uppercase font-semibold">Tổng theo sổ quỹ (dự kiến)</div>
        <div class="text-2xl font-black text-gray-700 mt-0.5" id="cc-lbl-tong-ht">—</div>
        <div class="text-xs text-gray-400" id="cc-sub-tong-ht">nghìn đồng</div>
      </div>
      <div class="ios-card p-4" id="cc-box-chenhlech">
        <div class="text-xs uppercase font-semibold" id="cc-lbl-chenhlech-title">Chênh lệch</div>
        <div class="text-2xl font-black mt-0.5" id="cc-lbl-chenhlech">—</div>
        <div class="text-xs" id="cc-sub-chenhlech">nghìn đồng</div>
      </div>
    </div>

    <div id="cc-breakdown"></div>

    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ghi chú</label>
      <input id="cc-inp-ghichu" type="text" placeholder="Ghi chú thêm (nếu có chênh lệch, nêu lý do...)"
        class="w-full input-ios">
    </div>

    <div class="flex items-center gap-3 flex-wrap">
      <button onclick="ccSubmit()"
        class="btn-ios btn-ios-gold px-6 py-2.5">
        ✅ Lưu phiếu kiểm tiền
      </button>
      <button onclick="ccSaveDraft()"
        class="btn-ios btn-ios-secondary px-5 py-2.5">
        💾 Lưu nháp
      </button>
      <span id="cc-msg" class="text-sm"></span>
    </div>
  </div>

  <!-- ── ĐẾM TIỀN NHANH (KHÔNG LƯU) ── -->
  <details class="ios-card overflow-hidden">
    <summary class="px-5 py-3.5 font-extrabold text-gray-800 cursor-pointer select-none flex items-center justify-between gap-2" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
      <span>🧮 Đếm tiền nhanh (không lưu)</span>
      <span class="text-xs text-gray-400 font-normal">Chỉ tính tổng, không lưu lịch sử ▾</span>
    </summary>
    <div class="p-5 space-y-4">
      <div class="rounded-2xl border border-gray-100 overflow-hidden overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
            <tr>
              <th class="text-left px-3 py-2">Mệnh giá</th>
              <th class="text-right px-3 py-2">Số tờ</th>
              <th class="text-right px-3 py-2">Thành tiền</th>
            </tr>
          </thead>
          <tbody id="qc-denom-tbody"></tbody>
          <tfoot>
            <tr class="border-t border-gray-100 bg-gray-50">
              <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ / xu khác (nghìn đ)</td>
              <td class="px-3 py-2 text-right">
                <input id="qc-inp-tienle" type="number" step="0.001" value="0" oninput="qcRecalc()"
                  class="input-ios-sm w-24 text-right">
              </td>
              <td class="px-3 py-2 text-right font-semibold" id="qc-lbl-tienle-tt">0</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="flex items-center justify-between gap-3 flex-wrap">
        <div class="ios-card p-4" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
          <div class="text-xs text-blue-600/80 uppercase font-semibold">Tổng cộng</div>
          <div class="text-2xl font-black text-blue-700 mt-0.5" id="qc-lbl-tong">0</div>
          <div class="text-xs text-blue-600/70">nghìn đồng</div>
        </div>
        <button onclick="qcReset()" class="btn-ios btn-ios-secondary px-5 py-2.5">🔄 Làm mới</button>
      </div>
    </div>
  </details>

  <!-- ── LỊCH SỬ ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">📜 Lịch sử phiếu kiểm tiền / bàn giao ca</div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-4 py-2">Thời gian</th>
            <th class="text-left px-4 py-2">Loại</th>
            <th class="text-left px-4 py-2">Ca</th>
            <th class="text-left px-4 py-2">Người kiểm / Giao → Nhận</th>
            <th class="text-right px-4 py-2">Kiểm đếm</th>
            <th class="text-right px-4 py-2">Sổ quỹ</th>
            <th class="text-right px-4 py-2">Chênh lệch</th>
            <th class="text-center px-4 py-2">Phiếu</th>
          </tr>
        </thead>
        <tbody id="cc-tbody"></tbody>
      </table>
    </div>
  </div>
  <!-- ── MODAL SỬA PHIẾU (chỉ GĐ / PGĐ) ── -->
  <div id="cc-edit-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4"
       onclick="if(event.target===this)ccCloseEdit()">
    <div class="bg-white rounded-[26px] w-full max-w-lg shadow-2xl overflow-y-auto max-h-[90vh]">
      <div class="px-5 py-4 border-b flex justify-between items-center" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
        <h2 class="font-bold text-gray-800">✏️ Sửa phiếu kiểm tiền</h2>
        <button onclick="ccCloseEdit()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
      </div>
      <div class="p-5 space-y-3">
        <input type="hidden" id="cc-edit-id">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Loại phiếu</label>
            <select id="cc-edit-loai" class="w-full input-ios">
              <option value="dau_ca">🌅 Đầu ca</option>
              <option value="cuoi_ca">🌇 Cuối ca</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Thời gian</label>
            <input id="cc-edit-ngay" type="text" placeholder="dd/mm/yyyy HH:MM:SS" class="w-full input-ios">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tên ca</label>
          <input id="cc-edit-ca" type="text" class="w-full input-ios">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người kiểm đếm</label>
            <input id="cc-edit-nhanvien" type="text" class="w-full input-ios">
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người giao ca</label>
            <input id="cc-edit-giao" type="text" class="w-full input-ios">
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người nhận ca</label>
            <input id="cc-edit-nhan" type="text" class="w-full input-ios">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Kiểm đếm theo mệnh giá</label>
          <div class="rounded-2xl border border-gray-100 overflow-hidden overflow-x-auto">
            <table class="w-full text-sm">
              <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
                <tr>
                  <th class="text-left px-3 py-2">Mệnh giá</th>
                  <th class="text-right px-3 py-2">Số tờ</th>
                  <th class="text-right px-3 py-2">Thành tiền</th>
                </tr>
              </thead>
              <tbody id="cc-edit-denom-tbody"></tbody>
              <tfoot>
                <tr class="border-t border-gray-100 bg-gray-50">
                  <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ (nghìn đ)</td>
                  <td class="px-3 py-2 text-right">
                    <input id="cc-edit-tienle" type="number" step="0.001" value="0" oninput="ccEditRecalc()"
                      class="input-ios-sm w-24 text-right">
                  </td>
                  <td class="px-3 py-2 text-right font-semibold" id="cc-edit-tienle-tt">0</td>
                </tr>
              </tfoot>
            </table>
          </div>
          <div class="mt-2 flex justify-end items-baseline gap-2">
            <span class="text-xs text-gray-500 uppercase font-semibold">Tổng kiểm đếm:</span>
            <span class="font-black text-amber-700 text-xl" id="cc-edit-tong">0</span>
            <span class="text-xs text-amber-600/70">nghìn đồng</span>
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ghi chú</label>
          <input id="cc-edit-ghichu" type="text" class="w-full input-ios">
        </div>
        <div class="flex gap-3 pt-2">
          <button onclick="ccSaveEdit()" class="btn-ios btn-ios-gold flex-1 py-2.5">💾 Lưu thay đổi</button>
          <button onclick="ccCloseEdit()" class="btn-ios btn-ios-secondary px-5 py-2.5">Hủy</button>
        </div>
        <p id="cc-edit-msg" class="text-sm text-center"></p>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<script src="/static/js/kiem-tien.js"></script>
<script>
const PIN_KEY = 'vang_admin_pin';
document.getElementById('pin-input').value = localStorage.getItem(PIN_KEY) || '';
document.getElementById('pin-input').addEventListener('input', e => localStorage.setItem(PIN_KEY, e.target.value.trim()));

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