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 AddClassDetails 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: [],
            selectedClassType: '',
            selectedInstitute: '',
            batchName: '',
            batchYear:'',
            classStartingDate: Date,
            selectedSubject: '',
            ClassFee: '',
            isActiveClass: false,
            isActiveForStudent: false,
            TutorClassList: [],
            classFeeOptions: ["Per hour", "Per Day", "Per Month"],
            selectedClassFeeOption: '',
            days : ["Monday","TuesDay","Wednesday","Thursday","Friday","Saturday","Sunday"],
            selectedDay:'',
            HoursTime :'',
            AdmissionFee : '',
            user_email : '',
            user_id : '',
            user_name :'',
            user_type :'',
            isLogged : false
        }

        this.onChangeClassMethod = this.onChangeClassMethod.bind(this);
        this.onChangeClassTypeDropDown = this.onChangeClassTypeDropDown.bind(this);
        this.onChangeInstituteDropDown = this.onChangeInstituteDropDown.bind(this);
        this.onChangeBatchName = this.onChangeBatchName.bind(this);
        this.onChangeClassStartingDate = this.onChangeClassStartingDate.bind(this);
        this.onChangeSubjectDropDown = this.onChangeSubjectDropDown.bind(this);
        this.onChangeClassFee = this.onChangeClassFee.bind(this);
        this.onChangeIsActiveClass = this.onChangeIsActiveClass.bind(this);
        this.onChangeIsActiveForStudent = this.onChangeIsActiveForStudent.bind(this);
        this.onSubmitCreateClass = this.onSubmitCreateClass.bind(this);
        this.onChangeClassFeeOptions = this.onChangeClassFeeOptions.bind(this);
        this.onChangeBatchYear = this.onChangeBatchYear.bind(this);
        this.onChangeDay = this.onChangeDay.bind(this);
        this.onChangeHours = this.onChangeHours.bind(this);
        this.onChangeAdmissionFee = this.onChangeAdmissionFee.bind(this);
        this.GetTutorClasses = this.GetTutorClasses.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,

                    }, () => {

                        this.GetTutorClasses();
                    })


                })

        })

    }

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

                this.setState({
                    TutorClassList: response.data

                }, () => {


                })


            })
    }

    onChangeAdmissionFee(e) {
        this.setState({
            AdmissionFee: e.target.value
        })
    }
    onChangeHours(e) {
        this.setState({
            HoursTime: e.target.value
        })
    }
    onChangeDay(e) {

        this.setState({
            selectedDay: e
        })
    }

    onChangeClassFeeOptions(e) {

        this.setState({
            selectedClassFeeOption: e
        })
    }

    onChangeInstituteDropDown(e) {

        this.setState({
            selectedInstitute: e.target.value
        })
    }

    onChangeClassTypeDropDown(e) {

        this.setState({
            selectedClassType: e
        })
    }

    onChangeBatchName(e) {
        this.setState({
            batchName: e.target.value
        })
    }
    onChangeBatchYear(e) {
        this.setState({
            batchYear: e.target.value
        })
    }

    onChangeClassStartingDate(e) {
        this.setState({
            classStartingDate: e.target.value
        })
    }

    onChangeSubjectDropDown(e) {
        this.setState({
            selectedSubject: e
        })
    }

    onChangeClassFee(e) {
        this.setState({
            ClassFee: e.target.value
        })
    }

    onChangeIsActiveClass(e) {

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

    }

    onChangeIsActiveForStudent(e) {
        if (this.state.isActiveForStudent) {
            this.setState({
                isActiveForStudent: false
            })
        } else {
            this.setState({
                isActiveForStudent: true
            })
        }

    }

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

            }
        })
    }

    onSubmitCreateClass = e => {
        e.preventDefault();
        let instituteID = '';
        this.state.instituteList.map(name => {
            if (this.state.selectedInstitute === name.institute_name) {
                instituteID = name._id;
            }
        })

        const newClass = {
            tutor_id: this.state.tutorID,
            class_method: this.state.selectedClassMethod,
            class_type: this.state.selectedClassType,
            institute_id: instituteID,
            batch_no: this.state.batchName,
            class_startingDate: this.state.classStartingDate,
            subject: this.state.selectedSubject,
            class_fee: this.state.ClassFee,
            class_fee_option: this.state.selectedClassFeeOption,
            isActiveClass: this.state.isActiveClass,
            isActiveForStudent: this.state.isActiveForStudent,
            class_conduct_day:this.state.selectedDay,
            class_conduct_time :this.state.HoursTime,
            AdmissionFee : this.state.AdmissionFee,
            batchYear : this.state.batchYear
        }

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

                //window.location.reload();
            })
    }

    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-users"></i>
                            </div>
                            <div>
                                Add Class Details
                            </div>
                        </div>
                    </div>
                </div>

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

                        <form>
                            <div className="row">
                                <div className="col-md-4">
                                    <div className="card-body">
                                        <div className="position-relative form-group">
                                            <label>Class Method</label>
                                            <select name="select" className="form-control"
                                                    onChange={e => this.onChangeClassMethod(e)}>

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

                                            </select>
                                        </div>
                                        <div className="position-relative form-group">
                                            <label>Class Type</label>
                                            <select name="select" className="form-control"
                                                    onChange={e => this.onChangeClassTypeDropDown(e.target.value)}>
                                                <option value="" disabled selected>Select Class Type</option>
                                                {this.state.ClassTypes.map((dis) =>
                                                    <option value={dis}>
                                                        {dis}
                                                    </option>)}
                                            </select>
                                        </div>

                                        {this.state.isSelectInstitute === true ?
                                            <div className="position-relative form-group">

                                                <label>Institute</label>
                                                <select name="select" className="form-control"
                                                        onChange={e => this.onChangeInstituteDropDown(e)}>
                                                    <option value="" disabled selected>Select the Institute</option>
                                                    {this.state.instituteList.map((dis) =>
                                                        <option value={dis.institute_name}>
                                                            {dis.institute_name}
                                                        </option>)}

                                                </select>

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


                                        <div className="position-relative form-group">
                                            <label>Batch Name & Year</label>

                                            <div className="row">
                                                <div className="col">
                                                    <input type="text" placeholder="Batch Name" className="form-control"
                                                           onChange={this.onChangeBatchName}/>
                                                </div>
                                                <div className="col">
                                                    <input type="Number" placeholder="Year" className="form-control"
                                                           onChange={this.onChangeBatchYear}/>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="position-relative form-group">
                                            <label>Subject</label>
                                            <select name="select" className="form-control"
                                                    onChange={e => this.onChangeSubjectDropDown(e.target.value)}>
                                                <option value="" disabled selected>Select the Subject</option>
                                                {this.state.subjectList.map((dis) =>
                                                    <option value={dis}>
                                                        {dis}
                                                    </option>)}
                                            </select>
                                        </div>
                                        <div className="position-relative form-group">
                                            <label>Class Starting Date</label>
                                            <input type="date" className="form-control"
                                                   onChange={this.onChangeClassStartingDate}/>
                                        </div>
                                        <div className="position-relative form-group">
                                            <label>Class Conduct Day and Time</label>

                                            <div className="row">
                                                <div className="col">
                                                    <select name="select" className="form-control"
                                                            onChange={e => this.onChangeDay(e.target.value)}>
                                                        <option value="" disabled selected>Select the Day</option>
                                                        {this.state.days.map((dis) =>
                                                            <option value={dis}>
                                                                {dis}
                                                            </option>)}
                                                    </select>
                                                </div>
                                                <div className="col">
                                                    <input type="text" placeholder="7.00 PM - 9.00 PM" className="form-control"
                                                           onChange={this.onChangeHours}/>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="position-relative form-group">
                                            <label>Class Fee (Rs.)</label>
                                            <div className="row">
                                                <div className="col">
                                                    <input type="text" className="form-control"
                                                           onChange={this.onChangeClassFee}/>
                                                </div>
                                                <div className="col">
                                                    <select name="select" className="form-control"
                                                            onChange={e => this.onChangeClassFeeOptions(e.target.value)}>
                                                        <option value="" disabled selected>Select Options</option>
                                                        {this.state.classFeeOptions.map((dis) =>
                                                            <option value={dis}>
                                                                {dis}
                                                            </option>)}
                                                    </select>
                                                </div>
                                            </div>


                                        </div>
                                        <div className="position-relative form-group">
                                            <label>Admission Fee</label>
                                            <div className="col">
                                                <input type="text" placeholder="Admission Fee" className="form-control"
                                                       onChange={this.onChangeAdmissionFee}/>
                                            </div>
                                        </div>
                                        <div className="position-relative form-group">
                                            <div className="row">
                                                <input type="checkbox" id="onlineClass" className="form-control"
                                                       onChange={this.onChangeIsActiveClass}
                                                       defaultChecked={this.state.isActiveClass}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                />
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}>Active Class</label>

                                                <input type="checkbox" id="onlineClass" className="form-control"
                                                       onChange={this.onChangeIsActiveForStudent}
                                                       defaultChecked={this.state.isActiveForStudent}
                                                       style={{
                                                           width: '20px',
                                                           height: '20px',
                                                           float: 'left',
                                                           marginLeft: '25px',
                                                           marginTop: '15px'
                                                       }}
                                                />
                                                <label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}>Active for Students</label>
                                            </div>
                                        </div>

                                    </div>
                                    <div className="position-relative form-group">
                                        <button className="form-control" style={{
                                            background: "#216E9B",
                                            color: "white",
                                            margin: '50px',
                                            width: '50%'
                                        }}
                                                onClick={this.onSubmitCreateClass}><b>Create Class</b></button>
                                    </div>
                                </div>
                                <div className="col-md-8">
                                    <div className="card-body">
                                        <div className="position-relative form-group">
                                            <label><h5>Classes</h5></label>

                                        </div>

                                        <div className="card-border" style={{background: 'lightgray', padding: '15px'}}>
                                            <div className="row">
                                                <h5 style={{marginLeft: '10px'}}>Filters</h5>
                                            </div>
                                            <div className="row">
                                                <div className="col">
                                                    <select name="select" className="form-control"
                                                            style={{width: '100%'}}
                                                            onChange={e => this.onChangeClassMethod(e)}>

                                                        <option value="" disabled 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="" disabled 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="" disabled 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="" disabled selected>Status</option>
                                                        <option value="">Active Class</option>
                                                        <option value="">Active For Students</option>
                                                    </select>
                                                </div>

                                            </div>
                                            <div className="row" style={{marginTop: '10px'}}>
                                                <div className="col-6">

                                                    <input type="text" placeholder="Search" className="form-control"/>

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

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

                                            <div className="table-dark row">
                                                <div className="col" style={{textAlign: 'left'}}>
                                                    <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 className="row">
                                                        <div className="col"><label>Edit /</label></div>
                                                        <div className="col"><label>Delete</label></div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div className="scroll-area-lg" style={{marginLeft:'-15px',marginRight:'-15px' }}>
                                            {this.state.TutorClassList.map((oneClass) => {
                                                return (


                                                        <div className="row" style={{
                                                            background: '#DCDCDC',
                                                            paddingBottom: '5px',
                                                            paddingTop: '5px',
                                                            borderBottom: 'inset'
                                                        }}>
                                                            <div className="col" style={{textAlign: 'left', marginLeft:'10px'}}>
                                                                <label style={{}}>{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">
                                                                <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>
                            </div>

                            <div className="position-relative row form-group">
                                {/*<div className="col-sm-12">*/}
                                {/*    <button className="btn btn-primary" style={{width:"150px"}} onClick={this.onSubmitCreateClass}>Create Class</button>*/}
                                {/*</div>*/}
                            </div>

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

        );
    }
}