@extends('layouts.admin')
@section('estilos')
<link href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet">
@endsection
@section('contenido')
<section>
  <div class="row border">
    {!!Form::open(array('method'=>'POST','autocomplete'=>'off','id'=>'srhVentas'))!!}
    <h4>Filtrar ventas <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i>&nbsp;Buscar</button> </h4>
    <div class="col-lg-3 col-md-6 col-sm-12" style="padding:0">
      <div class="col-md-6 col-xs-12">
        <label>Desde</label>
        <input type="text" class="form-control fecha" name="fini" placeholder="Inicio de búsqueda" onkeypress="return false" value="{{$rangoDo}}" required>
      </div>
      <div class="col-md-6 col-xs-12">
        <label>Hasta</label>
        <input type="text" class="form-control fecha" name="ffin" placeholder="Fin de búsqueda" onkeypress="return false" value="{{$hoy}}" required>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" >
      <label>Cliente</label>
      <input type="text" class="form-control" name="cliente" placeholder="Nombre Comercial" onkeypress="return soloLetras(event)">
    </div>
    <div class="col-lg-3 col-md-6">
      <label>Ejecutivo a cargo</label>
      <select class="form-control" name="ejecutivo">
        <option value="">Seleccione...</option>
        @foreach($emples as $eje)
        <option value="{{$eje->emple_id}}">{{$eje->cnt_nombres}} {{$eje->cnt_apellidos}}</option>
        @endforeach
      </select>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <label>Canal</label>
      <select class="form-control" id="canal" name="canal">
        <option value="">Seleccione...</option>
        @foreach($canales as $c)
        <option value="{{$c->canal_id}}">{{$c->canal_nombre}}</option>
        @endforeach
      </select>
    </div>
    {!!Form::close()!!}
  </div>
</section>
<section class="m-t-10">
  <div class="col-md-6 border scrollx" id="tbVS"></div>
  <div class="col-md-6 border scrollx" id="tbVP"></div>
</section>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.es.min.js') }}"></script>
<script type="text/javascript">
  $('.fecha').datepicker({autoclose: true,format: 'yyyy-mm-dd',language:'es',orientation: "bottom auto"});
  $(function(){$('#srhVentas').submit() });

  $('#srhVentas').submit( function(event){
    event.preventDefault();
    if (valfecha()){
      datos = new FormData($(this)[0]);
      $('#tbVS').html('<div class="text-center"><img width="20%"" src="https://i.giphy.com/media/6L84czrwSd9DO/giphy.webp"></div>');
      $('#tbVP').html('<div class="text-center"><img width="20%"" src="https://i.giphy.com/media/6L84czrwSd9DO/giphy.webp"></div>');
      contp = '';conts = '';
      $.ajax({
        data:datos,
        url:url+'ventas',
        type:'POST',
        cache:false,
        processData:false,
        contentType:false,
        success:function(res){
          var r = JSON.parse(res);
          var pr = r.p; var sr = r.s;
          contp ='<h3>Ventas de Productos</h3><table class="table table-striped" id="tbvp"><thead><th>Cliente</th><th>Concepto</th><th>Fecha</th><th>Total</th></thead><tbody>';
          for (v of pr) { contp+='<tr><td><b>'+v.cliente+'</b></td><td>'+v.nom+'</td><td>'+formatDate(v.fecha)+'</td><td>'+v.total+'</td></tr>'; }
          contp+='</tbody></table><script>var table = tableData2("tbvp");<\/script>';
          conts ='<h3>Ventas de Servicios</h3><table class="table table-striped" id="tbvs"><thead><th>Cliente</th><th>Concepto</th><th>Fecha</th><th>Total</th></thead><tbody>';
          for (v of sr) { conts+='<tr><td><b>'+v.cliente+'</b></td><td>'+v.nom+'</td><td>'+formatDate(v.fecha)+'</td><td>'+v.total+'</td></tr>'; }
          conts+='</tbody></table><script>var table = tableData2("tbvs");<\/script>';
          $('#tbVS').html(''); $('#tbVS').append(conts);$('#tbVP').html(''); $('#tbVP').append(contp);
        },
        error:function(){ console.log('error'); }
      });
    }
    else {alerta('Inválido','La fecha de inicio no puede ser mayor a la fecha final','warning','Aceptar'); $('input[name=fini]').focus();};
  });

  function tableData2($nombre){
  	var table = $("#"+$nombre).DataTable({"dom":"<'myfilter'f><'mylength'l>trip","order":[[ 2, "desc" ]],"language":  { "sProcessing":"Procesando...","sLengthMenu":"Mostrar _MENU_ registros","sZeroRecords":"No se encontraron resultados","sEmptyTable":"Ningún dato disponible en esta tabla","sInfo":"Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros","sInfoEmpty":"Mostrando registros del 0 al 0 de un total de 0 registros","sInfoFiltered":"(filtrado de un total de _MAX_ registros)","sInfoPostFix":"","sSearch":"Buscar:","searchPlaceholder": "Buscar...","sUrl":"","sInfoThousands":",","sLoadingRecords":"Cargando...","oPaginate": {"sFirst":"Primero","sLast":"Último","sNext":"Siguiente","sPrevious":"Anterior"},"oAria": {"sSortAscending":  ": Activar para ordenar la columna de manera ascendente","sSortDescending": ": Activar para ordenar la columna de manera descendente"}}});
  	var ta = jQuery('#'+$nombre).DataTable();$('#'+$nombre+'_filter input').keyup( function () {ta.search( jQuery.fn.DataTable.ext.type.search.string( this.value ) ).draw();});return table;
  }

  function valfecha(){
    day1 = $('input[name=fini]').val().split("-");
    day2 = $('input[name=ffin]').val().split("-");
    console.log(day1);
    console.log(day2);
    if (parseInt(day2[2]) >= parseInt(day1[2])) return true;
    else if (parseInt(day2[1]) >= parseInt(day1[1])) return true;
    else if (parseInt(day2[0]) >= parseInt(day1[0])) return true;
    else return false; }
</script>
@endsection