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

{% load static %} 

{% block title %} Edit Jingle {% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Edit Jingle </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">Edit</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="data-table321-body">
        {% for jingle in jingles %}
        <tr class="border-bottom">
            <form action="{% url 'channels:edit_jingle' id_jingle=jingle.id_jingle  %}" method="post">
                {% csrf_token %}
                <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" name="edit_btn" value="edit" class="btn btn-primary btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Edit">
                        <i>
                            <svg class="table-edit" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="16">
                                <path d="M0 0h24v24H0V0z" fill="none"/>
                                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z"/>
                            </svg>
                        </i>
                    </button>
                </td>
            </form>
        </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 table_body = document.getElementById("data-table321-body");

    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_body.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";
            }
        }
    }
</script>
{% endblock extra_js %}