{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}Companies — Workshop{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">

  {# ── Page Header ── #}
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0 fw-bold">
        <i class="bi bi-building me-2 text-primary"></i>
        Companies / Corporate / Insurance
      </h4>
      <small class="text-muted">Manage billing companies linked to customers</small>
    </div>
    <a href="{% url 'workshop:company_add' %}" class="btn btn-primary btn-sm px-3">
      <i class="bi bi-plus-lg me-1"></i> Add Company
    </a>
  </div>

  {# ── Messages ── #}
  {% for msg in messages %}
  <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2" role="alert">
    {{ msg }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  {# ── Filter Bar ── #}
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-2">
      <form method="GET" class="row g-2 align-items-center">
        <div class="col-md-5">
          <div class="input-group input-group-sm">
            <span class="input-group-text bg-white">
              <i class="bi bi-search text-muted"></i>
            </span>
            <input type="text" name="q" value="{{ search_q }}"
                   class="form-control border-start-0"
                   placeholder="Search company name...">
          </div>
        </div>
        <div class="col-md-3">
          <select name="type" class="form-select form-select-sm">
            <option value="">— All Types —</option>
            {% for val, label in company_types %}
            <option value="{{ val }}" {% if type_filter == val %}selected{% endif %}>
              {{ label }}
            </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-funnel me-1"></i> Filter
          </button>
          <a href="{% url 'workshop:company_list' %}" class="btn btn-sm btn-outline-secondary ms-1">
            <i class="bi bi-x-lg"></i> Clear
          </a>
        </div>
      </form>
    </div>
  </div>

  {# ── Table ── #}
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:50px">#</th>
            <th>Company Name</th>
            <th style="width:130px">Type</th>
            <th style="width:130px" class="text-center">Linked Customers</th>
            <th style="width:150px" class="text-end">Total Billed</th>
            <th style="width:140px" class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if companies %}
            {% for item in companies %}
            <tr>
              <td class="text-muted small">{{ item.area.t_id }}</td>
              <td>
                <a href="{% url 'workshop:company_detail' item.area.id %}"
                   class="fw-semibold text-decoration-none">
                  {{ item.area.area_name }}
                </a>
              </td>
              <td>
                {% if item.area.description == "corporate" %}
                  <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                    <i class="bi bi-briefcase me-1"></i>Corporate
                  </span>
                {% elif item.area.description == "insurance" %}
                  <span class="badge bg-success-subtle text-success border border-success-subtle">
                    <i class="bi bi-shield-check me-1"></i>Insurance
                  </span>
                {% else %}
                  <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
                    Other
                  </span>
                {% endif %}
              </td>
              <td class="text-center">
                {% if item.linked_customers > 0 %}
                  <a href="{% url 'workshop:company_detail' item.area.id %}"
                     class="text-decoration-none">
                    <span class="badge bg-info-subtle text-info border border-info-subtle px-2">
                      {{ item.linked_customers }}
                    </span>
                  </a>
                {% else %}
                  <span class="text-muted small">—</span>
                {% endif %}
              </td>
              <td class="text-end">
                {% if item.pending_amount > 0 %}
                  <span class="fw-semibold text-danger">
                    {{ item.pending_amount|floatformat:0|intcomma }}
                  </span>
                {% else %}
                  <span class="text-muted small">—</span>
                {% endif %}
              </td>
              <td class="text-center">
                <a href="{% url 'workshop:company_edit' item.area.id %}"
                   class="btn btn-sm btn-outline-secondary py-0 px-2 me-1"
                   title="Edit">
                  <i class="bi bi-pencil"></i>
                </a>
                <a href="{% url 'workshop:company_detail' item.area.id %}"
                   class="btn btn-sm btn-outline-primary py-0 px-2 me-1"
                   title="View Customers">
                  <i class="bi bi-people"></i>
                </a>
                <button type="button"
                        class="btn btn-sm btn-outline-danger py-0 px-2"
                        title="Delete"
                        onclick="confirmDelete('{{ item.area.id }}', '{{ item.area.area_name|escapejs }}', {{ item.linked_customers }})">
                  <i class="bi bi-trash"></i>
                </button>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted py-5">
                <i class="bi bi-building display-6 d-block mb-2 opacity-25"></i>
                No companies found.
                <a href="{% url 'workshop:company_add' %}" class="d-block mt-2">
                  Add your first company
                </a>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>

{# ── Delete Confirmation Modal ── #}
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header border-0 pb-0">
        <h6 class="modal-title text-danger">
          <i class="bi bi-exclamation-triangle me-1"></i> Delete Company?
        </h6>
      </div>
      <div class="modal-body py-2">
        <p class="mb-1 small" id="deleteModalMsg">Are you sure?</p>
      </div>
      <div class="modal-footer border-0 pt-0">
        <button type="button" class="btn btn-sm btn-outline-secondary"
                data-bs-dismiss="modal">Cancel</button>
        <form method="POST" id="deleteForm" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function confirmDelete(areaId, name, linkedCount) {
  const modal  = new bootstrap.Modal(document.getElementById("deleteModal"));
  const msgEl  = document.getElementById("deleteModalMsg");
  const form   = document.getElementById("deleteForm");

  if (linkedCount > 0) {
    msgEl.innerHTML = `<span class="text-danger">Cannot delete <strong>${name}</strong> — 
      ${linkedCount} customer(s) linked. Please reassign first.</span>`;
    form.style.display = "none";
  } else {
    msgEl.innerHTML = `Delete <strong>${name}</strong>? This cannot be undone.`;
    form.style.display = "inline";
    form.action = `/workshop/companies/${areaId}/delete/`;
  }
  modal.show();
}
</script>
{% endblock %}