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

@endsection

@section('cabecera')
    <h1>
      {{  trans('dashboard.dashboard') }}
        <small> {{  trans('dashboard.platoConMayorDemanda') }} </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="box">
            <div class="box-header with-border">
                <div class="row">
                    <div class="col-md-6">
                    <h3 class="box-title"> {{  trans('dashboard.lsitadoPlatos') }} </h3>
                    @if(count($search) > 0)
                      <a href="{{route('dashboard.top.demanda')}}" class="btn btn-sm btn-danger">
                        <i class="fa fa-trash"></i>
                      </a>
                    @endif
                    </div>
                    <div class="col-md-6 text-right">
                        <i class="fa fa-file-pdf-o btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal"> </i>
                        <i data-toggle="collapse" href="#collapseExample" class="fa fa-filter btn btn-sm btn-success" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="box-body">
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        <form action="" method="get">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="nombre">
                                          {{  trans('dashboard.nombre') }}
                                        </label>
                                        <input type="text"
                                            name="nombre"
                                            id="nombre"
                                            class="form-control"
                                            autocomplete="off"
                                            placeholder="{{  trans('dashboard.nombre') }}"
                                            value="{{request()->nombre == null?'':request()->nombre}}">
                                    </div>
                                </div>
                                <div class="col-4">
                                  <div class="form-group">
                                      <label for="categoria"> {{  trans('dashboard.categoria') }}</label>
                                      <select id="categoria" name="categoria" class="form-control">
                                        <option value=""> {{  trans('dashboard.seleccioneCategoria') }}</option>
                                        @foreach($categorias as $listCat)
                                          <option value="{{$listCat->idCategoria}}" {{request()->categoria == $listCat->idCategoria?'selected':''}}>{{$listCat->nombre}}</option>
                                        @endforeach
                                      </select>
                                  </div>
                                </div>
                                <div class="col-4">
                                  <div class="form-group">
                                      <label for=""> {{  trans('dashboard.limiteTop') }}</label>
                                      <select name="limite" id="limite" class="form-control">
                                          <option value="*" {{request()->limite == '*'?'selected':''}}> {{  trans('dashboard.todos') }}</option>
                                          @foreach ($limits as $item)
                                              <option value="{{$item}}" {{request()->limite != $item?'':'selected'}}> {{  trans('dashboard.losPrimeros') }} {{$item}}</option>
                                          @endforeach 
                                      </select>
                                  </div>
                              </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for=""> {{  trans('dashboard.ventas') }}	</label>
                                        <div class="row">
                                            <div class="col-6">
                                                <select name="operation" id="operation" class="form-control">
                                                    <option value="" selected disabled> {{  trans('dashboard.seleccioneUnaOpcion') }}</option>
                                                    <option value=">" {{request()->operation == '>'?'selected':''}}> {{  trans('dashboard.mayorQue') }}</option>
                                                    <option value="<" {{request()->operation == '<'?'selected':''}} > {{  trans('dashboard.menorQue') }}</option>
                                                </select>
                                            </div>
                                            <div class="col-6">
                                                <input type="number" id="byOperator" name="byOperator" class="form-control" min="1" value="{{request()->byOperator == null?'':request()->byOperator}}" onkeypress="return event.charCode >= 48" placeholder=" {{  trans('dashboard.digiteUnaCantidadEnVentas') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="fechaInicio"> {{  trans('reservas.fechaInicio') }} </label>
                                        <input type="datetime-local"
                                            name="fechaInicio"
                                            class="form-control"
                                            id="fechaInicio"
                                            autocomplete="off"
                                            placeholder=" {{  trans('reservas.rangoFecha') }} ">
                                    </div> 
                                </div> 
                                <div class="col-4">
                                  <div class="form-group">
                                      <label for="fechaFinal"> {{  trans('reservas.fechaFinal') }} </label>
                                      <input type="datetime-local"
                                          name="fechaFinal"
                                          class="form-control"
                                          id="fechaFinal"
                                          autocomplete="off"
                                          placeholder=" {{  trans('reservas.rangoFecha') }} ">
                                  </div>
                                </div> 
                              </div>
                            <div class="row">
                                <div class="col-12 text-center">
                                    <input type="submit" class="btn btn-info btn-sm" value=" {{  trans('dashboard.buscar') }}">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="tabla">

                <table class="table table-bordered table-responsive" >
                    <thead>
                      <tr>
                        <th scope="col"> {{  trans('dashboard.top') }}</th>
                        <th>{{  trans('dashboard.imagen') }}	</th>
                        <th scope="col"> {{  trans('dashboard.nombre') }} </th>
                        <th class="text-center"> {{  trans('dashboard.vendidos') }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if (count($productos) > 0)
                      @foreach ($productos as $listproduct)
                        <tr>
                            <td style="vertical-align: middle;" class="text-center">
                            {{$loop->iteration}}
                            </td>
                            <td style="vertical-align: middle;" class="text-center">
                            @if($listproduct->img == null)
                                <img src="{{env('Image').'/'.env('SERVIDOR').'/'.env('MULTISERVER').'/sinImagen/fotoSinImagen/sinImagen.jpg'}}" style="border-radius: 5px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.15)" width="50">
                            @else
                                <img class="img-responsive" style="border-radius: 5px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.15)" src="{{env('Image')}}{{$listproduct->img}}" width="50">
                            @endif
                            </td>
                            <td style="vertical-align: middle;" class="text-center">
                            {{$listproduct->nombre}}

                            </td>
                            <td style="vertical-align: middle;" class="text-center">
                                {{$listproduct->cantidad}}

                            </td>
                        </tr>
                        @endforeach
                      @else
                      <td style="vertical-align: middle;" colspan="4" class="text-center">
                           {{  trans('dashboard.noSeEncontraronRegistros') }}
                        </td>
                      @endif
                    </tbody>
                </table>
            </div>
                <div class="row" style="padding-top:  10px;padding-bottom: 10px;">
                  <div class="col-md-12 text-right">
                    {{-- {!! $productos->render() !!} --}}
                  </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>
  <script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js')}}"></script>
  <script src="{{ asset('assets/plugins/excel/xlsx.full.min.js')}}"></script>
@endsection
@section('js')
  <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('tabla');
        var tabla_html = tabla_div.outerHTML.replace(/ /g, '%20');
        tmpElemento.href = data_type + ', ' + tabla_html;
        //Asignamos el nombre a nuestro EXCEL
        tmpElemento.download = 'Informe_Top_venta_'+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_Top_venta_'+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 element = document.getElementById('tabla').innerHTML;
    //   const filtro = document.getElementById('filtros').innerHTML;
      html2pdf().from(encabezado+element).set(options).save();
    }

    // $( document ).ready(function() {
    //   $( "#fechaInicio" ).datepicker({format: 'dd/mm/yyyy', timeFormat: "hh:mm:ss"});
    //   $( "#fechaFinal" ).datepicker({format: 'dd/mm/yyyy', timeFormat: "hh:mm:ss"});
    // });
  </script>


@endsection