text: import React, { Component } from 'react';
  import Button from '../../../../Base/FormControl/Button';
  import { Col, Row, Container, Form, FormGroup } from 'reactstrap';
  import Input from '../../../../Base/FormControl/FormControlCol3/Input';
  import Select from '../../../../Base/FormControl/FormControlCol3/Select';
  import TextArea from "../../../../Base/FormControl/FormControlCol3/TextArea";
  import CheckBox from '../../../../Base/FormControl/CheckBox';
  import { Translation } from 'react-i18next';
  import * as Constant from '../../../../Base/Constant';
  import CitySitePremise from '../../../../Common/CitySitePremiseCol3/CitySitePremise';
  import Switch from "react-switch";
  import '../../../Service/Dsl/Dsl.scss';
  import Badge from "react-bootstrap/Badge";
  
  export default class EditCOLTTotalERXBasedSingleLine extends Component {
    constructor(props) {
      super(props);
      this.state = {
          dslAdslService: {
          serviceIdentification: '',
          serviceType: 'DSL',
          productType:"COLT Total - ERX Based - Single Line",
          speedySurf: '',
          remark: '',
          country: '',
          email: '',
          phoneContact: '',
          vpnTechnology: '',
          serviceNameInNevion: '',
          proactiveMonitoring:true,
          performanceReporting:false,
          smartMonitoring:true,
          notificationManagementTeam:"",
          singleEndPointCpe:true,
          managementOrder: '',
          selectManagementOrder: '',
          intermediateTechnology: '',
          deliveryChannel: '',
          circuitReference: '',
          circuitType: '',
          default: '',
          compositeCircuit: '',
          extendedCircuit: '',
          ipGuardian:true,
          routerConfigurationView:false,
          enni: false,
          venderModel:"",
          managementAddress:"",
          snmpro:"",
          deviceName:"",
          wanInterfaceName:"",
          framedIpSubnetMask:"255.255.255.255",
          staticNat:false,
          dynamicNat:true,
          lanSubnetMask:"",
          framedIpAddress:"",
          lanNetworkAddressRange:"",
          bundle:'',
          dslUserName: '',
          slot:'',
          port:'',	
          vpi:'',	
          vci:'',	
          encapsulation:'',
          ppEncapsulation:'',
                  dslPassword: '',
                  framedProtocol: '',
                  framedRoute0: '',
                  framedRoute1: '',
                  framedRoute2: '',
                  framedRoute3: '',
                  framedRoute4: '',
                  framedRoute5: '',
                  framedRoute6: '',
                  framedRoute7: '',
                  univirtaulrouteName: '',
                  uniloopbackInterface: '',
                  uniingressPolicy: '',
                  uniingresspolicyName: '',
                  atmPcr: '',
                  atmScr: '',
                  atmMbs: '',
                  atmCat: '',            
                  uniQosProfileName:'',
                  qoSParameters:'',
                  unisphereIGMPenable:'',
                  unisphereIGMPVersion:'',
                  routerBasedFirewall:'' 
        },
        billingTypeList: [
          { "name": "Flate Rate", "code": "Flate Rate" },
          { "name": "UBB Per GigaBite", "code": "UBB Per GigaBite" },
          { "name": "UBB -95th Percentile", "code": "UBB -95th Percentile" }],
        serviceTypes: [      
          { "name": "DSL", "code": "2" }
        ],
        countries: [
          { "name": "AT (Austria)", "code": "AT" },
          { "name": "BE (Belgium)", "code": "BE" },
          { "name": "CH (Switzerland)", "code": "CH" },
          { "name": "DE (Germany)", "code": "DE" },
          { "name": "DK (Denmark)", "code": "DK" },
          { "name": "ES (Spain)", "code": "ES" },
          { "name": "FR (France)", "code": "FR" },
          { "name": "IE (Ireland)", "code": "IE" },
          { "name": "INT (International)", "code": "INT" },
          { "name": "IS (Iceland)", "code": "IS" },
          { "name": "IT (Italy)", "code": "IT" },
          { "name": "LU (Luxembourg)", "code": "LU" },
          { "name": "NL (Netherlands)", "code": "NL" },
          { "name": "PT (Portugal)", "code": "PT" },
          { "name": "SE (Sweden)", "code": "SE" },
          { "name": "UK (United Kingdom)", "code": "UK" },
          { "name": "US (United States)", "code": "US" }
      ],
      bundleList: [
        { "name": "IPV19890", "code": "IPV19890" }
     ],
    erxList: [
          { "name": "ERX", "code": "1" }
    ],
    wanInterfaceNameList: [
      { "name": "--", "code": "0" },
      { "name": "Dialer0", "code": "Dialer0" },
      { "name": "Virtual-Template0", "code": "Virtual-Template0" },
      { "name": "Virtual-Template100", "code": "Virtual-Template100" },
      { "name": "Atm0", "code": "Atm0" },
      { "name": "Atm0.1", "code": "Atm0.1" },
      { "name": "Atm0/0.1", "code": "Atm0/0.1" },
      { "name": "Serial 0/0/0", "code": "Serial 0/0/0" },
      { "name": "Serial 0/0", "code": "Serial 0/0" }
  ],
  vendormodelList:[
      { "name": "Cisco 2611", "code": "Cisco 2611" },
      { "name": "Cisco 2811", "code": "Cisco 2811" },
      { "name": "Cisco 877M", "code": "Cisco 877M" },
      { "name": "Cisco 881", "code": "Cisco 881" },
      { "name": "Cisco 888", "code": "Cisco 888" },
      { "name": "Cisco ASR1002", "code": "Cisco ASR1002" },
      { "name": "Cisco Unknown", "code": "Cisco Unknown" },
      { "name": "Huawei 183x", "code": "Huawei 183x" },
      { "name": "Huawei AR2809", "code": "Huawei AR2809" },
      { "name": "Huawei AR4640", "code": "Huawei AR4640" }
  ],
  lanSpeedlList:[
      {"name":"Auto","code":"Auto"},
      {"name":"10 Mbps","code":"10Mbps"},
      {"name":"100 Mbps","code":"100Mbps"},
      {"name":"1 Gbps","code":"1gbps"},
      {"name":"10 Gbps","code":"10gbps"},
  ],
  lanDuplexlList:[
      {"name":"Auto","code":"Auto"},
      {"name":"Half","code":"Half"},
      {"name":"Full","code":"Full"}
  ],
  lineModelList:[
      {"name":"-Select-","code":"--"},                
      {"name":"2-wire","code":"2-wire"},
      {"name":"4-wire","code":"4-wire"}
  ],
  atmPcrList: [
    { "name": "--", "code": "0" }
  ],
  atmScrList: [
    { "name": "--", "code": "0" }
  ],
  atmMbsList: [
    { "name": "1", "code": "1" }
  ],
  atmCatList: [
    { "name": "2", "code": "2" }
  ],
  uniQosProfileNameList:[
    { "name": "AOK-BAV-L2TP-QOS", "code": "AOK-BAV-L2TP-QOS"},
    { "name": "AOK-BAV-L2TP-QOS-1M", "code": "AOK-BAV-L2TP-QOS-1M"},
    { "name": "AOK-BAV-L2TP-QOS-1M-BU", "code": "AOK-BAV-L2TP-QOS-1M-BU"},
  ],
  qoSParametersList:[
    { "name": "access-rate", "code": "access-rate" },
    { "name": "business-weight", "code": "business-weight" },
    { "name": "max-voice-bw-dn", "code": "max-voice-bw-dn" },
    { "name": "business2-weight", "code": "business2-weight" },
    { "name": "business3-weight", "code": "business3-weight" }                
  ],
  unisphereIGMPenableList:[
    { "name": "Yes", "code": "Yes" },
    { "name": "No", "code": "No" }
  ],
  unisphereIGMPVersionList:[
    { "name": "0", "code": "0" },
    { "name": "1", "code": "1" },
    { "name": "2", "code": "2" },
    { "name": "3", "code": "3" }
  ],
  dslProviderList:[
    {"name":"-Select-","code":"--"},
    {"name":"Colt DSL","code":"Colt DSL"},
    {"name":"Wholesale DSL","code":"Wholesale DSL"}
  ],
  slotList:[
    {"name":"Slot 1","code":"Slot1"},
    {"name":"Slot 2","code":"Slot2"}
  ],
  portList:[
    {"name":"8080","code":"8080"},
    {"name":"8085","code":"8085"}
  ],
  encapsulationList:[
    {"name":"aal5mux","code":"aal5mux"},
    {"name":"aal5snap","code":"aal5snap"}
  ],
  ppEncapsulationList:[
    {"name":"PPPoE","code":"PPPoE"},
    {"name":"PPPoA","code":"PPPoA"}
  ],
      selectErxFlag:true,
      }
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleInput = this.handleInput.bind(this);
      this.handleCheckBox = this.handleCheckBox.bind(this);
      this.backToCreateService = this.backToCreateService.bind(this);
      this.toggleErxDetails = this.toggleErxDetails.bind(this);
    }
    toggleErxDetails(){
      this.setState({ selectErxFlag: !this.state.selectErxFlag}); 
    }
    backToCreateService() {
      this.props.history.push(Constant.CREATE_SERVICE_URL);
    }
    handleCheckBox(e) {
      const value = e.target.checked;
      const name = e.target.name;
      this.setState({
        [name]: value
      });
    }
  
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(prevState => ({
        dslAdslService: { ...prevState.dslAdslService, [name]: value }
      }), () => console.log(this.state.dslAdslService))
    }
  
    handleFormSubmit(e) {
      e.preventDefault();
      this.props.history.push({ pathname: Constant.VIEW_DSL_ADSL_SERVICE_URL, service: { serviceType: this.state.serviceTypeId } })
    }
  
    render() {
  
      const chooseErxShow = {
        display: this.state.selectErxFlag ? "inline" : "none"
      };
      const addErxShow = {
          display: !this.state.selectErxFlag ? "inline" : "none"
      };
  
      return (
        <>
          <Container className="div-border div-margin">
            <Form method="POST" onSubmit={this.handleFormSubmit}>
              <Row className="heading-green-row">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  <Translation>{t => <>{t('common.createOrderService')}</>}</Translation>
                </Col>
              </Row>
              <Row className="div-margin">             
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                        <Input inputtype={"text"} title="order.mdfService.serviceIdentification" name={"serviceIdentification"} value={this.state.dslAdslService.serviceIdentification}
                          placeholder={"Enter Service Identification"} onChange={this.handleInput} />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                    <label htmlFor="name" className="form-label">
                              Service Type
                      </label>                     
                        <div>{this.state.dslAdslService.serviceType}</div>
                        
                    
                    </FormGroup>
                </Col>
                <Col  xs="12" sm="12" md="4">
                  <FormGroup>
                      <label htmlFor="name" className="form-label">
                              Product Type
                      </label>                     
                        <div>{this.state.dslAdslService.productType}</div>
                  </FormGroup>
                </Col> 
              </Row>
              <Row className="div-margin">
                <Col xs='12' sm='12' md='4'>
                  <Select title={"order-service.belongstoBundle"} name={"bundle"} multiple={false} options={this.state.bundleList}
                    value={this.state.dslAdslService.bundleList} handleChange={this.handleInput} />
                </Col>
                <Col xs='12' sm='12' md='4'>
                          <Select  title={"order-service.dslProvider"} name={"dslProvider"}
                              multiple={false} options={this.state.dslProviderList}
                              value={this.state.dslAdslService.dslProviderList}
                              handleChange={this.handleInput} isrequired={false}/>
                  </Col>  
                  <Col xs='12' sm='12' md='4'>
                              <FormGroup>
                              <CheckBox title={"order-service.speedySurf"} name={"speedySurf"} options={this.state.speedySurf}
                                  selectedOptions={this.state.dslAdslService.speedySurf} handleChange={this.handleCheckBox} />
                           </FormGroup>
                  </Col>
                </Row>
                <Row className="div-margin">    
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                        <Input inputtype={"text"} title="order-service.email" name={"email"} value={this.state.dslAdslService.email}
                          placeholder={"Enter Email"} onChange={this.handleInput} />
                      </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Input inputtype={"text"} title="order-service.phoneContact" name={"phoneContact"} value={this.state.dslAdslService.phoneContact}
                        placeholder={"Enter Phone Contact"} onChange={this.handleInput} />
                    </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <TextArea
                            title="order-service.remark"
                            name={"remark"}
                            rows="1"
                            cols="10"
                            value={this.state.dslAdslService.remark}
                            handleChange={this.handleInput}
                          />
                      </FormGroup>
                </Col>
              </Row>
              <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  <Translation>{t => <>{t('common.managementOptions')}</>}</Translation>
                </Col>
              </Row>
              <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                        <CheckBox
                            title={"order-service.performanceReporting"}
                            name={"performanceReporting"}
                            options={this.state.dslAdslService.performanceReporting}
                            selectedOptions={this.state.dslAdslService.performanceReporting}
                            handleChange={this.handleCheckBox}
                            defaultChecked={this.state.dslAdslService.performanceReporting}
                        />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <CheckBox
                              title={"order-service.ipGuardian"}
                              name={"ipGuardian"}
                              options={this.state.dslAdslService.ipGuardian}
                              selectedOptions={this.state.dslAdslService.ipGuardian}
                              handleChange={this.handleCheckBox}
                              defaultChecked={this.state.dslAdslService.ipGuardian}
                          />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup >
                          <CheckBox
                              style={checkboxStyle}
                              title={"order-service.routerConfigurationView"}
                              name={"routerConfigurationView"}
                              options={this.state.dslAdslService.routerConfigurationView}
                              selectedOptions={this.state.dslAdslService.routerConfigurationView}
                              handleChange={this.handleCheckBox}
                              defaultChecked={this.state.dslAdslService.routerConfigurationView}
                          />
                      </FormGroup>
                  </Col>
              </Row>
              <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                Location
                </Col>
              </Row>
              <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <Select title="common.country" name={"country"} multiple={false} options={this.state.countries} onChange={this.handleInput}
                              value={this.state.dslAdslService.country} placeholder={"Select Country"} handleChange={this.handleInput} />
                      </FormGroup>
                  </Col>
              </Row>
              <CitySitePremise/>
  
  
  
  
              <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  <Translation>{t => <>{t('createservicetypeorder.pedetails')}</>}</Translation>
                </Col>
              </Row>
              <div style={chooseErxShow}>
                <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                        <FormGroup>
                            <Select title="order-service.erxName" name={"erxName"} multiple={false} options={this.state.erxList} onChange={this.handleInput}
                                value={this.state.dslAdslService.erxList} placeholder={"-Select ERX-"} handleChange={this.handleInput} />
                        </FormGroup>
                    </Col>
                  <Col  xs="12" sm="12" md="3">
                      <FormGroup style={{marginTop:"8%"}}>
                          <Switch
                              checked={this.state.selectErxFlag}
                              onChange={this.toggleErxDetails}
                              uncheckedIcon={false}
                              checkedIcon={false}
                              onColor={'#088'}
                              offColor={'#888'}
                              className="react-switch"
                              id="icon-switch"
                          />                          
                      </FormGroup>
                      </Col>   
                      <Col className="react-switch-text">
                      <label className="form-label" style={labelStyle} >Select ERX</label>
                    </Col>
                              
                </Row>
              </div>
              <div style={addErxShow}>
                <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                          <FormGroup>
                            <Input inputtype={"text"} title="order-service.erxName" name={"erxName"} value={this.state.dslAdslService.erxName}
                              placeholder={"Enter ERX Name"} onChange={this.handleInput} />
                          </FormGroup>
                  </Col>
                  <Col  xs="12" sm="12" md="3">
                      <FormGroup style={{marginTop:"8%"}}>
                          <Switch
                              checked={this.state.selectErxFlag}
                              onChange={this.toggleErxDetails}
                              uncheckedIcon={false}
                              checkedIcon={false}
                              onColor={'#088'}
                              offColor={'#888'}
                              className="react-switch"
                              id="icon-switch"
                          />                       
                      </FormGroup>                   
                  </Col>
                  <Col className="react-switch-text">
                      <label className="form-label" style={labelStyle} >Select ERX</label>
                  </Col>
                </Row>
                <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Select title="order.addEthernetPeDevice.venderModel" name={"venderModel"} multiple={false} options={this.state.serviceTypes} onChange={this.handleInput}
                        value={this.state.dslAdslService.venderModel} placeholder={"Select Vender/Model"} handleChange={this.handleInput} />
                    </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <Input inputtype={"text"} title="order.addEthernetPeDevice.managementAddress" name={"address"} value={this.state.dslAdslService.managementAddress}
                              placeholder={"Enter Management Address"} onChange={this.handleInput} />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                  <label className="form-label" >Connectivity Protocol</label><br/>
                                  <input style={{marginLeft:"-25px"}} className='option-input radio' type="radio" value="Allow" name="telnet"/> <span style={labelStyle}>telnet </span>
                                  <input defaultChecked="true" style={{marginLeft:"4%"}}  className='option-input radio' type="radio" value="Block" name="ssh"/> <span style={labelStyle}>ssh</span>
                              </FormGroup>
                </Col>
                </Row>
                <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                  <label className="form-label" >SNMP Version</label><br/>
                                  <input style={{marginLeft:"-25px"}} className='option-input radio' type="radio" value="Allow" name="version2c"/> <span style={labelStyle}>2c </span>
                                  <input defaultChecked="true" style={{marginLeft:"4%"}}  className='option-input radio' type="radio" value="Block" name="version3c"/> <span style={labelStyle}>3</span>
                              </FormGroup>
                      </Col>  
                <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.snmpv3Username" name={"vci"} value={this.state.dslAdslService.snmpro || ''}
                                          placeholder={"colt-nms"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.snmpv3Authpassword" name={"vci"} value={this.state.dslAdslService.snmpro || ''}
                                          placeholder={"OrHzjWmRvr4piJZb"} onChange={this.handleInput} />
                                  </FormGroup>
                      </Col>
                      <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.snmpv3privpassword" name={"vci"} value={this.state.dslAdslService.snmpro || ''}
                                          placeholder={"sdf3434piJZb"} onChange={this.handleInput} />
                                  </FormGroup>
                      </Col>
                   </Row>
                <CitySitePremise/>
              </div>
  
              <Row className="div-margin">                          
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                              <Select title={"order-service.slot"}
                                  name={"slot"}
                                  multiple={false} options={this.state.slotList}
                                  value={this.state.dslAdslService.slotList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                              <Select title={"order-service.port"}
                                  name={"port"}
                                  multiple={false} options={this.state.portList}
                                  value={this.state.dslAdslService.portList}
                                  handleChange={this.handleInput} />
                             </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.vpi" name={"vpi"} value={this.state.dslAdslService.vpi || ''}
                                          placeholder={""} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              
                      </Row>
  
                      <Row className="div-margin">  
                      <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.vci" name={"vci"} value={this.state.dslAdslService.vci || ''}
                                          placeholder={""} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                              <Select title={"order-service.encapsulation"}
                                  name={"encapsulation"}
                                  multiple={false} options={this.state.encapsulationList}
                                  value={this.state.dslAdslService.encapsulationList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                              <Select title={"order-service.ppEncapsulation"}
                                  name={"ppEncapsulation"}
                                  multiple={false} options={this.state.ppEncapsulationList}
                                  value={this.state.dslAdslService.ppEncapsulationList}
                                  handleChange={this.handleInput} />
                             </FormGroup>
                              </Col>
                    </Row>
  
  
  
  
              <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  <Translation>{t => <>{t('createservicetypeorder.cpedetails')}</>}</Translation>
                </Col>
              </Row>
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                        <Input inputtype={"text"} title="createservicetypeorder.deviceName" name={"deviceName"} value={this.state.dslAdslService.deviceName}
                          placeholder={"Enter Device Name"} onChange={this.handleInput} />
                      </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Select title="createservicetypeorder.wanInterfaceName" name={"wanInterfaceName"} multiple={false} options={this.state.wanInterfaceNameList} onChange={this.handleInput}
                        value={this.state.dslAdslService.wanInterfaceNameList} placeholder={"Select WAN Interface Name"} handleChange={this.handleInput} />
                    </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Select title="order.addEthernetPeDevice.venderModel" name={"venderModel"} multiple={false} options={this.state.vendormodelList} onChange={this.handleInput}
                        value={this.state.dslAdslService.vendormodelList} placeholder={"Select Vender/Model"} handleChange={this.handleInput} />
                    </FormGroup>
                  </Col>
                  </Row>           
                  <Row className="div-margin">
                    <Col xs="12" sm="12" md="4">
                    <FormGroup> 
                        <Input inputtype={"text"} title={"createservicetypeorder.fwiAddress"}
                            name={"framedIpAddress"} value={this.state.dslAdslService.framedIpAddress || ''}
                            placeholder={""} onChange={this.handleInput} required={false} />
                  </FormGroup>
                  </Col>
                
                <Col style={{marginTop:'25px'}} xs="12" sm="4" md="4"  className="badge-right">              
                  <Badge variant="success">Edit</Badge>
               &nbsp;<span>|</span>&nbsp;             
                  <Badge variant="success">Get Address</Badge>
              &nbsp;<span>|</span>&nbsp;        
                  <Badge variant="success" >EIP Allocation</Badge>                
               </Col>
                      
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                      <label htmlFor="name" className="form-label">
                       Framed/WAN IP Subnet Mask  <p>{this.state.dslAdslService.framedIpSubnetMask}</p>
                      </label>    
                  </FormGroup>
                </Col> 
              </Row>
  
              <Row className="div-margin">
                <Col xs='12' sm='12' md='4'>
                      <FormGroup>
                              <Select title={"order-service.lanSpeed"}
                                  name={"vendormodel"}
                                  multiple={false} options={this.state.lanSpeedlList}
                                  value={this.state.dslAdslService.lanSpeedlList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                </Col> 
                <Col xs='12' sm='12' md='4'>
                      <FormGroup>
                              <Select title={"order-service.lanDuplex"}
                                  name={"vendormodel"}
                                  multiple={false} options={this.state.lanDuplexlList}
                                  value={this.state.dslAdslService.lanDuplexlList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                      <FormGroup>
                              <Select title={"order-service.lineMode"}
                                  name={"vendormodel"}
                                  multiple={false} options={this.state.lineModelList}
                                  value={this.state.dslAdslService.lineModelList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                    </Col>
            </Row>
  
              <Row className="div-margin">
              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.vpi" name={"vpi"} value={this.state.dslAdslService.vpi || ''}
                                          placeholder={""} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="4">
                              <FormGroup>
                                      <Input inputtype={"text"} title="order-service.vci" name={"vci"} value={this.state.dslAdslService.vci || ''}
                                          placeholder={""} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>                 
                  <Col xs="12" sm="12" md="2">
                    <FormGroup>
                        <CheckBox
                            title={"createservicetypeorder.staticNat"}
                            name={"staticNat"}
                            options={this.state.dslAdslService.staticNat}
                            selectedOptions={this.state.dslAdslService.staticNat}
                            handleChange={this.handleCheckBox}
                            defaultChecked={this.state.dslAdslService.staticNat}
                        />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="2">
                      <FormGroup>
                          <CheckBox
                              title={"createservicetypeorder.dynamicNat"}
                              name={"dynamicNat"}
                              options={this.state.dslAdslService.dynamicNat}
                              selectedOptions={this.state.dslAdslService.dynamicNat}
                              handleChange={this.handleCheckBox}                            
                          />
                      </FormGroup>
                  </Col>              
              </Row>
             
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                    <Input inputtype={"text"}
                        title={"createservicetypeorder.lanNetworkAddressRange"}
                        name={"lanNetworkAddressRange"} value={this.state.dslAdslService.lanNetworkAddressRange || ''}
                        placeholder={""} onChange={this.handleInput} required={false} />
                </Col>
                <Col style={{marginTop:'25px'}} xs="12" sm="4" md="4"  className="badge-right">             
                  <Badge variant="success">Edit</Badge>
                   &nbsp;<span>|</span>&nbsp;            
                  <Badge variant="success">Get Address</Badge>
               &nbsp;<span>|</span>&nbsp;        
                  <Badge variant="success" >EIP Allocation</Badge>                
               </Col>            
                  <Col xs="12" sm="12" md="4">
                <FormGroup>
                <Input inputtype={"text"} title="createservicetypeorder.lanSubnetMask"
                         name={"lanSubnetMask"} value={this.state.dslAdslService.lanSubnetMask}
                            placeholder={"Enter Subnet Mask"} onChange={this.handleInput} /> 
                  </FormGroup>
                  </Col>
              </Row>        
  
                <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  <Translation>{t => <>{t('createservicetypeorder.pppDetails')}</>}</Translation>
                </Col>
              </Row>          
                  <Row className="div-margin">
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.dslUserName"}
                                  name={"dslUserName"} value={this.state.dslAdslService.dslUserName || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.dslPassword"}
                                  name={"dslPassword"} value={this.state.dslAdslService.dslPassword || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col style={{marginTop:'25px'}} xs="12" sm="4" md="4"  className="badge-right">              
                  <Badge variant="success">Generate Passowrd</Badge>                          
               </Col>
                      
                      {/* <Col xs="12" sm="12" md="4" style={{marginTop:"1.8%"}}>
                      <img src={password4} alt="Generate Passowrd" height="35" width="35" />
                     </Col> */}
                    </Row>
                    <Row className="div-margin">
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                          <label htmlFor="name" className="form-label">
                          Framed Protocol</label>                     
                          <div>PPP</div> 
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute0"}
                                  name={"framedRoute0"} value={this.state.dslAdslService.framedRoute0 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute1"}
                                  name={"framedRoute1"} value={this.state.dslAdslService.framedRoute1 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                  </Row>
                  <Row className="div-margin">
                  <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute2"}
                                  name={"framedRoute2"} value={this.state.dslAdslService.framedRoute2 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute3"}
                                  name={"framedRoute3"} value={this.state.dslAdslService.framedRoute3 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute4"}
                                  name={"framedRoute4"} value={this.state.dslAdslService.framedRoute4 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                  </Row>
  
                  <Row className="div-margin">
                  <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute5"}
                                  name={"framedRoute5"} value={this.state.dslAdslService.framedRoute5 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute6"}
                                  name={"framedRoute6"} value={this.state.dslAdslService.framedRoute6 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.framedRoute7"}
                                  name={"framedRoute7"} value={this.state.dslAdslService.framedRoute7 || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                  </Row>
                  <Row className="div-margin">
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.univirtaulrouteName"}
                                  name={"univirtaulrouteName"} value={this.state.dslAdslService.univirtaulrouteName || ''}
                                  placeholder={"inet"} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.uniloopbackInterface"}
                                  name={"uniloopbackInterface"} value={this.state.dslAdslService.uniloopbackInterface || ''}
                                  placeholder={"loopback2"} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.uniingressPolicy"}
                                  name={"uniingressPolicy"} value={this.state.dslAdslService.uniingressPolicy || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>                   
                  </Row>
                  <Row className="div-margin">
                  <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Input inputtype={"text"}
                                  title={"createservicetypeorder.uniingresspolicyName"}
                                  name={"uniingresspolicyName"} value={this.state.dslAdslService.uniingresspolicyName || ''}
                                  placeholder={""} onChange={this.handleInput} required={false} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"createservicetypeorder.atmPcr"}
                                  name={"atmPcr"}
                                  multiple={false} options={this.state.atmPcrList}
                                  value={this.state.dslAdslService.atmPcrList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"createservicetypeorder.atmScr"}
                                  name={"atmScr"}
                                  multiple={false} options={this.state.atmScrList}
                                  value={this.state.dslAdslService.atmScrList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                     </Row>
                     <Row className="div-margin"> 
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"createservicetypeorder.atmMbs"}
                                  name={"atmMbs"}
                                  multiple={false} options={this.state.atmMbsList}
                                  value={this.state.dslAdslService.atmMbsList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"createservicetypeorder.atmCat"}
                                  name={"atmCat"}
                                  multiple={false} options={this.state.atmCatList}
                                  value={this.state.dslAdslService.atmCatList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"order-service.uniQosProfileName"}
                                  name={"uniQosProfileName"}
                                  multiple={false} options={this.state.uniQosProfileNameList}
                                  value={this.state.dslAdslService.uniQosProfileNameList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                  </Row>
  
                  <Row className="div-margin">
                     
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"order-service.qoSParameters"}
                                  name={"qoSParameters"}
                                  multiple={false} options={this.state.qoSParametersList}
                                  value={this.state.dslAdslService.qoSParametersList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"order-service.unisphereIGMPenable"}
                                  name={"unisphereIGMPenable"}
                                  multiple={false} options={this.state.unisphereIGMPenableList}
                                  value={this.state.dslAdslService.unisphereIGMPenableList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                      <Col xs='12' sm='12' md='4'>
                          <FormGroup>
                              <Select title={"order-service.unisphereIGMPVersion"}
                                  name={"unisphereIGMPVersion"}
                                  multiple={false} options={this.state.unisphereIGMPVersionList}
                                  value={this.state.dslAdslService.unisphereIGMPVersionList}
                                  handleChange={this.handleInput} />
                          </FormGroup>
                      </Col>
                  </Row>
                  <Row className="heading-green-row div-margin">
                          <Col className="heading-green" xs="12" sm="12" md="12">
                              Security Enhancements
                      </Col>
                      </Row>
                      <Row className="div-margin">
                          <Col xs='12' sm='12' md='3'>
                              <FormGroup>
                                  <CheckBox title={"order-service.routerBasedFirewall"}
                                      name={"routerBasedFirewall"} options={this.state.routerBasedFirewall}
                                      selectedOptions={this.state.dslAdslService.routerBasedFirewall}
                                      handleChange={this.handleChangeProactive} />
                              </FormGroup>
                          </Col>
                      </Row>
              <Row>
              <FormGroup style={{ marginLeft: '77%' }}>
                  <Button type={"secondary"} align={'right'} submit={true} title="common.next" />
                </FormGroup>
                <FormGroup>
                  <Button type={"secondary"} align={'right'} submit={true} title="common.cancel" />
                </FormGroup>
              </Row>
            </Form>
          </Container>
        </>
      );
    }
  }
  
  const labelStyle = {
    color: "gray",
    display: "inline-block",
    maxWidth: "100%",
    marginBottom: "5px",
    marginLeft:"35px",
    marginTop:"10px",
    fontWeight: "500"
  };
  const checkboxStyle = {
    marginLeft:"-23px"
  };