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

{% block content %}
<div class="container-fluid py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h2 class="mb-1">
        <i class="fas fa-store-alt text-primary mr-2"></i>Sub-Tenants / Counters
      </h2>
      <p class="text-muted mb-0">
        <i class="fas fa-building mr-1"></i>{{ branch.company_name }} - {{ branch.branch_name }}
      </p>
    </div>
    <a href="{% url 'authentication:sub_tenant_add' %}" class="btn btn-primary">
      <i class="fas fa-plus mr-2"></i>Add Sub-Tenant
    </a>
  </div>

  {% if messages %}
  <div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
      {{ message }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="bg-light">
            <tr>
              <th style="width: 60px;">#</th>
              <th>Name</th>
              <th>ID (pos_branch_id)</th>
              <th>Status</th>
              <th>Expiry Date</th>
              <th>Created</th>
              <th style="width: 150px;">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for st in sub_tenants %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>
                <strong>{{ st.name }}</strong>
                {% if request.session.sub_tenant_id == st.id %}
                  <span class="badge badge-success ml-2">Current</span>
                {% endif %}
              </td>
              <td>
                <code>{{ st.pos_branch_id }}</code>
              </td>
              <td>
                {% if st.status == 'Active' %}
                  <span class="badge badge-success">Active</span>
                {% else %}
                  <span class="badge badge-secondary">Inactive</span>
                {% endif %}
              </td>
              <td>
                {% if st.expiry_date %}
                  {{ st.expiry_date|date:"d M Y" }}
                {% else %}
                  <span class="text-muted">No expiry</span>
                {% endif %}
              </td>
              <td>
                {{ st.created_at|date:"d M Y" }}
                {% if st.created_by %}
                  <br><small class="text-muted">by {{ st.created_by.username }}</small>
                {% endif %}
              </td>
              <td>
                <a href="{% url 'authentication:sub_tenant_edit' st.pk %}" 
                   class="btn btn-sm btn-outline-primary" title="Edit">
                  <i class="fas fa-edit"></i>
                </a>
                <a href="{% url 'authentication:sub_tenant_delete' st.pk %}" 
                   class="btn btn-sm btn-outline-danger" title="Delete">
                  <i class="fas fa-trash"></i>
                </a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="7" class="text-center py-5">
                <i class="fas fa-store-alt-slash fa-3x text-muted mb-3"></i>
                <p class="text-muted mb-3">No sub-tenants created yet.</p>
                <a href="{% url 'authentication:sub_tenant_add' %}" class="btn btn-primary">
                  <i class="fas fa-plus mr-2"></i>Create First Sub-Tenant
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="mt-4">
    <div class="card bg-light border-0">
      <div class="card-body">
        <h6 class="mb-2"><i class="fas fa-info-circle text-info mr-2"></i>About Sub-Tenants</h6>
        <ul class="mb-0 text-muted small">
          <li>Sub-tenants represent separate counters, floors, or sections within your branch.</li>
          <li><strong>Shared data:</strong> Products, stock, vendors, and purchases are shared across all sub-tenants.</li>
          <li><strong>Isolated data:</strong> Customers, sales, expenses, and payments are separate per sub-tenant.</li>
          <li>Normal users must be assigned to specific sub-tenants to access them.</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}