{% extends "pos/base.html" %}
{% load static %}
{% block title %}Bulk Assign Spec A{% endblock %}
{% block heading %}Bulk Assign Spec A to Sub-Tenant{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
    .spec-checkbox {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        transition: all 0.2s;
    }
    .spec-checkbox:hover {
        background: #f8f9fa;
    }
    .spec-checkbox.selected {
        background: #d4edda;
        border-color: #28a745;
    }
    .spec-checkbox input[type="checkbox"] {
        margin-right: 10px;
        transform: scale(1.3);
    }
    .primary-indicator {
        background: #28a745;
        color: #fff;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 11px;
        margin-left: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex mb-3">
    <a class="btn btn-secondary font-weight-bold" href="{% url 'authentication:sub_tenant_spec_a_list' %}">
        <i class="fas fa-arrow-left"></i> Back to List
    </a>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <strong><i class="fas fa-layer-group"></i> Bulk Assign Spec A Terms</strong>
    </div>
    <div class="card-body">
        <form method="post" id="bulk-form">
            {% csrf_token %}
            
            <!-- Sub-Tenant Selection -->
            <div class="form-group row">
                <label class="col-md-3 col-form-label"><strong>Select Sub-Tenant</strong></label>
                <div class="col-md-6">
                    {{ form.sub_tenant }}
                    {% if form.sub_tenant.errors %}
                        <div class="text-danger small">{{ form.sub_tenant.errors }}</div>
                    {% endif %}
                </div>
            </div>
            
            <hr>
            
            <!-- Spec A Terms Selection -->
            <div class="form-group">
                <label><strong>Select Spec A Terms to Assign:</strong></label>
                <small class="text-muted d-block mb-3">
                    Check the Spec A terms you want to assign to this sub-tenant. 
                    Unchecked terms will be removed.
                </small>
                
                <div class="row" id="spec-checkboxes">
                    {% for spec in form.spec_a_terms %}
                    <div class="col-md-4">
                        <div class="spec-checkbox" id="spec-box-{{ spec.data.value }}">
                            {{ spec.tag }}
                            <label for="{{ spec.id_for_label }}">{{ spec.choice_label }}</label>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12">
                        <p class="text-muted">No Spec A terms available.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <hr>
            
            <!-- Primary Selection -->
            <div class="form-group row">
                <label class="col-md-3 col-form-label"><strong>Primary Spec A</strong></label>
                <div class="col-md-6">
                    {{ form.primary_spec_a }}
                    <small class="text-muted">
                        Optional: Select which Spec A should be the primary/default.
                    </small>
                </div>
            </div>
            
            <hr>
            
            <div class="form-group">
                <button type="submit" class="btn btn-success font-weight-bold btn-lg mr-2">
                    <i class="fas fa-save"></i> Save Assignments
                </button>
                <a href="{% url 'authentication:sub_tenant_spec_a_list' %}" class="btn btn-outline-secondary btn-lg">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Summary Card -->
<div class="card mt-4">
    <div class="card-header bg-light">
        <i class="fas fa-clipboard-list"></i> <strong>Selected Summary</strong>
    </div>
    <div class="card-body">
        <p class="mb-1">
            <strong>Selected:</strong> <span id="selected-count">0</span> Spec A term(s)
        </p>
        <div id="selected-list" class="text-muted">None selected</div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
$(function() {
    // Update checkbox styling and summary
    function updateSelection() {
        var selected = [];
        $('input[name="spec_a_terms"]:checked').each(function() {
            var label = $(this).next('label').text().trim();
            selected.push(label);
            $(this).closest('.spec-checkbox').addClass('selected');
        });
        $('input[name="spec_a_terms"]:not(:checked)').each(function() {
            $(this).closest('.spec-checkbox').removeClass('selected');
        });
        
        $('#selected-count').text(selected.length);
        if (selected.length > 0) {
            $('#selected-list').html(selected.map(s => `<span class="badge badge-success mr-1">${s}</span>`).join(''));
        } else {
            $('#selected-list').text('None selected');
        }
    }
    
    // Initialize
    updateSelection();
    
    // On checkbox change
    $('input[name="spec_a_terms"]').on('change', function() {
        updateSelection();
    });
    
    // Click on box to toggle
    $('.spec-checkbox').on('click', function(e) {
        if (e.target.tagName !== 'INPUT') {
            var checkbox = $(this).find('input[type="checkbox"]');
            checkbox.prop('checked', !checkbox.prop('checked'));
            updateSelection();
        }
    });
});
</script>
{% endblock %}