<script src="<?= getBaseUrl() ?>assets/plugins/jquery/jquery.min.js"></script>

<!-- Content Header (Page header) -->
<?php App\Controllers\BackendController::createService()->showBreadCrumbs( $arrmixBreadCrumbData ) ?>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="js-show-alert-message">
            <?php App\Controllers\BackendController::createService()->showAlertMessage( $arrmixFlashData ) ?>
        </div>

        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title"><?= $strCardTitle; ?></h3>
            </div>
            <form role="form" method="post" name="form" id="js-form-user-profile" action="<?= getBaseUrl() ?>basic-settings/edit">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-device-mode">Device Mode</label>
                            <select class="form-control" name="network_settings[device_mode]">
                                <option selected="selected" disabled="disabled">Select Option</option>
                                <option value="<?= DEVICE_MODE_CONVERTER ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['device_mode'] == DEVICE_MODE_CONVERTER ) ) ? 'selected="selected"' : set_select( 'network_settings[device_mode]', DEVICE_MODE_CONVERTER ); ?>>
                                    Converter
                                </option>
                                <option value="<?= DEVICE_MODE_GATEWAY ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['device_mode'] == DEVICE_MODE_GATEWAY ) ) ? 'selected="selected"' : set_select( 'network_settings[device_mode]', DEVICE_MODE_GATEWAY ); ?> disabled="disabled">
                                    Gateway
                                </option>
                            </select>
                            <?= getValidationError( 'device_mode' ) ?>                            
                        </div>
                    </div>
                    
                    <div class="card card-info">
                        <div class="card-body">
                            <h4>Network Settings</h4><br>

                            <div class="row">
                                <div class="col-4 form-group">
                                    <label class="control-label" for="js-rstp">Mode Settings</label><br>
                                    <select class="form-control" name="network_settings[mode_settings]">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <option value="<?= SPT_MODE_RSTP ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['mode_settings'] == SPT_MODE_RSTP ) ) ? 'selected="selected"' : set_select( 'network_settings[mode_settings]', SPT_MODE_RSTP ); ?>> RSTP </option>
                                        <option value="<?= SPT_MODE_STP ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['mode_settings'] == SPT_MODE_STP ) ) ? 'selected="selected"' : set_select( 'network_settings[mode_settings]', SPT_MODE_STP ); ?>> STP </option>
                                    </select>
                                    <?= getValidationError( 'mode_settings' ) ?> 
                                </div>
                                
                                <div class="col-4 form-group">
                                    <label class="control-label" for="js-rstp">Mode Settings Status</label><br>
                                    <select class="form-control" name="network_settings[mode_settings_status]" id="js-mode-settings-status">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <option value="<?= SPT_MODE_ENABLED ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['mode_settings_status'] == SPT_MODE_ENABLED ) ) ? 'selected="selected"' : set_select( 'network_settings[mode_settings_status]', SPT_MODE_ENABLED ); ?>>
                                            Enabled
                                        </option>
                                        <option value="<?= SPT_MODE_DISABLED ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['mode_settings_status'] == SPT_MODE_DISABLED ) ) ? 'selected="selected"' : set_select( 'network_settings[mode_settings_status]', SPT_MODE_DISABLED ); ?>>
                                            Disabled
                                        </option>
                                    </select>
                                    <?= getValidationError( 'mode_settings_status' ) ?> 
                                </div>
                            </div> 
                            <br>
                            <div class="row">
                                <div class="col-6">
                                    <h5>ETH-1</h5>
                                    <div class="row">
                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth1-mode">Mode</label>
                                            <select class="form-control" name="network_settings[eth1_mode]" id="js-eth1-mode">
                                                <option selected="selected" disabled="disabled">Select Option</option>
                                                <option value="<?= EHT_MODE_STATIC ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['eth1_mode'] == EHT_MODE_STATIC ) ) ? 'selected="selected"' : set_select( 'network_settings[eth1_mode]', EHT_MODE_STATIC ); ?>>Static</option>
                                                <option value="<?= EHT_MODE_DYNAMIC ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['eth1_mode'] == EHT_MODE_DYNAMIC ) ) ? 'selected="selected"' : set_select( 'network_settings[eth1_mode]', EHT_MODE_DYNAMIC ); ?>>DHCP</option>
                                            </select>
                                            <?= getValidationError( 'eth1_mode' ) ?>
                                        </div>

                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth1-ip-address">Ip Address</label>
                                            <input type="text" class="form-control" id="js-eth1-ip-address" name="network_settings[eth1_ip_address]" placeholder="Ip Address" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth1_ip_address'] : set_value( 'network_settings[eth1_ip_address]' ) ?>">
                                            <?= getValidationError( 'eth1_ip_address' ) ?>
                                        </div>
                                    </div> 
                                    <div class="row">
                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth1-subnet-mask">Subnet Mask</label>
                                            <input type="text" class="form-control" id="js-eth1-subnet-mask" name="network_settings[eth1_subnet_mask]" placeholder="Subnet Mask" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth1_subnet_mask'] : set_value( 'network_settings[eth1_subnet_mask]' ) ?>">
                                            <?= getValidationError( 'eth1_subnet_mask' ) ?>
                                        </div>
                                        
                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth1-default-gateway">Default Gateway</label>
                                            <input type="text" class="form-control" id="js-eth1-default-gateway" name="network_settings[eth1_default_gateway]" placeholder="Default Gateway" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth1_default_gateway'] : set_value( 'network_settings[eth1_default_gateway]' ) ?>">
                                            <?= getValidationError( 'eth1_default_gateway' ) ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <h5>ETH-2</h5>
                                    <div class="row">
                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth2-mode">Mode</label>
                                            <select class="form-control" name="network_settings[eth2_mode]" id="js-eth2-mode">
                                                <option selected="selected" disabled="disabled">Select Option</option>
                                                <option value="<?= EHT_MODE_STATIC ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['eth2_mode'] == EHT_MODE_STATIC ) ) ? 'selected="selected"' : set_select( 'network_settings[eth2_mode]', EHT_MODE_STATIC ); ?>>
                                                    Static
                                                </option>
                                                <option value="<?= EHT_MODE_DYNAMIC ?>" <?= ( true == isset( $arrmixNetworkSettingsDetails ) && ( $arrmixNetworkSettingsDetails['eth2_mode'] == EHT_MODE_DYNAMIC ) ) ? 'selected="selected"' : set_select( 'network_settings[eth2_mode]', EHT_MODE_DYNAMIC ); ?>>
                                                    DHCP
                                                </option>
                                            </select>
                                            <?= getValidationError( 'eth2_mode' ) ?>
                                        </div>

                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth2-ip-address">Ip Address</label>
                                            <input type="text" class="form-control" id="js-eth2-ip-address" name="network_settings[eth2_ip_address]" placeholder="Ip Address" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth2_ip_address'] : set_value( 'network_settings[eth2_ip_address]' ) ?>">
                                            <?= getValidationError( 'eth2_ip_address' ) ?>
                                        </div>
                                    </div> 
                                    <div class="row">
                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth2-subnet-mask">Subnet Mask</label>
                                            <input type="text" class="form-control" id="js-eth2-subnet-mask" name="network_settings[eth2_subnet_mask]" placeholder="Subnet Mask" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth2_subnet_mask'] : set_value( 'network_settings[eth2_subnet_mask]' ) ?>">
                                            <?= getValidationError( 'eth2_subnet_mask' ) ?>
                                        </div>

                                        <div class="col-5 form-group">
                                            <label class="control-label label-required" for="js-eth2-default-gateway">Default Gateway</label>
                                            <input type="text" class="form-control" id="js-eth2-default-gateway" name="network_settings[eth2_default_gateway]" placeholder="Default Gateway" value="<?= ( true == isset( $arrmixNetworkSettingsDetails ) ) ? $arrmixNetworkSettingsDetails['eth2_default_gateway'] : set_value( 'network_settings[eth2_default_gateway]' ) ?>">
                                            <?= getValidationError( 'eth2_default_gateway' ) ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card card-info">
                        <div class="card-body">
                            <h4>COM Settings</h4><br>
                            <div class="row">
                                <div class="col-4 form-group">
                                    <label class="control-label label-required" for="js-baud">Baud Rate</label>
                                    <select class="form-control" name="com_settings[baud_rate]">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <?php 
                                            foreach( \App\Models\ComSettingsModel::$s_arrintBaudRate as $intBaudRateKey => $intBaudRateValue ) { 
                                                
                                                $strSelected = '';
                                                if( true == isset( $arrmixComSettingsDetails ) && $arrmixComSettingsDetails['baud_rate'] == $intBaudRateKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }

                                                if( false == isVal( $strSelected ) && false == isset( $arrmixComSettingsDetails ) &&  \App\Models\ComSettingsModel::DEFAULT_BAUD_RATE == $intBaudRateKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }
                                        ?>
                                                    <option value="<?= $intBaudRateKey ?>" <?= $strSelected?> <?= set_select( 'com_settings[baud_rate]', $intBaudRateKey ); ?>><?= $intBaudRateValue; ?></option>    
                                        <?php } ?>    
                                    </select>
                                    <?= getValidationError( 'baud_rate' ) ?>
                                </div>

                                <div class="col-4 form-group">
                                    <label class="control-label label-required" for="js-data-bits">Data Bits</label>
                                    <select class="form-control" name="com_settings[data_bits]">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <?php 
                                            foreach( \App\Models\ComSettingsModel::$s_arrintDataBits as $intDataBitKey => $intDataBitValue ) { 
                                                
                                                $strSelected = '';
                                                if( true == isset( $arrmixComSettingsDetails ) && $arrmixComSettingsDetails['data_bits'] == $intDataBitKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }

                                                if( false == isVal( $strSelected ) && false == isset( $arrmixComSettingsDetails ) &&  \App\Models\ComSettingsModel::DEFAULT_DATA_BITS == $intDataBitKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }
                                        ?>
                                                    <option value="<?= $intDataBitKey ?>" <?= $strSelected?> <?= set_select( 'com_settings[data_bits]', $intDataBitKey ); ?>><?= $intDataBitValue; ?></option>    
                                        <?php } ?>    
                                    </select>
                                    <?= getValidationError( 'data_bits' ) ?>
                                </div>
                                <div class="col-4 form-group">
                                    <label class="control-label label-required" for="js-flow_control">Flow Control</label><br>
                                    <span class="badge badge-danger">OFF</span>
                                </div>    
                            </div>

                            <div class="row">
                                <div class="col-4 form-group">
                                    <label class="control-label label-required" for="js-parity-bits">Parity Bits</label>
                                    <select class="form-control" name="com_settings[parity_bits]">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <?php 
                                            foreach( \App\Models\ComSettingsModel::$s_arrstrParityBits as $strParityBitKey => $strParityBitValue ) { 
                                                
                                                $strSelected = '';
                                                if( true == isset( $arrmixComSettingsDetails ) && $arrmixComSettingsDetails['parity_bits'] == $strParityBitKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }

                                                if( false == isVal( $strSelected ) && false == isset( $arrmixComSettingsDetails ) &&  \App\Models\ComSettingsModel::DEFAULT_PARITY_BITS == $strParityBitKey ) {
                                                    $strSelected = 'selected="selected"';
                                                }
                                        ?>
                                                    <option value="<?= $strParityBitKey ?>" <?= $strSelected?> <?= set_select( 'com_settings[parity_bits]', $strParityBitKey ); ?>><?= $strParityBitValue; ?></option>    
                                        <?php } ?>    
                                    </select>
                                    <?= getValidationError( 'parity_bits' ) ?>
                                </div>

                                <div class="col-4 form-group">
                                    <label class="control-label label-required" for="js-stop-bits">Stop Bits</label>
                                    <select class="form-control" name="com_settings[stop_bits]">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <?php 
                                            for( $intStopBits = 1; $intStopBits <= 2; $intStopBits++ ) { 
                                                
                                                $strSelected = '';
                                                if( true == isset( $arrmixComSettingsDetails ) && $arrmixComSettingsDetails['stop_bits'] == $intStopBits ) {
                                                    $strSelected = 'selected="selected"';
                                                }

                                                /* if( false == isVal( $strSelected ) && false == isset( $arrmixComSettingsDetails ) &&  \App\Models\ComSettingsModel::DEFAULT_STOP_BITS == $strStopBitKey ) {
                                                    $strSelected = 'selected="selected"';
                                                } */
                                        ?>
                                                    <option value="<?= $intStopBits ?>" <?= $strSelected?> <?= set_select( 'com_settings[stop_bits]', $intStopBits ); ?>><?= $intStopBits; ?></option>    
                                        <?php } ?>    
                                    </select>
                                    <?= getValidationError( 'stop_bits' ) ?>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- /.card-body -->
                </div>    
                <!-- /.card-body -->

                <div class="card-footer">
                    <button type="submit" class="btn btn-outline-success">Submit</button>
                    <a href="<?= getBaseUrl() ?>basic-settings/view" class="btn btn-outline-danger"> Cancel</a>
                </div>
            </form>
        </div>
            
    </div><!-- /.container-fluid -->
</section>

<script>
    $(document).ready(function() {

        var boolModeSettingsStatus = $( '#js-mode-settings-status' ).val();
        if( 1 == boolModeSettingsStatus ) { 
            // $( '#js-eth2-mode' ).attr( "disabled", true ); 
            
            $( '#js-eth2-mode option:not(:selected)').attr( 'disabled', true );

            $( '#js-eth2-mode, #js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).attr( 'readonly', true );
        }

        if( 0 == $( "#js-eth1-mode" ).val() ) {
            $( '#js-eth1-ip-address, #js-eth1-subnet-mask, #js-eth1-default-gateway' ).attr( 'readonly', true );
        } else {
            $( '#js-eth1-ip-address, #js-eth1-subnet-mask, #js-eth1-default-gateway' ).removeAttr( 'readonly' );
        }

        if( 0 == $( "#js-eth2-mode" ).val() ) {
            $( '#js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).attr( 'readonly', true );
        } 

        $( '#js-mode-settings-status' ).on( 'change', function() { 

            var boolModeSettingsStatus = $( this ).val();

            if( 1 == boolModeSettingsStatus ) {
                // $( '#js-eth2-mode' ).attr( "disabled", true ); 
                $( '#js-eth2-mode option:not(:selected)').attr( 'disabled', true );
                $( '#js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).attr( 'readonly', true );

                var strEth1Mode = $( 'js-eth1-mode' ).val();
                if( true == validateValue( strEth1Mode ) ) {
                    $( "#js-eth2-mode" ).val( strEth1Mode ).change();
                }
                
                var strEth1IpAddress = $( 'js-eth1-ip-address' ).val();
                if( true == validateValue( strEth1IpAddress ) ) { 
                    $( '#js-eth2-ip-address' ).val( strEth1IpAddress );
                }
                
                var strEth1SubnetMask = $( 'js-eth1-subnet-mask' ).val();
                if( true == validateValue( strEth1SubnetMask ) ) { 
                    $( '#js-eth2-subnet-mask' ).val( strEth1SubnetMask );
                }    
                
                var strEth1DefaultGateway = $( 'js-eth1-default-gateway' ).val();
                if( true == validateValue( strEth1DefaultGateway ) ) { 
                    $( '#js-eth2-default-gateway' ).val( strEth1DefaultGateway );
                }
                
            } else {
                // $( '#js-eth2-mode' ).attr( "disabled", false ); 
                $( '#js-eth2-mode option:not(:selected)').attr( 'disabled', false );

                $( '#js-eth2-mode, #js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).removeAttr( 'readonly' );
            }
        } );

        $( "#js-eth1-mode" ).on( 'change', function() { 
            
            if( 0 == $( this ).val() ) {
                $( '#js-eth1-ip-address, #js-eth1-subnet-mask, #js-eth1-default-gateway' ).attr( 'readonly', true );
            } else {
                $( '#js-eth1-ip-address, #js-eth1-subnet-mask, #js-eth1-default-gateway' ).removeAttr( 'readonly' );
            }

            var boolModeSettingStatus = $( '#js-mode-settings-status' ).val();
            if( true == validateValue( boolModeSettingStatus ) && 1 == boolModeSettingStatus ) {
                $( '#js-eth2-mode option:not(:selected)').attr( 'disabled', false );

                $( "#js-eth2-mode" ).val(  $( "#js-eth1-mode" ).val() ).change();

                if( 1 == $( '#js-mode-settings-status' ).val() ) {
                    $( '#js-eth2-mode option:not(:selected)').attr( 'disabled', true );
                }
            }

        } );

        $( "#js-eth2-mode" ).on( 'change', function() { 

            var boolModeSettingStatus = $( '#js-mode-settings-status' ).val();
            
            if( false == validateValue( boolModeSettingStatus ) || 0 == boolModeSettingStatus ) {  

                if( 0 == $( this ).val() ) {
                    $( '#js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).attr( 'readonly', true );
                } else {
                    $( '#js-eth2-ip-address, #js-eth2-subnet-mask, #js-eth2-default-gateway' ).removeAttr( 'readonly' );
                }
            } 
        } );

        $( '#js-eth1-subnet-mask' ).keyup( function() {

            var boolModeSettingStatus = $( '#js-mode-settings-status' ).val();
            
            if( true == validateValue( boolModeSettingStatus ) && 1 == boolModeSettingStatus ) { 

                var strEth1SubnetMask = $( this ).val();

                $( '#js-eth2-subnet-mask' ).val( strEth1SubnetMask );
            }
        } );

        $( '#js-eth1-ip-address' ).keyup( function() {

            var boolModeSettingStatus = $( '#js-mode-settings-status' ).val();
            
            if( true == validateValue( boolModeSettingStatus ) && 1 == boolModeSettingStatus ) { 

                var strEth1IpAddress = $( this ).val();

                $( '#js-eth2-ip-address' ).val( strEth1IpAddress );
            }
        } );

        $( '#js-eth1-default-gateway' ).keyup( function() {

            var boolModeSettingStatus = $( '#js-mode-settings-status' ).val();

            if( true == validateValue( boolModeSettingStatus ) && 1 == boolModeSettingStatus ) { 

                var strEth1DefaultGateway = $( this ).val();

                $( '#js-eth2-default-gateway' ).val( strEth1DefaultGateway );
            }
        } );
    });

</script>