@extends('admin.mobile.layouts.adminApp', ["title" => "Sistema de Gestão de Contractos!"])

@section('content')

	<section class=" pt-4 my-2">
		<div class="px-3">
			<div class="row justify-content-center  py-3">
				<div class="col-12 col-lg-4">
					<div class=" grid-container py-3 border-x-bottom">
						<div class="d-flex align-items-center justify-content-between ">
							<img src="assets/img/icones/sgcprojects.svg" height="45px" width="45px" class="mr-auto">
							<div>
								<h6 class="text-center sm-font ml-2 font-weight-normal text-info">Necessidades</h6>
								<h5 class="font-weight-1 text-center number-mask">{{$necessity}}</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-4">
					<div class=" grid-container py-3 border-bottom">
						<div class="d-flex align-items-center justify-content-between">
							<img src="assets/img/icones/sgcvalidcontract.svg" height="45px" width="45px"
								 class="mr-auto">
							<div>
								<h6 class="text-center sm-font ml-2 font-weight-normal text-info">Materiais</h6>
								<h5 class="font-weight-1 text-center number-mask">{{$countMaterial}}</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-4">
					<div class=" grid-container py-3">
						<div class="d-flex align-items-center justify-content-between">
							<img src="assets/img/icones/sgccontract.svg" height="45px" width="45px" class="mr-auto">
							<div>
								<h6 class="text-center sm-font ml-2 font-weight-normal text-info">Contractos</h6>
								<h5 class="font-weight-1 text-center number-mask">{{$countContracts}}</h5>
							</div>
						</div>
					</div>
				</div>


			</div>
		</div>
	</section>
	<section class=" my-3">
		<div class=" bg-white py-3 container-fluid rounded shadow-sm">
			<div class="row">

				<div class="col-12 col-lg-8 pb-3">
					<div class="">
						<div class="border-bottom d-flex justify-content-between align-items-center py-3 mb-3">
							<h6 class="mb-0 sm-font">Estatísticas</h6>
							<div class="">

								<button class="btn btn-outline-info btn-next-chart sm-font rounded-x shadow-x  ">
									Seguinte
									<i class="material-icons mb-0 float-left mr-2 sm-font mt-1">chevron_right</i>
								</button>

							</div>
						</div>
						<div>
							<div class="">

								<div id="demo" class="carousel slide my-0" data-ride="carousel" data-interval="false">
									<div class="carousel-inner">
										<div class="carousel-item active">
											<div class="canvas-holder" style="width: 100%;">
												<div class="chartjs-size-monitor">
													<canvas id="myChart"></canvas>
												</div>
											</div>
										</div>
										<div class="carousel-item">
											<div class="canvas-holder" style="width: 100%;">
												<div class="chartjs-size-monitor">
													<canvas id="myChart2"></canvas>
												</div>
											</div>
										</div>
										<div class="carousel-item">
											<div class="canvas-holder" style="width: 100%;">
												<div class="chartjs-size-monitor">
													<canvas id="myChart3"></canvas>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>

				<div class="col-12 col-lg-4 pb-3 ">

					<div id="provinces-carousel" class="carousel slide my-0" data-ride="carousel" data-interval="false">
						<div class="carousel-inner">
							@php($qtdCounter = 0)
							@php($qtdCounter2 = 0)
							@php($total = 6)
							@php($i2 = 0)
							@for ($i = 0; $i < 3; $i++)
								<div class="carousel-item province {{($qtdCounter == 0? 'active' : '' )}}">
									<div id="specific-provinces-carousel" class="carousel slide my-0"
										 data-ride="carousel" data-interval="false">
										<div class="carousel-inner">
											@for (; $i2 < $total; $i2++)




												<div class="carousel-item {{($qtdCounter2 == 0? 'active' : '' )}}">
													<div class="">
														<div class="py-3 container-fluid d-flex align-items-center justify-content-between bg-light rounded-x border">
															<h6 class="text-center">{{$province_necessity[$i2]->province_name}}</h6>
															<button class="btn btn-outline-info btn-next-specific sm-font shadow-x rounded-x">
																Seguinte
																<i class="material-icons mb-0 float-left mr-2 sm-font mt-1">chevron_right</i>
															</button>
														</div>
														@if($province_necessity[$i2]->materials != null)
															@foreach($province_necessity[$i2]->materials as $material)
																<div class="d-flex justify-content-between align-items-center py-3 ">
																	<div class="material-seeker">
																		<div style="background: {{'#'.$material->color}};">
																			<p class="mb-0">{{(array_search($material,$province_necessity[$i2]->materials))+1}}</p>
																		</div>
																	</div>
																	<div class="border-x rounded-x px-3 py-2 sm-font d-flex align-items-center">
																		<h6 class="sm-font mr-2 mb-0">{{$material->material_name}}</h6>
																		|&nbsp;
																		<span class="number-mask">{{$material->necessities != false ? $material->necessities->cost ?? 0 : 0}}</span>&nbsp;AOA
																	</div>


																</div>
															@endforeach
														@else
															<div class="d-flex py-3 justify-content-center border">
																<h6 class="text-center"><i
																			class="float-left mr-2 fa fa-bookmark mt-1"></i>Provincia
																	sem programa</h6>
															</div>
														@endif

													</div>
												</div>



												@php($qtdCounter2 ++)

											@endfor
										</div>
									</div>
									@php($qtdCounter ++)
								</div>
								@php($i2=$total)
								@php($total+=6)
							@endfor


						</div>
					</div>

				</div>


			</div>
		</div>
	</section>
	@push("scripts")
		<script>
			$(".btn-next-chart").click(function () {
				$("#demo").carousel("next");
				$("#provinces-carousel").carousel("next");
				let pos = $("#provinces-carousel").find(".carousel-item.province").index($("#provinces-carousel").find(".carousel-item.province.active"));
				$("#provinces-carousel").find(".carousel-item.province").removeClass('active');
				$($("#provinces-carousel").find(".carousel-item.province").eq(pos)).find('.carousel-item').eq(0).removeClass('active');
				console.log($("#provinces-carousel").find(".carousel-item.province").eq(pos + 1));
				if (pos < $("#provinces-carousel").find(".carousel-item.province").length - 1) {

					$("#provinces-carousel").find(".carousel-item.province").eq(pos + 1).addClass('active');
					$($("#provinces-carousel").find(".carousel-item.province").eq(pos + 1)).find('.carousel-item').eq(0).addClass('active');
				} else {
					$("#provinces-carousel").find(".carousel-item.province").eq(0).addClass('active');
					$($("#provinces-carousel").find(".carousel-item.province").eq(0)).find('.carousel-item').eq(0).addClass('active');
				}
			});
			$(document).on('click', '.btn-next-specific', function () {
				let $parent = $(this).parent().parent().parent().parent().parent();
				console.log('pai', $parent);
				console.log("d", $($parent).find(".carousel-item").index($($parent).find(".carousel-item.active")));
				let pos = $($parent).find(".carousel-item").index($($parent).find(".carousel-item.active"));
				$($parent).find(".carousel-item").removeClass('active');
				if (pos < $($parent).find(".carousel-item").length - 1)
					$($parent).find(".carousel-item").eq(pos + 1).addClass('active');
				else
					$($parent).find(".carousel-item").eq(0).addClass('active');
			});
		</script>
		<script>
			var ctx = document.getElementById("myChart");
			var myChart = new Chart(ctx.getContext('2d'), {
				type: 'horizontalBar',
				data: {
					labels: [
						@php($qtdCounter = 0)

								@for ($i = 0; $i < 6; $i++)
							"{{$province_necessity[$i]->province_name }}"
						{{($qtdCounter < (6 -1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					],
					datasets: [
							@php($qtdCounter = 0)

							@for ($i = 0; $i < 6; $i++)
							@php($qtdCounter2 = 0)
						{

							data: [
								@foreach($province_necessity[$i]->materials as $material)
								{{$material->necessities != false ? $material->necessities->necessity : 0 }}
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach
							],
							backgroundColor: [
								@php($qtdCounter2 = 0)
										@foreach($province_necessity[$i]->materials as $material)
									"#{{$material->color}}"
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach

							],
							borderWidth: 1
						}
						{{($qtdCounter < (6 -1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					]
				},
				options: {
					legend: {
						display: false
					},
					tooltips: {
						callbacks: {
							label: function (tooltipItem) {
								return tooltipItem.yLabel;
							}
						}
					},
					responsive: true,
					scaleShowLabels: false,
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							}
						}],
						yAxes: [{
							ticks: {
								beginAtZero: true
							},
							gridLines: {
								display: false
							}
						}]
					},
					text: {
						display: true,
						text: 'Gráfico comparativo entre as necessidades de cada província e os items já disponibilizados'
					}
				}
			});
		</script>
		<script>
			var ctx2 = document.getElementById("myChart2");
			var myChart2 = new Chart(ctx2.getContext('2d'), {
				type: 'horizontalBar',
				data: {
					labels: [
						@php($qtdCounter = 0)

								@for ($i = 6; $i < 12; $i++)
							"{{$province_necessity[$i]->province_name }}"
						{{($qtdCounter < (12-1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					],
					datasets: [
							@php($qtdCounter = 0)

							@for ($i = 6; $i < 12; $i++)
							@php($qtdCounter2 = 0)
						{

							data: [
								@foreach($province_necessity[$i]->materials as $material)
								{{$material->necessities != false ? $material->necessities->necessity : 0 }}
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach
							],
							backgroundColor: [
								@php($qtdCounter2 = 0)
										@foreach($province_necessity[$i]->materials as $material)
									"#{{$material->color}}"
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach

							],
							borderWidth: 1
						}
						{{($qtdCounter < (12 -1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					]
				},
				options: {
					legend: {
						display: false
					},
					tooltips: {
						callbacks: {
							label: function (tooltipItem) {
								return tooltipItem.yLabel;
							}
						}
					},
					responsive: true,
					scaleShowLabels: false,
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							}
						}],
						yAxes: [{
							ticks: {
								beginAtZero: true
							},
							gridLines: {
								display: false
							}
						}]
					},
					text: {
						display: true,
						text: 'Gráfico comparativo entre as necessidades de cada província e os items já disponibilizados'
					}
				}
			});
		</script>
		<script>
			var ctx3 = document.getElementById("myChart3");
			var myChart3 = new Chart(ctx3.getContext('2d'), {
				type: 'horizontalBar',
				data: {
					labels: [
						@php($qtdCounter = 0)

								@for ($i = 12; $i < 18; $i++)
							"{{$province_necessity[$i]->province_name }}"
						{{($qtdCounter < (12-1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					],
					datasets: [
							@php($qtdCounter = 0)

							@for ($i = 12; $i < 18; $i++)
							@php($qtdCounter2 = 0)
						{

							data: [
								@foreach($province_necessity[$i]->materials as $material)
								{{$material->necessities != false ? $material->necessities->necessity : 0 }}
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach
							],
							backgroundColor: [
								@php($qtdCounter2 = 0)
										@foreach($province_necessity[$i]->materials as $material)
									"#{{$material->color}}"
								{{($qtdCounter2< count($province_necessity[$i]->materials) ? "," : "" )}}
								@php($qtdCounter2 ++)
								@endforeach

							],
							borderWidth: 1
						}
						{{($qtdCounter < (18-1) ? "," : "" )}}
						@php($qtdCounter ++)
						@endfor
					]
				},
				options: {
					legend: {
						display: false
					},
					tooltips: {
						callbacks: {
							label: function (tooltipItem) {
								return tooltipItem.yLabel;
							}
						}
					},
					responsive: true,
					scaleShowLabels: false,
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							}
						}],
						yAxes: [{
							ticks: {
								beginAtZero: true
							},
							gridLines: {
								display: false
							}
						}]
					},
					text: {
						display: true,
						text: 'Gráfico comparativo entre as necessidades de cada província e os items já disponibilizados'
					}
				}
			});

		</script>
		<!--<script src="views/admin/assets/js/main.js"></script>-->
	@endpush

@endsection