<?php 

require_once('./inc/breadcrumbs.php');

	require_once("vendor/autoload.php");
	//$rels = new \App\Models\Rels(); 

	//$r_all = $rels->getTotCliente();
	
		$pedidos = new \App\Models\Pedidos();

		$lojas  = $pedidos->getAllLojas();
 ?>
<!-- MOVE O CURSO DO MENU -->
<script> window.onload = function(e){ $('.nav-item').removeClass('active'); $('#dashboard').addClass('active'); } </script>
<!-- MOVE O CURSO DO MENU -->
<div class="page-inner mt--5">
	<div class="row mt--2">
	<?php 
		$js = "";
		foreach ($lojas as $key => $L) {
	?>
		<div class="col-md-6">
			<div class="card full-height">
				<div class="card-body">
					<div class="card-title"><?= $L['nome'];?></div>
					<div class="card-category">Itens mais transferido no mês</div>
					<div class="d-flex flex-wrap justify-content-around pb-2 pt-4">
						<?php
							$getAllPedidos = $pedidos->getMaxitenslog($L['id']);
							if(!empty($getAllPedidos)){
								$cont = 1;
								foreach ($getAllPedidos as $key => $lista) {
									if($lista['NUM'] > 0){
						?>
						<div class="px-2 pb-2 pb-md-0 text-center">
							<div id="circles-<?= $lista['id'];?>"></div>
							<h6 class="fw-bold mt-3 mb-0"><b>R$ <?= $lista['VL']; ?></b><br><br><?= $lista['prod_codigo'];?><br><?= substr($lista['prod_desc'],0,15)."...";?> <br><br> Média Dia: <?= $lista['media_dia'];?></h6>
						</div>
						<?php
								switch($cont){
									case 1:
										$tam = 60;
										$color = "#FF9E27";
										break;
									case 2:
										$tam = 30;
										$color = "#2BB930";
										break;
  								    case 3:
										$tam = 10;
										$color = "#F25961";
										break;
								}
							$cont++;
							$js .= "
									Circles.create({
										id:'circles-".$lista['id']."',
										radius:45,
										value:".$tam.",
										maxValue:100,
										width:7,
										text: ".$lista['NUM'].",
										colors:['#f1f1f1', '".$color."'],
										duration:400,
										wrpClass:'circles-wrp',
										textClass:'circles-text',
										styleWrapper:true,
										styleText:true
									})";


							}
								}
						}else{
							?>
								<div class="px-2 pb-2 pb-md-0 text-center">
									<h6 class="fw-bold mt-3 mb-0">SEM TRANSFERENCIAS</h6>
								</div>
							<?php
						}
						?>

						<!--<div class="px-2 pb-2 pb-md-0 text-center">
							<div id="circles-2"></div>
							<h6 class="fw-bold mt-3 mb-0">Item: </h6>
						</div>
						<div class="px-2 pb-2 pb-md-0 text-center">
							<div id="circles-3"></div>
							<h6 class="fw-bold mt-3 mb-0">Item: </h6>
						</div>-->
						
					</div>
				</div>
			</div>
		</div>
	<?php 
		}
	?>		
		<!--<div class="col-md-6">
			<div class="card full-height">
				<div class="card-body">
					<div class="card-title">Total income & spend statistics</div>
					<div class="row py-3">
						<div class="col-md-4 d-flex flex-column justify-content-around">
							<div>
								<h6 class="fw-bold text-uppercase text-success op-8">Total Income</h6>
								<h3 class="fw-bold">$9.782</h3>
							</div>
							<div>
								<h6 class="fw-bold text-uppercase text-danger op-8">Total Spend</h6>
								<h3 class="fw-bold">$1,248</h3>
							</div>
						</div>
						<div class="col-md-8">
							<div id="chart-container">
								<canvas id="totalIncomeChart"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>-->
		
		
	</div>
	<div class="row">
		<div class="col-md-6">
		</div>
		<div class="col-md-6">
		</div>
	</div>
</div>
<?php 
$jspage  =  "
	<!-- Atlantis DEMO methods, don't include it in your project! -->
	<script src='./assets/js/plugin/chart.js/chart.min.js'></script>
	<script src='./assets/js/plugin/chart-circle/circles.min.js'></script>
	<script src='./assets/js/setting-demo.js'></script>
	<script src='./assets/js/demo.js'></script>
	<script src='./assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js'></script>
	<script>
	".$js."
		var totalIncomeChart = document.getElementById('totalIncomeChart').getContext('2d');

		var mytotalIncomeChart = new Chart(totalIncomeChart, {
			type: 'bar',
			data: {
				labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T'],
				datasets : [{
					label: 'Total Income',
					backgroundColor: '#ff9e27',
					borderColor: 'rgb(23, 125, 255)',
					data: [6, 4, 9, 5, 4, 6, 4, 3, 8, 10],
				}],
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				legend: {
					display: false,
				},
				scales: {
					yAxes: [{
						ticks: {
							display: false //this will remove only the label
						},
						gridLines : {
							drawBorder: false,
							display : false
						}
					}],
					xAxes : [ {
						gridLines : {
							drawBorder: false,
							display : false
						}
					}]
				},
			}
		});

		$('#lineChart').sparkline([105,103,123,100,95,105,115], {
			type: 'line',
			height: '70',
			width: '100%',
			lineWidth: '2',
			lineColor: '#ffa534',
			fillColor: 'rgba(255, 165, 52, .14)'
		});
		
		
		
		
	</script>";
	/*
			Circles.create({
			id:'circles-1',
			radius:45,
			value:60,
			maxValue:100,
			width:7,
			text: 5,
			colors:['#f1f1f1', '#FF9E27'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-2',
			radius:45,
			value:70,
			maxValue:100,
			width:7,
			text: 36,
			colors:['#f1f1f1', '#2BB930'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		})

		Circles.create({
			id:'circles-3',
			radius:45,
			value:40,
			maxValue:100,
			width:7,
			text: 12,
			colors:['#f1f1f1', '#F25961'],
			duration:400,
			wrpClass:'circles-wrp',
			textClass:'circles-text',
			styleWrapper:true,
			styleText:true
		}) */
?>

