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

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

        this.state = {
            tutorID:'',
            instituteList: [],
            ClassMethods : [],
            subjectList : [],
            selectedClassMethod : '',
            isSelectInstitute : false,
            HomeClassType : ["Group Class", "Individual Class"],
            OtherClassTypes : ["Group Class","Mass Class", "Revision Class","Paper Class", "Individual Class"],
            ClassTypes:[],
            TutorClassList : [],
            selectedClassType : '',
            selectedSubject : '',
            labelClassMethod:'',
            labelClassType:'',
            labelClassCreatedDate:'',
            labelClassStartingDate:'',
            labelSubject:'',
            labelClassFee:'',
            labelClassFeeOption:'',
            labelBatch:'',
            labelClassID:'',
            typedNIC:'',
            ClassStudentList:[],
            user_email : '',
            user_id : '',
            user_name :'',
            user_type :'',
            isLogged : false
        }

        this.onChangeClassMethod = this.onChangeClassMethod.bind(this);
        this.onChangeClassTypeDropDown = this.onChangeClassTypeDropDown.bind(this);
        this.onChangeSubjectDropDown = this.onChangeSubjectDropDown.bind(this);
        this.onSelectOneClass = this.onSelectOneClass.bind(this);
        this.onChangeTypedNIC = this.onChangeTypedNIC.bind(this);
        this.onSubmitAddToClass = this.onSubmitAddToClass.bind(this);
        this.GetStudentList = this.GetStudentList.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,
            user_id : user_id,
            tutorID: user_id,
            user_name : user_name,
            user_type : user_type
        },()=>{
            axios.get(configs.BASE_URL + '/tutorSingUp/'+this.state.tutorID )
                .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,

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

                                this.setState({
                                    TutorClassList : response.data

                                }, ()=>{

                                })



                            })

                    })



                })

        })

    }

    GetStudentList(){

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

                this.setState({
                    ClassStudentList : response.data

                }, ()=>{

                    console.log(this.state.ClassStudentList);
                })



            })

    }

    onSubmitAddToClass(){

        if(this.state.labelClassID !== ""){
            const payload = {
                _id : this.state.labelClassID,
                student_nic : this.state.typedNIC,
                tutor_id : this.state.tutorID
            }

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


                })
                .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.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);
                });
        }
        else {
            swal("Ops!!!", "Please Select a class first", "warning");

        }


    }

    onChangeTypedNIC(e){
        this.setState({
            typedNIC:e.target.value
        })
    }

    onSelectOneClass(e){
        //console.log("E : " + e.target);
        console.log(e.target.value);

        this.state.TutorClassList.map((selectedClass)=>{
            if(selectedClass._id === e.target.value){
                console.log("crated date: " + selectedClass.createdAt)
                this.setState({
                    labelClassMethod:selectedClass.class_method,
                    labelClassType:selectedClass.class_type,
                    labelClassCreatedDate:selectedClass.createdAt,
                    labelClassStartingDate:selectedClass.class_startingDate,
                    labelSubject:selectedClass.subject,
                    labelClassFee:selectedClass.class_fee,
                    labelBatch:selectedClass.batch_no,
                    labelClassFeeOption: selectedClass.class_fee_option,
                    labelClassID: selectedClass._id
                },()=>{
                    this.GetStudentList();
                })
            }
        })

    }

    onChangeClassMethod(e) {
        console.log(e);
        console.log(e.target.value);
        this.setState({
            selectedClassMethod: e.target.value
        },()=>{
            if(e.target.value === "Institute"){
                this.setState({
                    isSelectInstitute : true,
                    ClassTypes : this.state.OtherClassTypes
                })
            }
            else {
                if(e.target.value === "Home Visit"){
                    this.setState({
                        isSelectInstitute : false,
                        ClassTypes : this.state.HomeClassType
                    })
                }
                else {
                    this.setState({
                        isSelectInstitute : false,
                        ClassTypes : this.state.OtherClassTypes
                    })
                }

            }
        })
    }


    onChangeClassTypeDropDown(e) {

        this.setState({
            selectedClassType: e
        })
    }

    onChangeSubjectDropDown(e) {
        this.setState({
            selectedSubject: e
        })
    }
    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-reddit-square"></i>
                            </div>
                            <div>
                                Student Request to Classes
                            </div>
                        </div>
                    </div>
                </div>

                <div className="main-card mb card">
                    <div className="card-body">
                        <div className="row">
                             <div className="scroll-area" style={{width:'100%', margin:'20px'}}>
                                 <div className="row">
                                     <div className="col" style={{width:'30%',paddingLeft:'15px',paddingBottom:'10px'}}>

                                         <input type="text" placeholder="Search" className="form-control" style={{width:'30%'}} />

                                     </div>
                                 </div>
                                 <div className="row">
                                     <div className="col">
                                         <select name="select" className="form-control" style={{width:'100%'}}
                                                 onChange={e => this.onChangeClassMethod(e)}>

                                             <option value="0" selected>Class Method</option>
                                             {this.state.ClassMethods.map((dis) =>
                                                 <option  value={dis}>
                                                     {dis}
                                                 </option>)}

                                         </select>
                                     </div>
                                     <div className="col">
                                         <select name="select" className="form-control" style={{width:'100%'}}
                                                 onChange={e => this.onChangeClassTypeDropDown(e.target.value)}>
                                             <option value="0" selected>Class Type</option>
                                             {this.state.ClassTypes.map((dis) =>
                                                 <option value={dis}>
                                                     {dis}
                                                 </option>)}
                                         </select>
                                     </div>
                                     <div className="col">
                                         <select name="select" className="form-control"
                                                 onChange={e => this.onChangeSubjectDropDown(e.target.value)}>
                                             <option value="0"  selected>Subject</option>
                                             {this.state.subjectList.map((dis) =>
                                                 <option  value={dis}>
                                                     {dis}
                                                 </option>)}
                                         </select>
                                     </div>
                                     <div className="col">
                                         <select name="select" className="form-control"
                                                 onChange={e => this.onChangeSubjectDropDown(e.target.value)}>
                                             <option value="0"  selected>Status</option>
                                             <option value="">Active</option>
                                             <option value="">Deactivate</option>
                                         </select>
                                     </div>

                                     <div className="col">
                                         <button className="form-control" style={{background:"#086232", color:"white"}}
                                                 onClick={this.FindTutor}><b>Search</b></button>
                                     </div>

                                 </div>

                                 <div className="" style={{marginTop:'15px'}}>

                                     <div className="table-dark row">
                                         <div className="col" style={{textAlign:'left', paddingLeft:'30px'}}>
                                             <label>Batch Name</label>
                                         </div>
                                         <div className="col">
                                             <label>Year</label>
                                         </div>
                                         <div className="col">
                                             <label>Starting Date</label>
                                         </div>
                                         <div className="col">
                                             <label>Subject</label>
                                         </div>
                                         <div className="col">
                                             <label>Class Method/Type</label>
                                         </div>
                                         <div className="col">

                                         </div>

                                         {/*<div className="col">*/}
                                         {/*    <div className="row">*/}
                                         {/*        <div className="col"><label>Edit /</label></div>*/}
                                         {/*        <div className="col"><label>Delete</label></div>*/}
                                         {/*    </div>*/}

                                         {/*</div>*/}
                                     </div>

                                     {this.state.TutorClassList.map((oneClass)=>{
                                         return(
                                             <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px', borderBottom: 'inset'}}>
                                                 <div className="col" style={{textAlign:'left'}}>
                                                     <label style={{marginLeft:'20px'}}>{oneClass.batch_no}</label>
                                                 </div>
                                                 <div className="col">
                                                     <label>{oneClass.batchYear}</label>
                                                 </div>
                                                 <div className="col">
                                                     <label>{moment(oneClass.class_startingDate).format("L") }</label>
                                                 </div>
                                                 <div className="col">
                                                     <label>{oneClass.subject}</label>
                                                 </div>
                                                 <div className="col">
                                                     <label>{oneClass.class_method + "-" + oneClass.class_type}</label>
                                                 </div>
                                                 <div className="col">
                                                     <button className="rounded" style={{background:'Orange', padding:'3px', width:'35px'}} value={oneClass._id} onClick={e => this.onSelectOneClass(e)}>+</button>
                                                 </div>
                                                 {/*<div className="col">*/}
                                                 {/*    <div className="row">*/}
                                                 {/*        <div className="col">*/}
                                                 {/*            <button className="rounded" style={{background:'Orange', padding:'3px', width:'35px'}}><Icon.Pencil color="white" size={20}/></button>*/}
                                                 {/*        </div>*/}
                                                 {/*        <div className="col">*/}
                                                 {/*            <button className="rounded" style={{background:'#8D2828', padding:'3px', width:'35px'}}><Icon.Eraser color="white" size={20}/></button>*/}

                                                 {/*        </div>*/}
                                                 {/*    </div>*/}

                                                 {/*</div>*/}
                                             </div>
                                         )

                                     })}

                                 </div>
                             </div>
                        </div>
                        <div className="row">
                            <div className="col">
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Class method</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{this.state.labelClassMethod}</label>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Class type</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{this.state.labelClassType}</label>
                                    </div>
                                </div>
                            </div>
                            <div className="col">
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Class created date</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{moment(this.state.labelClassCreatedDate).format("L") }</label>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Class starting date</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{moment(this.state.labelClassStartingDate).format("L")}</label>
                                    </div>
                                </div>
                            </div>
                            <div className="col">
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Subject</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{this.state.labelSubject}</label>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Class fee</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>Rs.{this.state.labelClassFee + " "}{this.state.labelClassFeeOption}</label>
                                    </div>
                                </div>
                            </div>
                            <div className="col">
                                <div className="row">
                                    <div className="col">
                                        <b><label style={{float:'left'}}>Batch</label></b>
                                        <label style={{float:'right',paddingRight:'10px'}}>:</label>
                                    </div>
                                    <div className="col">
                                        <label style={{float:'left'}}>{this.state.labelBatch}</label>
                                    </div>
                                </div>
                                <div className="row">

                                </div>
                            </div>

                        </div>
                        <div className="row">
                            <div className="col" style={{margin:'20px'}}>
                                <div className="row">
                                    <h5>Student List</h5>
                                </div>
                                <div className="row">
                                    <div className="col-">
                                        <label style={{float:'left'}}>Student NIC</label>
                                    </div>
                                    <div className="col">
                                        <input type="text" placeholder="NIC" className="form-control"
                                               onChange={this.onChangeTypedNIC} style={{width:'100%'}} />
                                    </div>
                                    <div className="col">
                                        <button className="form-control" style={{background:"#216E9B", color:"white", width:'60%'}}
                                                onClick={this.onSubmitAddToClass}><b>Add to Class</b></button>
                                    </div>
                                </div>
                                <div className="" style={{marginTop:'10px'}}>
                                    <div className="table-dark row">
                                        <div className="col" style={{textAlign:'left'}}>
                                            <label>Student NIC</label>
                                        </div>
                                        <div className="col">
                                            <label>Student Name</label>
                                        </div>
                                        <div className="col">
                                            <input type="text" placeholder="Search from NIC" className="form-control" style={{width:'100%',margin:'3px'}} />
                                        </div>
                                    </div>

                                    {this.state.ClassStudentList.map((student)=>{
                                        return(
                                            <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px',  borderBottom: 'inset'}}>
                                                <div className="col-md-4" style={{textAlign:'left'}}>
                                                    <label> {student.student_id.student_nic}</label>
                                                </div>
                                                <div className="col">
                                                    <label>{student.student_id.student_name}</label>
                                                </div>

                                                <div className="col">
                                                    <button className="rounded" style={{background:'#8D2828', padding:'3px', width:'50%', color:'white'}}>Remove</button>
                                                </div>

                                            </div>
                                        )
                                    })}

                                </div>

                            </div>
                            <div className="col" style={{margin:'20px'}}>
                                <div className="row">
                                    <h5>Students requests</h5>
                                </div>
                                <div className="row">
                                    <div className="col-">
                                        <label style={{float:'left'}}>All Student Requests to selected Class</label>
                                    </div>

                                </div>
                                <div className="" style={{marginTop:'10px'}}>
                                    <div className="table-dark row">
                                        <div className="col">
                                            <label>Student NIC</label>
                                        </div>
                                        <div className="col">
                                            <label>Student Name</label>
                                        </div>
                                        <div className="col">

                                        </div>
                                    </div>


                                    <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px',  borderBottom: 'inset'}}>
                                        <div className="col-md-4" style={{textAlign:'left'}}>
                                            <label >200114712426</label>
                                        </div>
                                        <div className="col">
                                            <label>Amila Thenuwara</label>
                                        </div>

                                        <div className="col">
                                            <button className="rounded" style={{background:'#086232', padding:'3px', width:'35px'}}><Icon.ArrowLeftCircle color="white" size={20}/></button>

                                            <button className="rounded" style={{background:'#8D2828', padding:'3px', width:'35px', marginLeft:'10px'}}><Icon.Eraser color="white" size={20}/></button>
                                        </div>

                                    </div>
                                    <div className="row" style={{background:'#DCDCDC', paddingBottom:'5px', paddingTop:'5px',  borderBottom: 'inset'}}>
                                        <div className="col-md-4" style={{textAlign:'left'}}>
                                            <label >200177014551</label>
                                        </div>
                                        <div className="col">
                                            <label>Supun Malshan</label>
                                        </div>

                                        <div className="col">
                                            <button className="rounded" style={{background:'#086232', padding:'3px', width:'35px'}}><Icon.ArrowLeftCircle color="white" size={20}/></button>

                                            <button className="rounded" style={{background:'#8D2828', padding:'3px', width:'35px', marginLeft:'10px'}}><Icon.Eraser color="white" size={20}/></button>
                                        </div>

                                    </div>
                                </div>

                            </div>

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