<link rel="stylesheet" href="<%=resource%>/css/common.css?v=6.1.2">
<style>

    .desc {
        margin-top: 10px;
        width: 650px;

    }
    .desc span{
        margin-top:5px;
        font-size:13px;
        color:gray;
    }

</style>

<script type="text/javascript">//<![CDATA[

		function init_data() {
			getAppFilterAdvData(); 
		}
        function showSuccessMessage(message = '<%:Settings saved successfully%>') {
			const modal = document.getElementById('modal');
			const messageElement = modal.querySelector('p');
			messageElement.textContent = message;
			modal.style.display = 'flex';
			setTimeout(() => {
				modal.style.display = 'none';
			}, 1000);
		}

		

        function validateLanIfname(lanIfname) {
            const regex = /^[a-zA-Z0-9-]{2,8}$/;
            return regex.test(lanIfname);
        }

        function submitAppFilterAdv() {
            const lanIfname = document.getElementById('lan_ifname').value;
            const disableHnatSwitch = document.getElementById('disableHnatSwitch').checked;
            const autoLoadEngineSwitch = document.getElementById('autoLoadEngineSwitch').checked;

            if (!validateLanIfname(lanIfname)) {
                alert('<%:Invalid LAN interface name. Please ensure it is no more than 8 characters long and contains only letters, numbers, and -.%>');
                return;
            }



            new XHR().post('<%=url('admin/network/set_app_filter_adv')%>', {
                lan_ifname: lanIfname,
                disable_hnat: disableHnatSwitch ? 1 : 0,
                auto_load_engine: autoLoadEngineSwitch ? 1 : 0,
            },
            function (x, data) {
                showSuccessMessage();
            });
        }
 
		function submitHandle() {
			submitAppFilterAdv();
		}

		function openModal() {
			document.getElementById('modal').style.display = 'block';
            setTimeout(closeModal, 2000);
		}

		function closeModal() {
			document.getElementById('modal').style.display = 'none';
		}

        function getAppFilterAdvData() {
			console.log("getAppFilterAdvData");
            new XHR().get('<%=url('admin/network/get_app_filter_adv')%>', null,
                function (x, data) {
                    document.getElementById('lan_ifname').value = data.data.lan_ifname;
                    if (data.data.disable_hnat == 1) {
                        document.getElementById('disableHnatSwitch').checked = true;
                    } else {
                        document.getElementById('disableHnatSwitch').checked = false;
                    }
                    if (data.data.auto_load_engine == 1) {
                        document.getElementById('autoLoadEngineSwitch').checked = true;
                    } else {
                        document.getElementById('autoLoadEngineSwitch').checked = false;
                    }
                }
            );
            
            new XHR().get('<%=url('admin/network/get_oaf_status')%>', null,
                function (x, data) {
                    if (data && data.data) {
                        document.getElementById('oafVersion').textContent = data.data.version || '--';
                        document.getElementById('engineVersion').textContent = data.data.engine_version || '--';
                    }
                }
            );
        }


        window.onload = function() {
            init_data();
        };
//]]></script>

<div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; text-align: center; width: 100px; height: 70px; color: white; display: flex; justify-content: center; align-items: center;">
        <p style="margin: 0;color: white;"><%:Settings saved successfully%></p>
    </div>
</div>

<div class="cbi-section cbi-tblsection">
    <div style="max-width: 1000px; margin-left: 10px;padding: 5px;">

        <!-- Version Information -->
        <div style="margin-top: 10px; display: flex; align-items: center;">
            <label style="margin-right: 5px;width:150px"><%:OAF Version%></label>
            <span id="oafVersion">--</span>
        </div>
        
        <div style="margin-top: 10px; display: flex; align-items: center;">
            <label style="margin-right: 5px;width:150px"><%:OAF Driver Version%></label>
            <span id="engineVersion">--</span>
        </div>
        

        <div style="margin-top: 10px; display: flex; align-items: center;">
            <label for="disableHnatSwitch" style="margin-right: 5px;width:150px"><%:Disable Software/Hardware Acceleration%></label>
            <label class="switch">
                <input type="checkbox" id="disableHnatSwitch" name="disableHnatSwitch" />
                <span class="slider"></span>
            </label>
        </div>

        <div class="desc">
            <span><%:Software and hardware acceleration, NAT offload and other modules may affect filtering or statistics functions. This interface only attempts to turn them off, but may not be completely successful. Please check the status in the firewall or network acceleration menu. Re-enabling acceleration requires a device restart to take effect.%></span>
        </div>
        
        <div style="margin-top: 10px; display: flex; align-items: center;">
            <label for="autoLoadEngineSwitch" style="margin-right: 5px;width:150px"><%:Auto-load oaf driver%></label>
            <label class="switch">
                <input type="checkbox" id="autoLoadEngineSwitch" name="autoLoadEngineSwitch" />
                <span class="slider"></span>
            </label>
        </div>

        <div class="desc">
            <span><%:If the oaf driver cannot be manually unloaded or the current driver is unstable, you can turn off auto-loading at startup and manually install a suitable driver. It is recommended to use the official stable OpenWrt firmware.%></span>
        </div>


        <div style="margin-top: 10px; display: flex; align-items: center;">
            <label for="lan_ifname" style="margin-right: 5px;width:150px"><%:LAN Interface%></label>
            <input type="text" id="lan_ifname" style="padding: 5px; background-color: white;width: 200px">
        </div>

        <div class="desc">
            <span><%:The name of the LAN interface, used for detecting terminal information. The system default is bridge interface (br-lan). If the LAN port has been modified to a physical interface, please modify it to the corresponding name, such as eth0, support fuzzy matching, For example, you can setup lan to match br-lan and br-lan2.%></span>
        </div>


        <div class="button-container">
            <button type="button" class="submit-button" onclick="submitHandle()"><%:Save%></button>
        </div>
    </div>
</div>
