import React, { useState } from "react";
import { Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import moment from "moment";
import "jquery/dist/jquery.min.js";
import "./Style.css";
//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/jquery.dataTables.min.css";
import "font-awesome/css/font-awesome.min.css";
import DateRangePicker from "react-bootstrap-daterangepicker";
import "bootstrap-daterangepicker/daterangepicker.css";
import $ from "jquery";
import baseurl from "../../services/apiconfig";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import ValidatePermissionsFun from "../../services/ValidatePermissionsFun";
import { getToken } from "../../utils/Auth/token";
import jwt_decode from "jwt-decode";
const axios = require("axios");
const isAuthenticated = getToken();
var user = jwt_decode(isAuthenticated);


var SubModulesAccessible = ValidatePermissionsFun.isAuthorized(user.permission, 'student-dashboard');
var ModulesAccessible = ValidatePermissionsFun.isModuleAuthorized(user.permission, 'student-dashboard');

var StudentAppliedPermission = 0;
SubModulesAccessible.map(function (person) {
  if (person.name == "student-applied") {
    StudentAppliedPermission = person.value;
  }
});

if (!ModulesAccessible) {
  var Message = localStorage.setItem("access_message", 'You do not have permission to access this page. Kindly contact administrator.');
  window.location.href = "/dashboard"
}
class AppliedStudent extends React.Component {
  componentDidMount() {
    $(document).ready(function () {
      $("#show-hidden-menu").click(function () {
        $(".hidden-menu").slideToggle("slow");
      });
    });


    if (StudentAppliedPermission && StudentAppliedPermission >= 1) {
      this.HandleApplicantsList()
    }
  }
  HandleApplicantsList() {
    axios
      .get(baseurl.baseurl + `/applicant/getallapplicant`)
      .then((res) => {
        this.setState({ applicantsList: res?.data?.data?.sort((a, b) => (b.created_date > a.created_date) ? 1 : ((a.created_date > b.created_date) ? -1 : 0)) });
        $("#example").DataTable();
      })
      .catch((err) => {
        toast.error("Error occurred at API end (" + err.message + ")");
      });
  }
  constructor() {
    super();
    this.state = {};
  }

  handleChange(evt) {
    this.setState({
      [evt.target.name]: evt.target.value,
    });
  }
  render() {
    const applicantsList = this.state.applicantsList || [];
    return (
      <div>
        <section className="breadcrumbs">
          <span>
            <Link to={"/dashboard"}>Home</Link>
          </span>{" "}
          <span>
            <span className="fa fa-circle dot"></span>
          </span>{" "}
          <span>Student Applied</span>
        </section>
        <section className="content">
          <ToastContainer />
          <div className="col-xs-12">
            <div className="box">
              <div className="box-header d-flexi">
                <h3 className="box-title">Student Applied</h3>
                <div className="dataTables_length" id="example1_length"></div>
              </div>
              <div className="box-body">
                <div className="row">
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Date Apply On</label>
                      <select className="form-control">
                        <option value="">Select</option>
                        <option value="">Next Followup Date</option>
                        <option value="">Last Followup Date</option>
                        <option value="">Created Date</option>
                      </select>
                    </div>
                  </div>
                  <div className="col-sm-2">
                    <label>Date&#160;</label>
                    <DateRangePicker>
                      <button className="form-control">
                        <i className="fa fa-calendar"></i>
                      </button>
                    </DateRangePicker>
                  </div>
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Lead Status</label>
                      <select className="form-control">
                        <option value="">Select Status</option>
                        <option value="">New</option>
                        <option value="">Pending</option>
                        <option value="">Followup</option>
                        <option value="">Completed</option>
                      </select>
                    </div>
                  </div>
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Lead Type</label>
                      <select className="form-control">
                        <option value="">Select Type</option>
                        <option value="">No Response</option>
                        <option value="">Callback</option>
                        <option value="">Followup</option>
                      </select>
                    </div>
                  </div>

                  <div className="col-sm-3">
                    <label>&#160;</label>
                    <div className="dataTables_length" id="example1_length">
                      <button
                        type="submit"
                        name="filter"
                        id="filter"
                        className="btn btn-warning filter mr-r"
                      >
                        Filter
                      </button>
                      <span id="show-hidden-menu" style={{ cursor: "pointer" }}>
                        &nbsp;&nbsp;<b>Advance Filter</b>
                      </span>
                    </div>
                  </div>
                </div>
                <div
                  className="row hidden-menu mr-10"
                  style={{ display: "none" }}
                >
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Application Executive</label>
                      <select className="form-control">
                        <option value="">Select</option>
                        <option value="">Neeraj</option>
                        <option value="">Devesh</option>
                        <option value="">Raj Kumar</option>
                      </select>
                    </div>
                  </div>
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Counsellor</label>
                      <select className="form-control">
                        <option value="">Select</option>
                        <option value="">Neeraj</option>
                        <option value="">Devesh</option>
                        <option value="">Raj Kumar</option>
                      </select>
                    </div>
                  </div>
                  <div className="col-sm-2">
                    <div className="dataTables_length" id="example1_length">
                      <label>Course Level</label>
                      <select className="form-control">
                        <option value="">Select</option>
                        <option value="">PG</option>
                        <option value="">UG</option>
                      </select>
                    </div>
                  </div>
                </div>
                <hr />
                <div className="tab-content">
                  <table id="example" className="table table-bordered table-hover dataTable no-footer">
                    <thead>
                      <tr>
                        <th>S.No.</th>
                        <th>Student Id</th>
                        <th>Name</th>
                        {/* <th>Mobile</th> */}
                        <th style={{ width: "9%" }}>Call</th>
                        <th>Country</th>
                        <th>Course Level</th>
                        <th>Stream</th>
                        <th>Applied For</th>
                        <th>Applied Date</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      {applicantsList &&
                        applicantsList.length > 0 &&
                        applicantsList.map((data, key) => {
                          return (
                            <tr key={data.id}>
                              <td>{++key}</td>
                              <td><span className="appt_id">SID-{data.student_id}</span></td>
                              <td>{data.name}</td>
                              <td>{data.mobile ? <span className="calling_icon">Click to call</span> : ""}</td>
                              {/* <td>{data.mobile}</td> */}
                              <td>{data.country}</td>
                              <td>{data.course_level = 1 ? "UG" : data.course_level = 1 ? "PG" : ""}</td>
                              <td>{data.stream}</td>
                              <td>
                                {data.course_data.length > 0 &&
                                  data.course_data.map((Data, key) => {
                                    return key < 2 && (
                                      <p className="f-13">{Data.university_course}
                                      </p>

                                    );
                                  })}
                              </td>
                              <td>{data.created_date != null ? moment(data.created_date).format("DD-MM-YYYY hh:mm A") : ""}</td>
                              <td>
                                <Link className="edit" to={"/view-applicant/" + data.student_id}>
                                  <span
                                    className="fa fa-eye"
                                    style={{ "margin-right": "5px" }}
                                  ></span>
                                </Link>
                                <Link
                                  className="edit"
                                  to={"/edit-applied-student/" + data.student_id}
                                >
                                  <span
                                    className="fa fa-edit"
                                    style={{ "margin-right": "5px" }}
                                  ></span>
                                </Link>
                              </td>
                            </tr>
                          );
                        })}
                    </tbody>
                    {/* {(() => {
                      if (applicantsList.length == 0) {
                        return <tbody>
                          <tr className=" text-center"><td colSpan="12">No record found.</td></tr>
                        </tbody>
                      }
                    })()} */}
                  </table>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default AppliedStudent;
