@extends('template.layoutAdmin', ['activeButton'=>''])
@section('title')
{{  trans('dashboard.dashboard') }}				
@endsection

@section('cabecera')
    <h1>
        {{  trans('dashboard.dashboard') }}				

        <small>  {{  trans('dashboard.totalVentasxServicio') }}</small>

    </h1>
@endsection

@section('contenido')
<div class="row">
    <div class="col-12">
        @if(Session::has('message'))
            <div class="alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                😉 {{Session::get('message')}} 😉
            </div>
        @endif
        @if(Session::has('message_error'))
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                😓 {{Session::get('message_error')}} 😒
            </div>
        @endif
    </div>


    <div class="col-12">
        <div class="nav-wrapper ml-3 mr-3">
            <ul class="nav nav-pills nav-fill nav-pills-warning flex-column flex-md-row" id="tabs-icons-text" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" > {{  trans('dashboard.diario') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{route('dashboard.ventas.periodicas').'?filter=week'}}"> {{  trans('dashboard.semanal') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{route('dashboard.ventas.periodicas').'?filter=month'}}"> {{  trans('dashboard.mensual') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{route('dashboard.ventas.periodicas').'?filter=year'}}"> {{  trans('dashboard.anual') }}</a>
                </li>
            </ul>
        </div>
        <br>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="dia">
                <div class="box">
                    <div class="box-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h3 class="box-title"> {{  trans('dashboard.totalVentas') }} <small> {{  trans('dashboard.deHoy') }}</small></h3>
                            </div>
                            <div class="col-md-6 text-right mt-5">
                                <i class="fa fa-file-pdf-o btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal"> </i>

                            </div>
                        </div>
                    </div>
                    <div class="box-body" id="divderecha">
                        <div class="row m-2">
                            <div class="col-md-6">
                                <canvas id="ventasDia"></canvas>
                            </div>
                            <div class="col-md-6">
                                <div class="card card-body">
                                    <div class="row">
                                        <table class="table table-striped border shadow-sm margin-top-10 text-center table-sm">
                                            <thead>
                                                <tr>
                                                    <th scope="col"> {{  trans('dashboard.servicio') }}	</th>
                                                    <th scope="col"> {{  trans('dashboard.totalEnVentas') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td scope="col"> {{  trans('dashboard.ordenar') }}</td>
                                                    <td scope="col">{{App\Helpers\monedaH::getCurrentSimbol()}} {{number_format($data['dia']['ordenar']['total'], 1, ',', '.')}}</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"> {{  trans('dashboard.paraLlevar') }}</th>
                                                    <td scope="col">{{App\Helpers\monedaH::getCurrentSimbol()}} {{number_format($data['dia']['parallevar']['total'], 1, ',', '.')}}</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"> {{  trans('dashboard.domicilios') }}</td>
                                                    <td scope="col">{{App\Helpers\monedaH::getCurrentSimbol()}} {{number_format($data['dia']['domicilios']['total'], 1, ',', '.')}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="box" id="divBajo">
                    <div class="box-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h3 class="box-title"> Lista de ventas Diarias</h3>
                            </div>
                            <div class="col-md-6"></div>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-striped border shadow-sm margin-top-10 text-center table-sm">
                            <thead>
                                <tr>
                                    <th>
                                        {{  trans('dashboard.fecha') }}</th>
                                    <th>
                                        {{  trans('dashboard.ordenar') }}				
                                    </th>
                                    <th>
                                        {{  trans('dashboard.domicilios') }}				
                                    </th>
                                    <th> {{  trans('dashboard.paraLlevar') }}</th>
                                    <th> {{  trans('dashboard.ventas') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- {{ dd($data['list'] ) }} --}}
                                {{-- {{$data['porTip']['ordenar'][0]->total }} --}}
                                @foreach($data['list'] as $key=>$d)
                                    <tr>
                                        <td>{{date("d M Y", strtotime($d['fechas']))}}</td>
                                        <td>{{App\Helpers\monedaH::getCurrentSimbol()}} {{ $d['ordenar']!=null ?number_format($d['ordenar'], 1, ',', '.'): "0"  }}</td>
                                        <td>{{App\Helpers\monedaH::getCurrentSimbol()}} {{  $d['ParaLlevar']!=null ?number_format($d['ParaLlevar'], 1, ',', '.'): "0"  }}</td>
                                        <td>{{App\Helpers\monedaH::getCurrentSimbol()}} {{ $d['Domicilios']!=null ? number_format($d['Domicilios'], 1, ',', '.'): "0"  }}</td>
                                        <td>{{App\Helpers\monedaH::getCurrentSimbol()}} {{number_format($d['total'], 1, ',', '.')}}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

         <div class="form-group">
             <button class="btn btn-primary form-control" style="background: #DB3920; border:#DB3920;" onclick="exportarPdf()">
                <i class="fa fa-file-pdf-o "></i>
                PDF</button>
         </div>



         <div class="form-group">
            <button class="btn btn-primary form-control" style="background: #1b926c; border:#1b926c;" onclick="exportarExcel()">
               <i class="fa fa-file-excel-o "></i>
               Excel</button>

        </div>

        </div>

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

@endsection

@section('js')
<script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js')}}"></script>
<script src="{{ asset('assets/plugins/excel/xlsx.full.min.js')}}"></script>

<script>
    var datehoy=new Date();
    var fecha=datehoy.getDate() + "_" + (datehoy.getMonth() +1) + "_" + datehoy.getFullYear();

      function exportarExcel(){

            //Creamos un Elemento Temporal en forma de enlace
      var tmpElemento = document.createElement('a');
      // obtenemos la información desde el div que lo contiene en el html
      // Obtenemos la información de la tabla
      var data_type = 'data:application/vnd.ms-excel';
      var tabla_div = document.getElementById('divBajo');
      var tabla_html = tabla_div.outerHTML.replace(/ /g, '%20');
      tmpElemento.href = data_type + ', ' + tabla_html;
      //Asignamos el nombre a nuestro EXCEL
      tmpElemento.download = 'Informe_ventas_por_Dia_'+fecha+'.xls';
      // Simulamos el click al elemento creado para descargarlo
      tmpElemento.click();
      }


  function exportarPdf(){
      // swal({
      //     title: "Generando...",
      //     text: "",
      //     imageUrl: '{{ asset("images/preloader.gif") }}',
      //     showConfirmButton: false,
      //     allowOutsideClick: false
      //     });
      const options = {
    margin: 0.4,
    filename: 'Informe_ventas_por_Dia_'+fecha,
    image: {
      type: 'jpeg',
      quality: 0.78
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'portrait'
    }
  }
  const encabezado=' <div style="background: #DB3920 ; text-align: center;">'+
                  '<img src="{{ asset("images/logo.png") }}" alt="" width="200px">'+
                  '</div>';
//   const grafica = document.getElementById('tabla').innerHTML;
  const derecha = document.getElementById('divderecha').innerHTML;
  const tablaAbajo = document.getElementById('divBajo').innerHTML;


    html2pdf().from(encabezado+derecha+tablaAbajo).set(options).save();
  }
</script>

    <script>
        var datos = {!!json_encode($data)!!};
        var configDay = {
			type: 'doughnut',
			data: {
				datasets: [{
					data: [
						datos['dia']['ordenar']['total'].toString(),
						datos['dia']['parallevar']['total'].toString(),
						datos['dia']['domicilios']['total'].toString()
					],
					backgroundColor: [
						'rgb(46, 48, 146)',
						'rgb(101, 45, 145)',
						'rgb(237, 2, 140)'
					],
					label: 'Dataset 1'
				}],
				labels: [
                    " {{  trans('dashboard.ordenar') }}",
                    " {{  trans('dashboard.paraLlevar') }}",
                    " {{  trans('dashboard.domicilios') }}"
				]
			},
			options: {
				responsive: true,
				legend: {
					position: 'top',
				},
				title: {
					display: true,
				},
				animation: {
					animateScale: true,
					animateRotate: true
				}
			}
		};

        var data = [];

        /* datos.list.forEach( d => {
            if(data.length < 5)
            {
                data.push({
                    x: d.fecha,
                    y: d.total
                })
            }
        });

        var config = {
			type: 'line',
			data: {
				datasets: [{
					label: 'Dataset with string point data',
					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
					borderColor: window.chartColors.red,
					fill: false,
					data: data,
				}, {
					label: 'Dataset with date object point data',
					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
					borderColor: window.chartColors.blue,
					fill: false,
					data: data
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Chart.js Time Point Data'
				},
				scales: {
					xAxes: [{
						type: 'time',
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Date'
						},
						ticks: {
							major: {
								fontStyle: 'bold',
								fontColor: '#FF0000'
							}
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'value'
						}
					}]
				}
			}
		}; */
	    let ctxDay = document.getElementById('ventasDia').getContext('2d');
		window.onload = function() {
			window.myPie = new Chart(ctxDay, configDay);
        };

    </script>
@endsection