@extends('admin.layouts.main')

@section('content')
<style>
	.hpanel-header-color {
	 background: #657f8459 !important;
	 color: black !important;
	}
	div.dataTables_filter {
		text-align: end !important;
	}
	div.dataTables_filter input{
		font-weight: normal !important;
	}
	.square-ventas {
		height: 10px;
		width: 10px;
		display: inline-block;
		background: rgba(101, 203, 52, 1);
	}
	.square-guias {
		height: 10px;
		width: 10px;
		display: inline-block;
		background: rgba(82, 178, 220, 1);
	}

	.square-efectividad {
		height: 10px;
		width: 10px;
		display: inline-block;
		background: rgba(255, 183, 5, 1);
	}

	.square-aceptada {
		height: 10px;
		width: 10px;
		display: inline-block;
		background: rgba(204, 204, 204, 1);
	}

	.square-concluida {
		height: 10px;
		width: 10px;
		display: inline-block;
		background: rgba(255, 182, 6, 1);
	}

	.vertical-class {
		vertical-align: middle !important; 
		text-align: center; 
	}

	.mes-table1 {
		background: #657f84; 
		color:#fff;
	}

	.table2-width-40 {
		width: 40%;
	}

	.table3-width-25 {
		width: 25%;
	}

	.font-bold {
		font-weight: bold !important;
	}

	@media only screen and (max-width: 1280px) {
		#btn-excel3 {
			padding: 6px;
		}
	}

	@media only screen and (min-width: 1900px) {
		.col-md-3:last-of-type .form-group.form-group-sm {
			padding-top: 6% !important;
		}
	}

</style>

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>
            <h2 class="font-light m-b-xs">
				<i class="fa fa-folder-open"></i>
                Dashboard - Mi Gu&iacute;a Ford
            </h2>
            <small></small>
        </div>
    </div>
</div>


<div class="content animate-panel">

<!-- Seccion 1 -->
	<div class="row">
		<!-- Data Part 1 -->
		<div class="col-md-12">
			<div class="hpanel">
				<div class="panel-body">					
						<h2 class="text-center text-success">Resumen Mes Actual</h2>
						<!-- Filtros  -->
						<div class="col-md-12">
							@if(count($concesionarios) > 1)
							<h5 style="text-align: center;">Filtros</h5>
							@endif
							<form id="citasForm" data-toggle="validator" role="form">
								<div class="row">
									{{-- 
										<div class="col-md-2">
											<div class="form-group form-group-sm">
												<label for="ano">Año</label>
												<select id="ano" name="ano[]" class="form-control select2"  multiple>
													@foreach($filterYear as $year)	
														<option value="{{$year}}">{{$year}}</option>
													@endforeach
												</select>
											</div>	
										</div>
										<div class="col-md-3">
											<div class="form-group form-group-sm">
												<label for="mes">Mes</label>
												<select id="mes" name="mes[]" class="form-control select2"  multiple>
													@foreach($filterMonth as $month)	
														<option value="{{$month}}">{{$month}}</option>
													@endforeach
												</select>
											</div>	
										</div> 
									--}}
									@if(count($concesionarios) > 1)
									<div class="col-md-12">
										<div class="form-group form-group-sm">
											<label for="concesionario">Concesionario</label>
											<select id="concesionario" name="concesionario[]" class="form-control select2"  multiple>
													<option value="1">Ver Todo</option>
												@foreach($concesionarios as $concesionario)
													<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
												@endforeach
											</select>
										</div>	
									</div>
									<div class="col-md-12">
										<div style="padding-bottom: 3%;" class="form-group form-group-sm vertical-class">
											<button type="submit" id="btn-consulta" class="btn btn-success">
												Consultar
											</button>
										</div>
									</div>
									@endif
								</div>

							</form>
						</div>	
						@if($current_user->rol == 'concesionario')
							{{-- <div class="col-md-5" style="padding-top: 5%;">
								<div id="table1">
									<table class="table table-bordered text-center" style="width: 100%;" id="table-section1">
										<thead>
											<tr>
												<th></th>
												<th style="width: 30%;background: #65cb34; color:#fff; vertical-align: middle !important; text-align: center;">Total Ventas</th>
												<th style="width: 30%;background: #52b2dc; color:#fff; vertical-align: middle !important; text-align: center;">Total Guías</th>
												<th style="width: 30%;background: #e67e22; color:#fff; vertical-align: middle !important; text-align: center;">% Efectividad Guías</th>
											</tr>
										</thead>
										<tbody>
											@foreach($dealerSection1 as $dealer)
											<tr>
												<td class="mes-table1">{{$dealer['mes']}}</td>
												<td>{{$dealer['ventas']}}</td>
												<td>{{$dealer['guias']}}</td>
												<td>{{$dealer['efectividad']}}</td>
											</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div> --}}
						@endif
						@if($current_user->rol == 'admin')
							{{-- Table 1 --}}
							{{-- <div class="col-md-5" style="padding-top: 5%;">
								<div id="table1">
									<table class="table table-bordered text-center" style="width: 100%;" id="table-section1">
										<thead>
											<tr>
												<th style=""></th>
												<th style="width: 30%;background: #65cb34; color:#fff; vertical-align: middle !important; text-align: center;">Total Ventas</th>
												<th style="width: 30%;background: #52b2dc; color:#fff; vertical-align: middle !important; text-align: center;">Total Guías</th>
												<th style="width: 30%;background: #e67e22; color:#fff; vertical-align: middle !important; text-align: center;">% Efectividad Guías</th>
											</tr>
										</thead>
										<tbody>
											@foreach($fordSection1 as $ford)
												<tr>
													<td class="mes-table1">{{$ford['mes']}}</td>
													<td>{{$ford['ventas']}}</td>
													<td>{{$ford['guias']}}</td>
													<td>{{$ford['efectividad']}}</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div> --}}
								
						@endif

					<!-- Grafic -->
						<div class="col-md-12">
							<h3 class="text-center text-success">Guías Creadas VS Ventas <small><br> 6 Ultimos Meses</small> </h3>
							<canvas id="section1"></canvas>
							<div id="table-section1-graph">
								@if($current_user->rol == 'admin')
									<table class="table table-condensed" style="width: 100%;" id="graph-section1">
										<tr>
											<td></td>
											@for ($i = 0; $i < count($lastMonths); $i++)
												@if($i != count($lastMonths)-1)	
													<td class="vertical-class">{{$lastMonths[$i]}}</td>
												@endif
													@if($i == count($lastMonths)-1)
													<td class="vertical-class"><b>{{$lastMonths[$i]}}</b></td>
												@endif
											@endfor
												<td class="vertical-class"><b>{{$fordSection1[count($fordSection1)-1]['mes']}}</b></td>
										</tr>
										<tr>
											<td style="width: 20%;"> <div class="square-ventas vertical-class" style=""></div> Total Ventas </td>
											@foreach($barChart[1] as $venta)
												<td class="vertical-class">{{$venta}}</td>
											@endforeach
											<td class="vertical-class"><b>{{$fordSection1[count($fordSection1)-1]['ventas']}}</b></td>
										</tr>
										<tr>
											<td> <div class="square-guias vertical-class" style=""></div> Total Guias</td>
											@foreach($barChart[0] as $guia)
												<td class="vertical-class">{{$guia}}</td>
											@endforeach
											<td class="vertical-class"><b>{{$fordSection1[count($fordSection1)-1]['guias']}}</b></td>
										</tr>
										<tr>
											<td> <div class="square-efectividad vertical-class"></div> Total Efectividad</td>
											@foreach($barChart[2] as $efect)
												<td class="vertical-class">{{$efect}}%</td>
											@endforeach
											<td class="vertical-class"><b>{{$fordSection1[count($fordSection1)-1]['efectividad']}}</b></td>
										</tr>
									</table>
								@endif

								@if($current_user->rol == 'concesionario')
									<table class="table table-condensed" style="width: 100%;" id="graph-section1">
										<tr>
											<td></td>
											@for ($i = 0; $i < count($lastMonths); $i++)
												@if($i != count($lastMonths)-1)	
													<td class="vertical-class">{{$lastMonths[$i]}}</td>
												@endif
													@if($i == count($lastMonths)-1)
													<td class="vertical-class"><b>{{$lastMonths[$i]}}</b></td>
												@endif
											@endfor
												<td class="vertical-class"><b>{{$dealerSection1[count($dealerSection1)-1]['mes']}}</b></td>
										</tr>
										<tr>
											<td style="width: 20%;"> <div class="square-ventas vertical-class" style=""></div> Total Ventas </td>
											@foreach($barChart[1] as $venta)
												<td class="vertical-class">{{$venta}}</td>
											@endforeach
											<td class="vertical-class"><b>{{$dealerSection1[count($dealerSection1)-1]['ventas']}}</b></td>
										</tr>
										<tr>
											<td> <div class="square-guias vertical-class" style=""></div> Total Guias</td>
											@foreach($barChart[0] as $guia)
												<td class="vertical-class">{{$guia}}</td>
											@endforeach
											<td class="vertical-class"><b>{{$dealerSection1[count($dealerSection1)-1]['guias']}}</b></td>
										</tr>
										<tr>
											<td> <div class="square-efectividad vertical-class"></div> Total Efectividad</td>
											@foreach($barChart[2] as $efect)
												<td class="vertical-class">{{$efect}}%</td>
											@endforeach
											<td class="vertical-class"><b>{{$dealerSection1[count($dealerSection1)-1]['efectividad']}}</b></td>
										</tr>
									</table>
								@endif
							</div>
						</div>

						
					

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


<!-- SECCION 2 -->
	<div class="row">
		<div class="col-md-12">
			<div class="hpanel">
				<div class="panel-body">

					<!-- FIRST TABLE -->
					<div class="col-md-12" style="padding: 0px;">

						@if($current_user->rol == 'concesionario')
						<h2 class="text-center text-success">Detalle De Ejecutivo Por Mes</h2>
						@elseif($current_user->rol == 'admin')
							<h2 class="text-center text-success">Detalle De Concesionarios Por Mes</h2>
						@endif
						<!-- Filtros -->
						<div class="col-md-3">
							<h5 style="text-align: center;">Filtros</h5>
							<form id="Form2" role="form">
								<div class="row">
									<div class="col-md-12">
										<div class="form-group form-group-sm">
											<label for="anos">Año</label>
											<select id="anos" name="anos[]" class="form-control select2"  multiple>
												@foreach($filterYear as $year)	
													<option value="{{$year}}">{{$year}}</option>
												@endforeach
											</select>
										</div>	
									</div>
									<div class="col-md-12">
										<div class="form-group form-group-sm">
											<label for="meses">Mes</label>
											<select id="meses" name="meses[]" class="form-control select2"  multiple>
													<option value="0">Ver Todo</option>
												@foreach($filterMonth as $month)	
													<option value="{{$month}}">{{$month}}</option>
												@endforeach
											</select>
										</div>	
									</div>
									@if($current_user->rol == 'admin')
									<div class="col-md-12">
										<div class="form-group form-group-sm">
											<label for="zone2">Zona</label>
											<select id="zone2" name="zone2[]" class="form-control select2"  multiple>
												<option value="0">Ver Todo</option>
												@foreach($zones as $zone)	
													<option value="{{$zone->id}}">{{$zone->name}}</option>
												@endforeach
											</select>
										</div>	
									</div>
									@endif
									@if(count($concesionarios) > 1)
										<div class="col-md-12">
											<div class="form-group form-group-sm">
												<label for="concesionarios">Concesionario</label>
												<select id="concesionarios" name="concesionarios[]" class="form-control select2"  multiple>
													<option value="1">Ver Todo</option>
													@foreach($concesionarios as $concesionario)
														<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
													@endforeach
												</select>
											</div>	
										</div>
									@endif
									<div class="col-md-12">
										<div style="padding-top: 7%; text-align: center;" class="form-group form-group-sm">
											<button type="submit" id="btn-consulta2" class="btn btn-success">
												Consultar
											</button>
											<a href="" id="btn-excel2" type="button" class="btn btn-primary" >Descargar Excel</a>
										</div>
									</div>
								</div>

							</form>
						</div>	
						@if($current_user->rol == 'concesionario')
							<div class="col-md-9">
								<div class="alert alert-warning" id="no-info2">
									No hay información disponible.
								</div>
								<!-- Table section2 -->
								<div id="table2">
									<table class="table table-bordered"  id="detalle-table-dealer">
										<thead>
											<tr>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; width: 40%; background-color: #657f84; color: #fff;">Ejecutivo</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Guía Creadas</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #64cb33; color: #fff;">Total Ventas</th>
											</tr>
										</thead>	
										<tbody>
										@foreach($queries as $concesionario)
											@if($concesionario->nombre != 'Total')
												<tr>
													<td style="vertical-align: middle !important; text-align: center;width:40%">{{$concesionario->nombre}}</td>
													<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->creada}}</td>
													<td style="vertical-align: middle !important; text-align: center;">---</td>
												</tr>
											@endif
										@endforeach
										</tbody>
										<tfoot id="tfooter-section2-concesionario">
											<tr>
												<td class="vertical-class font-bold"> TOTAL </td>
												<td class="vertical-class font-bold">{{$dealerSection1[0]['guias']}}</td>
												<td class="vertical-class font-bold">{{$dealerSection1[0]['ventas']}}</td>
											</tr>
										</tfoot>
									</table>
								</div>
							</div>
						@elseif($current_user->rol == 'admin')
							<div class="col-md-9" style="padding-top: 1%;">
								<div class="alert alert-warning" id="no-info2">
									No hay información disponible.
								</div>
								<!-- Table section2 -->
								<div id="table2">
									<table class="table table-bordered"  id="detalle-table">
										<thead>
											<tr>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; width: 40%; background-color: #657f84; color: #fff;">Concesionarios</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #64cb33; color: #fff;">Total Ventas</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #52b2dc; color: #fff;"># Guía Creadas</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: rgba(255, 183, 5, 1); color: #fff;">% de efectividad</th>
											</tr>
										</thead>	
										<tbody>
										@foreach($queries as $concesionario)
											<tr>
												<td class="vertical-class table2-width-40">{{$concesionario->nombre}}</td>
												<td class="vertical-class" style="">{{$concesionario->sales}}</td>
												<td class="vertical-class" style="">{{$concesionario->creada}}</td>
												<td class="vertical-class" style="">{{$concesionario->efec}}</td>
											</tr>
										@endforeach
										</tbody>
										<tfoot id="tfooter-section2-admin">
											<tr>
												<td class="vertical-class font-bold"> TOTAL </td>
												<td class="vertical-class font-bold">{{$fordSection1[0]['ventas']}}</td>
												<td class="vertical-class font-bold">{{$fordSection1[0]['guias']}}</td>
												<td class="vertical-class font-bold">{{$fordSection1[0]['efectividad']}}</td>
											</tr>
										</tfoot>
									</table>
								</div>
							</div>
					</div><!-- END FIRST TABLE -->
			
						<!-- SECOND TABLE -->
						<div class="col-md-12" style="margin: 35px 0px; padding: 0px;">
							<!-- FILTER DATA PER USER -->
							<h2 class="text-center text-success" style="margin-bottom: 25px;">Detalle De Ejecutivo Por Mes</h2>
							<div class="col-md-3">
								<h5 style="text-align: center;">Filtros</h5>
								<form id="Form2b" role="form">
									<div class="row">
										<div class="col-md-12">
											<div class="form-group form-group-sm">
												<label for="anos">Año</label>
												<select id="anos1b" name="anos[]" class="form-control select2"  multiple>
													@foreach($filterYear as $year)	
														<option value="{{$year}}">{{$year}}</option>
													@endforeach
												</select>
											</div>	
										</div>
										<div class="col-md-12">
											<div class="form-group form-group-sm">
												<label for="meses">Mes</label>
												<select id="meses1b" name="meses[]" class="form-control select2"  multiple>
														<option value="0">Ver Todo</option>
													@foreach($filterMonth as $month)	
														<option value="{{$month}}">{{$month}}</option>
													@endforeach
												</select>
											</div>	
										</div>
										<div class="col-md-12">
											<div class="form-group form-group-sm">
												<label for="zone2">Zona</label>
												<select id="zone2b" name="zone2[]" class="form-control select2"  multiple>
													<option value="0">Ver Todo</option>
													@foreach($zones as $zone)	
														<option value="{{$zone->id}}">{{$zone->name}}</option>
													@endforeach
												</select>
											</div>	
										</div>
										@if(count($concesionarios) > 1)
											<div class="col-md-12">
												<div class="form-group form-group-sm">
													<label for="concesionarios">Concesionario</label>
													<select id="concesionarios1b" name="concesionarios[]" class="form-control select2"  multiple>
														<option value="1">Ver Todo</option>
														@foreach($concesionarios as $concesionario)
															<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
														@endforeach
													</select>
												</div>	
											</div>
										@endif
										<div class="col-md-12">
											<div style="padding-top: 7%; text-align: center;" class="form-group form-group-sm">
												<button type="submit" id="btn-consulta2b" class="btn btn-success">
													Consultar
												</button>
												<a href="" id="btn-excel2b" type="button" class="btn btn-primary" >Descargar Excel</a>
											</div>
										</div>
									</div>

								</form>
							</div>		

							<!-- DATA PER USER -->
							<div class="col-md-9">
								<div class="alert alert-warning" id="no-info2b">
									No hay información disponible.
								</div>
								<!-- Table section2 -->
								<div id="table2b">
									<table class="table table-bordered"  id="detalle-table-dealer">
										<thead>
											<tr>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; width: 40%; background-color: #657f84; color: #fff;">Ejecutivo</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Guía Creadas</th>
												<th class="text-center" style="vertical-align: middle !important; text-align: center; background-color: #64cb33; color: #fff;">Total Ventas</th>
											</tr>
										</thead>	
										<tbody>
										@foreach($queries2 as $concesionario)
											@if($concesionario->nombre != 'Total')
												<tr>
													<td style="vertical-align: middle !important; text-align: center;width:40%">{{$concesionario->nombre}}</td>
													<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->creada}}</td>
													<td style="vertical-align: middle !important; text-align: center;">---</td>
												</tr>
											@endif
										@endforeach
										</tbody>
										<tfoot id="tfooter-section2-concesionario">
											<tr>
												<td class="vertical-class font-bold"> TOTAL </td>
												<td class="vertical-class font-bold">{{$dealerSection1[0]['guias']}}</td>
												<td class="vertical-class font-bold">{{$dealerSection1[0]['ventas']}}</td>
											</tr>
										</tfoot>
									</table>
								</div>
							</div>
						</div><!-- END SECOND TABLE -->
	
					@endif

					{{-- Mixed Graphs --}}
					@if($current_user->rol == 'admin')
						<div class="row">
							<div class="col-md-12">
								<!-- Central Mixed -->
								<div class="hpanel collapsed panel-collapse" id="mixedC">
										<div class="panel-heading hbuilt hpanel-header-color" >
												<div class="panel-tools">
														<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
												</div>
												Zona Centro
										</div>
										<div class="panel-body" style="display:none;">
											<div class="row" >
												<div class="col-md-12">
													<div class="hpanel">
														<div class="panel-body" style="display:none;">
															<h2 class="text-center text-success">Zona Centro</h2>
															<canvas id="central-graph"></canvas>
															{{-- <table class="table table condensed" style="width: 100%" id="mixedChart-centro">
																<tr>
																	<td></td>
																	@foreach($mixedChart[0][0] as  $guia)
																	<td>ARCS</td>
																	@endforeach
																</tr>
																<tr>
																	<td style="width:15%"> <div class="square-guias"></div> # Guias</td>
																	@foreach($mixedChart[0][0] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-ventas"></div> Total Ventas</td>
																	@foreach($mixedChart[0][1] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-efectividad"></div> % Efectividad</td>
																	@foreach($mixedChart[0][3] as  $guia)
																	<td>{{$guia}}%</td>
																	@endforeach
																</tr>
															</table> --}}
														</div>
													</div>
												</div>
											</div>
										</div>
								</div>

								<!-- Norte Mixed -->
								<div class="hpanel collapsed panel-collapse" id="mixedN">
										<div class="panel-heading hbuilt hpanel-header-color" >
												<div class="panel-tools">
														<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
												</div>
												Zona Norte
										</div>
										<div class="panel-body" style="display:none;">
											<div class="row" >
												<div class="col-md-12">
													<div class="hpanel">
														<div class="panel-body" style="display:none;">
															<h2 class="text-center text-success">Zona Norte</h2>
															<canvas id="norte-graph"></canvas>
															{{-- <table class="table table condensed" style="width: 100%" id="mixedChart-norte">
																<tr>
																	<td style="width:15%"> <div class="square-guias"></div> # Guias</td>
																	@foreach($mixedChart[1][0] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-ventas"></div> Total Ventas</td>
																	@foreach($mixedChart[1][1] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-efectividad"></div> % Efectividad</td>
																	@foreach($mixedChart[1][3] as  $guia)
																	<td>{{$guia}}%</td>
																	@endforeach
																</tr>
															</table> --}}
														</div>
													</div>
												</div>
											</div>
										</div>
								</div>

								<!-- Occidental Mixed -->
								<div class="hpanel collapsed panel-collapse" id="mixedSW">
										<div class="panel-heading hbuilt hpanel-header-color" >
												<div class="panel-tools">
														<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
												</div>
												Zona Occidente
										</div>
										<div class="panel-body" style="display:none;">
											<div class="row" >
												<div class="col-md-12">
													<div class="hpanel">
														<div class="panel-body" style="display:none;">
															<h2 class="text-center text-success">Zona Occidente</h2>
															<canvas id="occidente-graph"></canvas>
															{{-- <table class="table table condensed" style="width: 100%" id="mixedChart-sw">
																<tr>
																	<td style="width:15%"> <div class="square-guias"></div> # Guias</td>
																	@foreach($mixedChart[2][0] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-ventas"></div> Total Ventas</td>
																	@foreach($mixedChart[2][1] as  $guia)
																	<td>{{$guia}}</td>
																	@endforeach
																</tr>
																<tr>
																	<td> <div class="square-efectividad"></div> % Efectividad</td>
																	@foreach($mixedChart[2][3] as  $guia)
																	<td>{{$guia}}%</td>
																	@endforeach
																</tr>
															</table> --}}
														</div>
													</div>
												</div>
											</div>
										</div>
								</div>
							</div>
						</div>
					@endif
				</div>
			</div>
		</div>
	</div>	

<!-- SECCION 3 -->
	<div class="row m-b-xl">
		<div class="col-md-12">

			<div class="hpanel">
				<div class="panel-body">	
					<div class="col-md-12">
						@if($current_user->rol == 'admin')
						<h2 class="text-success text-center">Estado General Por Concesionario</h2>
						@elseif($current_user->rol == 'concesionario')
						<h2 class="text-center text-success">Estado General Por Ejecutivo</h2>
						@endif
						<!-- Filtros -->
						<h5 style="text-align: center;">Filtros</h5>
						<form id="Form3" role="form">
							<div class="row">
								<div class="col-md-2">
									<div class="form-group form-group-sm">
										<label for="ano3">Año</label>
										<select id="ano3" name="ano3[]" class="form-control select2"  multiple>
											@foreach($filterYear as $year)	
												<option value="{{$year}}">{{$year}}</option>
											@endforeach
										</select>
									</div>	
								</div>
								<div class="col-md-2">
									<div class="form-group form-group-sm">
										<label for="mes3">Mes</label>
										<select id="mes3" name="mes3[]" class="form-control select2" multiple>
                      <option value="0">Ver Todo</option>
											@foreach($filterMonth as $month)	
												<option value="{{$month}}">{{$month}}</option>
											@endforeach
										</select>
									</div>	
								</div>
								@if($current_user->rol == 'admin')
									<div class="col-md-2">
										<div class="form-group form-group-sm">
											<label for="zone3">Zona</label>
											<select id="zone3" name="zone3[]" class="form-control select2"  multiple>
												<option value="0">Ver Todo</option>
												@foreach($zones as $zone)	
													<option value="{{$zone->id}}">{{$zone->name}}</option>
												@endforeach
											</select>
										</div>	
									</div>
								@endif
								@if(count($concesionarios) > 1)
									<div class="col-md-3">
										<div class="form-group form-group-sm">
											<label for="concesionario3">Concesionario</label>
											<select id="concesionario3" name="concesionarios[]" class="form-control select2"  multiple>
												<option value="1">Ver Todo</option>
												@foreach($concesionarios as $concesionario)
													<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
												@endforeach
											</select>
										</div>	
									</div>
								@endif
								<div class="col-md-3">
									<div class="form-group form-group-sm" style="padding-top: 9%;">
										<button type="submit" id="btn-consulta3" class="btn btn-success" >
											Consultar
										</button>
										<a href="" id="btn-excel3" type="button" class="btn btn-primary" >Descargar Excel</a>
									</div>
								</div>
							</div>

						</form>
					</div>	
					<!-- Fin filtros -->
					<div class="col-md-12">
						@if($current_user->rol == 'concesionario')
							<div class="alert alert-warning" id="no-info3">
								No hay información disponible.
							</div>
							<div id="table3">
								<table class="table table-bordered"  id="ejecutivo-table">
									<thead>
										<tr>
											<th style="vertical-align: middle !important; text-align: center; width: 25%; background-color: #657f84; color: #fff;">Ejecutivo</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #016eac; color: #fff;"># Creada</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #016eac; color: #fff;"># Pendiente</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #016eac; color: #fff;"># Aceptada</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #016eac; color: #fff;"># Concluida</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #016eac; color: #fff;"># Segunda</th>
											<th style="vertical-align: middle !important; text-align: center; width: 8%; background-color: #64cb33; color: #fff;">Total Registros</th>
										</tr>
									</thead>	
									<tbody>
									@foreach($queries as $ejecutivo)
										<tr>
											<td class="vertical-class table3-width-25" style="width:25%">{{$ejecutivo->nombre}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->guia}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->pendiente}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->aceptada}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->concluida}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->segunda}}</td>
											<td class="vertical-class" style="width:10%">{{$ejecutivo->total}}</td>
										</tr>
									@endforeach
									</tbody>
									<tfoot id="tfooter-section3-concesionario">
										<tr>
											<td class="font-bold vertical-class table3-width-25" style="width:25%">{{$totalSection3['nombre']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['guia']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['pendiente']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['aceptada']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['concluida']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['segunda']}}</td>
											<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['total']}}</td>
										</tr>
									</tfoot>
								</table>
							</div>
						@elseif($current_user->rol == 'admin')
							<div class="alert alert-warning" id="no-info3">
								No hay información disponible.
							</div>
							<div id="table3">
								<table class="table table-bordered"  id="concesionario-table">
										<thead>
											<tr>
												<th style="width: 25%; vertical-align: middle !important; text-align: center; background-color: #657f84; color: #fff;">Concesionarios</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Creada</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Pendiente</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Aceptada</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Concluida</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #016eac; color: #fff;"># Segunda</th>
												<th style="width: 8%; vertical-align: middle !important; text-align: center; background-color: #64cb33; color: #fff;">TOTAL Registros</th>
											</tr>
										</thead>	
										<tbody>
										@foreach($queries as $concesionario)
											<tr>
												<td style="vertical-align: middle !important; text-align: center;width:25%">{{$concesionario->nombre}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->guia}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->pendiente}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->aceptada}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->concluida}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->segunda}}</td>
												<td style="vertical-align: middle !important; text-align: center;">{{$concesionario->total}}</td>
											</tr>
										@endforeach
										</tbody>
										<tfoot id="tfooter-section3-admin">
											<tr>
												<td class="font-bold vertical-class table3-width-25" style="width:25%">{{$totalSection3['nombre']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['guia']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['pendiente']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['aceptada']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['concluida']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['segunda']}}</td>
												<td class="font-bold vertical-class" style="width:10%">{{$totalSection3['total']}}</td>
											</tr>
										</tfoot>
									</table>
							</div>
						@endif

						<div class="hpanel collapsed panel-collapse" id="stacledM">
								<div class="panel-heading hbuilt hpanel-header-color">
										<div class="panel-tools">
												<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
										</div>
										Zona Centro
								</div>
								<div class="panel-body" style="display:none;">
									<!-- Central Stacked -->
									<div class="row" >
										<div class="col-md-12">
											<div class="hpanel">
												<div class="panel-body" style="display:none;">
													<h2 class="text-center text-success">Zona Centro</h2>
													<canvas id="central-stacked"></canvas>
													{{-- 
														<table class="table table condensed" style="width: 100%" id="stackedChart-centro">
															<tr>
																<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
																@foreach ($stackedChart[0][1] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
																@foreach ($stackedChart[0][2] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
																@foreach ($stackedChart[0][3] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
																@foreach ($stackedChart[0][4] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
																@foreach ($stackedChart[0][5] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
														</table> 
													--}}
												</div>
											</div>
										</div>
									</div>
								</div>
						</div>
				
						<div class="hpanel collapsed panel-collapse" id="stacledN">
								<div class="panel-heading hbuilt hpanel-header-color">
										<div class="panel-tools">
												<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
										</div>
										Zona Norte
								</div>
								<div class="panel-body" style="display:none;">
									<!-- Norte Stacked -->
									<div class="row">
										<div class="col-md-12">
											<div class="hpanel">
												<div class="panel-body" style="display:none;">
													<h2 class="text-center text-success">Zona Norte</h2>
													<canvas id="norte-stacked"></canvas>
													{{-- 
														<table class="table table condensed" style="width: 100%" id="stackedChart-norte">
															<tr>
																<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
																@foreach ($stackedChart[1][1] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
																@foreach ($stackedChart[1][2] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
																@foreach ($stackedChart[1][3] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
																@foreach ($stackedChart[1][4] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
																@foreach ($stackedChart[1][5] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
														</table> 
													--}}
												</div>
											</div>
										</div>
									</div>
								</div>
						</div>
				
						<div class="hpanel collapsed panel-collapse" id="stacledSW">
								<div class="panel-heading hbuilt hpanel-header-color" >
										<div class="panel-tools">
												<a class="showhide"><i class="fa fa-chevron-down" style="color: #000000 !important;"></i></a>
										</div>
										Zona Occidente
								</div>
								<div class="panel-body" style="display:none;">
									<!-- Occidental Stacked -->
									<div class="row" >
										<div class="col-md-12">
											<div class="hpanel">
												<div class="panel-body" style="display:none;">
													<h2 class="text-center text-success">Zona Occidente</h2>
													<canvas id="occidente-stacked"></canvas>
													{{-- 
														<table class="table table condensed" style="width: 100%" id="stackedChart-sw">
															<tr>
																<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
																@foreach ($stackedChart[2][1] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
																@foreach ($stackedChart[2][2] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
																@foreach ($stackedChart[2][3] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
																@foreach ($stackedChart[2][4] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
															<tr>
																<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
																@foreach ($stackedChart[2][5] as $item)
																		<td> {{$item}} </td>
																@endforeach
															</tr>
														</table>
													--}}
												</div>
											</div>
										</div>
									</div>
								</div>
						</div>
					</div>					
				</div>
			</div>
		</div>

		
	</div>

	{{-- 
		<!-- Central Stacked -->
		<div class="row" id="stacledM">
			<div class="col-md-12">
				<div class="hpanel">
					<div class="panel-body">
						<h2 class="text-center text-success">Zona Centro</h2>
						<canvas id="central-stacked"></canvas>
						<table class="table table condensed" style="width: 100%" id="stackedChart-centro">
							<tr>
								<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
								@foreach ($stackedChart[0][1] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
								@foreach ($stackedChart[0][2] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
								@foreach ($stackedChart[0][3] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
								@foreach ($stackedChart[0][4] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
								@foreach ($stackedChart[0][5] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Norte Stacked -->
		<div class="row" id="stacledN">
			<div class="col-md-12">
				<div class="hpanel">
					<div class="panel-body">
						<h2 class="text-center text-success">Zona Norte</h2>
						<canvas id="norte-stacked"></canvas>
						<table class="table table condensed" style="width: 100%" id="stackedChart-norte">
							<tr>
								<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
								@foreach ($stackedChart[1][1] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
								@foreach ($stackedChart[1][2] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
								@foreach ($stackedChart[1][3] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
								@foreach ($stackedChart[1][4] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
								@foreach ($stackedChart[1][5] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Occidental Stacked -->
		<div class="row" id="stacledSW">
			<div class="col-md-12">
				<div class="hpanel">
					<div class="panel-body">
						<h2 class="text-center text-success">Zona Occidente</h2>
						<canvas id="occidente-stacked"></canvas>
						<table class="table table condensed" style="width: 100%" id="stackedChart-sw">
							<tr>
								<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
								@foreach ($stackedChart[2][1] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
								@foreach ($stackedChart[2][2] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
								@foreach ($stackedChart[2][3] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
								@foreach ($stackedChart[2][4] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
							<tr>
								<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
								@foreach ($stackedChart[2][5] as $item)
										<td> {{$item}} </td>
								@endforeach
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div> 
	--}}

</div>

@endsection


@section('css')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/styles/chart.css"/>
@endsection

@section('scripts')
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/chart.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		getExcel2()
		getExcel2b()
		getExcel3()
		var month = {!! json_encode($currentMonth) !!}
		var ano = {!! json_encode($currentYear) !!}
		$('#zone3').val(0)
		$('#zone2').val(0)
		$('#zone2b').val(0)
		$('#concesionario').val(1)
		$('#concesionarios').val(1)
		$('#concesionarios1b').val(1)
		$('#concesionario3').val(1)
		$('#anos').val(ano)
		$('#anos1b').val(ano)
		$('#ano3').val(ano)
		$('#ano').val(ano)
		$('#meses').val(month)
		$('#meses1b').val(month)
		$('#mes').val(month)
		$('#mes3').val(month)

		$('#zone2').change(getExcel2)
		$('#concesionarios').change(getExcel2)
		$('#anos').change(getExcel2)
		$('#meses').change(getExcel2)

		$('#zone2b').change(getExcel2b)
		$('#concesionarios1b').change(getExcel2b)
		$('#anos1b').change(getExcel2b)
		$('#meses1b').change(getExcel2b)

		$('#concesionario3').change(getExcel3)
		$('#ano3').change(getExcel3)
		$('#zone3').change(getExcel3)
		$('#mes3').change(getExcel3)

		role = {!! json_encode($current_user->rol) !!}

		$(".select2").select2({ width: '100%' })

    // clean the options selected if choose it 'Ver Todo' option
    $("#concesionario").on('select2:select', function(event) {
      if ($(this).val().includes('1')) {
        $(this).val('').trigger('change');
        $(this).val('1').trigger('change');
      }
    });
    $("#meses").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      }
    });
    $("#meses1b").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      }
    });
    $("#zone2").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      } 
    });
    $("#zone2b").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      } 
    });
    $("#concesionarios").on('select2:select', function(event) {
      if ($(this).val().includes('1')) {
        $(this).val('').trigger('change');
        $(this).val('1').trigger('change');
      }
    });
    $("#concesionarios1b").on('select2:select', function(event) {
      if ($(this).val().includes('1')) {
        $(this).val('').trigger('change');
        $(this).val('1').trigger('change');
      }
    });
    $("#zone3").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      }
    });
    $("#concesionario3").on('select2:select', function(event) {
      if ($(this).val().includes('1')) {
        $(this).val('').trigger('change');
        $(this).val('1').trigger('change');
      }
    });
    $("#mes3").on('select2:select', function(event) {
      if ($(this).val().includes('0')) {
        $(this).val('').trigger('change');
        $(this).val('0').trigger('change');
      }
    });
    // =====================================



		$('#ano').change( () => {
			const ano = $('#ano').val()?$('#ano').val():'0'
			$('#mes').prop('disabled', true)
			$.getJSON('/services/months-by-year/' + ano, (data) => {
				$('#mes').empty()
				data.months.forEach( (item) => {
					$('#mes').append(`<option value="${item}"> ${item} </option>`)
				})
				$('#mes').prop('disabled', false)
			})
		})

		$('#ano3').change( () => {
			const ano = $('#ano3').val()?$('#ano3').val():'0'
			$('#mes3').prop('disabled', true)
			$.getJSON('/services/months-by-year/' + ano, (data) => {
				$('#mes3').empty()
				data.months.forEach( (item) => {
					$('#mes3').append(`<option value="${item}"> ${item} </option>`)
				})
				$('#mes3').prop('disabled', false)
			})
		})

		$('#anos').change( () => {
			const ano = $('#anos').val()?$('#anos').val():'0'
			$('#meses').prop('disabled', true)
			$.getJSON('/services/months-by-year/' + ano, (data) => {
				$('#meses').empty()
        $('#meses').append(`<option value="0"> Ver Todo </option>`)
				data.months.forEach( (item) => {
					$('#meses').append(`<option value="${item}"> ${item} </option>`)
				})
				$('#meses').prop('disabled', false)
			})
		})

		$('#anos1b').change( () => {
			const ano = $('#anos1b').val()?$('#anos1b').val():'0'
			$('#meses1b').prop('disabled', true)
			$.getJSON('/services/months-by-year/' + ano, (data) => {
				$('#meses1b').empty()
        $('#meses1b').append(`<option value="0"> Ver Todo </option>`)
				data.months.forEach( (item) => {
					$('#meses1b').append(`<option value="${item}"> ${item} </option>`)
				})
				$('#meses1b').prop('disabled', false)
			})
		})

		$("#zone2").change( () => {
			var id_zones = $('#zone2').val()?$('#zone2').val():'0'
			$( '#concesionarios' ).prop('disabled', true)
			$.getJSON('/services/concesionario-by-zones/' + id_zones, (data) => {
				$( '#concesionarios' ).empty()
				$( '#concesionarios' ).append('<option value="1">Ver Todo</option>')
				data.concesionarios.forEach( (item) => {
					$( '#concesionarios' ).append(`<option name"modelo" value="${item.id}">${item.nombre} </option>`)
				})
				$( '#concesionarios' ).prop('disabled', false)
			})
		})

		$("#zone2b").change( () => {
			var id_zones = $('#zone2b').val()?$('#zone2b').val():'0'
			$( '#concesionarios1b' ).prop('disabled', true)
			$.getJSON('/services/concesionario-by-zones/' + id_zones, (data) => {
				$( '#concesionarios1b' ).empty()
				$( '#concesionarios1b' ).append('<option value="1">Ver Todo</option>')
				data.concesionarios.forEach( (item) => {
					$( '#concesionarios1b' ).append(`<option name"modelo" value="${item.id}">${item.nombre} </option>`)
				})
				$( '#concesionarios1b' ).prop('disabled', false)
			})
		})

		$("#zone3").change( () => {
			var id_zones = $('#zone3').val()?$('#zone3').val():'0';
			$( '#concesionario3' ).prop('disabled', true)
			$.getJSON('/services/concesionario-by-zones/' + id_zones, (data) => {
				$( '#concesionario3' ).empty()
				$( '#concesionario3' ).append('<option value="1">Ver Todo</option>')
				data.concesionarios.forEach( (item) => {
					$( '#concesionario3' ).append(`<option name"modelo" value="${item.id}">${item.nombre} </option>`)
				})
				$( '#concesionario3' ).prop('disabled', false)
			})
		})

		$('#no-info2').hide()
		$('#no-info2b').hide()
		$('#no-info3').hide()

		table3Dealer = $('#ejecutivo-table').DataTable({
			paging: true,
			ordering: true,
			searching: false,
			lengthMenu: [[20, 50, -1], [20, 50, "Todos"]],
			order: [[ 6, "desc" ]],
			columns: [
					{ data: 'nombre', className: 'vertical-class table3-width-25' },
					{ data: 'guia', className: 'vertical-class' },
					{ data: 'pendiente', className: 'vertical-class'  },
					{ data: 'aceptada', className: 'vertical-class'  },
					{ data: 'concluida', className: 'vertical-class'  },
					{ data: 'segunda', className: 'vertical-class'  },
					{ data: 'total', className: 'vertical-class'  }
			],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
			}
		})

		table2 = $('#detalle-table').DataTable({
			paging: true,
			ordering: true,
			searching: false,
			lengthMenu: [[10, 20, -1], [10, 20, "Todos"]],
			columns: [
				{ data: 'nombre', className: 'vertical-class table2-width-40' },
				{ data: 'sales', className: 'vertical-class'  },
				{ data: 'creada', className: 'vertical-class' },
				{ data: 'efec', className: 'vertical-class'   }
			],
			order: [[ 3, "desc" ]],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
        	}
		})

		table2Dealer = $('#detalle-table-dealer').DataTable({
			paging: true,
			ordering: true,
			searching: false,
			lengthMenu: [[10, 20, -1], [10, 20, "Todos"]],
			order: [[ 1, "desc" ]],
			columns: [
				{ data: 'nombre', className:'vertical-class table2-width-40' },
				{ data: 'creada', className:'vertical-class' },
				{ data: 'sales', className:'vertical-class'  }
			],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
        	}
		})

		table1 = $('#table-section1').DataTable({
			paging: false,
			ordering: true,
			searching: false,
			bLengthChange: false,
			bInfo: false,
			columns: [
				{ data: 'mes', className: 'mes-table1 vertical-class'},
				{ data: 'ventas', className: 'vertical-class'},
				{ data: 'guias', className: 'vertical-class' },
				{ data: 'efectividad', className: 'vertical-class' }
			]
		})

		table3 = $('#concesionario-table').DataTable({
			paging: true,
			ordering: true,
			searching: false,
			lengthMenu: [[10, 50, -1], [10, 50, "Todos"]],
			order: [[ 6, "desc" ]],
			columns: [
					{ data: 'nombre', className: 'vertical-class table3-width-25' },
					{ data: 'guia', className: 'vertical-class' },
					{ data: 'pendiente', className: 'vertical-class'  },
					{ data: 'aceptada', className: 'vertical-class'  },
					{ data: 'concluida', className: 'vertical-class'  },
					{ data: 'segunda', className: 'vertical-class'  },
					{ data: 'total', className: 'vertical-class'  }
			],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
        	}
		})

		// charts graphs call
		var stackedData = {!! json_encode($stackedChart) !!}
		if(stackedData != 0) {
			if(stackedData[0][0].length > 1) {
				stackedCenter = stackedChartCenter(stackedData)
			} else {
				$("#stacledM").hide()
			}
			if(stackedData[1][0].length > 1) {
				stackedNorte = stackedChartNorte( stackedData )
			} else {
				$("#stacledN").hide()
			}
			if(stackedData[2][0].length > 1) {
				stackedOccidente = stackedChartOccidente( stackedData )
			} else {
				$("#stacledSW").hide()
			}
		}
		var mixedData = {!! json_encode($mixedChart) !!}
		if(mixedData != 0) {
			if(mixedData[0][2].length > 1) {
				mixedCenter = mixedChardCentral(mixedData)
			} else {
				$("#mixedC").hide()
			}
			if(mixedData[1][2].length > 1) {
				mixedNorte = mixedChardNorte(mixedData)
			} else {
				$("#mixedN").hide()
			}
			if(mixedData[2][2].length > 1) {
				mixedOccidente = mixedChardOccidente(mixedData)
			} else {
				$("#mixedSW").hide()
			}
		}

		lastMonths = {!! json_encode($lastMonths) !!}
		var barChart = {!! json_encode($barChart) !!}
		barChartGraph = barGraph(barChart, lastMonths)
		// Set Filters seccion 1
		$("#btn-consulta").click(sendFilter)
		// Set filters seccion 2
		$("#btn-consulta2").click(sendFilter2)
		$("#btn-consulta2b").click(sendFilter2b)
		// Set Filters seccion 3
		$("#btn-consulta3").click(sendFilter3)

		// EXCEL 
		$("#btn-excel2").click(getExcel2)
		$("#btn-excel2b").click(getExcel2b)
		$("#btn-excel3").click(getExcel3)
	});

	const getExcel2 = () => {
		var anos2 = $('#anos').val()?$('#anos').val():'0'
		var month2 = $("#meses").val()?$('#meses').val():'0'
		var concesionario2 = $("#concesionarios").val()?$('#concesionarios').val():'0'
		var id_zones = $('#zone2').val()?$('#zone2').val():'0';
		var monthNumber = '0';
		if(month2 != '0') {
			var monthNumber = checkMonth(month2)
		} else {
      var monthNumber = ['01','02','03','04','05','06','07','08','09','10','11','12'];
    }
		$("a#btn-excel2").attr("href", `/admin/dashboard/reporte-excel/2/${concesionario2}/${id_zones}/${monthNumber}/${anos2}`);
	}

	const getExcel2b = () => {
		var anos2 = $('#anos1b').val()?$('#anos1b').val():'0'
		var month2 = $("#meses1b").val()?$('#meses1b').val():'0'
		var concesionario2 = $("#concesionarios1b").val()?$('#concesionarios1b').val():'0'
		var id_zones = $('#zone2b').val()?$('#zone2b').val():'0';
		var monthNumber = '0';
		if(month2 != '0') {
			var monthNumber = checkMonth(month2)
		} else {
      var monthNumber = ['01','02','03','04','05','06','07','08','09','10','11','12'];
    }
		$("a#btn-excel2b").attr("href", `/admin/dashboard/reporte-excel/2b/${concesionario2}/${id_zones}/${monthNumber}/${anos2}`);
	}

	const getExcel3 = () => {
		var anos3 = $('#ano3').val()?$('#ano3').val():'0'
		var concesionario3 = $("#concesionario3").val()?$('#concesionario3').val():'0'
		var month3 = $("#mes3").val()?$('#mes3').val():'0'
		var id_zones = $('#zone3').val()?$('#zone3').val():'0'
		var monthNumber = checkMonthSimple(month3)
		$("a#btn-excel3").attr("href", `/admin/dashboard/reporte-excel/3/${concesionario3}/${id_zones}/${monthNumber}/${anos3}`);
	}

	const sendFilter = (e) => {
		e.preventDefault()
		$("#btn-consulta").attr("disabled", true)
		var anos = $('#ano').val() ? $('#ano').val() : '0'
		var month = $("#mes").val() ? $('#mes').val() : '0'
		var concesionario = $("#concesionario").val() ? $('#concesionario').val() : '0'
		var monthNumber = 0
		if( month != '0') {
			var monthNumber = checkMonth(month)
		}
		var token = "{{ csrf_token() }}"
		$.ajax({
			type: 'POST',
			data: {
				_token: token,
				ano: anos,
				month: monthNumber,
				concesionario: concesionario
			},
			url: `/admin/dashboard/ajax/1`,
			success:  (data) => {
				console.log(data)
				if (data.data.length > 0) {
					table1.clear().draw()
					table1.rows.add(data.data)
					table1.columns.adjust().draw()
					// $('#no-info3').hide()
					$('#table1').show()
				} else {
					// $('#no-info3').show()
					$('#table1').hide()
				}
				if(data.barchart) {
					tableSection1Filtered(data.barchart, data.months, data.data[1]);
					// delete graph
					if(typeof barChartGraph !== 'undefined') {
						barChartGraph.destroy()
					}
					barChartGraph = barGraph(data.barchart, data.months)
				}
				$("#btn-consulta").attr("disabled", false)
			},
				error: ( jqXHR, textStatus, errorThrown )  => {
					$("#btn-consulta").attr("disabled", false)
				}
		})
	}

	const sendFilter2 = (e) => {
		e.preventDefault()
		$("#btn-consulta2").attr("disabled", true)
		var anos2 = $('#anos').val()?$('#anos').val():'0'
		var month2 = $("#meses").val()?$('#meses').val():'0'
		var concesionario2 = $("#concesionarios").val()?$('#concesionarios').val():'0'
		var id_zones = $('#zone2').val()?$('#zone2').val():new Array('0');
		var monthNumber = '0';
		if(month2 != '0') {
			var monthNumber = checkMonth(month2)
		} else {
      var monthNumber = ['01','02','03','04','05','06','07','08','09','10','11','12'];
    }
			var token = "{{ csrf_token() }}"
			$.ajax({
				type: 'POST',
				data: {
					_token: token,
					ano: anos2,
					month: monthNumber,
					zone: id_zones,
					concesionario: concesionario2
				},
				url: `/admin/dashboard/ajax/2`,
				success:  (data) => {
					console.log(data)
					if(role == 'admin') { 
						console.log(data.concesionarios.length > 0 && (data.concesionarios[data.concesionarios.length-1]['creada'] != 0 || data.concesionarios[data.concesionarios.length-1]['sales'] != 0))
						if (data.concesionarios.length > 0 && (data.concesionarios[data.concesionarios.length-1]['creada'] != 0 || data.concesionarios[data.concesionarios.length-1]['sales'] != 0)) {
							table2.clear().draw()
							table2.rows.add(data.concesionarios)
							table2.columns.adjust().draw()
							$('#no-info2').hide()
							$('#table2').show()
							tableSection2Tfooter(data.totalSection2)
							
						} else {
							$('#no-info2').show()
							$('#table2').hide()
						}
						// Destroy all mixed graphs
						mixedCenter.destroy()
						mixedNorte.destroy()
						mixedOccidente.destroy()
						// Construct all mixed graphs
						const mixed = data.mixed
						if( mixed[0][2].length > 0 && (mixed[0][0][mixed[0][0].length-1] != undefined || mixed[0][1][mixed[0][1].length-1] != undefined)) {
							mixedCenter = mixedChardCentral(mixed)
							tableSection2FilteredCentral(mixed)
							$("#mixedC").show()
						} else {
							$("#mixedC").hide()
						}
						if( mixed[1][2].length > 0 && (mixed[1][0][mixed[1][0].length-1] != undefined || mixed[1][1][mixed[1][1].length-1] != undefined)) {
							mixedNorte = mixedChardNorte(mixed)
							tableSection2FilteredNorth(mixed)
							$("#mixedN").show()
						} else {
							$("#mixedN").hide()
						}
						if( mixed[2][2].length > 0 && (mixed[2][0][mixed[2][0].length-1] != undefined || mixed[2][1][mixed[2][1].length-1] != undefined)) {
							mixedOccidente = mixedChardOccidente(mixed)
							tableSection2FilteredSW(mixed)
							$("#mixedSW").show()
						} else {
							$("#mixedSW").hide()
						}
					} else if(role == 'concesionario'){
						if (data.concesionarios.length > 0 && (data.concesionarios[data.concesionarios.length-1]['creada'] != 0 || data.concesionarios[data.concesionarios.length-1]['sales'] != 0)) {
							table2Dealer.clear().draw()
							table2Dealer.rows.add(data.concesionarios)
							table2Dealer.columns.adjust().draw()
							$('#no-info2').hide()
							$('#table2').show()
							tableSection2Tfooter(data.totalSection2)
						} else {
							$('#no-info2').show()
							$('#table2').hide()
						}
					}
					$("#btn-consulta2").attr("disabled", false)
				},
				error: ( jqXHR, textStatus, errorThrown )  => {
					$("#btn-consulta2").attr("disabled", false)
				}
			})
	}

	const sendFilter2b = (e) => {
		e.preventDefault()
		$("#btn-consulta2b").attr("disabled", true)
		var anos2 = $('#anos1b').val() ? $('#anos1b').val() : '0'
		var month2 = $("#meses1b").val() ? $("#meses1b").val() : '0'
		var concesionario2 = $("#concesionarios1b").val() ? $("#concesionarios1b").val() : '0'
		var id_zones = $('#zone2b').val() ? $('#zone2b').val() : new Array('0');
		var monthNumber = '0';
		if(month2 != '0') {
			var monthNumber = checkMonth(month2)
		} else {
      var monthNumber = ['01','02','03','04','05','06','07','08','09','10','11','12'];
    }
			var token = "{{ csrf_token() }}"
			$.ajax({
				type: 'POST',
				data: {
					_token: token,
					ano: anos2,
					month: monthNumber,
					zone: id_zones,
					concesionario: concesionario2
				},
				url: `/admin/dashboard/ajax/2b`,
				success:  (data) => {
					console.log(data)
					if (data.concesionarios.length > 0 && (data.concesionarios[data.concesionarios.length-1]['creada'] != 0 || data.concesionarios[data.concesionarios.length-1]['sales'] != 0)) {
						table2Dealer.clear().draw()
						table2Dealer.rows.add(data.concesionarios)
						table2Dealer.columns.adjust().draw()
						$('#no-info2b').hide()
						$('#table2b').show()
						tableSection2Tfooter1b(data.totalSection2)
					} else {
						$('#no-info2b').show()
						$('#table2b').hide()
					}

					$("#btn-consulta2b").attr("disabled", false)
				},
				error: ( jqXHR, textStatus, errorThrown )  => {
					$("#btn-consulta2b").attr("disabled", false)
				}
			})
	}

	const sendFilter3 = (e) => {
		e.preventDefault()
		$("#btn-consulta3").attr("disabled", true)
		var anos3 = $('#ano3').val()?$('#ano3').val():'0'
		var concesionario3 = $("#concesionario3").val()?$('#concesionario3').val():'0'
		var month3 = $("#mes3").val()?$('#mes3').val():'0'
		var id_zones = $('#zone3').val()?$('#zone3').val():new Array('0');
		var monthNumber = month3 != '0' ? checkMonthSimple(month3) : ['01','02','03','04','05','06','07','08','09','10','11','12'];
			var token = "{{ csrf_token() }}"
			$.ajax({
				type: 'POST',
				data: {
					_token: token,
					ano: anos3,
					zone: id_zones,
					month: monthNumber,
					concesionario: concesionario3
				},
				url: `/admin/dashboard/ajax/3`,
				success:  (data) => {
					console.log(data)
					if(role == 'admin') {
						if (data.concesionarios.length > 0 && data.concesionarios[data.concesionarios.length-1]['total'] != 0 ) {
							table3.clear().draw()
							table3.rows.add(data.concesionarios)
							table3.columns.adjust().draw()
							tableSection3Tfooter(data.totalSection3)
							$('#no-info3').hide()
							$('#table3').show()
						} else {
							$('#no-info3').show()
							$('#table3').hide()
						}
					} else if(role == 'concesionario') {
						if (data.concesionarios.length > 0 && data.concesionarios[data.concesionarios.length-1]['total'] != 0 ) {
							table3Dealer.clear().draw()
							table3Dealer.rows.add(data.concesionarios)
							table3Dealer.columns.adjust().draw()
							$('#no-info3').hide()
							$('#table3').show()
						} else {
							$('#no-info3').show()
							$('#table3').hide()
						}
					}
					// Destroy all mixed graphs
					if(typeof stackedCenter !== 'undefined') {
						stackedCenter.destroy()
					}
					if(typeof stackedNorte !== 'undefined') {
						stackedNorte.destroy()
					}
					if(typeof stackedOccidente !== 'undefined') {
						stackedOccidente.destroy()
					}
					var stackedData = data.stacked
					if(stackedData != 0) {
						if(stackedData[0][0].length > 0 && (stackedData[0][1][stackedData[0][1].length-1] != 0 || stackedData[0][2][stackedData[0][1].length-1] != 0 || stackedData[0][3][stackedData[0][1].length-1] != 0 || stackedData[0][4][stackedData[0][1].length-1] != 0 || stackedData[0][4][stackedData[0][1].length-1] != 0)) {
							stackedCenter = stackedChartCenter(stackedData)
							tableSection3FilteredCentral(stackedData)
							$("#stacledM").show()
						} else {
							$("#stacledM").hide()
						}
						if(stackedData[1][0].length > 0 && (stackedData[1][1][stackedData[1][1].length-1] != 0 || stackedData[1][2][stackedData[1][1].length-1] != 0 || stackedData[1][3][stackedData[1][1].length-1] != 0 || stackedData[1][4][stackedData[1][1].length-1] != 0 || stackedData[1][4][stackedData[1][1].length-1] != 0)) {
							stackedNorte = stackedChartNorte( stackedData )
							tableSection3FilteredNorte(stackedData)
							$("#stacledN").show()
						} else {
							$("#stacledN").hide()
						}
						if(stackedData[2][0].length > 0 && (stackedData[2][1][stackedData[2][1].length-1] != 0 || stackedData[2][2][stackedData[2][1].length-1] != 0 || stackedData[2][3][stackedData[2][1].length-1] != 0 || stackedData[2][4][stackedData[2][1].length-1] != 0 || stackedData[2][4][stackedData[2][1].length-1] != 0)) {
							stackedOccidente = stackedChartOccidente( stackedData )
							tableSection3FilteredSW(stackedData)
							$("#stacledSW").show()
						} else {
							$("#stacledSW").hide()
						}
					} else {
						$("#stacledM").hide()
						$("#stacledN").hide()
						$("#stacledSW").hide()
					}
					$("#btn-consulta3").attr("disabled", false)
				},
				error: ( jqXHR, textStatus, errorThrown )  => {
					$("#btn-consulta3").attr("disabled", false)
				}
			})
	}

	const checkMonth = (months) => {
		var total = []
		for (const month of months) {
			if ( month == 'Enero' ) {
				total.push('01')
			} else if ( month == 'Febrero') {
				total.push('02')
			} else if ( month == 'Marzo') {
				total.push('03')
			} else if ( month == 'Abril') {
				total.push('04')
			} else if ( month == 'Mayo') {
				total.push('05')
			} else if ( month == 'Junio') {
				total.push('06')
			} else if ( month == 'Julio') {
				total.push('07')
			} else if ( month == 'Agosto') {
				total.push('08')
			} else if ( month == 'Septiembre') {
				total.push('09')
			} else if ( month == 'Octubre') {
				total.push('10')
			} else if ( month == 'Noviembre') {
				total.push('11')
			} else if ( month == 'Diciembre') {
				total.push('12')
			}
		}
		return total
	}

	const checkMonthSimple = (month) => {
		var total = []
			if ( month == 'Enero' ) {
				total.push('01')
			} else if ( month == 'Febrero') {
				total.push('02')
			} else if ( month == 'Marzo') {
				total.push('03')
			} else if ( month == 'Abril') {
				total.push('04')
			} else if ( month == 'Mayo') {
				total.push('05')
			} else if ( month == 'Junio') {
				total.push('06')
			} else if ( month == 'Julio') {
				total.push('07')
			} else if ( month == 'Agosto') {
				total.push('08')
			} else if ( month == 'Septiembre') {
				total.push('09')
			} else if ( month == 'Octubre') {
				total.push('10')
			} else if ( month == 'Noviembre') {
				total.push('11')
			} else if ( month == 'Diciembre') {
				total.push('12')
			}
		return total
	}

	// Stacked Graph chart
	const stackedChartNorte = (stacked) => {
		// STACKED NORTE
		var ctxNorteStacked = document.getElementById('norte-stacked');
		var concesionariosNorte = stacked[1][0]
		var creadaNorte = stacked[1][1]
		var pendienteNorte = stacked[1][2]
		var aceptadaNorte = stacked[1][3]
		var segundaNorte  = stacked[1][4]
		var concluidaNorte = stacked[1][5]
		var norteStacked = new Chart(ctxNorteStacked, {
				type: 'bar',
				data: {
						labels: concesionariosNorte,
						datasets: [{
								label: '# Creada',
								data: creadaNorte,
								backgroundColor: 'rgba(82, 178, 220, 1)',
								borderColor:  'rgba(82, 178, 220, 1)',
								borderWidth: 1
						}, {
							label: '# Pendiente',
								data: pendienteNorte,
								backgroundColor: 'rgba(230, 126, 34, 1)',
								borderColor: 'rgba(230, 126, 34, 1)',
								borderWidth: 1
						}, {
							label: '# Aceptada',
								data: aceptadaNorte,
								backgroundColor: 'rgba(204, 204, 204, 1)',
								borderColor: 'rgba(204, 204, 204, 1)',
								borderWidth: 1
						}, {
							label: '# Concluida',
								data: concluidaNorte,
								backgroundColor: 'rgba(255, 182, 6, 1)',
								borderColor: 'rgba(255, 182, 6, 1)',
								borderWidth: 1
						}, {
							label: '# Segunda',
								data: segundaNorte,
								backgroundColor: 'rgba(101, 203, 52, 1)',
								borderColor: 'rgba(101, 203, 52, 1)',
								borderWidth: 1
						}]
				},
				options: {
						scales: {
								xAxes: [{
										stacked: true
								}],
								yAxes: [{
										stacked: true,
										ticks: {
											// max: Math.round(Math.max.apply(this, stacked[1][1])/10)*10 + 10,
										}
								}]
						}
				}
		});
		return norteStacked;
	}

	const stackedChartOccidente = (stacked) => { 
		// STACKED OCCIDENTE
		var ctxOccidenteStacked = document.getElementById('occidente-stacked');
		var concesionariosOccidente = stacked[2][0]
		var creadaOccidente = stacked[2][1]
		var pendienteOccidente = stacked[2][2]
		var aceptadaOccidente = stacked[2][3]
		var segundaOccidente  = stacked[2][4]
		var concluidaOccidente = stacked[2][5]
		var occidenteStacked = new Chart(ctxOccidenteStacked, {
				type: 'bar',
				data: {
						labels: concesionariosOccidente,
						datasets: [{
								label: '# Creada',
								data: creadaOccidente,
								backgroundColor: 'rgba(82, 178, 220, 1)',
								borderColor:  'rgba(82, 178, 220, 1)',
								borderWidth: 1
						}, {
							label: '# Pendiente',
								data: pendienteOccidente,
								backgroundColor: 'rgba(230, 126, 34, 1)',
								borderColor: 'rgba(230, 126, 34, 1)',
								borderWidth: 1
						}, {
							label: '# Aceptada',
								data: aceptadaOccidente,
								backgroundColor: 'rgba(204, 204, 204, 1)',
								borderColor: 'rgba(204, 204, 204, 1)',
								borderWidth: 1
						}, {
							label: '# Concluida',
								data: concluidaOccidente,
								backgroundColor: 'rgba(255, 182, 6, 1)',
								borderColor: 'rgba(255, 182, 6, 1)',
								borderWidth: 1
						}, {
							label: '# Segunda',
								data: segundaOccidente,
								backgroundColor: 'rgba(101, 203, 52, 1)',
								borderColor: 'rgba(101, 203, 52, 1)',
								borderWidth: 1
						}]
				},
				options: {
						scales: {
								xAxes: [{
										stacked: true
								}],
								yAxes: [{
										stacked: true,
										ticks: {
											// max: Math.round(Math.max.apply(this, stacked[2][1])/10)*10 + 10,
										}
								}]
						}
				}
		});
		return occidenteStacked
	}

	const stackedChartCenter = (stacked) => {
		// STACKED Center
		var ctxCentroStacked = document.getElementById('central-stacked');
		var concesionarios = stacked[0][0]
		var creada = stacked[0][1]
		var pendiente = stacked[0][2]
		var aceptada = stacked[0][3]
		var segunda  = stacked[0][4]
		var concluida = stacked[0][5]
		var centroStacked = new Chart(ctxCentroStacked, {
				type: 'bar',
				data: {
						labels: concesionarios,
						datasets: [{
								label: '# Creada',
								data: creada,
								backgroundColor: 'rgba(82, 178, 220, 1)',
								borderColor:  'rgba(82, 178, 220, 1)',
								borderWidth: 1
						}, {
							label: '# Pendiente',
								data: pendiente,
								backgroundColor: 'rgba(230, 126, 34, 1)',
								borderColor: 'rgba(230, 126, 34, 1)',
								borderWidth: 1
						}, {
							label: '# Aceptada',
								data: aceptada,
								backgroundColor: 'rgba(204, 204, 204, 1)',
								borderColor: 'rgba(204, 204, 204, 1)',
								borderWidth: 1
						}, {
							label: '# Concluida',
								data: concluida,
								backgroundColor: 'rgba(255, 182, 6, 1)',
								borderColor: 'rgba(255, 182, 6, 1)',
								borderWidth: 1
						}, {
							label: '# Segunda',
								data: segunda,
								backgroundColor: 'rgba(101, 203, 52, 1)',
								borderColor: 'rgba(101, 203, 52, 1)',
								borderWidth: 1
						}]
				},
				options: {
						scales: {
								xAxes: [{
										stacked: true
								}],
								yAxes: [{
										stacked: true,
										ticks: {
											// max: Math.round(Math.max.apply(this, stacked[0][1])/10)*10 + 10,
										}
								}]
						}
				}
		});
		return centroStacked
	}
	// END STACKED GRAPH

	// Mixed Graph chart
	const mixedChardCentral = (graphs) => {
		// CENTRAL GRAPH
		var ctxCentral = document.getElementById('central-graph');
		var mixedChartCentral = new Chart(ctxCentral, {
			type: 'bar',
				data: {
					labels: graphs[0][2],
					datasets: [{
						label: '#Guias Creadas',
						yAxisID: 'left-y-axis',
						data: graphs[0][0],
						backgroundColor: 'rgba(82, 178, 220, 1)',
						borderColor: 'rgba(82, 178, 220, 1)',
						borderWidth: 1
					}, {
						label: 'Total Ventas',
						yAxisID: 'left-y-axis',
						data: graphs[0][1],
						backgroundColor: 'rgba(101, 203, 52, 1)',
						borderColor: 'rgba(101, 203, 52, 1)',
						borderWidth: 1
					}, {
						label: '% de efectividad',
						data: graphs[0][3],
						backgroundColor: 'rgba(255, 183, 5, 1)',
						borderColor: 'rgba(255, 183, 5, 1)',
						borderWidth: 1,
						fill: false,
						type: 'line',
						lineTension: 0,
						yAxisID: 'right-y-axis',
					}],
				},
				options: {
						scales: {
								yAxes: [{
										id: 'left-y-axis',
										type: 'linear',
										position: 'left',
										ticks: {
											min: 0,
											// max: Math.round(Math.max.apply(this, graphs[0][1])/10)*10 + 50,
										},
										scaleLabel: {
											display: true,
											labelString: "Cantidad"
										}
								}, {
										id: 'right-y-axis',
										type: 'linear',
										position: 'right',
										ticks: {
											min: 0,
											// max: 110,
											callback: function(value){return value+ "%"}
										},  
										scaleLabel: {
											display: true,
											labelString: "Porcentaje"
										}
								}]
						}
				}
		});
		// END CENTRAL GRAPH
		return mixedChartCentral;
	}

	const mixedChardNorte = (graphs) => {
		// NORTE GRAPH
		var ctxNorte = document.getElementById('norte-graph');
			var mixedChart = new Chart(ctxNorte, {
				type: 'bar',
					data: {
						labels: graphs[1][2],
						datasets: [{
							label: '#Guias Creadas',
							yAxisID: 'left-y-axis',
							data: graphs[1][0],
							backgroundColor: 'rgba(82, 178, 220, 1)',
							borderColor: 'rgba(82, 178, 220, 1)',
							borderWidth: 1
						}, {
							label: 'Total Ventas',
							yAxisID: 'left-y-axis',
							data: graphs[1][1],
							backgroundColor: 'rgba(101, 203, 52, 1)',
							borderColor: 'rgba(101, 203, 52, 1)',
							borderWidth: 1
						}, {
							label: '% de efectividad',
							data: graphs[1][3],
							backgroundColor: 'rgba(255, 183, 5, 1)',
							borderColor: 'rgba(255, 183, 5, 1)',
							borderWidth: 1,
							fill: false,
							type: 'line',
							lineTension: 0,
							yAxisID: 'right-y-axis',
						}],
					},
					options: {
						scales: {
								yAxes: [{
										id: 'left-y-axis',
										type: 'linear',
										position: 'left',
										ticks: {
											min: 0,
											// max: Math.round(Math.max.apply(this, graphs[1][1])/10)*10 + 50,
										}, 
										scaleLabel: {
											display: true,
											labelString: "Cantidad"
										}
								}, {
										id: 'right-y-axis',
										type: 'linear',
										position: 'right',
										ticks: {
											min: 0,
											// max: 110,
											callback: function(value){return value+ "%"}
										},  
										scaleLabel: {
											display: true,
											labelString: "Porcentaje"
										}
								}]
					}
				}
			});
		// END NORTE GRAPH
		return mixedChart
	}

	const mixedChardOccidente = (graphs) => {

		// OCCIDENTE GRAPH
		var ctxOccidente = document.getElementById('occidente-graph');
		var mixedChart = new Chart(ctxOccidente, {
			type: 'bar',
				data: {
					labels: graphs[2][2],
					datasets: [{
						label: '#Guias Creadas',
						yAxisID: 'left-y-axis',
						data: graphs[2][0],
						backgroundColor: 'rgba(82, 178, 220, 1)',
						borderColor: 'rgba(82, 178, 220, 1)',
						borderWidth: 1
					}, {
						label: 'Total Ventas',
						yAxisID: 'left-y-axis',
						data: graphs[2][1],
						backgroundColor: 'rgba(101, 203, 52, 1)',
						borderColor: 'rgba(101, 203, 52, 1)',
						borderWidth: 1
					}, {
						label: '% de efectividad',
						data: graphs[2][3],
						backgroundColor: 'rgba(255, 183, 5, 1)',
						borderColor: 'rgba(255, 183, 5, 1)',
						borderWidth: 1,
						fill: false,
						type: 'line',
						lineTension: 0,
						yAxisID: 'right-y-axis',
					}],
				},
				options: {
						scales: {
								yAxes: [{
										id: 'left-y-axis',
										type: 'linear',
										position: 'left',
										ticks: {
											min: 0,
											// max: Math.round(Math.max.apply(this, graphs[2][1])/10)*10 + 50,
										},
										scaleLabel: {
											display: true,
											labelString: "Cantidad"
										}
								}, {
										id: 'right-y-axis',
										type: 'linear',
										position: 'right',
										ticks: {
											min: 0,
											// max: 110,
											callback: function(value){return value+ "%"}
										},  
										scaleLabel: {
											display: true,
											labelString: "Porcentaje"
										}
								}]
						}
				}
		});
		// END ORIENTAL GRAPH
		return mixedChart
	}
	// END MIXED GRAPH

	const barGraph = (barChart, lastMonths) => {
		var ctx1 = document.getElementById('section1');
		var section1 = new Chart(ctx1, {
			type: 'bar',
			data: {
					labels: lastMonths,
					datasets: [{
							label: 'Total Ventas',
							data: barChart[1],
							backgroundColor: 'rgba(101, 203, 52, 1)',
							borderColor: 'rgba(101, 203, 52, 1)',
							borderWidth: 1
					}, {
						label: 'Total Guias',
							data: barChart[0],
							backgroundColor: 'rgba(82, 178, 220, 1)',
							borderColor: 'rgba(82, 178, 220, 1)',
							borderWidth: 1
					}, {
						label: '% de efectividad',
						data: barChart[2],
						backgroundColor: 'rgba(255, 183, 5, 1)',
						borderColor: 'rgba(255, 183, 5, 1)',
						borderWidth: 1,
						fill: false,
						type: 'line',
						lineTension: 0,
						yAxisID: 'right-y-axis',
					}]
			},
			options: {
				scales: {
						yAxes: [{
								id: 'left-y-axis',
								type: 'linear',
								position: 'left',
								ticks: {
									min: 0,
								},
								scaleLabel: {
									display: true,
									labelString: "Cantidad"
								}
						}, {
								id: 'right-y-axis',
								type: 'linear',
								position: 'right',
								ticks: {
									min: 0,
									callback: function(value){return value+ "%"}
								},  
								scaleLabel: {
									display: true,
									labelString: "Porcentaje"
								}
						}]
				}
			}
		});
		return section1
	}
									
	const tableSection1Filtered = (data, months, YTD) => {
		$('#graph-section1').empty();
		$('#graph-section1').hide();
			var htmlTable = `
			<table class="table table-condensed" style="width: 100%;" id="graph-section1">
			<tr id="month">
				<td></td>
			</tr>
			<tr id="sale">
				<td style="width: 20%;"> <div class="square-ventas vertical-class" style=""></div> Total Ventas </td>
			</tr>
			<tr id="guide">
				<td> <div class="square-guias vertical-class" style=""></div> Total Guias</td>
			</tr>
			<tr id="efect">
				<td> <div class="square-efectividad vertical-class"></div> Total Efectividad</td>
			</tr>
		</table>`
		$("#graph-section1").append( htmlTable )
		for(var i=0; i < months.length; i++) {
			if(i != months.length-1 ) {
				$('#graph-section1').find('#month').append(`<td class="vertical-class">${months[i]}</td>`)
			}
			if( i == months.length-1) {
				$('#graph-section1').find('#month').append(`<td class="vertical-class"><b>${months[i]}</b></td>`)
			}
		}
		data[1].forEach(venta => { $('#graph-section1').find('#sale').append(`<td class="vertical-class">${venta}</td>`) })
		data[0].forEach(guide => { $('#graph-section1').find('#guide').append(`<td class="vertical-class">${guide}</td>`) })
		data[2].forEach(efect => { $('#graph-section1').find('#efect').append(`<td class="vertical-class">${efect}%</td>`) })
		
		$('#graph-section1').find('#month').append(`<td class="vertical-class"><b>YTD</b></td>`)
		$('#graph-section1').find('#sale').append(`<td class="vertical-class"><b>${YTD.ventas}</b></td>`)
		$('#graph-section1').find('#guide').append(`<td class="vertical-class"><b>${YTD.guias}</b></td>`)
		$('#graph-section1').find('#efect').append(`<td class="vertical-class"><b>${YTD.efectividad}</b></td>`)
		
		$('#graph-section1').show();
	}

	const tableSection2FilteredCentral = (data) => {
		$('#mixedChart-centro').empty();
		$('#mixedChart-centro').hide();
		var htmlTable = `
			<table class="table table-condensed" style="width: 100%;" id="mixedChart-centro">
			<tr id="name">
			<td></td>
			</tr>
			<tr id="sale">
				<td style="width: 20%;"> <div class="square-ventas" style=""></div> Total Ventas </td>
			</tr>
			<tr id="guide">
				<td> <div class="square-guias" style=""></div> Total Guias</td>
			</tr>
			<tr id="efect">
				<td> <div class="square-efectividad"></div> Total Efectividad</td>
			</tr>
		</table>`
		$("#mixedChart-centro").append( htmlTable )
		data[0][1].forEach(venta => { $('#mixedChart-centro').find('#name').append(`<td>ARCS</td>`) })
		data[0][1].forEach(venta => { $('#mixedChart-centro').find('#sale').append(`<td>${venta}</td>`) })
		data[0][0].forEach(guide => { $('#mixedChart-centro').find('#guide').append(`<td>${guide}</td>`) })
		data[0][3].forEach(efect => { $('#mixedChart-centro').find('#efect').append(`<td>${efect}%</td>`) })
		$('#mixedChart-centro').show();
	}

	const tableSection2FilteredSW = (data) => {
		$('#mixedChart-sw').empty();
		$('#mixedChart-sw').hide();
		// console.log(data)
		var htmlTable = `
			<table class="table table-condensed" style="width: 100%;" id="mixedChart-sw">
			<tr id="sale">
				<td style="width: 20%;"> <div class="square-ventas" style=""></div> Total Ventas </td>
			</tr>
			<tr id="guide">
				<td> <div class="square-guias" style=""></div> Total Guias</td>
			</tr>
			<tr id="efect">
				<td> <div class="square-efectividad"></div> Total Efectividad</td>
			</tr>
		</table>`
		$("#mixedChart-sw").append( htmlTable )
		data[2][1].forEach(venta => { $('#mixedChart-sw').find('#sale').append(`<td>${venta}</td>`) })
		data[2][0].forEach(guide => { $('#mixedChart-sw').find('#guide').append(`<td>${guide}</td>`) })
		data[2][3].forEach(efect => { $('#mixedChart-sw').find('#efect').append(`<td>${efect}%</td>`) })
		$('#mixedChart-sw').show();
	}

	const tableSection2FilteredNorth = (data) => {
		$('#mixedChart-norte').empty();
		$('#mixedChart-norte').hide();
		// console.log(data)
		var htmlTable = `
			<table class="table table-condensed" style="width: 100%;" id="mixedChart-norte">
			<tr id="sale">
				<td style="width: 20%;"> <div class="square-ventas" style=""></div> Total Ventas </td>
			</tr>
			<tr id="guide">
				<td> <div class="square-guias" style=""></div> Total Guias</td>
			</tr>
			<tr id="efect">
				<td> <div class="square-efectividad"></div> Total Efectividad</td>
			</tr>
		</table>`
		$("#mixedChart-norte").append( htmlTable )
		data[1][1].forEach(venta => { $('#mixedChart-norte').find('#sale').append(`<td>${venta}</td>`) })
		data[1][0].forEach(guide => { $('#mixedChart-norte').find('#guide').append(`<td>${guide}</td>`) })
		data[1][3].forEach(efect => { $('#mixedChart-norte').find('#efect').append(`<td>${efect}%</td>`) })
		$('#mixedChart-norte').show();
	}

	const tableSection2Tfooter = (data) => {
		if( role == 'admin') {
			$('#tfooter-section2-admin').empty();
			const sale = data['sales'];
			const guide = data['creada'];
			const efect = data['efec'];

			var htmlTable = 
			`
				<tr>
					<td class="vertical-class font-bold"> TOTAL </td>
					<td class="vertical-class font-bold">${sale}</td>
					<td class="vertical-class font-bold">${guide}</td>
					<td class="vertical-class font-bold">${efect}</td>
				</tr>
			`
			$("#tfooter-section2-admin").append( htmlTable )
		} else if( role == 'concesionario') {
			$('#tfooter-section2-concesionario').empty();
			const sale = data[0]['sales'];
			const guide = data[0]['creada'];
			console.log(data)
			var htmlTable = 
			`
				<tr>
					<td class="vertical-class font-bold"> TOTAL </td>
					<td class="vertical-class font-bold">${guide}</td>
					<td class="vertical-class font-bold">${sale}</td>
				</tr>
			`
			$("#tfooter-section2-concesionario").append( htmlTable )

		}
	}

	const tableSection2Tfooter1b = (data) => {

		$('#tfooter-section2-concesionario').empty();
		const sale = data[0]['sales'];
		const guide = data[0]['creada'];
		console.log(data)
		var htmlTable = 
		`
			<tr>
				<td class="vertical-class font-bold"> TOTAL </td>
				<td class="vertical-class font-bold">${guide}</td>
				<td class="vertical-class font-bold">${sale}</td>
			</tr>
		`
		$("#tfooter-section2-concesionario").append( htmlTable )

	}

	const tableSection3Tfooter = (data) => {
		if( role == 'admin') {
			$('#tfooter-section3-admin').empty();
			const nombre = data[0]['nombre'];
			const guia = data[0]['guia'];
			const pendiente = data[0]['pendiente'];
			const aceptada = data[0]['aceptada'];
			const concluida = data[0]['concluida'];
			const segunda = data[0]['segunda'];
			const total = data[0]['total'];
			var htmlTable = 
			`
				<tr>
					<td class="vertical-class font-bold table3-width-25" style="width:25%">${nombre}</td>
					<td class="vertical-class font-bold" style="width:10%">${guia}</td>
					<td class="vertical-class font-bold" style="width:10%">${pendiente}</td>
					<td class="vertical-class font-bold" style="width:10%">${aceptada}</td>
					<td class="vertical-class font-bold" style="width:10%">${concluida}</td>
					<td class="vertical-class font-bold" style="width:10%">${segunda}</td>
					<td class="vertical-class font-bold" style="width:10%">${total}</td>
				</tr>
			`
			$("#tfooter-section3-admin").append( htmlTable )
		} else if( role == 'concesionario') {
			$('#tfooter-section3-concesionario').empty();
			const nombre = data[0]['nombre'];
			const guia = data[0]['guia'];
			const pendiente = data[0]['pendiente'];
			const aceptada = data[0]['aceptada'];
			const concluida = data[0]['concluida'];
			const segunda = data[0]['segunda'];
			const total = data[0]['total'];
			var htmlTable = 
			`
				<tr>
					<td class="vertical-class font-bold table3-width-25" style="width:25%">${nombre}</td>
					<td class="vertical-class font-bold" style="width:10%">${guia}</td>
					<td class="vertical-class font-bold" style="width:10%">${pendiente}</td>
					<td class="vertical-class font-bold" style="width:10%">${aceptada}</td>
					<td class="vertical-class font-bold" style="width:10%">${concluida}</td>
					<td class="vertical-class font-bold" style="width:10%">${segunda}</td>
					<td class="vertical-class font-bold" style="width:10%">${total}</td>
				</tr>
			`
			$("#tfooter-section3-concesionario").append( htmlTable )
		
		}
	}

	const tableSection3FilteredCentral = (data) => {
		$('#stackedChart-centro').empty();
		$('#stackedChart-centro').hide();
		// console.log(data)
		var htmlTable = 
			`
			<table class="table table condensed" style="width: 100%" id="stackedChart-centro">
				<tr id="creada">
					<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
				</tr>
				<tr id="pendiente">
					<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
				</tr>
				<tr id="aceptada">
					<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
				</tr>
				<tr id="concluida">
					<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
				</tr>
				<tr id="segunda">
					<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
				</tr>
			</table>
			`
		$("#stackedChart-centro").append( htmlTable )
		data[0][1].forEach(item => { $('#stackedChart-centro').find('#creada').append(`<td>${item}</td>`) })
		data[0][2].forEach(item => { $('#stackedChart-centro').find('#pendiente').append(`<td>${item}</td>`) })
		data[0][3].forEach(item => { $('#stackedChart-centro').find('#aceptada').append(`<td>${item}</td>`) })
		data[0][4].forEach(item => { $('#stackedChart-centro').find('#concluida').append(`<td>${item}</td>`) })
		data[0][5].forEach(item => { $('#stackedChart-centro').find('#segunda').append(`<td>${item}</td>`) })
		$('#stackedChart-centro').show();
	}

	const tableSection3FilteredNorte = (data) => {
		$('#stackedChart-norte').empty();
		$('#stackedChart-norte').hide();
		var htmlTable = 
			`
			<table class="table table condensed" style="width: 100%" id="stackedChart-norte">
				<tr id="creada">
					<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
				</tr>
				<tr id="pendiente">
					<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
				</tr>
				<tr id="aceptada">
					<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
				</tr>
				<tr id="concluida">
					<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
				</tr>
				<tr id="segunda">
					<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
				</tr>
			</table>
			`
		$("#stackedChart-norte").append( htmlTable )
		data[1][1].forEach(item => { $('#stackedChart-norte').find('#creada').append(`<td>${item}</td>`) })
		data[1][2].forEach(item => { $('#stackedChart-norte').find('#pendiente').append(`<td>${item}</td>`) })
		data[1][3].forEach(item => { $('#stackedChart-norte').find('#aceptada').append(`<td>${item}</td>`) })
		data[1][4].forEach(item => { $('#stackedChart-norte').find('#concluida').append(`<td>${item}</td>`) })
		data[1][5].forEach(item => { $('#stackedChart-norte').find('#segunda').append(`<td>${item}</td>`) })
		$('#stackedChart-norte').show();	
	}

	const tableSection3FilteredSW = (data) => {
		$('#stackedChart-sw').empty();
		$('#stackedChart-sw').hide();
		var htmlTable = 
			`
			<table class="table table condensed" style="width: 100%" id="stackedChart-sw">
				<tr id="creada">
					<td style="width:15%"> <div class="square-guias"></div> # Creada</td>
				</tr>
				<tr id="pendiente">
					<td style="width:15%"> <div class="square-efectividad" ></div> # Pendiente</td>
				</tr>
				<tr id="aceptada">
					<td style="width:15%"> <div class="square-aceptada"></div> # Aceptada</td>
				</tr>
				<tr id="concluida">
					<td style="width:15%"> <div class="square-concluida"></div> # Concluida</td>
				</tr>
				<tr id="segunda">
					<td style="width:15%"> <div class="square-ventas"></div> # Segunda</td>
				</tr>
			</table>
			`
		$("#stackedChart-sw").append( htmlTable )
		data[2][1].forEach(item => { $('#stackedChart-sw').find('#creada').append(`<td>${item}</td>`) })
		data[2][2].forEach(item => { $('#stackedChart-sw').find('#pendiente').append(`<td>${item}</td>`) })
		data[2][3].forEach(item => { $('#stackedChart-sw').find('#aceptada').append(`<td>${item}</td>`) })
		data[2][4].forEach(item => { $('#stackedChart-sw').find('#concluida').append(`<td>${item}</td>`) })
		data[2][5].forEach(item => { $('#stackedChart-sw').find('#segunda').append(`<td>${item}</td>`) })
		$('#stackedChart-sw').show();
	}
</script>
@endsection