{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dispatch.css') }}">

    <div class="dispatch_filter">
        <form method="GET" action="{{ url_for('dispatch') }}" class="dispatch_search_form">
            <input type="text" name="search" class="dispatch_search" placeholder="输入搜索词" value="{{ request.args.get('search', '') }}">
            <select name="town" class="dispatch_search">
                <option value="">所有乡镇</option>
                {% for town in towns %}
                <option value="{{ town }}" {% if town == request.args.get('town') %}selected{% endif %}>{{ town }}</option>
                {% endfor %}
            </select>
            <select name="branch" class="dispatch_search">
                <option value="">所有支局</option>
                {% for branch in branches %}
                <option value="{{ branch }}" {% if branch == request.args.get('branch') %}selected{% endif %}>{{ branch }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="dispatch_btn dispatch_btn_primary">搜索</button>
        </form>

        <div class="dispatch_action_bar">
            <button type="button" class="dispatch_btn dispatch_btn_secondary_bj" onclick="handleSync('alarm')">同步报警盒</button>
            <button type="button" class="dispatch_btn dispatch_btn_secondary_sxt" onclick="handleSync('camera')">同步摄像头</button>
            <button type="button" class="dispatch_btn dispatch_btn_secondary_qx" id="selectAllBtn" onclick="handleSelectAll()">全选</button>
            <button type="button" class="dispatch_btn dispatch_btn_secondary_fx" onclick="handleInvertSelect()">反选</button>
            <button type="submit" form="dispatchForm" class="dispatch_btn dispatch_btn_primary">派单</button>
        </div>
    </div>
        
        <!-- 派单表单 -->
        <form id="dispatchForm" method="POST" action="{{ url_for('dispatch') }}">
            <!-- 设备表格 -->
            <table class="dispatch_table">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>设备编号</th>
                        <th>所属乡镇</th>
                        <th>所属支局</th>
                        <th>单位名称</th>
                        <th>项目类型</th>
                        <th>设备类型</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for device in devices.items %}
                    <tr>
                        <td><input type="checkbox" class="dispatch_checkbox" name="device_ids" value="{{ device.device_id }}"></td>
                        <td>{{ device.device_id }}</td>
                        <td>{{ device.town }}</td>
                        <td>{{ device.branch }}</td>
                        <td>{{ device.unit_name }}</td>
                        <td>{{ device.project_type }}</td>
                        <td>{{ device.device_type }}</td>
                        <td>
                            <span class="remark-display" onclick="editRemark('{{ device.device_id }}', this)">{{ device.remark or '点击添加备注' }}</span>
                            <input type="text" class="remark-input" style="display: none;" value="{{ device.remark or '' }}" 
                                   onblur="saveRemark('{{ device.device_id }}', this)" 
                                   onkeypress="if(event.key==='Enter') saveRemark('{{ device.device_id }}', this)">
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>
    </div>

    <!-- 分页导航部分 -->
    <div class="dispatch_pagination">
        {% if devices.has_prev %}
            <a href="{{ url_for('dispatch', page=devices.prev_num, search=request.args.get('search', ''), town=request.args.get('town', ''), branch=request.args.get('branch', ''), per_page=request.args.get('per_page', '50')) }}" class="dispatch_page_link">上一页</a>
        {% endif %}
        
        <span class="dispatch_page_info">第 {{ devices.page }} 页，共 {{ devices.pages }} 页</span>
        
        <select class="per_page_select" onchange="changePerPage(this.value)">
            <option value="10" {% if request.args.get('per_page', '50') == '10' %}selected{% endif %}>10条/页</option>
            <option value="20" {% if request.args.get('per_page', '50') == '20' %}selected{% endif %}>20条/页</option>
            <option value="50" {% if request.args.get('per_page', '50') == '50' %}selected{% endif %}>50条/页</option>
            <option value="100" {% if request.args.get('per_page', '50') == '100' %}selected{% endif %}>100条/页</option>
        </select>
        
        {% if devices.has_next %}
            <a href="{{ url_for('dispatch', page=devices.next_num, search=request.args.get('search', ''), town=request.args.get('town', ''), branch=request.args.get('branch', ''), per_page=request.args.get('per_page', '50')) }}" class="dispatch_page_link">下一页</a>
        {% endif %}
    </div>
</div>

<!-- 添加验证码模态框 -->
<div id="captchaModal" class="modal">
    <div class="modal-content">
        <h3>请输入验证码</h3>
        <img id="captchaImage" src="{{ url_for('static', filename='captcha.png') }}" alt="验证码">
        <input type="text" id="captchaInput" placeholder="请输入验证码">
        <div class="modal-buttons">
            <button onclick="submitCaptcha()">确定</button>
            <button onclick="closeCaptchaModal()">取消</button>
        </div>
    </div>
</div>

<!-- 添加一键报警确认模态框 -->
<div id="alarmConfirmModal" class="modal">
    <div class="modal-content">
        <h3>确认同步</h3>
        <p>确定要同步一键报警设备状态吗？</p>
        <div class="modal-buttons">
            <button onclick="confirmAlarmSync()" class="dispatch_btn dispatch_btn_primary">确定</button>
            <button onclick="closeAlarmConfirmModal()" class="dispatch_btn">取消</button>
        </div>
    </div>
</div>
<!-- 添加确认模态框 -->
<div id="confirmModal" class="modal">
    <div class="modal-content">
        <h3>数据更新完成</h3>
        <p>已更新 <span id="updatedCount">0</span> 个设备的状态</p>
        <p>是否要进行派单操作？</p>
        <div class="modal-buttons">
            <button onclick="handleDispatch(true)">是</button>
            <button onclick="cancelDispatch()">否</button>
        </div>
    </div>
</div>

<!-- 添加结果模态框 -->
<div id="resultModal" class="modal">
    <div class="modal-content">
        <h3>操作结果</h3>
        <p id="resultMessage"></p>
        <div class="modal-buttons">
            <button onclick="window.location.reload()">确定</button>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/dispatch.js') }}"></script>
{% endblock %}