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

export default class AddPerformanceDetails extends Component{

    constructor(props) {
        super(props);

        this.state = {
            tutor_id : '',
            student_id : '',
            sex : '',
            guardian : '',
            study_time : '',
            activities : '',
            internet : '',
            free_time : '',
            absences : '',
            g1 : '',
            g2 : '',
            g3 : ''
        };
    }

    componentDidMount() {
        const tutor_id = localStorage.getItem("userID");

        this.setState({
            tutor_id : tutor_id
        })
    }

    onChangeHandler = e => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

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

        const studPerfDetails = {
            tutor_id : this.state.tutor_id,
            student_id : this.state.student_id,
            sex : this.state.sex,
            guardian: this.state.guardian,
            study_time : this.state.study_time,
            activities : this.state.activities,
            internet : this.state.internet,
            free_time : this.state.free_time,
            absences : this.state.absences,
            g1 : this.state.g1,
            g2 : this.state.g2,
            g3 : this.state.g3
        }

        console.log(`Form submitted:`);
        console.log(`tutor_id: ${this.state.tutor_id}`);
        console.log(`std_id: ${this.state.student_id}`);
        console.log(`sex: ${this.state.sex}`);
        console.log(`guardian: ${this.state.guardian}`);
        console.log(`study_time: ${this.state.study_time}`);
        console.log(`activities: ${this.state.activities}`);
        console.log(`internet: ${this.state.internet}`);
        console.log(`free_time: ${this.state.free_time}`);
        console.log(`absences: ${this.state.absences}`);
        console.log(`G1: ${this.state.g1}`);
        console.log(`G2: ${this.state.g2}`);
        console.log(`G3: ${this.state.g3}`);

        axios.post(configs.BASE_URL+'/admin/studper/store',studPerfDetails)
            .then(
                res => {
                    console.log(res.data)
                    swal("success!!!", res.data, "success")
                });

        e.target.reset();
    }


    render() {
        return (

            <div>
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div className="page-title-icon">
                                <i className="pe-7s-display1 fa fa-line-chart"></i>
                            </div>
                            <div>
                                Add Student Performance Details
                            </div>
                        </div>
                    </div>
                </div>

                <div className="main-card mb-3 card">
                    <div className="card-body">

                        <form onSubmit={this.onSubmitHandler}>

                            <div className="position-relative row form-group">
                                <label htmlFor="stdId" className="col-sm-2 col-form-label">Tutor ID</label>
                                <div className="col-sm-3">
                                    <input type="text" name="tutor_id" id="tutId" value={this.state.tutor_id} className="form-control" disabled/>
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="stdId" className="col-sm-2 col-form-label">Student ID</label>
                                <div className="col-sm-3">
                                    <input type="text" name="student_id" id="stdId" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Student id of the student</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="sex" className="col-sm-2 col-form-label">Sex</label>
                                <div className="col-sm-3">
                                    <select defaultValue="" className="form-control" name="sex" onChange={this.onChangeHandler}>
                                        <option disabled={true} value="">Select</option>
                                        <option value="1">Male</option>
                                        <option value="0">Female</option>
                                    </select>
                                </div>
                                <label>Female / Male</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="guardian" className="col-sm-2 col-form-label">Guardian</label>
                                <div className="col-sm-3">
                                    <select defaultValue="" className="form-control" name="guardian" onChange={this.onChangeHandler}>
                                        <option disabled={true} value="">Select</option>
                                        <option value="1">Father</option>
                                        <option value="0">Mother</option>
                                        <option value="2">Other</option>
                                    </select>
                                </div>
                                <label>Guardian of the student</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="studyTime" className="col-sm-2 col-form-label">Study Time</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="24" name="study_time" id="studyTime" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Study Time after school</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="extraAct" className="col-sm-2 col-form-label">Extra Curriculum Activities</label>
                                <div className="col-sm-3">
                                    <select defaultValue="" className="form-control" name="activities" onChange={this.onChangeHandler}>
                                        <option disabled={true} value="">Select</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                </div>
                                <label>Doing extra-curricular activities</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="int" className="col-sm-2 col-form-label">Internet at Home</label>
                                <div className="col-sm-3">
                                    <select defaultValue="" className="form-control" name="internet" onChange={this.onChangeHandler}>
                                        <option disabled={true} value="">Select</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                </div>
                                <label>Internet availability at home</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="freeTime" className="col-sm-2 col-form-label">Free Time</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="24" name="free_time" id="freeTime" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Free time available after school</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="abs" className="col-sm-2 col-form-label">Absences</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="99" name="absences" id="abs" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Number of days absent in tution class</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="quiz1" className="col-sm-2 col-form-label">Quiz 1 Marks</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="20" name="g1" id="quiz1" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Quiz 1 marks obtained by the student</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="quiz2" className="col-sm-2 col-form-label">Quiz 2 Marks</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="20" name="g2" id="quiz2" className="form-control" onChange={this.onChangeHandler} required/>
                                </div>
                                <label>Quiz 2 marks obtained by the student</label>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="quiz3" className="col-sm-2 col-form-label">Quiz 3 Marks</label>
                                <div className="col-sm-3">
                                    <input type="number" min="0" max="20" name="g3" id="quiz3" className="form-control" onChange={this.onChangeHandler}/>
                                </div>
                                <label>Quiz 3 marks obtained by the student</label>
                            </div>

                            <div className="position-relative row form-group">
                                <div className="col-sm-12">
                                    <button className="btn btn-primary" style={{width:"150px"}} type="submit">Save Details</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>

        );
    }
}