@extends('layouts.app')

@section('content')

<style>
    .select2-container--default .select2-selection--single{
    margin-bottom: 5px;
    /* margin-top: 5px; */
}

.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection--single {
    height: 44px !important;
    border-radius: 0.375rem !important;
    border: 1px solid #cad1d7 !important;
}
#receipt_section{
        display: none;
    }

@media print{

#receipt_section{
    display: block;
}

}
</style>

@include('users.partials.header', [
    'title' => __('Recibos Realizados'),
    '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->prepend('Selecciona un vendedor',''),null,['class'=>'form-control select2','id'=>'vendedor_filtro'])}}
                        </div>
                        <div class="col-sm-2 col-md-2 col-lg-4">
                            {{Form::label('CLIENTE','Clientes')}}

                        {{Form::select('CLIENTE',$clientes,null,['class'=>'form-control','id'=>'cliente_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-8 col-lg-8 col-md-8">
                            <label for="" class="col-md-12">Accion</label>
                            @if(Auth::user()->rol=='Administrador')

                            <button type="button" class="btn btn-danger btn_anular" >Anular</button>
                            @endif
                            <button type="button" class="btn btn-success btn_imprimir"  data-href="{{url('promocion/listado_recibo_realizado')}}">Imprimir</button>
                            <button type="button" class="btn btn-success btn_imprimir " data-href="{{url('promocion/listado_recibo_realizado_firma')}}">Imprimir Formato Firma</button>
                            <button type="button" class="btn btn-success btn_exportar"  data-href="{{url('promocion/listado_recibo_realizado')}}">Exportar Excel</button>
                            <button type="button" class="btn btn-success btn_exportar"   data-href="{{url('promocion/listado_recibo_realizado_firma')}}">Cuentas interbancarias</button>
                            <button type="button" class="btn btn-success btn_exportar"   data-href="{{url('promocion/listado_recibo_realizado_plantilla_beneficiario')}}">Plantilla Beneficiario</button>

                       
                        </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></b></th>
                                    <th scope="col"><b>VENDEDOR</b></th>
                                    <th scope="col"><b>CLIENTE</b></th>
                                    <th scope="col"><b>RECIBO NO</b></th>
                                    <th scope="col"><b>MONTO</b></th>
                                    <th scope="col"><b>CREADO POR</b></th>
                                    <th scope="col"><b>CEDULA</b></th>
                                    <th scope="col"><b>NUMERO DE CUENTA</b></th>
                                    <th scope="col"><b>INSTITUCION FINANCIERA</b></th>
                                    <th scope="col"><b>TIPO DE CUENTA</b></th>
                                    <th scope="col"><b>NOMBRE DEPENDIENTE</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 id="receipt_section">

</div>

<div class="modal fade" id="exampleModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

    
@endsection

@section('js')
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

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

$('#cliente_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()],
     'Esta semana': [moment().startOf('week'), moment().endOf('week')],
     'Ú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/datatablerecibos_realizado')}}",
      "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.CLIENTE=$("#cliente_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:'FACTURA_CHECKBOX',name:'FACTURA_CHECKBOX' },
        {data:'VENDEDOR',name:'VENDEDOR' },
        {data:'CLIENTE', name:'CLIENTE'},
        {data:'RECIBO_NO',name:'RECIBO_NO' },
        {data:'MONTO_RECIBO',name:'MONTO_RECIBO' },
        {data:'CREATED_BY',name:'CREATED_BY' },
        {data:'cedula',name:'cedula' },
        {data:'numero_cuenta',name:'numero_cuenta' },
        {data:'institucion_financiera',name:'institucion_financiera' },
        {data:'tipo_cuenta',name:'tipo_cuenta' },
        {data:'nombre_dependiente',name:'nombre_dependiente' },
        {data:'created_at',name:'created_at' },
        
    ],

});


$('#Table-promoaciones tbody').on('click','tr',function(){
    var url=$(this).attr('action');
   
    $.ajax({
        url:url,
        type:'POST',
        success:function(result){
            if(result.success){
                console.log(result.data);
                $("#receipt_section").empty();
                $("#receipt_section").html(result.view_print);
                $("#receipt_section").printThis();

            }else{
                toastr.error("No se ha podido generar el recibo");
            }

        },
        error: function(error) {
          // Manejo de errores, si es necesario
          console.error('Error al enviar la solicitud Ajax:', error);
        }
    });
});

$('.btn_exportar').on('click',function(){

    var arreglo_selected=[];
 
    $('#Table-promoaciones tr').each(function() {
        var checkbox = $(this).find('.recibo_id');
       

        // Verificar si el checkbox está marcado
        if (checkbox.prop('checked')) {
          // Construir el objeto con los datos relacionados
      
          var registro = {
            recibo_id: checkbox.val()
          
          };
          arreglo_selected.push(registro);
        }
      });
      
    // if(arreglo_selected.length<=0){
    //     toastr.warning("No hay recibos seleccionadas");
    //     return;
    // }

    var url=$(this).attr('data-href');
    console.log(url);

    var start_date=$("#reportrange").data('daterangepicker').startDate.format('YYYYMMDD');
    var end_date=$("#reportrange").data('daterangepicker').endDate.format('YYYYMMDD');
    var vendedor=$("#vendedor_filtro").val();
    var CLIENTE=$("#cliente_filtro").val();
    if(vendedor==""){
        toastr.warning('Por favor selecciona un vendedor');
        return;
    }

    var data={start_date:start_date,end_date:end_date,vendedor:vendedor,CLIENTE:CLIENTE,facturas_selected: arreglo_selected};

    $.ajax({
        url:url,
        type:'POST',
        data:data,
        success:function(result){
            console.log(result.success);
            if(result.success){
                console.log(result.data);
                $("#receipt_section").empty();
                $("#receipt_section").html(result.view);
                ExportToExcel('xlsx',$("#vendedor_filtro option:selected").text());

            }else{
                toastr.error("No se ha podido generar el reporte");
            }

        },
        error: function(error) {
          // Manejo de errores, si es necesario
          console.error('Error al enviar la solicitud Ajax:', error);
        }
    });
});

// impresion de los recibos
$('.btn_imprimir').on('click',function(){
    var url=$(this).attr('data-href');
    console.log(url);

    var start_date=$("#reportrange").data('daterangepicker').startDate.format('YYYYMMDD');
    var end_date=$("#reportrange").data('daterangepicker').endDate.format('YYYYMMDD');
    var vendedor=$("#vendedor_filtro").val();
    var CLIENTE=$("#cliente_filtro").val();
    if(vendedor==""){
        toastr.warning('Por favor selecciona un vendedor');
        return;
    }

    var arreglo_selected=[];
 
 $('#Table-promoaciones tr').each(function() {
     var checkbox = $(this).find('.recibo_id');
    

     // Verificar si el checkbox está marcado
     if (checkbox.prop('checked')) {
       // Construir el objeto con los datos relacionados
   
       var registro = {
         recibo_id: checkbox.val()
       
       };
       arreglo_selected.push(registro);
     }
   });
   
//  if(arreglo_selected.length<=0){
//      toastr.warning("No hay recibos seleccionadas");
//      return;
//  }


    var data={start_date:start_date,end_date:end_date,vendedor:vendedor,CLIENTE:CLIENTE,facturas_selected:arreglo_selected};

    $.ajax({
        url:url,
        type:'POST',
        data:data,
        success:function(result){
            console.log(result.success);
            if(result.success){
                console.log(result.data);
                $("#receipt_section").empty();
                $("#receipt_section").html(result.view);
                $("#receipt_section").printThis();

            }else{
                toastr.error("No se ha podido generar el reporte");
            }

        },
        error: function(error) {
          // Manejo de errores, si es necesario
          console.error('Error al enviar la solicitud Ajax:', error);
        }
    });
});
// fin impresion de los recibos 

$("#vendedor_filtro,#cliente_filtro").on('change',function(){
    table_nueva.ajax.reload();
});
$(".btn_anular").on('click',async function(){
    var arreglo_selected=[];
    // var data_selected=await $(".factura_id:checked").each(function(){
    //    arreglo_selected.push($(this).val());
    // });
    var monto=0;
    $('#Table-promoaciones tr').each(function() {
        var checkbox = $(this).find('.recibo_id');
       

        // Verificar si el checkbox está marcado
        if (checkbox.prop('checked')) {
          // Construir el objeto con los datos relacionados
      
          var registro = {
            recibo_id: checkbox.val()
          
          };
          arreglo_selected.push(registro);
        }
      });
      
    if(arreglo_selected.length>0){
       console.log('datos::'+arreglo_selected);
    Swal.fire({
  title: 'Estas seguro?',
  text: "Deseas anular estos recibos?!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Si, anular!'
}).then((result) => {
  if (result.isConfirmed) {
    $.ajax({
        url:"{{route('anular_recibo')}}",
        type:'POST',
        data: { facturas_selected: arreglo_selected},
        success:function(result){
            if(result.success){
                console.log(result.data);
     
                toastr.success("Se ha anulado el recibo de forma correcta");
                table_nueva.ajax.reload();
            }else{
                toastr.error("No se ha podido anular el recibo");
            }

        },
        error: function(error) {
          // Manejo de errores, si es necesario
          console.error('Error al enviar la solicitud Ajax:', error);
        }
    });
    
   
  }
});
    }else{
        toastr.warning("No hay facturas seleccionadas");
    }
});
});


// {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' }
$(document).ajaxStart(function(){
    show();
});
 
$(document).ajaxComplete(function(){
 hide();
});

function ExportToExcel(type,nombre, fn, dl) {
            var elt = document.getElementById('factura_imprimir');
            var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
            return dl ?
                XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
                XLSX.writeFile(wb, fn || (nombre+'.' + (type || 'xlsx')));
        }



function mark_checkbox(event){
 
    event.stopPropagation();
//     event.preventDefault(); // Evita el comportamiento predeterminado del checkbox
//   const checkbox = event.target;
}
function detalle_factura(element){
    var url=$(element).attr('data-href');
    $.ajax({
        url:url,
        success:function(result){
            $("#exampleModalEdit").html(result);
            $("#exampleModalEdit").modal('show');

        },
        error:function(err){
            console.log(err);
        }
    });


}
</script>

@endsection