{% include 'base.html' %}

<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 -->
  
{% block content %}

<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>

<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 %}