
import React from 'react';
import {Outlet,Link,useNavigate} from 'react-router-dom';
import { Helmet } from 'react-helmet';

function Backend() {
  const navigate = useNavigate();

  const logout = () => {
    localStorage.clear();
    navigate("/");
  };
  
  return (
    <div id="wrapper">
        <Helmet>
          <title>Cricket Admin Dashboard</title>
          <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"/> 
          <link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.min.css"/>
          <link rel="stylesheet" href="/assets/css/skin/all-skins.css"/>
          <link rel="stylesheet" href="/assets/css/general/style.css"/>
          <link rel="stylesheet" href="/assets/css/sidebar/side-nav.css"/>
          <link rel="stylesheet" href="/assets/css/fonts/fonts-style.css"/>
          <link rel="stylesheet" href="/assets/css/nanoscroller/nanoscroller.css"/>
          <link rel="stylesheet" href="/assets/css/dashboard/dashboard1.css"/>
          <script src="/assets/js/jquery/slim.min.js"></script>
          <script src="/assets/js/jquery/popper.min.js"></script>
          <script src="/assets/js/bootstrap/bootstrap.min.js"></script>
          <script src="/assets/js/jquery/jquery.min.js"></script>
        </Helmet>
        <div className="wrapper">
          <nav id="sidebar" className="proclinic-bg">
            <div className="sidebar-header">
              <Link to="/admin"><img width="100px" src="assets/images/logo.png" className="logo" alt="logo"/></Link>
            </div>
            <ul className="list-unstyled components">
            <li className="active">
                    <a href="#nav-dashboard" data-toggle="collapse" aria-expanded="true">
                      <span className="ti-wheelchair"></span> Patients
                    </a>
                    <ul className="collapse list-unstyled show" id="nav-dashboard">
                        <li><Link to="addpatient">Add New Patient</Link> </li>
                        <li><Link to="patients">Patients List</Link> </li>
                    </ul>
                  </li>
                  <li><Link to="staff">	<span className="ti-user"></span> Staff List</Link></li>
                  <li><Link to="medicines"><span className="ti-list"></span> Medicines</Link></li>
                  <li><Link to="stores"><span className="ti-list"></span> Stores</Link></li>
                  <li><Link to="centers"><span className="ti-list"></span> Centers</Link></li>
                  <li><Link to="orders"><span className="ti-list"></span> Orders</Link></li>
            </ul>
          </nav>
          <div id="content">
            <nav className="navbar navbar-default">
              <div className="container-fluid">
                <div className="responsive-logo">
                <Link to="/admin"><img src="assets/images/logo-dark.png" className="logo" alt="logo"/></Link>
                </div>
                <ul className="nav">
                  <li className="nav-item">
                    <span className="ti-menu" id="sidebarCollapse"></span>
                  </li>
                  
                  <li className="nav-item">
                    <a className="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                      <span className="ti-announcement"></span>
                    </a>
                    <div className="dropdown-menu proclinic-box-shadow2 notifications animated flipInY">
                      <h5>Notifications</h5>
                      <a className="dropdown-item" href="#">
                        <span className="ti-wheelchair"></span> New Patient Added</a>
                      <a className="dropdown-item" href="#">
                        <span className="ti-money"></span> Patient payment done</a>
                      <a className="dropdown-item" href="#">
                        <span className="ti-time"></span>Patient Appointment booked</a>
                      <a className="dropdown-item" href="#">
                        <span className="ti-wheelchair"></span> New Patient Added</a>
                    </div>
                  </li>
                  <li className="nav-item">
                    <a className="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                      <span className="ti-user"></span>
                    </a>
                    <div className="dropdown-menu proclinic-box-shadow2 profile animated flipInY">
                      <h5>John Willing</h5>
                      <a className="dropdown-item" href="#">
                        <span className="ti-settings"></span> Settings</a>
                      <a className="dropdown-item" href="#">
                        <span className="ti-help-alt"></span> Help</a>
                      <a className="dropdown-item" href="#" onClick={logout}>
                        <span className="ti-power-off"></span> Logout</a>
                    </div>
                  </li>
                </ul>
              
              </div>
            </nav>
            <div className="row no-margin-padding">
              <div className="col-md-6">
                <h3 className="block-title">Quick Statistics</h3>
              </div>
              <div className="col-md-6">
                <ol className="breadcrumb">
                  <li className="breadcrumb-item">
                    <a href="index-2.html">
                      <span className="ti-home"></span>
                    </a>
                  </li>
                  <li className="breadcrumb-item active">Dashboard</li>
                </ol>
              </div>
            </div>
            <Outlet/>
          </div>
	      </div>
        <Helmet>
          <script src="/assets/js/dashboard/dashboard1.js"></script>
          <script src="/assets/js/nanoscroller/nanoscroller.js"></script>
          <script src="/assets/js/custom/theme.js"></script>
        </Helmet>
    </div>
  );
}

export default Backend;
