{% extends "base.html" %}
{% block title %}Tài sản cố định — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Tài sản cố định & khấu hao{% endblock %}

{% block content %}

<div class="ios-card p-4 sm:p-5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
  <p class="text-xs text-amber-800/90 leading-relaxed">
    📦 Quản lý tài sản cố định (nội thất, máy tính, camera, xe...) và tự tính <b>khấu hao đường
    thẳng theo ngày</b> — dùng để lập đúng mục "B. Tài sản dài hạn" trên
    <a href="/bao-cao-tai-chinh" class="underline font-semibold">Báo cáo tình hình tài chính</a>.
    Khấu hao hàng tháng cũng tự cộng vào "Chi phí quản lý doanh nghiệp" của Báo cáo KQKD.
  </p>
</div>

<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4">
  <div class="ios-card p-4">
    <div class="text-xs text-gray-400 uppercase font-semibold">📋 Số tài sản</div>
    <div id="ts-so-luong" class="text-lg font-black text-gray-700 mt-0.5">—</div>
  </div>
  <div class="ios-card p-4">
    <div class="text-xs text-gray-400 uppercase font-semibold">💰 Tổng nguyên giá</div>
    <div id="ts-nguyen-gia" class="text-lg font-black text-amber-700 mt-0.5 tabular-nums">—</div>
  </div>
  <div class="ios-card p-4">
    <div class="text-xs text-gray-400 uppercase font-semibold">📉 Hao mòn lũy kế</div>
    <div id="ts-hao-mon" class="text-lg font-black text-red-600 mt-0.5 tabular-nums">—</div>
  </div>
  <div class="ios-card p-4">
    <div class="text-xs text-gray-400 uppercase font-semibold">📈 Giá trị còn lại</div>
    <div id="ts-con-lai" class="text-lg font-black text-green-700 mt-0.5 tabular-nums">—</div>
  </div>
</div>

<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="font-bold text-gray-800 mb-3">➕ Thêm / sửa tài sản cố định</div>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
    <div class="sm:col-span-2">
      <label class="text-xs font-bold text-gray-500">Tên tài sản</label>
      <input id="f-ten" class="input-ios w-full" placeholder="VD: Tủ trưng bày kính cường lực">
    </div>
    <div>
      <label class="text-xs font-bold text-gray-500">Loại</label>
      <select id="f-loai" class="input-ios w-full">
        <option value="huu_hinh">Hữu hình (thiết bị, nội thất...)</option>
        <option value="vo_hinh">Vô hình (phần mềm, giấy phép...)</option>
      </select>
    </div>
    <div>
      <label class="text-xs font-bold text-gray-500">Nguyên giá (đồng)</label>
      <input id="f-nguyengia" type="text" inputmode="numeric" class="input-ios w-full" placeholder="0" oninput="onSplitAmtInput(this)">
    </div>
    <div>
      <label class="text-xs font-bold text-gray-500">Thời gian sử dụng (tháng)</label>
      <input id="f-sothang" type="number" min="1" class="input-ios w-full" placeholder="VD: 36" value="36">
    </div>
    <div>
      <label class="text-xs font-bold text-gray-500">Ngày mua</label>
      <input id="f-ngaymua" type="date" class="input-ios w-full">
    </div>
    <div>
      <label class="text-xs font-bold text-gray-500">Ngày bắt đầu khấu hao</label>
      <input id="f-ngaykh" type="date" class="input-ios w-full" title="Bỏ trống = lấy theo Ngày mua">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs font-bold text-gray-500">Ghi chú</label>
      <input id="f-ghichu" class="input-ios w-full">
    </div>
  </div>
  <div class="flex items-center justify-between mt-4 pt-3 border-t">
    <span id="ts-edit-banner" class="hidden text-xs font-bold text-amber-700">✏️ Đang sửa TS #<span id="ts-edit-id"></span></span>
    <div class="flex gap-2 ml-auto">
      <button id="ts-cancel-btn" onclick="huyEditTaiSan()" class="hidden text-sm font-bold text-gray-500 px-3">Hủy</button>
      <button onclick="luuTaiSan()" class="btn-ios btn-ios-gold px-6 py-2.5">💾 Lưu tài sản</button>
    </div>
  </div>
  <p id="ts-msg" class="text-sm mt-2"></p>
</div>

<div class="ios-card overflow-hidden mt-4">
  <div class="px-5 py-3.5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
    <span class="font-extrabold text-gray-800">📋 Danh sách tài sản cố định</span>
  </div>
  <div id="ts-list" class="divide-y divide-gray-100"></div>
  <div id="ts-empty" class="hidden text-center text-gray-400 py-8 text-sm">Chưa có tài sản cố định nào.</div>
</div>

{% endblock %}

{% block scripts %}
<script>
const fmt = n => Number(n||0).toLocaleString('vi-VN');
const fmtD = n => fmt(Math.round(n||0)) + 'đ';
let _tsEditingId = null;
let _tsData = [];

function _tsSo(id) {
  return parseFloat((document.getElementById(id).value || '').replace(/\./g, '')) || 0;
}

async function loadTaiSan() {
  const r = await fetch('/api/tai-san-co-dinh', { cache: 'no-store' });
  const d = await r.json();
  _tsData = d.items || [];
  const t = d.tong || {};
  // Số từ API là NGHÌN đồng → hiển thị ĐỒNG đầy đủ (×1000)
  document.getElementById('ts-so-luong').textContent = fmt(t.so_luong || 0);
  document.getElementById('ts-nguyen-gia').textContent = fmtD((t.nguyen_gia||0) * 1000);
  document.getElementById('ts-hao-mon').textContent = fmtD((t.hao_mon_luy_ke||0) * 1000);
  document.getElementById('ts-con-lai').textContent = fmtD((t.gia_tri_con_lai||0) * 1000);

  const list = document.getElementById('ts-list');
  const empty = document.getElementById('ts-empty');
  if (!_tsData.length) {
    list.innerHTML = ''; empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');
  list.innerHTML = _tsData.map(a => {
    const daThanhLy = a.trang_thai === 'da_thanh_ly';
    return `<div class="p-4 flex flex-wrap items-center gap-3 ${daThanhLy ? 'opacity-60' : ''}">
      <div class="flex-1" style="min-width:200px">
        <div class="font-bold text-gray-800">${a.ten_tai_san} <span class="text-xs text-gray-400 font-normal">(${a.ma_tai_san})</span></div>
        <div class="text-xs text-gray-500 mt-0.5">
          Mua ${a.ngay_mua || '—'} · KH ${a.so_thang_khau_hao} tháng từ ${a.ngay_bat_dau_khau_hao || '—'}
          ${daThanhLy ? ` · <span class="text-red-500 font-semibold">Đã thanh lý ${a.ngay_thanh_ly || ''}</span>` : ''}
        </div>
        ${a.ghi_chu ? `<div class="text-xs text-gray-400 mt-0.5">${a.ghi_chu}</div>` : ''}
      </div>
      <div class="text-right text-xs" style="min-width:150px">
        <div>Nguyên giá: <b class="tabular-nums">${fmtD(a.nguyen_gia*1000)}</b></div>
        <div class="text-red-500">Hao mòn: <b class="tabular-nums">${fmtD(a.hao_mon_luy_ke*1000)}</b></div>
        <div class="text-green-700">Còn lại: <b class="tabular-nums">${fmtD(a.gia_tri_con_lai*1000)}</b></div>
      </div>
      <div class="flex gap-2 flex-wrap">
        <button onclick="suaTaiSan(${a.id})" class="tkt-act tkt-blue">✏️ Sửa</button>
        ${daThanhLy
          ? `<button onclick="khoiPhucTaiSan(${a.id})" class="tkt-act tkt-teal">↺ Khôi phục</button>`
          : `<button onclick="thanhLyTaiSan(${a.id})" class="tkt-act tkt-amber">📦 Thanh lý</button>`}
        <button onclick="xoaTaiSan(${a.id})" class="tkt-act tkt-red">🗑️ Xóa</button>
      </div>
    </div>`;
  }).join('');
}

function huyEditTaiSan() {
  _tsEditingId = null;
  document.getElementById('ts-edit-banner').classList.add('hidden');
  document.getElementById('ts-cancel-btn').classList.add('hidden');
  document.getElementById('f-ten').value = '';
  document.getElementById('f-nguyengia').value = '';
  document.getElementById('f-sothang').value = '36';
  document.getElementById('f-ghichu').value = '';
  fpSet('f-ngaymua', new Date().toISOString().slice(0, 10));
  fpSet('f-ngaykh', '');
}

function suaTaiSan(id) {
  const a = _tsData.find(x => x.id === id);
  if (!a) return;
  _tsEditingId = id;
  document.getElementById('ts-edit-banner').classList.remove('hidden');
  document.getElementById('ts-edit-id').textContent = id;
  document.getElementById('ts-cancel-btn').classList.remove('hidden');
  document.getElementById('f-ten').value = a.ten_tai_san;
  document.getElementById('f-loai').value = a.loai || 'huu_hinh';
  document.getElementById('f-nguyengia').value = fmt(Math.round(a.nguyen_gia * 1000));
  document.getElementById('f-sothang').value = a.so_thang_khau_hao;
  document.getElementById('f-ghichu').value = a.ghi_chu || '';
  const toIso = s => { if (!s) return ''; const [d,m,y] = s.split('/'); return `${y}-${m}-${d}`; };
  fpSet('f-ngaymua', toIso(a.ngay_mua));
  fpSet('f-ngaykh', toIso(a.ngay_bat_dau_khau_hao));
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function luuTaiSan() {
  const ten = document.getElementById('f-ten').value.trim();
  const msg = document.getElementById('ts-msg');
  if (!ten) { msg.textContent = '⚠️ Nhập tên tài sản.'; msg.className = 'text-sm text-amber-600 mt-2'; return; }
  const nguyenGiaDong = _tsSo('f-nguyengia');
  if (nguyenGiaDong <= 0) { msg.textContent = '⚠️ Nhập nguyên giá hợp lệ.'; msg.className = 'text-sm text-amber-600 mt-2'; return; }
  const soThang = parseInt(document.getElementById('f-sothang').value, 10) || 0;
  if (soThang <= 0) { msg.textContent = '⚠️ Nhập thời gian sử dụng (tháng) hợp lệ.'; msg.className = 'text-sm text-amber-600 mt-2'; return; }
  const payload = {
    ten_tai_san: ten,
    loai: document.getElementById('f-loai').value,
    nguyen_gia: nguyenGiaDong / 1000,   // ĐỒNG → NGHÌN (khớp đơn vị lưu trong DB)
    so_thang_khau_hao: soThang,
    ngay_mua: document.getElementById('f-ngaymua').value,
    ngay_bat_dau_khau_hao: document.getElementById('f-ngaykh').value,
    ghi_chu: document.getElementById('f-ghichu').value.trim(),
  };
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: _tsEditingId ? 'Sửa tài sản cố định' : 'Thêm tài sản cố định mới' }, async pin => {
    payload.pin = pin;
    const url = _tsEditingId ? `/api/tai-san-co-dinh/${_tsEditingId}` : '/api/tai-san-co-dinh';
    const method = _tsEditingId ? 'PUT' : 'POST';
    const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? '❌ Chỉ GĐ/PGĐ mới thao tác được' : '❌ ' + (d.error || 'Lỗi')); return; }
    msg.textContent = `✅ Đã ${_tsEditingId ? 'cập nhật' : 'thêm'} tài sản ${d.ma_tai_san || ''}.`;
    msg.className = 'text-sm text-green-600 font-semibold mt-2';
    huyEditTaiSan();
    loadTaiSan();
  });
}

function thanhLyTaiSan(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Đánh dấu thanh lý — ngừng tính khấu hao từ hôm nay' }, async pin => {
    const r = await fetch(`/api/tai-san-co-dinh/${id}/thanh-ly`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadTaiSan();
  });
}

function khoiPhucTaiSan(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Hoàn tác thanh lý (bấm nhầm)' }, async pin => {
    const r = await fetch(`/api/tai-san-co-dinh/${id}/khoi-phuc`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadTaiSan();
  });
}

function xoaTaiSan(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Xóa hẳn tài sản — không hoàn tác' }, async pin => {
    const r = await fetch(`/api/tai-san-co-dinh/${id}`, {
      method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadTaiSan();
  });
}

setTimeout(() => { fpSet('f-ngaymua', new Date().toISOString().slice(0, 10)); }, 300);
loadTaiSan();
</script>
{% endblock %}