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

{% load static %}

{% block title %} Channels | NEW CHANNEL {% endblock %}

{% block stylesheet %}
<style>
    .avatar-upload {
        position: relative;
        max-width: 170px;
        margin: 20px auto;
    }
    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
    }
    .avatar-upload .avatar-edit input {
        display: none;
    }
    .avatar-upload .avatar-edit input + label {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-bottom: 0;
        border-radius: 100%;
        background: #FFFFFF;
        border: 1px solid transparent;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-weight: normal;
        transition: all 0.2s ease-in-out;
    }
    .avatar-upload .avatar-edit input + label:hover {
        background: #f1f1f1;
        border-color: #d6d6d6;
    } 
    .avatar-upload .avatar-preview {
        width: 150px;
        height: 150px;
        position: relative;
        border-radius: 100%;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }
    .avatar-upload .avatar-preview > img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    } 
</style>
{% endblock stylesheet %}

{% block body_attribute %} class="app sidebar-mini {{request.session.theme_mode}}" {% endblock body_attribute %}

{% block content %}
<!--  -->
<div class="app-content">
    <!--  -->
    <div class="side-app">
        <!--  -->
        <div class="page-header">
            <div> 
                <h1 class="page-title">New Channel</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void()"> TV Channels </a></li>
                    <li class="breadcrumb-item active" aria-current="page"> New Channel </li>
                </ol> 
            </div> 
        </div>
        <!--  -->
        <div class="row">
            <div class="col-12 col-sm-12">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <!-- Basic Channel Information -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"> The Channel Information </h3>
                        </div>
                        <div class="card-body">
                            <div class="row row-sm">
                                <div class="form-group col-lg-2 mb-0">  
                                    <div class="avatar-upload">
                                        <div class="avatar-edit">
                                            <input type='file' id="channel_image" accept=".png, .jpg, .jpeg" onchange="previewFile()"/>
                                            <label for="imageUpload"></label>
                                        </div>
                                        <div class="avatar-preview">
                                            <img id="imagePreview" src="{% static 'channels/default_logo.png'%}"> 
                                        </div>
                                    </div>
                                </div> 
                                <div class="form-group col-lg-10"> 
                                    <div class="row row-sm">
                                        <div class="form-group col-lg mb-0">
                                            <label class="form-label" for="channel_name">Name:</label>
                                            <input class="form-control mb-2" type="text" name="channel_name" id="channel_name" placeholder="Channel's Name" required>
                                        </div>
                                    </div> 
                                    <div class="row row-sm">
                                        <div class="form-group col-lg-6 mb-0">
                                            <label class="form-label" for="channel_genre">Genre:</label>
                                            <div id="genre_input_wrapper">
                                                <select class="form-control mb-1" name="channel_genre" id="channel_genre" >
                                                    <option value="" disabled selected>Select Genre</option>
                                                    {% for genre in genres %}
                                                        <option value="{{ genre.id }}">{{ genre }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input class="form-control mb-0" type="text" name="new_genre" id="new_genre" placeholder="Enter New Genre" style="display: none;" >
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="toggle_genre_input">Add New Genre</button>
                                        </div> 
                                        <div class="form-group col-lg-6 mb-0">
                                            <label class="form-label" for="channel_language">Language:</label>
                                            <div id="language_input_wrapper">
                                                <select class="form-control mb-1" name="channel_language" id="channel_language" >
                                                    <option value="" disabled selected>Select Language</option>
                                                    {% for language in languages %}
                                                        <option value="{{ language.id }}">{{ language }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input class="form-control mb-0" type="text" name="new_language" id="new_language" placeholder="Enter New Language" style="display: none;">
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="toggle_language_input">Add New Language</button>
                                        </div>
                                    </div>  
                                </div>
                            </div>
                            <div class="row row-sm">
                                <div class="form-group col-lg-12 mb-0"> 
                                    <label class="form-label" for="channel_description">Description (Optional)</label>
                                    <textarea id="channel_description" class="form-control" rows="3" spellcheck="false" data-gramm="false"></textarea> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Additional Channel Information -->
                    <div class="card"> 
                        <div class="card-header">
                            <h3 class="card-title"> Additional Channel Information </h3>
                        </div>
                        <div class="card-body">
                            <div class="row row-sm">
                                <div class="form-group col-lg-6 mb-0"> 
                                    <label class="form-label" for="channel_owner">Owner:</label>
                                    <input class="form-control mb-2" type="text" name="channel_owner" id="channel_owner" placeholder="Channel's Owner"/> 
                                </div>
                                <div class="form-group col-lg-6 mb-0"> 
                                    <label class="form-label" for="channel_launch_date">Owner:</label>
                                    <input class="form-control mb-2" type="date" name="channel_launch_date" id="channel_launch_date" placeholder="Channel's Launch Date"/>  
                                </div>
                                <div class="form-group col-lg-6 mb-0"> 
                                    <label class="form-label" for="channel_website">Website:</label>
                                    <input class="form-control mb-2" type="url" name="channel_website" id="channel_website" placeholder="Channel's Website"/>   
                                </div>
                                <div class="form-group col-lg-6 mb-0"> 
                                    <label class="form-label" for="channel_headquarters_location">Source:</label>
                                    <input class="form-control mb-2" type="url" name="channel_headquarters_location" id="channel_headquarters_location" placeholder="Channel's Source"/>  
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Networks Channel Information --> 
                    <div class="card"> 
                        <div class="card-header">
                            <h3 class="card-title"> Networks Channel Information </h3>
                            <button  style="width:100px; text-align:center;" name="addNetworkButton" id="addNetworkButton">Add Network</button>
                        </div>
                        <div class="card-body"> 
                            <div id="networkCards"> </div> 
                            
                        </div>
                    </div>
                    <!-- Button Submit -->
                    <div class="card">
                        <div class="card-body d-flex justify-content-center" >
                            <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascript %}
<script type="text/javascript"> 
    function previewFile() {
        var preview = document.querySelector('#imagePreview');
        var file = document.querySelector('#channel_image').files[0];
        var reader = new FileReader(); 
        reader.addEventListener("load", function () { preview.src = reader.result; }, false); 
        if (file) { reader.readAsDataURL(file); }
    }  
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const toggleGenreInput = document.querySelector('#toggle_genre_input');
        const genreSelect = document.querySelector('#channel_genre');
        const newGenreInput = document.querySelector('#new_genre');
        const genreInputWrapper = document.querySelector('#genre_input_wrapper');

        toggleGenreInput.addEventListener('click', function() {
            if (genreSelect.style.display === 'none') {
                genreSelect.style.display = 'block';
                newGenreInput.style.display = 'none';
                toggleGenreInput.innerText = 'Add New Genre';
            } else {
                genreSelect.style.display = 'none';
                newGenreInput.style.display = 'block';
                toggleGenreInput.innerText = 'Select Existing Genre';
            }
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const toggleLanguageInput = document.querySelector('#toggle_language_input');
        const languageSelect = document.querySelector('#channel_language');
        const newLanguageInput = document.querySelector('#new_language');
        const languageInputWrapper = document.querySelector('#language_input_wrapper');

        toggleLanguageInput.addEventListener('click', function() {
            if (languageSelect.style.display === 'none') {
                languageSelect.style.display = 'block';
                newLanguageInput.style.display = 'none';
                toggleLanguageInput.innerText = 'Add New Language';
            } else {
                languageSelect.style.display = 'none';
                newLanguageInput.style.display = 'block';
                toggleLanguageInput.innerText = 'Select Existing Language';
            }
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const networkCardsContainer = document.querySelector('#networkCards');
        const addNetworkButton = document.querySelector('#addNetworkButton');

        let networkCount = 0;

        // Function to add a new network card
        function addNetworkCard() {
            const card = document.createElement('div');
            card.className = 'card';
            card.id = `networkCard_${networkCount}`;
            networkCount++;
            
            card.innerHTML = ` 
                <div class="card-body">
                    <div class="row row-sm align-items-center">
                        <div class="col">
                            <label for="networkName_${card.id}" class="form-label mb-0">Network Name:</label>
                            <input type="text" id="networkName_${card.id}" name="networkName" class="form-control">
                        </div>
                        <div class="col">
                            <label for="networkchannelName_${card.id}" class="form-label mb-0">Channel Name:</label>
                            <input type="text" id="networkchannelName_${card.id}" name="networkchannelName" class="form-control">
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-danger remove-network-button">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;



            // Event listener for remove button
            const removeButton = card.querySelector('.remove-network-button');
            removeButton.addEventListener('click', function(event) {
                event.preventDefault(); // Prevent default behavior
                networkCardsContainer.removeChild(card);
            });

            networkCardsContainer.appendChild(card);
        }

        // Event listener for add network button
        addNetworkButton.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default behavior
            addNetworkCard();
        });
    });
</script>

{% endblock javascript %}