{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1100px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-diagram-3 me-2"></i> Asset Sub Categories
    </h4>

    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#subcatModal"
            onclick="openSubcatModal()">
      <i class="bi bi-plus-circle me-1"></i> New Sub Category
    </button>
  </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-5">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" class="form-control form-control-sm"
                 value="{{ q }}" placeholder="Sub Category name">
        </div>

        <div class="col-md-5">
          <label class="form-label mb-0">Category</label>
          <select class="form-select form-select-sm" name="category_id">
            <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 text-end">
          <button class="btn btn-sm btn-outline-primary mt-3 w-100">
            <i class="bi bi-search"></i> Filter
          </button>
        </div>
      </div>
    </div>
  </form>

  <!-- 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 style="width:60px;">#</th>
              <th>Category</th>
              <th>Sub Category</th>
              <th>Description</th>
              <th style="width:120px;" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% if subcategories %}
              {% for sc in subcategories %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>{{ sc.category.name if sc.category else '-' }}</td>
                <td>{{ sc.name }}</td>
                <td class="text-muted">{{ sc.description or '-' }}</td>
                <td class="text-end">
                  <button type="button"
                          class="btn btn-sm btn-outline-secondary"
                          data-bs-toggle="modal"
                          data-bs-target="#subcatModal"
                          data-id="{{ sc.id }}"
                          data-category-id="{{ sc.category_id }}"
                          data-name="{{ sc.name }}"
                          data-description="{{ sc.description or '' }}"
                          onclick="openSubcatModalFromButton(this)">
                    <i class="bi bi-pencil"></i>
                  </button>

                  <form method="post"
                        action="{{ url_for('assets.delete_subcategory', subcat_id=sc.id) }}"
                        class="d-inline"
                        onsubmit="return confirm('Delete this sub category?');">
                    <button class="btn btn-sm btn-outline-danger ms-1">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="5" class="text-center text-muted py-3">
                  No sub categories found.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

<!-- Add/Edit Modal -->
<div class="modal fade" id="subcatModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{{ url_for('assets.subcategories') }}">
        <input type="hidden" name="mode" id="subcat_mode" value="create">
        <input type="hidden" name="subcat_id" id="subcat_id">

        <div class="modal-header">
          <h5 class="modal-title" id="subcatModalLabel">New Sub Category</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">Category *</label>
            <select name="category_id" id="subcat_category_id" class="form-select" required>
              <option value="">-- Select --</option>
              {% for c in categories %}
                <option value="{{ c.id }}">{{ c.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-2">
            <label class="form-label">Sub Category Name *</label>
            <input type="text" name="name" id="subcat_name" class="form-control" required>
          </div>

          <div class="mb-2">
            <label class="form-label">Description</label>
            <textarea name="description" id="subcat_description" class="form-control" rows="2"></textarea>
          </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>

<script>
  function openSubcatModal(id, categoryId, name, description) {
    document.getElementById("subcat_mode").value = id ? "edit" : "create";
    document.getElementById("subcat_id").value = id || "";
    document.getElementById("subcat_category_id").value = categoryId || "";
    document.getElementById("subcat_name").value = name || "";
    document.getElementById("subcat_description").value = description || "";

    document.getElementById("subcatModalLabel").innerText = id ? "Edit Sub Category" : "New Sub Category";
  }

  function openSubcatModalFromButton(btn) {
    const d = btn.dataset;
    openSubcatModal(
      d.id || "",
      d.categoryId || "",
      d.name || "",
      d.description || ""
    );
  }
</script>
{% endblock %}