{% include 'base.html' %}

<title>BIS</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

{% block content %}

<style>
.myDiv {
  padding-bottom: 10px;
}
  
fieldset {
  padding-right: 10px;
}

textarea {
  padding-left: 2px;
  box-sizing: border-box;
  left: 0;
}
</style>

<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;">產生司機超速統計表</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">產生報表執行結果的訊息:</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 %}