{% extends "layouts/base.html" %}

{% load static %}
{% load i18n %}

{% block title %}{% trans "Channel Zones" %}{% endblock %}

{% block extra_css %}
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .zone-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .zone-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .zone-card.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .zone-checkbox {
        position: absolute;
        top: 10px;
        right: 10px;
        transform: scale(1.2);
    }
    
    .zone-type-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .action-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    .loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }
    
    .bulk-actions {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: none;
    }
    
    .bulk-actions.show {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .zone-metrics {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .zone-timezone {
        background: rgba(0, 123, 255, 0.1);
        color: #007bff;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.8rem;
        margin-top: 0.5rem;
        display: inline-block;
    }
    
    .export-dropdown {
        position: relative;
        display: inline-block;
    }
    
    .advanced-filters {
        background: #f8f9fc;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
        .action-buttons {
            text-align: center;
        }
        
        .stats-card {
            margin-bottom: 15px;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Channel Zones</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">Channels</a></li>
            <li class="breadcrumb-item active" aria-current="page">Zones</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <!-- Enhanced Statistics Cards -->
    <div class="col-lg-3 col-md-6">
        <div class="card bg-primary text-white stats-card" data-filter="all" title="{% trans 'Click to show all zones' %}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-map-pin fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="total-zones">{{ total_zones }}</h2>
                        <p class="mb-0">{% trans "Total Zones" %}</p>
                        <small class="opacity-75">{% trans "All zones in system" %}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-success text-white stats-card" data-filter="active" title="{% trans 'Click to show active zones' %}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-check-circle fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="active-zones">{{ active_zones }}</h2>
                        <p class="mb-0">{% trans "Active" %}</p>
                        <small class="opacity-75">{% trans "Currently active zones" %}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-info text-white stats-card" data-filter="inactive" title="{% trans 'Click to show inactive zones' %}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-x-circle fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="inactive-zones">{{ inactive_zones }}</h2>
                        <p class="mb-0">{% trans "Inactive" %}</p>
                        <small class="opacity-75">{% trans "Disabled zones" %}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-warning text-white stats-card" data-filter="with_channels" title="{% trans 'Click to show zones with channels' %}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-tv fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="zones-with-channels">{{ zones_with_channels }}</h2>
                        <p class="mb-0">{% trans "With Channels" %}</p>
                        <small class="opacity-75">{% trans "Zones having channels" %}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Actions Panel -->
<div class="row">
    <div class="col-12">
        <div class="bulk-actions" id="bulk-actions">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div class="d-flex align-items-center">
                    <i class="fe fe-check-square text-warning me-2"></i>
                    <span class="fw-semibold">{% trans "Bulk Actions" %}</span>
                    <span class="badge bg-warning text-dark ms-2" id="selected-count">0</span>
                    <span class="text-muted ms-1">{% trans "selected" %}</span>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <button type="button" class="btn btn-sm btn-success" id="bulk-activate">
                        <i class="fe fe-check me-1"></i>{% trans "Activate" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-warning" id="bulk-deactivate">
                        <i class="fe fe-x me-1"></i>{% trans "Deactivate" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" id="bulk-delete">
                        <i class="fe fe-trash-2 me-1"></i>{% trans "Delete" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" id="clear-selection">
                        <i class="fe fe-x-circle me-1"></i>{% trans "Clear" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Enhanced Filters Card -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fe fe-filter me-2"></i>{% trans "Filters & Search" %}
                    </h5>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="toggle-advanced">
                            <i class="fe fe-settings me-1"></i>{% trans "Advanced" %}
                        </button>
                        <div class="export-dropdown">
                            <button type="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="fe fe-download me-1"></i>{% trans "Export" %}
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" id="export-csv">
                                    <i class="fe fe-file-text me-2"></i>{% trans "CSV" %}
                                </a></li>
                                <li><a class="dropdown-item" href="#" id="export-excel">
                                    <i class="fe fe-file me-2"></i>{% trans "Excel" %}
                                </a></li>
                                <li><a class="dropdown-item" href="#" id="export-pdf">
                                    <i class="fe fe-file-minus me-2"></i>{% trans "PDF" %}
                                </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <!-- Basic Filters -->
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>{% trans "Search" %}
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" 
                               placeholder="{% trans 'Search zones by name, code, description...' %}">
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-4">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-toggle-right me-1"></i>{% trans "Status" %}
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="" {% if not selected_status %}selected{% endif %}>{% trans "All Status" %}</option>
                            <option value="active" {% if selected_status == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                            <option value="inactive" {% if selected_status == 'inactive' %}selected{% endif %}>{% trans "Inactive" %}</option>
                        </select>
                    </div>
                    
                    <!-- Timezone Filter -->
                    <div class="col-md-4">
                        <label for="timezone" class="form-label fw-semibold">
                            <i class="fe fe-clock me-1"></i>{% trans "Timezone" %}
                        </label>
                        <select class="form-select" id="timezone" name="timezone">
                            <option value="" {% if not selected_timezone %}selected{% endif %}>{% trans "All Timezones" %}</option>
                            {% for tz in timezones %}
                                <option value="{{ tz }}" {% if selected_timezone == tz %}selected{% endif %}>{{ tz }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Advanced Filters (Hidden by default) -->
                    <div class="col-12 advanced-filters" id="advanced-filters" style="display: none;">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="has_channels" class="form-label fw-semibold">
                                    <i class="fe fe-tv me-1"></i>{% trans "Has Channels" %}
                                </label>
                                <select class="form-select" id="has_channels" name="has_channels">
                                    <option value="" {% if not selected_has_channels %}selected{% endif %}>{% trans "All" %}</option>
                                    <option value="yes" {% if selected_has_channels == 'yes' %}selected{% endif %}>{% trans "Yes" %}</option>
                                    <option value="no" {% if selected_has_channels == 'no' %}selected{% endif %}>{% trans "No" %}</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="created_from" class="form-label fw-semibold">
                                    <i class="fe fe-calendar me-1"></i>{% trans "Created From" %}
                                </label>
                                <input type="date" class="form-control" id="created_from" name="created_from" value="{{ created_from }}">
                            </div>
                            <div class="col-md-3">
                                <label for="created_to" class="form-label fw-semibold">
                                    <i class="fe fe-calendar me-1"></i>{% trans "Created To" %}
                                </label>
                                <input type="date" class="form-control" id="created_to" name="created_to" value="{{ created_to }}">
                            </div>
                            <div class="col-md-3">
                                <label for="sort_by" class="form-label fw-semibold">
                                    <i class="fe fe-sort-asc me-1"></i>{% trans "Sort By" %}
                                </label>
                                <select class="form-select" id="sort_by" name="sort_by">
                                    <option value="name" {% if sort_by == 'name' %}selected{% endif %}>{% trans "Name" %}</option>
                                    <option value="code" {% if sort_by == 'code' %}selected{% endif %}>{% trans "Code" %}</option>
                                    <option value="created_at" {% if sort_by == 'created_at' %}selected{% endif %}>{% trans "Created Date" %}</option>
                                    <option value="updated_at" {% if sort_by == 'updated_at' %}selected{% endif %}>{% trans "Updated Date" %}</option>
                                    <option value="channels_count" {% if sort_by == 'channels_count' %}selected{% endif %}>{% trans "Channels Count" %}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="col-12">
                        <div class="d-flex flex-wrap gap-2 pt-3 border-top">
                            <button type="submit" class="btn btn-primary">
                                <i class="fe fe-filter me-1"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="clear-filters">
                                <i class="fe fe-refresh-cw me-1"></i> Clear Filters
                            </button>
                            <a href="{% url 'channels:zone_create' %}" class="btn btn-success ms-auto">
                                <i class="fe fe-plus me-1"></i> New Zone
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <!-- Results Card -->
        <div class="card">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fe fe-map-pin me-2"></i>Zones 
                    <span class="badge bg-primary ms-2" id="results-count">
                        {{ zones|length }} result{{ zones|length|pluralize }}
                    </span>
                </h5>
                <div class="view-toggle">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-secondary active" id="card-view" title="Card View">
                            <i class="fe fe-grid"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="table-view" title="Table View">
                            <i class="fe fe-list"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card-body position-relative">
                <div class="loading-overlay" id="loading-overlay">
                    <div class="d-flex justify-content-center align-items-center h-100">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                
                <!-- Card View -->
                <div id="card-view-container">
                    {% if zones %}
                        <div class="row g-3" id="zones-container">
                            {% for zone in zones %}
                                <div class="col-lg-6 col-xl-4">
                                    <div class="card zone-card h-100 shadow-sm border-0" data-zone-id="{{ zone.id }}">
                                        <!-- Bulk Selection Checkbox -->
                                        <input type="checkbox" class="form-check-input zone-checkbox" value="{{ zone.id }}" id="zone-{{ zone.id }}">
                                        
                                        <div class="card-body d-flex flex-column">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <div class="flex-grow-1">
                                                    <h6 class="card-title mb-1 fw-semibold text-primary">
                                                        <i class="fe fe-map-pin me-1"></i>{{ zone.name }}
                                                    </h6>
                                                    {% if zone.code %}
                                                    <small class="text-muted">{% trans "Code" %}: {{ zone.code }}</small>
                                                    {% endif %}
                                                </div>
                                                <div class="d-flex flex-column align-items-end">
                                                    {% if zone.is_active %}
                                                    <span class="badge bg-success mb-1">{% trans "Active" %}</span>
                                                    {% else %}
                                                    <span class="badge bg-secondary mb-1">{% trans "Inactive" %}</span>
                                                    {% endif %}
                                                    {% if zone.timezone %}
                                                    <span class="zone-timezone">{{ zone.timezone }}</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            
                                            <div class="zone-info flex-grow-1">
                                                {% if zone.description %}
                                                <div class="mb-2">
                                                    <i class="fe fe-info text-muted me-2"></i>
                                                    <span class="text-muted">{{ zone.description|truncatechars:80 }}</span>
                                                </div>
                                                {% endif %}
                                                
                                                <!-- Zone Metrics -->
                                                <div class="zone-metrics mb-3">
                                                    <div class="row text-center g-0">
                                                        <div class="col-4">
                                                            <div class="stat-item">
                                                                <i class="fe fe-tv text-primary"></i>
                                                                <div class="fw-bold text-primary">{{ zone.channels_count|default:0 }}</div>
                                                                <small class="text-muted">{% trans "Channels" %}</small>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="stat-item">
                                                                <i class="fe fe-settings text-info"></i>
                                                                <div class="fw-bold text-info">{{ zone.relations_count|default:0 }}</div>
                                                                <small class="text-muted">{% trans "Relations" %}</small>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="stat-item">
                                                                <i class="fe fe-calendar text-success"></i>
                                                                <div class="fw-bold text-success">{{ zone.created_at|date:"M d" }}</div>
                                                                <small class="text-muted">{% trans "Created" %}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="action-buttons d-flex flex-wrap gap-1">
                                                <a href="{% url 'channels:zone_detail' zone.id %}" 
                                                   class="btn btn-sm btn-primary flex-fill" title="{% trans 'View Details' %}">
                                                    <i class="fe fe-eye me-1"></i> {% trans "View" %}
                                                </a>
                                                <a href="{% url 'channels:zone_update' zone.id %}" 
                                                   class="btn btn-sm btn-warning flex-fill" title="{% trans 'Edit Zone' %}">
                                                    <i class="fe fe-edit me-1"></i> {% trans "Edit" %}
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteZone('{{ zone.id }}')" title="{% trans 'Delete Zone' %}">
                                                    <i class="fe fe-trash-2"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="fe fe-map-pin fe-5x text-muted mb-4"></i>
                                <h5 class="text-muted mb-3">No zones found</h5>
                                <p class="text-muted mb-4">Try adjusting your filters or create a new zone to get started.</p>
                                <a href="{% url 'channels:zone_create' %}" class="btn btn-primary">
                                    <i class="fe fe-plus me-2"></i> Create New Zone
                                </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
                
                <!-- Table View (Hidden by default) -->
                <div id="table-view-container" style="display: none;">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th width="40">
                                        <input type="checkbox" class="form-check-input" id="select-all-table">
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-map-pin me-1"></i>{% trans "Zone" %}
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-toggle-right me-1"></i>{% trans "Status" %}
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-clock me-1"></i>{% trans "Timezone" %}
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-tv me-1"></i>{% trans "Channels" %}
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-settings me-1"></i>{% trans "Relations" %}
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-calendar me-1"></i>{% trans "Created" %}
                                    </th>
                                    <th class="fw-semibold text-center">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody id="table-body">
                                {% for zone in zones %}
                                    <tr data-zone-id="{{ zone.id }}">
                                        <td>
                                            <input type="checkbox" class="form-check-input zone-checkbox" value="{{ zone.id }}">
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="fe fe-map-pin text-primary me-2"></i>
                                                <div>
                                                    <div class="fw-semibold">{{ zone.name }}</div>
                                                    {% if zone.code %}
                                                    <small class="text-muted">{% trans "Code" %}: {{ zone.code }}</small>
                                                    {% endif %}
                                                    {% if zone.description %}
                                                    <small class="text-muted d-block">{{ zone.description|truncatechars:50 }}</small>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {% if zone.is_active %}
                                            <span class="badge bg-success">{% trans "Active" %}</span>
                                            {% else %}
                                            <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if zone.timezone %}
                                            <span class="zone-timezone">{{ zone.timezone }}</span>
                                            {% else %}
                                            <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-primary">{{ zone.channels_count|default:0 }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ zone.relations_count|default:0 }}</span>
                                        </td>
                                        <td>{{ zone.created_at|date:"M d, Y" }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{% url 'channels:zone_detail' zone.id %}" 
                                                   class="btn btn-sm btn-primary" title="{% trans 'View Details' %}">
                                                    <i class="fe fe-eye"></i>
                                                </a>
                                                <a href="{% url 'channels:zone_update' zone.id %}" 
                                                   class="btn btn-sm btn-warning" title="{% trans 'Edit Zone' %}">
                                                    <i class="fe fe-edit"></i>
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteZone('{{ zone.id }}')" title="{% trans 'Delete Zone' %}">
                                                    <i class="fe fe-trash-2"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pagination -->
{% if zones.has_other_pages %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="pagination-info text-muted mb-2 mb-md-0">
                        <i class="fe fe-info me-1"></i>
                        Showing {{ zones.start_index }} to {{ zones.end_index }} of {{ zones.paginator.count }} zones
                    </div>
                    
                    <nav aria-label="Zone pagination">
                        <ul class="pagination pagination-sm mb-0">
                            {% if zones.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1" title="First Page">
                                        <i class="fe fe-chevrons-left"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ zones.previous_page_number }}" title="Previous Page">
                                        <i class="fe fe-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for page_num in zones.paginator.page_range %}
                                {% if page_num == zones.number %}
                                    <li class="page-item active">
                                        <span class="page-link fw-bold">{{ page_num }}</span>
                                    </li>
                                {% elif page_num >= zones.number|add:'-2' and page_num <= zones.number|add:'2' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_num }}">{{ page_num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if zones.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ zones.next_page_number }}" title="Next Page">
                                        <i class="fe fe-chevron-right"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ zones.paginator.num_pages }}" title="Last Page">
                                        <i class="fe fe-chevrons-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock content %}

{% block modals %}
<!-- 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">Confirm Delete</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 this zone?</p>
                <p class="text-warning"><strong>This action cannot be undone.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete Zone</button>
            </div>
        </div>
    </div>
</div>
{% endblock modals %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for better dropdowns
    $('#timezone, #has_channels, #sort_by').select2({
        width: '100%',
        allowClear: true
    });
    
    // Clear filters
    $('#clear-filters').click(function() {
        window.location.href = window.location.pathname;
    });
    
    // View toggle
    $('#card-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').show();
        $('#table-view-container').hide();
        localStorage.setItem('zoneViewMode', 'card');
    });
    
    $('#table-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').hide();
        $('#table-view-container').show();
        localStorage.setItem('zoneViewMode', 'table');
    });
    
    // Restore view mode
    const savedViewMode = localStorage.getItem('zoneViewMode');
    if (savedViewMode === 'table') {
        $('#table-view').click();
    }
    
    // Statistics card filtering
    $('.stats-card[data-filter]').click(function() {
        const filter = $(this).data('filter');
        const form = $('#filter-form');
        
        // Reset form
        form.find('select, input').val('');
        
        // Apply filter
        switch(filter) {
            case 'active':
                form.find('select[name="status"]').val('active');
                break;
            case 'inactive':
                form.find('select[name="status"]').val('inactive');
                break;
            case 'with_channels':
                form.find('select[name="has_channels"]').val('yes');
                break;
        }
        
        form.submit();
    });
    
    // Bulk selection functionality
    $('#select-all-table').change(function() {
        const isChecked = $(this).is(':checked');
        $('.zone-checkbox').prop('checked', isChecked);
        updateBulkActions();
    });
    
    $(document).on('change', '.zone-checkbox', function() {
        updateBulkActions();
        
        // Update select all checkboxes
        const totalCheckboxes = $('.zone-checkbox').length;
        const checkedCheckboxes = $('.zone-checkbox:checked').length;
        
        $('#select-all-table').prop('checked', totalCheckboxes === checkedCheckboxes);
    });
    
    // Zone card selection
    $(document).on('click', '.zone-card', function(e) {
        if (!$(e.target).is('input, button, a')) {
            const checkbox = $(this).find('.zone-checkbox');
            checkbox.prop('checked', !checkbox.is(':checked')).trigger('change');
        }
    });
    
    // Bulk actions
    $('#bulk-activate').click(function() {
        performBulkAction('activate');
    });
    
    $('#bulk-deactivate').click(function() {
        performBulkAction('deactivate');
    });
    
    $('#bulk-delete').click(function() {
        if (confirm('Are you sure you want to delete the selected zones?')) {
            performBulkAction('delete');
        }
    });
    
    $('#clear-selection').click(function() {
        $('.zone-checkbox').prop('checked', false);
        $('#select-all-table').prop('checked', false);
        updateBulkActions();
    });
    
    // Export functionality
    $('#export-csv, #export-excel, #export-pdf').click(function(e) {
        e.preventDefault();
        const format = $(this).attr('id').replace('export-', '');
        const form = $('#filter-form');
        const formData = form.serialize();
        
        window.location.href = window.location.pathname + '?export=' + format + '&' + formData;
    });
    
    // Advanced filters toggle
    $('#toggle-advanced').click(function() {
        $('#advanced-filters').slideToggle();
        const icon = $(this).find('i');
        icon.toggleClass('fe-settings fe-chevron-up');
    });
    
    // Auto-submit form on filter change
    $('#status, #timezone, #has_channels, #sort_by').change(function() {
        $('#filter-form').submit();
    });
    
    // Debounced search
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filter-form').submit();
        }, 500);
    });
});

// Update bulk actions visibility
function updateBulkActions() {
    const selectedCount = $('.zone-checkbox:checked').length;
    const bulkActions = $('#bulk-actions');
    
    if (selectedCount > 0) {
        bulkActions.addClass('show');
        $('#selected-count').text(selectedCount);
    } else {
        bulkActions.removeClass('show');
    }
}

// Perform bulk action
function performBulkAction(action) {
    const selectedIds = $('.zone-checkbox:checked').map(function() {
        return $(this).val();
    }).get();
    
    if (selectedIds.length === 0) {
        alert('Please select at least one zone.');
        return;
    }
    
    $('#loading-overlay').show();
    
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: {
            'action': action,
            'zone_ids': selectedIds,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert('Error: ' + response.message);
            }
        },
        error: function() {
            alert('An error occurred. Please try again.');
        },
        complete: function() {
            $('#loading-overlay').hide();
        }
    });
}

// Delete zone function
function deleteZone(zoneId) {
    $('#deleteModal').modal('show');
    
    $('#confirmDelete').off('click').on('click', function() {
        $.ajax({
            url: '/channels/zones/' + zoneId + '/delete/',
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            success: function(response) {
                location.reload();
            },
            error: function() {
                $('#deleteModal').modal('hide');
                alert('Delete failed. Please try again.');
            }
        });
    });
}
</script>
{% endblock extra_js %}