import React, {Component} from "react";
import axios from "axios";
import * as configs from "../Config/config";
import ItemNav from "./Navbar";

export default class SignUp extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isClickStudent: true,
            isClickTutor: false,
            isClickInstitute: false,
            streams: ['Commerce stream', 'Physical Science Stream ', 'Biological Science Stream', 'Technology Stream', 'Art Stream'],
            subjects: ['Economics', 'Geography', 'Business statistics', 'Business Studies',
                'Accounting', 'Logic & Scientific Method', 'History of India', 'History of Europe', 'History of Modern World',
                'English', 'French', 'German', 'Agricultural Science', 'Mathematics', 'Political Science', 'Combined Mathematics', 'Information & Communication Technology'],
            district: '',
            userSelectedSubject: [],
            tutorSelectedCity:[],
            newSubject: '',
            tempSubjectList: [],
            tempCityList: [],
            instituteList: ['Sakya Nugegoda', 'Montana Kiribathgoda', 'Wasiti Kiribathgoda'],
            newInstitute: '',
            userSelectedInstitutes: [],
            tempInstituteList: [],
            isCheckedInstitute: false,
            isCheckedInstituteOnlineClass: false,
            isCheckedInstituteHomeVisit: false,
            districts : ['Colombo', 'Gampaha', 'Galle', 'Kandy', 'Kaluthara'],
            Colombo : ['Colombo1', 'Dehiwala', 'Homagama', 'Kaduwela', 'Kesbewa',
                'Kolonnawa', 'Maharagama', 'Moratuwa', 'Padukka', 'Ratmalana', 'Seethawaka', 'Kotte', 'Thimbigasyaya'],
            Gampaha : ['Attanagalla', 'Biyagama', 'Divlapitiya', 'Dompe', 'Gampaha', 'Ja-Ela',
                'Katana', 'Kelaniya', 'Mahara', 'Minuwandoga', 'Mirigama', 'Negombo', 'Wattala'],
            isSelectedDistrict : false,
            citiesList : [],
            mediums : ['Sinhala Medium', 'English Medium', 'Tamil Medium'],
            selectedButtonColour : '#216E9B',
            unSelectedButtonColor : '#265077',
            studentButtonColor : '#216E9B',
            tutorButtonColor : '#265077',
            instituteButtonColor : '#265077',
            institutePhoneNoOnChange : '',
            uerAddedInstitutePhoneList : [],
            tempInstitutePhoneList : [],
            emptyVariable : '',
            name : '',
            nic : '',
            email : '',
            phoneNo : '',
            address : '',
            gender : '',
            password : '',
            guardianName : '',
            guardianEmail : '',
            relationship : '',
            isConditionChecked : false,
            marriageStatus : '',
            tutorStream : '',
            city : '',
            medium : '',
            InstituteCity : '',
            InstituteStreet : '',
            InstituteApartment : '',
            InstituteRegistrationNo : '',
            tutorQualification:'',
        }


        this.onClickStudent = this.onClickStudent.bind(this);
        this.onClickTutor = this.onClickTutor.bind(this);
        this.onClickInstitute = this.onClickInstitute.bind(this);
        this.onClickAddSubjectButton = this.onClickAddSubjectButton.bind(this);
        this.onClickSubjectRemoveButton = this.onClickSubjectRemoveButton.bind(this);
        this.onChangeInstituteDropDown = this.onChangeInstituteDropDown.bind(this);
        this.onClickAddInstituteButton = this.onClickAddInstituteButton.bind(this);
        this.onClickInstituteRemoveButton = this.onClickInstituteRemoveButton.bind(this);
        this.onChangeInstituteCheckBox = this.onChangeInstituteCheckBox.bind(this);
        this.FindCities = this.FindCities.bind(this);
        this.onChangeInstitutePhoneNo = this.onChangeInstitutePhoneNo.bind(this);
        this.onClickAddInstitutePhoneNoButton = this.onClickAddInstitutePhoneNoButton.bind(this);
        this.onClickInstitutePhoneNoRemoveButton = this.onClickInstitutePhoneNoRemoveButton.bind(this);
        this.onChangeConditionCheckBox = this.onChangeConditionCheckBox.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeNIC = this.onChangeNIC.bind(this);
        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePhoneNo = this.onChangePhoneNo.bind(this);
        this.onChangeAddress = this.onChangeAddress.bind(this);
        this.onChangeGender = this.onChangeGender.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);
        this.onChangeGuardianName = this.onChangeGuardianName.bind(this);
        this.onChangeGuardianEmail = this.onChangeGuardianEmail.bind(this);
        this.onChangeGuardianRelationship = this.onChangeGuardianRelationship.bind(this);
        this.onSubmitStudent = this.onSubmitStudent.bind(this);
        this.onSubmitTutor = this.onSubmitTutor.bind(this);
        this.onSubmitInstitute = this.onSubmitInstitute.bind(this);
        this.onChangeStatus = this.onChangeStatus.bind(this);
        this.SetToDefault = this.SetToDefault.bind(this);
        this.onChangeStream = this.onChangeStream.bind(this);
        this.onChangeInstituteOnlineClassCheckBox = this.onChangeInstituteOnlineClassCheckBox.bind(this);
        this.onChangeInstituteHomeVisitCheckBox = this.onChangeInstituteHomeVisitCheckBox.bind(this);
        this.onChangeStream = this.onChangeStream.bind(this);
        this.OnChangeMedium = this.OnChangeMedium.bind(this);
        this.OnChangeInstituteApartment = this.OnChangeInstituteApartment.bind(this);
        this.OnChangeInstituteStreet = this.OnChangeInstituteStreet.bind(this);
        this.OnChangeInstituteCity = this.OnChangeInstituteCity.bind(this);
        this.OnChangeInstituteRegistrationNo = this.OnChangeInstituteRegistrationNo.bind(this);
        this.OnChangeQualification = this.OnChangeQualification.bind(this);
        this.onClickAddCityButton = this.onClickAddCityButton.bind(this);
        this.onClickCityRemoveButton = this.onClickCityRemoveButton.bind(this);
    }

    componentDidMount() {
        axios.get(configs.BASE_URL + '/instituteSingUp/' )
            .then(response =>{
                if(response.data.length > 0){
                    console.log(response.data);
                    this.setState({
                        instituteList : response.data
                    })
                }
            })

    }

    onClickStudent() {
        this.setState({
            isClickStudent: true,
            isClickTutor: false,
            isClickInstitute: false,
            studentButtonColor : this.state.selectedButtonColour,
            tutorButtonColor : this.state.unSelectedButtonColor,
            instituteButtonColor : this.state.unSelectedButtonColor,
        });

        this.SetToDefault();
    }

    onClickTutor() {
        this.setState({
            isClickStudent: false,
            isClickTutor: true,
            isClickInstitute: false,
            studentButtonColor : this.state.unSelectedButtonColor,
            tutorButtonColor : this.state.selectedButtonColour,
            instituteButtonColor : this.state.unSelectedButtonColor,
        });
        this.SetToDefault();
    }

    onClickInstitute() {
        this.setState({
            isClickStudent: false,
            isClickTutor: false,
            isClickInstitute: true,
            studentButtonColor : this.state.unSelectedButtonColor,
            tutorButtonColor : this.state.unSelectedButtonColor,
            instituteButtonColor : this.state.selectedButtonColour,
        });
        this.SetToDefault();
    }

    onClickAddSubjectButton() {

        let oldSubject = []
        let temSubjectList02 = []
        if (this.state.newSubject !== '') {
            oldSubject = this.state.userSelectedSubject.slice();
            oldSubject.push(this.state.newSubject);
            this.setState({
                userSelectedSubject: oldSubject
            }, () => {
                for (let i = 0; i < this.state.userSelectedSubject.length; i++) {
                    temSubjectList02.push(this.state.userSelectedSubject[i] + ' | ');
                }
                this.setState({
                    tempSubjectList: temSubjectList02
                })
            })


            console.log("Subject List : " + oldSubject);
        }
    }

    onClickSubjectRemoveButton() {
        let oldSubject = [];
        let oldSubject02 = [];

        oldSubject = this.state.userSelectedSubject.slice();
        oldSubject02 = this.state.tempSubjectList.slice();
        let popped = oldSubject.pop();
        let popped2 = oldSubject02.pop();

        this.setState({
            userSelectedSubject: oldSubject,
            tempSubjectList: oldSubject02
        })

    }

    onChangeSubjectDropDown(value) {

        this.setState({
            newSubject: value
        })
    }

    OnChangeCity(e){
        this.setState({
            city : e
        });

    }

    onClickAddCityButton(){
        let oldCity = []
        let temCitytList02 = []
        if (this.state.city !== '') {
            console.log("City : " + this.state.city);
            oldCity = this.state.tutorSelectedCity.slice();
            oldCity.push(this.state.city);
            this.setState({
                tutorSelectedCity: oldCity
            }, () => {
                for (let i = 0; i < this.state.tutorSelectedCity.length; i++) {
                    temCitytList02.push(this.state.tutorSelectedCity[i] + ' | ');
                }
                this.setState({
                    tempCityList: temCitytList02
                })
            })


            console.log("City List : " + oldCity);
        }
    }

    onClickCityRemoveButton() {
        let oldCity = [];
        let oldCity02 = [];

        oldCity = this.state.tutorSelectedCity.slice();
        oldCity02 = this.state.tempCityList.slice();
        let popped = oldCity.pop();
        let popped2 = oldCity02.pop();

        this.setState({
            tutorSelectedCity: oldCity,
            tempCityList: oldCity02
        })

    }
    onChangeInstituteDropDown(value) {

        // console.log(value);
        // console.log(value.target);
        // console.log(value.id);
        this.setState({
            newInstitute: value.target.value
        })
    }

    onClickAddInstituteButton() {

        let oldInstitute = [];
        let temInstituteList02 = [];
        if (this.state.newInstitute !== '') {
            oldInstitute = this.state.userSelectedInstitutes.slice();
            oldInstitute.push(this.state.newInstitute);
            this.setState({
                userSelectedInstitutes: oldInstitute
            }, () => {
                for (let i = 0; i < this.state.userSelectedInstitutes.length; i++) {
                    temInstituteList02.push(this.state.userSelectedInstitutes[i] + ' | ');
                }
                this.setState({
                    tempInstituteList: temInstituteList02
                })
            })


            console.log("Institute List : " + this.state.userSelectedInstitutes);
        }
    }

    onClickInstituteRemoveButton() {
        let oldInstitute = [];
        let oldInstitute02 = [];

        oldInstitute = this.state.userSelectedInstitutes.slice();
        oldInstitute02 = this.state.tempInstituteList.slice();
        let popped = oldInstitute.pop();
        let popped2 = oldInstitute02.pop();

        this.setState({
            userSelectedInstitutes: oldInstitute,
            tempInstituteList: oldInstitute02
        })

    }

    onChangeInstituteCheckBox() {

        if (this.state.isCheckedInstitute === false) {
            this.setState({
                isCheckedInstitute: true
            })
        } else {
            this.setState({
                isCheckedInstitute: false
            })
        }

    }

    onChangeInstituteOnlineClassCheckBox() {

        if (this.state.isCheckedInstituteOnlineClass === false) {
            this.setState({
                isCheckedInstituteOnlineClass: true
            })
        } else {
            this.setState({
                isCheckedInstituteOnlineClass: false
            })
        }

    }

    onChangeInstituteHomeVisitCheckBox() {

        if (this.state.isCheckedInstituteHomeVisit === false) {
            this.setState({
                isCheckedInstituteHomeVisit: true
            })
        } else {
            this.setState({
                isCheckedInstituteHomeVisit: false
            })
        }

    }

    FindCities(value){
        this.setState({
            isSelectedDistrict : true,
            district : value

        }, () => {
            let dist = this.state[value]
            this.setState({
                citiesList : dist
            }, () => {
                console.log(this.state.citiesList)
            });
        });
    }

    onChangeInstitutePhoneNo(e){

        if(e.target.value >= 0){
            this.setState({
                institutePhoneNoOnChange : e.target.value
            });
        }

    }

    onClickAddInstitutePhoneNoButton() {

        let oldInstitutePN = [];
        let temInstitutePNList02 = [];
        if (this.state.institutePhoneNoOnChange !== '') {
            oldInstitutePN = this.state.uerAddedInstitutePhoneList.slice();
            oldInstitutePN.push(this.state.institutePhoneNoOnChange);
            this.setState({
                uerAddedInstitutePhoneList: oldInstitutePN
            }, () => {
                for (let i = 0; i < this.state.uerAddedInstitutePhoneList.length; i++) {
                    temInstitutePNList02.push(this.state.uerAddedInstitutePhoneList[i] + ' | ');
                }
                this.setState({
                    tempInstitutePhoneList: temInstitutePNList02,
                    institutePhoneNoOnChange :''
                })

            })
        }
    }

    onClickInstitutePhoneNoRemoveButton() {
        let oldInstitutePN = [];
        let oldInstitutePN02 = [];

        oldInstitutePN = this.state.uerAddedInstitutePhoneList.slice();
        oldInstitutePN02 = this.state.tempInstitutePhoneList.slice();
        let popped = oldInstitutePN.pop();
        let popped2 = oldInstitutePN02.pop();

        this.setState({
            uerAddedInstitutePhoneList: oldInstitutePN,
            tempInstitutePhoneList: oldInstitutePN02
        })

    }

    //On Change Methods for text box

    onChangeName(e){
        this.setState({
            name : e.target.value
        });

    }
    onChangeNIC(e){
        this.setState({
            nic : e.target.value
        });

    }
    onChangeEmail(e){
        this.setState({
            email : e.target.value
        });

    }
    onChangePhoneNo(e){
        this.setState({
            phoneNo : e.target.value
        });

    }
    onChangeAddress(e){
        this.setState({
            address : e.target.value
        });

    }
    onChangeGender(e){
        this.setState({
            gender : e
        });

    }
    onChangePassword(e){
        this.setState({
            password : e.target.value
        });

    }
    onChangeGuardianName(e){
        this.setState({
            guardianName : e.target.value
        });

    }
    onChangeGuardianEmail(e){
        this.setState({
            guardianEmail : e.target.value
        });

    }
    onChangeGuardianRelationship(e){
        this.setState({
            relationship : e
        });

    }
    onChangeConditionCheckBox(e){
        this.setState({
            isConditionChecked : e.target.value
        });

    }
    onChangeStatus(e){
        this.setState({
            marriageStatus : e
        });

    }


    onChangeStream(e){
        this.setState({
            tutorStream : e
        });

    }
    OnChangeMedium(e){
        this.setState({
            medium : e
        });

    }

    OnChangeInstituteApartment(e){
        this.setState({
            InstituteApartment : e.target.value
        });

    }

    OnChangeInstituteStreet(e){
        this.setState({
            InstituteStreet : e.target.value
        });

    }

    OnChangeInstituteCity(e){
        this.setState({
            InstituteCity : e.target.value
        });

    }

    OnChangeQualification(e){
        this.setState({
            tutorQualification : e.target.value
        });
    }

    OnChangeInstituteRegistrationNo(e){
        this.setState({
            InstituteRegistrationNo : e.target.value
        });

    }

    SetToDefault(){

        this.setState({
            student_name : '',
            student_nic : '',
            student_email : '',
            student_phone : '',
            student_address : '',
            student_password : '',
            student_gender : '',
            student_image : '',
            guardian_name : '',
            guardian_email : '',
            guardian_relationship : '',
            isConditionChecked : false,
            institutePhoneNoOnChange : '',
            tempInstitutePhoneList : '',
            InstituteApartment : '',
            InstituteStreet : '',
            InstituteCity : '',
            tutorQualification : '',

        })

    }

    onSubmitStudent(e){
        e.preventDefault();

        const student = {
            student_name : this.state.name,
            student_nic : this.state.nic,
            student_email : this.state.email,
            student_phone : this.state.phoneNo,
            student_address : this.state.address,
            student_password : this.state.password,
            student_gender : this.state.gender,
            student_image : '',
            guardian_name : this.state.guardianName,
            guardian_email : this.state.guardianEmail,
            guardian_relationship : this.state.relationship,

        }

        if(this.state.email === this.state.guardianEmail){
            alert("Please give guardian correct email address...");
        }
        else {
            axios.post(configs.BASE_URL + '/studentSingUp/add', student)
                .then(res =>{
                    //console.log("Inside Then")
                    window.location = '/beforeConfirm'
                })
                .catch(function (error) {
                    if (error.response) {
                        // The request was made and the server responded with a status code
                        // that falls out of the range of 2xx
                        //console.log(error.response.data);
                        //console.log(error.response.status);
                        //console.log(error.response.headers);

                        if(error.response.status == 500){
                            alert("Your Email Already Registered.")
                        }


                    } else if (error.request) {
                        // The request was made but no response was received
                        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                        // http.ClientRequest in node.js
                       // console.log(error.request);
                    } else {
                        // Something happened in setting up the request that triggered an Error
                        //console.log('Error', error.message);
                    }
                    //console.log(error.config);
                });
        }



    }

    onSubmitTutor(e){
        e.preventDefault();

        const instituteIDs = [];
        if(this.state.userSelectedInstitutes.length > 0){

            this.state.userSelectedInstitutes.map(inst => {

                this.state.instituteList.map(name => {
                    if(inst === name.institute_name){
                        instituteIDs.push(name._id);
                    }
                })
                }
            )

        }
        let ClassType = [];
        if(this.state.isCheckedInstituteOnlineClass){
            ClassType.push("Online class");
        }
        if(this.state.isCheckedInstituteHomeVisit){
            ClassType.push("Home Visit");
        }
        if(this.state.isCheckedInstitute){
            ClassType.push("Institute");
        }

        const Tutor = {
            tutor_name : this.state.name,
            tutor_nic : this.state.nic,
            tutor_email : this.state.email,
            tutor_phone : this.state.phoneNo,
            tutor_address : this.state.address,
            tutor_password : this.state.password,
            tutor_gender : this.state.gender,
            tutor_status : this.state.marriageStatus,
            tutor_image : '',
            tutor_Stream : this.state.tutorStream,
            tutor_subjects : this.state.userSelectedSubject,
            tutor_class_type : ClassType,
            tutor_instituteIDList : instituteIDs,
            tutor_main_district : this.state.district,
            tutor_main_city : this.state.tutorSelectedCity,
            tutor_medium : this.state.medium,
            tutor_qualification : this.state.tutorQualification
        }
        console.log(Tutor)

        axios.post(configs.BASE_URL + '/tutorSingUp/add', Tutor)
            .then(res =>{
                //console.log("Inside Then")
                window.location = '/beforeConfirm'
            })
            .catch(function (error) {
                if (error.response) {
                    // The request was made and the server responded with a status code
                    // that falls out of the range of 2xx
                    console.log(error.response.data);
                    //console.log(error.response.status);
                    //console.log(error.response.headers);

                    if(error.response.status == 500){
                        alert("Your Email Already Registered.")
                    }


                } else if (error.request) {
                    // The request was made but no response was received
                    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                    // http.ClientRequest in node.js
                    // console.log(error.request);
                } else {
                    // Something happened in setting up the request that triggered an Error
                    //console.log('Error', error.message);
                }
                //console.log(error.config);
            });

    }

    onSubmitInstitute(e){
        e.preventDefault();

        const instAddress = this.state.InstituteApartment + ", " + this.state.InstituteStreet + ", " + this.state.InstituteCity;

        const institute = {
            institute_name : this.state.name,
            institute_email : this.state.email,
            institute_phones : this.state.uerAddedInstitutePhoneList,
            institute_address : instAddress,
            institute_city : this.state.InstituteCity,
            institute_password : this.state.password,
            institute_registrationNo : this.state.InstituteRegistrationNo,
            institute_image : '',


        }
        this.SetToDefault();
        console.log(institute);

        axios.post(configs.BASE_URL + '/instituteSingUp/add', institute)
            .then(res =>{
                //console.log("Inside Then")
                window.location = '/beforeConfirm'
            })
            .catch(function (error) {
                if (error.response) {
                    // The request was made and the server responded with a status code
                    // that falls out of the range of 2xx
                    //console.log(error.response.data);
                    //console.log(error.response.status);
                    //console.log(error.response.headers);

                    if(error.response.status == 500){
                        alert("Your Email Already Registered.")
                    }


                } else if (error.request) {
                    // The request was made but no response was received
                    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                    // http.ClientRequest in node.js
                    // console.log(error.request);
                } else {
                    // Something happened in setting up the request that triggered an Error
                    //console.log('Error', error.message);
                }
                //console.log(error.config);
            });


    }


    render() {
        return (
            <div>
                <div className="row" style={{width:'100%', margin:'0px'}}>
                    <ItemNav/>
                </div>
                <div className="container" style={{paddingTop:'50px'}}>

                <div style={{
                    width: '50%',
                    margin: 'auto',
                    marginTop: '3%',
                    marginBottom: '30px',
                    paddingTop: '0px',
                    paddingBottom: '30px',
                    border: 'solid',
                    borderColor: '#216E9B'
                }}>

                    <div className="row">
                        <br/>
                    </div>

                    <div className="row" style={{display: 'flex', justifyContent: 'center'}}>
                        <h3 style={{fontFamily: 'emoji', color: '#265077', margin: '20px', textAlign: 'center'}}><b>USER
                            SIGN UP</b></h3>
                    </div>


                    <div className="row" style={{display: 'flex', justifyContent: 'center'}}>
                        <div className="col-3">
                            <button type="button" className="btn btn-primary" onClick={this.onClickStudent}
                                    style={{
                                        width: '100%',
                                        marginTop: '0px',
                                        backgroundColor: this.state.studentButtonColor,
                                        borderColor: '#216E9B'
                                    }}><b>Student</b></button>
                        </div>
                        <div className="col-3">
                            <button type="button" className="btn btn-primary" onClick={this.onClickTutor}
                                    style={{
                                        width: '100%',
                                        marginTop: '0px',
                                        backgroundColor: this.state.tutorButtonColor,
                                        borderColor: '#216E9B'
                                    }}><b>Tutor</b></button>
                        </div>
                        <div className="col-3">
                            <button type="button" className="btn btn-primary" onClick={this.onClickInstitute}
                                    style={{
                                        width: '100%',
                                        marginTop: '0px',
                                        backgroundColor: this.state.instituteButtonColor,
                                        borderColor: '#216E9B'
                                    }}><b>Institute</b></button>
                        </div>
                    </div>
                    {this.state.isClickStudent === true ?
                        <div>
                            <form onSubmit={this.onSubmitStudent} id="signup" name="signup" className="signup">
                                <div className="row"
                                     style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
                                    <h5 style={{marginTop: '30px', color: '#8c8c8c'}}>STUDENT DETAILS</h5>
                                </div>
                                <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Student Name</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>

                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="text" id="studentName" className="form-control"
                                               placeholder="First Name & Last Name" onChange={this.onChangeName}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Student NIC</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="Text" id="nic" className="form-control"
                                               placeholder="NIC" onChange={this.onChangeNIC}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Student Email</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="email" id="stdEmail" className="form-control"
                                               placeholder="Email" onChange={this.onChangeEmail}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Phone Number</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="tel" id="phoneNo" className="form-control"
                                               placeholder="+94 71 222 3333" onChange={this.onChangePhoneNo}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Address</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="text" id="stdAddress" className="form-control"
                                               placeholder="Apartment #, street, city " onChange={this.onChangeAddress}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Gender</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <select className="form-control" style={{width: '90%'}}
                                        onChange={e => this.onChangeGender(e.target.value)}>
                                            <option  disabled selected>Select the Gender</option>
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>


                                        </select>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Password</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="password" id="stdpsw" className="form-control"
                                               placeholder="password" onChange={this.onChangePassword}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row"
                                     style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
                                    <h5 style={{marginTop: '10px', color: '#8c8c8c'}}>GUARDIAN DETAILS</h5>
                                </div>
                                <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Guardian Name</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>

                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="text" id="studentName" className="form-control"
                                               placeholder="First Name & Last Name" onChange={this.onChangeGuardianName}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Guardian Email</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <input type="email" id="gdEmail" className="form-control"
                                               placeholder="Email" onChange={this.onChangeGuardianEmail}
                                               style={{width: '90%'}} required/>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <h5 style={{float: 'left', color: '#216E9B'}}>Relationship with Guardian</h5>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                        <select className="form-control" style={{width: '90%'}}
                                                onChange={e => this.onChangeGuardianRelationship(e.target.value)}>
                                            <option value="0" disabled selected>Select the Relationship</option>
                                            <option >Father</option>
                                            <option >Mother</option>
                                            <option >Other</option>

                                        </select>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                    <div className="col-1">

                                    </div>
                                    <div className="col-10">
                                        <input type="checkbox" id="condition" className="form-control"
                                               onChange={this.onChangeConditionCheckBox}
                                               defaultChecked={this.state.isConditionChecked}
                                               style={{
                                                   width: '20px',
                                                   height: '20px',
                                                   float: 'left',
                                                   marginLeft: '25px',
                                                   marginTop: '15px'
                                               }}
                                               required/>
                                        <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}> I Confirm
                                            I have read the terms and conditions.</label>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                                <div className="row" style={{
                                    marginTop: '35px',
                                    marginBottom: '5px',
                                    display: 'flex',
                                    justifyContent: 'center'
                                }}>
                                    <button type="submit" className="btn btn-primary" style={{
                                        width: '50%',
                                        marginTop: '0px',
                                        backgroundColor: '#265077',
                                        borderColor: '#216E9B'
                                    }}><b>SIGN UP</b></button>
                                </div>
                            </form>
                        </div>

                        :

                        <div>
                            {this.state.isClickStudent === false && this.state.isClickInstitute === false && this.state.isClickTutor === true ?

                                <div>
                                    <form onSubmit={this.onSubmitTutor} id="signupTutor" name="signupTutor"
                                          className="signupTutor">
                                        <div className="row"
                                             style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
                                            <h5 style={{marginTop: '30px', color: '#8c8c8c'}}>TUTOR DETAILS</h5>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Tutor Name</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="tutorName" className="form-control"
                                                       placeholder="First Name & Last Name"
                                                       onChange={this.onChangeName}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Tutor NIC</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="Text" id="tutorNic" className="form-control"
                                                       placeholder="NIC" onChange={this.onChangeNIC}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Tutor Email</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="email" id="tutorEmail" className="form-control"
                                                       placeholder="Email" onChange={this.onChangeEmail}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Phone Number</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="tel" id="tutorPhoneNo" className="form-control"
                                                       placeholder="+94 71 222 3333" onChange={this.onChangePhoneNo}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Address</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="tutorAddress" className="form-control"
                                                       placeholder="Apartment #, street, city "
                                                       onChange={this.onChangeAddress}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Gender</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.onChangeGender(e.target.value)}>
                                                    <option value="0" disabled selected>Select the Gender</option>
                                                    <option value="Male">Male</option>
                                                    <option value="Female">Female</option>


                                                </select>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Status</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.onChangeStatus(e.target.value)}>
                                                    <option  disabled selected>Select the Status</option>
                                                    <option >Single</option>
                                                    <option >Married</option>


                                                </select>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Password</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="password" id="stdpsw" className="form-control"
                                                       placeholder="password" onChange={this.onChangePassword}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row"
                                             style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
                                            <h5 style={{marginTop: '10px', color: '#8c8c8c'}}>CLASS DETAILS</h5>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Select Stream</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.onChangeStream(e.target.value)}>
                                                    <option value="" disabled selected>Select Stream</option>
                                                    {this.state.streams.map((dis) => <option key={dis}
                                                                                             value={dis}>{dis}</option>)}
                                                </select>

                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Select Subject(s)</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-8" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.onChangeSubjectDropDown(e.target.value)}>
                                                    <option value="" disabled selected>Select Subject(s)</option>
                                                    {this.state.subjects.map((dis) => <option key={dis}
                                                                                              value={dis}>{dis}</option>)}
                                                </select>
                                            </div>
                                            <div className="col-3">
                                                <button type="button" className="btn btn-primary"
                                                        onClick={this.onClickAddSubjectButton}
                                                        style={{
                                                            width: '40px',
                                                            marginTop: '0px',
                                                            backgroundColor: '#265077',
                                                            borderColor: '#216E9B',
                                                            float: 'left'
                                                        }}><b>+</b></button>
                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-8">
                                                <label style={{
                                                    float: 'left',
                                                    color: '#216E9B'
                                                }}>{this.state.tempSubjectList}</label>
                                            </div>
                                            <div className="col-3">
                                                {this.state.tempSubjectList.length > 0 ?
                                                    <button type="button" className="btn btn-primary"
                                                            onClick={this.onClickSubjectRemoveButton}
                                                            style={{
                                                                width: '40px',
                                                                marginTop: '0px',
                                                                backgroundColor: '#265077',
                                                                borderColor: '#216E9B',
                                                                float: 'left'
                                                            }}><b>-</b></button>
                                                    :
                                                    <div>
                                                    </div>

                                                }
                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Class Type</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-5" style={{textAlign: '-webkit-center'}}>
                                                <input type="checkbox" id="onlineClass" className="form-control"
                                                       defaultChecked={this.state.isCheckedInstitute}
                                                       onChange={this.onChangeInstituteOnlineClassCheckBox}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                       />
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}>Online
                                                    Class</label>
                                            </div>
                                            <div className="col-5" style={{textAlign: '-webkit-center'}}>
                                                <input type="checkbox" id="onlineClass" className="form-control"
                                                       defaultChecked={this.state.isCheckedInstitute}
                                                       onChange={this.onChangeInstituteHomeVisitCheckBox}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                       />
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}>Home
                                                    Visit</label>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <input type="checkbox" id="condition" className="form-control"
                                                       defaultChecked={this.state.isCheckedInstitute}
                                                       onChange={this.onChangeInstituteCheckBox}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '0px'
                                                       }}
                                                       />
                                                <label style={{
                                                    marginTop: '0px',
                                                    float: 'left',
                                                    marginLeft: '20px'
                                                }}>Institute(s)</label>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        {this.state.isCheckedInstitute === true ?
                                            <div>
                                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                                    <div className="col-1">

                                                    </div>
                                                    <div className="col-10">
                                                        <h5 style={{float: 'left', color: '#216E9B'}}>Select
                                                            Institute(s)</h5>
                                                    </div>
                                                    <div className="col-1">

                                                    </div>
                                                </div>
                                                <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                                    <div className="col-1">

                                                    </div>
                                                    <div className="col-8" style={{textAlign: '-webkit-center'}}>
                                                        <select className="form-control" style={{width: '90%'}}
                                                                onChange={e => this.onChangeInstituteDropDown(e)}>
                                                            <option value="" disabled selected>Select Institute(s)
                                                            </option>
                                                            {this.state.instituteList.map((dis) => <option key={dis._id} id={dis._id}
                                                                                                           value={dis.institute_name}>{dis.institute_name}</option>)}
                                                        </select>
                                                    </div>
                                                    <div className="col-3">
                                                        <button type="button" className="btn btn-primary"
                                                                onClick={this.onClickAddInstituteButton}
                                                                style={{
                                                                    width: '40px',
                                                                    marginTop: '0px',
                                                                    backgroundColor: '#265077',
                                                                    borderColor: '#216E9B',
                                                                    float: 'left'
                                                                }}><b>+</b></button>
                                                    </div>
                                                </div>
                                                <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                                    <div className="col-1">

                                                    </div>
                                                    <div className="col-8">
                                                        <label style={{
                                                            float: 'left',
                                                            color: '#216E9B'
                                                        }}>{this.state.tempInstituteList}</label>
                                                    </div>
                                                    <div className="col-3">
                                                        {this.state.tempInstituteList.length > 0 ?
                                                            <button type="button" className="btn btn-primary"
                                                                    onClick={this.onClickInstituteRemoveButton}
                                                                    style={{
                                                                        width: '40px',
                                                                        marginTop: '0px',
                                                                        backgroundColor: '#265077',
                                                                        borderColor: '#216E9B',
                                                                        float: 'left'
                                                                    }}><b>-</b></button>
                                                            :
                                                            <div>
                                                            </div>

                                                        }
                                                    </div>
                                                </div>
                                            </div>
                                            :
                                            <div>
                                            </div>
                                        }
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Select Class Conduct District and Main Cities</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.FindCities(e.target.value)}>
                                                    <option value="" disabled selected>Select District</option>
                                                    {this.state.districts && this.state.districts.map((dis) => <option key={dis} value={dis}>{dis}</option> )}
                                                </select>

                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.OnChangeCity(e.target.value)}>
                                                    <option value="" disabled selected>Select City</option>
                                                    {this.state.citiesList && this.state.citiesList.map((dis) => <option
                                                        key={dis} value={dis}>{dis}</option>)}
                                                </select>

                                            </div>
                                            <div className="col-3">
                                                <button type="button" className="btn btn-primary"
                                                        onClick={this.onClickAddCityButton}
                                                        style={{
                                                            width: '40px',
                                                            marginTop: '0px',
                                                            backgroundColor: '#265077',
                                                            borderColor: '#216E9B',
                                                            float: 'left'
                                                        }}><b>+</b></button>
                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-8">
                                                <label style={{
                                                    float: 'left',
                                                    color: '#216E9B'
                                                }}>{this.state.tempCityList}</label>
                                            </div>
                                            <div className="col-3">
                                                {this.state.tempCityList.length > 0 ?
                                                    <button type="button" className="btn btn-primary"
                                                            onClick={this.onClickCityRemoveButton}
                                                            style={{
                                                                width: '40px',
                                                                marginTop: '0px',
                                                                backgroundColor: '#265077',
                                                                borderColor: '#216E9B',
                                                                float: 'left'
                                                            }}><b>-</b></button>
                                                    :
                                                    <div>
                                                    </div>

                                                }
                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Select Class Conduct Medium</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <select className="form-control" style={{width: '90%'}}
                                                        onChange={e => this.OnChangeMedium(e.target.value)}>
                                                    <option value="" disabled selected>Select Medium</option>
                                                    {this.state.mediums.map((dis) => <option key={dis} value={dis}>{dis}</option> )}
                                                </select>

                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Add Your Highest Qualification</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="tutorQualfication" className="form-control"
                                                       placeholder="Qualification"
                                                       onChange={this.OnChangeQualification}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <input type="checkbox" id="condition" className="form-control"
                                                       onChange={this.onChangeConditionCheckBox}
                                                       defaultChecked={this.state.isConditionChecked}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                       required/>
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}> I Confirm
                                                    I have read the terms and conditions.</label>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{
                                            marginTop: '35px',
                                            marginBottom: '5px',
                                            display: 'flex',
                                            justifyContent: 'center'
                                        }}>
                                            <button type="submit" className="btn btn-primary" style={{
                                                width: '50%',
                                                marginTop: '0px',
                                                backgroundColor: '#265077',
                                                borderColor: '#216E9B'
                                            }}><b>SIGN UP</b></button>
                                        </div>
                                    </form>
                                </div>

                                :

                                <div>
                                    <form onSubmit={this.onSubmitInstitute} id="signup" name="signup" className="signup">
                                        <div className="row"
                                             style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
                                            <h5 style={{marginTop: '30px', color: '#8c8c8c'}}>INSTITUTE DETAILS</h5>
                                        </div>
                                        <div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Name of Institute</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="InstituteName" className="form-control"
                                                       placeholder="Name of Institute" onChange={this.onChangeName}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Phone Number(s)</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-8" style={{textAlign: '-webkit-center'}}>
                                                <input type="tel" id="institutePN" className="form-control" value={this.state.institutePhoneNoOnChange}
                                                       placeholder="Phone Number" onChange={this.onChangeInstitutePhoneNo}
                                                       style={{width: '90%'}} />
                                            </div>
                                            <div className="col-3">
                                                <button type="button" className="btn btn-primary"
                                                        onClick={this.onClickAddInstitutePhoneNoButton}
                                                        style={{
                                                            width: '40px',
                                                            marginTop: '0px',
                                                            backgroundColor: '#265077',
                                                            borderColor: '#216E9B',
                                                            float: 'left'
                                                        }}><b>+</b></button>
                                            </div>
                                        </div>
                                        {this.state.tempInstitutePhoneList.length > 0 ?
                                            <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                                <div className="col-1">

                                                </div>
                                                <div className="col-8">
                                                    <label style={{
                                                        float: 'left',
                                                        color: '#216E9B'
                                                    }}>{this.state.tempInstitutePhoneList}</label>
                                                </div>
                                                <div className="col-3">

                                                    <button type="button" className="btn btn-primary"
                                                            onClick={this.onClickInstitutePhoneNoRemoveButton}
                                                            style={{
                                                                width: '40px',
                                                                marginTop: '0px',
                                                                backgroundColor: '#265077',
                                                                borderColor: '#216E9B',
                                                                float: 'left'
                                                            }}><b>-</b></button>




                                                </div>
                                            </div>
                                            :
                                            <div>
                                            </div>

                                        }
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Institute Email</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="email" id="instEmail" className="form-control"
                                                       placeholder="Email" onChange={this.onChangeEmail}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Address</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="stdAddress" className="form-control"
                                                       placeholder="Apartment #" onChange={this.OnChangeInstituteApartment}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="stdAddress" className="form-control"
                                                       placeholder="Street" onChange={this.OnChangeInstituteStreet}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="stdAddress" className="form-control"
                                                       placeholder="City" onChange={this.OnChangeInstituteCity}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Institute Registration No</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="text" id="regNo" className="form-control"
                                                       placeholder="Company Registration Number" onChange={this.OnChangeInstituteRegistrationNo}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <h5 style={{float: 'left', color: '#216E9B'}}>Password</h5>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10" style={{textAlign: '-webkit-center'}}>
                                                <input type="password" id="stdpsw" className="form-control"
                                                       placeholder="password" onChange={this.onChangePassword}
                                                       style={{width: '90%'}} required/>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>

                                        <div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
                                            <div className="col-1">

                                            </div>
                                            <div className="col-10">
                                                <input type="checkbox" id="condition" className="form-control"
                                                       onChange={this.onChangeConditionCheckBox}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                       required/>
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}> I Confirm
                                                    I have read the terms and conditions.</label>
                                            </div>
                                            <div className="col-1">

                                            </div>
                                        </div>
                                        <div className="row" style={{
                                            marginTop: '35px',
                                            marginBottom: '5px',
                                            display: 'flex',
                                            justifyContent: 'center'
                                        }}>
                                            <button type="submit" className="btn btn-primary"

                                                    style={{
                                                width: '50%',
                                                marginTop: '0px',
                                                backgroundColor: '#265077',
                                                borderColor: '#216E9B'
                                            }}><b>SIGN UP</b></button>
                                        </div>
                                    </form>
                                </div>
                            }
                        </div>

                    }

                </div>
                </div>
            </div>
        )
    }

}