@extends('layouts.master_app')
@section('title') Nasa @endsection

@section('css')

@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">NASA
					<!--begin::Separator-->
					<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
					<!--end::Separator-->
					<!--begin::Description-->
					<small class="text-muted fs-7 fw-semibold my-1 ms-1"></small>
					<!--end::Description--></h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">
					
				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">
					
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>	
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->
	
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="nasaController">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			
			<!--begin::Row-->
			<div class="g-5 gx-xxl-8">
				<!--begin::Tables Widget 10-->
				<div class="card">
			
					<div class="content-box icon-box box-size-sm shadow active padding-0">
						<div id="mapSearch">
							<input id="addressPoint" class="form-control controls margin-top-10" type="text" style="width:50%; font-size:16px; height: 35px!important;" placeholder="Escribir dirección">
						</div>
						<div style="height: 450px;" id="map_solar_app"></div>
					</div>
				</div>
			</div>
			<form action="/obtener_datos_nasa" id="nasa" method="post">
			<!--begin::Row-->
			<div class="row gy-5 g-xl-8" style="margin-top: 10px">
				<!--begin::Col-->
				<div class="col-xl-4"  >
					<!--begin::Mixed Widget 3-->
					<div class="card card-xl-stretch mb-xl-8">
						<!--begin::Beader-->
						<div class="card-header border-0 py-5">
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold fs-3 mb-1"></span>
								<span class="text-muted fw-semibold fs-7"></span>
							</h3>
							
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body p-0 d-flex flex-column" >
							<!--begin::Stats-->
							<div class="card-p pt-5 bg-body flex-grow-1">
								<!--begin::Row-->
								<div class="row g-0">
									<!--begin::Col-->
									<div class="col mr-8">
										<!--begin::Label-->
										<div class="fs-7 text-muted fw-bold">Latitud</div>
										<!--end::Label-->
										<!--begin::Stat-->
										<div class="d-flex align-items-center">
											<div class="fs-4 fw-bold" id="_latitud">-</div>
										</div>
										<!--end::Stat-->
									</div>
									<!--end::Col-->
									<!--begin::Col-->
									<div class="col">
										<!--begin::Label-->
										<div class="fs-7 text-muted fw-bold">Insolación promedio a <em id="angulo_lugar"></em> </div>
										<!--end::Label-->
										<!--begin::Stat-->
										<div class="fs-4 fw-bold" name="insolacion_angulo_lugar">-</div>
										<!--end::Stat-->
									</div>
									<!--end::Col-->
								</div>
								<!--end::Row-->
								<!--begin::Row-->
								<div class="row g-0 mt-8">
									<!--begin::Col-->
									<div class="col mr-8">
										<!--begin::Label-->
										<div class="fs-7 text-muted fw-bold">Temperatura promedio mínima</div>
										<!--end::Label-->
										<!--begin::Stat-->
										<div class="fs-4 fw-bold" id="temp_minima" name="temp_minima">-</div>
										<!--end::Stat-->
									</div>
									<!--end::Col-->
									<!--begin::Col-->
									<div class="col">
										<!--begin::Label-->
										<div class="fs-7 text-muted fw-bold">Temperatura promedio máxima</div>
										<!--end::Label-->
										<!--begin::Stat-->
										<div class="d-flex align-items-center">
											<div class="fs-4 fw-bold" id="temp_maxima" name="temp_maxima"></div>
										</div>
										<!--end::Stat-->
									</div>
									<!--end::Col-->
								</div>
								<!--end::Row-->
							</div>
							<!--end::Stats-->
							
						</div>
						<!--end::Body-->
					</div>
					<!--end::Mixed Widget 3-->
				</div>
				<!--end::Col-->
				<!--begin::Col-->
				<div class="col-xxl-8" id="minimum_average">
					<!--begin::Tables Widget 9-->
					<div class="card card-xxl-stretch mb-5 mb-xl-8">
						<!--begin::Header-->
						<div class="card-header border-0 pt-5">
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold fs-3 mb-1"> Promedio mínimo y máximo de la temperatura media diaria de la tierra (°C)</span>
								<span class="text-muted mt-1 fw-semibold fs-7"></span>
							</h3>
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body py-3">
							<!--begin::Table container-->
							<div class="table-responsive">
								<!--begin::Table-->
								<table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
									<!--begin::Table head-->
									<thead>
										<tr class="fw-bold text-muted">
											<th class="w-25px"></th>
											<th class="">Ene</th>
											<th class="">Feb</th>
											<th class="">Mar</th>
											<th class="">Abr</th>
											<th class="">May</th>
											<th class="">Jun</th>
											<th class="">Jul</th>
											<th class="">Ago</th>
											<th class="">Sept</th>
											<th class="">Oct</th>
											<th class="">Nov</th>
											<th class="">Dic</th>
										</tr>
									</thead>
									<!--end::Table head-->
									<!--begin::Table body-->
									<tbody>
										<tr>
											<td> Máximas </td>
											<td  ng-repeat="item in data.temperaturas_maximas track by $index" > @{{ item }}</td>
										</tr>
										<tr>
											<td> Mínimas </td>
											<td  ng-repeat="item in data.temperaturas_minimas track by $index" > @{{ item }}</td>
										</tr>
										
									</tbody>
									<!--end::Table body-->
								</table>
								<!--end::Table-->
							</div>
							<!--end::Table container-->
						</div>
						<!--begin::Body-->
					</div>
					<!--end::Tables Widget 9-->
				</div>
				<!--end::Col-->
			</div>
			<!--end::Row-->

			<div class="row gy-5 g-xl-12" style="margin-top: 10px">
				<div class="col-xxl-12">
					<!--begin::Tables Widget 9-->
					<div class="card card-xxl-stretch mb-5 mb-xl-8">
						<!--begin::Header-->
						<div class="card-header border-0 pt-5">
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold fs-3 mb-1"> Parámetros para paneles solares inclinados:</span>
								<span class="text-muted mt-1 fw-semibold fs-7">Latitud: @{{latitud}} | Longitud: @{{longitud}} | Radiación promedio mensual incidente en una superficie inclinada apuntada por el ecuador (kWh/m<sup>2</sup>/día) </span>
							</h3>
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body py-3">
							<!--begin::Table container-->
							<div class="table-responsive">
								<!--begin::Table-->
								<table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
									<!--begin::Table head-->
									<thead>
										<tr class="fw-bold text-muted">
											<th class="w-150px"></th>
											<th class="">Ene</th>
											<th class="">Feb</th>
											<th class="">Mar</th>
											<th class="">Abr</th>
											<th class="">May</th>
											<th class="">Jun</th>
											<th class="">Jul</th>
											<th class="">Ago</th>
											<th class="">Sept</th>
											<th class="">Oct</th>
											<th class="">Nov</th>
											<th class="">Dic</th>
										</tr>
									</thead>
									<!--end::Table head-->
									<!--begin::Table body-->
									<tbody>
										<tr>
											<td> Ángulo LATITUD </td>
											<td  ng-repeat="al in data.insolacion track by $index" > @{{ al }}</td>
										</tr>
										<tr>
											<td> Ángulo HORIZONTAL </td>
											<td  ng-repeat="ah in data.angulo_horizontal track by $index" > @{{ ah }}</td>
										</tr>
										<tr>
											<td> Ángulo LATITUD -15° </td>
											<td  ng-repeat="latmenos15 in data.angulo_latmenos15 track by $index" > @{{ latmenos15 }}</td>
										</tr>
										<tr>
											<td> Ángulo LATITUD +15° </td>
											<td  ng-repeat="latmas15 in data.angulo_latmas15 track by $index" > @{{ latmas15 }}</td>
										</tr>
										<tr>
											<td> Ángulo VERTICAL </td>
											<td  ng-repeat="av in data.angulo_vertical track by $index" > @{{ av }}</td>
										</tr>
										<tr>
											<td> Radiación óptima </td>
											<td  ng-repeat="ro in data.radiacion_optima track by $index" > @{{ ro }}</td>
										</tr>
										<tr>
											<td> Ángulo óptimo </td>
											<td  ng-repeat="ao in data.angulo_optimo track by $index" > @{{ ao }}</td>
										</tr>
										
									</tbody>
									<!--end::Table body-->
								</table>
								<!--end::Table-->
							</div>
							<!--end::Table container-->
						</div>
						<!--begin::Body-->
					</div>
					<!--end::Tables Widget 9-->
				</div>
			</div>
			{{ csrf_field() }}
              <input id="lat" name="lat" type="hidden">
              <input id="long" name="long" type="hidden">
			</form>
			

		</div>
		<!--end::Container-->

		

	</div>
@endsection

@section('js')

<script src="/assets/app/plugins/custom/chart/Chart.bundle.js"></script>
<script src="/assets/app/plugins/custom/chart/chartjs-plugin-datalabels.js"></script>
<script src="/assets/app/plugins/custom/chart/utils.js"></script>



@endsection