@section('style')
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
  <style>
  .card-danger.card-outline {
    border-top: 3px solid #dc3545;
  }

  .inicio{
    width:0%;
  }

  .final{
    width:100%;
  }

  .animacion{
    transition: all 2s ease .4s;
  }
  </style>
@endsection

@extends('layouts.template')

@section('content')
<div class="container">
  <div class="content-header">
      <div class="row">
        <div class="col-xs-12 col-sm-9">
          <h5 class="text-red text-uppercase font-weight-bold m-0">{{ $datos->title }}</h5>
          <small class="text-uppercase text-gray"><b>{{ $datos->subtitle }}</b></small>
        </div>
        <div class="col-xs-12 col-sm-3 text-right hidden-xs">
          <div class="pull-right"><img style="height: 30px;" src="https://grupoflesan.com.pe/imagenes/LogoGrupoFlesan.png"></div>
        </div>
      </div>
  </div>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <section class="content">
    <div class="col-xs-12">
      <div class="card">
        <div class="card-body">
          <div class="form-group row mb-1">
            <label class="col-sm-2 text-uppercase text-gray">empresa</label>
            <div class="col-sm-10 p-0">
              <select id="cmbEmpresa" data-dropdown-css-class="select2-danger" name="cmbEmpresa" class="form-control" data-live-search="true">
                <option value="A" >Seleccionar Empresa</option>
                @foreach($datos->empresa as $emp)
                <option value="{{ $emp->descripcion_empresa }}" style="font-size: 80%">{{ $emp->descripcion_empresa }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="form-group row mb-1">
            <label class="col-sm-2 text-uppercase text-gray">centro de costos</label>
            <div class="col-sm-10 p-0">
              <select id="cmbCC" data-dropdown-css-class="select2-danger" name="cmbCC" class="form-control" data-live-search="true">
                  <option value="A" >Seleccionar Centro de Costos</option>
                  @php($coleccion_cecos = json_encode($datos->centro_gestion))
                  {{-- @foreach($datos->centro_gestion as $cc)
                  <option value="{{ $cc->norma_reparto }}" style="font-size: 80%">{{ $cc->cod_empresa.' - '.$cc->norma_reparto.' - '.$cc->descripcion }}</option>
                  @endforeach --}}
              </select>
            </div>
          </div>
          <div class="form-group row mb-1">
            <label class="col-sm-2 text-uppercase text-gray">proveedor</label>
            <div class="col-sm-10 p-0">
              <select id="cmbProv" data-dropdown-css-class="select2-danger" class="form-control" data-live-search="true">
                <option value="A" style="font-size: 90%">Seleccionar Proveedor</option>
                @foreach($datos->prov as $prv)
                <option value="{{ $prv->rut_proveedor }}" style="font-size: 80%">{{ $prv->razon_social_proveedor }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="form-group row mb-1">
            <label class="col-sm-2 text-uppercase text-gray">documento(s)</label>
            <div class="col-sm-10 p-0">
              <input type="text" name="txtDoc" id="txtDoc" class="form-control" style="height: 28px;" style="font-size: 80%" placeholder="Ingrese documentos a buscar, separados por ;">
            </div>
          </div>
          <div class="form-group row mb-1">
            <label class="col-sm-2 text-uppercase text-gray">estado</label>
            <div class="col-sm-10 p-0">
              <select id="cmbEst" data-dropdown-css-class="select2-danger" class="form-control" data-live-search="true">
                <option value="A" style="font-size: 90%">Seleccionar Estado</option>
                @foreach($datos->estado as $est)
                  <option value="{{ mb_strtoupper($est->estado) }}" style="font-size: 80%">{{ $est->estado }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="form-group row mb-1 text-right">
            <div class="col-sm-12 p-0">
              <a class="btn btn-sm btn-default tab-pane active busqueda_prv"><i class="fas fa-filter"></i> Filtrar</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{-- <div class="col col-sm-12" class="mt-1" id="loading" hidden>

    </div> --}}
    <div class="col-xs-12" id="cont_table" hidden>

    </div>
  </section>
</div>
@endsection

@section('script')
  <script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}"></script>
  <script src="{{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
  <script src="{{ asset('/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js') }}"></script>
  <script src="{{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
  <script src="{{ asset('/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js') }}"></script>
    <script src="{{ asset('js/moment.js') }}"></script>
    <!--<script src="{{ asset('js/proveedores.js') }}"></script>-->
    <script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      function gtag(){
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'UA-127983785-1');
      var table;
      var coleccion_cecos;
      $(document).ready(function() {
          $(".preloader-wrapper").removeClass('active');
          coleccion_cecos = {!! $coleccion_cecos !!};
      	  $("#ModalCenter").modal('show');
          $('[data-toggle="tooltip"]').tooltip();
          $('select').select2();
          $('#table_datos.table_full thead th').each( function () {
            var title = $(this).text();
            if(title == 'Proveedor'||title == 'Documento'||title == 'Centro Gestión'){
                $(this).html( title+'<br><input type="text" class="search-column form-control" placeholder="Buscar por '+title+'" />' );
            }
          });


          table = $('#table_datos').DataTable({
            'paging'      : false,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : true,
            "order"       : [[1, "desc"]],
            "pageLength"  : 50,
            'responsive'  : true,
            'destroy': true,
          });
      });

      jQuery(document).on('change','#cmbEmpresa',function(){
        var current = $(this)
        var valor = $('option:selected',current).val()
        if(valor != 'A'){
          filtrado = coleccion_cecos.filter( item => item.descripcion_empresa ==  valor);
        }
        $("#cmbCC").html('<option value="A">Seleccionar Centro de Costos</option>')
        if (filtrado.length > 0) {
          $.each(filtrado,function(k,v){
            $("#cmbCC").append('<option value="'+v.descripcion+'">'+v.cod_empresa+' - '+v.norma_reparto+' - ' +v.descripcion+'</option>')
          })
        }
      })


      function cargar(){
        var arreglo = $("#txtDoc").val().split(';');
        arreglo = arreglo.filter(Boolean);

        table.search('')
            .columns().search('')
            .draw();

        if($("#cmbEmpresa option:selected").val() != 'A'){
          table.columns(0)
              .search($("#cmbEmpresa option:selected").val(),false,false)
              .draw();
        }
        if($("#cmbCC option:selected").val() != 'A'){
          table.columns(1)
              .search($("#cmbCC option:selected").val(),false,false)
              .draw();
        }
        if($("#cmbProv option:selected").val() != 'A'){
          table.columns(2)
              .search($("#cmbProv option:selected").val(),false,false)
              .draw();
        }
        if($("#cmbEst option:selected").val() != 'A'){
          table.columns(4)
              .search($("#cmbEst option:selected").val(),false,false)
              .draw();
        }

        var filtro_exacto = "";
        if(arreglo.length != 0){
          var nw_value = '';
          filtro_exacto = '';
          arreglo.forEach(element => nw_value += '((^|,)' + element + '($|,))|');
          nw_value = arreglo.join("|")
          table.columns(3)
              .search(  nw_value, true, false, true )
              .draw();
        }

        // $("#loading").attr('hidden','true')

        $("#barra").removeClass('final')
        $("#cont_table").removeAttr('hidden')
      }

      $(".busqueda_prv").click(function() {
          // $("#loading").removeAttr('hidden')
          // $("#cont_table").attr('hidden','true')


          $.ajax({
              url:'api/lst_proveedores',
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              data:{"cmbCC":$("#cmbCC").val(),"_token": $('meta[name="csrf-token"]').attr('content'),"cmbProv":$("#cmbProv").val(),"txtDoc":$("#txtDoc").val(),"combustible":$("#chkcombustible").val(),"cmbEst":$("#cmbEst").val(),"cmbEmpresa":$("#cmbEmpresa").val()},
              type: 'GET',
              success: function (response) {

                $("#cont_table").html('<div class="text-center pt-5 pb-5"><div class="preloader"><img class="center-block" src="{{ asset('img/LogoGrupoFlesan.png') }}" style="width: 250px;"></div><div class="row justify-content-md-center"><div class="col col-md-4"><div class="progress" style="height:13px"><div id="barra" class="progress-bar progress-bar-striped progress-bar-animated bg-danger inicio animacion" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div></div><small><strong>FILTRANDO DATOS</strong></small></div>');
                $("#cont_table").removeAttr('hidden')
                $("#cont_table").html(response)
                // if(response.error == 0){
                //   document.getElementById("barra").classList.toggle("final");
                //   setTimeout(cargar,2200);
                // }
              }
          });
      });

    </script>
@endsection