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

{% block title %}Distribution Zones - {{ block.super }}{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item active" aria-current="page">Distribution Zones</li>
{% endblock %}

{% block channels_content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">
            <i class="fas fa-globe me-2"></i>Distribution Zones
            <span class="badge bg-primary ms-2">{{ zones.count }}</span>
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {% if perms.channels.add_zone %}
            <a href="{% url 'channels:zone_create' %}" class="btn btn-primary me-2">
                <i class="fas fa-plus me-1"></i>Add Zone
            </a>
            {% endif %}
            <div class="btn-group me-2">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-filter me-1"></i>Filter
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="?status=active">Active Zones</a></li>
                    <li><a class="dropdown-item" href="?status=inactive">Inactive Zones</a></li>
                    <li><a class="dropdown-item" href="?">All Zones</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#searchModal">
                        <i class="fas fa-search me-2"></i>Advanced Search
                    </a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" onclick="exportZones('csv')">
                        <i class="fas fa-file-csv me-2"></i>Export as CSV
                    </a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportZones('json')">
                        <i class="fas fa-file-code me-2"></i>Export as JSON
                    </a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Search and Filter Form -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="get" class="row g-3" id="filterForm">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" name="search" 
                               placeholder="Search zones..." value="{{ request.GET.search }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-select" onchange="this.form.submit()">
                        <option value="">All Status</option>
                        <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                        <option value="inactive" {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="has_channels" class="form-select" onchange="this.form.submit()">
                        <option value="">All Zones</option>
                        <option value="yes" {% if request.GET.has_channels == 'yes' %}selected{% endif %}>With Channels</option>
                        <option value="no" {% if request.GET.has_channels == 'no' %}selected{% endif %}>Without Channels</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="fas fa-search me-1"></i>Search
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Zones Grid -->
    {% if zones %}
        <div class="row">
            {% for zone in zones %}
                <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
                    <div class="card border-left-{% if zone.is_active %}success{% else %}secondary{% endif %} shadow h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="flex-grow-1">
                                    <h5 class="card-title mb-1">
                                        <a href="{% url 'channels:zone_detail' zone.pk %}" class="text-decoration-none">
                                            {{ zone.name }}
                                        </a>
                                    </h5>
                                    <p class="card-text text-muted small mb-2">
                                        <i class="fas fa-code me-1"></i>{{ zone.code }}
                                    </p>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary" type="button" 
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="{% url 'channels:zone_detail' zone.pk %}">
                                            <i class="fas fa-eye me-2"></i>View Details
                                        </a></li>
                                        {% if perms.channels.change_zone %}
                                        <li><a class="dropdown-item" href="{% url 'channels:zone_edit' zone.pk %}">
                                            <i class="fas fa-edit me-2"></i>Edit Zone
                                        </a></li>
                                        {% endif %}
                                        <li><a class="dropdown-item" href="#" onclick="viewChannels({{ zone.id }})">
                                            <i class="fas fa-tv me-2"></i>View Channels
                                        </a></li>
                                        {% if perms.channels.delete_zone %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-danger" href="#" 
                                               onclick="confirmDelete('{{ zone.name }}', '{% url 'channels:zone_delete' zone.pk %}')">
                                            <i class="fas fa-trash me-2"></i>Delete Zone
                                        </a></li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>

                            <!-- Zone Status -->
                            <div class="mb-3">
                                <span class="badge bg-{% if zone.is_active %}success{% else %}secondary{% endif %} me-2">
                                    {% if zone.is_active %}Active{% else %}Inactive{% endif %}
                                </span>
                                {% if zone.channels.count > 0 %}
                                    <span class="badge bg-info">
                                        {{ zone.channels.count }} Channel{{ zone.channels.count|pluralize }}
                                    </span>
                                {% endif %}
                            </div>

                            <!-- Zone Description -->
                            {% if zone.description %}
                                <p class="card-text text-muted small mb-3">
                                    {{ zone.description|truncatewords:15 }}
                                </p>
                            {% endif %}

                            <!-- Zone Statistics -->
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="h6 font-weight-bold text-primary">{{ zone.channels.count }}</div>
                                        <div class="small text-muted">Channels</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="h6 font-weight-bold text-success">{{ zone.active_channels_count }}</div>
                                        <div class="small text-muted">Active</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="h6 font-weight-bold text-info">{{ zone.total_configurations }}</div>
                                    <div class="small text-muted">Configs</div>
                                </div>
                            </div>

                            <!-- Zone Metadata -->
                            <div class="mt-3 pt-3 border-top">
                                <div class="row small text-muted">
                                    <div class="col-6">
                                        <i class="fas fa-calendar me-1"></i>
                                        Created: {{ zone.created_at|date:"M d, Y" }}
                                    </div>
                                    <div class="col-6 text-end">
                                        <i class="fas fa-clock me-1"></i>
                                        Updated: {{ zone.updated_at|date:"M d" }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
            <nav aria-label="Zones pagination">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}page=1">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}page={{ page_obj.previous_page_number }}">
                                <i class="fas fa-angle-left"></i>
                            </a>
                        </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}page={{ num }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}page={{ page_obj.next_page_number }}">
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}page={{ page_obj.paginator.num_pages }}">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <!-- No Zones Found -->
        <div class="text-center py-5">
            <div class="mb-4">
                <i class="fas fa-globe fa-5x text-muted"></i>
            </div>
            <h3 class="text-muted">No Distribution Zones Found</h3>
            <p class="text-muted mb-4">
                {% if request.GET.search or request.GET.status %}
                    No zones match your current search criteria. Try adjusting your filters.
                {% else %}
                    You haven't created any distribution zones yet. Create your first zone to start organizing channel distribution.
                {% endif %}
            </p>
            {% if perms.channels.add_zone %}
                <a href="{% url 'channels:zone_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>Create First Zone
                </a>
            {% endif %}
            {% if request.GET.search or request.GET.status %}
                <a href="{% url 'channels:zone_list' %}" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-times me-1"></i>Clear Filters
                </a>
            {% endif %}
        </div>
    {% endif %}

    <!-- Advanced Search Modal -->
    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">
                        <i class="fas fa-search me-2"></i>Advanced Search
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="get">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="advancedSearch" class="form-label">Search Term</label>
                            <input type="text" class="form-control" id="advancedSearch" name="search" 
                                   placeholder="Search in zone name, code, or description..." 
                                   value="{{ request.GET.search }}">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="statusFilter" class="form-label">Status</label>
                                    <select class="form-select" id="statusFilter" name="status">
                                        <option value="">All Status</option>
                                        <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                                        <option value="inactive" {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="channelsFilter" class="form-label">Channel Association</label>
                                    <select class="form-select" id="channelsFilter" name="has_channels">
                                        <option value="">All Zones</option>
                                        <option value="yes" {% if request.GET.has_channels == 'yes' %}selected{% endif %}>With Channels</option>
                                        <option value="no" {% if request.GET.has_channels == 'no' %}selected{% endif %}>Without Channels</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="sortBy" class="form-label">Sort By</label>
                            <select class="form-select" id="sortBy" name="sort">
                                <option value="name" {% if request.GET.sort == 'name' %}selected{% endif %}>Name (A-Z)</option>
                                <option value="-name" {% if request.GET.sort == '-name' %}selected{% endif %}>Name (Z-A)</option>
                                <option value="created_at" {% if request.GET.sort == 'created_at' %}selected{% endif %}>Oldest First</option>
                                <option value="-created_at" {% if request.GET.sort == '-created_at' %}selected{% endif %}>Newest First</option>
                                <option value="channels_count" {% if request.GET.sort == 'channels_count' %}selected{% endif %}>Fewest Channels</option>
                                <option value="-channels_count" {% if request.GET.sort == '-channels_count' %}selected{% endif %}>Most Channels</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <a href="{% url 'channels:zone_list' %}" class="btn btn-outline-warning">Clear All</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-1"></i>Search
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Deletion
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the zone <strong id="deleteZoneName"></strong>?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        This action cannot be undone. All channel configurations associated with this zone will also be deleted.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <a href="#" id="deleteConfirmBtn" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Delete Zone
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_footer_js %}
    <script>
        function confirmDelete(zoneName, deleteUrl) {
            document.getElementById('deleteZoneName').textContent = zoneName;
            document.getElementById('deleteConfirmBtn').href = deleteUrl;
            var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        function viewChannels(zoneId) {
            window.location.href = '{% url "channels:channel_list" %}?zone=' + zoneId;
        }

        function exportZones(format) {
            const params = new URLSearchParams(window.location.search);
            params.set('export', format);
            window.location.href = '{% url "channels:zone_list" %}?' + params.toString();
        }

        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        // Auto-submit filter form on change
        document.querySelectorAll('#filterForm select').forEach(function(select) {
            select.addEventListener('change', function() {
                this.form.submit();
            });
        });

        // Search input auto-submit with delay
        let searchTimeout;
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    document.getElementById('filterForm').submit();
                }, 1000);
            });
        }
    </script>
{% endblock %}