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

{% load static %}

{% block title %}Channels{% 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);
    }
    
    .channel-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .channel-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .channel-card.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .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); }
    }
</style>
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .channel-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .channel-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .active-badge {
        background-color: #28a745;
        color: #fff;
    }
    
    .inactive-badge {
        background-color: #dc3545;
        color: #fff;
    }
    
    .maintenance-badge {
        background-color: #ffc107;
        color: #000;
    }
    
    .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;
    }
    
    @media (max-width: 768px) {
        .action-buttons {
            text-align: center;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Channels</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Channels</a></li>
            <li class="breadcrumb-item active" aria-current="page">List</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6">
        <div class="card bg-primary text-white">
            <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="total-channels">{{ stats.total_channels }}</h2>
                        <p class="mb-0">Total Channels</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-success text-white">
            <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-channels">{{ stats.active_channels }}</h2>
                        <p class="mb-0">Active</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-globe fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="online-channels">{{ stats.online_channels }}</h2>
                        <p class="mb-0">Online</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="fe fe-layers fs-2"></i>
                    </div>
                    <div>
                        <h2 class="mb-0" id="channel-types">{{ channel_types|length }}</h2>
                        <p class="mb-0">Types</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Filters Card -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-filter me-2"></i>Filters & Search
                </h5>
            </div>
            <div class="card-body">
                <form method="get" id="filter-form" class="row g-3">
                    <!-- Search Input -->
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">
                            <i class="fe fe-search me-1"></i>Search
                        </label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" 
                               placeholder="Search channels...">
                    </div>
                    
                    <!-- Channel Type Filter -->
                    <div class="col-md-4">
                        <label for="type" class="form-label fw-semibold">
                            <i class="fe fe-tag me-1"></i>Channel Type
                        </label>
                        <select class="form-select" id="type" name="type">
                            <option value="" {% if not selected_type %}selected{% endif %}>All Types</option>
                            {% for type_value, type_label in channel_types %}
                                <option value="{{ type_value }}" 
                                        {% if selected_type == type_value %}selected{% endif %}>
                                    {{ type_label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-4">
                        <label for="status" class="form-label fw-semibold">
                            <i class="fe fe-activity me-1"></i>Status
                        </label>
                        <select class="form-select" id="status" name="status">
                            <option value="" {% if not selected_status %}selected{% endif %}>All Status</option>
                            {% for status_value, status_label in status_choices %}
                                <option value="{{ status_value }}" 
                                        {% if selected_status == status_value %}selected{% endif %}>
                                    {{ status_label }}
                                </option>
                            {% endfor %}
                        </select>
                    </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:channel_create' %}" class="btn btn-success ms-auto">
                                <i class="fe fe-plus me-1"></i> New Channel
                            </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-tv me-2"></i>Channels 
                    <span class="badge bg-primary ms-2" id="results-count">
                        {{ channels|length }} result{{ channels|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 channels %}
                        <div class="row g-3" id="channels-container">
                            {% for channel in channels %}
                                <div class="col-lg-6 col-xl-4">
                                    <div class="card channel-card h-100 shadow-sm border-0">
                                        <div class="card-body d-flex flex-column">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <h6 class="card-title mb-0 fw-semibold text-primary">
                                                    <i class="fe fe-tv me-1"></i>{{ channel.display_name|default:channel.name }}
                                                </h6>
                                                <span class="badge status-badge {% if channel.status == 'active' %}bg-success{% elif channel.status == 'inactive' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
                                                    <i class="fe fe-{% if channel.status == 'active' %}check-circle{% elif channel.status == 'inactive' %}x-circle{% else %}clock{% endif %} me-1"></i>
                                                    {{ channel.get_status_display }}
                                                </span>
                                            </div>
                                            
                                            <div class="channel-info flex-grow-1">
                                                {% if channel.channel_number %}
                                                <div class="mb-2">
                                                    <i class="fe fe-hash text-muted me-2"></i>
                                                    <span class="text-muted">Channel {{ channel.channel_number }}</span>
                                                </div>
                                                {% endif %}
                                                <div class="mb-2">
                                                    <i class="fe fe-tag text-muted me-2"></i>
                                                    <span class="text-muted">{{ channel.get_channel_type_display }}</span>
                                                </div>
                                                {% if channel.language %}
                                                <div class="mb-2">
                                                    <i class="fe fe-globe text-muted me-2"></i>
                                                    <span class="text-muted">{{ channel.language }}</span>
                                                </div>
                                                {% endif %}
                                                {% if channel.description %}
                                                <div class="mb-3">
                                                    <i class="fe fe-info text-muted me-2"></i>
                                                    <span class="text-muted">{{ channel.description|truncatechars:100 }}</span>
                                                </div>
                                                {% endif %}
                                            </div>
                                            
                                            <div class="channel-stats mb-3">
                                                <div class="row text-center g-0">
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-map-pin text-primary"></i>
                                                            <div class="fw-bold text-primary">{{ channel.zones.count }}</div>
                                                            <small class="text-muted">Zones</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-music text-info"></i>
                                                            <div class="fw-bold text-info">0</div>
                                                            <small class="text-muted">Jingles</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="stat-item">
                                                            <i class="fe fe-play-circle text-success"></i>
                                                            <div class="fw-bold text-success">0</div>
                                                            <small class="text-muted">Adbreaks</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="action-buttons d-flex flex-wrap gap-1">
                                                <a href="{% url 'channels:channel_detail' channel.id %}" 
                                                   class="btn btn-sm btn-primary flex-fill" title="View Details">
                                                    <i class="fe fe-eye me-1"></i> View
                                                </a>
                                                <a href="{% url 'channels:channel_update' channel.id %}" 
                                                   class="btn btn-sm btn-warning flex-fill" title="Edit Channel">
                                                    <i class="fe fe-edit me-1"></i> Edit
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteChannel('{{ channel.id }}')" title="Delete Channel">
                                                    <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-tv fe-5x text-muted mb-4"></i>
                                <h5 class="text-muted mb-3">No channels found</h5>
                                <p class="text-muted mb-4">Try adjusting your filters or create a new channel to get started.</p>
                                <a href="{% url 'channels:channel_create' %}" class="btn btn-primary">
                                    <i class="fe fe-plus me-2"></i> Create New Channel
                                </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 class="fw-semibold">
                                        <i class="fe fe-tv me-1"></i>Channel
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-hash me-1"></i>Number
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-tag me-1"></i>Type
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-activity me-1"></i>Status
                                    </th>
                                    <th class="fw-semibold">
                                        <i class="fe fe-globe me-1"></i>Language
                                    </th>
                                    <th class="fw-semibold text-center">
                                        <i class="fe fe-map-pin me-1"></i>Zones
                                    </th>
                                    <th class="fw-semibold text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="table-body">
                                {% for channel in channels %}
                                    <tr>
                                        <td class="fw-medium">{{ channel.display_name|default:channel.name }}</td>
                                        <td>{{ channel.channel_number|default:"-" }}</td>
                                        <td>{{ channel.get_channel_type_display }}</td>
                                        <td>
                                            <span class="badge {% if channel.status == 'active' %}bg-success{% elif channel.status == 'inactive' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
                                                <i class="fe fe-{% if channel.status == 'active' %}check-circle{% elif channel.status == 'inactive' %}x-circle{% else %}clock{% endif %} me-1"></i>
                                                {{ channel.get_status_display }}
                                            </span>
                                        </td>
                                        <td>{{ channel.language|default:"-" }}</td>
                                        <td class="text-center">
                                            <span class="fw-bold text-primary">{{ channel.zones.count }}</span>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{% url 'channels:channel_detail' channel.id %}" 
                                                   class="btn btn-sm btn-primary" title="View Details">
                                                    <i class="fe fe-eye"></i>
                                                </a>
                                                <a href="{% url 'channels:channel_update' channel.id %}" 
                                                   class="btn btn-sm btn-warning" title="Edit Channel">
                                                    <i class="fe fe-edit"></i>
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteChannel('{{ channel.id }}')" title="Delete Channel">
                                                    <i class="fe fe-trash-2"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pagination -->
{% if channels.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 {{ channels.start_index }} to {{ channels.end_index }} of {{ channels.paginator.count }} channels
                    </div>
                    
                    <nav aria-label="Channel pagination">
                        <ul class="pagination pagination-sm mb-0">
                            {% if channels.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={{ channels.previous_page_number }}" title="Previous Page">
                                        <i class="fe fe-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for page_num in channels.paginator.page_range %}
                                {% if page_num == channels.number %}
                                    <li class="page-item active">
                                        <span class="page-link fw-bold">{{ page_num }}</span>
                                    </li>
                                {% elif page_num >= channels.number|add:'-2' and page_num <= channels.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 channels.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={{ channels.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={{ channels.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 channel?</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 Channel</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
    $('#type, #status').select2({
        width: '100%',
        allowClear: true
    });
    
    // Clear filters
    $('#clear-filters').click(function() {
        window.location.href = '{% url "channels:channel_list" %}';
    });
    
    // View toggle
    $('#card-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').show();
        $('#table-view-container').hide();
        localStorage.setItem('channelViewMode', 'card');
    });
    
    $('#table-view').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('#card-view-container').hide();
        $('#table-view-container').show();
        localStorage.setItem('channelViewMode', 'table');
    });
    
    // Restore view mode
    const savedViewMode = localStorage.getItem('channelViewMode');
    if (savedViewMode === 'table') {
        $('#table-view').click();
    }
    
    // Auto-submit form on filter change
    $('#type, #status').change(function() {
        $('#filter-form').submit();
    });
    
    // Debounced search
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filter-form').submit();
        }, 500);
    });
    
    // Loading overlay functions
    function showLoading() {
        $('#loading-overlay').show();
    }
    
    function hideLoading() {
        $('#loading-overlay').hide();
    }
});

// Delete channel function
function deleteChannel(channelId) {
    $('#deleteModal').modal('show');
    
    $('#confirmDelete').off('click').on('click', function() {
        $.ajax({
            url: '/channels/' + channelId + '/delete/',
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            },
            success: function(response) {
                $('#deleteModal').modal('hide');
                location.reload();
            },
            error: function() {
                $('#deleteModal').modal('hide');
                alert('Delete failed. Please try again.');
            }
        });
    });
}
</script>
{% endblock extra_js %}