import React, {Component} from "react";
import axios from "axios";
import * as configs from '../../Config/config';
import MaleAvatar from "../../Images/male_avatar.png";
import FemaleAvatar from "../../Images/female_avatar.png";
import {Button} from "react-bootstrap";

export default class ViewProgress extends Component{
    constructor(props) {
        super(props);

        this.state = {
            student_details : [],
            predi_marks : '',
            predi_status : '',
            predi_grade : ''
        };
    }

    componentDidMount() {
        axios.get(configs.BASE_URL+'/admin/studper/student/'+this.props.match.params.id)
            .then(response => {
                this.setState({ student_details : response.data})
                console.log(response.data);
            })
            .catch(error =>{
                console.log(error);
            })
    }

    onSubmitHandler = e => {
        e.preventDefault();

        const predictDetails = {
            sex : this.state.student_details[0].sex,
            guardian : this.state.student_details[0].guardian,
            studytime : this.state.student_details[0].study_time,
            activities : this.state.student_details[0].activities,
            internet : this.state.student_details[0].internet,
            freetime : this.state.student_details[0].free_time,
            absences : this.state.student_details[0].absences,
            G1 : this.state.student_details[0].g1,
            G2 : this.state.student_details[0].g2,
        }

        // console.log(`sex: ${this.state.student_details[0].sex}`);
        // console.log(`guardian: ${this.state.student_details[0].guardian}`);
        // console.log(`studytime: ${this.state.student_details[0].study_time}`);
        // console.log(`activities: ${this.state.student_details[0].activities}`);
        // console.log(`internet: ${this.state.student_details[0].internet}`);
        // console.log(`freetime: ${this.state.student_details[0].free_time}`);
        // console.log(`absences: ${this.state.student_details[0].absences}`);
        // console.log(`G1: ${this.state.student_details[0].g1}`);
        // console.log(`G2: ${this.state.student_details[0].g2}`);

        axios.post(configs.BASE_URL+'/admin/studper/predict_quiz_marks',predictDetails)
            .then(res =>
                // console.log("Marks :"+res.data)
                this.setState({
                    predi_marks : res.data
                })
            );
    }

    onSubmitStatusHandler = e => {
        e.preventDefault();

        const predictStatusDetails = {
            sex : this.state.student_details[0].sex,
            guardian : this.state.student_details[0].guardian,
            studytime : this.state.student_details[0].study_time,
            activities : this.state.student_details[0].activities,
            internet : this.state.student_details[0].internet,
            freetime : this.state.student_details[0].free_time,
            absences : this.state.student_details[0].absences,
            G1 : this.state.student_details[0].g1,
            G2 : this.state.student_details[0].g2,
        }

        axios.post(configs.BASE_URL+'/admin/studper/predict_pass_fail',predictStatusDetails)
            .then(res =>
                // console.log("Status :"+res.data.toString())
                this.setState({
                    predi_status : res.data.toString()
                })
            );
    }

    onSubmitGradeHandler = e => {
        e.preventDefault();

        const predictGradeDetails = {
            sex : this.state.student_details[0].sex,
            guardian : this.state.student_details[0].guardian,
            studytime : this.state.student_details[0].study_time,
            activities : this.state.student_details[0].activities,
            internet : this.state.student_details[0].internet,
            freetime : this.state.student_details[0].free_time,
            absences : this.state.student_details[0].absences,
            G1 : this.state.student_details[0].g1,
            G2 : this.state.student_details[0].g2,
        }

        axios.post(configs.BASE_URL+'/admin/studper/predict_grade',predictGradeDetails)
            .then(res =>
                // console.log("Grade :"+res.data)
                this.setState({
                    predi_grade : res.data
                })
            );
    }

    render() {
        return (
            <div>
                {this.state.student_details.map((details)=>{

                    const mark1 = (details.g1 * 100)/20;
                    const mark2 = (details.g2 * 100)/20;
                    const mark3 = (details.g3 * 100)/20;
                    const markspred = (this.state.predi_marks * 100)/20;

                    return(

                        <div className="row">

                            {/*--------Personal Details---------*/}

                            <div className="col-md-4">
                                <div className="card-shadow-primary border mb-3 card card-body border-primary">
                                    <h5 className="card-title">
                                        Student Name
                                    </h5>
                                    {details.student_id.student_name}
                                </div>
                                <div className="card-shadow-primary border mb-3 card card-body border-primary">
                                    <h5 className="card-title">
                                        Address
                                    </h5>
                                    {details.student_id.student_address}
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="card-border mb-3 card card-body border-primary">
                                    <h5 className="card-title">
                                        Email
                                    </h5>
                                    <a href = {"mailto:" + details.student_id.student_email}>{details.student_id.student_email}</a>
                                </div>
                                <div className="card-shadow-primary border mb-3 card card-body border-primary">
                                    <h5 className="card-title">
                                        Phone Number
                                    </h5>
                                    <a href = {"tel:" + details.student_id.student_phone}>{details.student_id.student_phone}</a>
                                </div>
                            </div>

                            <div className="col-md-2">
                                <div className="card-shadow-primary border mb-3 card card-body border-primary" style={{paddingTop:"50px",paddingBottom:"39px"}}>
                                    <h5 className="card-title">
                                        Picture
                                    </h5>
                                    {details.student_id.student_gender == "Male" ? <img className="rounded-circle center" src={MaleAvatar} style={{width:"100px",height:"100px"}}/> : <img className="rounded-circle" src={FemaleAvatar} style={{width:"100px",height:"100px"}} />}
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="main-card mb-3 card">
                                    <div className="card-body">
                                        <ul className="list-group">

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Guardian</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.student_id.guardian_relationship}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Guardian Name</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.student_id.guardian_name}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Guardian Email</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.student_id.guardian_email}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="main-card mb-3 card">
                                    <div className="card-body">
                                        <ul className="list-group">

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Absences</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.absences} days</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Extra Curricular Activities</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.activities == 1 ? "Yes" : "No"}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Free time after School</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.free_time} hours</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-outer">
                                                        <div className="widget-content-wrapper">
                                                            <div className="widget-content-left">
                                                                <div className="widget-heading">Internet access at Home</div>
                                                            </div>
                                                            <div className="widget-content-right">
                                                                <div className="widget-subheading">{details.internet == 1 ? "Yes" : "No"}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {/*---------Display Results-------------*/}

                            {/* 1 */}
                            <div className="col-md-12 col-lg-4">
                                <div className="card-shadow-danger mb-3 widget-chart widget-chart2 text-left card">
                                    <div className="widget-content">
                                        <div className="widget-content-outer">
                                            <div className="widget-content-wrapper">
                                                <div className="widget-content-left pr-2 fsize-1">
                                                    <div className="widget-numbers mt-0 fsize-3 text-danger">{mark1}%</div>
                                                </div>
                                                <div className="widget-content-right w-100">
                                                    <div className="progress-bar-xs progress">
                                                        <div className="progress-bar bg-danger" role="progressbar" aria-valuenow={mark1} aria-valuemin={0} aria-valuemax={100} style={{width: mark1+'%'}} />
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="widget-content-left fsize-1">
                                                <div className="text-muted opacity-10" style={{fontWeight: "bold"}}>Paper 1 Marks - ({details.g1}/20)</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* 2 */}
                            <div className="col-md-12 col-lg-4">
                                <div className="card-shadow-success mb-3 widget-chart widget-chart2 text-left card">
                                    <div className="widget-content">
                                        <div className="widget-content-outer">
                                            <div className="widget-content-wrapper">
                                                <div className="widget-content-left pr-2 fsize-1">
                                                    <div className="widget-numbers mt-0 fsize-3 text-success">{mark2}%</div>
                                                </div>
                                                <div className="widget-content-right w-100">
                                                    <div className="progress-bar-xs progress">
                                                        <div className="progress-bar bg-success" role="progressbar" aria-valuenow={mark2} aria-valuemin={0} aria-valuemax={100} style={{width: mark2+'%'}} />
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="widget-content-left fsize-1">
                                                <div className="text-muted opacity-10" style={{fontWeight: "bold"}}>Paper 2 Marks - ({details.g2}/20)</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* 3 */}
                            <div className="col-md-12 col-lg-4">

                                {this.state.predi_marks == '' ?

                                    <div className="card-shadow-warning mb-3 widget-chart widget-chart2 text-left card">
                                        <div className="widget-content">
                                            <div className="widget-content-outer">
                                                <div className="widget-content-wrapper">
                                                    <div className="widget-content-left pr-2 fsize-1">
                                                        <div className="widget-numbers mt-0 fsize-3 text-warning">{mark3}%</div>
                                                    </div>
                                                    <div className="widget-content-right w-100">
                                                        <div className="progress-bar-xs progress">
                                                            <div className="progress-bar bg-warning" role="progressbar" aria-valuenow={mark3} aria-valuemin={0} aria-valuemax={100} style={{width: mark3+'%'}} />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="widget-content-left fsize-1">
                                                    <div className="text-muted opacity-10" style={{fontWeight: "bold"}}>Paper 3 Marks - ({details.g3 == null ? "Pending" : details.g3}/20)</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    :

                                    <div className="card-shadow-warning mb-3 widget-chart widget-chart2 text-left card">
                                        <div className="widget-content">
                                            <div className="widget-content-outer">
                                                <div className="widget-content-wrapper">
                                                    <div className="widget-content-left pr-2 fsize-1">
                                                        <div className="widget-numbers mt-0 fsize-3 text-warning">{markspred}%</div>
                                                    </div>
                                                    <div className="widget-content-right w-100">
                                                        <div className="progress-bar-xs progress">
                                                            <div className="progress-bar bg-warning" role="progressbar" aria-valuenow={markspred} aria-valuemin={0} aria-valuemax={100} style={{width: markspred+'%'}} />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="widget-content-left fsize-1">
                                                    <div className="text-muted opacity-10" style={{fontWeight: "bold"}}><span className="mb-2 mr-2 badge badge-pill badge-warning">Predicted</span> Marks - ({this.state.predi_marks == null ? "Pending" : this.state.predi_marks}/20)</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }

                            </div>

                            {/* 4 */}
                            {this.state.predi_status == '' ?
                                ''
                                :
                                <div className="col-md-12 col-lg-4">
                                    <div className="card-shadow-success mb-3 widget-chart widget-chart2 text-left card">
                                        <div className="widget-content">
                                            <div className="widget-content-outer">
                                                <div className="widget-content-left fsize-1">
                                                    <div className="text-muted opacity-10" style={{fontWeight: "bold"}}><span className="mb-2 mr-2 badge badge-pill badge-warning">Predicted</span> Status of Student : {this.state.predi_status == 1 ? "Pass" : "Fail"}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }

                            {/* 5 */}
                            {this.state.predi_grade == '' ?
                                ''
                                :
                                <div className="col-md-12 col-lg-4">
                                    <div className="card-shadow-success mb-3 widget-chart widget-chart2 text-left card">
                                        <div className="widget-content">
                                            <div className="widget-content-outer">
                                                <div className="widget-content-left fsize-1">
                                                    <div className="text-muted opacity-10" style={{fontWeight: "bold"}}><span className="mb-2 mr-2 badge badge-pill badge-warning">Predicted</span> Grade of the Student : {this.state.predi_grade}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }

                            {/* 6 - empty div */}
                            <div className="col-md-12 col-lg-4">
                            </div>

                            {details.g3 == null
                                ?
                                <div className="row col-md-12">
                                    {/* 7 */}
                                    <div className="col-md-12 col-lg-4">
                                        <form onSubmit={this.onSubmitHandler}>
                                            <Button type="submit">Predict Marks of Next Test</Button>
                                        </form>
                                    </div>
                                    {/* 8 */}
                                    <div className="col-md-12 col-lg-4">
                                        <form onSubmit={this.onSubmitStatusHandler}>
                                            <Button type="submit">Predict Status of Student</Button>
                                        </form>
                                    </div>
                                    {/* 9 */}
                                    <div className="col-md-12 col-lg-4">
                                        <form onSubmit={this.onSubmitGradeHandler}>
                                            <Button type="submit">Predict Grade of the Student</Button>
                                        </form>
                                    </div>
                                </div>
                                :
                                ''
                            }
                        </div>
                    );
                })}
            </div>
        );
    }
}