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

{% block title %}出車班表轉換{% endblock %}

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

  fieldset {
    padding-right: 10px;
  }

  .btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
  }

  .btn-primary a {
    color: white;
    text-decoration: none;
  }

  .btn-primary a:hover {
    color: white;
    text-decoration: none;
  }
</style>
{% endblock %}

{% block content %}

<div class="body">
  <div class="container">
    <h1 id="test" style="width: 100%; display: inline-block; position: relative; font-size: 30px; margin-bottom:10px">
      出車班表轉換</h1>
    <div class='upload'>
      <fieldset class="input-group-text"
        style="height:auto; width: 475px;;background-color: rgba(231, 227, 227, 0.844);margin-bottom:10px;">上傳檔案並轉換出車班表
        (檔案名格式:年月日 (yyyymmdd).xlsx)</fieldset>

      <div>
        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}

          <label class="btn btn-secondary">
            <input type="file" name="document">
          </label>

          <button type="submit" class="btn btn-primary" style="width:130px;height:40px;">上傳並轉檔</button>
          <!-- <button type="submit" class="btn btn-primary"><a href = "../uploadFAB">上傳FAB運輸資訊.xlsx</a></button> -->
          <br> </br>
        </form>

      </div>
    </div>
    <hr />

    <div>
      {% if resultFile %}
      <p class="btn btn-secondary">下載檔案:
        <button type="submit" class="btn btn-secondary"><a href="{% url 'download_file' fpath=fileLoc %}"
            id="button_download_rpt" style="color: white; text-decoration:none;width:130px;height:40px;"> {{ resultFile
            }} </a>
        </button>
        <!-- <p > 下載檔案FAB : <a href="/media/任務訂單/{{ resultFile }}"> {{ resultFile }} </a></p> -->
        </a>
      </p>
      {% endif %}
    </div>


    <div>
      <p><label for="exe_result" style="font-size:22px">班表轉換執行的訊息:</label></p>
      <textarea readonly id="exeresult" name="exeresult" rows="20" cols="80"
        style="color:rgb(49, 48, 48); border-style:solid" aria-readonly>
          {% if show %}
             {{show}}
          {% endif %}
        </textarea>
    </div>

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