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

{% load static %}

{% block title %}
    {% if channel.pk %} Edit Channel - {{ channel.name }}
    {% else %} Add Channel {% endif %}
{% endblock title %}

{% block extra_css %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
       display: none;
   }
   
   /* Modern loading spinner */
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #3498db;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .btn-loading {
       position: relative;
       pointer-events: none;
   }
   
   .btn-loading::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       margin: auto;
       border: 2px solid transparent;
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

   /* Disabled button styles */
   .btn.disabled, .btn:disabled {
       opacity: 0.5 !important;
       cursor: not-allowed !important;
       pointer-events: none !important;
   }

   /* Form validation styles */
   .form-control.is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .form-control.is-valid {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .validation-error {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .validation-success {
      color: #155724;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .shake-animation {
      animation: shake 0.5s ease-in-out;
   }

   @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
   }

    /* Channel Preview Styles */
    .channel-preview {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        margin-top: 20px;
    }
    
    .preview-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .preview-logo {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
        border: 2px solid #dee2e6;
    }
    
    .badge {
        margin: 0.25rem;
    }
    
    /* Card styles to match campaign form */
    .card {
        margin-bottom: 1.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 1.25rem;
    }
    
    .card-title {
        margin-bottom: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Logo upload styles */
    .logo-upload-container {
        position: relative;
        display: inline-block;
    }
    
    .logo-preview {
        width: 120px;
        height: 120px;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }
    
    .logo-preview:hover {
        border-color: #007bff;
        background: #e7f3ff;
    }
    
    .logo-preview.has-image {
        border-style: solid;
        border-color: #dee2e6;
    }
    
    .logo-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
    
    .logo-placeholder {
        text-align: center;
        color: #6c757d;
    }
    
    .logo-placeholder i {
        font-size: 2rem;
        margin-bottom: 8px;
        display: block;
    }
    
    .logo-remove-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #dc3545;
        color: white;
        border: none;
        font-size: 12px;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .logo-upload-container:hover .logo-remove-btn {
        display: flex;
    }

    /* Multi-select styles */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        min-height: 38px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border: 1px solid #007bff;
        color: #fff;
        border-radius: 0.25rem;
        padding: 2px 8px;
        margin: 2px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
        margin-right: 5px;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% if channel.pk %}Edit Channel{% else %}Add Channel{% endif %}</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>
            {% if channel.pk %}
                <li class="breadcrumb-item"><a href="{% url 'channels:channel_detail' channel.id %}">{{ channel.display_name|default:channel.name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            {% else %}
                <li class="breadcrumb-item active" aria-current="page">Add</li>
            {% endif %}
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<form method="post" id="channel-form" enctype="multipart/form-data" novalidate>
    {% csrf_token %}
    
    <!-- Basic Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Channel Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Left Column - Logo -->
                <div class="col-md-3">
                    <label class="form-label">Channel Logo</label>
                    <div class="logo-upload-container">
                        <div class="logo-preview" onclick="document.getElementById('logo-input').click()" id="logo-preview">
                            {% if channel.logo %}
                                <img src="{{ channel.logo.url }}" alt="Channel Logo" id="logo-image">
                            {% else %}
                                <div class="logo-placeholder">
                                    <i class="fe fe-image"></i>
                                    <small>Click to upload</small>
                                </div>
                            {% endif %}
                        </div>
                        <button type="button" class="logo-remove-btn" onclick="removeLogo()" id="logo-remove-btn">
                            <i class="fe fe-x"></i>
                        </button>
                        <input type="file" id="logo-input" name="logo" accept="image/*" style="display: none;" onchange="previewLogo(this)">
                    </div>
                    <div class="help-text">Upload channel logo (PNG, JPG, SVG recommended)</div>
                </div>
                
                <!-- Right Column - Basic Info -->
                <div class="col-md-9">
                    <!-- Channel Name -->
                    <div class="">
                        <label class="form-label required-field">Channel Name</label>
                        <input class="form-control" placeholder="Enter channel name" name="name" type="text" 
                               value="{{ channel.name|default:'' }}" required>
                        <div class="help-text">Internal name for the channel (used in system)</div>
                    </div>
                    
                    <div class="row">
                        <!-- Display Name -->
                        <div class="col-md-6">
                            <label class="form-label">Display Name</label>
                            <input class="form-control " placeholder="Public display name" name="display_name" 
                                   type="text" value="{{ channel.display_name|default:'' }}">
                            <div class="help-text">Public name shown to viewers (optional)</div>
                        </div>
                        
                        <!-- Channel Number -->
                        <div class="col-md-6">
                            <label class="form-label">Channel Number</label>
                            <input class="form-control " placeholder="e.g., 101" name="channel_number" 
                                   type="number" value="{{ channel.channel_number|default:'' }}" min="1" max="9999">
                            <div class="help-text">Numeric identifier for the channel</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Description -->
            <div class="mt-4">
                <label class="form-label">Description</label>
                <textarea class="form-control " placeholder="Brief description of the channel's purpose and content..." 
                          name="description" rows="3">{{ channel.description|default:'' }}</textarea>
                <div class="help-text">Brief description of the channel's purpose and content</div>
            </div>
        </div>
    </div>
    
    <!-- Configuration Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Configuration</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Channel Type -->
                <div class="col-lg-4">
                    <label class="form-label required-field">Channel Type</label>
                    <select class="form-control select2-show-search form-select " name="channel_type" 
                            data-placeholder="Choose one" required>
                        <option value="">Select channel type...</option>
                        <option value="terrestrial" {% if channel.channel_type == 'terrestrial' %}selected{% endif %}>Terrestrial/Over-the-Air</option>
                        <option value="cable" {% if channel.channel_type == 'cable' %}selected{% endif %}>Cable Channel</option>
                        <option value="satellite" {% if channel.channel_type == 'satellite' %}selected{% endif %}>Satellite Channel</option>
                        <option value="iptv" {% if channel.channel_type == 'iptv' %}selected{% endif %}>IPTV Channel</option>
                        <option value="streaming" {% if channel.channel_type == 'streaming' %}selected{% endif %}>Streaming Channel</option>
                        <option value="radio" {% if channel.channel_type == 'radio' %}selected{% endif %}>Radio Station</option>
                    </select>
                    <div class="help-text">Select the type of content this channel will broadcast</div>
                </div>
                
                <!-- Language (Multi-select) -->
                <div class="col-lg-4">
                    <label class="form-label">Languages</label>
                    <select class="form-control select2-multiple form-select " name="language" 
                            data-placeholder="Select languages..." multiple>
                        <option value="en" {% if 'en' in channel.language or channel.language == 'en' %}selected{% endif %}>English</option>
                        <option value="es" {% if 'es' in channel.language or channel.language == 'es' %}selected{% endif %}>Spanish</option>
                        <option value="fr" {% if 'fr' in channel.language or channel.language == 'fr' %}selected{% endif %}>French</option>
                        <option value="de" {% if 'de' in channel.language or channel.language == 'de' %}selected{% endif %}>German</option>
                        <option value="it" {% if 'it' in channel.language or channel.language == 'it' %}selected{% endif %}>Italian</option>
                        <option value="pt" {% if 'pt' in channel.language or channel.language == 'pt' %}selected{% endif %}>Portuguese</option>
                        <option value="ar" {% if 'ar' in channel.language or channel.language == 'ar' %}selected{% endif %}>Arabic</option>
                        <option value="zh" {% if 'zh' in channel.language or channel.language == 'zh' %}selected{% endif %}>Chinese</option>
                        <option value="ja" {% if 'ja' in channel.language or channel.language == 'ja' %}selected{% endif %}>Japanese</option>
                        <option value="ko" {% if 'ko' in channel.language or channel.language == 'ko' %}selected{% endif %}>Korean</option>
                        <option value="hi" {% if 'hi' in channel.language or channel.language == 'hi' %}selected{% endif %}>Hindi</option>
                        <option value="ru" {% if 'ru' in channel.language or channel.language == 'ru' %}selected{% endif %}>Russian</option>
                    </select>
                    <div class="help-text">Select primary languages for channel content</div>
                </div>
                
                <!-- Category (Multi-select) -->
                <div class="col-lg-4">
                    <label class="form-label">Categories</label>
                    <select class="form-control select2-multiple form-select " name="category" 
                            data-placeholder="Select categories..." multiple>
                        <option value="entertainment" {% if 'entertainment' in channel.category or channel.category == 'entertainment' %}selected{% endif %}>Entertainment</option>
                        <option value="news" {% if 'news' in channel.category or channel.category == 'news' %}selected{% endif %}>News</option>
                        <option value="sports" {% if 'sports' in channel.category or channel.category == 'sports' %}selected{% endif %}>Sports</option>
                        <option value="educational" {% if 'educational' in channel.category or channel.category == 'educational' %}selected{% endif %}>Educational</option>
                        <option value="music" {% if 'music' in channel.category or channel.category == 'music' %}selected{% endif %}>Music</option>
                        <option value="movies" {% if 'movies' in channel.category or channel.category == 'movies' %}selected{% endif %}>Movies</option>
                        <option value="documentary" {% if 'documentary' in channel.category or channel.category == 'documentary' %}selected{% endif %}>Documentary</option>
                        <option value="lifestyle" {% if 'lifestyle' in channel.category or channel.category == 'lifestyle' %}selected{% endif %}>Lifestyle</option>
                        <option value="cooking" {% if 'cooking' in channel.category or channel.category == 'cooking' %}selected{% endif %}>Cooking</option>
                        <option value="travel" {% if 'travel' in channel.category or channel.category == 'travel' %}selected{% endif %}>Travel</option>
                        <option value="technology" {% if 'technology' in channel.category or channel.category == 'technology' %}selected{% endif %}>Technology</option>
                        <option value="kids" {% if 'kids' in channel.category or channel.category == 'kids' %}selected{% endif %}>Kids</option>
                    </select>
                    <div class="help-text">Select content categories for the channel</div>
                </div>
            </div>
            
            <div class="row">
                <!-- Target Audience -->
                <div class="col-lg-6">
                    <label class="form-label">Target Audience</label>
                    <select class="form-control select2-show-search form-select " name="target_audience" 
                            data-placeholder="Choose one">
                        <option value="">Select audience...</option>
                        <option value="general" {% if channel.target_audience == 'general' %}selected{% endif %}>General</option>
                        <option value="children" {% if channel.target_audience == 'children' %}selected{% endif %}>Children</option>
                        <option value="teens" {% if channel.target_audience == 'teens' %}selected{% endif %}>Teens</option>
                        <option value="adults" {% if channel.target_audience == 'adults' %}selected{% endif %}>Adults</option>
                        <option value="seniors" {% if channel.target_audience == 'seniors' %}selected{% endif %}>Seniors</option>
                    </select>
                    <div class="help-text">Primary target audience for content</div>
                </div>
                
                <!-- Website -->
                <div class="col-lg-6">
                    <label class="form-label">Website URL</label>
                    <input class="form-control " placeholder="https://example.com" name="website" 
                           type="url" value="{{ channel.website|default:'' }}">
                    <div class="help-text">Official website or homepage URL</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Channel Preview Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Channel Preview</h3>
        </div>
        <div class="card-body">
            <div class="channel-preview" id="channel-preview">
                <div id="preview-logo-container">
                    {% if channel.logo %}
                        <img src="{{ channel.logo.url }}" alt="Channel Logo" class="preview-logo" id="preview-logo">
                    {% else %}
                        <div class="preview-icon" id="preview-icon">
                            <i class="fe fe-tv"></i>
                        </div>
                    {% endif %}
                </div>
                <h5 class="text-dark mb-2" id="preview-name">Channel Name</h5>
                <p class="text-muted mb-3" id="preview-number">Channel #</p>
                <div class="d-flex justify-content-center flex-wrap">
                    <span class="badge bg-secondary" id="preview-type">Type</span>
                    <div id="preview-languages"></div>
                    <div id="preview-categories"></div>
                </div>
                <p class="text-muted mt-3 mb-0" id="preview-description">Channel description will appear here...</p>
            </div>
        </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" style="width:200px; text-align:center;" class="btn btn-primary" id="submit-btn">
        {% if channel.pk %}Update Channel{% else %}Add Channel{% endif %}
    </button>
    
    {% if channel.pk %}
    <button type="button" class="btn btn-outline-danger ms-2" onclick="deleteChannel('{{ channel.id }}')" style="width:150px;">
        Delete Channel
    </button>
    {% endif %}
</form>
{% endblock content %}

{% block modals %}
{% if channel.pk %}
<!-- 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 the channel "{{ channel.display_name|default:channel.name }}"?</p>
                <p class="text-warning"><strong>This action cannot be undone and will also delete all associated zones, jingles, and adbreaks.</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>
{% endif %}
{% endblock modals %}

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

<script>
$(document).ready(function() {
    'use strict';
    
    // Initialize Select2 dropdowns
    $('.select2-show-search').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true
    });

    // Initialize multi-select dropdowns
    $('.select2-multiple').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true,
        multiple: true
    });
    
    // Real-time preview update
    function updatePreview() {
        const name = $('input[name="name"]').val() || $('input[name="display_name"]').val() || 'Channel Name';
        const displayName = $('input[name="display_name"]').val();
        const number = $('input[name="channel_number"]').val();
        const type = $('select[name="channel_type"] option:selected').text() || 'Type';
        const languages = $('select[name="language"]').val() || [];
        const categories = $('select[name="category"]').val() || [];
        const description = $('textarea[name="description"]').val() || 'Channel description will appear here...';
        
        $('#preview-name').text(displayName || name);
        $('#preview-number').text(number ? `Channel ${number}` : 'Channel #');
        $('#preview-type').text(type);
        $('#preview-description').text(description);
        
        // Update language badges
        const languageContainer = $('#preview-languages');
        languageContainer.empty();
        if (languages.length > 0) {
            languages.forEach(function(lang) {
                const langText = $('select[name="language"] option[value="' + lang + '"]').text();
                const badge = $('<span class="badge bg-info">' + langText + '</span>');
                languageContainer.append(badge);
            });
        }
        
        // Update category badges
        const categoryContainer = $('#preview-categories');
        categoryContainer.empty();
        if (categories.length > 0) {
            categories.forEach(function(cat) {
                const catText = $('select[name="category"] option[value="' + cat + '"]').text();
                const badge = $('<span class="badge bg-success">' + catText + '</span>');
                categoryContainer.append(badge);
            });
        }
    }
    
    // Bind preview update to form changes
    $('input[name="name"], input[name="display_name"], input[name="channel_number"], textarea[name="description"]').on('input', updatePreview);
    $('select[name="channel_type"], select[name="language"], select[name="category"]').on('change', updatePreview);
    
    // Initial preview update
    updatePreview();
    
    // Form validation with loading states
    $('#channel-form').on('submit', function(e) {
        let isValid = true;
        
        // Clear previous errors
        $('.validation-error').remove();
        $('.form-control, .form-select').removeClass('is-invalid');
        
        // Validate required fields
        const requiredFields = ['input[name="name"]', 'select[name="channel_type"]'];
        requiredFields.forEach(function(field) {
            if (!$(field).val()) {
                $(field).addClass('is-invalid');
                $(field).after('<div class="validation-error">This field is required.</div>');
                isValid = false;
            }
        });
        
        // Validate URLs if provided
        const urlFields = ['input[name="website"]'];
        urlFields.forEach(function(field) {
            const value = $(field).val();
            if (value && !isValidUrl(value)) {
                $(field).addClass('is-invalid');
                $(field).after('<div class="validation-error">Please enter a valid URL.</div>');
                isValid = false;
            }
        });
        
        // Validate logo file size (max 5MB)
        const logoInput = document.getElementById('logo-input');
        if (logoInput.files[0]) {
            const fileSize = logoInput.files[0].size / 1024 / 1024; // in MB
            if (fileSize > 5) {
                $(logoInput).addClass('is-invalid');
                $('#logo-preview').after('<div class="validation-error">Logo file size must be less than 5MB.</div>');
                isValid = false;
            }
        }
        
        if (!isValid) {
            e.preventDefault();
            // Scroll to first error
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
            return false;
        }
        
        // Show loading state
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.prop('disabled', true).addClass('btn-loading').text('Saving...');
        
        // Re-enable button after 3 seconds (in case of issues)
        setTimeout(function() {
            submitBtn.prop('disabled', false).removeClass('btn-loading').html(originalText);
        }, 3000);
    });
    
    // URL validation helper
    function isValidUrl(string) {
        try {
            new URL(string);
            return true;
        } catch (_) {
            return false;
        }
    }
});

// Logo preview function
function previewLogo(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('logo-preview');
            const existingImg = preview.querySelector('img');
            const placeholder = preview.querySelector('.logo-placeholder');
            
            if (existingImg) {
                existingImg.src = e.target.result;
            } else {
                if (placeholder) {
                    placeholder.style.display = 'none';
                }
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = 'Channel Logo';
                img.id = 'logo-image';
                preview.appendChild(img);
            }
            
            preview.classList.add('has-image');
            
            // Update preview logo
            updatePreviewLogo(e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

// Remove logo function
function removeLogo() {
    const logoInput = document.getElementById('logo-input');
    const logoPreview = document.getElementById('logo-preview');
    const existingImg = logoPreview.querySelector('img');
    const placeholder = logoPreview.querySelector('.logo-placeholder');
    
    logoInput.value = '';
    
    if (existingImg) {
        existingImg.remove();
    }
    
    if (placeholder) {
        placeholder.style.display = 'block';
    } else {
        const newPlaceholder = document.createElement('div');
        newPlaceholder.className = 'logo-placeholder';
        newPlaceholder.innerHTML = '<i class="fe fe-image"></i><small>Click to upload</small>';
        logoPreview.appendChild(newPlaceholder);
    }
    
    logoPreview.classList.remove('has-image');
    
    // Reset preview logo to icon
    updatePreviewLogo(null);
}

// Update preview logo function
function updatePreviewLogo(logoUrl) {
    const previewLogoContainer = document.getElementById('preview-logo-container');
    const existingLogo = previewLogoContainer.querySelector('#preview-logo');
    const existingIcon = previewLogoContainer.querySelector('#preview-icon');
    
    if (logoUrl) {
        // Show logo
        if (existingLogo) {
            existingLogo.src = logoUrl;
        } else {
            const img = document.createElement('img');
            img.src = logoUrl;
            img.alt = 'Channel Logo';
            img.className = 'preview-logo';
            img.id = 'preview-logo';
            previewLogoContainer.appendChild(img);
        }
        
        if (existingIcon) {
            existingIcon.style.display = 'none';
        }
    } else {
        // Show icon
        if (existingLogo) {
            existingLogo.remove();
        }
        
        if (existingIcon) {
            existingIcon.style.display = 'block';
        } else {
            const iconDiv = document.createElement('div');
            iconDiv.className = 'preview-icon';
            iconDiv.id = 'preview-icon';
            iconDiv.innerHTML = '<i class="fe fe-tv"></i>';
            previewLogoContainer.appendChild(iconDiv);
        }
    }
}
 
// Delete channel function
{% if channel.pk %}
function deleteChannel(channelId) {
    Swal.fire({
        title: 'Delete Channel?',
        text: 'This action cannot be undone. All channel data will be permanently deleted.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Deleting...',
                text: 'Please wait while we delete the channel.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.ajax({
                url: '{% url "channels:channel_delete" channel.id %}',
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Channel has been successfully deleted.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = '{% url "channels:channel_list" %}';
                    });
                },
                error: function(xhr) {
                    let errorMessage = 'Delete failed. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    Swal.fire({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    });
}
{% endif %}
</script>
{% endblock extra_js %}