{% extends 'base.html' %}
{% load static %}

{% block title %}{% if object %}Edit Channel{% else %}Add Channel{% endif %} - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Select2 css -->
<link href="{% static 'plugins/select2/select2.min.css' %}" rel="stylesheet" />

<!-- INTERNAL File Upload css -->
<link href="{% static 'plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />

<!-- INTERNAL Sumoselect css -->
<link rel="stylesheet" href="{% static 'plugins/sumoselect/sumoselect.css' %}">
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{% if object %}Edit Channel{% else %}Add New Channel{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">TV Channels</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% if object %}Edit{% else %}Add{% endif %}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channel Information</h3>
            </div>
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Channel Name <span class="text-red">*</span></label>
                                <input type="text" class="form-control" name="name" value="{{ form.name.value|default:'' }}" placeholder="Enter channel name" required>
                                {% if form.name.errors %}
                                    <div class="text-danger">{{ form.name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Status</label>
                                <select class="form-control select2" name="is_active">
                                    <option value="true" {% if form.is_active.value %}selected{% endif %}>Active</option>
                                    <option value="false" {% if not form.is_active.value %}selected{% endif %}>Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="4" placeholder="Enter channel description">{{ form.description.value|default:'' }}</textarea>
                                {% if form.description.errors %}
                                    <div class="text-danger">{{ form.description.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Stream URL</label>
                                <input type="url" class="form-control" name="stream_url" value="{{ form.stream_url.value|default:'' }}" placeholder="https://example.com/stream">
                                {% if form.stream_url.errors %}
                                    <div class="text-danger">{{ form.stream_url.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Backup Stream URL</label>
                                <input type="url" class="form-control" name="backup_stream_url" value="{{ form.backup_stream_url.value|default:'' }}" placeholder="https://example.com/backup-stream">
                                {% if form.backup_stream_url.errors %}
                                    <div class="text-danger">{{ form.backup_stream_url.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-4 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Category</label>
                                <select class="form-control select2" name="category">
                                    <option value="">Select Category</option>
                                    <option value="news" {% if form.category.value == 'news' %}selected{% endif %}>News</option>
                                    <option value="sports" {% if form.category.value == 'sports' %}selected{% endif %}>Sports</option>
                                    <option value="entertainment" {% if form.category.value == 'entertainment' %}selected{% endif %}>Entertainment</option>
                                    <option value="music" {% if form.category.value == 'music' %}selected{% endif %}>Music</option>
                                    <option value="movies" {% if form.category.value == 'movies' %}selected{% endif %}>Movies</option>
                                    <option value="documentary" {% if form.category.value == 'documentary' %}selected{% endif %}>Documentary</option>
                                    <option value="kids" {% if form.category.value == 'kids' %}selected{% endif %}>Kids</option>
                                    <option value="lifestyle" {% if form.category.value == 'lifestyle' %}selected{% endif %}>Lifestyle</option>
                                    <option value="other" {% if form.category.value == 'other' %}selected{% endif %}>Other</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Language</label>
                                <select class="form-control select2" name="language">
                                    <option value="">Select Language</option>
                                    <option value="en" {% if form.language.value == 'en' %}selected{% endif %}>English</option>
                                    <option value="ar" {% if form.language.value == 'ar' %}selected{% endif %}>Arabic</option>
                                    <option value="fr" {% if form.language.value == 'fr' %}selected{% endif %}>French</option>
                                    <option value="es" {% if form.language.value == 'es' %}selected{% endif %}>Spanish</option>
                                    <option value="de" {% if form.language.value == 'de' %}selected{% endif %}>German</option>
                                    <option value="it" {% if form.language.value == 'it' %}selected{% endif %}>Italian</option>
                                    <option value="pt" {% if form.language.value == 'pt' %}selected{% endif %}>Portuguese</option>
                                    <option value="ru" {% if form.language.value == 'ru' %}selected{% endif %}>Russian</option>
                                    <option value="zh" {% if form.language.value == 'zh' %}selected{% endif %}>Chinese</option>
                                    <option value="ja" {% if form.language.value == 'ja' %}selected{% endif %}>Japanese</option>
                                    <option value="ko" {% if form.language.value == 'ko' %}selected{% endif %}>Korean</option>
                                    <option value="hi" {% if form.language.value == 'hi' %}selected{% endif %}>Hindi</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Country</label>
                                <input type="text" class="form-control" name="country" value="{{ form.country.value|default:'' }}" placeholder="Enter country">
                                {% if form.country.errors %}
                                    <div class="text-danger">{{ form.country.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Logo Upload</label>
                                <input type="file" class="dropify" name="logo" data-height="200" accept="image/*">
                                {% if object and object.logo %}
                                    <small class="text-muted">Current logo: <a href="{{ object.logo.url }}" target="_blank">View</a></small>
                                {% endif %}
                                {% if form.logo.errors %}
                                    <div class="text-danger">{{ form.logo.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Additional Settings</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="allow_recording" {% if form.allow_recording.value %}checked{% endif %}>
                                    <label class="form-check-label">Allow Recording</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="enable_ads" {% if form.enable_ads.value %}checked{% endif %}>
                                    <label class="form-check-label">Enable Advertisements</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_premium" {% if form.is_premium.value %}checked{% endif %}>
                                    <label class="form-check-label">Premium Channel</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                    {% endif %}
                </div>
                <div class="card-footer text-end">
                    <a href="{% url 'channels:channel_list' %}" class="btn btn-secondary me-3">Cancel</a>
                    <button type="submit" class="btn btn-primary">{% if object %}Update Channel{% else %}Create Channel{% endif %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- ROW-1 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Select2 js -->
<script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>
<script src="{% static 'js/select2.js' %}"></script>

<!-- INTERNAL File Upload js -->
<script src="{% static 'plugins/fileuploads/js/fileupload.js' %}"></script>
<script src="{% static 'plugins/fileuploads/js/file-upload.js' %}"></script>

<!-- INTERNAL Sumoselect js-->
<script src="{% static 'plugins/sumoselect/jquery.sumoselect.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
    
    // Initialize Dropify
    $('.dropify').dropify({
        messages: {
            'default': 'Drag and drop a file here or click',
            'replace': 'Drag and drop or click to replace',
            'remove':  'Remove',
            'error':   'Ooops, something wrong happened.'
        }
    });
});
</script>
{% endblock %}