@extends('layouts.app')

@section('content')

@include('users.partials.header', [
    'title' => __('Clientes con Promocion'),
    'description' => __(''),
    'class' => 'col-lg-12'
]) 

<style>
    #Table-promoaciones tbody tr{
        cursor: pointer;
    }
</style>

<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 text-right">
                            <button type="button" class="btn btn-info mr-2 btn-sync-clientes-sap"><i class="fas fa-sync-alt"></i>&nbsp;Sincronizar SAP</button>
                            <button type="button" class="btn btn-success agregar_promocion"><i class="fas fa-plus"></i>&nbsp;Clientes Promocion</button>
                        </div>
                        <div class="col-sm-12 col-lg-12 mb-3" >
                            <div class="row">
                                <div class="col-md-4">
                                    {{Form::label('Filtrar','Filtrar',['class'=>'label-control'])}}
                            <input class="form-control" placeholder="Buscar" onkeyup="saerch(this);" id="btnsearch" type="text">
                        </div>
                     
                        <div class="col-md-4">
                            {{Form::label('Filtrar','Promocion',['class'=>'label-control'])}}

                            {{Form::select('PROMO_FILTER',['S'=>'Activo','N'=>'INACTIVO',''=>'TODOS'],'S',['class'=>'form-control PROMO_FILTER'])}}

                        </div>
                        </div>
                        </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>CLIENTE</b></th>
                                    <th scope="col"><b>NOMBRE CLIENTE</b></th>
                                    <th scope="col"><b>PROMOCION</b></th>
                                    <th scope="col"><b>DESDE</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>
<div class="modal fade" id="modalSyncPromocionSap" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sincronizando clientes SAP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="syncPromocionText" class="mb-2">Preparando sincronización...</p>
                <div class="progress">
                    <div id="syncPromocionBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%">0%</div>
                </div>
            </div>
        </div>
    </div>
</div>

    
@endsection

@section('js')
@if(Session::has('success'))
    <script>
        toastr.success('{!! session('success') !!}');

    </script>
@endif

@if(Session::has('error'))
    <script>
        toastr.error('{!! session('error') !!}');

    </script>
@endif



<script>
     $.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
  });
  
  table=$('#Table-promoaciones').DataTable({
         "paging":   true,
        "info": false,
        processing:true,
         serverSide:true,
         "pageLength": 15,
    ajax:
    {
      url:"{{ route('promocion_ciente')}}",
      "data":function(d){
        d.PROMO_FILTER=$('.PROMO_FILTER').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:'CLIENTE',name:'CLIENTE',width:'50px',orderable:false },
        {data:'NOMBRE_CLIENTE',name:'NOMBRE_CLIENTE',orderable:false },

        {data:'PROMOCION',name:'PROMOCION',orderable:false },
        {data:'DESDE',name:'DESDE',orderable:false },
    ],

});

$('.PROMO_FILTER').on('change',function(){
  
    table.ajax.reload();
});

let syncPromocionActivo = false;
let syncPromocionSaltados = 0;
function sincronizarPromocionSap(continuar = false) {
    if (!continuar) {
        syncPromocionActivo = true;
        syncPromocionSaltados = 0;
        $('#syncPromocionText').text('Iniciando sincronización...');
        $('#syncPromocionBar').css('width', '10%').text('10%');
        $('#modalSyncPromocionSap').modal('show');
    }

    $.ajax({
        url: "{{ route('promocion_ciente_sync') }}",
        type: "GET",
        data: {
            continuar: continuar ? 1 : 0
        },
        success: function (response) {
            if (response.ok) {
                syncPromocionSaltados += parseInt(response.skipped_missing_clientes || 0, 10);
                $('#syncPromocionText').text('Procesados: ' + response.total + ' registros');

                if (response.has_more) {
                    $('#syncPromocionBar').css('width', '55%').text('Sincronizando...');
                    sincronizarPromocionSap(true);
                    return;
                }

                $('#syncPromocionBar').css('width', '100%').text('100%');
                $('#syncPromocionText').text(
                    'Sincronización completada. Registros procesados: ' + response.total +
                    ' | Omitidos por no existir en clientes SAP: ' + syncPromocionSaltados
                );
                setTimeout(function () {
                    $('#modalSyncPromocionSap').modal('hide');
                    table.ajax.reload(null, false);
                    syncPromocionActivo = false;
                }, 1200);
                return;
            }

            syncPromocionActivo = false;
            $('#modalSyncPromocionSap').modal('hide');
            toastr.warning(response.error || 'No se pudo sincronizar');
        },
        error: function () {
            syncPromocionActivo = false;
            $('#modalSyncPromocionSap').modal('hide');
            toastr.error('No se pudo sincronizar desde SAP');
        }
    });
}

$(".btn-sync-clientes-sap").on('click',function(){
    if (syncPromocionActivo) {
        return;
    }

    sincronizarPromocionSap(false);
});

$(".agregar_promocion").on('click',function(){
$.ajax({
    url:"{{route('agregar_promo_cliente')}}",
    success:function(result){
        $("#exampleModalEdit").html(result);
        $("#exampleModalEdit").modal('show');
    },
    error:function(err){
        console.log(err);
    }
});
});

$("#exampleModalEdit").on('shown.bs.modal',function(){
    $(".select2").select2({
        dropdownParent:$("#exampleModalEdit")
    });
    
});

$("#Table-promoaciones tbody").on('click','tr td',function(){
    var url=$(this).parent('tr').attr('data-href');

    $.ajax({
    url:url,
    success:function(result){
        $("#exampleModalEdit").html(result);
        $("#exampleModalEdit").modal('show');
    },
    error:function(err){
        console.log(err);
    }
});
});

function saerch(e){
    var name=$(e).val();
    table.search(name).draw();
  
  }



</script>

@endsection