@extends('master')

@section('custom_meta')
<meta name="chart_users" content="{{ str_replace(['[', ']'], ['', ''], collect($users)) }}">
<meta name="chart_sales" content="{{ str_replace(['[', ']'], ['', ''], collect($sales)) }}">
<meta name="chart_orders" content="{{ str_replace(['[', ']'], ['', ''], collect($orders)) }}">
@stop

@section('breadcrumb')
<li class="breadcrumb-item">
	<a href="{{ url('/reports') }}">
		<i class="bi bi-clipboard-data"></i> Reportes
	</a>
</li>

@stop

@section('custom_js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js" integrity="sha512-dnUg2JxjlVoXHVdSMWDYm2Y5xcIrJg1N+juOuRi0yLVkku/g26rwHwysJDAMwahaDfRpr1AxFz43ktuMPr/l1A==" crossorigin="anonymous"></script>
<script src="{{ url('/static/js/charts.js?v='.time()) }}"></script>
@stop

@section('content')

<div class="row mtop32">
	<div class="col-md-3">

		<div class="panel">
			<div class="inside">
				<div class="title">
					<h2>
						<i class="bi bi-shop"></i> Reporte de comercio.
					</h2>
				</div>
				{!! Form::open(['url' => '/report/by/shop', 'target' => '_blank']) !!}
					<label for="from" class="mtop16">Fecha inicial:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_from', null, ['required']) !!}
					</div>

					<label for="from" class="mtop16">Fecha final:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_end', null, ['required']) !!}
					</div>

					<label for="from" class="mtop16">Comercio afiliado:</label>
					<div class="group">
						<i class="fas fa-store-alt"></i>
						{!! Form::select('shop_id', $shops, null, ['class' => 'form-select']) !!}
					</div>
					<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Generar</button>
				{!! Form::close() !!}
			</div>
		</div>

		<div class="panel mtop32">
			<div class="inside">
				<div class="title">
					<h2>
						<i class="bi bi-truck"></i> Reporte por repartidor.
					</h2>
				</div>
				{!! Form::open(['url' => '/report/by/deliveryman', 'target' => '_blank']) !!}
					<label for="from" class="mtop16">Fecha inicial:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_from', null, ['required']) !!}
					</div>

					<label for="from" class="mtop16">Fecha final:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_end', null, ['required']) !!}
					</div>

					<label for="from" class="mtop16">Repartidor::</label>
					<div class="group">
						<i class="fas fa-store-alt"></i>
						{!! Form::select('delivery_man_id', $dealers, null, ['class' => 'form-select']) !!}
					</div>
					<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Generar</button>
				{!! Form::close() !!}
			</div>
		</div>

		<div class="panel mtop32">
			<div class="inside">
				<div class="title">
					<h2>
						<i class="bi bi-border-all"></i> Reporte consolidado.
					</h2>
				</div>
				{!! Form::open(['url' => '/report/consolidated', 'target' => '_blank']) !!}
					<label for="from" class="mtop16">Fecha inicial:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_from', null, ['required']) !!}
					</div>

					<label for="from" class="mtop16">Fecha final:</label>
					<div class="group">
						<i class="far fa-calendar-alt"></i>
						{!! Form::date('date_end', null, ['required']) !!}
					</div>

					<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Generar</button>
				{!! Form::close() !!}
			</div>
		</div>

	</div>

	<div class="col-md-9">

		<div class="panel">
			<div class="inside">

				<div class="title">
					<h2>
						<i class="bi bi-calendar"></i> Este mes en graficas.
					</h2>
				</div>
				<nav class="mtop16">
					<div class="nav nav-tabs" id="nav-tab" role="tablist">
						<button class="nav-link active" id="nav-sales-tab" data-bs-toggle="tab" data-bs-target="#nav-sales" type="button" role="tab" aria-controls="nav-sales" aria-selected="true">
							<i class="bi bi-graph-up"></i> Flujo de ventas
						</button>

						<button class="nav-link" id="nav-orders-tab" data-bs-toggle="tab" data-bs-target="#nav-orders" type="button" role="tab" aria-controls="nav-orders" aria-selected="false">
							<i class="bi bi-basket"></i> Ordenes
						</button>
						<button class="nav-link" id="nav-users-tab" data-bs-toggle="tab" data-bs-target="#nav-users" type="button" role="tab" aria-controls="nav-users" aria-selected="false">
							<i class="bi bi-people"></i> Usuarios
						</button>
					</div>
				</nav>
				
				<div class="tab-content" id="nav-tabContent">
					<div class="tab-pane active mtop32" id="nav-sales" role="tabpanel" aria-labelledby="nav-sales-tab">
						<canvas id="chart_sales" width="100%" height="100"></canvas>
					</div>
					<div class="tab-pane mtop32" id="nav-orders" role="tabpanel" aria-labelledby="nav-orders-tab">
						<canvas id="chart_orders" width="100%" height="100"></canvas>
					</div>
					<div class="tab-pane mtop32" id="nav-users" role="tabpanel" aria-labelledby="nav-users-tab">
						<canvas id="chart_users" width="100%" height="100"></canvas>
					</div>
				</div>

			</div>
		</div>


		
	</div>
</div>
@stop