{% extends "pos/base.html" %}
{% block title %}SubTenant ↔ Spec A Assignments{% endblock %}
{% block heading %}SubTenant ↔ Spec A Assignments{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
    .spec-badge {
        display: inline-block;
        padding: 4px 10px;
        margin: 2px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: 500;
    }
    .spec-badge-primary {
        background: #28a745;
        color: #fff;
    }
    .spec-badge-normal {
        background: #6c757d;
        color: #fff;
    }
    .sub-tenant-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .sub-tenant-header {
        background: #f8f9fa;
        padding: 12px 15px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sub-tenant-body {
        padding: 15px;
    }
    .unassigned-badge {
        background: #ffc107;
        color: #000;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
    }
    .stats-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex mb-3 flex-wrap">
    <a class="btn btn-secondary font-weight-bold mr-2 mb-1" href="{% url 'authentication:sub_tenant_list' %}">
        <i class="fas fa-arrow-left"></i> Back to Sub-Tenants
    </a>
    <a class="btn btn-success font-weight-bold mr-2 mb-1" href="{% url 'authentication:sub_tenant_spec_a_add' %}">
        <i class="fas fa-plus"></i> Add Assignment
    </a>
    <a class="btn btn-primary font-weight-bold mb-1" href="{% url 'authentication:sub_tenant_spec_a_bulk' %}">
        <i class="fas fa-layer-group"></i> Bulk Assign
    </a>
</div>

<!-- Stats Row -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-box">
            <h4>{{ total_assignments }}</h4>
            <small>Total Assignments</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-box" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
            <h4>{{ sub_tenants_with_specs|length }}</h4>
            <small>Sub-Tenants with Spec A</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <h4>{{ unassigned_sub_tenants|length }}</h4>
            <small>Unassigned Sub-Tenants</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-box" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <h4>{{ spec_a_terms|length }}</h4>
            <small>Total Spec A Terms</small>
        </div>
    </div>
</div>

<!-- Assigned Sub-Tenants -->
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <i class="fas fa-link"></i> <strong>Assigned Sub-Tenants</strong>
    </div>
    <div class="card-body">
        {% if sub_tenants_with_specs %}
            {% for st_id, data in sub_tenants_with_specs.items %}
            <div class="sub-tenant-card">
                <div class="sub-tenant-header">
                    <div>
                        <strong><i class="fas fa-store-alt"></i> {{ data.sub_tenant.name }}</strong>
                        {% if data.primary %}
                            <small class="text-success ml-2">
                                (Primary: {{ data.primary.name }})
                            </small>
                        {% endif %}
                    </div>
                    <div>
                        <a href="{% url 'authentication:sub_tenant_spec_a_bulk' %}?sub_tenant={{ st_id }}" 
                           class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-edit"></i> Manage
                        </a>
                    </div>
                </div>
                <div class="sub-tenant-body">
                    {% for assignment in data.specs %}
                        <span class="spec-badge {% if assignment.is_primary %}spec-badge-primary{% else %}spec-badge-normal{% endif %}">
                            {{ assignment.spec_a.name }}
                            {% if assignment.is_primary %}
                                <i class="fas fa-star ml-1"></i>
                            {% endif %}
                            <a href="{% url 'authentication:sub_tenant_spec_a_delete' assignment.pk %}" 
                               class="text-white ml-1" 
                               onclick="return confirm('Remove this assignment?');"
                               title="Remove">
                                <i class="fas fa-times"></i>
                            </a>
                        </span>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        {% else %}
            <p class="text-muted text-center py-3">
                <i class="fas fa-info-circle"></i> No assignments yet. 
                <a href="{% url 'authentication:sub_tenant_spec_a_add' %}">Create your first assignment</a>.
            </p>
        {% endif %}
    </div>
</div>

<!-- Unassigned Sub-Tenants -->
{% if unassigned_sub_tenants %}
<div class="card mb-4">
    <div class="card-header bg-warning">
        <i class="fas fa-exclamation-triangle"></i> <strong>Unassigned Sub-Tenants</strong>
        <small class="ml-2">(No Spec A attached)</small>
    </div>
    <div class="card-body">
        <div class="row">
            {% for st in unassigned_sub_tenants %}
            <div class="col-md-4 mb-2">
                <div class="d-flex justify-content-between align-items-center p-2 border rounded">
                    <span>
                        <i class="fas fa-store-alt text-muted"></i> {{ st.name }}
                    </span>
                    <a href="{% url 'authentication:sub_tenant_spec_a_add' %}?sub_tenant={{ st.id }}" 
                       class="btn btn-xs btn-success">
                        <i class="fas fa-plus"></i> Assign
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- All Spec A Terms Reference -->
<div class="card">
    <div class="card-header bg-info text-white">
        <i class="fas fa-tags"></i> <strong>Available Spec A Terms</strong>
    </div>
    <div class="card-body">
        {% if spec_a_terms %}
            {% for term in spec_a_terms %}
                <span class="badge badge-secondary p-2 m-1">{{ term.name }}</span>
            {% endfor %}
        {% else %}
            <p class="text-muted mb-0">
                No Spec A terms defined yet. 
                <a href="#">Create Spec A terms</a> first.
            </p>
        {% endif %}
    </div>
</div>
{% endblock %}