@extends('layouts.dashboard')

@section('dashboard')

	
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Recaudación</strong></li>
    </ul>
    <div class="row">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-4">Recaudación</h1>
        </div>
    </div>
    @if(session('message'))
        <div class="alert {{ session('alert') }} mb-3">
            {{ session('message') }}
        </div>
    @endif
    <div class="card mb-4">
        <div class="card-body">
		    <form class="row form-registro" method="get" id="form-ventas">
		    	<div class="col-md-6 form-group">
		    		<label class="small mb-0">Estado</label>
		    		<select name="estado[]" class="form-control sm-form-control select2" multiple="multiple">
		    			<option value="">-- Seleccione un estado --</option>
		    			<option value="pagado">Pagado</option>
		    			<option value="pendiente">Pendiente</option>
		    			<option value="abonado">Abonado</option>
		    			<option value="vencido">Vencido</option>
		    			<option value="reclamado">Reclamado</option>
		    		</select>
		    	</div>
				<div class="col-md-3 form-group">
					<label class="small mb-0">Fecha Inicial</label>
					<input type="date" name="fecha-inicial" class="form-control sm-form-control input-date" value="{{ $fecha_inicial }}">
				</div>
				<div class="col-md-3 form-group">
					<label class="small mb-0">Fecha Hasta</label>
					<input type="date" name="fecha-hasta" class="form-control sm-form-control input-date" value="{{ $fecha_hasta }}">
				</div>
				<div class="col-md-6 form-group">
		    		<label class="small mb-0">Cliente</label>
		    		<select name="cliente[]" class="form-control sm-form-control select2 select2-ajax-clientes" data-placeholder="Clientes" multiple="multiple"></select>
		    	</div>
		    	<div class="col-md-6 form-group">
		    		<label class="small mb-0">Buscar</label>
		    		<input type="text" name="buscar" class="form-control sm-form-control" placeholder="Buscar">
		    	</div>
		    	<div class="col-md form-group text-right align-self-end">
		    		<button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
		    	</div>
		    </form>
		</div>
	</div>

    @if(isset($pagado) || isset($pendiente) || isset($abonado) || isset($vencido))
        @include('dashboard.dte.estadisticas-ventas-dte')
    @endif

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Cliente</th>
                            <th>Nº Folio</th>
                            <th>Total</th>
                            <th>Estado</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    	                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @if(!empty($e_cliente) || !empty($e_tipo_documento) || !empty($e_forma_pago) || !empty($e_tipo_pago))
	    <div class="border p-3 mb-3">
			<h3 class="titulo-h1 mb-4">Estadisticas de las ventas</h3>
			<div id="estadisticas-ventas" class="w-100"></div>
		</div>
	@endif
            
@endsection

@if(!empty($e_cliente) || !empty($e_tipo_documento) || !empty($e_forma_pago) || !empty($e_tipo_pago))

	@section('scripts')

		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script>
			google.charts.load("current", {packages:["corechart"]});
			google.charts.setOnLoadCallback(drawChart);
			function drawChart() {

				/*var data = google.visualization.arrayToDataTable([
					[
											],
					[
											],
				]);*/

				var data = google.visualization.arrayToDataTable([
		         ['', '', { role: 'style' }],
								      ]);

				var view = new google.visualization.DataView(data);

				var options = {
					height: 400,
		          	//bars: 'horizontal', // Required for Material Bar Charts.
				    bar: {groupWidth: "95%"},
			        //legend: { position: "none" },
		        };

				var chart = new google.visualization.BarChart(document.getElementById('estadisticas-ventas'));
				chart.draw(data, options);
				//chart.draw(data, google.charts.Bar.convertOptions(options));

			}
		</script>

	@endsection

@endif