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


{% load static %} 


{% block title %} Delete Jingle {% endblock %}


{% block extra_css %}{% endblock extra_css %}  


{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Delete Jingles </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);">Jingles</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}   
  
<table id="data-table321" class="table table-bordered text-nowrap mb-0">
    <thead class="border-top">
        <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">
                Action
            </th>
        </tr>  
    </thead>
    <tbody id="tbody_table321">
        {% for jingle in jingles %}
        <tr class="border-bottom" id="{{jingle.id_jingle}}"> 
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ jingle.channel.channel_name }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ jingle.name }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> <a href="{{jingle.get_file_url}}"> {{ jingle.channel.channel_name }}_{{ jingle.name }} </a></td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ jingle.modif_datetime }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center">{% if jingle.is_active %} Active {% else %} InActive {% endif %}</td>   
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center">
                <button  type="submit" onclick="deleteFunction('{{jingle.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> 
{% endblock content %}  


{% block extra_js %}
<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");
    var tableBody = document.getElementById("tbody_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_jingle) {
        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:"{% url 'channels:delete_jingle' %}" + id_jingle + "/",
                    data:{ 
                        id_jingle: id_jingle ,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success:function(){
                        Swal.fire(
                            'Deleted!',
                            'Your jingle has been deleted.',
                            'success'
                        )
                        window.setTimeout(function() {
                            location.reload();
                        }, 1200);
                    }
                });
            }
        })
    }

</script> 
{% endblock extra_js %}