{% extends "../base.html" %}
{% load static %}
{% block content %}

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

    <div class="page-header">
        <div>
            <h1 class="page-title">Edit  Emissions</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">TV Emissions </a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit Emissions </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="emission-search" onkeyup="search()" placeholder="Emissions.." class="table-search-filters form-control">
    </th>
    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      <input type="text" id="channel-search" onkeyup="search()" placeholder="Channels.." class="table-search-filters form-control">
  </th>
  <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      <input type="text" id="startdate-search" onkeyup="search()" placeholder="Start Date." class="table-search-filters form-control">
  </th>
  <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      <input type="text" id="starttime-search" onkeyup="search()" placeholder="Start Time." class="table-search-filters form-control">
  </th>
  <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      <input type="text" id="enddate-search" onkeyup="search()" placeholder="End Date." class="table-search-filters form-control">
  </th>
  <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      <input type="text" id="endtime-search" onkeyup="search()" placeholder="End Time.." 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">Emissions</th>
      <th style="width:20%;"   class="bg-transparent border-bottom-0 text-cente">Channel</th>
      <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Start Date</th>
      <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Start Time</th>
      <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">End Date</th>
      <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">End Time</th>


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


                </tr>


  </table>


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

    </thead>
    <tbody>

        {% for emission in emissions %}
        <tr class="border-bottom">
            <form action="{% url 'edit_emission' id_emission=emission.id_emission %}" method="post">
                {% csrf_token %}
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.emission_name}} </td>
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.id_channel.channel_name }}</td>
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.start_date }}</td>
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.start_time }}</td>
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.end_date }}</td>
                <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ emission.end_time }}</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>
</div>
</div>

<script type="text/javascript">
var input_emission = document.getElementById("emission-search");
var input_channel = document.getElementById("channel-search");
var input_startdate = document.getElementById("startdate-search");
var input_starttime= document.getElementById("starttime-search");
var input_enddate = document.getElementById("enddate-search");
var input_endtime= document.getElementById("endtime-search");

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

function search() {
let filter_emission = input_emission.value.toUpperCase(); 
let filter_channel = input_channel.value.toUpperCase();
let filter_startdate = input_startdate.value.toUpperCase(); 
let filter_starttime = input_starttime.value.toUpperCase();
let filter_enddate = input_enddate.value.toUpperCase(); 
let filter_endtime = input_endtime.value.toUpperCase();

let tr = table.rows;
for (let i = 0; i < tr.length; i++) {
  td = tr[i].cells;
  td_emission = td[0].innerText;
  td_channel = td[1].innerText;
  td_startdate= td[2].innerText;
  td_starttime = td[3].innerText;
  td_enddate = td[4].innerText;
  td_endtime = td[5].innerText;
  if (td_emission.toUpperCase().indexOf(filter_emission) > -1 && td_channel.toUpperCase().indexOf(filter_channel) > -1 && td_startdate.toUpperCase().indexOf(filter_startdate) > -1 && td_starttime.toUpperCase().indexOf(filter_starttime) > -1  && td_enddate.toUpperCase().indexOf(filter_enddate) > -1 && td_endtime.toUpperCase().indexOf(filter_endtime) > -1) {
    tr[i].style.display = "";
  } else
    tr[i].style.display = "none";
}
}


</script>



{% endblock content %}