@extends('modules.head') @section('contenido')
<div class="box-header">
    <a class="auxiliar-black" href="{{url('/categories/add')}}">
        <button class="btn btnAdd pull-right">
            <i style="margin-right:5px;" class="fa fa-plus"></i>{{ Lang::get('messages.screen_categories_tag1')}}
        </button>
    </a>
</div>




<!-- LIST lines-->
<div class="box">
    <div class="box-header with-border">
      <div class="row">
        <div class="col-xs-4"><h3 class="box-title">{{ Lang::get('messages.screen_categories_tag2')}} </h3></div>
        @if ($sucursals)
          <div class="col-xs-4 displayFlex">
            <div class="col-xs-2">
              <label for="change_sucursal_id">{{ Lang::get('messages.screen_categories_tag12')}} </label>
            </div>
            <select class="form-control marginLeft35" name="change_sucursal_id" id="change_sucursal_id" required>
              @foreach($sucursals as $sucursal)
                @if($sucursal->id == 1)
                <option value="{{$sucursal->id}}" selected="selected">{{$sucursal->name}}</option>
                @else
                <option value="{{$sucursal->id}}">{{$sucursal->name}}</option>
                @endif
              @endforeach
            </select>
          </div>
        @endif
      </div>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive">
        <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_categories_tag3')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_categories_tag4')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_categories_tag5_1')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_categories_tag5')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_categories_tag6')}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection


<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/categories.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var change_sucursal_id = $("#change_sucursal_id").val();
        if (change_sucursal_id) {
          var url = '/categories/filter'+'/'+change_sucursal_id;
        }else{
          var url = '/categories/filter';
        }
        _table = $('#example2').DataTable({
            destroy: true,
            responsive: true,
            processing: true,
            serverSide: true,
            "order" : [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: url,
            columns: [
                { data: 'image', name: 'image'  },
                { data: 'name', name: 'name'  },
                { data: 'order', name: 'order'  },
                { data: 'active', name: 'active'  },
                { data: 'actions', name: 'actions'  },

            ]

          });

          setTimeout( function(){
             if (localStorage.getItem("setPageTable") == 'true') {
               var index = parseInt(localStorage.getItem("productsTableIndex"));
               _table.page(index).draw(false);

               localStorage.setItem("productsTableIndex", 0);
               localStorage.setItem("setPageTable", false);
             }

             $('#example2_filter > label > input').unbind();
             $('#example2_filter > label > input').bind('keyup', function (e) {
               if (e.keyCode == 13){
                 _table.search(this.value).draw();
               }
             });
          },500);

          $( "#change_sucursal_id" ).change(function() {
            getCategories();
          });

          function getCategories(){
            var change_sucursal_id = $("#change_sucursal_id").val();
            if (change_sucursal_id) {
              var url = '/categories/filter'+'/'+change_sucursal_id;
            }else{
              var url = '/categories/filter';
            }
            _table = $('#example2').DataTable({
                destroy: true,
                responsive: true,
                processing: true,
                serverSide: true,
                "order" : [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: url,
                columns: [
                    { data: 'image', name: 'image'  },
                    { data: 'name', name: 'name'  },
                    { data: 'order', name: 'order'  },
                    { data: 'active', name: 'active'  },
                    { data: 'actions', name: 'actions'  },

                ]

              });

              setTimeout( function(){
                 if (localStorage.getItem("setPageTable") == 'true') {
                   var index = parseInt(localStorage.getItem("productsTableIndex"));
                   _table.page(index).draw(false);

                   localStorage.setItem("productsTableIndex", 0);
                   localStorage.setItem("setPageTable", false);
                 }

                 $('#example2_filter > label > input').unbind();
                 $('#example2_filter > label > input').bind('keyup', function (e) {
                   if (e.keyCode == 13){
                     _table.search(this.value).draw();
                   }
                 });
              },500);
          }
        var info = '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Código, Nombre y Teléfono</p></div>';

        $('#example2_filter').append(info);
        $('#btn-info-busqueda').on('click', function () {
          $('#menuBusqueda').toggle();
        });
    });

  </script>