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

{% block title %}Manage Areas – {{ town.town_name }}{% endblock %}
{% block stylesheets %}
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
<style>
    .row-this-town  { background-color: #d4edda !important; }
    .row-other-town { background-color: #f2f2f2 !important; color: #999; }
</style>
{% endblock %}

{% block heading %}Manage Areas — <span class="text-primary">{{ town.town_name }}</span>{% endblock %}

{% block content %}
<div class="row ml-0 mb-3">
    <a href="{% url 'products:towns_list' %}">
        <button class="btn btn-info font-weight-bold">
            <i class="fas fa-long-arrow-alt-left mr-2"></i> Back to Towns
        </button>
    </a>
</div>

<!-- ── Summary badges ──────────────────────────────────────────────────── -->
<div class="mb-3">
    <span class="badge badge-success p-2" style="font-size:.9rem">
        <i class="fas fa-check-circle mr-1"></i>
        Assigned: <strong id="assignedCount">0</strong>
    </span>
    <span class="badge badge-light border p-2 ml-1" style="font-size:.9rem">
        <i class="fas fa-circle mr-1"></i>
        Available: <strong id="availableCount">0</strong>
    </span>
    <span class="badge badge-secondary p-2 ml-1" style="font-size:.9rem">
        <i class="fas fa-lock mr-1"></i>
        In other towns: <strong id="otherCount">0</strong>
    </span>
</div>

<!-- ── Bulk actions ────────────────────────────────────────────────────── -->
<div class="mb-3">
    <button type="button" id="selectAll" class="btn btn-sm btn-outline-primary">
        <i class="fas fa-check-double mr-1"></i> Select All Available
    </button>
    <button type="button" id="deselectAll" class="btn btn-sm btn-outline-secondary ml-1">
        <i class="fas fa-times mr-1"></i> Deselect All
    </button>
</div>

<form id="manage-areas-form"
      action="{% url 'products:towns_manage_areas' town.id %}"
      method="post">
    {% csrf_token %}

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">All Areas</h6>
            <button type="submit" class="btn btn-success font-weight-bold">
                <i class="fas fa-save mr-1"></i> Save Changes
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="areasTable"
                       width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:5%">
                                <input type="checkbox" id="headerCheck" title="Toggle all available">
                            </th>
                            <th>Area Name</th>
                            <th>Description</th>
                            <th class="text-center" style="width:18%">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for area in all_areas %}
                        <tr class="{% if area.town_id == town.id %}row-this-town{% elif area.town_id %}row-other-town{% endif %}">
                            <td class="text-center">
                                {% if area.town_id == town.id %}
                                    <input type="checkbox" name="areas"
                                           value="{{ area.id }}" checked
                                           class="area-cb">
                                {% elif area.town_id %}
                                    <input type="checkbox" disabled
                                           title="Belongs to {{ area.town.town_name }}">
                                {% else %}
                                    <input type="checkbox" name="areas"
                                           value="{{ area.id }}"
                                           class="area-cb">
                                {% endif %}
                            </td>
                            <td>{{ area.area_name }}</td>
                            <td>{{ area.description }}</td>
                            <td class="text-center">
                                {% if area.town_id == town.id %}
                                    <span class="badge badge-success">This town</span>
                                {% elif area.town_id %}
                                    <span class="badge badge-secondary">{{ area.town.town_name }}</span>
                                {% else %}
                                    <span class="badge badge-light border">Unassigned</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center text-muted">
                                No areas found. Create areas first.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer text-right">
            <button type="submit" class="btn btn-success font-weight-bold">
                <i class="fas fa-save mr-1"></i> Save Changes
            </button>
        </div>
    </div>
</form>
{% endblock %}

{% block javascripts %}
<script>
$(function () {

    /* ── DataTable (no paging so all checkboxes live in the DOM) ──────── */
    $('#areasTable').DataTable({
        paging: false,
        info: false,
        order: [[1, 'asc']],
        columnDefs: [
            { targets: 0, orderable: false, searchable: false }
        ]
    });

    /* ── Count helper ────────────────────────────────────────────────── */
    function updateCounts() {
        var assigned  = $('input.area-cb:checked').length;
        var available = $('input.area-cb:not(:checked)').length;
        var other     = $('input[type="checkbox"]:disabled').length;
        $('#assignedCount').text(assigned);
        $('#availableCount').text(available);
        $('#otherCount').text(other);
    }
    updateCounts();                 // run on page load

    /* ── Checkbox change → recount ───────────────────────────────────── */
    $(document).on('change', 'input.area-cb', updateCounts);

    /* ── Select all / deselect all ───────────────────────────────────── */
    $('#selectAll, #headerCheck').on('click', function () {
        $('input.area-cb').prop('checked', true);
        updateCounts();
    });
    $('#deselectAll').on('click', function () {
        $('input.area-cb').prop('checked', false);
        updateCounts();
    });

    /* ── Header checkbox toggle ──────────────────────────────────────── */
    $('#headerCheck').on('change', function () {
        var state = $(this).prop('checked');
        $('input.area-cb').prop('checked', state);
        updateCounts();
    });

    /* ── Ctrl+S to save ──────────────────────────────────────────────── */
    $(document).on('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            $('#manage-areas-form').submit();
        }
    });
});
</script>
{% endblock %}