{% extends "layout.html" %}
{% block main %}
<h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
{% for part, stores in stores_data.items() %}
<div>
  <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
    {% if part == "north" %}
      <h2>北部門市</h2>
    {% elif part == "central" %}
      <h2>中部門市</h2>
    {% elif part == "south" %}
      <h2>南部門市</h2>
    {% elif part == "east" %}
      <h2>東部門市</h2>
    {% endif %}
    <table id="store_locations_table" class="table table__content mb-0" cellspacing="0" width="60%">
      <thead>
        <tr>
          <th class="table__head">數量</th>
          <th class="table__head">區域</th>
          <th class="table__head">門市</th>
          <th class="table__head">營業時間</th>
          <th class="table__head">門市電話</th>
          <th class="table__head">門市地點</th>
          <th class="table__head">停車資訊</th>
          <th class="table__head">輪播照片</th>
          <th style="text-align:center;width:100px;">
            <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal">
              <i class="fas fa-plus"></i>
            </button>
          </th>
        </tr>
      </thead>
      {% for store in stores %}
        {% set store_idx = loop.index %}
        <tbody>
          <tr>
            <td class="table__data">{{ loop.index }}</td>
            <td class="table__data">{{ store.title }}</td>
            <td class="table__data">{{ store.store }}</td>
            <td class="table__data">{{ store.hour }}</td>
            <td class="table__data">{{ store.phone }}</td>
            <td class="table__data">{{ store.location }}</td>
            <td class="table__data">{{ store.parking }}</td>
            <td class="table__data">
              {% for img_src in store.imgs %}
                <img src="{{ bhouse_server }}/{{ img_src }}" width="80px" height="50px">
                <input name="img-{{ store_idx }}" type='hidden' value="{{ img_src }}">
                <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('store_locations.remove_img', type=store.type, src=img_src) }}">
                  移除
                </a>
              {% endfor %} 
            </td>
            <td>
              <div class="d-flex justify-content-center">
                <button type="button" class="btn__edit  m-2">
                  <i class="fas fa-edit"></i>
                </button>
                <form action="{{ url_for('store_locations.remove', url=store.url) }}" method="POST">
                  <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
                </form>
                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      <div class="modal-header border-0">
                        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
                        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
                          <span class="modal__close__back">
                            <span aria-hidden="true">&times;</span>
                          </span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <input name="type" type="hidden" value="{{ store.type }}" readonly>
                        <label for="title">區域</label>
                        <input name="title" class="form-control form-control-lg" value="{{ store.title }}">
                        <label for="store">門市</label>
                        <input name="store" class="form-control form-control-lg" value="{{ store.store }}">
                        <label for="hour">營業時間</label>
                        <input name="hour" class="form-control form-control-lg" value="{{ store.hour }}">
                        <label for="phone">門市電話</label>
                        <input name="phone" class="form-control form-control-lg" value="{{ store.phone }}">
                        <label for="location">門市地點</label>
                        <input name="location" class="form-control form-control-lg" value="{{ store.location }}">
                        <label for="parking">停車資訊</label>
                        <input name="parking" class="form-control form-control-lg" value="{{ store.parking }}">
                        <label for="image">輪播照片上傳</label>
                        <input type="file" name="image-{{ store_idx }}" accept="image/*" multiple>
                        <div class="modal-footer pb-0 border-0">
                          <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
                          <input class="btn btn__submitadd" type="submit" value="完成">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      {% endfor %}
    </table>
  </form>
</div>
{% endfor %}
<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
          <span class="modal__close__back">
            <span aria-hidden="true">&times;</span>
          </span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
          <label for="type">分佈</label>
          <br/><select id="type" name="type">
            <option value="store_north">北部</option>
            <option value="store_central">中部</option>
            <option value="store_south">南部</option>
            <option value="store_east">東部</option>
          </select> <br/>
          <label for="title">區域</label>
          <input name="title" class="form-control form-control-lg">
          <label for="store">門市</label>
          <input name="store" class="form-control form-control-lg">
          <label for="hour">營業時間</label>
          <input name="hour" class="form-control form-control-lg">
          <label for="phone">門市電話</label>
          <input name="phone" class="form-control form-control-lg">
          <label for="location">門市地點</label>
          <input name="location" class="form-control form-control-lg">
          <label for="parking">停車資訊</label>
          <input name="parking" class="form-control form-control-lg">
          <label for="image">輪播照片上傳</label>
          <input type="file" name="image-1" accept="image/*" multiple>
          <div class="modal-footer pb-0 border-0">
            <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
            <input class="btn btn__submitadd" type="submit" value="完成">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
  for (const tbody of document.querySelectorAll('tbody')) {
    const btn = tbody.querySelector(".m-2")
    btn.onclick = function() {
      $(tbody).find('#updateModal').modal("toggle");
    }
  }
</script>
{% endblock main %}
