
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 className="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/elements/tabs.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/jquery/jquery.min.js"></script>
          <script src="/assets/js/bootstrap/bootstrap.min.js"></script>
        </Helmet>
        <header className="main-header">
        <a href="index2.html" className="logo">
          <span className="logo-mini"><b>P</b>AD</span>
          <span className="logo-lg"><b>Perfect </b>Admin</span>
        </a>
        
        <nav className="navbar navbar-static-top">
          <a href="#" className="sidebar-toggle" data-toggle="push-menu" role="button">
            <span className="sr-only">Toggle navigation</span>
          </a>

          <div className="navbar-custom-menu">
            <ul className="nav navbar-nav">
              <li className="dropdown messages-menu">
                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                  <i className="fa fa-envelope-o"></i>
                  <span className="label label-success">4</span>
                </a>
                <ul className="dropdown-menu">
                  <li className="header">You have 4 messages</li>
                  <li>
                    <ul className="menu">
                      <li>
                        <a href="#">
                          <h4>
                            Support Team
                            <small><i className="fa fa-clock-o"></i> 5 mins</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <h4>
                            Perfectus Design Team
                            <small><i className="fa fa-clock-o"></i> 2 hours</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <h4>
                            Developers
                            <small><i className="fa fa-clock-o"></i> Today</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <h4>
                            Sales Department
                            <small><i className="fa fa-clock-o"></i> Yesterday</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <h4>
                            Reviewers
                            <small><i className="fa fa-clock-o"></i> 2 days</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li className="footer"><a href="#">See All Messages</a></li>
                </ul>
              </li>
              <li className="dropdown user user-menu">
                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                  <img src="/assets/images/user2-160x160.jpg" className="user-image" alt="User Image"/>
                  <span className="d-none d-sm-block">ADMIN</span>
                </a>
                <ul className="dropdown-menu">
                  <li className="user-header">
                    <img src="/assets/images/user2-160x160.jpg" className="img-circle" alt="User Image"/>
                    <p>
                      Alexander Pierce - Web Developer
                    </p>
                  </li>
                  <li className="user-footer">
                    <div className="pull-left">
                      <a href="#" className="btn btn-default btn-flat">Profile</a>
                    </div>
                    <div className="pull-right">
                      <a href="#" onClick={logout} className="btn btn-default btn-flat">Sign out</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
          </header>
          <aside className="main-sidebar">
			<div className="nano">
				<div className="nano-content">
					<ul className="sidebar-menu" data-widget="tree">
						<li className="header">MAIN NAVIGATION</li>
            <li>
							<Link to="/admin">
								<i className="fa fa-dashboard"></i> <span>Dashboard</span>
							</Link>
						</li>
            <li>
							<Link to="matchlist">
								<i className="fa fa-list"></i> <span>Live Matches</span>
							</Link>
						</li>
						<li className="active treeview">
							<a href="#">
								<i className="fa fa-users"></i> <span>Manage Users</span>
								<span className="pull-right-container">
									<i className="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul className="treeview-menu">
								<li><Link to="adduser "><i className="fa fa-user"></i> Add New User</Link></li>
								<li><Link to="users"><i className="fa fa-list"></i> List Users</Link></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		      </aside>
          <Outlet/>
        <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;
