<%+header%>

    <script>
        function checQuectelResult() {
            var mode = document.getElementById('mode').innerHTML;
            var operator = document.getElementById('operator').innerHTML;

            if (mode !== "wait for ctrl...") {
                if (operator === "") {
                    setTimeout(function() {
                        reloadPage();
                        document.getElementById('quectelscanStatus').style.display = 'block'; // 显示扫描状态元素
                    }, 10000);
                } else {
                    document.getElementById('quectelscanStatus').style.display = 'none'; // 隐藏扫描状态元素
                    // Do nothing, no further action needed
                }
            } else {
                document.getElementById('quectelscanStatus').style.display = 'none'; // 隐藏扫描状态元素
                // Do nothing, no further action needed
            }
        }

        function reloadPage() {
            window.location.reload();
        }

        function lockit() {
            if (confirm("功能正在开发中")) {
                // 用户点击“确定”时的操作
                console.log("用户选择了确定");
            } else {
                // 用户点击“取消”时的操作
                console.log("用户选择了取消");
            }
        }

        function startScanQuectel() {
            reloadPage();
            document.getElementById('quectelscanStatus').innerHTML = '正在扫描中...';
            document.getElementById('quectelscanStatus').style.display = 'block'; // 显示扫描状态元素
            setTimeout(function() {
                stopScan();
            }, 300000); // 5 minutes timeout
        }

        function stopScanQuectel() {
            document.getElementById('quectelscanStatus').innerHTML = '扫描超时，请点击执行扫描动作按钮进行重试。';
            document.getElementById('quectelscanStatus').style.display = 'none'; // 隐藏扫描状态元素
            clearInterval(refreshInterval); // Stop refreshing the page
        }


        function submitForm(event) {
            event.preventDefault(); // 阻止默认提交

            if (confirm('你确定吗？')) {
                const form = document.getElementById('switchForm');
                const formData = new FormData(form);

                fetch(form.action, {
                        method: form.method,
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === "success") {
                            startScanQuectel();
                        } else {
                            console.error("错误：" + data.message); // 显示错误提示
                        }
                    })
                    .catch((error) => {
                        console.error('提交失败:', error);
                    });
            }
        }

        window.addEventListener('DOMContentLoaded', checQuectelResult);
    </script>

    <style>
        .cbi-map .large-button {
            width: 100%;
            background-color: #5e72e4;
            color: #5f6368;
            border: none;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .cbi-map .scan-status {
            color: rgb(12, 12, 12);
        }
        
        @keyframes scanning {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.2;
            }
            100% {
                opacity: 1;
            }
        }
        
        .scanning {
            animation: scanning 1s infinite;
        }
        
        .cbi-map table {
            margin: 0 auto;
        }
        
        .cbi-map th,
        .cbi-map td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .cbi-map th {
            background-color: rgb(255, 255, 255);
            color: rgb(87, 87, 87);
        }
        
        .cbi-map .cbi-section-table tr:nth-child(even) {
            background-color: rgb(244, 244, 244);
        }
        
        .cbi-map th,
        .cbi-map td {
            text-align: center;
        }
        
        .cbi-map h3 {
            background-color: #5e72e4;
            color: rgb(255, 255, 255);
        }
        
        .cbi-map table {
            margin: 0 auto;
        }
        
        .cbi-map th,
        .cbi-map td {
            text-align: center;
        }
    </style>


    <div class="cbi-map">
        <h2>扫描基站

        </h2>
        <h5>
            <span>使用说明:请勿在开机立刻进行此操作，进入此页面后点击“执行扫描动作”按钮，程序会自动开始执行扫描并刷新出数据。<p style="color: red;">注意：扫描期间请勿操作，等待扫描结果再进行其他操作。</p></span>
        </h5>
        <br>
        <div style="display: flex; justify-content: space-around;">
            <form id="switchForm" method="post" action="<%= luci.dispatcher.build_url('admin', 'modem', 'fscan', 'switch3') %>" onsubmit="submitForm(event)">
                <input type="hidden" name="confirm" value="yes">
                <input type="submit" value="执行移远扫描" class="cbi-button cbi-button-save">
            </form>
            <div style="width: 100%;"></div>
            <button onclick="reloadPage();" class="cbi-button cbi-button-save">手动刷新扫描数据</button>
        </div>
        <br>
        <p id="quectelscanStatus" class="scan-status scanning">正在扫描基站中...</p>
        <br>
        <h3>基站列表</h3>
        <p>
            <table id="quectelResults" class="cbi-section-table">
                <tr>
                    <th>网络制式</th>
                    <th>运营商ISP</th>
                    <th>频段 Band</th>
                    <th>频点 EARFCN</th>
                    <th>物理小区标识 PCI </th>
                    <th>信号强度RSRP</th>
                    <th>接收质量 RSRQ</th>
                    <th>锁定它</th>
                </tr>
                <% 
                    local controller = require("luci.controller.fscan")
                    local results = controller.parse_results_quectel() or {}
                    if #results > 0 then
                        for _, result in ipairs(results) do
                    %>
                    <tr>
                        <td id="mode">
                            <%= result.mode %>
                        </td>
                        <td id="operator">
                            <%= result.operator %>
                        </td>
                        <td>
                            <%= result.band %>
                        </td>
                        <td>
                            <%= result.earfcn %>
                        </td>
                        <td>
                            <%= result.pci %>
                        </td>
                        <td>
                            <%= result.rsrp %>
                        </td>
                        <td>
                            <%= result.rsrq %>
                        </td>
                        <td>
                            <%= result.lockit %>
                        </td>
                    </tr>
                    <% end
                    else
                    %>
                        <tr>
                            <td id="mode">scaning...</td>
                            <td id="operator"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <% end %>
            </table>
        </p>
        <p id="quectelscanStatus" class="scan-status"></p>
    </div>

    <%+footer%>