{% extends 'base.html' %}
{% load static %}
{% block title %}Search{% endblock %}
{% block style %}
.body
{
  position: relative;
  top:80px;
  background-color: white;
  height: 45%;
  width: 100%;
  margin:0px auto;
}
.content
{
}
.label-content
{
  margin: 40px;
  display: flex;
}
.input-content
{
}
.stable
{
  top: -20px;
  position: relative;
  overflow: scroll;
  height: 125%;
}
table {
  width: 100%;
}
select
{
  margin: 10px;
  height: 30px;
  width: 200px;
}
input
{
  margin: 10px;
}
label
{
  display:inline-block;
  margin: 10px 0px;
  font-weight: 700;
}
.image{
  margin: 0 30px;
}
#myDiv #myImage{
  display: ;
}
table, th, td {
  text-align: center;

}
th {
        background-color: #DDD;
        font-weight: 400;
}
{% endblock %}
{% block content %}
<div class="body">
<form action="" method="post">
            {% csrf_token %}
      <div class="content">
            <h1 id="test" style= "padding-left: 40px; width: 100%; display: inline-block; position: relative; font-size: 30px;">搜尋司機資料</h1>
            <div class="label-content">
            <label for="start-date">起始日期:</label><br>
            <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="start-date"  class="sc" value= {{ph.0}}><br>
            <label for="end-date">結束日期:</label><br>
            <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="end-date"  class="sc" value= {{ ph.1 }}><br>
            <label for="name">姓名:</label><br>
            <input type="text" name="name"  class="sc"  value= {{request.POST.name}}><br>
            <label for="ID">ID:</label><br>
            <input type="text" name="ID" list= class="sc"  value= {{ph.3}}><br>
            <label for="sort">Sort:</label><br>
            <select name= "sort">
                <option value= "姓名" >姓名</option>
                <option value= "所屬區域"  >所屬區域</option>
                <option value= "聘用狀態" >聘用狀態</option>
                <option value= "身分" >身分</option>
                <option value= "工號">工號</option>
                <option value= "變動生效日期" >變動生效日期</option>
                <option value= "資料修改人員" >資料修改人員</option>
            </select>
            <br><br>
                <input type="submit" class="button" value="Search">
            </div>
            <div class="image">
                 <input type='button' name="chart" onclick="Showimage();" value="查詢搜尋規則">
                 <div id="myDiv" style=" display: none;">
                    <img id="myImage" src="{% static 'search_chart.jpg' %}" style="width:600px; height:200px;">
                 </div>
            </div>
            </div>
            <br><br>
      <script>
                 function Showimage() {
                     const x = document.getElementById('myDiv');
                     if (x.style.display === "none") {
                             x.style.display = "block";}
                     else {
                             x.style.display = "none";
                          }
                 }
      </script>
             {% if request.method == 'POST' %}
            <div class="stable">
             {{text}}
             <table  border="1" cellpadding="2" cellspacing="2" width="600 px">
             <tr class="top" style="vertical-align: top;">
             <th>姓名</th>
             <th>所屬區域</tj>
             <th>聘用狀態</th>
             <th>身分</th>
             <th>工號</th>
             <th>變動生效日期</th>
             <th>資料修改人員</th>
             <th>資料修改時間</th>
             <th>資料修改內容</th>
             </tr>
             {% endif %}
             {% if var1 == 1 %}
             <tr>
             {% for i in var %}
             <td>{{i}}</td>
             {% endfor %}
             </td>
             {% else %}
             {% for i in var %}
             <tr>
             <td>{{i.0}}</td>
             <td>{{i.1}}</td>
             <td>{{i.2}}</td>
             <td>{{i.3}}</td>
             <td>{{i.4}}</td>
             <td>{{i.5}}</td>
             <td>{{i.6}}</td>
             <td>{{i.7}}</td>
             <td>{{i.8}}</td>
             </tr>
             {% endfor %}
             {% endif %}
             </table>
            </div>

</form>
</div>
{% endblock %}