{% extends "DAIManagementApp/base.html" %}
{% block content %}

<div class="app-content">
    <div class="side-app">

    <div class="page-header">
        <div>
            <h1 class="page-title">Delete Jingles</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"> Jingles </a></li>
                <li class="breadcrumb-item active" aria-current="page">Delete Jingles</li>
            </ol>
        </div>


    </div>


<table class="table table-bordered text-nowrap mb-0">
    <tr>
      <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
        <input type="text" id="channel-search" onkeyup="search()" placeholder="Channel.." class="table-search-filters form-control">
      </th>
      <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
        <input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters form-control">
    </th>
    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
        <input type="text" id="video-search" onkeyup="search()" placeholder="Vedio.." class="table-search-filters form-control">
    </th>
    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
        <input type="text" id="modif-search" onkeyup="search()" placeholder="Last Modification.." class="table-search-filters form-control">
    </th>
    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
        <input type="text" id="status-search" onkeyup="search()" placeholder="Status.." class="table-search-filters form-control">
    </th>

    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      &nbsp;&nbsp;&nbsp;&nbsp;

    </th>
    </tr>

    <tr>

                    <th style="width:20%;"   class="bg-transparent border-bottom-0 text-cente">channels</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Name</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Video</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Last Modification</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Status</th>


                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Action</th>


                </tr>

  <tr>
  </table>


  <table id="data-table321" class="table table-bordered text-nowrap mb-0">
    <thead class="border-top">

    </thead>
    <tbody>
        {% for n in jingles %}
        <tr class="border-bottom" id="{{n.id_jingle}}">

            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.id_channel.channel_name  }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.jingle_name}}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> <a href="/static/{{n.video_jingle}}"> {{ n.id_channel.channel_name  }}_{{ n.jingle_name}} </a></td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.modif_datetime }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center">
                {% if n.status %}
                    Active
                {% else %}
                    InActive
                {% endif %}</td>

            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center">
                <!-- <button  type="submit" onclick="delete_id('{{n.id_jingle}}','{{n.jingle_name}}','{{ n.id_channel.channel_name }}' )" name="edit_btn" value="delete" class="btn btn-danger btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Delete"><i><svg class="table-delete" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="16"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"/></svg></i></button> -->


                <button  type="submit" onclick="deleteFunction('{{n.id_jingle}}')" name="edit_btn" value="delete" class="btn btn-danger btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Delete"><i><svg class="table-delete" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="16"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"/></svg></i></button>

            </td>

        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
</div>


<script type="text/javascript">
var input_channel = document.getElementById("name-search");
var input_name = document.getElementById("channel-search");
var input_video = document.getElementById("video-search");
var input_day = document.getElementById("modif-search");
var input_status = document.getElementById("status-search");

var table = document.getElementById("data-table321");

function search() {
let filter_channel = input_channel.value.toUpperCase();
let filter_name = input_name.value.toUpperCase();
let filter_day = input_day.value.toUpperCase();
let filter_video = input_video.value.toUpperCase();
let filter_status = input_status.value.toUpperCase();

let tr = table.rows;
for (let i = 0; i < tr.length; i++) {
  td = tr[i].cells;
  td_channel = td[1].innerText;
  td_name = td[0].innerText;
  td_day = td[3].innerText;
  td_video = td[2].innerText;
  td_status = td[4].innerText;
  if ( td_channel.toUpperCase().indexOf(filter_channel) > -1 && td_name.toUpperCase().indexOf(filter_name) > -1 && td_day.toUpperCase().indexOf(filter_day) > -1 && td_status.toUpperCase().indexOf(filter_status) > -1  && td_video.toUpperCase().indexOf(filter_video) > -1) {
    tr[i].style.display = "";
  } else
    tr[i].style.display = "none";
}
}


// function delete_id(id,name,channel){
//     $('body').removeClass('timer-alert');
//     if (confirm("are you sure you want to delete the jingle "+ name + " on the channel "+ channel)) {
//
//         var redirect = '/DAIManagement/delete_jingle/';
//         $.redirectPost(redirect, {id_jingle:id });
//   }
// }

function deleteFunction(id) {
    event.preventDefault();
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
          console.log(id)
          $.ajax({
                method:'POST',
                url:"/DAIManagement/delete_jingle/"+id,
                data:{ id_jingle:id,csrfmiddlewaretoken: '{{ csrf_token }}'},
                success:function(){
                  Swal.fire(
                      'Deleted!',
                      'Your jingle has been deleted.',
                      'success'
                  )
                  window.setTimeout(function() {
                      location.reload();
                  }, 1200);
                }
            });
        }
    })
}

</script>



{% endblock content %}