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

{% comment %}
Base template for Channels app

This template serves as the foundation for all channel-related pages in the Adtlas DAI Management System.
It extends the core base template and provides:
- Channel-specific navigation
- CSS and JavaScript dependencies
- Common UI components
- Responsive layout structure

Features:
- Bootstrap 5 integration
- DataTables for data management
- Select2 for enhanced dropdowns
- Chart.js for analytics
- Font Awesome icons
- Custom channel styling
- AJAX support
- Form validation
- File upload handling

Usage:
{% extends "channels/base.html" %}
{% block content %}
    <!-- Channel-specific content -->
{% endblock %}
{% endcomment %}

{% block title %}Channels - {{ block.super }}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    
    <!-- Chart.js CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css">
    
    <!-- Custom Channels CSS -->
    <link rel="stylesheet" href="{% static 'channels/css/channels.css' %}">
    
    <style>
        /* Channel-specific styles */
        .channel-card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            transition: all 0.3s ease;
        }
        
        .channel-card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        
        .channel-logo {
            max-width: 60px;
            max-height: 40px;
            object-fit: contain;
        }
        
        .provider-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        
        .quality-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 0.25rem;
        }
        
        .quality-sd { background-color: #6c757d; }
        .quality-hd { background-color: #0d6efd; }
        .quality-fhd { background-color: #198754; }
        .quality-4k { background-color: #dc3545; }
        .quality-8k { background-color: #6f42c1; }
        
        .jingle-player {
            max-width: 300px;
        }
        
        .codec-info {
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            background-color: #f8f9fa;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
        }
        
        .time-slot {
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
            border-left: 4px solid #0d6efd;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 0.25rem;
        }
        
        .prime-time {
            border-left-color: #dc3545;
            background: linear-gradient(45deg, #fff5f5, #fed7d7);
        }
        
        .weekend-slot {
            border-left-color: #198754;
            background: linear-gradient(45deg, #f0fff4, #c6f6d5);
        }
        
        .upload-zone {
            border: 2px dashed #dee2e6;
            border-radius: 0.375rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .upload-zone:hover {
            border-color: #0d6efd;
            background-color: #f8f9fa;
        }
        
        .upload-zone.dragover {
            border-color: #198754;
            background-color: #d1e7dd;
        }
        
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
        }
        
        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .filter-panel {
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .action-buttons .btn {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        @media (max-width: 768px) {
            .channel-card {
                margin-bottom: 1rem;
            }
            
            .action-buttons .btn {
                width: 100%;
                margin-right: 0;
            }
        }
    </style>
{% endblock %}

{% block navigation %}
    {{ block.super }}
    <!-- Channel-specific navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <div class="container-fluid">
            <div class="navbar-nav">
                <a class="nav-link {% if request.resolver_match.url_name == 'channel_list' %}active{% endif %}" 
                   href="{% url 'channels:channel_list' %}">
                    <i class="fas fa-tv"></i> Channels
                </a>
                <a class="nav-link {% if request.resolver_match.url_name == 'jingle_list' %}active{% endif %}" 
                   href="{% url 'channels:jingle_list' %}">
                    <i class="fas fa-music"></i> Jingles
                </a>
                <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#channelStatsModal">
                    <i class="fas fa-chart-bar"></i> Statistics
                </a>
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-cog"></i> Settings
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-video"></i> Codec Settings</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-globe"></i> Zone Settings</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-clock"></i> Time Slots</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-upload"></i> Bulk Import</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-download"></i> Export Data</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Search and filters -->
            <div class="d-flex">
                <div class="input-group me-2" style="width: 300px;">
                    <input type="text" class="form-control" id="globalSearch" placeholder="Search channels...">
                    <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary" id="filterToggle">
                        <i class="fas fa-filter"></i>
                    </button>
                    <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addChannelModal">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <!-- Filter Panel (initially hidden) -->
    <div class="filter-panel" id="filterPanel" style="display: none;">
        <div class="row">
            <div class="col-md-3">
                <label for="providerFilter" class="form-label">Provider</label>
                <select class="form-select" id="providerFilter">
                    <option value="">All Providers</option>
                    <option value="sfr">SFR</option>
                    <option value="bouygues">Bouygues Telecom</option>
                    <option value="orange">Orange</option>
                    <option value="free">Free</option>
                    <option value="canal">Canal+</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="qualityFilter" class="form-label">Quality</label>
                <select class="form-select" id="qualityFilter">
                    <option value="">All Qualities</option>
                    <option value="hd">HD Support</option>
                    <option value="4k">4K Support</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="statusFilter" class="form-label">Status</label>
                <select class="form-select" id="statusFilter">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="regionFilter" class="form-label">Region</label>
                <select class="form-select" id="regionFilter">
                    <option value="">All Regions</option>
                    <!-- Populated dynamically -->
                </select>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <button type="button" class="btn btn-primary" id="applyFilters">
                    <i class="fas fa-check"></i> Apply Filters
                </button>
                <button type="button" class="btn btn-secondary" id="clearFilters">
                    <i class="fas fa-times"></i> Clear Filters
                </button>
            </div>
        </div>
    </div>
    
    <!-- Main content area -->
    <div class="container-fluid mt-3">
        {% block channel_content %}
            <!-- Channel-specific content goes here -->
        {% endblock %}
    </div>
    
    <!-- Loading overlay -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <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>
{% endblock %}

{% block modals %}
    {{ block.super }}
    
    <!-- Channel Statistics Modal -->
    <div class="modal fade" id="channelStatsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-chart-bar"></i> Channel Statistics</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <canvas id="providerChart"></canvas>
                        </div>
                        <div class="col-md-6">
                            <canvas id="qualityChart"></canvas>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <canvas id="channelTrendsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Add Channel Modal -->
    <div class="modal fade" id="addChannelModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-plus"></i> Add New Channel</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Quick add form will be loaded here -->
                    <div id="quickAddForm"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
    
    <!-- Custom Channels JS -->
    <script src="{% static 'channels/js/channels.js' %}"></script>
    
    <script>
        // Global channel management functions
        $(document).ready(function() {
            // Initialize components
            initializeChannelComponents();
            
            // Filter toggle
            $('#filterToggle').click(function() {
                $('#filterPanel').slideToggle();
            });
            
            // Global search
            $('#globalSearch').on('keyup', function() {
                var searchTerm = $(this).val();
                if (searchTerm.length >= 3 || searchTerm.length === 0) {
                    performGlobalSearch(searchTerm);
                }
            });
            
            // Apply filters
            $('#applyFilters').click(function() {
                applyChannelFilters();
            });
            
            // Clear filters
            $('#clearFilters').click(function() {
                clearChannelFilters();
            });
            
            // Load channel statistics
            $('#channelStatsModal').on('show.bs.modal', function() {
                loadChannelStatistics();
            });
            
            // Load quick add form
            $('#addChannelModal').on('show.bs.modal', function() {
                loadQuickAddForm();
            });
        });
        
        function initializeChannelComponents() {
            // Initialize Select2
            $('.select2').select2({
                theme: 'bootstrap-5',
                width: '100%'
            });
            
            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }
        
        function performGlobalSearch(searchTerm) {
            // Implement global search functionality
            showLoading();
            
            $.ajax({
                url: '{% url "channels:ajax_channel_search" %}',
                data: { 'q': searchTerm },
                success: function(data) {
                    updateChannelList(data.channels);
                },
                error: function() {
                    showAlert('Error performing search', 'danger');
                },
                complete: function() {
                    hideLoading();
                }
            });
        }
        
        function applyChannelFilters() {
            var filters = {
                'provider': $('#providerFilter').val(),
                'quality': $('#qualityFilter').val(),
                'status': $('#statusFilter').val(),
                'region': $('#regionFilter').val()
            };
            
            showLoading();
            
            $.ajax({
                url: '{% url "channels:ajax_channel_filter" %}',
                data: filters,
                success: function(data) {
                    updateChannelList(data.channels);
                    showAlert('Filters applied successfully', 'success');
                },
                error: function() {
                    showAlert('Error applying filters', 'danger');
                },
                complete: function() {
                    hideLoading();
                }
            });
        }
        
        function clearChannelFilters() {
            $('#providerFilter, #qualityFilter, #statusFilter, #regionFilter').val('');
            $('#globalSearch').val('');
            
            // Reload all channels
            location.reload();
        }
        
        function loadChannelStatistics() {
            $.ajax({
                url: '{% url "channels:ajax_channel_stats" %}',
                success: function(data) {
                    renderChannelCharts(data);
                },
                error: function() {
                    showAlert('Error loading statistics', 'danger');
                }
            });
        }
        
        function loadQuickAddForm() {
            $('#quickAddForm').load('{% url "channels:ajax_quick_add_form" %}');
        }
        
        function renderChannelCharts(data) {
            // Provider distribution chart
            const providerCtx = document.getElementById('providerChart').getContext('2d');
            new Chart(providerCtx, {
                type: 'doughnut',
                data: {
                    labels: data.provider_labels,
                    datasets: [{
                        data: data.provider_data,
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Channels by Provider'
                        }
                    }
                }
            });
            
            // Quality distribution chart
            const qualityCtx = document.getElementById('qualityChart').getContext('2d');
            new Chart(qualityCtx, {
                type: 'bar',
                data: {
                    labels: data.quality_labels,
                    datasets: [{
                        label: 'Channels',
                        data: data.quality_data,
                        backgroundColor: '#36A2EB'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Channels by Quality'
                        }
                    }
                }
            });
            
            // Channel trends chart
            const trendsCtx = document.getElementById('channelTrendsChart').getContext('2d');
            new Chart(trendsCtx, {
                type: 'line',
                data: {
                    labels: data.trends_labels,
                    datasets: [{
                        label: 'New Channels',
                        data: data.trends_data,
                        borderColor: '#4BC0C0',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Channel Creation Trends'
                        }
                    }
                }
            });
        }
        
        function updateChannelList(channels) {
            // Update the channel list display
            // This function should be implemented based on the specific list view
        }
        
        function showLoading() {
            $('#loadingOverlay').show();
        }
        
        function hideLoading() {
            $('#loadingOverlay').hide();
        }
        
        function showAlert(message, type) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            
            // Add alert to the top of the content area
            $('.container-fluid').prepend(alertHtml);
            
            // Auto-dismiss after 5 seconds
            setTimeout(function() {
                $('.alert').alert('close');
            }, 5000);
        }
    </script>
    
    {% block channel_js %}
        <!-- Channel-specific JavaScript -->
    {% endblock %}
{% endblock %}