@extends('metronic.base')
@section('title')
Compras varias
@endsection

@section('extracss')

@endsection
@section('extrajs')
    <script src="{{ asset('js/jquery.chained.min.js') }}"></script>

   <script>
       $(document).ready(function() {
//          $('#cliente-select').select2();
 //         document.querySelector('#cliente-select').parentElement.querySelector('span.select2-container').style.width="100%"
  //       });


         $(document).ready(function() {
          $('#oc').select2();
          document.querySelector('#oc').parentElement.querySelector('span.select2-container').style.width="100%"
         });
         $(document).ready(function() {
          $('#ov').select2();
          document.querySelector('#ov').parentElement.querySelector('span.select2-container').style.width="100%"
         });

         $('#oc').change(function() {
            // $(this).val()
           /* $html = `<div class="col-md-6">
                                <label for="impuesto" class="col-form-label">Clasificacion libro</label>
                                <select name="tipo_compra" id="tipo_compra" class="form-control" >
                                    <option value="" ></option>
                                    <option selected value="1" >Compra gravada</option>
                                    <option value="0">Compra Exenta</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="impuesto" class="col-form-label">Sub-clasificacion  libro</label>
                                <select name="sub_tipo_compra" id="sub_tipo_compra" class="form-control" >
                                    <option value="" selected></option>
                                    <option selected value="1" >Internas</option>
                                    <option value="0">Importaciones</option>
                                </select>
                            </div>`;
            $('#extra').append($html);**/
        });

   </script>

<script>
   $(function() {
       $('#erp-datatable tfoot th:not(:nth-last-child(2)):not(:last-child)').each(function() {
           $(this).html('<input type="text" />');
       });
       var total_columns = $("#erp-datatable thead").find("tr")[0].cells.length

       var initialLoad = false;
       var table = $('#erp-datatable').DataTable({
           processing: true,
           serverSide: true,
           stateSave: true,
           scrollX: false,
           autoWidth: false,
           "dom": "<'row'" +
               "<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
               "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
               ">" +
               "<'table-responsive'tr>" +
               "<'row'" +
               "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
               "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
               ">",
           {!! App::isLocale('es')
               ? "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'},"
               : "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'}," !!}
           initComplete: function() {

               var i = 0,
                   total_cols_busq = total_columns - 2;
               this.api().columns().every(function() {
                   if (i < total_cols_busq) {
                       var column = this;
                       $("input", $("#erp-datatable tfoot th")[i])
                           .on('change',
                               function() { //Se le agrega on change a los inputs de busqueda
                                   column.search($(this).val(), false, false, true).draw();
                               });
                       i++;
                   }
               });
               if (typeof getUrlVars()['search'] !== 'undefined') {
                   var search_val = decodeURIComponent(getUrlVars()['search']);
                   this.api().search(search_val).draw();
               }
               table = $('#erp-datatable').DataTable();
               new $.fn.dataTable.Buttons(table, {
                   name: 'btnCleanSearch',
                   buttons: [{
                       text: '{{ __('Limpiar') }}',
                       action: function(e, dt, node, config) {
                           dt.search('').draw();
                       },
                       className: 'btn btn-secondary btnClear mx-2'
                   }]
               });

               table
                   .buttons('btnCleanSearch', null)
                   .containers()
                   .insertAfter('.dataTables_filter');
           },
           stateSaveParams: function(settings, data) {
               if (!initialLoad) {
                   //se hacen pequeños los campos de búsqueda
                   var th, total_cols_busq = total_columns - 2;
                   for (i = 0; i < total_cols_busq; i++) {
                       var col_search_val = data.columns[i].search.search;
                       th = $('#erp-datatable tfoot').find('th:nth-child(' + (i + 1) + ')');
                       th.find('input').attr('size', 5);
                       if (col_search_val !== "") {
                           th.find('input').val(col_search_val);
                       }
                   }
                   initialLoad = true;
               }
           },
           order: [
               [total_columns - 1, "desc"]
           ],
           ajax: '{!! route('compra.variasData') !!}',
           columnDefs: [

               {
                   targets: [-1],
                   visible: false,
                   searchable: false
               },
           ],
           columns: [
               {
                   data: 'fecha',
                   name: 'documentos.created_at',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'numero_documento',
                   name: 'documentos.documento_code',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'proveedor',
                   name: 'suppliers.nombreProveedor',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'orden',
                   name: 'orden',
                   orderable: false,
                   searchable: false
               },
               {
                   data: 'monto',
                   name: 'documentos.monto',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'estado',
                   name: 'documentos.state',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'tipo',
                   name: 'tipo_documentos.tipo',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'acciones',
                   name: 'acciones',
                   orderable: true,
                   searchable: true
               },
               {
                   data: 'id',
                   name: 'id'
               },
           ]
       });

       var dTable = $(".datatable").DataTable();
       $(".dataTables_filter input")
           .unbind()
           .bind("input", function(e) {
               if (this.value.length >= 3 || e.keyCode == 13) {
                   dTable.search(this.value).draw();
               }
               if (this.value == "") {
                   dTable.search("").draw();
               }
               return;
           });
   });
</script>

@endsection
@section('content')


@include('sessions')





<!-- Boton agregar cotizacion modal -->
<!--can('CotizacionInicial.store')-->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <button type="button" class="btn btn-primary" onclick="limpiarCampos()"  data-bs-toggle="modal" data-bs-target="#documentoFacturacion">
        <i class="ki-outline ki-plus fs-2"></i> Agregar documento para compras
    </button>
</div>

<br>



<!-- Table -->
@component('components.table')
    @slot('thead')
        <th>{{ __('Fecha') }}</th>
        <th>{{ __('Numero Documento') }}</th>
        <th>{{ __('Proveedor') }}</th>
        <th>{{ __('Orden') }}</th>
        <th>{{ __('Monto') }}</th>
        <th>{{ __('Estado') }}</th>
        <th>{{ __('Tipo') }}</th>
        <th>{{ __('Acciones') }}</th>
        <th>{{ __('ID') }}</th>
    @endslot
    @slot('tfoot')
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    @endslot
@endcomponent
{{-- <table class="InitializeDataTable table table-sm">
   <thead class="thead-dark">
      <tr>
         <th scope="col">#</th>
         <th scope="col">Fecha</th>
         <th scope="col">No. Documento</th>
         <th scope="col">Proveedor</th>
         <th scope="col">Orden</th>
         <th scope="col">Monto</th>
         <th scope="col">Estado</th>
         <th scope="col">Tipo</th>
         <th scope="col">Acciones</th>
      </tr>
   </thead>
   <tbody>
        @php
            $i=1;
        @endphp
      @foreach ($documentos as $documento)
      <tr>
        <td> {{ $i }} </td>
        <td>
            @if($documento->created_at!=null)
            {{ date("d/m/Y", strtotime($documento->created_at)) }}
            @endif
        </td>
        <td> {{ $documento->documento_code }} </td>
        <td> {{ $documento->proveedor->nombreProveedor }} </td>
        <td>

            @if ($documento->ov)
              <a href=""><span class="badge badge-primary">{{ $documento->ov->file_code }}</span></a>
            @endif

            @if ($documento->oc)
              <a target="_blank" href="/orden-compra/orden/pdf/{{ $documento->oc->id }}"><span class="badge badge-secondary"> {{ $documento->oc->codigo }}</span></a>
            @endif

            @if(!$documento->oc && !$documento->ov)
            <span class="badge badge-primary">Sin orden</span>
            @endif

        </td>

        <td>{{ $documento->monto }}</td>
        <td>{{ $documento->state }}</td>
        <td>
             @if ($documento->tipo->tipo=='Comprobante de Credito Fiscal')
               CCF
             @else
                {{ $documento->tipo->tipo }}
             @endif

         </td>

        <td style="display: flex" class="text-center">
         <a type="button" title="Procesos" fas fa-w fa-clipboard-list
         class="ki-outline ki-questionnaire-tablet fs-2x text-primary mx-2" style="background-color:transparent; border: 0px solid;"
         href="{{route('compra.detalleDocumentoCV',$documento->id)}}"></a>

         @if ($documento->state!=="FACTURADO")
         <a type="button" title="Eliminar" fas fa-w fa-clipboard-list
         class="ki-outline ki-trash fs-2 text-danger m-1" style="color:gray !important; background-color:transparent; border: 0px solid;"
         href="{{ route('compra.eliminarCompraFactura', $documento->id) }}" ></a>
         @endif



        </td>
     </tr>
     @php
         $i++;
     @endphp
      @endforeach
   </tbody>
</table> --}}


@include('compra.modals.compraVariasDoc')
<script type="text/javascript">

   //Limpiar los campos de la modal de traslados
   function limpiarCampos(){
      $('#nombre_cotizacion').val(''); //Limpiando el input
      $("#categoria_id").val(""); //Seleccionando la primera opción del select
   }



</script>
@endsection