import React from 'react';
import { Col,  Form, FormGroup, Label, Input, Container ,Row,Button} from 'reactstrap';
import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader';
import swal from 'sweetalert'

class Registration extends React.Component {
  
  constructor(props){
      super(props);
      this.state = {
          signInEmail:'',
          signInPhoneno:'',
          signInName:'',
          signInSchool:'',
          signInten:'',
          signIntwelve:'',
          signInprofession:'',
          signInaddress:'',
          signInmessage:'',
          signInsection:'',
          signInpayment:'',
          signIntype:'',
          signIntransfer:'',
          detail:'   Register yourself for premium service'
      }
  }

  onTypeChange = (event) =>{
    this.setState({signIntype: event.target.value})
  }

  onTransferChange = (event) =>{
    this.setState({signIntransfer: event.target.value})
  }

  onProfessionChange = (event) =>{
    this.setState({signInprofession: event.target.value})
  }

  onDetailChange = (detail) =>{
    this.setState({detail: detail})
  }

  onAddressChange = (event) =>{
    this.setState({signInaddress: event.target.value})
  }

  onEmailChange = (event) =>{
      this.setState({signInEmail: event.target.value})
  }
  onTenChange = (event) =>{
    this.setState({signInten: event.target.value})
}
  onSchoolchange = (event) =>{
  this.setState({signInSchool: event.target.value})
  }
  onTwelveChange = (event) =>{
    this.setState({signIntwelve: event.target.value})
  }

  onNameChange = (event) =>{
      this.setState({signInName: event.target.value})
  }
  
  onPhonenoChange = (event) =>{
      this.setState({signInPhoneno: event.target.value})
  }

  onPaymentChange = (event) =>{
    this.setState({signInpayment: event.target.value})
  }
  onSectionChange = (event) =>{
    this.setState({signInsection: event.target.value})
  }

  onMessageChange = (event) =>{
    console.log(this.state.signIntype)
    if(this.state.signInpayment === "Done" ){
      if(this.state.signIntransfer === ""){
      swal("Oops!","Please fill the money transfered Id","warning")
      }
      if(this.state.signIntype === ""){
        swal("Oops!","Please choose the type of service registered","warning")
      }
    }
    this.setState({signInmessage: event.target.value})
  }

  onSubmitSignIn = () => {
    if(this.state.signInpayment === "Done" && (this.state.signIntransfer === "" || this.state.signIntype === "" ))
    {
      if(this.state.signIntransfer === ""){
      swal("Oops!","Please fill the money transfered Id","warning")
      }
      if(this.state.signIntype === "None"){
        swal("Oops!","Please choose the type of service registered","warning")
      }
    }
else{
  const env=process.env.NODE_ENV;
        const url = env === 'production'? 'http://35.188.161.64/server/service':'http://localhost:5000/service'
  fetch(
    url,{
    method:'post',
    headers: {'Content-Type':'application/json'},
          body:JSON.stringify({
              email:this.state.signInEmail,
              name:this.state.signInName, 
              phoneno:this.state.signInPhoneno,
              password:this.state.signInPassword,
              school:this.state.signInSchool,
              ten:this.state.signInten,
              twelve:this.state.signIntwelve,
              profession:this.state.signInprofession,
              address:this.state.signInaddress,
              message:this.state.signInmessage,
              section:this.state.signInsection,
              payment:this.state.signInpayment,
              type:this.state.signIntype,
              transferid:this.state.signIntransfer

          })
      })
      swal("Good job","Successfully registered for premium service","success")
     
    }
    this.props.onRouteChange("login");
  }

  render(){
return (
  <>
  <Breadcrumbs path="PremiumService" />
  <Subheader path="Premium Service" />
  <div data-aos="fade-up" data-aos-duration="1000" >
  <Container>
  <Row className="row-content">
      <Col className="bg-orange round-border" style={{padding:"5%"}}>
      <h2 class="text-white"><strong>Premire Service Registration</strong></h2><br></br>
      
      <div className="d-flex justify-content-center align-items-center bg-white" style={{padding:"40px 10px 40px"}}>
     
      <Container>
      <Form onSubmit={this.onSubmitSignIn }>
      <FormGroup row>
  <Label for="user" sm={2}>Name :</Label>
  <Col sm={10}>
    <Input type="text" className="input border-0" required onChange={this.onNameChange} name="name" id="user" placeholder="Your Name" ></Input>
  </Col>
</FormGroup>
<FormGroup row>
<Label for="email" sm={2}>Email</Label>
  <Col sm={10}>
    <Input type="email" name="email" onChange={this.onEmailChange} className="input border-0" id="email"  required placeholder="abc@gmail.com" />
  </Col>
</FormGroup>
<FormGroup row>
  <Label for="tel" sm={2}>Phone Number :</Label>
  <Col sm={10}>
    <Input type="tel" name="phoneno" onChange={this.onPhonenoChange} className="input border-0" id="tel" required placeholder="Mobile Number" />
  </Col>
</FormGroup>
<FormGroup row>
  <Label for="add" sm={2}>Address :</Label>
  <Col sm={10}>
    <Input type="text" name="address" onChange={this.onAddressChange} className="input border-0" id="add" required  placeholder="Your Address" />
  </Col>
</FormGroup>
<FormGroup row>
  <Label for="sec" sm={2}>10th Marks :</Label>
  <Col sm={10}>
    <Input type="number" name="secmark" onChange={this.onTenChange } required  className="input border-0" id="sec" />
  </Col>
</FormGroup>
<FormGroup row>
  <Label for="highersec" sm={2}>12th Marks :</Label>
  <Col sm={10}>
    <Input type="number" name="highersecmark" onChange={this.onTwelveChange} required className="input border-0" id="highersec" />
  </Col>
</FormGroup>
<FormGroup row>
  <Label for="sch" sm={2}>School / College Name :</Label>
  <Col sm={10}>
    <Input type="text" name="school" required  onChange={this.onSchoolchange} className="input border-0" id="sch" placeholder="School / College Name" />
  </Col>
</FormGroup>
<FormGroup tag="fieldset" row>
  <legend className="col-form-label col-sm-2">Profession :</legend>
  <Col sm={10}>      
    <FormGroup check>
      <Label check>
        <Input type="radio" name="Profession" required  value="student" id="student" onChange={this.onProfessionChange} />{' '}
        Student
      </Label>
    </FormGroup>
    <FormGroup check>
      <Label check>
        <Input type="radio" name="Profession" value="working" id="working" onChange={this.onProfessionChange} />{' '}
        Working
      </Label>
    </FormGroup>
  </Col>
</FormGroup><br></br>
<FormGroup tag="fieldset" row>
  <legend className="col-form-label col-sm-2">Premium Section :</legend>
  <Col sm={10}>      
    <FormGroup check>
      <Label check>
        <Input type="radio" name="service" required  onChange={this.onSectionChange} value="College / Career Guidance" />{' '}
        College / Career Guidance
      </Label>
    </FormGroup>
    <FormGroup check>
      <Label check>
        <Input type="radio" name="service" onChange={this.onSectionChange} value="UPSC / TNPSC"  />{' '}
        UPSC / TNPSC
      </Label>
    </FormGroup>
  </Col>
</FormGroup>
<ul style={{color:"red"}} >
      <li><p className="text-muted" style={{fontSize:"0.8em"}}>Payment ₹.100 for Career Guidance/Asking All abouts about Joining Colleges.</p></li>
      <li><p className="text-muted"  style={{fontSize:"0.8em"}}>Payment ₹.200 for UPSC / TNPSC Guidance</p></li>
      <li><p className="text-muted"  style={{fontSize:"0.8em"}}>Payment ₹.500 for Complete Guidance till College Selection & Membership for Vision(valid for 2021).</p>
      Method of Payment - Through Gpay/Paytm/Phonepay/Whatsapp pay/Direct Bank Transfer.After Proper Payment, Call will be Scheduled for Each Student - <span className="text-black">6383279480 /9786901170</span></li>
  </ul>
  <FormGroup tag="fieldset" row>
  <legend className="col-form-label col-sm-2">Payment :</legend>
  <Col sm={10}>      
    <FormGroup check>
      <Label check>
        <Input type="radio" required  name="payment" value="Done" onChange={this.onPaymentChange} />{' '}
        Done
      </Label>
    </FormGroup>
    <FormGroup check>
      <Label check>
        <Input type="radio" name="payment" value="Pending" onChange={this.onPaymentChange} />{' '}
        Pending
      </Label>
    </FormGroup>
  </Col>
</FormGroup><br></br>
<FormGroup row>
  <Col sm={4} >
    <Row>
  <Label for="exampleSelect" sm={6}>Service type :</Label>
        <Col >
          <Input type="select" className="input border-0" name="type" id="exampleSelect" onChange={this.onTypeChange}>
          <option value="select" selected disabled hidden>Select type</option>
            <option value="100">₹.100</option>
            <option value="200">₹.200</option>
            <option value="500">₹.500</option>
            <option value="None">None</option>
          </Input>
        </Col>
        </Row>
  </Col>
  <Col sm={8}>
    <Row>
    <Label for="transfer" sm={2}>Transfer Id :</Label>
  <Col >
    <Input type="text" name="transferid" onChange={this.onTransferChange} className="input border-0" id="transfer" placeholder="Transfer Id" />
  </Col>
    </Row>

  </Col>
        
  </FormGroup>
  <br></br>
<FormGroup row>
  <Label for="comment"  sm={2}>Message :</Label>
  <Col sm={10}>
  <Input type="textarea" className="input" onChange={this.onMessageChange} required name="text" rows="3"  id="comment" />
  </Col>        
</FormGroup>

<FormGroup check row>
  <Col sm={{ size: 10, offset: 2 }}>
    <Button type="submit" className="border-0  m-3 " style={{paddingRight:"25px",paddingLeft:"25px"}}>Register</Button>

    <Button type="reset" className="border-0  p" style={{paddingRight:"25px",paddingLeft:"25px"}}>Reset</Button>
  </Col>
</FormGroup> 
</Form>
      </Container>
      </div>
      </Col>
  </Row>
</Container>
</div>
</>
  )}
}

export default Registration;