@extends('layouts.master')
    
	@section('title', 'Dash board')

	<!-- Core Stylesheets -->
    <link rel="stylesheet" href="{{ asset('/plugin/css/shop.css') }}"> 
    
    @section('style')
		<style>
			ul.pagination li { padding:5px 10px 5px 10px; border:1px #ddd solid }
			ul li.active { background-color:#ddd }
			.search { border:#007bff 1px solid; height:24px; border-radius:0px }

			/* Controll Sidebar */
			
			nav.side-navbar {
			    background: #fff;
			    min-width: 250px;
			    max-width: 250px;
			    color: #686a76;
			    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
			    z-index: 999;
			    /*==== Sidebar Header ====*/
			    /*==== Sidebar Menu ====*/
			    /*==== Shrinked Sidebar ====*/
			}

			nav.side-navbar a {
			    color: inherit;
			    position: relative;
			    font-size: 0.9em;
			}

			nav.side-navbar a[data-toggle="collapse"]::before {
			    content: '\f104';
			    display: inline-block;
			    transform: translateY(-50%);
			    font-family: 'FontAwesome';
			    position: absolute;
			    top: 50%;
			    right: 20px;
			}

			nav.side-navbar a[aria-expanded="true"] {
			    background: #EEF5F9;
			}

			nav.side-navbar a[aria-expanded="true"]::before {
			    content: '\f107';
			}

			nav.side-navbar a i {
			    font-size: 1.5em;
			    /*color: #2196f3;*/
			    width: 30px;
			    margin-right: 10px;
			    transition: none;
			}

			nav.side-navbar .sidebar-header {
			    padding: 20px 15px 10px;
			}

			nav.side-navbar .avatar {
			    width: 55px;
			    height: 55px;
			}

			nav.side-navbar .title {
			    margin-left: 10px;
			}

			nav.side-navbar .title h1 {
			    color: #333;
			}

			nav.side-navbar .title p {
			    font-size: 0.9em;
			    font-weight: 200;
			    margin-bottom: 0;
			    color: #aaa;
			}

			nav.side-navbar span.heading {
			    text-transform: uppercase;
			    font-weight: 400;
			    margin-left: 20px;
			    color: #ccc;
			    font-size: 0.8em;
			}

			nav.side-navbar ul {
			    padding: 0px 0 15px;
			}

			nav.side-navbar ul a {
			    padding: 10px 15px;
			    text-decoration: none;
			    display: block;
			    font-weight: 300;
			    border-left: 4px solid transparent;
			}

			nav.side-navbar ul a:hover {
			    background: linear-gradient(to left, #7c8ce4, #2196f3);
			    border-left: 4px solid #7b4397;
			    color: #fff;
			}

			nav.side-navbar ul a:hover i{
			    color: #fff;
			}

			nav.side-navbar ul li.active a {
			    background: #EEF5F9;
			}

			nav.side-navbar ul li.active a:hover {
			    background: linear-gradient(to left, #7c8ce4, #2196f3);
			}

			nav.side-navbar ul ul {
			    padding: 0;
			}

			nav.side-navbar ul ul a {
			    padding-left: 50px;
			    background: #EEF5F9;
			}

			nav.side-navbar ul ul li.active a {
			    padding-left: 50px;
			    background: #d7ecf9;
			}

			nav.side-navbar.shrinked {
			    min-width: 90px;
			    max-width: 90px;
			    text-align: center;
			}

			nav.side-navbar.shrinked span.heading {
			    margin: 0;
			}

			nav.side-navbar.shrinked a {
			    padding: 15px 10px;
			    border: none;
			    font-size: 0.8em;
			    color: #aaa;
			    transition: color 0.3s, background 0.3s;
			}

			nav.side-navbar.shrinked a[data-toggle="collapse"]::before {
			    content: '\f107';
			    transform: translateX(50%);
			    position: absolute;
			    top: auto;
			    right: 50%;
			    bottom: 0;
			    left: auto;
			}

			nav.side-navbar.shrinked a[data-toggle="collapse"][aria-expanded="true"]::before {
			    content: '\f106';
			}

			nav.side-navbar.shrinked a:hover {
			    color: #fff;
			    border: none;
			}

			nav.side-navbar.shrinked a:hover i {
			    color: #fff;
			}

			nav.side-navbar.shrinked a i {
			    text-align: center;
			    margin: 0 auto;
			    margin-bottom: 5px;
			    display: block;
			    font-size: 1.6em;
			    color: #333;
			    transition: color 0.3s;
			}

			nav.side-navbar.shrinked .sidebar-header .title {
			    display: none;
			}


			/* SIDBAR MEDIAQUERIES ----------------------------------- */

			@media (max-width: 1200px) {
			    nav.side-navbar {
			        margin-left: -90px;
			        min-width: 90px;
			        max-width: 90px;
			        text-align: center;
			    }
			    nav.side-navbar span.heading {
			        margin: 0;
			    }
			    nav.side-navbar ul a {
			        padding: 15px 10px;
			        border: none;
			        font-size: 0.8em;
			        color: #aaa;
			        transition: color 0.3s, background 0.3s;
			    }
			    nav.side-navbar ul a[data-toggle="collapse"]::before {
			        content: '\f107';
			        transform: translateX(50%);
			        position: absolute;
			        top: auto;
			        right: 50%;
			        bottom: 0;
			        left: auto;
			    }
			    nav.side-navbar ul a[data-toggle="collapse"][aria-expanded="true"]::before {
			        content: '\f106';
			    }
			    nav.side-navbar ul a:hover {
			        color: #fff;
			        border: none;
			    }
			    nav.side-navbar ul a:hover i {
			        color: #fff;
			    }
			    nav.side-navbar ul a i {
			        margin-right: 0;
			        margin-bottom: 5px;
			        display: block;
			        font-size: 1.6em;
			        color: #333;
			        transition: color 0.3s;
			    }
			    nav.side-navbar .sidebar-header .title {
			        display: none;
			    }
			    nav.side-navbar.shrinked {
			        margin-left: 0;
			    }
			    
			}


			/* ==========================================================
			                     RIGHT SIDE NAVBAR
			 ============================================================*/

			#sidebar-wrapper {
			    position: fixed;
			    z-index: 1000;
			    right: 0;
			    top: 78px;
			    overflow-y: auto;
			    width: 250px;
			    height: 100%;
			    -webkit-transition: all .4s ease 0s;
			    -moz-transition: all .4s ease 0s;
			    -ms-transition: all .4s ease 0s;
			    -o-transition: all .4s ease 0s;
			    transition: all .4s ease 0s;
			    transform: translateX(250px);
			    background: #fff;
			}

			.sidebar-nav {
			    position: absolute;
			    top: 0;
			    width: 280px;
			    margin: 0;
			    padding: 0;
			    list-style: none;
			    background: #fff;
			}

			#menu-toggle-right {
			    z-index: 1;
			    right: 0;
			}

			#sidebar-wrapper.active {
			    right: 250px;
			    width: 280px;
			    -webkit-transition: all .4s ease 0s;
			    -moz-transition: all .4s ease 0s;
			    -ms-transition: all .4s ease 0s;
			    -o-transition: all .4s ease 0s;
			    transition: all .4s ease 0s;
			    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
			    z-index: 999;
			}

			.sidebar-nav .toggle {
			    font-size: 1em;
			    margin: 5px 5px 0 0;
			    padding: 15px 20px;
			}

			.sidebar-nav .tab {
			    text-align: center;
			}

			.sidebar-nav .tab .nav-tabs {
			    position: relative;
			    border-bottom: none;
			}

			.sidebar-nav .tab .nav-tabs li {
			    margin: 0;
			    width: 50%;
			    height: 40px;
			    line-height: 40px;
			}

			.sidebar-nav .tab .nav-tabs li a {
			    display: block;
			    padding: 5px 0;
			    background: #fff;
			    font-size: 16px;
			    font-weight: 700;
			    color: #999;
			    text-align: center;
			    border-radius: 0;
			    border: none;
			    margin-right: 0;
			    overflow: hidden;
			    z-index: 1;
			    position: relative;
			    transition: all 0.3s ease 0s;
			    border-bottom: 2px solid #ddd;
			}

			.tab .nav-tabs li a.active,
			.tab .nav-tabs li a:hover {
			    color: #2196f3;
			    border: none;
			    border-bottom: 2px solid #ddd;
			}

			.sidebar-nav .tab .nav-tabs li a.active {
			    border-bottom: 2px solid #2196f3;
			}

			.sidebar-nav .tab .tab-content {
			    padding: 20px;
			    margin-top: -2px;
			    font-size: 15px;
			    color: #757575;
			    line-height: 26px;
			    text-align: left;
			    border-top: 2px solid #ddd;
			}

			.sidebar-nav .tab .tab-content h3 {
			    font-size: 24px;
			    margin-top: 0;
			}

			.sidebar-nav .tab .tab-content h6.msg-nav-h6 {
			    font-size: 16px;
			    line-height: 0px;
			    margin-top: 15px;
			}

			@media only screen and (max-width: 479px) {
			    .sidebar-nav .tab .nav-tabs li {
			        width: 100%;
			        text-align: center;
			        margin-bottom: 5px;
			    }

			    .sidebar-nav .tab .nav-tabs li:last-child {
			        margin-bottom: 0;
			    }
			}

			.newsf-list ul {
			    padding-bottom: 20px;
			}

			.newsf-list ul li{
			    padding:10px 0;
			}

			.newsf-list ul li img{
			    width: 50px;
			    height: 50px;
			    margin:0 8px 0 8px;
			}

			.newsf-list ul li h3{
			    color:#555;
			    font-size: 18px;
			    margin:0;
			    padding:0;    
			}

			.newsf-list ul li small{
			    color:#888;
			    margin:0;
			    padding:0;
			}

			/* content */

			.content-inner {
			    padding-left:15%;
			    padding-right: 15%;
			    padding-top:3%;
			    padding-bottom: 3%;
			    width: calc(100% - 0px);
			    background: #EEF5F9;
			    margin-right: auto;
			    margin-left: auto;
			}

			.content-inner.active {
			    padding-left:15%;
			    padding-right: 15%;
			    padding-top:3%;
			    padding-bottom: 3%;
			    width: calc(100% - 0px);
			    background: #EEF5F9;
			    margin-right: auto;
			    margin-left: auto;
			}


			/*====================================================
                         REPORT-1
			======================================================*/
			#report1{
				/*padding:10px 10px 0 10px;*/
				padding-left:10px !important;
				padding-right:10px !important;
				padding-bottom:20px !important;
			}

			#report1 .card-block {
				padding:10px 10px 0 10px;
			}

			#report1 .text-left.report1-cont {
			    margin-bottom: 20px;
			}

			#report1 .card-block .progress {
				margin-bottom: 10px;
			}

			#report1 p > small {
				padding-top: 10px;
				color:#777;
			}

			#report1 .card {
				box-shadow: 5px 5px 6px 3px #6767679e !important;
			}

			/*====================================================
			                         REPORT-2
			======================================================*/
			.card-c1 {
			    display: inline-block;
			    position: relative;
			    width: 100%;
			    margin: 25px 0;
			    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
			    border-radius: 3px;
			    color: rgba(0, 0, 0, 0.87);
			    background: #fff;
			}

			.card-c1 .card-height-indicator {
			    margin-top: 100%;
			}

			.card.row-space .header {
			    padding: 15px 20px 0;
			}

			.card-c1 .title {
			    margin-top: 0;
			    margin-bottom: 5px;
			}

			.card-c1 .card-image {
			    height: 60%;
			    position: relative;
			    overflow: hidden;
			    margin-left: 15px;
			    margin-right: 15px;
			    margin-top: -30px;
			    border-radius: 6px;
			}

			.card-c1 .card-image img {
			    width: 100%;
			    height: 100%;
			    border-radius: 6px;
			    pointer-events: none;
			}

			.card-c1 .card-image .card-title {
			    position: absolute;
			    bottom: 15px;
			    left: 15px;
			    color: #fff;
			    font-size: 1.3em;
			    text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
			}

			.card-c1 .category:not([class*="text-"]) {
			    color: #999999;
			}

			.card-c1 .card-content {
			    padding: 15px 20px;
			}

			.card-c1 .card-content .category {
			    margin-bottom: 0;
			}

			.card-c1 .card-content h4 {
				color:#555;
				font-size: 19px;
				font-weight: normal;
			}

			.card-c1 .card-header {
			    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
			    margin: -20px 15px 0;
			    border-radius: 3px;
			    padding: 15px;
			}

			.card-c1 .card-header .title {
			    color: #FFFFFF;
			}

			.card-c1 .card-header .category {
			    margin-bottom: 0;
			    color: rgba(255, 255, 255, 0.62);
			}

			.card-c1 .card-header.card-chart {
			    padding: 0;
			    min-height: 160px;
			}

			.card-c1 .card-header.card-chart+.content h4 {
			    margin-top: 0;
			}

			.card-c1 .card-header .ct-label {
			    color: rgba(255, 255, 255, 0.7);
			}

			.card-c1 .card-header .ct-grid {
			    stroke: rgba(255, 255, 255, 0.2);
			}

			.card-c1 .card-header .ct-series-a .ct-point,
			.card-c1 .card-header .ct-series-a .ct-line,
			.card-c1 .card-header .ct-series-a .ct-bar,
			.card-c1 .card-header .ct-series-a .ct-slice-donut {
			    stroke: rgba(255, 255, 255, 0.8);
			}

			.card-c1 .card-header .ct-series-a .ct-slice-pie,
			.card-c1 .card-header .ct-series-a .ct-area {
			    fill: rgba(255, 255, 255, 0.4);
			}

			.card-c1 .chart-title {
			    position: absolute;
			    top: 25px;
			    width: 100%;
			    text-align: center;
			}

			.card-c1 .chart-title h3 {
			    margin: 0;
			    color: #FFFFFF;
			}

			.card-c1 .chart-title h6 {
			    margin: 0;
			    color: rgba(255, 255, 255, 0.4);
			}

			.card-c1 .card-footer {
			    /*margin: 0 20px 10px;*/
			    background: transparent;
			    padding-top: 10px;
			    border-top: 1px solid #eeeeee;
			}

			.card-c1 .card-footer .content {
			    display: block;
			}

			.card-c1 .card-footer div {
			    display: inline-block;
			}

			.card-c1 .card-footer .author {
			    color: #999999;
			}

			.card-c1 .card-footer .stats {
			    line-height: 22px;
			    color: #999999;
			    font-size: 12px;
			}

			.card-c1 .card-footer .stats .material-icons {
			    position: relative;
			    top: 4px;
			    font-size: 16px;
			}

			.card-c1 .card-footer h6 {
			    color: #999999;
			} 
			 
			/*====================================================
			                         REPORT-3
			======================================================*/
			.card-c2 {
			    border-radius: 4px;
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1);
			    background-color: #FFFFFF;
			    margin-bottom: 30px;
			}

			.card-c2 .table td, .table th {
			    padding: .75rem;
			    vertical-align: baseline;
			    border-top: 1px solid #eceeef;
			}

			.card-c2 .image {
			    width: 100%;
			    overflow: hidden;
			    height: 260px;
			    border-radius: 4px 4px 0 0;
			    position: relative;
			    -webkit-transform-style: preserve-3d;
			    -moz-transform-style: preserve-3d;
			    transform-style: preserve-3d;
			}

			.card-c2 .image img {
			    width: 100%;
			}

			.card-c2 .filter {
			    position: absolute;
			    z-index: 2;
			    background-color: rgba(0, 0, 0, 0.68);
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    text-align: center;
			    opacity: 0;
			    filter: alpha(opacity=0);
			}

			.card-c2 .filter .btn {
			    position: relative;
			    top: 50%;
			    -webkit-transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			    transform: translateY(-50%);
			}

			.card:hover .filter {
			    opacity: 1;
			    filter: alpha(opacity=100);
			}

			.card-c2 .btn-hover {
			    opacity: 0;
			    filter: alpha(opacity=0);
			}

			.card:hover .btn-hover {
			    opacity: 1;
			    filter: alpha(opacity=100);
			}

			.card-c2 .content {
			    padding: 15px 15px 10px 15px;
			}

			.card-c2 .header {
			    padding: 15px 15px 0;
			}

			.card-c2 .category,
			.card-c2 label {
			    font-size: 14px;
			    font-weight: 400;
			    color: #9A9A9A;
			    margin-bottom: 0px;
			}

			.card-c2 .category i,
			.card-c2 label i {
			    font-size: 16px;
			}

			.card-c2 label {
			    font-size: 12px;
			    margin-bottom: 5px;
			    text-transform: uppercase;
			}

			.card-c2 .title {
			    margin: 0;
			    color: #333333;
			    font-weight: 300;
			}

			.card-c2 .avatar {
			    width: 30px;
			    height: 30px;
			    overflow: hidden;
			    border-radius: 50%;
			    margin-right: 5px;
			}

			.card-c2 .description {
			    font-size: 14px;
			    color: #333;
			}

			.card-c2 .footer {
			    padding: 0;
			    background-color: transparent;
			    line-height: 30px;
			}

			.card-c2 .footer .legend {
			    padding: 5px 0;
			}

			.card-c2 .footer hr {
			    margin-top: 5px;
			    margin-bottom: 5px;
			}

			.card-c2 .stats {
			    color: #a9a9a9;
			}

			.card-c2 .footer div {
			    display: inline-block;
			}

			.card-c2 .author {
			    font-size: 12px;
			    font-weight: 600;
			    text-transform: uppercase;
			}

			.card-c2 .author i {
			    font-size: 14px;
			}

			.card-c2 h6 {
			    font-size: 12px;
			    margin: 0;
			}

			.card.card-separator:after {
			    height: 100%;
			    right: -15px;
			    top: 0;
			    width: 1px;
			    background-color: #DDDDDD;
			    content: "";
			    position: absolute;
			}

			.card-c2 .ct-chart {
			    margin: 30px 0 30px;
			    height: 245px;
			}

			.card-c2 .table tbody td:first-child,
			.card-c2 .table thead th:first-child {
			    padding-left: 15px;
			}

			.card-c2 .table tbody td:last-child,
			.card-c2 .table thead th:last-child {
			    padding-right: 15px;
			}

			.card-c2 .alert {
			    border-radius: 4px;
			    position: relative;
			}

			.card-c2 .alert.alert-with-icon {
			    padding-left: 65px;
			}


			.card-c2 .card-footer {
			    padding: .75rem 1.25rem;
			     background-color: #fff; 
			    border-top: 1px solid rgba(0,0,0,.125);
			}

			/*====================================================
			                         REPORT-4
			======================================================*/

			#report4 #card-2 .card {
			    padding-top: 0px;
			    padding-bottom: 22px;
			    margin: 0px 0 20px 0;
			    background-color: #fff;
			    border-top-width: 0;
			    border-bottom-width: 2px;
			    -webkit-border-radius: 3px;
			    -moz-border-radius: 3px;
			    border-radius: 3px;
			    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			}
			.card-header{
				background-color: rgba(255, 255, 255, 0.9) !important;
			}

			.showbg{
				 background: -moz-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%) !important;
			    /* ff3.6+ */
			    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(34, 155, 242, 1)), color-stop(99%, rgba(0, 128, 129, 1)), color-stop(100%, rgba(0, 128, 128, 1))) !important;
			    /* safari4+,chrome */
			    background: -webkit-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%) !important;
			    /* safari5.1+,chrome10+ */
			    background: -o-linear-gradient(45deg, rgba(34, 155, 242, 1) 0%, rgba(0, 128, 129, 1) 99%, rgba(0, 128, 128, 1) 100%);
			    /* opera 11.10+ */
			    color: #fff !important;
			}


        </style>

	@endsection
    
    @section('script')
    	<script>
			$(document).ready(function() {
				
				
				
				

				

			});
        </script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
        <script type="text/javascript">
        	var dom = document.getElementById("myChart");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
			    title : {
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        x : 'center',
			        y : 'bottom',
			        data:[
			        		'py','Registration','Login','Enrollment','All'
			        	]
			    },
			    calculable : true,
			    series : [
			       
			        {
			            name:'KPI',
			            type:'pie',
			            radius : [10,100],
			            center : ['50%', '50%'],
			            roseType : 'area',
			            label: {
		                normal: {
		                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
		                    backgroundColor: '#eee',
		                    borderColor: '#aaa',
		                    borderWidth: 1,
		                    borderRadius: 4,
		                    rich: {
		                        a: {
		                            color: '#999',
		                            lineHeight: 22,
		                            align: 'center'
		                        },
		                        hr: {
		                            borderColor: '#aaa',
		                            width: '100%',
		                            borderWidth: 0.5,
		                            height: 0
		                        },
		                        b: {
		                            fontSize: 16,
		                            lineHeight: 33
		                        },
		                        per: {
		                            color: '#eee',
		                            backgroundColor: '#334455',
		                            padding: [2, 4],
		                            borderRadius: 2
		                        }
		                    }
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
			            data:[
			                {value:0,  name:'Registration'},
			                {value:0,  name:'Login'},
			                {value:0, name:'All'},
			            ]
			        }
			    ]
			};
			
			/**if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}*/
			myChart.setOption(option);

            myChart.on('click', function (param){
                    var name=param.name;
                    if(name=="Registration"){
                        window.location.href="