{% extends "DAIManagementApp/base.html" %}
{% 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="#">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   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><!-- COL END -->
    </div>

</div>
</div>
<script type="text/javascript">

    $('#btn_channel').click(function(){
        //var url = $("#indexForm3").attr("send-channel-url");
        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;
        console.log(name_channel)
        var description_channel = document.getElementById("channel_desc").value;
        console.log(description_agency)

        $.ajax({
           url: "{% url '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 Agency has been Successfully Added.',
                    'success'
                )
                document.getElementById("channel_name").value="";
                description_agency = document.getElementById("channel_desc").value="";
           }
         });
    });

  </script>

{% endblock content %}