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

{% block title %}BIS - 產生司機超速統計表{% endblock %}


{% block style %}
<style>
  .myDiv {
    padding-bottom: 10px;
  }

  fieldset {
    padding-right: 10px;
  }

  textarea {
    padding-left: 2px;
    box-sizing: border-box;
    left: 0;
  }
</style>
{% endblock %}
{% block content %}
<div class="body">
  <form action="{% url 'gen_speeding_report' %}" method="post">
    {% csrf_token %}
    <div class="container">
      <h1 id="test" style="width: 100%; display: inline-block; position: relative; font-size: 30px;margin-bottom:15px">
        產生司機超速統計表</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>
        </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>
        </fieldset>
      </div>

      <div class="myDiv">
        <button id="button_gen_rpt" type="submit" class="btn btn-primary" data-bs-toggle="modal"
          data-bs-target="#processingModal">產生報表</button>
        {% if fileLoc %}
        <a href="{% url 'download_file' fpath=fileLoc %}" class="btn btn-secondary" id="button_download_rpt">下載報表</a>
        {% endif %}
      </div>
      <br>

      <div class="modal fade" id="processingModal" tabindex="-1" aria-labelledby="processingModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="processingModalLabel">處理中</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              正在產生報表，請稍候...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
            </div>
          </div>
        </div>
      </div>

      <div>
        <label for="exe_result" style="font-size:22px; font-weight:bold;">產生報表執行結果的訊息:</label><br>
        {% if request.method == 'POST' %}
        <textarea readonly id="exeresult" name="exeresult" rows="10" cols="100"
          style="color:rgb(49, 48, 48); border-style:solid">
{{data}}
檔案存在: {{dirName}}
檔案名:   {{fName}}
            </textarea>
        {% else %}
        <!-- <textarea readonly id="exeresult" name="exeresult" rows="20" cols="80" style="color:grey; border-style:solid" aria-readonly> -->
        <textarea readonly id="exeresult" name="exeresult" rows="10" cols="100" style="color:grey; border-style:solid"
          aria-readonly>這個區域將顯示程式執行訊息。</textarea>
        <!-- <textarea readonly id="exeresult" name="exeresult" rows="10" cols="100" style="color:rgb(49, 48, 48); border-style:solid" aria-readonly>This area will display the execution message.</textarea> -->
        {% endif %}
      </div>
    </div>
  </form>
</div>

{% endblock %}