{% extends 'base.html' %}

{% block title %}ZFBOX{% endblock %}

{% block style %}
.pagination {
    justify-content: flex-end; /* 右对齐 */
  }
  .page-item .page-link {
    padding: 0.25rem 0.5rem; /* 缩小按钮 */
    font-size: 0.875rem; /* 调整字体大小 */
  }
  .btn-group-sm > .btn, .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .btn-group-sm .btn {
      margin-right: 5px; /* 按钮之间的间距 */
    }
  .form-group-right h5 {
      text-align: right;
      margin-bottom: 0;
    }
  .table-container {
      min-height: 400px; /* 设置最小高度，可以根据需要调整 */
    }

    .video-area {
        width: 100%;
        position: relative;
        background-color: #000;
        border: 1px solid #ddd;
    }

    .video-area::before {
        content: "";
        display: block;
        padding-top: 75%; /* 4:3 ratio */
    }

    .video-area canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .schedule-table {
        width: 100%;
        table-layout: fixed;
    }
    .schedule-table th, .schedule-table td {
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid #dee2e6;
        padding: 8px;
    }
    .schedule-table td.allowed {
        background-color: white;
    }
    .schedule-table td.blocked {
        background-color: blue;
    }
    /* 缩小表格行高 */
    .table-sm th,
    .table-sm td {
        padding: 0.2rem; /* 调整这里的值来改变行高 */
    }
    canvas {
        border: 1px solid black;
    }
{% endblock %}

{% block content %}
<div class="container d-flex flex-column" >
    <div class="row  justify-content-center align-items-center mb-3">
        <div class="col-md-2 text-end"><label class="col-form-label form-label">所属区域:</label></div>
        <div class="col-md-3">
        <select id="areaSelect" class="form-select mr-2" aria-label="Default select example"></select></div>
        <div class="col-md-2 text-end"><label class="col-form-label form-label">通道名称:</label></div>
        <div class="col-md-3"><input id="channelNameInput" type="text" class="form-control"></div>
        <div class="col-md-2"><button id="searchButton" type="button" class="btn btn-primary">查 询</button></div>
    </div>

  <div class="mb-3">
    <button id="addChannelButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#channelModal">
      新增通道
    </button>
  </div>

  <!-- 新增通道模态框 -->
  <div class="modal fade" id="channelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="add_channel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="channelModalLabel">新增通道</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                      <label for="areaSelect_M"  class="form-label">所属区域:</label>
                      <select id="areaSelect_M" class="form-select" aria-label="D">
                        <!-- 数据动态填充 -->
                      </select>
                  </div>
                  <div class="form-group">
                      <label for="CNameInput" class="form-label">通道名称:</label>
                      <input type="text" class="form-control" id="CNameInput">
                  </div>
                  <div class="form-group">
                      <label for="RTSPInput" class="form-label">RTSP地址:</label>
                      <input type="text" class="form-control" id="RTSPInput">
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton">保存</button>
              </div>
          </div>
      </div>
  </div>

    <!-- 修改通道模态框 -->
  <div class="modal fade" id="ChangeC" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="change_c" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="ChangeChannel">修改通道</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                      <label for="areaSelect_CC" class="form-label">所属区域:</label>
                      <select id="areaSelect_CC" class="form-select" aria-label="D">
                        <!-- 数据动态填充 -->
                      </select>
                  </div>
                  <div class="form-group">
                      <label for="CNameInput_cc" class="form-label">通道名称:</label>
                      <input type="text" class="form-control" id="CNameInput_cc">
                  </div>
                  <div class="form-group">
                      <label for="RTSPInput_cc" class="form-label">RTSP地址:</label>
                      <input type="text" class="form-control" id="RTSPInput_cc">
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton_cc">保存</button>
              </div>
          </div>
      </div>
  </div>

    <!-- 算法管理模态框 -->
  <div class="modal fade" id="MX_M" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="m_mx" aria-hidden="true">
      <div class="modal-dialog modal-lg">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="MX_Title">配置算法</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="container-fluid">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <div class="video-area">
<!--                                  <img id="video-mx" alt="Video Stream" />-->
                                  <canvas id="backgroundCanvas" style="display: none;"></canvas>
                                  <canvas id="myCanvas"></canvas>
                              </div>

                          </div>
                          <div class="col-6 ms-auto">
                              <!-- 配置算法 -->
                              <div class="row align-items-center mb-2">
                                  <div class="col-3"><label for="model_select">配置算法:</label></div>
                                  <div class="col-9">
                                      <select id="model_select" class="form-select" aria-label="D">
                                        <!-- 数据动态填充 -->
                                      </select>
                                  </div>
                              </div>
                              <!-- 检测区域 -->
                              <div class="row align-items-center mb-2">
                                  <div class="col-3"><label for="model_select">检测区域:</label></div>
                                  <div class="col-9">
                                      <div class="row">
                                          <div class="col-6">
                                              <div class="form-check">
                                                  <input class="form-check-input" type="radio" name="jcqy"
                                                         id="qjjc" checked onclick="handleRadioClick(event)">
                                                  <label class="form-check-label" for="qjjc">全画面生效</label>
                                              </div>
                                          </div>
                                          <div class="col-6">
                                              <div class="form-check">
                                                  <input class="form-check-input" type="radio" name="jcqy"
                                                         id="zdjc" onclick="handleRadioClick(event)">
                                                  <label class="form-check-label" for="zdjc">指定区域</label>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="row">
                                          <button type="button" class="btn btn-primary" id="but_hzqy" style="--bs-btn-padding-y:.20rem; --bs-btn-font-size: .70rem;">
                                              绘制区域</button>
                                      </div>
                                  </div>
                              </div>
                              <!-- 检测阈值 -->
                              <div class="row align-items-center mb-2">
                                  <div class="col-3">
                                      <label>置信阈值:</label>
                                  </div>
                                  <div class="col-3">
                                      <input type="text" class="form-control" id="zxyz">
                                  </div>
                                  <div class="col-3">
                                      <label>IOU阈值:</label>
                                  </div>
                                  <div class="col-3">
                                      <input type="text" class="form-control" id="iouyz">
                                  </div>
                              </div>
                              <!-- 布放计划 -->
                              <div class="row form-group">
                                    <label for="11">布防计划:</label>
                                  <div id="11">
                                       <table class="schedule-table table table-sm table-bordered" style="font-size: 7px;">
                                        <thead>
                                        <tr>
                                            <th></th><th>00</th><th>01</th><th>02</th><th>03</th><th>04</th>
                                            <th>05</th><th>06</th><th>07</th><th>08</th><th>09</th><th>10</th>
                                            <th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th>
                                            <th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th>
                                            <th>23</th>
                                        </tr>
                                        </thead>
                                        <tbody id="schedule-body">
                                        <!-- 表格数据将由JavaScript动态填充 -->
                                        </tbody>
                                    </table>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" id="cancelButton_mx">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton_mx">保存</button>
              </div>
          </div>
      </div>
  </div>

  <div class="table-container">
    <table class="table">
      <thead  class="table-light">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">所属区域</th>
          <th scope="col">通道名称</th>
          <th scope="col">RTSP地址</th>
          <th scope="col">配置算法</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody  id="table-body" class="table-group-divider">
        <!-- 表格数据动态填充 -->
      </tbody>
    </table>
    <nav>
      <ul id="pagination" class="pagination">
        <!-- 分页控件将动态生成 -->
      </ul>
    </nav>
  </div>
</div>
{% endblock %}

{% block script %}
<script src="{{ url_for('main.static', filename='scripts/jquery-3.2.1.slim.min.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/popper.min.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/channel_manager.js') }}"></script>
{% endblock %}