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

{% set active_page = "appointments" %}

{% block pagehead %}
    <title>add appointment</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( "/appointment/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="/appointment/delete/'+result['id']+'" class="btn btn-danger" role="button"><i class="fas fa-trash-alt"></i></a>'+
                ' <a href="/appointment/edit/'+result['id']+'" class="btn btn-warning" role="button"><i class="fas fa-pencil-alt"></i></a></td>'+
                "</tr>");
                //$('#results_table tr:last').after('<tr><td></td><td></td><td></td><td></td><td></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("/appointment/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">
        <input autocomplete="off" type="text" id="searchinput" class=" form-control" placeholder="Search by name" name="Search">
        <div class="input-group-btn">
          <button id="searchbtn" class="btn btn-default" ><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>-->
  <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 scope="col">Meeting Name</th>
            <th scope="col">Date</th>
            <th scope="col">Time</th>
            <th scope="col">Active</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
            {% for appointment in appointments %}
            <tr class="{% if appointment.active == "inactive" %}all_not{% endif %}">
                <td>{{ appointment.name }}</td>
                <td>{{ appointment.date }}</td>
                <td>{{ appointment.time }}</td>
                <!--<td><a href="/settings/edit/{{appointment.name}}" class="btn btn-info" role="button"><i class="fas fa-pencil-alt"></i></a></td>-->
                <td>
                    <div style='display: inline-block; '>
                        <a style="text-decoration: none;">
                            <button id='delete' class="delete_me btn btn-danger" type="" name="{{ appointment.id }}"><i
                                    class="fas fa-trash-alt"></i></button>
                        </a>
                        &nbsp;
                        <a href="/appointment/edit/{{ appointment.id }}" style="text-decoration: none;">
                            <button data-name="{{ appointment.name }}" class="btn btn-warning"><i id='ico'
                                                                                                  class="fas fa-pencil-alt"></i>
                            </button>
                        </a>
                        <a href="/appointment/{% if appointment.active == "active" %}inactive{% else %}active{% endif %}/{{ appointment.id }}"
                           style="text-decoration: none; padding-left: 1rem">
                            <button id="active-btn" data-name="{{ appointment.name }}"
                                    class="btn {% if appointment.active == "active" %}active{% else %}inactive{% endif %}">{{ appointment.active }}
                            </button>
                        </a>

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