import React, {Component} from "react";
import 'react-dropdown/style.css';
import MianImage from "../Images/main01.jpg";
import MianImage2 from "../Images/main02.jpg";
import RecommendIcon from "../Images/recomended.png";
import ItemNav from "./Navbar";
import {Route} from "react-router-dom";
import HomeFooter from "./HomePage/HomeFooter";
import TestTeacher from "../Images/teacher.jpg";
import Location from "../Images/location.png";
import Star from "../Images/star.png";
import ReviewImg from "../Images/note.png";
import Calender from "../Images/calender.png";
import * as Icon from 'react-bootstrap-icons';
import axios from "axios";
import * as configs from "../Config/config";
import TutorCard from "./HomePage/TutorCard";
import RightSideAdd from "./HomePage/AdvertisementRightSide";
import swal from "sweetalert";
import Carousel from "react-bootstrap/Carousel";

export default class Home extends Component {

    constructor(props) {
        super(props);

        this.state = {
            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: [],
            classTypes: ['Home Visit', 'Institute', 'Online class'],
            mediums: ['Sinhala Medium', 'English Medium', 'Tamil Medium'],
            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: '',
            isRecommend: true,
            selectedStream: '',
            selectedSubject: '',
            selectedDistrict: '',
            selectedCity: '',
            selectedClassType: '',
            selectedLanguage: '',
            TutorFilteredList: [],
            TutorFilteredRecommendedListFinal: [],
            TutorOnlyFilteredListFinal: [],
            // RVPastResults : 25,
            RVRatings: 33,
            RVReviews: 34,
            RVStudentCount: 33,
            //isRVPastResults : true,
            isRVRatings: true,
            isRVReviews: true,
            isStudentCount: true,
            TotalRecommendationCount: 0,
            passResultsSubCategory: 2,
            isClickFilterArrow: false,
            images : ["https://picsum.photos/200/300/?image=523",
                "https://picsum.photos/200/300/?image=524",
                "https://picsum.photos/200/300/?image=525",
                "https://picsum.photos/200/300/?image=526"],
            selectedImage: "https://picsum.photos/200/300/?image=523",
            in : 0,

        };

        this.FindCities = this.FindCities.bind(this);
        this.FindTutor = this.FindTutor.bind(this);
        this.ResetFilters = this.ResetFilters.bind(this);
        this.OnChangeStream = this.OnChangeStream.bind(this);
        this.OnChangeSubject = this.OnChangeSubject.bind(this);
        this.OnChangeDistrict = this.OnChangeDistrict.bind(this);
        this.OnChangeCity = this.OnChangeCity.bind(this);
        this.OnChangeClassType = this.OnChangeClassType.bind(this);
        this.OnChangeLanguage = this.OnChangeLanguage.bind(this);
        //this.OnChangeIsCRPastResults = this.OnChangeIsCRPastResults.bind(this);
        this.OnChangeIsCRRatings = this.OnChangeIsCRRatings.bind(this);
        this.OnChangeIsCRReviews = this.OnChangeIsCRReviews.bind(this);
        this.OnChangeIsCRStudentCount = this.OnChangeIsCRStudentCount.bind(this);
        //this.OnChangeCRPastResults = this.OnChangeCRPastResults.bind(this);
        this.OnChangeCRRatings = this.OnChangeCRRatings.bind(this);
        this.OnChangeCRReviews = this.OnChangeCRReviews.bind(this);
        this.OnChangeCRStudentCount = this.OnChangeCRStudentCount.bind(this);
        this.calculateTotalRecommendationCount = this.calculateTotalRecommendationCount.bind(this);
        this.onChangeRadioButton = this.onChangeRadioButton.bind(this);
        this.getRecommendation = this.getRecommendation.bind(this);
        this.onClickFilterArrow = this.onClickFilterArrow.bind(this);
        this.onClickAddFilter = this.onClickAddFilter.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
                    })
                }
            })
        this.calculateTotalRecommendationCount();
    }

    onClickAddFilter() {

        if (this.state.TutorFilteredList.length > 0) {

            if (this.state.TotalRecommendationCount === 100) {
                this.getRecommendation();
            } else {
                swal("Sorry", "Total Filter value Count is not correct. \nPlease Set Total Filter Value as equal to 100.", "warning");
            }
        } else {
            swal("Sorry", "No Results Founded \nPlease Find Tutor First.", "warning");
        }


    }

    onChangeRadioButton(e) {

        if (e.target.value === "By pass rate") {
            this.setState({
                passResultsSubCategory: 1
            });
        } else {
            this.setState({
                passResultsSubCategory: 2
            });
        }
    }

    onClickFilterArrow() {
        if (this.state.isClickFilterArrow) {
            this.setState({
                isClickFilterArrow: false
            })
        } else {
            this.setState({
                isClickFilterArrow: true
            })
        }
    }

    calculateTotalRecommendationCount() {
        let finalResult = this.state.RVRatings + this.state.RVReviews + this.state.RVStudentCount;
        this.setState({
            TotalRecommendationCount: finalResult
        });

    }

    // OnChangeCRPastResults(e) {
    //
    //     this.setState({
    //         RVPastResults: Number(e.target.value),
    //
    //     },()=>{
    //         this.calculateTotalRecommendationCount();
    //     });
    //
    // }
    OnChangeCRRatings(e) {

        this.setState({
            RVRatings: Number(e.target.value),

        }, () => {
            this.calculateTotalRecommendationCount();
        });
    }

    OnChangeCRReviews(e) {

        this.setState({
            RVReviews: Number(e.target.value),

        }, () => {
            this.calculateTotalRecommendationCount();
        });
    }

    OnChangeCRStudentCount(e) {

        this.setState({
            RVStudentCount: Number(e.target.value),

        }, () => {
            this.calculateTotalRecommendationCount();
        });
    }

    // OnChangeIsCRPastResults(e) {
    //     if(this.state.isRVPastResults){
    //         this.setState({
    //             isRVPastResults: false,
    //             RVPastResults : 0
    //         },()=>{
    //             this.calculateTotalRecommendationCount();
    //         });
    //     }
    //     else {
    //         this.setState({
    //             isRVPastResults: true
    //
    //         });
    //     }
    //
    // }
    OnChangeIsCRRatings(e) {
        if (this.state.isRVRatings) {
            this.setState({
                isRVRatings: false,
                RVRatings: 0
            }, () => {
                this.calculateTotalRecommendationCount();
            });
        } else {
            this.setState({
                isRVRatings: true

            });
        }

    }

    OnChangeIsCRReviews(e) {
        if (this.state.isRVReviews) {
            this.setState({
                isRVReviews: false,
                RVReviews: 0
            }, () => {
                this.calculateTotalRecommendationCount();
            });
        } else {
            this.setState({
                isRVReviews: true

            });
        }

    }

    OnChangeIsCRStudentCount(e) {
        if (this.state.isStudentCount) {
            this.setState({
                isStudentCount: false,
                RVStudentCount: 0
            }, () => {
                this.calculateTotalRecommendationCount();
            });
        } else {
            this.setState({
                isStudentCount: true

            });
        }

    }

    OnChangeStream(e) {
        this.setState({
            selectedStream: e
        });
    }

    OnChangeSubject(e) {
        this.setState({
            selectedSubject: e
        });
    }

    OnChangeDistrict(e) {
        this.setState({
            selectedDistrict: e
        });
    }

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

    OnChangeClassType(e) {
        this.setState({
            selectedClassType: e
        });
    }

    OnChangeLanguage(e) {
        this.setState({
            selectedLanguage: e
        });
    }

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

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

    ResetFilters() {
        window.location.reload();

    }

    FindTutor() {

        const Filters = {
            selectedStream: this.state.selectedStream,
            selectedSubject: this.state.selectedSubject,
            selectedDistrict: this.state.selectedDistrict,
            selectedCity: this.state.selectedCity,
            selectedClassType: this.state.selectedClassType,
            selectedLanguage: this.state.selectedLanguage,
            // RVPastResults : this.state.RVPastResults,
            RVRatings: this.state.RVRatings,
            RVReviews: this.state.RVReviews,
            RVStudentCount: this.state.RVStudentCount,
            passResultsSubCategory: this.state.passResultsSubCategory,
        }

        if (this.state.selectedStream !== "" && this.state.selectedSubject !== "") {
            axios.post(configs.BASE_URL + '/filteredList/getFilteredList', Filters)
                .then(res => {
                    console.log(res.data);

                    this.setState({
                        TutorFilteredList: res.data
                    }, () => {
                        this.getRecommendation();
                    })


                })

        } else {
            swal("Sorry", "Please select Stream and Subject", "warning");
            // alert("Please at least select Stream and Subject");

        }


    }

    getRecommendation() {

        const TutorRecommendedFinalList = []
        const TutorOnlyFilterFinalList = []
        const todayDate = new Date();
        // const FilteredDate = new Date().getDate() -


        this.state.TutorFilteredList.map(tutor => {

            let finalReviewScore = (Number(tutor.tutor_reviewValue) * Number(this.state.RVReviews)) / 100;

            let valueForRating = 0;
            if (Number(tutor.tutor_avg_rating) === 5) {
                valueForRating = 100
            } else if (Number(tutor.tutor_avg_rating) > 4.75) {
                valueForRating = 90
            } else if (Number(tutor.tutor_avg_rating) > 4.25) {
                valueForRating = 80
            } else if (Number(tutor.tutor_avg_rating) > 4) {
                valueForRating = 70
            } else if (Number(tutor.tutor_avg_rating) > 3.5) {
                valueForRating = 60
            } else if (Number(tutor.tutor_avg_rating) > 2) {
                valueForRating = 40
            } else {
                valueForRating = 0
            }

            let FinalRatingScore = (valueForRating * Number(this.state.RVRatings)) / 100;

            let valueForStudentCount = 0;
            if (Number(tutor.tutor_student_count) > 200) {
                valueForStudentCount = 100
            } else if (Number(tutor.tutor_student_count) > 100) {
                valueForStudentCount = 90
            } else if (Number(tutor.tutor_student_count) > 75) {
                valueForStudentCount = 80
            } else if (Number(tutor.tutor_student_count) > 50) {
                valueForStudentCount = 70
            } else if (Number(tutor.tutor_student_count) > 30) {
                valueForStudentCount = 60
            } else if (Number(tutor.tutor_student_count) > 20) {
                valueForStudentCount = 40
            } else if (Number(tutor.tutor_student_count) > 10) {
                valueForStudentCount = 20
            } else if (Number(tutor.tutor_student_count) === 0) {
                valueForStudentCount = 0
            } else {
                valueForStudentCount = 10
            }


            let FinalStudentCountScore = (valueForStudentCount * Number(this.state.RVStudentCount)) / 100;

            let FinalScore = finalReviewScore + FinalRatingScore + FinalStudentCountScore;

            let oneday = 24 * 60 * 60 * 1000;
            let NoOFDays = (todayDate - new Date(tutor.tutor_registered_date));
            let NoOFDaysRegistered = Math.ceil(NoOFDays / oneday);


            // if((todayDate - tutor.tutor_registered_date.getDate()) > ){
            //
            // }
            if (NoOFDaysRegistered >= 365 && Number(tutor.tutor_review_count) > 10) {
                const temp = {
                    tutor_id: tutor.teacher,
                    tutor_name: tutor.tutor_name,
                    tutor_subjects: tutor.tutor_subjects,
                    tutor_class_type: tutor.tutor_class_type,
                    tutor_main_district: tutor.tutor_main_district,
                    tutor_main_city: tutor.tutor_main_city,
                    tutor_medium: tutor.tutor_medium,
                    tutor_qualification: tutor.tutor_qualification,
                    tutor_reviewValue: tutor.tutor_reviewValue,
                    tutor_avg_rating: tutor.tutor_avg_rating,
                    tutor_finalScore: FinalScore,
                    tutor_review_count: tutor.tutor_review_count,
                    recommended_ : true
                }

                TutorRecommendedFinalList.push(temp);
            } else {
                const temp = {
                    tutor_id: tutor.teacher,
                    tutor_name: tutor.tutor_name,
                    tutor_subjects: tutor.tutor_subjects,
                    tutor_class_type: tutor.tutor_class_type,
                    tutor_main_district: tutor.tutor_main_district,
                    tutor_main_city: tutor.tutor_main_city,
                    tutor_medium: tutor.tutor_medium,
                    tutor_qualification: tutor.tutor_qualification,
                    tutor_reviewValue: tutor.tutor_reviewValue,
                    tutor_avg_rating: tutor.tutor_avg_rating,
                    tutor_finalScore: FinalScore,
                    tutor_review_count: tutor.tutor_review_count,
                    recommended_ : false
                }
                TutorOnlyFilterFinalList.push(temp);
            }

        })
        TutorRecommendedFinalList.sort((a, b) => b.tutor_finalScore - a.tutor_finalScore);
        TutorOnlyFilterFinalList.sort((a, b) => b.tutor_finalScore - a.tutor_finalScore);
        this.setState({
            TutorFilteredRecommendedListFinal: TutorRecommendedFinalList,
            TutorOnlyFilteredListFinal: TutorOnlyFilterFinalList
        }, () => {
            if (this.state.TotalRecommendationCount === 0) {
                swal("Ops!!!", "You are not added any Filters...\nPlease add filters to get correct recommendation", "warning");
            }
        })

    }

    render() {
        const backgroundStyle = {
            background: `url('${this.state.selectedImage}')`,
            backgroundAttachment: "fixed",
            backgroundPosition: "center center",
            backgroundSize: "cover"
        };
        return (
            <div>
                <div className="row" style={{width: '100%', padding: '0px', margin: '0px'}}>
                    <ItemNav/>
                </div>
                <div className="App" style={{padding: '0px', paddingTop: '0px', marginTop: '65px'}}>
                    <div>

                    </div>

                    <div className="row" >
                        <Carousel style={{width:'100%'}} nextLabel={false} prevLabel={false}>
                            <Carousel.Item>
                                <img
                                    className="toast-bottom-full-width"
                                    src={MianImage}
                                    alt="First slide"
                                />
                                <Carousel.Caption>

                                </Carousel.Caption>
                            </Carousel.Item>
                            <Carousel.Item>
                                <img
                                    className="d-block w-100"
                                    src={MianImage2}
                                    alt="Second slide"
                                />

                                <Carousel.Caption>

                                </Carousel.Caption>
                            </Carousel.Item>
                            <Carousel.Item>
                                <img
                                    className="d-block w-100"
                                    src={MianImage2}
                                    alt="Third slide"
                                />

                                <Carousel.Caption>

                                </Carousel.Caption>
                            </Carousel.Item>
                        </Carousel>

                        {/*<img src={MianImage2} style={{width: '100%', height: '250px'}}/>*/}

                    </div>
                    <div className="row"
                         style={{marginRight: '50px', marginLeft: '50px', padding: '5px', background: '#1E4258'}}>
                        <div className="col-4"
                             style={{margin: '5px', border: 'solid', padding: '10px', borderColor: '#216E9B'}}>
                            <div className="row">
                                <div className="col-6"><br/></div>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>Stream</h6>
                                </div>
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>Subject</h6>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                    <select className="form-control"
                                            onChange={e => this.OnChangeStream(e.target.value)}>
                                        <option value="" disabled selected>All Streams</option>
                                        {this.state.streams.map((dis) => <option key={dis} value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                                <div className="col-6">
                                    <select className="form-control"
                                            onChange={e => this.OnChangeSubject(e.target.value)}>
                                        <option value="" disabled selected>All Subjects</option>
                                        {this.state.subjects.map((dis) => <option key={dis} value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div className="col-5"
                             style={{margin: '5px', border: 'solid', padding: '10px', borderColor: '#216E9B'}}>
                            <div className="row">
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>District</h6>
                                </div>
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>City</h6>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                    <select className="form-control"
                                            onChange={e => this.FindCities(e.target.value)}>
                                        <option value="" disabled selected>All Districts</option>
                                        {this.state.districts && this.state.districts.map((dis) => <option key={dis}
                                                                                                           value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                                <div className="col-6">
                                    <select className="form-control" onChange={e => this.OnChangeCity(e.target.value)}
                                            disabled={!this.state.isSelectedDistrict}>
                                        <option value="" disabled selected>All Cities</option>
                                        {this.state.citiesList && this.state.citiesList.map((dis) => <option
                                            key={dis} value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                            </div>
                            <div className="row" style={{marginTop: '5px'}}>
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>Class Type</h6>
                                </div>
                                <div className="col-6">
                                    <h6 style={{color: "white", float: 'left'}}>Medium</h6>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                    <select className="form-control"
                                            onChange={e => this.OnChangeClassType(e.target.value)}>
                                        <option value="" disabled selected>All Class Types</option>
                                        {this.state.classTypes.map((dis) => <option key={dis}
                                                                                    value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                                <div className="col-6">
                                    <select className="form-control"
                                            onChange={e => this.OnChangeLanguage(e.target.value)}>
                                        <option value="" disabled selected>All Languages</option>
                                        {this.state.mediums.map((dis) => <option key={dis} value={dis}>{dis}</option>)}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div className="col-2">
                            <div className="row">
                                <br/>
                            </div>
                            <div className="row">
                                <button className="form-control"
                                        style={{background: "#8D4433", color: "white", margin: '10px'}}
                                        onClick={this.ResetFilters}><b>Reset</b></button>
                            </div>
                            <div className="row">
                                <button className="form-control"
                                        style={{background: "#086232", color: "white", margin: '10px'}}
                                        onClick={this.FindTutor}><b>Find Tutor</b></button>
                            </div>

                        </div>
                    </div>
                    <div className="row" style={{
                        marginRight: '50px',
                        marginLeft: '50px',
                        marginTop: '10px',
                        padding: '10px',
                        background: '#1E4258'
                    }}>
                        <h5 style={{color: "white", float: 'left'}}>Customized Your Recommendation</h5>

                    </div>
                    {this.state.isClickFilterArrow ?
                        <div className="row" style={{
                            marginRight: '50px',
                            marginLeft: '50px',
                            marginTop: '5px',
                            padding: '5px',
                            background: '#1E4258'
                        }}>
                            <div className="col"
                                 style={{margin: '5px', border: 'solid', padding: '10px', borderColor: '#216E9B'}}>
                                <div className="row">
                                    {/*<div className="col">*/}
                                    {/*    <div className="row">*/}
                                    {/*        <input type="checkbox" id="PastResults" className="form-control"*/}
                                    {/*               defaultChecked={this.state.isRVPastResults}*/}
                                    {/*               onChange={this.OnChangeIsCRPastResults}*/}
                                    {/*               style={{*/}
                                    {/*                   width: '20px',*/}
                                    {/*                   height: '20px',*/}
                                    {/*                   float: 'left',*/}
                                    {/*                   marginLeft: '25px',*/}
                                    {/*                   marginTop: '15px'*/}
                                    {/*               }}*/}
                                    {/*        />*/}
                                    {/*        <label style={{*/}
                                    {/*            marginTop: '15px',*/}
                                    {/*            float: 'left',*/}
                                    {/*            marginLeft: '20px',*/}
                                    {/*            color: "white"*/}
                                    {/*        }}>Past Results</label>*/}
                                    {/*    </div>*/}
                                    {/*    <div className="row">*/}
                                    {/*        <input type="number" id="pastResultsTxt" className="form-control"*/}
                                    {/*               value={this.state.RVPastResults} onChange={this.OnChangeCRPastResults}*/}
                                    {/*               style={{width: '30%', marginLeft: '20px'}} required/>*/}
                                    {/*        <label style={{*/}
                                    {/*            marginTop: '10px',*/}
                                    {/*            float: 'left',*/}
                                    {/*            marginLeft: '10px',*/}
                                    {/*            color: "white"*/}
                                    {/*        }}>%</label>*/}
                                    {/*    </div>*/}
                                    {/*    <div className="row">*/}
                                    {/*        <div style={{color: 'white', padding: '8px'}}*/}
                                    {/*             onChange={this.onChangeRadioButton}>*/}
                                    {/*            <input type="radio" value="By pass rate" name="results"*/}
                                    {/*                   style={{marginLeft: '11px'}}*/}
                                    {/*                   checked={this.state.passResultsSubCategory === 1}/> By pass rate*/}
                                    {/*            <br/>*/}
                                    {/*            <input type="radio" value="By grade A" name="results"*/}
                                    {/*                   style={{marginLeft: '12px'}}*/}
                                    {/*                   checked={this.state.passResultsSubCategory === 2}/> By grade 'A'*/}

                                    {/*        </div>*/}
                                    {/*    </div>*/}
                                    {/*    <div className="row">*/}

                                    {/*    </div>*/}

                                    {/*</div>*/}
                                    <div className="col">
                                        <div className="row">
                                            <div className="col-1">
                                                <input type="checkbox" id="PastResults" className="form-control"
                                                       defaultChecked={this.state.isRVRatings}
                                                       onChange={this.OnChangeIsCRRatings}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                />
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '15px',
                                                    float: 'left',
                                                    marginLeft: '30px',
                                                    color: "white"
                                                }}>Ratings</label>
                                            </div>


                                        </div>
                                        <div className="row">
                                            <div className="col-md-4">
                                                <input type="number" id="pastResultsTxt" className="form-control"
                                                       value={this.state.RVRatings} onChange={this.OnChangeCRRatings}
                                                       style={{width: '100%', marginLeft: '20px'}} required/>
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '10px',
                                                    float: 'left',
                                                    marginLeft: '10px',
                                                    color: "white"
                                                }}>%</label>
                                            </div>


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

                                        </div>

                                    </div>
                                    <div className="col">
                                        <div className="row">
                                            <div className="col-1">
                                                <input type="checkbox" id="PastResults" className="form-control"
                                                       defaultChecked={this.state.isRVReviews}
                                                       onChange={this.OnChangeIsCRReviews}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                />
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '15px',
                                                    float: 'left',
                                                    marginLeft: '20px',
                                                    color: "white"
                                                }}>Reviews</label>
                                            </div>


                                        </div>
                                        <div className="row">
                                            <div className="col-md-4">
                                                <input type="number" id="pastResultsTxt" className="form-control"
                                                       value={this.state.RVReviews} onChange={this.OnChangeCRReviews}
                                                       style={{width: '100%', marginLeft: '20px'}} required/>
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '10px',
                                                    float: 'left',
                                                    marginLeft: '10px',
                                                    color: "white"
                                                }}>%</label>
                                            </div>



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

                                        </div>

                                    </div>
                                    <div className="col">
                                        <div className="row">
                                            <div className="col-1">
                                                <input type="checkbox" id="PastResults" className="form-control"
                                                       defaultChecked={this.state.isStudentCount}
                                                       onChange={this.OnChangeIsCRStudentCount}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                />
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '15px',
                                                    float: 'left',
                                                    marginLeft: '20px',
                                                    color: "white"
                                                }}>Student Count</label>
                                            </div>


                                        </div>
                                        <div className="row">
                                            <div className="col-md-4">
                                                <input type="number" id="pastResultsTxt" className="form-control"
                                                       value={this.state.RVStudentCount}
                                                       onChange={this.OnChangeCRStudentCount}
                                                       style={{width: '100%', marginLeft: '20px'}} required/>
                                            </div>
                                            <div className="col">
                                                <label style={{
                                                    marginTop: '10px',
                                                    float: 'left',
                                                    marginLeft: '10px',
                                                    color: "white"
                                                }}>%</label>
                                            </div>



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

                                        </div>
                                    </div>
                                    <div className="col">
                                        <div className="row">
                                            <label>
                                    <span
                                        style={{marginTop: '15px', float: 'left', marginLeft: '20px', color: "white"}}>
                                            {this.state.TotalRecommendationCount} / 100</span>
                                            </label>
                                        </div>
                                        <div className="row">
                                            <button className="form-control" style={{
                                                background: "#216E9B",
                                                color: "white",
                                                margin: '10px',
                                                width: '50%'
                                            }}
                                                    onClick={this.onClickAddFilter}><b>Add Filter</b></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        :
                        <div className="row" style={{
                            marginRight: '50px',
                            marginLeft: '50px',
                            marginTop: '5px',
                            padding: '5px',
                            background: '#1E4258'
                        }}>
                            <span></span>
                        </div>
                    }
                    <div className="row" style={{justifyContent: 'center'}}>
                        {this.state.isClickFilterArrow ?
                            <button className="form-control" style={{width: '5%', height: '50px'}}
                                    onClick={this.onClickFilterArrow}>
                                <span style={{margin: '5px', cursor: 'pointer'}}><Icon.ArrowBarUp color="#444444"
                                                                                                  size={35}/></span>
                            </button>
                            :
                            <button className="form-control" style={{width: '5%', height: '50px'}}
                                    onClick={this.onClickFilterArrow}>
                                <span style={{margin: '5px', cursor: 'pointer'}}><Icon.ArrowBarDown color="#444444"
                                                                                                    size={35}/></span>
                            </button>
                        }
                    </div>
                    <div className="row"
                         style={{background: '#1E4258', marginLeft: '50px', marginRight: '50px', marginTop: '10px'}}>
                        <h5 style={{color: "white", float: 'left',margin: '15px'}}>{this.state.TutorFilteredList.length} Results</h5>
                    </div>
                    <div className="row">
                        <div className="col-8">
                            {this.state.TutorFilteredRecommendedListFinal.length > 0 ?
                                <div className="row"
                                     style={{
                                         background: '#1E4258',
                                         marginLeft: '50px',
                                         marginRight: '0px',
                                         marginTop: '10px'
                                     }}>
                                    <h4 style={{color: "white", float: 'left',margin: '15px'}}>Recommended List</h4>
                                </div>
                                :
                                <div>
                                </div>
                            }
                            <div className="" style={{marginLeft:'50px',marginRight:'0px'}}>
                                {this.state.TutorFilteredRecommendedListFinal.length > 0 ? this.state.TutorFilteredRecommendedListFinal.map((card) => {
                                    return (<TutorCard data={card}/>)
                                }) : <div></div>}

                            </div>

                            {this.state.TutorOnlyFilteredListFinal.length > 0 ?
                                <div className="row" style={{
                                    background: '#1E4258',
                                    marginLeft: '50px',
                                    marginRight: '0px',
                                    marginTop: '10px'
                                }}>
                                    <h4 style={{color: "white", float: 'left',margin: '15px'}}>Filtered List</h4>
                                </div>
                                :
                                <div>
                                </div>
                            }

                            <div className="" style={{marginLeft:'50px',marginRight:'0px'}}>
                                {this.state.TutorOnlyFilteredListFinal.length > 0 ? this.state.TutorOnlyFilteredListFinal.map((card) => {
                                    return (<TutorCard data={card}/>)
                                }) : <div></div>}

                            </div>
                        </div>
                        <div className="col-3">
                            {this.state.TutorOnlyFilteredListFinal.length > 0 ?
                            <RightSideAdd></RightSideAdd>
                            :
                                <div>
                                </div>
                            }
                        </div>
                    </div>

                    <div className="app-main__outer">

                        <HomeFooter/>
                    </div>

                </div>
            </div>
        )
    }
}