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

{% set active_page = "people" %}

{% block pagehead %}
    <title>add people</title>
    <style>
        html {
        scroll-behavior: smooth;
        }
        .hidden {
            display: none;
        }

        .show {
            display: inline-block;
        }

        .active {
            width: 6rem;
            color: white;
            background-color: #34ce57;
        }

        .inactive {
            width: 6rem;
            color: white;
            background-color: #ff253a;
        }

        .all_inactive {
            display: none;
        }
    </style>
{% endblock %}

{% block content %}

<script type="text/javascript">
$(function() {
    $('#searchinput').on('input', function() {
       $("#results_table tbody").html("<tr></tr>");
       var result;
       var valEntered = $(searchinput).val();
       if (valEntered == '') valEntered='searchValueIsEmpty';
        $.getJSON( "/people/search/name/"+valEntered, function( data ) {
            for (var i = data.length - 1; i >= 0; i--) {
                result = data[i];
                
                $('#results_table tr:last').after("<tr>"+
                "<td>"+result['name']+"</td>"+
                "<td>"+result['date']+"</td>"+
                "<td>"+result['time']+"</td>"+
                "<td>"+result['active']+"</td>"+
                '<td class="delete_me" data-id="'+result['id']+'"><a href="/people/delete/'+result['id']+'" class="btn btn-danger" role="button"><i class="fas fa-trash-alt"></i></a>'+
                ' <a href="/people/edit/'+result['id']+'" class="btn btn-warning" role="button"><i class="fas fa-pencil-alt"></i></a></td>'+
                "</tr>");
            }
        })
    });
    $('.delete_me').click(function () {
        var id = $(this).data("id");
        var ask = confirm("Do you want to delete ?");
        if (ask == true) {
            window.location.replace("/people/delete/" + id, "_self");
            return false;
        } else {

        }
    });
    $('#isActive').change(function () {

        if ($('#isActive').is(':checked')) {
            $('.all_not').addClass('all_inactive');
        } else {
            $('.all_not').removeClass('all_inactive');
        }

    });
  });
</script>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-search"></i></span>
    </div>
    <input autocomplete="off" type="text" id="searchinput" class=" form-control" placeholder="Search by name" name="Search">
  </div>
  
  <div id="search_results">
  </div>
  <br><br>
  <table class="table" id="results_table">
      <thead>
      <tr>
          <th>Name</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Note</th>
          <th></th>
      </tr>
      </thead>
      <tbody>
      {% for person in people %}
          <tr>
              <td scope = "col">{{ person.name }}</td>
              <td scope = "col">{{ person.phone }}</td>
              <td scope = "col">{{ person.email }}</td>
              <td scope = "col">{{ person.notes }}</td>
              <td>
                  <button type="button" class="btn btn-secondary" data-toggle="modal"
                          data-target="#modal-{{ person.id }}">
                      ..more info
                  </button>
                  <a href="/people/edit/{{ person.id }}" style="text-decoration: none;">
                      <button data-name="{{ person.id }}" class="btn btn-warning" type=""><i
                              id='ico-{{ person.id }}'
                              class="fas fa-pencil-alt"></i></button>
                  </a>
                  <a href="#" style="text-decoration: none;">
                      <button id='del-{{ person.id }}' class="delete_me btn btn-danger" type=""><i
                              class="fas fa-trash-alt"></i></button>
                  </a>
              </td>
          </tr>
      {% endfor %}
      </tbody>
    </table>
{% endblock %}
