@extends('layouts.app')

@section('content')

@include('users.partials.header', [
    'title' => __('Resumen Facturas Saldadas con promocion'),
    'description' => __(''),
    'class' => 'col-lg-12'
]) 

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-12 order-xl-1">
            <div class="card shadow">

                <div class="card-body">
                    <div class="table-responsive" style="overflow-x: hidden !important;">
                        <!-- Projects table -->
                    <div class="row">
                        {{-- <div class="col-sm-12 col-lg-12 col-md-12 mb-3 float-right">

                            <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-plus"></i>&nbsp;</button>
                        </div> --}}
                        <div class="col-sm-4 col-lg-4 mb-3" >
                            {{Form::label('buscar','Buscar')}}

                            <input class="form-control" placeholder="Buscar" onkeyup="saerch(this);" id="btnsearch" type="text">
                        </div>
                        <div class="col-sm-2 col-md-2 col-lg-4">
                            {{Form::label('vendedores','Vendedor')}}
                        {{Form::select('vendedores',$vendedores,null,['class'=>'form-control','id'=>'vendedor_filtro','multiple'])}}
                        </div>
                        <div class="col-sm-2 col-md-2 col-lg-4">
                            {{Form::label('Zona','Zona')}}

                        {{Form::select('Zona',$Zona,null,['class'=>'form-control','id'=>'zona_filtro','multiple'])}}
                        </div>
                        <div class="col-sm-2 col-md-2 col-lg-4">
                            {{Form::label('fecha','Fecha')}}

                            <div id="reportrange" style="background: #fff; cursor: pointer; padding: 9px 10px; border: 1px solid #ccc;border-radius: 8px !important;">
                                <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;
                                <span>August 17, 2021 - September 15, 2021</span> <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div>
                        </div>

                        {{-- <div class="col-sm-2 col-md-2 col-lg-4">
                            <select name="" id="clasificacion" class="form-control">
                                <option value="">TODOS</option>
                                <option value="ETHICOS">ETHICOS</option>
                                <option value="OTC">OTC</option>
                                <option value="GENERICOS">GENERICOS</option>
                            </select>
                        </div> --}}



                    </div>
                        <br>
         
                        <div class="table-responsive">
                        <table class="table align-items-center table-flush table-striped" id="Table-promoaciones" >
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col"><b>VENDEDOR</b></th>
                                    <th scope="col"><b>NOMBRE_VENDEDOR</b></th>
                                    <th scope="col"><b>RUTA</b></th>
                                    <th scope="col"><b>NOM_ZONA</b></th>
                                    <th scope="col"><b>CLIENTE</b></th>
                                    <th scope="col"><b>NOMBRE_CLI</b></th>
                                    <th scope="col"><b>FACTURA</b></th>
                                    <th scope="col"><b>MONTO_PROM</b></th>
                                    <th scope="col"><b>FECHA</b></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    </div>
 

                </div>

            </div>
        </div>
    </div>
    {{-- <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> --}}
</div>
{{-- <input type="text" name="" id="global" value="nacional" hidden> --}}
<div class="modal fade" id="exampleModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@include('promocion::Articulos.modal')

    
@endsection

@section('js')

<script>
    $(document).ready(function(){
     $.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
  });
  
//   $(".select2").select2({
//     placeholder:"Selecciona un filtro"
//   });

$('#zona_filtro,#vendedor_filtro').multipleSelect({
  filter:true,
  minimumCountSelected: 2
  // openOnHover: true

});

start = moment().subtract(6, 'days');
end = moment();




$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$('#reportrange').daterangepicker({
       startDate: start,
       endDate: end,
       ranges: {
        'Hoy': [moment(), moment()],
     'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
     'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
     'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
     'Este mes': [moment().startOf('month'), moment().endOf('month')],
     'El mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
     'Este año': [moment().startOf('year'), moment().endOf('year')],
     'El año pasado': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
         }

   }, function (start, end) {
       
       $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

          
          $('.lds-roller').show();
        
          var start=$("#reportrange").data('daterangepicker').startDate.format('YYYYMMDD');
           var end=$("#reportrange").data('daterangepicker').endDate.format('YYYYMMDD');
           table_nueva.ajax.reload();
         
     });  

     var table_nueva=$('#Table-promoaciones').DataTable({
          processing:true,
         serverSide:true,
         pageLength: 15,
    ajax:
    {
        type: "POST",
// contentType: "application/json; charset=utf-8",
      url:"{{ url('promocion/datatableResumenPromociones')}}",
      "data":function(d){
        d.start_date=$("#reportrange").data('daterangepicker').startDate.format('YYYYMMDD');
        d.end_date=$("#reportrange").data('daterangepicker').endDate.format('YYYYMMDD');
        d.vendedor=$("#vendedor_filtro").val();
        d.zona=$("#zona_filtro").val();
      }
    },

    language: {
      searchPlaceholder: "Buscar",
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }

      }, 

      "fnDrawCallback": function (oSettings) {
        // var conditional=
        $(".previous a").html('<i class="ni ni-bold-left"></i>');
        $(".next  a").html('<i class="ni ni-bold-right"></i>');

        },
    columns:[
        {data:'VENDEDOR',name:'VENDEDOR' },
        {data:'NOMBREV', name:'NOMBREV'},
        {data:'RUTA',name:'RUTA' },
        {data:'NOMBREZ',name:'NOMBREZ' },
        {data:'CLIENTE',name:'CLIENTE' },
        {data:'NOMBREC',name:'NOMBREC' },
        {data:'FACTURA',name:'FACTURA' },
        {data:'MONTOPROM',name:'MONTOPROM' },
        {data:'FECHA',name:'FECHA' },
    ],

});

$("#vendedor_filtro,#zona_filtro").on('change',function(){
    table_nueva.ajax.reload();
});

});
// {data:'VENDEDOR',name:'VENDEDOR' },
//         {data:'NOMBREV', name:'NOMBREV'},
//         {data:'RUTA',name:'RUTA' },
//         {data:'NOMBREZ',name:'NOMBREZ' },
//         {data:'CLIENTE',name:'CLIENTE' },
//         {data:'NOMBREC',name:'NOMBREC' },
//         {data:'FACTURA',name:'FACTURA' },
//         {data:'MONTOPROM',name:'MONTOPROM' },
//         {data:'FECHA',name:'FECHA' }

</script>

@endsection