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

{% load static %} 

{% block title %} New TV Channel {% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> New Channel </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">New</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %} 
<div class="row">
    <div class="col-12 col-sm-12">
        <form method="post" enctype="multipart/form-data"> 
            {% csrf_token %} 
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Info About The Channel</h3>
                </div>
                <div class="card-body">
                    <div class="row row-sm">
                        <div class="col-lg">
                            <label class="form-label">Name 1</label>
                            <input id="channel_name" class="form-control mb-4" placeholder="Channel's Name"  type="text" required>
                        </div>
                        <div class="col-lg">
                            <label class="form-label">Language </label>
                            <input id="language" class="form-control mb-4" placeholder="Language"  type="text" required>
                        </div>
                        <div class="col-lg">
                            <label class="form-label">Genre</label>
                            <input id="genre" class="form-control mb-4" placeholder="genre"  type="text" required>
                        </div>

                        <div class="col-md-12">
                            <label class="form-label">Description (Optional)</label>
                            <textarea id="channel_desc" class="form-control" rows="3" spellcheck="false" data-gramm="false"></textarea>
                        </div>

                    </div>
                    <br><br>
                <!--   <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button> -->

                </div> 
            </div> 
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Info About The Channel</h3>
                </div>
                <div class="card-body">
                    <div class="row row-sm">
                        <div class="col-lg">
                            <label class="form-label">FTP Channel Name</label>
                            <input id="ftp" class="form-control mb-4" placeholder="FTP's Name"  type="text" required>
                        </div>
                        <div class="col-lg">
                            <label class="form-label">SFR Channel Name </label>
                            <input id="sfr_channel_name" class="form-control mb-4" placeholder="SFR Channel Name"  type="text" required>
                        </div>
                    </div>
                    <br><br>
                <button id="btn_channel" type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>

                </div>

            </div> 
        </form> 
    </div>
</div>  
{% endblock content %}

{% block extra_js %}
<script type="text/javascript">
    $('#btn_channel').click(function(){ 
        var name_channel = document.getElementById("channel_name").value;
        var language = document.getElementById("language").value;
        var genre = document.getElementById("genre").value;
        var ftp = document.getElementById("ftp").value;
        var sfr_channel_name = document.getElementById("sfr_channel_name").value; 
        var description_channel = document.getElementById("channel_desc").value; 

        $.ajax({
           url: "{% url 'channels:add_channels' %}",
           type: 'POST',
            data: {
                'channel_name': name_channel,
                'language': language,
                'genre':genre,
                'ftp' : ftp ,
                'sfr_channel_name': sfr_channel_name,
                'channel_desc' : description_channel,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (data) {
                console.log("Successfully");
                    Swal.fire(
                        'Added!',
                        'Your Channel has been Successfully Added.',
                        'success'
                    )
                    document.getElementById("channel_name").value="";
                    document.getElementById("channel_desc").value="";
            },
            error: function (data) {
                console.log("Error");
            }
         });
    });
</script> 
{% endblock extra_js %}