{% extends "pos/base.html" %}
{% load static %}
{% block title %}Spec Terms{% endblock %}
{% block heading %}Spec Terms{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">Spec Terms (A/B)</h5>
    <div>
      <select id="filter_type" class="form-control form-control-sm d-inline-block" style="width:120px;">
        <option value="">All</option>
        <option value="A">Type A</option>
        <option value="B">Type B</option>
      </select>
      <button id="btnAdd" class="btn btn-sm btn-primary ml-2">Add New</button>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-striped mb-0" id="termsTable">
          <thead class="thead-light">
            <tr>
              <th style="width:80px;">ID</th>
              <th style="width:90px;">Type</th>
              <th>Name</th>
              <th style="width:140px;">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for it in items %}
            <tr data-id="{{ it.id }}" data-type="{{ it.spec_type }}" data-name="{{ it.name }}">
              <td>{{ it.id }}</td>
              <td>{{ it.spec_type }}</td>
              <td>{{ it.name }}</td>
              <td>
                <button class="btn btn-sm btn-outline-secondary btn-edit">Edit</button>
                <button class="btn btn-sm btn-outline-danger btn-del">Delete</button>
              </td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-muted p-3">No spec terms yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="specModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="specForm" class="modal-content">
      {% csrf_token %}
      <div class="modal-header py-2">
        <h6 class="modal-title">Spec Term</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body py-3">
        <input type="hidden" name="id" id="spec_id">
        <div class="form-row">
          <div class="form-group col-4 mb-2">
            <label class="mb-1">Type</label>
            <select class="form-control form-control-sm" name="spec_type" id="spec_type" required>
              <option value="A">A</option>
              <option value="B">B</option>
            </select>
          </div>
          <div class="form-group col-8 mb-2">
            <label class="mb-1">Name</label>
            <input type="text" class="form-control form-control-sm" name="name" id="spec_name" required>
          </div>
        </div>
        <div class="text-danger small" id="form_error" style="display:none;"></div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
(function(){
  function getCSRF(){ return document.querySelector('input[name=csrfmiddlewaretoken]').value; }

  function rowHtml(it){
    return `
      <tr data-id="${it.id}" data-type="${it.spec_type}" data-name="${it.name}">
        <td>${it.id}</td>
        <td>${it.spec_type}</td>
        <td>${it.name}</td>
        <td>
          <button class="btn btn-sm btn-outline-secondary btn-edit">Edit</button>
          <button class="btn btn-sm btn-outline-danger btn-del">Delete</button>
        </td>
      </tr>`;
  }

  function refreshTable(){
    const t = document.querySelector('#termsTable tbody');
    const type = document.querySelector('#filter_type').value;
    fetch(`{% url 'pos:spec_term_list_json' %}?type=${encodeURIComponent(type)}`)
      .then(r=>r.json()).then(j=>{
        if(!j.ok){ alert('Failed'); return; }
        t.innerHTML = j.items.length ? j.items.map(rowHtml).join('') :
          `<tr><td colspan="4" class="text-center text-muted p-3">No spec terms.</td></tr>`;
      });
  }

  // Add New
  document.getElementById('btnAdd').addEventListener('click', function(){
    document.getElementById('spec_id').value = '';
    document.getElementById('spec_type').value = 'A';
    document.getElementById('spec_name').value = '';
    document.getElementById('form_error').style.display='none';
    $('#specModal').modal('show');
  });

  // Edit
  document.getElementById('termsTable').addEventListener('click', function(e){
    if(e.target.classList.contains('btn-edit')){
      const tr = e.target.closest('tr');
      document.getElementById('spec_id').value = tr.dataset.id;
      document.getElementById('spec_type').value = tr.dataset.type;
      document.getElementById('spec_name').value = tr.dataset.name;
      document.getElementById('form_error').style.display='none';
      $('#specModal').modal('show');
    }
  });

  // Delete
  document.getElementById('termsTable').addEventListener('click', function(e){
    if(e.target.classList.contains('btn-del')){
      const tr = e.target.closest('tr');
      const id = tr.dataset.id;
      if(!confirm('Delete this term?')) return;
      fetch(`{% url 'pos:spec_term_delete' pk=0 %}`.replace('0', id), {
        method:'POST',
        headers:{'X-CSRFToken': getCSRF()}
      }).then(r=>r.json()).then(j=>{
        if(!j.ok){ alert(j.error||'Delete failed'); return; }
        refreshTable();
      });
    }
  });

  // Save (Add/Edit)
  document.getElementById('specForm').addEventListener('submit', function(e){
    e.preventDefault();
    const fd = new FormData(this);
    fetch(`{% url 'pos:spec_term_save' %}`, {
      method:'POST',
      headers:{'X-CSRFToken': getCSRF()},
      body: fd
    }).then(r=>r.json()).then(j=>{
      if(!j.ok){
        const fe = document.getElementById('form_error');
        fe.textContent = j.error || 'Save failed';
        fe.style.display = 'block';
        return;
      }
      $('#specModal').modal('hide');
      refreshTable();
    });
  });

  // Filter change
  document.getElementById('filter_type').addEventListener('change', refreshTable);
})();
</script>
{% endblock %}