@extends('layouts.app')

@section('content')

@include('users.partials.header', [
    'title' => __('Articulos'),
    '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-articulos-sap"><i class="fas fa-sync-alt"></i>&nbsp;Sincronizar SAP</button>
                            <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-plus"></i>&nbsp;Nuevo Articulo</button>
                        </div>
                        <div class="col-sm-4 col-lg-4 mb-3" >
                            <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">
                            <select name="" id="clasificacion" class="form-control">
                                <option value="">TODOS</option>
                                @foreach($familias as $codigo => $nombre)
                                    <option value="{{ $codigo }}">{{ $nombre }}</option>
                                @endforeach
                            </select>
                        </div>



                    </div>
                        <br>
         
                        <table class="table align-items-center table-flush table-striped" id="Table-promoaciones" >
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col"><b>ID</b></th>
                                    <th scope="col"><b>NOMBRE</b></th>
                                    <th scope="col"><b>CLASIFICACION</b></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </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')
<div class="modal fade" id="modalSyncArticulosSap" 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 artículos SAP</h5>
                <button type="button" class="close sync-articulos-close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="syncArticulosText" class="mb-2">Preparando sincronización...</p>
                <div class="progress">
                    <div id="syncArticulosBar" 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')
<script src="{{ asset('js/Articulo.js?v=1.0.3') }}"></script>

<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:"{{ url('promocion/datatablePromociones')}}",
      "data":function(d){
        d.clasificacion=$('#clasificacion').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:'ARTICULO',name:'ARTICULO' },
        {data:'DESCRIPCION', name:'DESCRIPCION'},
        {data:'CLASIFICACION_1',name:'CLASIFICACION_1' }
    ],

});

let syncArticulosActivo = false;

function mostrarSyncArticulosOverlay() {
    $('#modalSyncArticulosSap').modal('show');
    $('body').css('overflow', 'hidden');
}

function ocultarSyncArticulosOverlay() {
    $('#modalSyncArticulosSap').modal('hide');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open').css('overflow', '');
}

function sincronizarArticulosSap(continuar = false) {
    if (!continuar) {
        syncArticulosActivo = true;
        $('#syncArticulosText').text('Iniciando sincronización...');
        $('#syncArticulosBar').css('width', '10%').text('10%');
        mostrarSyncArticulosOverlay();
    }

    $.ajax({
        url: "{{ route('promocion_articulos_sync') }}",
        type: "GET",
        dataType: "json",
        data: {
            continuar: continuar ? 1 : 0
        },
        success: function (response) {
            try {
                if (response.ok) {
                    $('#syncArticulosText').text('Procesados: ' + response.total + ' registros');

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

                    $('#syncArticulosBar').css('width', '100%').text('100%');
                    $('#syncArticulosText').text('Sincronización completada. Registros procesados: ' + response.total);
                    setTimeout(function () {
                        ocultarSyncArticulosOverlay();
                        table.ajax.reload(null, false);
                        syncArticulosActivo = false;
                    }, 1200);
                    return;
                }

                syncArticulosActivo = false;
                ocultarSyncArticulosOverlay();
                toastr.warning(response.error || 'No se pudo sincronizar');
            } catch (e) {
                syncArticulosActivo = false;
                ocultarSyncArticulosOverlay();
                toastr.error('Ocurrió un error procesando la respuesta de SAP');
            }
        },
        error: function () {
            syncArticulosActivo = false;
            ocultarSyncArticulosOverlay();
            toastr.error('No se pudo sincronizar desde SAP');
        }
    });
}

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

    sincronizarArticulosSap(false);
});

$(document).on('click', '.sync-articulos-close', function () {
    if (syncArticulosActivo) {
        return;
    }

    ocultarSyncArticulosOverlay();
});

$('#modalSyncArticulosSap').on('hidden.bs.modal', function () {
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open').css('overflow', '');
});


</script>

@endsection