{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1200px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-laptop me-2"></i> Asset Master
    </h4>
    <div class="d-flex gap-2">
      <a href="{{ url_for('assets.bulk_upload_assets') }}" class="btn btn-outline-primary">
        <i class="bi bi-upload me-1"></i> Bulk Upload
      </a>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assetModal"
              onclick="openAssetModal()">
        <i class="bi bi-plus-circle me-1"></i> New Asset
      </button>
    </div>
  </div>

  <!-- Filters -->
  <form class="card shadow-sm border-0 mb-3" method="GET">
    <div class="card-body py-2">
      <div class="row g-2 align-items-end">

        <div class="col-md-3">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" class="form-control form-control-sm"
                 value="{{ q }}" placeholder="Tag / Code / Name / Serial">
        </div>

        <div class="col-md-2">
          <label class="form-label mb-0">Category</label>
          <select class="form-select form-select-sm" name="category_id" id="filter_category">
            <option value="">All</option>
            {% for c in categories %}
              <option value="{{ c.id }}" {% if category_id and category_id|int == c.id %}selected{% endif %}>
                {{ c.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label mb-0">Sub Category</label>
          <select class="form-select form-select-sm" name="subcategory_id" id="filter_subcategory">
            <option value="">All</option>
            {% if subcategories %}
              {% for sc in subcategories %}
                <option value="{{ sc.id }}" {% if subcategory_id and subcategory_id|int == sc.id %}selected{% endif %}>
                  {{ sc.name }}
                </option>
              {% endfor %}
            {% endif %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label mb-0">Vendor</label>
          <select class="form-select form-select-sm" name="vendor_id">
            <option value="">All</option>
            {% for v in vendors %}
              <option value="{{ v.id }}" {% if vendor_id and vendor_id|int == v.id %}selected{% endif %}>
                {{ v.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label mb-0">Status</label>
          <select class="form-select form-select-sm" name="status">
            <option value="">All</option>
            {% for st in ['in_stock','allocated','under_repair','retired','lost','damaged'] %}
              <option value="{{ st }}" {% if status == st %}selected{% endif %}>
                {{ st.replace('_',' ')|title }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-1">
          <label class="form-label mb-0">Per</label>
          <select class="form-select form-select-sm" name="per_page" onchange="this.form.submit()">
            {% for n in [10,25,50,100] %}
              <option value="{{ n }}" {% if per_page == n %}selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-12 d-flex justify-content-end gap-2 mt-1">
          <a class="btn btn-sm btn-outline-secondary"
             href="{{ url_for('assets.list_assets') }}">
            Reset
          </a>
          <button class="btn btn-sm btn-outline-primary">
            <i class="bi bi-search"></i> Apply
          </button>
        </div>

      </div>
    </div>
  </form>

  <!-- Asset list -->
  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Tag</th>
              <th>Code</th>
              <th>Name</th>
              <th>Image</th>
              <th>Category</th>
              <th>Sub Category</th>
              <th>Vendor</th>
              <th>Serial</th>
              <th>Status</th>
              <th class="text-center">Qty (T/A)</th>
              <th>Holder</th>
              <th>Purchase</th>
              <th style="width:140px;" class="text-end">Actions</th>
            </tr>
          </thead>

          <tbody>
            {% if assets %}
              {% for a in assets %}
              <tr>
                <td>{{ a.asset_tag }}</td>
                <td>{{ a.asset_code or '-' }}</td>
                <td>{{ a.name }}</td>

                <!-- Image thumb -->
                <td>
                  {% if a.image_path %}
                    <a href="{{ url_for('static', filename=a.image_path) }}" target="_blank" title="View Image">
                      <img src="{{ url_for('static', filename=a.image_path) }}"
                           style="height:36px;width:36px;object-fit:cover;border-radius:8px;border:1px solid #eee;">
                    </a>
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>

                <td>{{ a.category.name if a.category else '-' }}</td>
                <td>{{ a.subcategory.name if a.subcategory else '-' }}</td>
                <td>{{ a.vendor.name if a.vendor else '-' }}</td>
                <td>{{ a.serial_number or '-' }}</td>

                <td>
                  <span class="badge bg-light text-dark border">
                    {{ (a.status or 'in_stock').replace('_',' ')|title }}
                  </span>
                </td>

                <td class="text-center">
                  {% set total = (a.quantity_total if a.quantity_total is not none else 1) %}
                  {% set avail = (a.quantity_available if a.quantity_available is not none else total) %}
                  <span class="badge bg-light text-dark border">
                    {{ total|int }}/{{ avail|int }}
                  </span>
                </td>

                <td>
                  {% if a.current_holder %}
                    {{ a.current_holder.employee_code }} - {{ a.current_holder.full_name }}
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>

                <td>
                  {% if a.purchase_date %}
                    {{ a.purchase_date.strftime('%d-%m-%Y') }}
                  {% else %}-{% endif %}
                </td>

                <td class="text-end">
                  <!-- Edit -->
                  <button type="button"
                          class="btn btn-sm btn-outline-secondary"
                          data-bs-toggle="modal"
                          data-bs-target="#assetModal"
                          data-id="{{ a.id }}"
                          data-tag="{{ a.asset_tag }}"
                          data-code="{{ a.asset_code or '' }}"
                          data-name="{{ a.name }}"
                          data-category-id="{{ a.category_id or '' }}"
                          data-subcategory-id="{{ a.subcategory_id or '' }}"
                          data-vendor-id="{{ a.vendor_id or '' }}"
                          data-serial="{{ a.serial_number or '' }}"
                          data-purchase="{{ a.purchase_date.strftime('%Y-%m-%d') if a.purchase_date else '' }}"
                          data-warranty="{{ a.warranty_expiry.strftime('%Y-%m-%d') if a.warranty_expiry else '' }}"
                          data-status="{{ a.status or 'in_stock' }}"
                          data-location="{{ a.location or '' }}"
                          data-remarks="{{ a.remarks or '' }}"
                          data-qty-total="{{ a.quantity_total or 1 }}"
                          data-qty-avail="{{ a.quantity_available if a.quantity_available is not none else (a.quantity_total or 1) }}"
                          data-image-url="{{ url_for('static', filename=a.image_path) if a.image_path else '' }}"
                          onclick="openAssetModalFromButton(this)">
                    <i class="bi bi-pencil"></i>
                  </button>

                  <!-- Allocate (blocked when not allowed) -->
                  {% set hard_block_status = ['lost', 'damaged', 'retired'] %}
                  {% set soft_block = a.id in blocked_for_allocation %}
                  {% if a.status not in hard_block_status and not soft_block %}
                    <button type="button"
                            class="btn btn-sm btn-outline-success ms-1"
                            data-bs-toggle="modal"
                            data-bs-target="#allocateModal"
                            data-asset-id="{{ a.id }}"
                            data-asset-label="{{ a.asset_tag }} - {{ a.name }}"
                            data-asset-avail="{{ a.quantity_available if a.quantity_available is not none else (a.quantity_total or 1) }}"
                            onclick="prepareAllocateFromButton(this)">
                      <i class="bi bi-person-plus"></i>
                    </button>
                  {% else %}
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary ms-1"
                            disabled
                            title="Asset not available for allocation">
                      <i class="bi bi-lock"></i>
                    </button>
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="13" class="text-center text-muted py-3">
                  No assets found.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      {% if pagination and pagination.pages > 1 %}
      <div class="d-flex justify-content-between align-items-center p-2">
        <div class="text-muted small">
          Showing {{ (pagination.page - 1) * pagination.per_page + 1 }}
          to {{ (pagination.page - 1) * pagination.per_page + (assets|length) }}
          of {{ pagination.total }}
        </div>

        <nav>
          <ul class="pagination pagination-sm mb-0">
            <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
              <a class="page-link"
                 href="{{ url_for('assets.list_assets',
                                  page=pagination.prev_num,
                                  per_page=per_page,
                                  q=q,
                                  status=status,
                                  category_id=category_id,
                                  subcategory_id=subcategory_id,
                                  vendor_id=vendor_id) }}">Prev</a>
            </li>

            {% for p in range(1, pagination.pages + 1) %}
              {% if p == 1 or p == pagination.pages or (p >= pagination.page-2 and p <= pagination.page+2) %}
                <li class="page-item {% if p == pagination.page %}active{% endif %}">
                  <a class="page-link"
                     href="{{ url_for('assets.list_assets',
                                      page=p,
                                      per_page=per_page,
                                      q=q,
                                      status=status,
                                      category_id=category_id,
                                      subcategory_id=subcategory_id,
                                      vendor_id=vendor_id) }}">{{ p }}</a>
                </li>
              {% elif p == 2 or p == pagination.pages-1 %}
                <li class="page-item disabled"><span class="page-link">…</span></li>
              {% endif %}
            {% endfor %}

            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
              <a class="page-link"
                 href="{{ url_for('assets.list_assets',
                                  page=pagination.next_num,
                                  per_page=per_page,
                                  q=q,
                                  status=status,
                                  category_id=category_id,
                                  subcategory_id=subcategory_id,
                                  vendor_id=vendor_id) }}">Next</a>
            </li>
          </ul>
        </nav>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Asset create/edit modal -->
<div class="modal fade" id="assetModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <form method="post" action="{{ url_for('assets.list_assets') }}" enctype="multipart/form-data">
        <input type="hidden" name="mode" id="asset_mode" value="create">
        <input type="hidden" name="asset_id" id="asset_id">

        <div class="modal-header">
          <h5 class="modal-title" id="assetModalLabel">New Asset</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="row g-3">

            <div class="col-md-4">
              <label class="form-label">Asset Tag *</label>
              <input type="text" name="asset_tag" id="asset_tag" class="form-control" required>
            </div>

            <div class="col-md-4">
              <label class="form-label">Asset Code (optional)</label>
              <input type="text" name="asset_code" id="asset_code" class="form-control" placeholder="If blank, will use Tag">
            </div>

            <div class="col-md-4">
              <label class="form-label">Status</label>
              <select name="status" id="asset_status" class="form-select">
                {% for st in ['in_stock','allocated','under_repair','retired','lost','damaged'] %}
                  <option value="{{ st }}">{{ st.replace('_',' ')|title }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-12">
              <label class="form-label">Name *</label>
              <input type="text" name="name" id="asset_name" class="form-control" required>
            </div>

            <!-- Image upload -->
            <div class="col-md-12">
              <label class="form-label">Asset Image (optional)</label>
              <input type="file" name="image" id="asset_image" class="form-control" accept="image/*">
              <div class="form-text">PNG / JPG / JPEG / WEBP</div>

              <div id="asset_image_preview_wrap" class="mt-2 d-none">
                <a id="asset_image_preview_link" href="#" target="_blank" class="text-decoration-none">
                  <img id="asset_image_preview"
                       src=""
                       style="height:70px;width:70px;object-fit:cover;border-radius:10px;border:1px solid #eee;">
                  <span class="ms-2 small text-muted">View current image</span>
                </a>
              </div>
            </div>

            <div class="col-md-4">
              <label class="form-label">Category</label>
              <select name="category_id" id="asset_category_id" class="form-select">
                <option value="">-- Select --</option>
                {% for c in categories %}
                  <option value="{{ c.id }}">{{ c.name }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Sub Category</label>
              <select name="subcategory_id" id="asset_subcategory_id" class="form-select" disabled>
                <option value="">-- Select Category First --</option>
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Vendor</label>
              <select name="vendor_id" id="asset_vendor_id" class="form-select">
                <option value="">-- Select --</option>
                {% for v in vendors %}
                  <option value="{{ v.id }}">{{ v.name }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Serial No.</label>
              <input type="text" name="serial_number" id="asset_serial" class="form-control">
            </div>

            <div class="col-md-4">
              <label class="form-label">Purchase Date</label>
              <input type="date" name="purchase_date" id="asset_purchase_date" class="form-control">
            </div>

            <div class="col-md-4">
              <label class="form-label">Warranty Expiry</label>
              <input type="date" name="warranty_expiry" id="asset_warranty" class="form-control">
            </div>

            <div class="col-md-4">
              <label class="form-label">Quantity Total</label>
              <input type="number" min="1" name="quantity_total" id="asset_quantity_total"
                     class="form-control" value="1">
              <div class="form-text">Use 1 for laptops/phones. Use &gt;1 for stationery/consumables.</div>
            </div>

            <div class="col-md-8">
              <label class="form-label">Location</label>
              <input type="text" name="location" id="asset_location" class="form-control">
            </div>

            <div class="col-md-12">
              <label class="form-label">Remarks</label>
              <textarea name="remarks" id="asset_remarks" class="form-control" rows="2"></textarea>
            </div>

          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Allocate modal -->
<div class="modal fade" id="allocateModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" id="allocateForm" action="{{ url_for('assets.allocate_asset') }}">
        <input type="hidden" name="asset_id" id="allocate_asset_id">

        <div class="modal-header">
          <h5 class="modal-title">Allocate Asset</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label">Asset</label>
            <input type="text" class="form-control" id="allocate_asset_label" disabled>
          </div>

          <div class="mb-2">
            <label class="form-label">Employee *</label>
            <select name="employee_id" class="form-select" required>
              <option value="">-- Select Employee --</option>
              {% for e in employees %}
                <option value="{{ e.id }}">{{ e.employee_code }} - {{ e.full_name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-2">
            <label class="form-label">Allocated On</label>
            <input type="date" name="allocated_on" class="form-control"
                   value="{{ now().date().strftime('%Y-%m-%d') if now else '' }}">
          </div>

          <div class="mb-2">
            <label class="form-label">Due Back On (optional)</label>
            <input type="date" name="due_back_on" class="form-control">
          </div>

          <div class="mb-2">
            <label class="form-label">Quantity</label>
            <input type="number" min="1" name="quantity" id="allocate_quantity"
                   class="form-control" value="1">
            <div class="form-text" id="allocate_qty_help"></div>
          </div>

          <div class="mb-2">
            <label class="form-label">Remarks</label>
            <textarea name="remarks" class="form-control" rows="2"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary">
            <i class="bi bi-check2-circle me-1"></i> Allocate
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  async function fetchSubcategories(categoryId) {
    if (!categoryId) return [];
    const res = await fetch(`/assets/api/subcategories?category_id=${encodeURIComponent(categoryId)}`);
    const data = await res.json();
    return (data && data.items) ? data.items : [];
  }

  function setSubcategoryOptions(selectEl, items, selectedValue, placeholder) {
    selectEl.innerHTML = "";
    const opt0 = document.createElement("option");
    opt0.value = "";
    opt0.textContent = placeholder || "-- Select --";
    selectEl.appendChild(opt0);

    (items || []).forEach(it => {
      const opt = document.createElement("option");
      opt.value = it.id;
      opt.textContent = it.name;
      if (selectedValue && String(selectedValue) === String(it.id)) {
        opt.selected = true;
      }
      selectEl.appendChild(opt);
    });
  }

  async function refreshModalSubcategories(categoryId, selectedSubcatId) {
    const subSel = document.getElementById("asset_subcategory_id");
    if (!subSel) return;

    if (!categoryId) {
      subSel.disabled = true;
      subSel.innerHTML = `<option value="">-- Select Category First --</option>`;
      return;
    }

    subSel.disabled = false;
    const items = await fetchSubcategories(categoryId);
    setSubcategoryOptions(subSel, items, selectedSubcatId, "-- Select --");
  }

  async function refreshFilterSubcategories(categoryId, selectedSubcatId) {
    const subSel = document.getElementById("filter_subcategory");
    if (!subSel) return;

    if (!categoryId) {
      subSel.innerHTML = `<option value="">All</option>`;
      return;
    }

    const items = await fetchSubcategories(categoryId);
    subSel.innerHTML = "";

    const allOpt = document.createElement("option");
    allOpt.value = "";
    allOpt.textContent = "All";
    subSel.appendChild(allOpt);

    items.forEach(it => {
      const opt = document.createElement("option");
      opt.value = it.id;
      opt.textContent = it.name;
      if (selectedSubcatId && String(selectedSubcatId) === String(it.id)) {
        opt.selected = true;
      }
      subSel.appendChild(opt);
    });
  }

  function resetImageFieldForModal() {
    const fileInput = document.getElementById("asset_image");
    if (fileInput) fileInput.value = "";

    const wrap = document.getElementById("asset_image_preview_wrap");
    const img = document.getElementById("asset_image_preview");
    const link = document.getElementById("asset_image_preview_link");
    if (wrap) wrap.classList.add("d-none");
    if (img) img.src = "";
    if (link) link.href = "#";
  }

  async function openAssetModal(id, tag, code, name, category_id, subcategory_id, vendor_id,
                          serial, purchase_date, warranty, status, location, remarks, qty_total, imageUrl) {
    const modalTitle = document.getElementById("assetModalLabel");
    document.getElementById("asset_mode").value = id ? "edit" : "create";
    document.getElementById("asset_id").value = id || "";
    document.getElementById("asset_tag").value = tag || "";
    document.getElementById("asset_code").value = code || "";
    document.getElementById("asset_name").value = name || "";
    document.getElementById("asset_category_id").value = category_id || "";
    document.getElementById("asset_vendor_id").value = vendor_id || "";
    document.getElementById("asset_serial").value = serial || "";
    document.getElementById("asset_purchase_date").value = purchase_date || "";
    document.getElementById("asset_warranty").value = warranty || "";
    document.getElementById("asset_quantity_total").value = qty_total || 1;
    document.getElementById("asset_status").value = status || "in_stock";
    document.getElementById("asset_location").value = location || "";
    document.getElementById("asset_remarks").value = remarks || "";
    modalTitle.innerText = id ? "Edit Asset" : "New Asset";

    resetImageFieldForModal();

    if (imageUrl) {
      const wrap = document.getElementById("asset_image_preview_wrap");
      const img = document.getElementById("asset_image_preview");
      const link = document.getElementById("asset_image_preview_link");
      if (wrap && img && link) {
        img.src = imageUrl;
        link.href = imageUrl;
        wrap.classList.remove("d-none");
      }
    }

    await refreshModalSubcategories(category_id || "", subcategory_id || "");
  }

  function openAssetModalFromButton(btn) {
    const d = btn.dataset;
    openAssetModal(
      d.id || "",
      d.tag || "",
      d.code || "",
      d.name || "",
      d.categoryId || "",
      d.subcategoryId || "",
      d.vendorId || "",
      d.serial || "",
      d.purchase || "",
      d.warranty || "",
      d.status || "in_stock",
      d.location || "",
      d.remarks || "",
      parseInt(d.qtyTotal || "1", 10),
      d.imageUrl || ""
    );
  }

  function prepareAllocateFromButton(btn) {
    const assetId = btn.dataset.assetId;
    const label = btn.dataset.assetLabel || "";
    const avail = parseInt(btn.dataset.assetAvail || "1", 10);

    document.getElementById("allocate_asset_id").value = assetId || "";
    document.getElementById("allocate_asset_label").value = label;

    const qtyInput = document.getElementById("allocate_quantity");
    const help = document.getElementById("allocate_qty_help");

    qtyInput.value = 1;
    qtyInput.max = avail > 0 ? avail : 1;
    help.innerText = `Available: ${avail}`;
  }

  document.addEventListener("DOMContentLoaded", () => {
    const filterCat = document.getElementById("filter_category");
    const selectedSubcat = "{{ subcategory_id or '' }}";
    if (filterCat) {
      if (filterCat.value) {
        refreshFilterSubcategories(filterCat.value, selectedSubcat);
      }
      filterCat.addEventListener("change", () => {
        refreshFilterSubcategories(filterCat.value, "");
      });
    }

    const modalCat = document.getElementById("asset_category_id");
    if (modalCat) {
      modalCat.addEventListener("change", () => {
        refreshModalSubcategories(modalCat.value, "");
      });
    }
  });
</script>
{% endblock %}