{% extends 'base.html' %}

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

{% block style %}
        .btn-blue {
            background-color: #007bff;
            color: white;
        }
        .btn-blue:hover {
            background-color: #0056b3;
        }

    .table-container {
      min-height: 300px; /* 设置最小高度，可以根据需要调整 */
    }
    /* 缩小表格行高 */
    .table-sm th,
    .table-sm td {
        padding: 0.2rem; /* 调整这里的值来改变行高 */
    }
    .pagination {
        justify-content: flex-end; /* 右对齐 */
    }

    .section-title {
        position: relative;
        margin: 20px 0;
    }
    .section-title hr {
        margin: 0;
        border-color: #000; /* You can change the color of the line if needed */
    }
{% endblock %}

{% block content %}
<div class="container d-flex flex-column" >
    <!-- 模态框区域 -->
    <!-- 配置IP模态框-->
    <div class="modal fade" id="ipConfigModal" tabindex="-1" aria-labelledby="ipConfigModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ipConfigModalLabel">IP地址配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Tabs for Wired and Wireless IP -->
                    <ul class="nav nav-tabs" id="ipTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="wired-tab" data-bs-toggle="tab" data-bs-target="#wired" type="button" role="tab" aria-controls="wired" aria-selected="true">有线IP</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="wireless-tab" data-bs-toggle="tab" data-bs-target="#wireless" type="button" role="tab" aria-controls="wireless" aria-selected="false">无线IP</button>
                        </li>
                    </ul>
                    <!-- Tab content -->
                    <div class="tab-content mt-3" id="ipTabContent">
                        <!-- Wired IP Configuration -->
                        <div class="tab-pane fade show active" id="wired" role="tabpanel" aria-labelledby="wired-tab">
                            <div class="mb-3">
                                <div class="row">
                                      <div class="col-6">
                                          <div class="form-check">
                                              <input class="form-check-input" type="radio" name="ip_lan"
                                                     id="dhcp_lan" checked onclick="handleRadioClick_lan(event)">
                                              <label class="form-check-label" for="dhcp_lan">自动获取</label>
                                          </div>
                                      </div>
                                      <div class="col-6">
                                          <div class="form-check">
                                              <input class="form-check-input" type="radio" name="ip_lan"
                                                     id="static_lan" onclick="handleRadioClick_lan(event)">
                                              <label class="form-check-label" for="static_lan">静态IP</label>
                                          </div>
                                      </div>
                                  </div>
                            </div>
                            <div class="mb-3">
                                <label for="wiredIpAddress" class="form-label">有线IP地址</label>
                                <input type="text" class="form-control" id="wiredIpAddress" placeholder="例如: 192.168.1.2">
                            </div>
                            <div class="mb-3">
                                <label for="wiredSubnetMask" class="form-label">子网掩码</label>
                                <input type="text" class="form-control" id="wiredSubnetMask" placeholder="例如: 255.255.255.0">
                            </div>
                            <div class="mb-3">
                                <label for="wiredGateway" class="form-label">网关</label>
                                <input type="text" class="form-control" id="wiredGateway" placeholder="例如: 192.168.1.1">
                            </div>
                            <div>
                                <label for="wirelessGateway" class="form-label">DNS</label>
                                <input type="text" class="form-control" id="wiredDNS" placeholder="例如: 114.114.114.114">
                            </div>
                        </div>
                        <!-- Wireless IP Configuration -->
                        <div class="tab-pane fade" id="wireless" role="tabpanel" aria-labelledby="wireless-tab">
                            <div class="mb-2">
                                <label for="wirelessNetwork" class="form-label">选择无线网络</label>
                                <select class="form-select" id="wirelessNetwork">
                                    <!-- 数据动态填充 -->
                                </select>
                            </div>
                            <div class="mb-4">
                                <div class="row   justify-content-center align-items-center">
                                    <div class="col-2"><label for="wirelessSubnetMask" class="form-label">密码:</label></div>
                                    <div class="col-8"><input type="password" class="form-control" id="wifi_passwd"></div>
                                    <div class="col-2"><button type="button" class="btn btn-primary" id="connectWifi">连接</button></div>
                                </div>
                            </div>
                            <div class="mb-2">
                                <div class="row">
                                      <div class="col-6">
                                          <div class="form-check">
                                              <input class="form-check-input" type="radio" name="ip_wifi"
                                                     id="dhcp_wifi" checked onclick="handleRadioClick_wifi(event)">
                                              <label class="form-check-label" for="dhcp_wifi">自动获取</label>
                                          </div>
                                      </div>
                                      <div class="col-6">
                                          <div class="form-check">
                                              <input class="form-check-input" type="radio" name="ip_wifi"
                                                     id="static_wifi" onclick="handleRadioClick_wifi(event)">
                                              <label class="form-check-label" for="static_wifi">静态IP</label>
                                          </div>
                                      </div>
                                  </div>
                            </div>
                            <div class="mb-2">
                                <label for="wirelessIpAddress" class="form-label">无线IP地址</label>
                                <input type="text" class="form-control" id="wirelessIpAddress" placeholder="例如: 192.168.1.3">
                            </div>
                            <div class="mb-2">
                                <label for="wirelessSubnetMask" class="form-label">子网掩码</label>
                                <input type="text" class="form-control" id="wirelessSubnetMask" placeholder="例如: 255.255.255.0">
                            </div>
                            <div class="mb-2">
                                <label for="wirelessGateway" class="form-label">网关</label>
                                <input type="text" class="form-control" id="wirelessGateway" placeholder="例如: 192.168.1.1">
                            </div>
                            <div>
                                <label for="wirelessGateway" class="form-label">DNS</label>
                                <input type="text" class="form-control" id="wirelessDNS" placeholder="例如: 114.114.114.114">
                            </div>
                        </div>
                    </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="saveIPConfig">保存设置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改服务器IP模态框-->
    <div class="modal fade" id="ServerIPModal" tabindex="-1" aria-labelledby="ServerIPModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">服务器IP地址配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="serviceIP_model" class="form-label">服务器IP</label>
                        <input type="text" class="form-control" id="serviceIP_model" placeholder="例如: 127.0.0.1">
                    </div>
                    <div class="mb-3">
                        <label for="servicePort_model" class="form-label">端口号</label>
                        <input type="text" class="form-control" id="servicePort_model" placeholder="例如: 8085">
                    </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="saveServerIP">保存设置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增区域模态框-->
    <div class="modal fade" id="addAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="area_modal_title_id">新增区域</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="area_name" class="form-label">区域名称</label>
                        <input type="text" class="form-control" id="area_name">
                    </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="addArea">保存设置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改区域模态框-->
    <div class="modal fade" id="modifyAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改区域</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="area_name" class="form-label">区域名称</label>
                        <input type="text" class="form-control" id="area_name_modif">
                    </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="modifArea">保存设置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 系统信息区域 -->
    <div class="container mt-4">
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">系统版本号：</label></div>
            <div class="col-md-9"><p class="form-control-plaintext" id="system_version">1.0.0.1</p></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">升级包：</label></div>
            <div class="col-md-6"><input type="file" class="form-control" id="upgrade-system"></div>
            <div class="col-md-3"><button class="btn btn-blue" id="upsystem">升级</button></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">设备ID：</label></div>
            <div class="col-md-9"><p class="form-control-plaintext" id="dev_ID">1.0.0.1</p></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">设备IP：</label></div>
            <div class="col-md-6"><p class="form-control-plaintext" id="dev_IP">
                有线--192.168.3.45 WIFI--192.168.3.45 5G--192.168.3.45</p></div>
            <div class="col-md-3"><button class="btn btn-blue"  id="showIPConfig">配置</button></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">服务器IP：</label></div>
            <div class="col-md-3"><input type="text" class="form-control" id="service_ip"></div>
            <div class="col-md"><label class="col-form-label form-label">端口号：</label></div>
            <div class="col-md"><input type="text" class="form-control" id="service_port"></div>
            <div class="col-md-3"><button class="btn btn-blue" id="showServerIP">修改</button></div>
        </div>
    </div>
    <!-- 区域管理区域 -->
    <div class="section-title">
            <hr>
    </div>
    <div class="mb-3">
        <button id="addAreaButton" type="button" class="btn btn-primary">
          新增区域
        </button>
    </div>
    <div class="table-container">
    <table class="table">
      <thead  class="table-light">
        <tr>
          <th scope="col"  style="width: 20%;">ID</th>
          <th scope="col"  style="width: 50%;">区域名称</th>
          <th scope="col"  style="width: 30%;">操作</th>
        </tr>
      </thead>
      <tbody  id="table-body-area" class="table-group-divider">
        <!-- 表格数据动态填充 -->
      </tbody>
    </table>
    <nav>
      <ul id="pagination-area" 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/system_manager.js') }}"></script>
{% endblock %}