import React, {Component} from "react";
import ItemNav from "../Navbar";
import TestTeacher from "../../Images/defaultimageicon.jpg";
import {FaStar} from "react-icons/fa";
import axios from "axios";
import * as configs from "../../Config/config";
import * as Icon from "react-bootstrap-icons";
import moment from "moment";
import swal from "sweetalert";
import TopSmallAdd from "./AdvertisementTopSmall";
import {Link} from "react-router-dom";
import {Button, Modal} from "react-bootstrap";





export default class TutorProfileView extends Component{

    constructor(props) {
        super(props);

        this.state = {
            tutor_id : props.match.params.id,
            rating:0,
            overRollRating : 0,
            ratingCount:0,
            ratingFive: 0,
            ratingFour: 0,
            ratingThree:0,
            ratingTwo: 0,
            ratingOne: 0,
            alreadyRate: false,
            review :'',
            student_id : '',
            version : '1',
            TutorClassList:[],
            instituteList: [],
            ClassMethods: [],
            subjectList: [],
            tutor_name : '',
            tutor_email : '',
            tutor_phone : '',
            tutor_address : '',
            tutor_gender : '',
            tutor_medium : '',
            tutor_qualification : '',
            OnlineClass : '',
            HomeVisit : '',
            Institute:'',
            tutorManinCities : [],
            detailReviewList : [],
            show : false,
            class_admissionFee : '',
            class_batchYear : '',
            class_batchNo : '',
            class_conductDay : '',
            class_conductTime : '',
            class_fee : '',
            class_feeOption : '',
            class_method : '',
            class_startingDate : Date,
            class_type : '',
            class_instituteName : '',
            class_subject : '',
            class_id : '',

        };

        this.onClickRatingValue = this.onClickRatingValue.bind(this);
        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseOut = this.onMouseOut.bind(this);
        this.onChangeComment = this.onChangeComment.bind(this);
        this.onSID = this.onSID.bind(this);
        this.onTutorID = this.onTutorID.bind(this);
        this.submitRating = this.submitRating.bind(this);
        this.getTutorRatingAndReviews = this.getTutorRatingAndReviews.bind(this);
        this.onClickClassViewButton = this.onClickClassViewButton.bind(this);
        this.onHideModal = this.onHideModal.bind(this);
        this.onRequestToClass = this.onRequestToClass.bind(this);
        this.clearClassLabels = this.clearClassLabels.bind(this);
    }



    componentDidMount() {

        const user_email = localStorage.getItem("email");
        const user_id = localStorage.getItem("userID");
        const user_name = localStorage.getItem("userName");
        const user_type = localStorage.getItem("userType");

        if(user_id !== " "){
            this.setState({
                isLogged : true
            })
        }

        this.setState({
            user_email: user_email,
            student_id : user_id,
            user_name : user_name,
            user_type : user_type
        })

        axios.get(configs.BASE_URL + '/tutorSingUp/' + this.state.tutor_id)
            .then(response => {
                console.log(response.data);
                //console.log(response.data);


                this.setState({
                    instituteList: response.data.tutor_instituteIDList,
                    ClassMethods: response.data.tutor_class_type,
                    subjectList: response.data.tutor_subjects,
                    tutor_name : response.data.tutor_name,
                    tutor_email : response.data.tutor_email,
                    tutor_phone : response.data.tutor_phone,
                    tutor_address : response.data.tutor_address,
                    tutor_gender : response.data.tutor_gender,
                    tutor_medium : response.data.tutor_medium,
                    tutor_qualification : response.data.tutor_qualification,
                    tutorManinCities : response.data.tutor_main_city

                }, () => {

                    this.state.ClassMethods.map((type)=>{
                        if(type === "Online class"){
                            this.setState({
                                OnlineClass : type
                            })
                        }
                        else if(type === "Home Visit"){
                            this.setState({
                                HomeVisit : type
                            })
                        }
                        else if(type === "Institute"){
                            this.setState({
                                Institute : type
                            })
                        }
                    })

                    axios.get(configs.BASE_URL + '/createClass/tutorClass/' + this.state.tutor_id)
                        .then(response => {
                            console.log(response.data);

                            this.setState({
                                TutorClassList: response.data

                            }, () => {

                                this.getTutorRatingAndReviews();

                            })


                        })

                })


            })
    }

    getTutorRatingAndReviews(){
        axios.get(configs.BASE_URL + '/tutorRatings/' + this.state.tutor_id)
            .then(response => {
                console.log(response.data);
                let TotalRating = 0;
                let Rating5 = 0;
                let Rating4 = 0;
                let Rating3 = 0;
                let Rating2 = 0;
                let Rating1 = 0;

                response.data.map((rate)=>{
                    TotalRating = TotalRating + Number(rate.rating);
                    if(Number(rate.rating) === 5){
                        Rating5++
                    }
                    else if(Number(rate.rating) === 4){
                        Rating4++
                    }
                    else if(Number(rate.rating) === 3){
                        Rating3++
                    }
                    else if(Number(rate.rating) === 2){
                        Rating2++
                    }
                    else if(Number(rate.rating) === 1){
                        Rating1++
                    }
                })
                console.log(TotalRating)
                this.setState({
                    detailReviewList: response.data.sort((a,b) => b.rating - a.rating),
                    overRollRating : Number(TotalRating / response.data.length),
                    ratingCount : response.data.length,
                    ratingFive : Rating5,
                    ratingFour : Rating4,
                    ratingThree:Rating3,
                    ratingTwo: Rating2,
                    ratingOne: Rating1,

                }, () => {

                    console.log(this.state.overRollRating)

                })


            })
    }

    onRequestToClass(e){


        const logUser = localStorage.getItem("userID");
        console.log(logUser)
        if(logUser == null || logUser == ""){
            swal("Not Login Yet", "Please Login to the system first.", "warning");
        }
        else{


            const payload = {
                _id : e.target.value,
                student_id : logUser,
                tutor_id : this.state.tutor_id
            }

            axios.post(configs.BASE_URL + '/createClass/studentRequestList/add', payload)
                .then(res => {
                    console.log(res)
                    swal("success!!!", res.data, "success").then(() => {
                        //e.target.reset();
                        //window.location.reload();
                        this.clearClassLabels();
                    });


                })
                .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){
                            swal("Sorry!!!", "This Student Not Registered", "warning").then(() => {
                                //e.target.reset();
                                //window.location.reload();
                            });
                        }
                        else if(error.response.status === 501){
                            swal("Sorry!!!", "Already Requested to this Class", "warning").then(() => {
                                //e.target.reset();
                                //window.location.reload();
                            });
                        }


                    } 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);
                });

        }

    }

    clearClassLabels(){
        this.setState({
            show : false,
            class_admissionFee : '',
            class_batchYear : '',
            class_batchNo : '',
            class_conductDay : '',
            class_conductTime : '',
            class_fee : '',
            class_feeOption : '',
            class_method : '',
            class_startingDate : Date,
            class_type : '',
            class_instituteName : '',
            class_subject : '',
            class_id : '',
        })
    }
    onHideModal(){
        this.setState({
            show:false
        })
    }
    onClickClassViewButton(e){

        this.state.TutorClassList.map((tutorClass) => {

            if(tutorClass._id === e.target.value){
                console.log(tutorClass);
                let institute = "";
                if(tutorClass.institute_id != null){
                    institute = tutorClass.institute_id.institute_name
                }

                this.setState({
                    show: true,
                    class_admissionFee : tutorClass.AdmissionFee,
                    class_batchYear : tutorClass.batchYear,
                    class_batchNo : tutorClass.batch_no,
                    class_conductDay : tutorClass.class_conduct_day,
                    class_conductTime : tutorClass.class_conduct_time,
                    class_fee : tutorClass.class_fee,
                    class_feeOption : tutorClass.class_fee_option,
                    class_method : tutorClass.class_method,
                    class_startingDate : tutorClass.class_startingDate,
                    class_type : tutorClass.class_type,
                    class_instituteName : institute,
                    class_subject : tutorClass.subject,
                    class_id : tutorClass._id
                });


            }
        })

    }

    onClickRatingValue(e) {
        console.log(e.target.value);
        this.setState({
            rating: e.target.value
        })
    }

    onMouseEnter(e) {
        console.log(e);
        this.setState({
            hover: e
        })
    }

    onMouseOut() {

        this.setState({
            hover: 0
        })
    }

    onChangeComment(e) {
        this.setState({
            review: e.target.value
        })
    }

    onSID(e) {
        this.setState({
            student_id: e.target.value
        })
    }

    onTutorID(e) {
        this.setState({
            tutor_id: e.target.value
        })
    }

    submitRating() {

        const payload = {
            tutor_id : this.state.tutor_id,
            student_id : this.state.student_id,
            rating : this.state.rating,
            review : this.state.review,
            version : this.state.version

        }


        if(this.state.student_id !== null){

            if(this.state.review !== ""){
                if(this.state.rating !== 0){
                    console.log(payload);
                    axios.post(configs.BASE_URL + '/tutorRatings/add', payload)
                        .then(response => {
                            swal("Thank You", "Your Review Added Successfully", "success");
                            this.getTutorRatingAndReviews();
                        });


                }
                else {
                    swal("Sorry", "Please give a rating first", "warning");
                }
            }
            else {
                swal("Sorry", "Please add a review first", "warning");
            }
        }
        else {
            swal("Sorry", "You Need to Login to the system...", "warning");
        }

        // console.log("payload");

    }

    render() {
        const ViewClassModal = props => (

            <div>
                <Modal
                    {...props}
                    size="xl"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered
                    show={true}
                >
                    <Modal.Header>
                        <Modal.Title id="contained-modal-title-vcenter">
                            <span>
                                <h3>{this.state.class_type}({this.state.class_batchYear}) - {this.state.class_method === 'Online class'? this.state.class_method : this.state.class_instituteName}</h3>

                            </span>

                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="row">
                            <div className="col">
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <h4>{this.state.class_subject}</h4>
                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Class Method </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_method}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Class Type </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_type}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Conducting Day </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_conductDay}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Admission Fee </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_admissionFee}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span><b>Starting Date </b></span>
                                    </div>
                                    <div className="col">
                                        <h5 style={{color:'darkblue'}}>: {moment(this.state.class_startingDate).format("LL")}</h5>
                                    </div>

                                </div>

                            </div>
                            <div className="col">
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <br/>
                                    <br/>
                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Year </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_batchYear}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Batch </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_batchNo}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Conducting Day </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_conductTime}</b>
                                    </div>

                                </div>
                                <div className="row" style={{marginLeft: '10px'}}>
                                    <div className="col-4">
                                        <span>Class Fee </span>
                                    </div>
                                    <div className="col">
                                        <b>: {this.state.class_fee}</b>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.onRequestToClass} style={{background: "#086232", color: "white", margin: '10px'}} value={this.state.class_id}>Request to Class</Button>
                        <Button onClick={this.onHideModal} style={{background: "#8D4433", color: "white", margin: '10px'}}>Close</Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );

        return(
            <div className="App" style={{padding:'10px',paddingTop:'0px'}}>
                <div className="row" style={{width:'100%'}}>
                    <ItemNav/>
                </div>

                <div className="App" style={{marginTop:'80px',paddingTop:'0px'}}>
                    <div className="row" style={{width:'100%'}}>
                        <TopSmallAdd></TopSmallAdd>
                    </div>
                    {this.state.show && ViewClassModal()}
                    <div className="row">
                        <div className="col">
                            <div className="row">
                                <div className="col-" >
                                    <img src={TestTeacher} style={{width:'160px', height:'160px', float:'left', margin:'30px'}}/>
                                </div>
                                <div className="col" style={{padding:'20px', float:'left', marginTop:'20px'}}>
                                    <div className="row">
                                        <h5>{this.state.tutor_name}</h5>
                                    </div>
                                    <div className="row">
                                        <label>{this.state.tutor_qualification}</label>
                                    </div>
                                    <div className="row">

                                        {[...Array(5)].map((star, i) => {
                                            const ratingValue = i + 1.0;

                                            return <label style={{marginLeft: '5px', faloat: 'center'}}>
                                                <input type="radio" name="rating"
                                                       style={{display: "none", cursor: "pointer"}}
                                                       value={ratingValue}
                                                    //onClick={this.onClickRatingValue}
                                                />
                                                <FaStar size={20}
                                                        color={ratingValue <= (this.state.overRollRating) ? "#ffc107" : "#e4e5e9"}
                                                    //onMouseEnter={() => this.onMouseEnter(i + 1)}
                                                        style={{cursor: "pointer"}}/>
                                            </label>
                                        })}
                                    </div>
                                    <div className="row">
                                        <label>{this.state.ratingCount} reviews</label>
                                    </div>
                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>About Me</h5>
                            </div>

                            <div className="row" style={{margin:'20px'}}>
                                <div className="col">
                                    <label style={{textAlign:'justify'}}>
                                        I graduated in 2019 from an undergraduate degree in English Literature from Cambridge University,
                                        and, after working for two years full time as a private tutor, am currently reading for an MPhil in Renaissance
                                        Literature (also at Cambridge) – my dissertation being an attempt to taxonomise the syntactical forms of the
                                        simile in Shakespeare’s Complete Works, and, with a corresponding database, thus (I hope) to chart its evolution.
                                        I hope to continue in academia afterwards, and, throughout and beyond this degree, to remain tutoring.
                                    </label>
                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>About My Class</h5>
                            </div>
                            <div className="row" style={{margin:'20px'}}>
                                <div className="col">
                                    <label style={{textAlign:'justify'}}>
                                        I graduated in 2019 from an undergraduate degree in English Literature from Cambridge University,
                                        and, after working for two years full time as a private tutor, am currently reading for an MPhil in Renaissance
                                        Literature (also at Cambridge) – my dissertation being an attempt to taxonomise the syntactical forms of the
                                        simile in Shakespeare’s Complete Works, and, with a corresponding database, thus (I hope) to chart its evolution.
                                        I hope to continue in academia afterwards, and, throughout and beyond this degree, to remain tutoring.
                                    </label>
                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>Contact Details</h5>
                            </div>
                            <div className="row" style={{marginLeft:'20px',marginTop:'20px'}}>
                                <div className="col-">
                                    <Icon.Telephone color="black" size={22}/>
                                </div>
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>+94 {this.state.tutor_phone}</label>
                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'20px',marginTop:'10px'}}>
                                <div className="col-">
                                    <Icon.Envelope color="black" size={22}/>
                                </div>
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>{this.state.tutor_email}</label>
                                </div>

                            </div>
                            <div className="row" style={{marginTop:'20px',marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>Tutor's Classes</h5>
                            </div>
                            <div className="row" style={{marginLeft:'20px',marginTop:'20px'}}>
                                <div className="col-">
                                    <h6>Language : <b>{this.state.tutor_medium}</b></h6>
                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'20px',marginTop:'10px'}}>
                                <div className="col-">
                                    <label>Subjects : {this.state.subjectList.map((subject)=>{
                                        return(
                                            <span><b>{subject} | </b></span>
                                        )
                                    })}</label>

                                </div>

                            </div>
                            <div className="row" style={{marginLeft:'20px', marginTop:'10px'}}>
                                <div className="col-">
                                    {this.state.OnlineClass === "" ?
                                        <Icon.XOctagon color="black" size={18}/>
                                        :
                                        <Icon.Check2Circle color="black" size={18}/>
                                    }
                                </div>
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>Online Classes</label>
                                </div>
                            </div>
                            {this.state.OnlineClass !== "" ?
                                <div className="" style={{marginLeft:'20px'}}>
                                    <div className="container">
                                        <div className="table-dark row">
                                            <div className="col">
                                                <label>Class Type</label>
                                            </div>
                                            <div className="col">
                                                <label>A/L Batch</label>
                                            </div>
                                            <div className="col">
                                                <label>Starting Date</label>
                                            </div>
                                            <div className="col">
                                                <label>Subject</label>
                                            </div>
                                            <div className="col">
                                                <label>Day and Time</label>
                                            </div>
                                            <div className="col">

                                            </div>

                                        </div>
                                    </div>

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

                            {this.state.TutorClassList.map((tutorClass)=>{
                                if(tutorClass.class_method === "Online class"){
                                    return(
                                        <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px',marginLeft:'20px',marginRight:'0px', borderBottom: 'inset'}}>
                                            <div className="col">
                                                <label>{tutorClass.class_type}</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.batchYear}</label>
                                            </div>
                                            <div className="col">
                                                <label>{moment(tutorClass.class_startingDate).format("LL") }</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.subject}</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.class_conduct_day} - {tutorClass.class_conduct_time}</label>
                                            </div>
                                            <div className="col">
                                                <button className="rounded" style={{background:'Orange', padding:'3px', width:'60px'}} value={tutorClass._id}
                                                onClick={this.onClickClassViewButton}>View</button>
                                            </div>

                                        </div>
                                    )
                                }

                            })}

                            <div className="row" style={{marginLeft:'20px', marginTop:'5px'}}>
                                <div className="col-">
                                    {this.state.HomeVisit === "" ?
                                        <Icon.XOctagon color="black" size={18}/>
                                        :
                                        <Icon.Check2Circle color="black" size={18}/>
                                    }
                                </div>
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>Home Visit</label>
                                </div>
                            </div>
                            {this.state.HomeVisit !== "" ?
                                <div className="row" style={{marginLeft:'20px', marginTop:'0px'}}>
                                    <div className="col-" style={{marginLeft:'30px'}}>
                                        <Icon.GeoAlt color="black" size={18}/>
                                    </div>
                                    <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                        <label>Home Visit Areas : {this.state.tutorManinCities.map((city)=>{
                                            return(
                                                <span>{city} | </span>
                                            )
                                        })}</label>
                                    </div>
                                </div>
                                :
                                <div></div>
                            }

                            <div className="row" style={{marginLeft:'20px', marginTop:'5px'}}>
                                {this.state.Institute === "" ?
                                    <Icon.XOctagon color="black" size={18}/>
                                    :
                                    <Icon.Check2Circle color="black" size={18}/>
                                }
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>Institutes</label>
                                </div>
                            </div>
                            <div className="row" style={{marginLeft:'20px', marginTop:'0px'}}>
                                <div className="col-" style={{marginLeft:'30px'}}>
                                    <Icon.Building color="black" size={18}/>
                                </div>
                                <div className="col-" style={{float:'left', marginLeft:'15px'}}>
                                    <label>Institutes : {this.state.instituteList.map((city)=>{
                                        return(
                                            <span>{city.institute_name} | </span>
                                        )
                                    })}</label>
                                </div>
                            </div>
                            {this.state.Institute !== "" ?
                                <div className="" style={{marginLeft:'20px'}}>
                                    <div className="container">
                                        <div className="table-dark row">
                                            <div className="col">
                                                <label>Class Type</label>
                                            </div>
                                            <div className="col">
                                                <label>A/L Batch</label>
                                            </div>
                                            <div className="col">
                                                <label>Starting Date</label>
                                            </div>
                                            <div className="col">
                                                <label>Subject</label>
                                            </div>
                                            <div className="col">
                                                <label>Institute</label>
                                            </div>
                                            <div className="col">
                                                <label>Day and Time</label>
                                            </div>
                                            <div className="col">

                                            </div>

                                        </div>
                                    </div>

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

                            {this.state.TutorClassList.map((tutorClass)=>{
                                if(tutorClass.class_method === "Institute"){
                                    return(
                                        <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px',marginLeft:'20px',marginRight:'0px', borderBottom: 'inset'}}>
                                            <div className="col">
                                                <label>{tutorClass.class_type}</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.batchYear}</label>
                                            </div>
                                            <div className="col">
                                                <label>{moment(tutorClass.class_startingDate).format("LL") }</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.subject}</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.institute_id.institute_name}</label>
                                            </div>
                                            <div className="col">
                                                <label>{tutorClass.class_conduct_day} - {tutorClass.class_conduct_time}</label>
                                            </div>
                                            <div className="col">
                                                <button className="rounded" style={{background:'Orange', padding:'3px', width:'60px'}} value={tutorClass._id} onClick={this.onClickClassViewButton}>View</button>
                                            </div>

                                        </div>
                                    )
                                }

                            })}
                            {/*{this.state.TutorClassList.length > 0 ?*/}
                            {/*    <div></div>*/}
                            {/*    :*/}
                            {/*    <div style={{padding:'20px'}}>No Active classes for students</div>*/}

                            {/*}*/}

                        </div>
                        <div className="col">
                            <div className="row" style={{marginTop:'20px',marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>Rating and Reviews</h5>
                            </div>
                            <div className="row" style={{margin:'20px'}}>

                                <div className="col">
                                    <div className="row" style={{padding: '15px'}}>
                                        <h2 style={{marginLeft: '15px'}}><span style={{color: 'gray'}}><b
                                            style={{fontSize: '40px', color: "black"}}>{this.state.overRollRating.toFixed(1)}</b>/5</span></h2>
                                    </div>
                                    <div className="row">
                                        {[...Array(5)].map((star, i) => {
                                            const ratingValue = i + 1;

                                            return <label style={{marginLeft: '10px', float: 'left'}}>
                                                <input type="radio" name="rating"
                                                       style={{display: "none", cursor: "pointer"}}
                                                       value={ratingValue}
                                                    //onClick={this.onClickRatingValue}
                                                />
                                                <FaStar size={35}
                                                        color={ratingValue <= (this.state.overRollRating) ? "#ffc107" : "#e4e5e9"}
                                                    //onMouseEnter={() => this.onMouseEnter(i + 1)}
                                                        style={{cursor: "pointer"}}/>
                                            </label>
                                        })}
                                    </div>
                                    <div className="row" style={{padding: '15px'}}>
                                        <span style={{marginLeft: '15px'}}>{this.state.ratingCount} Ratings</span>
                                    </div>

                                </div>
                                <div className="col">
                                    <div className="row" style={{padding: '2px'}}>
                                        <div className="col-">
                                            {[...Array(5)].map((star, i) => {
                                                const ratingValue = i + 1;

                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                    <input type="radio" name="rating"
                                                           style={{display: "none", cursor: "pointer"}}
                                                           value={ratingValue}
                                                    />
                                                    <FaStar size={20}
                                                            color={ratingValue <= 5 ? "#ffc107" : "#e4e5e9"}
                                                            style={{cursor: "pointer"}}/>
                                                </label>
                                            })}

                                        </div>
                                        <div className="col">
                                            <span style={{float:'left', marginLeft:'10px'}}>{this.state.ratingFive} rate(s)</span>
                                        </div>

                                    </div>
                                    <div className="row" style={{padding: '2px'}}>
                                        <div className="col-">
                                            {[...Array(5)].map((star, i) => {
                                                const ratingValue = i + 1;

                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                    <input type="radio" name="rating"
                                                           style={{display: "none", cursor: "pointer"}}
                                                           value={ratingValue}
                                                    />
                                                    <FaStar size={20}
                                                            color={ratingValue <= 4 ? "#ffc107" : "#e4e5e9"}
                                                            style={{cursor: "pointer"}}/>
                                                </label>
                                            })}

                                        </div>
                                        <div className="col">
                                            <span style={{float:'left', marginLeft:'10px'}}>{this.state.ratingFour} rate(s)</span>
                                        </div>

                                    </div>
                                    <div className="row" style={{padding: '2px'}}>
                                        <div className="col-">
                                            {[...Array(5)].map((star, i) => {
                                                const ratingValue = i + 1;

                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                    <input type="radio" name="rating"
                                                           style={{display: "none", cursor: "pointer"}}
                                                           value={ratingValue}
                                                    />
                                                    <FaStar size={20}
                                                            color={ratingValue <= 3 ? "#ffc107" : "#e4e5e9"}
                                                            style={{cursor: "pointer"}}/>
                                                </label>
                                            })}

                                        </div>
                                        <div className="col">
                                            <span style={{float:'left', marginLeft:'10px'}}>{this.state.ratingThree} rate(s)</span>
                                        </div>

                                    </div>
                                    <div className="row" style={{padding: '2px'}}>
                                        <div className="col-">
                                            {[...Array(5)].map((star, i) => {
                                                const ratingValue = i + 1;

                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                    <input type="radio" name="rating"
                                                           style={{display: "none", cursor: "pointer"}}
                                                           value={ratingValue}
                                                    />
                                                    <FaStar size={20}
                                                            color={ratingValue <= 2 ? "#ffc107" : "#e4e5e9"}
                                                            style={{cursor: "pointer"}}/>
                                                </label>
                                            })}

                                        </div>
                                        <div className="col">
                                            <span style={{float:'left', marginLeft:'10px'}}>{this.state.ratingTwo} rate(s)</span>
                                        </div>

                                    </div>
                                    <div className="row" style={{padding: '2px'}}>
                                        <div className="col-">
                                            {[...Array(5)].map((star, i) => {
                                                const ratingValue = i + 1;

                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                    <input type="radio" name="rating"
                                                           style={{display: "none", cursor: "pointer"}}
                                                           value={ratingValue}
                                                    />
                                                    <FaStar size={20}
                                                            color={ratingValue <= 1 ? "#ffc107" : "#e4e5e9"}
                                                            style={{cursor: "pointer"}}/>
                                                </label>
                                            })}

                                        </div>
                                        <div className="col">
                                            <span style={{float:'left', marginLeft:'10px'}}>{this.state.ratingOne} rate(s)</span>
                                        </div>

                                    </div>
                                </div>

                            </div>


                            <div className="row" style={{marginTop:'20px',marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>You can review to this Tutor</h5>
                            </div>
                            <div className="row" style={{margin:'20px'}}>
                                {[...Array(5)].map((star, i) => {
                                    const ratingValue = i + 1;

                                    return <label style={{marginLeft: '20px'}}>
                                        <input type="radio" name="rating" style={{display: "none", cursor: "pointer"}}
                                               value={ratingValue}
                                               onClick={this.onClickRatingValue}/>
                                        <FaStar size={40}
                                                color={ratingValue <= (this.state.rating || this.state.hover) ? "#ffc107" : "#e4e5e9"}
                                                onMouseEnter={() => this.onMouseEnter(i + 1)}
                                                style={{cursor: "pointer"}}/>
                                    </label>
                                })}
                            </div>
                            <div className="row" style={{marginLeft:'20px'}}>
                                <span style={{marginLeft: '20px'}}>You Rate [{this.state.rating}] stars for the product.</span>
                            </div>
                            {/*<div className="row" style={{margin:'20px'}}>*/}
                            {/*    <input type="text" id="tutorAddress" className="form-control"*/}
                            {/*           placeholder="Tutor ID"*/}
                            {/*           onChange={this.onTutorID}*/}
                            {/*           style={{width: '50%'}} required/>*/}
                            {/*</div>*/}
                            {/*<div className="row" style={{margin:'20px'}}>*/}
                            {/*    <input type="text" id="tutorAddress" className="form-control"*/}
                            {/*           placeholder="SID"*/}
                            {/*           onChange={this.onSID}*/}
                            {/*           style={{width: '50%'}} required/>*/}
                            {/*</div>*/}
                            <div className="row" style={{margin:'20px'}}>
                                <textarea className="form-control" style={{width: '50%', marginLeft: '20px'}}
                                          placeholder="Your Idea about the tutor" value={this.state.comments} onChange={this.onChangeComment}/>
                            </div>
                            <div className="row" style={{margin:'20px'}}>
                                {this.state.alreadyRate === false ?
                                    <a  type="submit" onClick={this.submitRating}
                                        className="profile-edit-btn nav-link  btn btn-primary stop-color-final"
                                        name="btnAddMore"
                                        style={{
                                            float: 'left', marginLeft: '20px', marginTop: '00px', marginBottom: '20px', color: 'white',
                                            backgroundColor: '#216E9B', borderColor: '#022140', fontSize: '20px', width: '25%'
                                        }}>
                                        Submit Review
                                    </a>
                                    :
                                    <a type="submit" onClick={this.updateRating}
                                       className="profile-edit-btn nav-link  btn btn-primary stop-color-final"
                                       name="btnAddMore"
                                       style={{
                                           float: 'left', marginLeft: '20px', marginTop: '00px', marginBottom: '20px',
                                           backgroundColor: 'orange', borderColor: 'orange', fontSize: '20px', width: '25%'
                                       }}>
                                        Update Comment
                                    </a>
                                }
                            </div>
                            <div className="row" style={{marginTop:'20px',marginLeft:'0px', paddingLeft:'20px',paddingTop:'5px',paddingBottom:'5px',
                                background:'#022140',color:'white'}}>
                                <h5>Tutor's Reviews</h5>
                            </div>
                            <div className="container" style={{height:'800px'}}>
                                {this.state.detailReviewList.map((review) =>{

                                    return(
                                        <div className="row" style={{margin:'10px'}}>
                                            <div className="main-card mb card" style={{width:'100%'}}>
                                                <div className="row">
                                                    <div className="col-">
                                                        <img src={TestTeacher} className="rounded-circle" style={{width:'80px', height:'80px', float:'left', margin:'30px'}}/>
                                                    </div>
                                                    <div className="col">
                                                        <div className="row" style={{marginLeft:'15px',  marginTop:'15px'}}>
                                                            <h4>{review.student_id.student_name}</h4>
                                                        </div>
                                                        <div className="row" style={{marginLeft:'10px', marginTop:'5px'}}>
                                                            {[...Array(5)].map((star, i) => {
                                                                const ratingValue = i + 1.0;

                                                                return <label style={{marginLeft: '5px', float: 'left'}}>
                                                                    <input type="radio" name="rating"
                                                                           style={{display: "none"}}
                                                                           value={ratingValue}
                                                                        //onClick={this.onClickRatingValue}
                                                                    />
                                                                    <FaStar size={20}
                                                                            color={ratingValue <= (review.rating) ? "#ffc107" : "#e4e5e9"}
                                                                        //onMouseEnter={() => this.onMouseEnter(i + 1)}
                                                                    />
                                                                </label>
                                                            })}
                                                        </div>
                                                        <div className="row" style={{marginLeft:'15px'}}>
                                                            <label style={{textAlign:'initial',marginRight:'25px'}}>{review.review}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

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


                        </div>

                    </div>


                </div>

            </div>
        )
    }

}