{{-- @extends('../layouts.auth')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    Hi boss!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection --}}

@extends('back-office.layouts.layout-default')

@section('page_content')
	<div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">

		<!--Begin::Dashboard 1-->

		<!--Begin::Row-->
		<div class="row">
			<div class="col-lg-6 col-xl-6 order-lg-1 order-xl-1">
				<!--begin:: Widgets/Activity-->
				<div class="kt-portlet kt-portlet--fit kt-portlet--head-lg kt-portlet--head-overlay kt-portlet--height-fluid">
					<div class="kt-portlet__head kt-portlet__head--noborder kt-portlet__space-x">
						<div class="kt-portlet__head-label">
							<h3 class="kt-portlet__head-title">
								Activité
							</h3>
						</div>
                        <div class="kt-portlet__head-toolbar">
                            <ul class="nav nav-pills nav-pills-sm nav-dark-75" id="activityChart" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link py-2 px-4  chartType" id="mois" data-chart-id="mois">
                                        <span class="nav-text font-size-sm">Mois</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link py-2 px-4 chartType" id="week" data-chart-id="week">
                                        <span class="nav-text font-size-sm">Semaines</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link py-2 px-4 chartType active" id="days" id="days" data-chart-id="days">
                                        <span class="nav-text font-size-sm">Jours</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
						{{-- <div class="kt-portlet__head-toolbar">
							<a href="#" class="btn btn-label-light btn-sm btn-bold dropdown-toggle" data-toggle="dropdown">
								Export
							</a>
							<div class="dropdown-menu dropdown-menu-fit dropdown-menu-right">
								<ul class="kt-nav">
									<li class="kt-nav__section kt-nav__section--first">
										<span class="kt-nav__section-text">Finance</span>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-graph-1"></i>
											<span class="kt-nav__link-text">Statistics</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-calendar-4"></i>
											<span class="kt-nav__link-text">Events</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-layers-1"></i>
											<span class="kt-nav__link-text">Reports</span>
										</a>
									</li>
									<li class="kt-nav__section">
										<span class="kt-nav__section-text">Customers</span>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-calendar-4"></i>
											<span class="kt-nav__link-text">Notifications</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-file-1"></i>
											<span class="kt-nav__link-text">Files</span>
										</a>
									</li>
								</ul>
							</div>
						</div> --}}
					</div>
					<div class="kt-portlet__body kt-portlet__body--fit">

						<div class="kt-widget17">

							<div class="kt-widget17__visual kt-widget17__visual--chart kt-portlet-fit--top kt-portlet-fit--sides" style="background-color: #FFFFFF">
								<div class="kt-widget17__chart" style="height:320px;">

									<canvas id="kt_chart_activities"></canvas>
								</div>
							</div>
							<div class="kt-widget17__stats">
								<div class="kt-widget17__items">
									<div class="kt-widget17__item chartTypeDataNew" >
										<span class="kt-widget17__icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--brand">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24" />
													<path d="M5,3 L6,3 C6.55228475,3 7,3.44771525 7,4 L7,20 C7,20.5522847 6.55228475,21 6,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,4 C4,3.44771525 4.44771525,3 5,3 Z M10,3 L11,3 C11.5522847,3 12,3.44771525 12,4 L12,20 C12,20.5522847 11.5522847,21 11,21 L10,21 C9.44771525,21 9,20.5522847 9,20 L9,4 C9,3.44771525 9.44771525,3 10,3 Z" fill="#000000" />
													<rect fill="#000000" opacity="0.3" transform="translate(17.825568, 11.945519) rotate(-19.000000) translate(-17.825568, -11.945519) " x="16.3255682" y="2.94551858" width="3" height="18" rx="1" />
												</g>
											</svg> </span>
										<span class="kt-widget17__subtitle">
											Nouveau
										</span>
										<span class="kt-widget17__desc">
											{{$countNew}} Nouveaux Projets
										</span>
									</div>
									<div class="kt-widget17__item chartTypeDataAccepte">
										<span class="kt-widget17__icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--success">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24" />
													<path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero" />
													<path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3" />
												</g>
											</svg> </span>
										<span class="kt-widget17__subtitle">
											Accepté
										</span>
										<span class="kt-widget17__desc">
											{{$countApprouved}} Candidatures Validées
										</span>
									</div>
								</div>
								<div class="kt-widget17__items ">
									<div class="kt-widget17__item chartTypeDataincub">
										<span class="kt-widget17__icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--warning">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24" />
													<path d="M12.7037037,14 L15.6666667,10 L13.4444444,10 L13.4444444,6 L9,12 L11.2222222,12 L11.2222222,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L12.7037037,14 Z" fill="#000000" opacity="0.3" />
													<path d="M9.80428954,10.9142091 L9,12 L11.2222222,12 L11.2222222,16 L15.6666667,10 L15.4615385,10 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 L9.80428954,10.9142091 Z" fill="#000000" />
												</g>
											</svg> </span>
										<span class="kt-widget17__subtitle">
											Incubé
										</span>
										<span class="kt-widget17__desc">
											{{$countIncube}} Adhérents Incubés
										</span>
									</div>
									<div class="kt-widget17__item chartTypeDatarefused">
										<span class="kt-widget17__icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--danger">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24" />
													<path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" />
													<path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" />
												</g>
											</svg> </span>
										<span class="kt-widget17__subtitle">
											Refusé
										</span>
										<span class="kt-widget17__desc">
										{{$countRejected}}	 Candidatures Refusé
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--end:: Widgets/Activity-->
			</div>
			<div class="col-lg-6 col-xl-6 order-lg-1 order-xl-1">

				<!--begin:: Widgets/Inbound Bandwidth-->
				<div class="kt-portlet kt-portlet--fit kt-portlet--head-noborder kt-portlet--height-fluid-half">
					<div class="kt-portlet__head kt-portlet__space-x">
						<div class="kt-portlet__head-label">
							<h3 class="kt-portlet__head-title">
								Dossiers en attente
							</h3>
						</div>
						{{-- <div class="kt-portlet__head-toolbar">
							<a href="#" class="btn btn-label-success btn-sm btn-bold dropdown-toggle" data-toggle="dropdown">
								Export
							</a>
							<div class="dropdown-menu dropdown-menu-fit dropdown-menu-right">
								<ul class="kt-nav">
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-line-chart"></i>
											<span class="kt-nav__link-text">Reports</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-send"></i>
											<span class="kt-nav__link-text">Messages</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-pie-chart-1"></i>
											<span class="kt-nav__link-text">Charts</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-avatar"></i>
											<span class="kt-nav__link-text">Members</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-settings"></i>
											<span class="kt-nav__link-text">Settings</span>
										</a>
									</li>
								</ul>
							</div>
						</div> --}}
					</div>
					<div class="kt-portlet__body kt-portlet__body--fluid">
						<div class="kt-widget20">
							<div class="kt-widget20__content kt-portlet__space-x">
								<span class="kt-widget20__number kt-font-brand">{{$countPending}}+</span>
								<span class="kt-widget20__desc">Dossiers en attente</span>
							</div>
							<div class="kt-widget20__chart" style="height:130px;">
								<canvas id="kt_chart_bandwidth1"></canvas>
							</div>
						</div>
					</div>
				</div>
				<!--end:: Widgets/Inbound Bandwidth-->

				<div class="kt-space-20"></div>

				<!--begin:: Widgets/Outbound Bandwidth-->
				<div class="kt-portlet kt-portlet--fit kt-portlet--head-noborder kt-portlet--height-fluid-half">
					<div class="kt-portlet__head kt-portlet__space-x">
						<div class="kt-portlet__head-label">
							<h3 class="kt-portlet__head-title">
								Incubations
							</h3>
						</div>
						{{-- <div class="kt-portlet__head-toolbar">
							<a href="#" class="btn btn-label-warning btn-sm  btn-bold dropdown-toggle" data-toggle="dropdown">
								Download
							</a>
							<div class="dropdown-menu dropdown-menu-fit dropdown-menu-right">
								<ul class="kt-nav">
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-line-chart"></i>
											<span class="kt-nav__link-text">Reports</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-send"></i>
											<span class="kt-nav__link-text">Messages</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-pie-chart-1"></i>
											<span class="kt-nav__link-text">Charts</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-avatar"></i>
											<span class="kt-nav__link-text">Members</span>
										</a>
									</li>
									<li class="kt-nav__item">
										<a href="#" class="kt-nav__link">
											<i class="kt-nav__link-icon flaticon2-settings"></i>
											<span class="kt-nav__link-text">Settings</span>
										</a>
									</li>
								</ul>
							</div>
						</div> --}}
					</div>
					<div class="kt-portlet__body kt-portlet__body--fluid">
						<div class="kt-widget20">
							<div class="kt-widget20__content kt-portlet__space-x">
								<span class="kt-widget20__number kt-font-warning">{{$countIncube}}+</span>
								<span class="kt-widget20__desc">Dossiers Incubés</span>
							</div>
							<div class="kt-widget20__chart" style="height:130px;">
								<canvas id="kt_chart_bandwidth2"></canvas>
							</div>
						</div>
					</div>
				</div>
				<!--end:: Widgets/Outbound Bandwidth-->
			</div>
			<div class="col-lg-12 col-xl-12 order-lg-1 order-xl-1">
				<div class="kt-portlet">
					<div class="kt-portlet__body  kt-portlet__body--fit">
						<div class="row row-no-padding row-col-separator-xl">
							<div class="col-xl-4">

								<!--begin:: Widgets/Daily Sales-->
								<div class="kt-portlet kt-portlet--height-fluid">
									<div class="kt-widget14">
										<div class="kt-widget14__header kt-margin-b-30">
											<h3 class="kt-widget14__title">
												Traitement
											</h3>
											<span class="kt-widget14__desc">
												Évolution du délai moyen de traitement
											</span>
										</div>
										<div class="kt-widget14__chart" style="height:120px;">
											<canvas id="kt_chart_daily_sales"></canvas>
										</div>
									</div>
								</div>

								<!--end:: Widgets/Daily Sales-->
							</div>
							<div class="col-xl-4">

								<!--begin:: Widgets/Profit Share-->
								<div class="kt-portlet kt-portlet--height-fluid">
									<div class="kt-widget14">
										<div class="kt-widget14__header">
											<h3 class="kt-widget14__title">
												Secteurs
											</h3>
											<span class="kt-widget14__desc">
												Statistiques réparties par secteur
											</span>
										</div>
										<div class="kt-widget14__content">
											<div class="kt-widget14__chart">
{{--                                                {{$countP}}--}}
												<div class="kt-widget14__stat">{{$countProjet}}</div>
												<canvas id="kt_chart_profit_share" style="height: 140px; width: 140px;"></canvas>
											</div>
											<div id="kt-bg" class="kt-widget14__legends">

                                                @foreach($Sectors as $key => $value)
                                                                                                        <div class="kt-widget14__legend">
{{--{{$value}}--}}


                                                                                                                                                                                                                        @foreach($value as $a)
                                                                                                                                                                                                                            @endforeach
                                                                                                            <span  class="kt-widget14__bullet kt-bg-{{$type}} "></span>
                                                         <span class="kt-widget14__stats">{{round($b,2)}}% {{$key}} </span>
                                                    </div>
                                                @endforeach

                                            </div>
										</div>
									</div>
								</div>

								<!--end:: Widgets/Profit Share-->
							</div>
							<div class="col-xl-4">

								<!--begin:: Widgets/Revenue Change-->
								<div class="kt-portlet kt-portlet--height-fluid">
									<div class="kt-widget14">
										<div class="kt-widget14__header">
											<h3 class="kt-widget14__title">
												Communes
											</h3>
											<span class="kt-widget14__desc">
												Statistiques réparties par commune
                                                											</span>
										</div>
										<div class="kt-widget14__content">
											<div class="kt-widget14__chart">
												<div id="kt_chart_revenue_change" style="height: 150px; width: 150px;"></div>
											</div>
											<div class="kt-widget14__legends">
                                                @foreach($townshiparray as $township => $value)

												<div class="kt-widget14__legend">
													<span class="kt-widget14__bullet kt-bg-{{$value['Type']}}"></span>
													<span class="kt-widget14__stats">{{round($value["total"],2)}}%
                                                            {{$value["title"]}}
                                                        </span>
												</div>@endforeach
											</div>
										</div>
									</div>
								</div>

								<!--end:: Widgets/Revenue Change-->
							</div>
						</div>
					</div>
				</div>
			</div>


			{{-- <div class="col-lg-6 col-xl-4 order-lg-1 order-xl-1">
				<!--Begin::Portlet-->
				<div class="kt-portlet kt-portlet--height-fluid">
					<div class="kt-portlet__head">
						<div class="kt-portlet__head-label">
							<h3 class="kt-portlet__head-title">
								Activités récentes
							</h3>
						</div>
						<div class="kt-portlet__head-toolbar">
							<div class="dropdown dropdown-inline">
								<button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<i class="flaticon-more-1"></i>
								</button>
								<div class="dropdown-menu dropdown-menu-right dropdown-menu-fit dropdown-menu-md">

									<!--begin::Nav-->
									<ul class="kt-nav">
										<li class="kt-nav__head">
											Export Options
											<span data-toggle="kt-tooltip" data-placement="right" title="Click to learn more...">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--brand kt-svg-icon--md1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<rect x="0" y="0" width="24" height="24" />
														<circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10" />
														<rect fill="#000000" x="11" y="10" width="2" height="7" rx="1" />
														<rect fill="#000000" x="11" y="7" width="2" height="2" rx="1" />
													</g>
												</svg> </span>
										</li>
										<li class="kt-nav__separator"></li>
										<li class="kt-nav__item">
											<a href="#" class="kt-nav__link">
												<i class="kt-nav__link-icon flaticon2-drop"></i>
												<span class="kt-nav__link-text">Activity</span>
											</a>
										</li>
										<li class="kt-nav__item">
											<a href="#" class="kt-nav__link">
												<i class="kt-nav__link-icon flaticon2-calendar-8"></i>
												<span class="kt-nav__link-text">FAQ</span>
											</a>
										</li>
										<li class="kt-nav__item">
											<a href="#" class="kt-nav__link">
												<i class="kt-nav__link-icon flaticon2-telegram-logo"></i>
												<span class="kt-nav__link-text">Settings</span>
											</a>
										</li>
										<li class="kt-nav__item">
											<a href="#" class="kt-nav__link">
												<i class="kt-nav__link-icon flaticon2-new-email"></i>
												<span class="kt-nav__link-text">Support</span>
												<span class="kt-nav__link-badge">
													<span class="kt-badge kt-badge--success kt-badge--rounded">5</span>
												</span>
											</a>
										</li>
										<li class="kt-nav__separator"></li>
										<li class="kt-nav__foot">
											<a class="btn btn-label-danger btn-bold btn-sm" href="#">Upgrade plan</a>
											<a class="btn btn-clean btn-bold btn-sm" href="#" data-toggle="kt-tooltip" data-placement="right" title="Click to learn more...">Learn more</a>
										</li>
									</ul>

									<!--end::Nav-->
								</div>
							</div>
						</div>
					</div>
					<div class="kt-portlet__body">

						<!--Begin::Timeline 3 -->
						<div class="kt-timeline-v2">
							<div class="kt-timeline-v2__items  kt-padding-top-25 kt-padding-bottom-30">
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">10:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-danger"></i>
									</div>
									<div class="kt-timeline-v2__item-text  kt-padding-top-5">
										Lorem ipsum dolor sit amit,consectetur eiusmdd tempor<br>
										incididunt ut labore et dolore magna
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">12:45</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-success"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-timeline-v2__item-text--bold">
										AEOL Meeting With Mr Chaabani Reda
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">14:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-brand"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										Make Deposit <a href="#" class="kt-link kt-link--brand kt-font-bolder">USD 700</a> To ESL.
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">16:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-warning"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										Lorem ipsum dolor sit amit,consectetur eiusmdd tempor<br>
										incididunt ut labore et dolore magna elit enim at minim<br>
										veniam quis nostrud
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">17:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-info"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										Placed a new order in <a href="#" class="kt-link kt-link--brand kt-font-bolder">SIGNATURE MOBILE</a> marketplace.
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">16:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-brand"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										Lorem ipsum dolor sit amit,consectetur eiusmdd tempor<br>
										incididunt ut labore et dolore magna elit enim at minim<br>
										veniam quis nostrud
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">17:00</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-danger"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										Received a new feedback on <a href="#" class="kt-link kt-link--brand kt-font-bolder">FinancePro App</a> product.
									</div>
								</div>
								<div class="kt-timeline-v2__item">
									<span class="kt-timeline-v2__item-time">15:30</span>
									<div class="kt-timeline-v2__item-cricle">
										<i class="fa fa-genderless kt-font-danger"></i>
									</div>
									<div class="kt-timeline-v2__item-text kt-padding-top-5">
										New notification message has been received on <a href="#" class="kt-link kt-link--brand kt-font-bolder">LoopFin Pro</a> product.
									</div>
								</div>
							</div>
						</div>

						<!--End::Timeline 3 -->
					</div>
				</div>

				<!--End::Portlet-->
			</div> --}}
		</div>
		<!--End::Row-->

		<!--End::Dashboard 1-->

	</div>
@endsection

@section('specific_js')
	<script>
		"use strict";
		// Class definition
var KTDashboard = function() {


    // Sparkline Chart helper function
    var _initSparklineChart = function(src, data, color, border) {
        if (src.length == 0) {
            return;
        }

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "August", "September", "October"],
                datasets: [{
                    label: "",
                    borderColor: color,
                    borderWidth: border,

                    pointHoverRadius: 4,
                    pointHoverBorderWidth: 12,
                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                    fill: false,
                    data: data,
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    enabled: false,
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false,
                    labels: {
                        usePointStyle: false
                    }
                },
                responsive: true,
                maintainAspectRatio: true,
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },

                elements: {
                    point: {
                        radius: 4,
                        borderWidth: 12
                    },
                },

                layout: {
                    padding: {
                        left: 0,
                        right: 10,
                        top: 5,
                        bottom: 0
                    }
                }
            }
        };

        return new Chart(src, config);
    }

    // Daily Sales chart.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var dailySales = function() {
        var chartContainer = KTUtil.getByID('kt_chart_daily_sales');

        if (!chartContainer) {
            return;
        }

        var chartData = {
            labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14", "Label 15", "Label 16"],
            datasets: [{
                //label: 'Dataset 1',
                backgroundColor: KTApp.getStateColor('success'),
                data: [
                    15, 20, 25, 30, 25, 20, 15, 20, 25, 30, 25, 20, 15, 10, 15, 20
                ]
            }, {
                //label: 'Dataset 2',
                backgroundColor: '#f3f3fb',
                data: [
                    15, 20, 25, 30, 25, 20, 15, 20, 25, 30, 25, 20, 15, 10, 15, 20
                ]
            }]
        };

        var chart = new Chart(chartContainer, {
            type: 'bar',
            data: chartData,
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                barRadius: 4,
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        stacked: true
                    }],
                    yAxes: [{
                        display: false,
                        stacked: true,
                        gridLines: false
                    }]
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0
                    }
                }
            }
        });
    }

    // Profit Share Chart.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var profitShare = function() {
        if (!KTUtil.getByID('kt_chart_profit_share')) {
            return;
        }

        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var config = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        @foreach($Sectors as $Sector => $value)
                                                @foreach($value as $a)
                                                @endforeach

                        {{round($b,2)}},
                        @endforeach
                    ],
                    backgroundColor: [

                        @foreach($Sectors as $Sector=> $value)
                                                @foreach($value as $a)
                                    {{--console.log('helloolol','{{$type}}')--}}
                        @endforeach

                        KTApp.getStateColor('{{$type}}'),
                        @endforeach


                    ]
                }],



                labels: [
                    @foreach($Sectors as $Sector => $type)
                        '{{$Sector}}',
                    @endforeach
                    ]


            },
            options: {
                cutoutPercentage: 75,
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    position: 'top',
                },
                title: {
                    display: false,
                    text: 'Technology'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    enabled: true,
                    intersect: false,
                    mode: 'nearest',
                    bodySpacing: 5,
                    yPadding: 10,
                    xPadding: 10,
                    caretPadding: 0,
                    displayColors: false,
                    @foreach($Sectors as $Sector => $value)
                    {{--backgroundColor:KTApp.getStateColor('{{$value['Type']}}'),--}}
                    @endforeach
                    titleFontColor: '#ffffff',
                    cornerRadius: 4,
                    footerSpacing: 0,
                    titleSpacing: 0
                }
            }
        };

        var ctx = KTUtil.getByID('kt_chart_profit_share').getContext('2d');
        var myDoughnut = new Chart(ctx, config);
    }

    // Sales Stats.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var salesStats = function() {
        if (!KTUtil.getByID('kt_chart_sales_stats')) {
            return;
        }

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December",
                    "January", "February", "March", "April"
                ],
                datasets: [{
                    label: "Sales Stats",
                    borderColor: KTApp.getStateColor('brand'),
                    borderWidth: 2,
                    //pointBackgroundColor: KTApp.getStateColor('brand'),
                    backgroundColor: KTApp.getStateColor('brand'),
                    pointBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color(KTApp.getStateColor('danger')).alpha(0.2).rgbString(),
                    data: [
                        10, 20, 16,
                        18, 12, 40,
                        35, 30, 33,
                        34, 45, 40,
                        60, 55, 70,
                        65, 75, 62
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false,
                    labels: {
                        usePointStyle: false
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                },

                elements: {
                    point: {
                        radius: 3,
                        borderWidth: 0,

                        hoverRadius: 8,
                        hoverBorderWidth: 2
                    }
                }
            }
        };

        var chart = new Chart(KTUtil.getByID('kt_chart_sales_stats'), config);
    }

    // Sales By KTUtillication Stats.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var salesByApps = function() {
        // Init chart instances
        _initSparklineChart($('#kt_chart_sales_by_apps_1_1'), [10, 20, -5, 8, -20, -2, -4, 15, 5, 8], KTApp.getStateColor('success'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_1_2'), [2, 16, 0, 12, 22, 5, -10, 5, 15, 2], KTApp.getStateColor('danger'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_1_3'), [15, 5, -10, 5, 16, 22, 6, -6, -12, 5], KTApp.getStateColor('success'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_1_4'), [8, 18, -12, 12, 22, -2, -14, 16, 18, 2], KTApp.getStateColor('warning'), 2);

        _initSparklineChart($('#kt_chart_sales_by_apps_2_1'), [10, 20, -5, 8, -20, -2, -4, 15, 5, 8], KTApp.getStateColor('danger'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_2_2'), [2, 16, 0, 12, 22, 5, -10, 5, 15, 2], KTApp.getStateColor('dark'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_2_3'), [15, 5, -10, 5, 16, 22, 6, -6, -12, 5], KTApp.getStateColor('brand'), 2);
        _initSparklineChart($('#kt_chart_sales_by_apps_2_4'), [8, 18, -12, 12, 22, -2, -14, 16, 18, 2], KTApp.getStateColor('info'), 2);
    }

    // Latest Updates.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var latestUpdates = function() {
        if ($('#kt_chart_latest_updates').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_latest_updates").getContext("2d");

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "Marhch", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "Sales Stats",
                    backgroundColor: KTApp.getStateColor('danger'), // Put the gradient here as a fill color
                    borderColor: KTApp.getStateColor('danger'),
                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('success'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

                    //fill: 'start',
                    data: [
                        10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.0000001
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Trends Stats.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var trendsStats = function() {
        if ($('#kt_chart_trends_stats').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_trends_stats").getContext("2d");

        var gradient = ctx.createLinearGradient(0, 0, 0, 240);
        gradient.addColorStop(0, Chart.helpers.color('#00c5dc').alpha(0.7).rgbString());
        gradient.addColorStop(1, Chart.helpers.color('#f2feff').alpha(0).rgbString());

        var config = {
            type: 'line',
            data: {
                labels: [
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April"
                ],
                datasets: [{
                    label: "Sales Stats",
                    backgroundColor: gradient, // Put the gradient here as a fill color
                    borderColor: '#0dc8de',

                    pointBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.2).rgbString(),

                    //fill: 'start',
                    data: [
                        20, 10, 18, 15, 26, 18, 15, 22, 16, 12,
                        12, 13, 10, 18, 14, 24, 16, 12, 19, 21,
                        16, 14, 21, 21, 13, 15, 22, 24, 21, 11,
                        14, 19, 21, 17
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.19
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 5,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Trends Stats 2.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var trendsStats2 = function() {
        if ($('#kt_chart_trends_stats_2').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_trends_stats_2").getContext("2d");

        var config = {
            type: 'line',
            data: {
                labels: [
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
                    "January", "February", "March", "April"
                ],
                datasets: [{
                    label: "Sales Stats",
                    backgroundColor: '#d2f5f9', // Put the gradient here as a fill color
                    borderColor: KTApp.getStateColor('brand'),

                    pointBackgroundColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#ffffff').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.2).rgbString(),

                    //fill: 'start',
                    data: [
                        20, 10, 18, 15, 32, 18, 15, 22, 8, 6,
                        12, 13, 10, 18, 14, 24, 16, 12, 19, 21,
                        16, 14, 24, 21, 13, 15, 27, 29, 21, 11,
                        14, 19, 21, 17
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    intersect: false,
                    mode: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.19
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 5,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Trends Stats.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var latestTrendsMap = function() {
        if ($('#kt_chart_latest_trends_map').length == 0) {
            return;
        }

        try {
            var map = new GMaps({
                div: '#kt_chart_latest_trends_map',
                lat: -12.043333,
                lng: -77.028333
            });
        } catch (e) {
            console.log(e);
        }
    }

    // Revenue Change.
    // Based on Morris plugin - http://morrisjs.github.io/morris.js/
    var revenueChange = function() {
        if ($('#kt_chart_revenue_change').length == 0) {
            return;
        }

        Morris.Donut({
            element: 'kt_chart_revenue_change',
            data: [@foreach($townshiparray as $township =>$value)
            {

                label:  "{{$value["title"]}}",
                value: {{round($value["total"],2)}}

                    },@endforeach
            ],
          colors: [
                @foreach($townshiparray as $township =>$value)

                KTApp.getStateColor("{{$value['Type']}}"),


                @endforeach
            ],
        });
    }

    // Support Tickets Chart.
    // Based on Morris plugin - http://morrisjs.github.io/morris.js/
    var supportCases = function() {
        if ($('#kt_chart_support_tickets').length == 0) {
            return;
        }

        Morris.Donut({
            element: 'kt_chart_support_tickets',
            data: [{
                    label: "Margins",
                    value: 20
                },
                {
                    label: "Profit",
                    value: 70
                },
                {
                    label: "Lost",
                    value: 10
                }
            ],
            labelColor: '#a7a7c2',
            colors: [
                KTApp.getStateColor('success'),
                KTApp.getStateColor('brand'),
                KTApp.getStateColor('danger')
            ]
            //formatter: function (x) { return x + "%"}
        });
    }

    // Support Tickets Chart.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var supportRequests = function() {
        var container = KTUtil.getByID('kt_chart_support_requests');

        if (!container) {
            return;
        }

        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var config = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        35, 30, 35
                    ],
                    backgroundColor: [
                        KTApp.getStateColor('success'),
                        KTApp.getStateColor('danger'),
                        KTApp.getStateColor('brand')
                    ]
                }],
                labels: [
                    'Angular',
                    'CSS',
                    'HTML'
                ]
            },
            options: {
                cutoutPercentage: 75,
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    position: 'top',
                },
                title: {
                    display: false,
                    text: 'Technology'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    enabled: true,
                    intersect: false,
                    mode: 'nearest',
                    bodySpacing: 5,
                    yPadding: 10,
                    xPadding: 10,
                    caretPadding: 0,
                    displayColors: false,
                    backgroundColor: KTApp.getStateColor('brand'),
                    titleFontColor: '#ffffff',
                    cornerRadius: 4,
                    footerSpacing: 0,
                    titleSpacing: 0
                }
            }
        };

        var ctx = container.getContext('2d');
        var myDoughnut = new Chart(ctx, config);
    }


    // Activities Charts.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var activitiesChart = function() {
        if ($('#kt_chart_activities').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_activities").getContext("2d");

        var gradient = ctx.createLinearGradient(0, 1, 0, 180);
        gradient.addColorStop(0, Chart.helpers.color('#0969c9').alpha(1).rgbString());
        gradient.addColorStop(1, Chart.helpers.color('#64D88D').alpha(1).rgbString());
        {{--var config = {--}}
        {{--    type: 'line',--}}
        {{--    data: {--}}

        {{--        labels:--}}
        {{--            [@foreach($New as $key => $value)--}}
        {{--                '{{$value['date']}}',@endforeach],--}}
        {{--        datasets: [{--}}
        {{--            // label:"hello",--}}
        {{--            backgroundColor: gradient,  //gradient--}}
        {{--            borderColor: '#0969c9',--}}

        {{--            pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),--}}
        {{--            pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),--}}
        {{--            pointHoverBackgroundColor: KTApp.getStateColor('light'),--}}
        {{--            pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),--}}

        {{--            //fill: 'start',--}}
        {{--            data: [--}}
        {{--                @foreach($New as $key => $value)--}}
        {{--                    {{$value['datecount']}},@endforeach],--}}

        {{--        }]--}}
        {{--    },--}}
        {{--};--}}

        // var chart = new Chart(ctx, config);
        var ChartPage = {
            getGeneralOptions: function() {
                return {
                    type:'line',
                    backgroundColor: gradient,  //gradient
                    borderColor: '#c90909',

                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('light'),
                    pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),
                };
            },
            getChartOptions: function(data) {
                console.log('data',data)

                return {
                    data:data,
                    type: 'line',
                    {{--data: {--}}

                    {{--    labels:--}}
                    {{--        [@foreach($New as $key => $value)--}}
                    {{--            '{{$value['date']}}',@endforeach],--}}
                    {{--    datasets: [{--}}
                    {{--        // label:"hello",--}}
                    {{--        backgroundColor: gradient,  //gradient--}}
                    {{--        borderColor: '#0969c9',--}}

                    {{--        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),--}}
                    {{--        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),--}}
                    {{--        pointHoverBackgroundColor: KTApp.getStateColor('light'),--}}
                    {{--        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),--}}

                    {{--        //fill: 'start',--}}
                    {{--        data: [--}}
                    {{--            @foreach($New as $key => $value)--}}
                    {{--            {{$value['datecount']}},@endforeach],--}}

                    {{--    }],--}}
                    {{--},--}}
                    options: {
                        title: {
                            display: false,
                        },
                        tooltips: {
                            mode: 'nearest',
                            intersect: false,
                            position: 'nearest',
                            xPadding: 10,
                            yPadding: 10,
                            caretPadding: 10
                        },
                        legend: {
                            display: false
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            xAxes: [{
                                display: false,
                                gridLines: false,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Month'
                                }
                            }],
                            yAxes: [{
                                display: false,
                                gridLines: false,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Value'
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        },
                        elements: {
                            line: {
                                tension: 0.0000001
                            },
                            point: {
                                radius: 4,
                                borderWidth: 12
                            }
                        },
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 10,
                                bottom: 0
                            }
                        }
                    },

            }},
            data: {
                initial: {
                    labels:
                        [@foreach($New as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($New as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'days': {
                    labels:
                        [@foreach($New as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($New as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'mois':  {
                    labels:
                        [@foreach($NewMonth as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($NewMonth as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'week': {
                    labels:
                    [@foreach($byweek as $key => $value)
                        'semaine :{{ $value['week']}}',@endforeach
                        ],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($byweek as $key => $value)
                            {{$value['datecount']}},@endforeach],


                    }],
                },

                'daysAccepted': {
                    labels:
                        [@foreach($Accepted as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($Accepted as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'moisAccepted':  {
                    labels:
                        [@foreach($AcceptedMonth as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($AcceptedMonth as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'weekAccepted': {
                    labels:
                    [@foreach($byweekAccepted as $key => $value)
                        'semaine :{{ $value['week']}}',@endforeach
                        ],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($byweekAccepted as $key => $value)
                            {{$value['datecount']}},@endforeach],


                    }],
                },

                'daysIncube': {
                    labels:
                        [@foreach($Incube as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($Incube as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'moisIncube':  {
                    labels:
                        [@foreach($IncubeMonth as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($IncubeMonth as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'weekIncube': {
                    labels:
                    [@foreach($byweekIncube as $key => $value)
                        'semaine :{{ $value['week']}}',@endforeach
                        ],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($byweekIncube as $key => $value)
                            {{$value['datecount']}},@endforeach],


                    }],
                },

                'daysRejected': {
                    labels:
                        [@foreach($Rejected as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($Rejected as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'moisRejected':  {
                    labels:
                        [@foreach($RejectedMonth as $key => $value)
                            '{{$value['date']}}',@endforeach],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($RejectedMonth as $key => $value)
                            {{$value['datecount']}},@endforeach],

                    }],
                },
                'weekRejected': {
                    labels:
                    [@foreach($byweekRejected as $key => $value)
                        'semaine :{{ $value['week']}}',@endforeach
                        ],
                    datasets: [{
                        // label:"hello",
                        backgroundColor: gradient,  //gradient
                        borderColor: '#0969c9',

                        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                        pointHoverBackgroundColor: KTApp.getStateColor('light'),
                        pointHoverBorderColor: Chart.helpers.color('#ffffff').alpha(0.1).rgbString(),

                        //fill: 'start',
                        data: [
                            @foreach($byweekRejected as $key => $value)
                            {{$value['datecount']}},@endforeach],


                    }],
                },
            },


            updateGraph: function(chartId) {

                if (this.chart) {
                    this.chart.clear();
                    this.chart.destroy();
                    delete this.chart;
                }
                // Then, let's set up the chart again
                var chartOpts = this.getChartOptions(this.data[chartId]);
                this.chart = new Chart(ctx,chartOpts);
                this.chart.update();
            }


        };
        ChartPage.updateGraph('initial');


        var buttons = document.querySelectorAll('.chartType');
        [].slice.call(buttons).forEach(function(button) {
            button.addEventListener('click', function(e) {
                var btn = e.target;
                console.log('lol',button.dataset.chartId)
                ChartPage.updateGraph(button.dataset.chartId);
                $('a').removeClass('active');
                $(this).addClass('active');
            });
        });
        var buttons = document.querySelectorAll('.chartTypeDataNew');
        [].slice.call(buttons).forEach(function(button) {
            button.addEventListener('click', function(e) {
                var btn = e.target;
                ChartPage.updateGraph('days');
                document.getElementById('mois').setAttribute("data-chart-id", "mois")
                document.getElementById('days').setAttribute("data-chart-id", "days")
                document.getElementById('week').setAttribute("data-chart-id", "week")

                // ChartPage.updateGraph(button.dataset.chartId);
                // $('a').removeClass('active');
                // $(this).addClass('active');
            });
        });

 var buttons = document.querySelectorAll('.chartTypeDataAccepte');
        [].slice.call(buttons).forEach(function(button) {
            button.addEventListener('click', function(e) {
                var btn = e.target;
                ChartPage.updateGraph('daysAccepted');
                document.getElementById('mois').setAttribute("data-chart-id", "moisAccepted")
                document.getElementById('days').setAttribute("data-chart-id", "daysAccepted")
                document.getElementById('week').setAttribute("data-chart-id", "weekAccepted")

                // ChartPage.updateGraph(button.dataset.chartId);
                // $('a').removeClass('active');
                // $(this).addClass('active');
            });
        });

 var buttons = document.querySelectorAll('.chartTypeDataincub');
        [].slice.call(buttons).forEach(function(button) {
            button.addEventListener('click', function(e) {
                var btn = e.target;
                ChartPage.updateGraph('daysIncube');
                console.log('hello from the otherside')
                document.getElementById('mois').setAttribute("data-chart-id", "moisIncube")
                document.getElementById('days').setAttribute("data-chart-id", "weekIncube")
                document.getElementById('week').setAttribute("data-chart-id", "daysIncube")

                // ChartPage.updateGraph(button.dataset.chartId);
                // $('a').removeClass('active');
                // $(this).addClass('active');
            });
        });

        var buttons = document.querySelectorAll('.chartTypeDatarefused');
        [].slice.call(buttons).forEach(function(button) {
            button.addEventListener('click', function(e) {
                var btn = e.target;
                ChartPage.updateGraph('daysRejected');
                console.log('hello from the otherside')
                document.getElementById('mois').setAttribute("data-chart-id", "moisRejected")
                document.getElementById('days').setAttribute("data-chart-id", "daysRejected")
                document.getElementById('week').setAttribute("data-chart-id", "weekRejected")

                // ChartPage.updateGraph(button.dataset.chartId);
                // $('a').removeClass('active');
                // $(this).addClass('active');
            });
        });
    }

    // Bandwidth Charts 1.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var bandwidthChart1 = function() {
        if ($('#kt_chart_bandwidth1').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_bandwidth1").getContext("2d");

        var gradient = ctx.createLinearGradient(0, 0, 0, 240);
        gradient.addColorStop(0, Chart.helpers.color('#d1f1ec').alpha(1).rgbString());
        gradient.addColorStop(1, Chart.helpers.color('#d1f1ec').alpha(0.3).rgbString());

        var config = {
            type: 'line',
            data: {
                labels: [@foreach($created_date as $key => $date)
                    '{{$date->date}}',@endforeach],
                datasets: [{
                    label: "Dossiers en attente",
                    backgroundColor: gradient,
                    borderColor: KTApp.getStateColor('success'),

                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

                    //fill: 'start',
                    data: [
                        @foreach($created_date as $key => $date)
                        {{$date->datecount}},@endforeach
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                    position: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.0000001
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 10,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Bandwidth Charts 2.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var bandwidthChart2 = function() {
        if ($('#kt_chart_bandwidth2').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_bandwidth2").getContext("2d");

        var gradient = ctx.createLinearGradient(0, 0, 0, 240);
        gradient.addColorStop(0, Chart.helpers.color('#ffefce').alpha(1).rgbString());
        gradient.addColorStop(1, Chart.helpers.color('#ffefce').alpha(0.3).rgbString());

        var config = {
            type: 'line',
            data: {
                labels: [@foreach($incubationdate as $key => $date)
                    '{{$date->date}}',@endforeach],
                datasets: [{
                    label: "Dossiers Incubés",
                    backgroundColor: gradient,
                    borderColor: KTApp.getStateColor('warning'),
                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

                    //fill: 'start',
                    data: [
                        @foreach($incubationdate as $key => $date)
                        {{$date->datecount}},@endforeach
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                    position: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.0000001
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 10,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Bandwidth Charts 2.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var adWordsStat = function() {
        if ($('#kt_chart_adwords_stats').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_adwords_stats").getContext("2d");

        var gradient = ctx.createLinearGradient(0, 0, 0, 240);
        gradient.addColorStop(0, Chart.helpers.color('#ffefce').alpha(1).rgbString());
        gradient.addColorStop(1, Chart.helpers.color('#ffefce').alpha(0.3).rgbString());

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "AdWord Clicks",
                    backgroundColor: KTApp.getStateColor('brand'),
                    borderColor: KTApp.getStateColor('brand'),

                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                    data: [
                        12, 16, 9, 18, 13, 12, 18, 12, 15, 17
                    ]
                }, {
                    label: "AdWords Views",

                    backgroundColor: KTApp.getStateColor('success'),
                    borderColor: KTApp.getStateColor('success'),

                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                    data: [
                        10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                    position: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.0000001
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 10,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Bandwidth Charts 2.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var financeSummary = function() {
        if ($('#kt_chart_finance_summary').length == 0) {
            return;
        }

        var ctx = document.getElementById("kt_chart_finance_summary").getContext("2d");

        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
                datasets: [{
                    label: "AdWords Views",

                    backgroundColor: KTApp.getStateColor('success'),
                    borderColor: KTApp.getStateColor('success'),

                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('danger'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),
                    data: [
                        10, 14, 12, 16, 9, 11, 13, 9, 13, 15
                    ]
                }]
            },
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                    position: 'nearest',
                    xPadding: 10,
                    yPadding: 10,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        gridLines: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0.0000001
                    },
                    point: {
                        radius: 4,
                        borderWidth: 12
                    }
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 10,
                        bottom: 0
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);
    }

    // Order Statistics.
    // Based on Chartjs plugin - http://www.chartjs.org/
    var orderStatistics = function() {
        var container = KTUtil.getByID('kt_chart_order_statistics');

        if (!container) {
            return;
        }

        var MONTHS = ['1 Jan', '2 Jan', '3 Jan', '4 Jan', '5 Jan', '6 Jan', '7 Jan'];

        var color = Chart.helpers.color;
        var barChartData = {
            labels: ['1 Jan', '2 Jan', '3 Jan', '4 Jan', '5 Jan', '6 Jan', '7 Jan'],
            datasets : [
				{
                    fill: true,
                    //borderWidth: 0,
                    backgroundColor: color(KTApp.getStateColor('brand')).alpha(0.6).rgbString(),
                    borderColor : color(KTApp.getStateColor('brand')).alpha(0).rgbString(),

                    pointHoverRadius: 4,
                    pointHoverBorderWidth: 12,
                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('brand'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

					data: [20, 30, 20, 40, 30, 60, 30]
				},
				{
                    fill: true,
                    //borderWidth: 0,
					backgroundColor : color(KTApp.getStateColor('brand')).alpha(0.2).rgbString(),
                    borderColor : color(KTApp.getStateColor('brand')).alpha(0).rgbString(),

                    pointHoverRadius: 4,
                    pointHoverBorderWidth: 12,
                    pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
                    pointHoverBackgroundColor: KTApp.getStateColor('brand'),
                    pointHoverBorderColor: Chart.helpers.color('#000000').alpha(0.1).rgbString(),

					data: [15, 40, 15, 30, 40, 30, 50]
				}
            ]
        };

        var ctx = container.getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: barChartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: false,
                scales: {
                    xAxes: [{
                        categoryPercentage: 0.35,
                        barPercentage: 0.70,
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Month'
                        },
                        gridLines: false,
                        ticks: {
                            display: true,
                            beginAtZero: true,
                            fontColor: KTApp.getBaseColor('shape', 3),
                            fontSize: 13,
                            padding: 10
                        }
                    }],
                    yAxes: [{
                        categoryPercentage: 0.35,
                        barPercentage: 0.70,
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Value'
                        },
                        gridLines: {
                            color: KTApp.getBaseColor('shape', 2),
                            drawBorder: false,
                            offsetGridLines: false,
                            drawTicks: false,
                            borderDash: [3, 4],
                            zeroLineWidth: 1,
                            zeroLineColor: KTApp.getBaseColor('shape', 2),
                            zeroLineBorderDash: [3, 4]
                        },
                        ticks: {
                            max: 70,
                            stepSize: 10,
                            display: true,
                            beginAtZero: true,
                            fontColor: KTApp.getBaseColor('shape', 3),
                            fontSize: 13,
                            padding: 10
                        }
                    }]
                },
                title: {
                    display: false
                },
                hover: {
                    mode: 'index'
                },
                tooltips: {
                    enabled: true,
                    intersect: false,
                    mode: 'nearest',
                    bodySpacing: 5,
                    yPadding: 10,
                    xPadding: 10,
                    caretPadding: 0,
                    displayColors: false,
                    backgroundColor: KTApp.getStateColor('brand'),
                    titleFontColor: '#ffffff',
                    cornerRadius: 4,
                    footerSpacing: 0,
                    titleSpacing: 0
                },
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 5,
                        bottom: 5
                    }
                }
            }
        });
    }

    // Quick Stat Charts
    var quickStats = function() {
        _initSparklineChart($('#kt_chart_quick_stats_1'), [10, 14, 18, 11, 9, 12, 14, 17, 18, 14], KTApp.getStateColor('brand'), 3);
        _initSparklineChart($('#kt_chart_quick_stats_2'), [11, 12, 18, 13, 11, 12, 15, 13, 19, 15], KTApp.getStateColor('danger'), 3);
        _initSparklineChart($('#kt_chart_quick_stats_3'), [12, 12, 18, 11, 15, 12, 13, 16, 11, 18], KTApp.getStateColor('success'), 3);
        _initSparklineChart($('#kt_chart_quick_stats_4'), [11, 9, 13, 18, 13, 15, 14, 13, 18, 15], KTApp.getStateColor('success'), 3);
    }

    // Daterangepicker Init
    var daterangepickerInit = function() {
        if ($('#kt_dashboard_daterangepicker').length == 0) {
            return;
        }

        var picker = $('#kt_dashboard_daterangepicker');
        var start = moment();
        var end = moment();

        function cb(start, end, label) {
            var title = '';
            var range = '';

            if ((end - start) < 100 || label == 'Today') {
                title = 'Today:';
                range = start.format('MMM D');
            } else if (label == 'Yesterday') {
                title = 'Yesterday:';
                range = start.format('MMM D');
            } else {
                range = start.format('MMM D') + ' - ' + end.format('MMM D');
            }

            $('#kt_dashboard_daterangepicker_date').html(range);
            $('#kt_dashboard_daterangepicker_title').html(title);
        }

        picker.daterangepicker({
            direction: KTUtil.isRTL(),
            startDate: start,
            endDate: end,
            opens: 'left',
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        cb(start, end, '');
    }

    // Calendar Init
    var calendarInit = function() {
        if ($('#kt_calendar').length === 0) {
            return;
        }

        var todayDate = moment().startOf('day');
        var YM = todayDate.format('YYYY-MM');
        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
        var TODAY = todayDate.format('YYYY-MM-DD');
        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');

        $('#kt_calendar').fullCalendar({
            isRTL: KTUtil.isRTL(),
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            navLinks: true,
            defaultDate: moment('2017-09-15'),
            events: [
                {
                    title: 'Meeting',
                    start: moment('2017-08-28'),
                    description: 'Lorem ipsum dolor sit incid idunt ut',
                    className: "fc-event-light fc-event-solid-warning"
                },
                {
                    title: 'Conference',
                    description: 'Lorem ipsum dolor incid idunt ut labore',
                    start: moment('2017-08-29T13:30:00'),
                    end: moment('2017-08-29T17:30:00'),
                    className: "fc-event-success"
                },
                {
                    title: 'Dinner',
                    start: moment('2017-08-30'),
                    description: 'Lorem ipsum dolor sit tempor incid',
                    className: "fc-event-light  fc-event-solid-danger"
                },
                {
                    title: 'All Day Event',
                    start: moment('2017-09-01'),
                    description: 'Lorem ipsum dolor sit incid idunt ut',
                    className: "fc-event-danger fc-event-solid-focus"
                },
                {
                    title: 'Reporting',
                    description: 'Lorem ipsum dolor incid idunt ut labore',
                    start: moment('2017-09-03T13:30:00'),
                    end: moment('2017-09-04T17:30:00'),
                    className: "fc-event-success"
                },
                {
                    title: 'Company Trip',
                    start: moment('2017-09-05'),
                    end: moment('2017-09-07'),
                    description: 'Lorem ipsum dolor sit tempor incid',
                    className: "fc-event-primary"
                },
                {
                    title: 'ICT Expo 2017 - Product Release',
                    start: moment('2017-09-09'),
                    description: 'Lorem ipsum dolor sit tempor inci',
                    className: "fc-event-light fc-event-solid-primary"
                },
                {
                    title: 'Dinner',
                    start: moment('2017-09-12'),
                    description: 'Lorem ipsum dolor sit amet, conse ctetur'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: moment('2017-09-15T16:00:00'),
                    description: 'Lorem ipsum dolor sit ncididunt ut labore',
                    className: "fc-event-danger"
                },
                {
                    id: 1000,
                    title: 'Repeating Event',
                    description: 'Lorem ipsum dolor sit amet, labore',
                    start: moment('2017-09-18T19:00:00'),
                },
                {
                    title: 'Conference',
                    start: moment('2017-09-20T13:00:00'),
                    end: moment('2017-09-21T19:00:00'),
                    description: 'Lorem ipsum dolor eius mod tempor labore',
                    className: "fc-event-success"
                },
                {
                    title: 'Meeting',
                    start: moment('2017-09-11'),
                    description: 'Lorem ipsum dolor eiu idunt ut labore'
                },
                {
                    title: 'Lunch',
                    start: moment('2017-09-18'),
                    className: "fc-event-info fc-event-solid-success",
                    description: 'Lorem ipsum dolor sit amet, ut labore'
                },
                {
                    title: 'Meeting',
                    start: moment('2017-09-24'),
                    className: "fc-event-warning",
                    description: 'Lorem ipsum conse ctetur adipi scing'
                },
                {
                    title: 'Happy Hour',
                    start: moment('2017-09-24'),
                    className: "fc-event-light fc-event-solid-focus",
                    description: 'Lorem ipsum dolor sit amet, conse ctetur'
                },
                {
                    title: 'Dinner',
                    start: moment('2017-09-24'),
                    className: "fc-event-solid-focus fc-event-light",
                    description: 'Lorem ipsum dolor sit ctetur adipi scing'
                },
                {
                    title: 'Birthday Party',
                    start: moment('2017-09-24'),
                    className: "fc-event-primary",
                    description: 'Lorem ipsum dolor sit amet, scing'
                },
                {
                    title: 'Company Event',
                    start: moment('2017-09-24'),
                    className: "fc-event-danger",
                    description: 'Lorem ipsum dolor sit amet, scing'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: moment('2017-09-26'),
                    className: "fc-event-solid-info fc-event-light",
                    description: 'Lorem ipsum dolor sit amet, labore'
                }
            ],

            eventRender: function(event, element) {
                if (element.hasClass('fc-day-grid-event')) {
                    element.data('content', event.description);
                    element.data('placement', 'top');
                    KTApp.initPopover(element);
                } else if (element.hasClass('fc-time-grid-event')) {
                    element.find('.fc-title').append('<div class="fc-description">' + event.description + '</div>');
                } else if (element.find('.fc-list-item-title').lenght !== 0) {
                    element.find('.fc-list-item-title').append('<div class="fc-description">' + event.description + '</div>');
                }
            }
        });
    }

    // Earnings Sliders
    var earningsSlide = function() {
        var carousel1 = $('#kt_earnings_widget .kt-widget30__head .owl-carousel');
        var carousel2 = $('#kt_earnings_widget .kt-widget30__body .owl-carousel');

        carousel1.find('.carousel').each( function( index ) {
            $(this).attr( 'data-position', index );
        });

        carousel1.owlCarousel({
            rtl: KTUtil.isRTL(),
            center: true,
            loop: true,
            items: 2
        });

        carousel2.owlCarousel({
            rtl: KTUtil.isRTL(),
            items: 1,
            animateIn: 'fadeIn(100)',
            loop: true
        });

        $(document).on('click', '.carousel', function() {
            var index = $(this).attr( 'data-position' );
            if (index) {
                carousel1.trigger('to.owl.carousel', index );
                carousel2.trigger('to.owl.carousel', index );
            }
        });

        carousel1.on('changed.owl.carousel', function () {
            var index = $(this).find('.owl-item.active.center').find('.carousel').attr('data-position');
            if (index) {
                carousel2.trigger('to.owl.carousel', index);
            }
        });

        carousel2.on('changed.owl.carousel', function () {
            var index = $(this).find('.owl-item.active.center').find('.carousel').attr('data-position');
            if (index){
                carousel1.trigger('to.owl.carousel', index);
            }
        });
    }

    return {
        // Init demos
        init: function() {
            // init charts
            dailySales();
            profitShare();
            salesStats();
            salesByApps();
            latestUpdates();
            trendsStats();
            trendsStats2();
            latestTrendsMap();
            revenueChange();
            supportCases();
            supportRequests();
            activitiesChart();
            bandwidthChart1();
            bandwidthChart2();
            adWordsStat();
            financeSummary();
            quickStats();
            orderStatistics();

            // init daterangepicker
            daterangepickerInit();

            // datatables
            //datatableLatestOrders();

            // calendar
            calendarInit();

            // earnings slide
            earningsSlide();


            // demo loading
            var loading = new KTDialog({'type': 'loader', 'placement': 'top center', 'message': 'Loading ...'});
            loading.show();

            setTimeout(function() {
                loading.hide();
            }, 3000);
        }
    };
}();

// Class initialization on page load
jQuery(document).ready(function() {
    KTDashboard.init();
});

	</script>
@endsection