text: import React, { Component } from 'react';
  import { Alert, Button, Dropdown, DropdownButton, FormGroup, Modal } from 'react-bootstrap';
  import { Translation } from 'react-i18next';
  import { Col, Container, Row } from 'reactstrap';
  import * as Constant from '../../../../Base/Constant';
  import ModificationHistory from '../../../../Common/ModificationHistory/ModificationHistory';
  import CustomerTemplate from '../../../../Customer/CustomerTemplate';
  import DeviceList from '../../../../OrderService/DeviceList';
  import ViewCpeDevice from '../../../../OrderService/ViewCustomerOrderServiceDetails/ViewCpeDevice';
  import { Link } from 'react-router-dom';
  
  export default class ViewCOLTTotalERXBasedMultilink extends Component {
    constructor(props) {
      super(props);
      this.state = { 
        viewDslAdslService: {
          serviceIdentification: 'Test Service',
          serviceType: 'LAN Link',
          serviceSubType: 'LANLink Olo',
          interfaceSpeed: '10 GBPS',
          remark: 'Testing',
          email: 'test@test.com',
          phoneContact: '+9100034234', 
          vpnTechnology: 'Point-to-Point',
          serviceNameInNevion: 'Nevion',
          proactiveMonitoring:'No',
          performanceReporting:'Yes',
          smartMonitoring:'No',
          notificationManagementTeam:"None",
          singleEndPointCpe:'None',
          managementOrder: '123113',
          selectManagementOrder: '',
          intermediateTechnology: '',
          deliveryChannel: 'Reseller',
          circuitReference: 'BEFR/122/SPR',
          circuitType: 'Default',
          enni: 'No',
          modularMsp: 'No',
        },
        serviceType:'MDF',
        deleteServiceFlag:false,
        deleteSiteOrderFlag:false,
        ipvpList:[
          {"name":"show VRRP","code":"show_VRRP"},
          {"name":"show standby","code":"show_standby"},
          {"name":"show environment","code":"show_environment"},
          {"name":"show IP Mroute","code":"show IP Mroute"},
          {"name":"show mls qos maps","code":"showmlsqosmaps"},
        ]
      }
      this.deleteService = this.deleteService.bind(this);
      this.toggleDelete = this.toggleDelete.bind(this);
      this.toggleDeleteSiteOrder = this.toggleDeleteSiteOrder.bind(this);
    }
    toggleDeleteSiteOrder(){
      this.setState({ deleteSiteOrderFlag: !this.state.deleteSiteOrderFlag}); 
    }
    toggleDelete(){
      this.setState({ deleteServiceFlag: !this.state.deleteServiceFlag}); 
    }
    deleteService() {
        window.location = "#"+Constant.DELETE_CUSTOMER_URL;
    }
    render() {
      console.log('serviceType :', this.state.serviceType);
      return (
        <>
          <Alert style={{ paddingTop: '4px', paddingBottom: '4px' }} variant="success"> Service  successfully created.</Alert>
          <Container style={{ paddingTop: '4px', paddingBottom: '4px' }} className="div-border div-margin">
            <CustomerTemplate />        
            <Row className="div-margin1  heading-green" style={{ marginRight: "-14px" }}>
              <Col xs="12" sm="12" md="8"><Translation>{(t) => <>{t('order-service.service')} </>}</Translation>
                <ModificationHistory />
              </Col>
              <Col xs="12" sm="12" md="4" align="right">
                <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginRight: "-16px",marginTop:"-1px" }}>
                  <Dropdown.Item href={"#"+Constant.EDIT_COLT_TOTALERXBASEDMULTILILINK_URL}><Translation>{(t) => <>{t('common.edit')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item onClick={this.toggleDelete}><Translation>{(t) => <>{t('common.delete')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item href={"#"+Constant.MANAGE_SERVICE_URL}><Translation>{(t) => <>{t('common.manage')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item href="#">Synchronize</Dropdown.Item>  
                    <Dropdown.Item href="#">Show Infovista Report</Dropdown.Item> 
                    <Dropdown.Item href="#">Show New Infovista Report</Dropdown.Item>  
                    <Dropdown.Item href="#">Customer Report</Dropdown.Item> 
                    <Dropdown.Item href="#">Manage Subnets</Dropdown.Item> 
                    <Dropdown.Item href="#">dump</Dropdown.Item>
                </DropdownButton>
              </Col>  
            </Row>
            <Row className="div-margin">
              <Col style={{ fontSize: '11px' }} xs="12" sm="12" md="12"> <br />
                <Alert variant="danger" style={{ paddingTop: '2px', paddingBottom: '2px' }} dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }}>Errors</Alert.Heading>
                  <li>This service type must contain only one Provider Equipment (PE).</li>
                </Alert>
                <Alert style={{ fontSize: '11px', paddingTop: '2px', paddingBottom: '2px' }} variant="dark" dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }} >Sync Error</Alert.Heading>
                  <li> VistaPortal - user: [BRM.10.5001] JMS: No send permissions for event type "JMS::Queues::vistaportal" in client group "aptdev2.lon.queueClientGroup"</li>
                  <li>New VistaPortal - user: Error while creating file on remote host!</li>
                </Alert>
                <Alert style={{ fontSize: '11px', paddingTop: '2px', paddingBottom: '2px' }} variant="warning" dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }} >Warning</Alert.Heading>
                  <li>Warning 1.</li>
                  <li>Warning 2.</li>
                </Alert>
              </Col>
            </Row>
            <Col style={{ height: "2px" }} className="heading-green" xs="12" sm="12" md="12"></Col>
            <br />
            <Row className="div-margin">
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">
                  Service Identification</label>
                <div>IPV11111</div>
              </Col>
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">
                  Service Type  </label>
                <div>DSL</div>
              </Col>                     
              <Col xs='12' sm='12' md='4'>
                <FormGroup>
                  <label htmlFor="name" className="form-label">
                    Product Type</label>
                  <div>COLT Total - ERX Based - Multilink</div>
                </FormGroup>
              </Col>
            </Row>
            <Row className="div-margin">
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">Belongs to Bundle</label>
                <div>
                  <Link  className="customLink heading-green-1" to="#" exact="true" >IPV11111</Link>
                </div>
              </Col>
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">
                DSL Provider  </label>
                <div>Colt Dsl</div>
              </Col>  
              <Col xs='12' sm='12' md='4'>
                <FormGroup>
                  <label htmlFor="name" className="form-label">
                    Phone Contact </label>
                  <div>+15487187157</div>
                </FormGroup>
              </Col>            
            </Row>
            <Row className="div-margin">
             <Col xs="12" sm="12" md="4">
                <label htmlFor="name" className="form-label">Email</label>
                <div>test@colt.net</div>
              </Col>
              {/* <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">DSL Provider</label>
                <div>Colt DSL</div>
              </Col>
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">Speedy Surf</label>
                <div>No</div>
              </Col> */}
              <Col xs='12' sm='12' md='4'>
                <label htmlFor="name" className="form-label">Remark</label>
                <div>none</div>
              </Col>
            </Row><br/>
  
            <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>
                      <label htmlFor="name" className="form-label">
                        Performance Reporting </label>
                        <div>Yes</div>
                        </FormGroup>                        
                </Col>
                <Col xs='12' sm='12' md='4'>
                  <FormGroup>
                    <label htmlFor="name" className="form-label">
                      IP Guardian</label>
                    <div>No</div>
                    </FormGroup>                  
                  </Col>
                  <Col xs='12' sm='12' md='4'>
                  <FormGroup>
                    <label htmlFor="name" className="form-label">
                      Router Configuration View</label>
                    <div>No</div>
                    </FormGroup>
                  </Col>
            </Row>        
            <Row className="heading-green-row div-margin">
              <Col className="heading-green" xs="12" sm="12" md="12">
              Configuration Options
              </Col>
            </Row>
            <Row className="div-margin">
            <Col xs='12' sm='12' md='4'>
                        <FormGroup>
                      <label htmlFor="name" className="form-label">
                      QoS</label>
                        <div>No</div>
                        </FormGroup>                        
                </Col>              
            </Row>   
  
          
            <DeviceList title="order.device.pe_title" addLinkLabel="order.device.pe_device" addLinkUrl={Constant.PE_ADD_URL} editLinkUrl={Constant.PE_EDIT_URL} viewLinkUrl={Constant.PE_VIEW_URL}/>
            <ViewCpeDevice/>  
  
            <Modal size="sm"
              aria-labelledby="contained-modal-title-vcenter"
              centered show={this.state.deleteSiteOrderFlag} onHide={this.toggleDeleteSiteOrder}>
              <Modal.Header closeButton>
                  <Modal.Title> <Translation>{(t) => <>{t('order.addSiteOrder.deleteTitle')}</>}</Translation></Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  Are you sure that you want to delete this item?
              </Modal.Body> 
              <Modal.Footer>
              <Button variant="danger" onClick={this.deleteService}><Translation>{(t) => <>{t('common.delete')}</>}</Translation></Button>
              </Modal.Footer>
          </Modal>
          <Modal size="sm"
              aria-labelledby="contained-modal-title-vcenter"
              centered show={this.state.deleteServiceFlag} onHide={this.toggleDelete}>
              <Modal.Header closeButton>
                  <Modal.Title> <Translation>{(t) => <>{t('common.deleteService')}</>}</Translation></Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  Are you sure that you want to delete this item?
              </Modal.Body>
              <Modal.Footer>
              <Button variant="danger" onClick={this.deleteService}><Translation>{(t) => <>{t('common.delete')}</>}</Translation></Button>
              </Modal.Footer>
          </Modal>
          </Container>
        </>
      )
  
    }
  };
  