{% 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>
    <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>

  <!-- Filters -->
  <form class="card shadow-sm border-0 mb-3">
    <div class="card-body py-2">
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" class="form-control form-control-sm"
                 value="{{ q }}" placeholder="Tag / Name / Serial">
        </div>
        <div class="col-md-3">
          <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|int == c.id %}selected{% endif %}>
                {{ c.name }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <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'] %}
              <option value="{{ st }}" {% if status == st %}selected{% endif %}>
                {{ st.replace('_',' ')|title }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2 text-end">
          <button class="btn btn-sm btn-outline-primary mt-3">
            <i class="bi bi-search"></i> Filter
          </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>Name</th>
              <th>Category</th>
              <th>Vendor</th>
              <th>Serial</th>
              <th>Status</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.name }}</td>
                <td>{{ a.category.name if a.category 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.replace('_',' ')|title }}
                  </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-name="{{ a.name }}"
                          data-category-id="{{ a.category_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 '' }}"
                          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 }}"
                            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="9" class="text-center text-muted py-3">
                  No assets found.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </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') }}">
        <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-8">
              <label class="form-label">Name *</label>
              <input type="text" name="name" id="asset_name" class="form-control" required>
            </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">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">Status</label>
              <select name="status" id="asset_status" class="form-select">
                {% for st in ['in_stock','allocated','under_repair','retired'] %}
                  <option value="{{ st }}">{{ st.replace('_',' ')|title }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-6">
              <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() 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">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>
  // Reset / prefill asset modal
  function openAssetModal(id, tag, name, category_id, vendor_id,
                          serial, purchase_date, warranty, status, location, remarks) {
    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_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_status").value = status || "in_stock";
    document.getElementById("asset_location").value = location || "";
    document.getElementById("asset_remarks").value = remarks || "";
    modalTitle.innerText = id ? "Edit Asset" : "New Asset";
  }

  // Called from the edit button (uses data-* attributes)
  function openAssetModalFromButton(btn) {
    const d = btn.dataset;
    openAssetModal(
      d.id || "",
      d.tag || "",
      d.name || "",
      d.categoryId || "",
      d.vendorId || "",
      d.serial || "",
      d.purchase || "",
      d.warranty || "",
      d.status || "in_stock",
      d.location || "",
      d.remarks || ""
    );
  }

  // Prepare allocation modal
  function prepareAllocateFromButton(btn) {
    const assetId = btn.dataset.assetId;
    const label = btn.dataset.assetLabel || "";
    document.getElementById("allocate_asset_id").value = assetId || "";
    document.getElementById("allocate_asset_label").value = label;
  }
</script>
{% endblock %}