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

export default class ProgressStudents extends Component{

    constructor(props) {
        super(props);

        this.state = {
            info: [],
        };
    }

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

        axios.get(configs.BASE_URL+'/admin/studper/'+tutor_id)
            .then(response => {
                console.log(response.data);
                // const info = response.data;
                this.setState({
                   info : response.data
                });

            })
            .catch(error =>{
                console.log(error);
            })

    }

    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>
                                    Students List
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-12">
                        <div className="main-card mb-3 card">
                            <div className="card-body">
                                <table className="mb-0 table table-striped">
                                    <thead>
                                    <tr>
                                        <th>Student Name</th>
                                        <th>Photo</th>
                                        <th>Details</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {this.state.info.map((student)=> {
                                        return(
                                            <tr>
                                                <td>{student.student_id.student_name}</td>
                                                <td>{student.student_id.student_gender == 'Male'? <img className="rounded-circle" src={MaleAvatar} style={{width:"100px",height:"100px"}}/> : <img className="rounded-circle" src={FemaleAvatar} style={{width:"100px",height:"100px"}}/> }</td>
                                                <td>
                                                    <Link style={{color:"black"}} to={"/admin/studper/student/"+student.student_id._id}>
                                                        <button style={{width:"auto"}} className="btn btn-warning mr-1">Show Progress</button>
                                                    </Link>
                                                </td>
                                            </tr>
                                        );
                                    })}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            );
        // }

    }
}