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

{% block title %}{% if form.instance.pk %}Edit {{ form.instance.name }}{% else %}Add New Channel{% endif %} - {{ block.super }}{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">Channels</a></li>
    {% if form.instance.pk %}
        <li class="breadcrumb-item"><a href="{% url 'channels:channel_detail' form.instance.pk %}">{{ form.instance.name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Edit</li>
    {% else %}
        <li class="breadcrumb-item active" aria-current="page">Add Channel</li>
    {% endif %}
{% endblock %}

{% block channels_content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">
            <i class="fas fa-{% if form.instance.pk %}edit{% else %}plus{% endif %} me-2"></i>
            {% if form.instance.pk %}Edit Channel{% else %}Add New Channel{% endif %}
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a href="{% if form.instance.pk %}{% url 'channels:channel_detail' form.instance.pk %}{% else %}{% url 'channels:channel_list' %}{% endif %}" 
               class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>Back
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-tv me-2"></i>Channel Information
                    </h6>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="channelForm">
                        {% csrf_token %}
                        
                        <!-- Form Errors -->
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {% for error in form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}

                        <div class="row">
                            <!-- Channel Name -->
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">
                                    {{ form.name.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.name|add_class:"form-control" }}
                                {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.name.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">Enter the official channel name</div>
                            </div>

                            <!-- Channel Type -->
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.channel_type.id_for_label }}" class="form-label">
                                    {{ form.channel_type.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.channel_type|add_class:"form-select" }}
                                {% if form.channel_type.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.channel_type.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="row">
                            <!-- Country -->
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.country.id_for_label }}" class="form-label">
                                    {{ form.country.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.country|add_class:"form-select" }}
                                {% if form.country.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.country.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <!-- Language -->
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.language.id_for_label }}" class="form-label">
                                    {{ form.language.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.language|add_class:"form-control" }}
                                {% if form.language.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.language.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">Primary language of the channel content</div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Content Rating -->
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.content_rating.id_for_label }}" class="form-label">
                                    {{ form.content_rating.label }}
                                </label>
                                {{ form.content_rating|add_class:"form-select" }}
                                {% if form.content_rating.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.content_rating.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <!-- Status -->
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch mt-4">
                                    {{ form.is_active|add_class:"form-check-input" }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        {{ form.is_active.label }}
                                    </label>
                                    {% if form.is_active.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.is_active.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Enable this channel for broadcasting</div>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }}
                            </label>
                            {{ form.description|add_class:"form-control" }}
                            {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.description.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <div class="form-text">Brief description of the channel and its content</div>
                        </div>

                        <!-- Website -->
                        <div class="mb-3">
                            <label for="{{ form.website.id_for_label }}" class="form-label">
                                {{ form.website.label }}
                            </label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-globe"></i></span>
                                {{ form.website|add_class:"form-control" }}
                            </div>
                            {% if form.website.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.website.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <div class="form-text">Official website URL (optional)</div>
                        </div>

                        <!-- Logo Upload -->
                        <div class="mb-4">
                            <label for="{{ form.logo.id_for_label }}" class="form-label">
                                {{ form.logo.label }}
                            </label>
                            <div class="row">
                                <div class="col-md-8">
                                    {{ form.logo|add_class:"form-control" }}
                                    {% if form.logo.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.logo.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">Upload channel logo (PNG, JPG, SVG - Max 2MB)</div>
                                </div>
                                <div class="col-md-4">
                                    {% if form.instance.logo %}
                                        <div class="text-center">
                                            <img src="{{ form.instance.logo.url }}" alt="Current Logo" 
                                                 class="img-thumbnail" style="max-width: 100px; max-height: 100px;">
                                            <div class="small text-muted mt-1">Current Logo</div>
                                        </div>
                                    {% else %}
                                        <div class="text-center text-muted">
                                            <i class="fas fa-image fa-3x mb-2"></i>
                                            <div class="small">No logo uploaded</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <div>
                                {% if form.instance.pk %}
                                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">
                                        <i class="fas fa-trash me-1"></i>Delete Channel
                                    </button>
                                {% endif %}
                            </div>
                            <div>
                                <a href="{% if form.instance.pk %}{% url 'channels:channel_detail' form.instance.pk %}{% else %}{% url 'channels:channel_list' %}{% endif %}" 
                                   class="btn btn-secondary me-2">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>
                                    {% if form.instance.pk %}Update Channel{% else %}Create Channel{% endif %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Help Panel -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-question-circle me-2"></i>Help & Guidelines
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Channel Types</h6>
                        <ul class="small text-muted">
                            <li><strong>Terrestrial:</strong> Over-the-air broadcast channels</li>
                            <li><strong>Cable:</strong> Cable television channels</li>
                            <li><strong>Satellite:</strong> Satellite broadcast channels</li>
                            <li><strong>Streaming:</strong> Internet streaming channels</li>
                            <li><strong>IPTV:</strong> Internet Protocol Television</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Content Ratings</h6>
                        <ul class="small text-muted">
                            <li><strong>G:</strong> General audiences</li>
                            <li><strong>PG:</strong> Parental guidance suggested</li>
                            <li><strong>PG-13:</strong> Parents strongly cautioned</li>
                            <li><strong>R:</strong> Restricted</li>
                            <li><strong>NC-17:</strong> Adults only</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <h6 class="text-primary">Logo Requirements</h6>
                        <ul class="small text-muted">
                            <li>Recommended size: 200x200 pixels</li>
                            <li>Supported formats: PNG, JPG, SVG</li>
                            <li>Maximum file size: 2MB</li>
                            <li>Transparent background preferred</li>
                        </ul>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Tip:</strong> After creating a channel, you can configure distribution zones, add jingles, and set up EPG entries from the channel detail page.
                    </div>
                </div>
            </div>

            <!-- Preview Card -->
            {% if form.instance.pk %}
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-eye me-2"></i>Channel Preview
                    </h6>
                </div>
                <div class="card-body text-center">
                    {% if form.instance.logo %}
                        <img src="{{ form.instance.logo.url }}" alt="{{ form.instance.name }}" 
                             class="img-thumbnail mb-3" style="max-width: 120px; max-height: 120px;">
                    {% else %}
                        <div class="channel-logo-placeholder mb-3">
                            <i class="fas fa-tv fa-3x text-muted"></i>
                        </div>
                    {% endif %}
                    <h6>{{ form.instance.name }}</h6>
                    <p class="text-muted small">{{ form.instance.get_channel_type_display }}</p>
                    <div class="small">
                        <span class="badge bg-info">{{ form.instance.country.name }}</span>
                        <span class="badge bg-success">{{ form.instance.language }}</span>
                        <span class="badge bg-{% if form.instance.is_active %}success{% else %}secondary{% endif %}">
                            {% if form.instance.is_active %}Active{% else %}Inactive{% endif %}
                        </span>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    {% if form.instance.pk %}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Deletion
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the channel <strong>{{ form.instance.name }}</strong>?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        This action cannot be undone. All associated EPG entries, jingles, and zone configurations will also be deleted.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <a href="{% url 'channels:channel_delete' form.instance.pk %}" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Delete Channel
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}

{% block extra_footer_js %}
    <script>
        // Form validation
        document.getElementById('channelForm').addEventListener('submit', function(e) {
            const requiredFields = ['name', 'channel_type', 'country', 'language'];
            let isValid = true;
            
            requiredFields.forEach(function(fieldName) {
                const field = document.querySelector(`[name="${fieldName}"]`);
                if (field && !field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else if (field) {
                    field.classList.remove('is-invalid');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields.');
            }
        });

        // Logo preview
        document.querySelector('input[type="file"]').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Update preview if exists
                    const preview = document.querySelector('.img-thumbnail');
                    if (preview) {
                        preview.src = e.target.result;
                    }
                };
                reader.readAsDataURL(file);
            }
        });

        // Delete confirmation
        function confirmDelete() {
            var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // Auto-save draft (optional)
        let autoSaveTimer;
        const formInputs = document.querySelectorAll('#channelForm input, #channelForm select, #channelForm textarea');
        
        formInputs.forEach(function(input) {
            input.addEventListener('input', function() {
                clearTimeout(autoSaveTimer);
                autoSaveTimer = setTimeout(function() {
                    // Auto-save functionality can be implemented here
                    console.log('Auto-saving draft...');
                }, 2000);
            });
        });

        // Character counter for description
        const descriptionField = document.querySelector('textarea[name="description"]');
        if (descriptionField) {
            const maxLength = 500;
            const counter = document.createElement('div');
            counter.className = 'form-text text-end';
            descriptionField.parentNode.appendChild(counter);
            
            function updateCounter() {
                const remaining = maxLength - descriptionField.value.length;
                counter.textContent = `${remaining} characters remaining`;
                counter.className = remaining < 50 ? 'form-text text-end text-warning' : 'form-text text-end';
            }
            
            descriptionField.addEventListener('input', updateCounter);
            updateCounter();
        }
    </script>
{% endblock %}