import _                                  from 'lodash';
import { Meteor }                         from 'meteor/meteor';

import React, { Component }               from 'react';
import { Link,browserHistory }            from 'react-router';
import { FormGroup,Panel,Table,
  ButtonToolbar,Modal,
  FormControl,Glyphicon,Button }          from 'react-bootstrap';
  import { AddStudentForm }               from './addStudentForm';

export class StudentDataView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.onUpdate = this.onUpdate.bind(this);
  };

    showModal() {
      this.setState({show: true});
    }

    hideModal() {
      this.setState({show: false});
    }
  onUpdate(key, value) {
    this.setState({[key]: value});
  };

  render() {
    return (
      <div className="content has-detached-left">
					<div className="container-detached">
						<div className="content-detached">
          					<div className="row">
          						<div className="col-lg-3 col-md-6">
          							<div className="panel panel-body">
          								<div className="media">
          									<div className="media-left">
          										<a href="assets/images/placeholder.png" data-popup="lightbox">
          											<img src="assets/images/download2.png" className="img-circle img-lg" alt="" />
          										</a>
          									</div>

          									<div className="media-body">
          										<h6 className="media-heading">Students</h6>
          										<span className="text-muted">Click to view</span>
          									</div>
          								</div>
          							</div>
          						</div>

                      <div className="col-lg-3 col-md-6">
          							<div className="panel panel-body">
          								<div className="media">
          									<div className="media-left">
          										<a href="assets/images/placeholder.jpg" data-popup="lightbox">
          											<img src="assets/images/download.png" className="img-circle img-lg" alt="" />
          										</a>
          									</div>

          									<div className="media-body">
          										<h6 className="media-heading">Teachers</h6>
          										<span className="text-muted">Click to view</span>
          									</div>
          								</div>
          							</div>
          						</div>

                      <div className="col-lg-3 col-md-6">
          							<div className="panel panel-body">
          								<div className="media">
          									<div className="media-left">
          										<a href="assets/images/placeholder.jpg" data-popup="lightbox">
          											<img src="assets/images/download3.png" className="img-circle img-lg" alt="" />
          										</a>
          									</div>

          									<div className="media-body">
          										<h6 className="media-heading">Parents</h6>
          										<span className="text-muted">Click to view</span>
          									</div>
          								</div>
          							</div>
          						</div>

                      <div className="col-lg-3 col-md-6">
          							<div className="panel panel-body">
          								<div className="media">
          									<div className="media-left">
          										<a href="assets/images/placeholder.jpg" data-popup="lightbox">
          											<img src="assets/images/download1.png" className="img-circle img-lg" alt="" />
          										</a>
          									</div>

          									<div className="media-body">
          										<h6 className="media-heading">Non Teaching Staff</h6>
          										<span className="text-muted">Click to view</span>
          									</div>
          								</div>
          							</div>
          						</div>
                    </div>

										<div className="panel panel-flat">
											<div className="panel-heading">
												<h5 className="panel-title">Student Details</h5>
												<div className="heading-elements">
													<ul className="icons-list">
								                		<li><a data-action="collapse"></a></li>
								                		<li><a data-action="reload"></a></li>
								                	</ul>
							                	</div>
											</div>


											<table className="table datatable-basic table-striped">
												<thead>
													<tr>
														<th>First Name</th>
														<th>Last Name</th>
														<th>className</th>
														<th>DOB</th>
														<th>Status</th>
														<th className="text-center">Actions</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>Marth</td>
														<td><a href="#">Enright</a></td>
														<td>VII</td>
														<td>22 Jun 1972</td>
														<td><span className="label label-success">Active</span></td>
														<td className="text-center">
															<ul className="icons-list">
																<li className="dropdown">
																	<a href="#" className="dropdown-toggle" data-toggle="dropdown">
																		<i className="icon-menu9"></i>
																	</a>

																	<ul className="dropdown-menu dropdown-menu-right">
																		<li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
																		<li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
																		<li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
																	</ul>
																</li>
															</ul>
														</td>
													</tr>
													<tr>
														<td>Jackelyn</td>
														<td>Weible</td>
														<td><a href="#">XI</a></td>
														<td>3 Oct 1981</td>
														<td><span className="label label-default">Inactive</span></td>
														<td className="text-center">
															<ul className="icons-list">
																<li className="dropdown">
																	<a href="#" className="dropdown-toggle" data-toggle="dropdown">
																		<i className="icon-menu9"></i>
																	</a>

																	<ul className="dropdown-menu dropdown-menu-right">
																		<li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
																		<li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
																		<li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
																	</ul>
																</li>
															</ul>
														</td>
													</tr>
												</tbody>
											</table>
										</div>


                            <ul className="fab-menu fab-menu-fixed fab-menu-bottom-right" data-fab-toggle="click">
						<li>
							<a className="fab-menu-btn btn bg-teal-400 btn-float btn-rounded btn-icon">
								<i className="fab-icon-open icon-plus3"></i>
								<i className="fab-icon-close icon-cross2"></i>
							</a>

							<ul className="fab-menu-inner">
								<li>
									<div data-fab-label="Upload bulk data">
										<a href="#" className="btn btn-default btn-rounded btn-icon btn-float">
											<i className="icon-file-upload2"></i>
										</a>
									</div>
								</li>
								<li>
									<div data-fab-label="Add Student">
										<a href="#" className="btn btn-default btn-rounded btn-icon btn-float">
											<i className=" icon-file-plus2"></i>
										</a>
										<span className="badge bg-primary-400">5</span>
									</div>
								</li>
							</ul>
						</li>
					</ul>

				</div>
			</div>
			<div className="sidebar-detached affix-top">
				<div className="sidebar sidebar-default">
					<div className="sidebar-content">

						<div className="sidebar-category">
							<div className="category-title">
								<span>Advanced Search</span>
								<ul className="icons-list">
									<li><a href="#" data-action="collapse"></a></li>
								</ul>
							</div>

							<div className="category-content">
								<form action="#">
									<div className="has-feedback has-feedback-left">
										<input type="search" className="form-control" placeholder="First Name" />
										<div className="form-control-feedback">
											<i className="icon-search4 text-size-base text-muted"></i>
										</div>
									</div>
								</form>
							</div>
							<div className="category-content">
								<form action="#">
									<div className="has-feedback has-feedback-left">
										<input type="search" className="form-control" placeholder="Last Name" />
										<div className="form-control-feedback">
											<i className="icon-search4 text-size-base text-muted"></i>
										</div>
									</div>
								</form>
							</div>
							<div className="category-content">
								<form action="#">
									<div className="has-feedback has-feedback-left">
										<div className="btn-group">
                 <button type="button" className="dropdown-toggle form-control" data-toggle="dropdown">
                   <span data-bind="label">Select className</span>&nbsp;<span className="caret"></span>
                 </button>
                 <ul className="dropdown-menu" role="menu">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Another item</a></li>
                   <li><a href="#">This is a longer item that will not fit properly</a></li>
                 </ul>
               </div>
										<div className="form-control-feedback">
											<i className="icon-search4 text-size-base text-muted"></i>
										</div>
									</div>
								</form>
							</div>
						</div>


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

};