<div>
	<div class="dash-title">
		<span>{{translation.overview}}</span>
		<span>
         <span>
            <a href="javascript:void(0);" class="tooltip" data-position="top" data-tooltip="Dashboard Overview">
               <i aria-hidden="true" class="ti ti-help-alt theme--light"></i>
            </a>
         </span>
		</span>
	</div>
</div>
<div class="row mb-0">
	<div class="col s12 m6 l4 mb-1 chart-ie-set canvas">
		{{{vcard "2145" "Total Earning" "lineChart1"}}}
	</div>
	<div class="col s12 m6 l4 mb-1 chart-ie-set canvas">
		{{{vcard "136" "New Customers" "lineChart2"}}}
	</div>
	<div class="col s12 m12 l4 mb-1 chart-ie-set canvas">
		{{{vcard "2145" "Online Revenue" "lineChart3"}}}
	</div>
</div>
<div class="layout row doughnutchart-spacing mb-0">
	<div class="col s12 m8 mb-1">
		<div class="card w-100" id='stackedBar'>
			{{{preLoader}}}
			<div class="card-content h-100">
				<div class="card-header d-flex justify-content-between align-items-center mb-4">
					<h3 class="card-title">{{translation.sales}}</h3>
					{{{ appCardAction "buttonone" "sectionone" 'stackedBar'}}}
				</div>
				<div class="card-data">
					<div class="mb-5">
						{{> charts/stackedBarChart}}
					</div>
					<div class="d-flex px-4 justify-content-between align-items-center">
						<div>
							<div class="mb-0 d-flex">
								<span><i class="zmdi zmdi-shopping-cart-plus primary-text"></i></span>
								<div class="mx-2">
									<h6 class="mb-1 fw-bold">2382</h6>
									<span class="text-sm">Sales</span>
								</div>
							</div>
						</div>
						<div>
							<div class="mb-0 d-flex">
								<span><i class="zmdi zmdi-eye success-text"></i></span>
								<div class="mx-2">
									<h6 class="mb-1 fw-bold">53,255</h6>
									<span class="text-sm">Views</span>
								</div>
							</div>
						</div>
						<div>
							<div class="mb-0 d-flex">
								<span><i class="zmdi zmdi-equalizer error-text"></i></span>
								<div class="mx-2">
									<h6 class="mb-1 fw-bold">$1,25,000</h6>
									<span class="text-sm">Earned</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col s12 m4 mb-1">
		<div class="card w-100" id="devices_share">
			{{{preLoader}}}
			<div class="card-content h-100  d-flex flex-initial flex-direction-column justify-content-between">
				<div class="card-header mb-4 d-flex justify-content-between align-items-center flex-initial">
					<h3 class="card-title">{{translation.devicesShare}}</h3>
					{{{ appCardAction "buttonthree" "sectionthree" "devices_share"}}}
				</div>
				<div class="card-data w-100 mb-5">
					<div class="relative">
						{{> charts/doughnutChart2}}
						<div class="overlay-content d-custom-flex justify-center align-items-center">
							<span class="text-xxl fw-bold">$2000</span>
						</div>
					</div>					
				</div>
				<div>
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<span class="d-block bar badge red"></span>
							<div>
								<span class="d-block text-sm">65%</span>
								<span class="d-block text-sm">Website</span>
							</div>
						</div>
						<div>
							<span class="d-block bar badge blue"></span>
							<div>
								<span class="d-block text-sm">25%</span>
								<span class="d-block text-sm">iOS Devices</span>
							</div>
						</div>
						<div>
							<span class="d-block bar badge green"></span>
							<div>
								<span class="d-block text-sm">10%</span>
								<span class="d-block text-sm">Android Devices</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="layout row wrap mb-0">
	<div class="col s12 m12 l4 mb-1">
		{{> widgets/dashboard/recentSales}}
	</div>
	<div class="col s12 m12 l4 mb-1">
		{{> widgets/dashboard/supportRequest}}
	</div>
	<div class="col s12 m12 l4 mb-1">
		<div class="todo-list-section">
			{{> widgets/dashboard/toDoList}}
		</div>
	</div>
</div>
<div class="layout row wrap grid-wrap mb-0">
	<div class="col s12 m12 l6 mb-1">
		<div class="card w-100 card-full customer-overview-spacing" id="customerOverview">
			<div class="card-content h-100 over-hidden">
				<div class="card-header">
					<h3 class="card-title">{{translation.customerOverview}}</h3>
				</div>
				<div class="card-data mb-0 d-flex flex-direction-column justify-content-between">
					<div class="row wrap card-pad-x">
						<div class="col s4">
							<div class="pa-2">
								<h3 class="mb-0">35000</h3>
								<p class="text-sm">New Customers</p>
							</div>
						</div>
						<div class="col s4">
							<div class="pa-2">
								<h3 class="mb-0">25000</h3>
								<p class="text-sm">Returning Customers</p>
							</div>
						</div>
					</div>
					<div>
						{{> charts/lineChart2}}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col s12 m12 l6 mb-1">
		{{> widgets/dashboard/invoices}}
	</div>
</div>
<div class="layout row wrap mb-0">
	<div class="col s12 m12 l8 mb-1">
		{{> widgets/dashboard/recentOrders}}
	</div>
	<div class="col s12 m12 l4 mb-1">
		<div class="card weekly-sales-widegt mb-4" id="weeklySale">
			{{{preLoader}}}
			<div class="card-header p-4 d-flex justify-content-between align-items-center">
				<h3 class="card-title">{{translation.weeklySales}}</h3>
				{{{ appCardAction "buttonnine" "sectionnine" "weeklySale"}}}
			</div>
			<div class="app-full-content">
				<div class="pl-4">
					<h5 class="mb-0 fw-bold">2578</h5>
					<p class="text-sm">+35% from last week</p>
				</div>
				<div class="widget">
					{{> charts/weeklySalesChart}}
				</div>
			</div>
		</div>
		{{> widgets/dashboard/reviews}}
	</div>
</div>
<div class="layout row wrap mb-0 social-share-spaceing">
	<div class="col s6 m6 l3 mb-1">
		{{{ socialShare "fab fa-facebook-f" "89K" "Friends" "459" "Feeds"}}}
	</div>
	<div class="col s6 m6 l3 mb-1">
		{{{ socialShare "fab fa-twitter" "65K" "Friends" "350" "Feeds"}}}
	</div>
	<div class="col s6 m6 l3 mb-1">
		{{{ socialShare "fab fa-linkedin-in" "35K" "Friends" "689" "Feeds"}}}
	</div>
	<div class="col s6 m6 l3">
		{{{ socialShare "fab fa-google" "90K" "Friends" "1000" "Feeds" }}}
	</div>
</div>
<div class="layout row grid-wrap mb-0">
	<div class="col s12 m6 l4 mb-1">
		{{> widgets/dashboard/topSelling}}
	</div>
	<div class="col s12 m6 l8 mb-1">
		<div class="card w-100" id="categorySales">
			<div class="card-content">
				{{{preLoader}}}
				<div class="card-header d-flex justify-content-between">
					<h3 class="card-title">{{translation.categorySales}}</h3>
					{{{ appCardAction "buttoneleven" "sectioneleven" "categorySales"}}}
				</div>
				{{> widgets/dashboard/categorySales }}
			</div>
		</div>
	</div>
</div>
<div class="layout row wrap grid-wrap mb-0">
	<div class="col s12 m12 l4 mb-1">
		{{#each data.bloggrid}} {{> widgets/dashboard/blogLayout1}} {{/each}}
	</div>

	<div class="col s12 m12 l4 mb-1">
		<div class="card" id="addNewBlog">
			<div class="card-content">
				{{{preLoader}}}
				<div class="card-header d-flex justify-content-between align-items-center">
					<h3 class="card-title" name="newPost">{{translation.newPost}}</h3>
					{{{ appCardAction "buttontweleve" "sectiontweleve" "addNewBlog"}}}
				</div>
				{{> widgets/dashboard/addNewBlog }}
			</div>
		</div>
	</div>
   	<div class="col s12 m12 l4 blog-bg-wrap mb-1">
		<div class="card d-flex">
			{{> widgets/dashboard/blogLayoutTwo }}
		</div>
	</div>
</div>
{{#extend 'scripts'}}
<script src="/javascripts/dashboard/ecommerce.js"></script>
<script src="/plugins/dropzone/dropzone.min.js"></script>
<script type="text/javascript">
	function onToDochange(event) {
		$.ajax({
				url: "/default/dashboard/ecommerce/toDoList",
				type: "POST",
				data: {
					id: event.id
				},
				body: JSON.stringify({
					"id": event.id
				})
			})
			.done(function(datas) {
				console.log("Sample of data:", datas);
			});
		$('#todo_' + event.id + ' .todo-title').toggleClass('complete');
		$('.todo-list-section .section-preloader-wrapper').addClass('display');
		setTimeout(function() {
			$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
			M.toast({
				html: 'ToDo Update Successfully',
				displayLength: '1500'
			})
		}, 1500);
	};

	function orderDelete(data) {
		$('#row_' + data.id).remove();
		if ($("#recentOrders tbody").find("tr").length === 0) {
			$("#recentOrders tbody").append('<tr><td colspan="5" class="nodata"></td></tr>');
			$("#recentOrders tbody .nodata").text('No Data Available');
		}
	}

	function taskDelete(event) {
		$.ajax({
				url: "/default/dashboard/ecommerce/toDoList",
				type: "POST",
				data: {
					id: event.id
				},
				body: JSON.stringify({
					"id": event.id
				})
			})
			.done(function(datas) {
				console.log("Sample of data:", datas);
			});

		$('.todo-list-section .section-preloader-wrapper').addClass('display');
		if ($("#toDoList .list-hover").find(".list-item").length === 1) {
			$('#toDoList .list-hover #sec_1').text("No Data Available");
		}
		setTimeout(function() {
			$('#section_' + event.id).remove();
			$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
			M.toast({
				html: 'ToDo Delete Successfully',
				displayLength: '1500'
			})
		}, 1500);
	}

	function addtodoTask() {
		var id ='';
		if($('.section:last').attr('id') == undefined){
			id = 'section_1';
		}else{
			id = $('.section:last').attr('id');
			console.log(id);
		}
		var split_id = id.split('_');
		var new_id = ++split_id[1];
		var date = document.getElementById('datepicker').value;
		var title = document.getElementById('title').value;
		if (date && title != '') {
			var $info = $(`<div class="section list-item to-do-list" id="section_` + new_id + `">
                           <div class="list-item-content d-flex" id="todo_` + new_id + `">
                              <div class="to-do-check">                       
                                 <label><input type="checkbox" name="task" id=` + new_id + ` autocomplete="off" onchange="return onToDochange(this)" ><span></span></label>
                              </div>
                              <div class="to-do-content">
                                    <div class="todo-title">
                                       <h5>` + title + `</h5>
                                    </div>
                                 <div class="">
                                    <span class="text-sm">` + date + `</span>
                                 </div>
                              </div>
                           </div> 
                           <a class="remove-btn btn-floating modal-trigger error-bg" href="#modal` + new_id + `">
                              <i aria-hidden="true" class="zmdi zmdi-delete material-icons theme--dark"></i>
                           </a>
                           <div id="modal` + new_id + `" class="modal" tabindex="0">
                              <div class="modal-content">
                                 <h4>Are You Sure You Want To Delete?</h4>
                                 <h6>Are you sure you want to delete this list permanently?</h6>
                              </div>
                              <div class="modal-footer">
                                 <a href="javascript:;" autocomplete="off" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
                                 <a href="javascript:;" autocomplete="off" id=` + new_id + ` onclick="return taskDelete(this)" class="modal-close waves-effect waves-green btn-flat">Delete</a>
                              </div>
                           </div>
                        </div>`);
			var $block = '';
			if($('.section:last').attr('id') == undefined){
				$block = $('#sec_1');
				$('.todo-list-section .section-preloader-wrapper').addClass('display');
				setTimeout(function() {
					$info.insertAfter($block);
					$('#sec_1').css('display','none');
					$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
				}, 1500);
			}else{
				console.log('etststest');
				var $block = $('#' + id);
				console.log($block);
				$('.todo-list-section .section-preloader-wrapper').addClass('display');
				setTimeout(function() {
					$info.insertAfter($block);
					$('#toDoList .to-do-wrapper #sec_1').remove();
					$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
				}, 1500);	
			}		
		}
	}

	function reload(event) {
		$('.todo-list-section .section-preloader-wrapper').addClass('display');
		setTimeout(function() {
			$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
		}, 1500);
	}
	
	// Full screeen functiionality
   function showFullScreen(sec_wrap_id){
      const el = (sec_wrap_id);
      if (screenfull.enabled) {
         screenfull.request(el);
      }
   };
   // Section close on dashvboard page
   function sectionClose(sec_wrap_id){
      var sec = $(sec_wrap_id).addClass('hide');
   };

	function elementReload(event) {
		$.ajax({
				url: "/default/dashboard/ecommerce",
				type: "POST",
				data: {
					id: event.id
				},
				body: JSON.stringify({
					"id": event.id
				})
			})
			.done(function(datas) {
				console.log("Sample of data:", datas);
			});
		$('#' + event.id + ' .section-preloader-wrapper').addClass('display');
		setTimeout(function() {
			$(".section-preloader-wrapper").fadeOut("slow").removeClass('display');
		}, 1500);
	}
	Dropzone.autoDiscover = false;
	$('#id_dropzone').dropzone({
		maxFiles: 1,
		maxFilesize: 0.5,
		url: 'https://httpbin.org/post',
		method: 'post'
	});
	$('.tooltip').tooltip();

</script>
{{/extend}}
