{% extends 'base.html' %}
{% load static %}

{% block title %}查詢電子圍籬{% endblock %}

{% block style %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<!-- //新增內容_tony↓ -->
<!-- bootstrap js/css -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 新增跟base.html一樣的css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<!-- //新增內容_tony↓ -->
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- datable js/css -->
<script src="https://cdn.datatables.net/2.0.6/js/dataTables.js"></script>
<!-- adds this statement to make the background colors -->
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<!-- js -->
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>

<!-- <script type="text/javascript" 
        src="https://code.jquery.com/jquery-3.5.1.js"> 
</script>  -->

<script type="text/javascript">
  //呼叫JQuery
  $(document).ready(function () {
    $('#itrans').DataTable(
      {
        // Specify multiple classes to be used 
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

        // "info":false, //顯示0-0的結果
        // "searching": false,//搜尋
        dom: 'Blfrtip',  //按鈕
        buttons: [
          {
            extend: 'excelHtml5',
            text: '匯出 EXCEL',
            className: 'btn_excel',
            title: '電子圍籬搜尋結果',
          },
          {
            extend: 'csvHtml5',
            text: '匯出 CSV',
            className: 'btn_csv',
            title: '電子圍籬搜尋結果',
            bom: true,
          },
        ],

        //語言更改
        "language": {
          "processing": "處理中...",
          "loadingRecords": "載入中...",
          "lengthMenu": "顯示 _MENU_ 項結果",
          "zeroRecords": "沒有符合的結果",
          "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
          "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
          "infoFiltered": "(從 _MAX_ 項結果中過濾)",
          "infoPostFix": "",
          "search": "在表格中搜尋:",
          "paginate": {
            "first": "第一頁",
            "previous": "上一頁",
            "next": "下一頁",
            "last": "最後一頁"
          },
        },

        // For newer versions of Datatables (>= 1.10) use order option
        // to disable initial sorting for qguery DataTables.
        "order": []
      });

    $('.btn_excel').attr("class", "btn btn-success");
    $('.btn_csv').attr("class", "btn btn-success");

  });

</script>
<!-- //新增內容↑_tony -->


<style>
  .dataTable thead th {
    position: sticky;
    top: 0;
    background-color: #444;
    /* Optional background color for better visibility */
    color: aliceblue;
    z-index: 1;
    /* Ensure header stays on top during scrolling */
  }

  div.dataTables_length {
    margin-left: 20px;
    /* 調整數值移動距離 */
  }

  .myDiv {
    padding-bottom: 10px;
  }

  fieldset {
    padding-right: 10px;
  }
</style>
{% endblock %}
{% block content %}
<div class="body">
  <form action="" method="post">
    {% csrf_token %}
    <div class="container">
      <h1 id="test" style="width: 100%; display: inline-block; position: relative; font-size: 30px;">搜尋電子圍籬</h1>

      <div class="input-group mb-3">

        <fieldset>
          <span class="input-group-text" id="startdate" style="background-color: rgba(231, 227, 227, 0.844)">搜尋起始時間
            *</span>
          <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="startdate" class="sc"
            style="height:30px; width:150px;" value={{request.POST.startdate}}><br>
          <input type="time" name="starttime" value="00:00" min="00:00" max="23:59" style="height:30px;" />
        </fieldset>

        <fieldset>
          <span class="input-group-text" id="enddate" style="background-color: rgba(231, 227, 227, 0.844)">搜尋終止時間
            *</span>
          <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" name="enddate" class="sc"
            style="height:30px; width:150px;" value={{request.POST.enddate}}><br>
          <input type="time" name="endtime" value="23:59" min="00:00" max="23:59" style="height:30px;" /><br>
        </fieldset>

        <fieldset style="width:200px">
          <span class="input-group-text" id="ID" style="background-color: rgba(231, 227, 227, 0.844)">車牌號碼
            (部分或全部)</span>
          <input type="text" class="form-control" name="ID" aria-label="car_license" aria-describedby="basic-addon2"
            style="height:30px; border-width: 1px; border-color: #888888;" value={{request.POST.ID}}>
        </fieldset>

        <fieldset style="width:250px">
          <span class="input-group-text" id="name" style="background-color: rgba(231, 227, 227, 0.844)">電子圍籬區域名稱
            (部分或全部)</span>
          <input type="text" class="form-control" name="name" aria-label="efence_area_name"
            aria-describedby="basic-addon2" style="height:30px; border-width: 1px; border-color: #888888;"
            value={{request.POST.name}}>
        </fieldset>
      </div>

      <div class="myDiv">
        <!-- <div class="input-group-append"> -->
        <button type="submit" class="btn btn-primary" type="button">搜尋</button>
      </div>
    </div>

    {% if request.method == 'POST' %}
    <div class="container">
      <div style="max-height: 500px; overflow-y: auto;">
        {{text}}
        <table id="itrans" class="display nowrap">
          <!-- <table id="itrans" class="display nowrap, table table-bordered table-responsive"> -->
          <!-- <table id="itrans" class="display nowrap, table table-bordered table-responsive" style="width:100%"> -->
          <!-- <table id="itrans" class="table table-bordered table-responsive"> -->
          <thead class="table-dark">
            <tr>
              <th scope="col" class="col-md-3">車牌</th>
              <th scope="col" class="col-md-3">日期時間</th>
              <th scope="col" class="col-md-1">動作</th>
              <th scope="col" class="col-md-3">圍籬區域</th>
            </tr>
          </thead>
          {% endif %}

          <tbody>
            {% for i in value %}
            <tr>
              <td>{{i.0}}</td>
              <td>{{i.1}}</td>
              <td>{{i.2}}</td>
              <td>{{i.3}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>
{% endblock %}