@extends('ATCore::atcore_layout')

@section('head_buttons')
<a href="{{ route($routeName.'.create') }}" class="btn btn-primary">{{ $createNewName }}</a>
@stop

@section('content')

<div class="card">
  <div class="card-header">
    <form method="GET" action='{{ request()->url() }}' autocomplete="off">
      <div class="input-group input-group-sm float-right" style="width: 150px;">
        
        <input type="text" name="{{ $table }}_table_search" class="form-control float-right" placeholder="Buscar" value="{{ session($table.'_table_search') }}">
        
        <div class="input-group-append">
          <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
        </div>
      </div>
    </form>
    
    <form method='get' id='form-limit-paging' style="display:inline-block" action='{{ request()->url() }}'>
      <div class="input-group input-group-sm" style="width: 60px;">
        <select onchange="$('#form-limit-paging').submit()" name='limit' style="width: 56px;" class='form-control input-sm'>
          <option {{(request('limit') && request('limit')==12)?'selected':''}} value='12'>12</option>
          <option {{(request('limit') && request('limit')==24)?'selected':''}} value='24'>24</option>
          <option {{(request('limit') && request('limit')==48)?'selected':''}} value='48'>48</option>
          <option {{(request('limit') && request('limit')==96)?'selected':''}} value='96'>96</option>
          
        </select>
      </div>
    </form>
  </div>
  
  <div class="card-body" >
    <div class="row"  style="padding:10px">
      @foreach ($mediaLibrary as $media)
      <div class="col-sm-2">
        <div class="row img-thumbnail">
          <div class="col-sm-12">
            <a href="{{$media->getUrl()}}" data-toggle="lightbox"  data-gallery="gallery">
              <img src="{{$media->getUrl()}}" class="img-fluid mb-2" alt="white sample"/>
            </a>
          </div>
          <div class="col-sm-12 bg-dark" style="cursor: pointer;text-align: center" onclick="genericDelete('{{ route($routeName.'.destroy',$media->id) }}')">
            <i class="fas fa-trash"></i>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>




@if (sizeof($mediaLibrary->links()->getData()['elements'][0]) > 1)
<div class="card-footer clearfix">
  {{ $mediaLibrary->links() }}
</div>
@endif
</div>
@stop

@section('plugins.EkkoLightbox',true)
@section('plugins.Filterizr',true)

@section('css')
@stop

@section('js')

<script>
  @if (session()->has('message'))
  
  toastr['{!! session('message_type') !!}']('{!! session('message') !!}')

  @endif

  @if (session()->has('message_alert'))
  
  toastr['error']('{!! session('message_alert') !!}')
  @endif
  
  $(function () {
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
      event.preventDefault();
      $(this).ekkoLightbox({
        alwaysShowClose: true,
        showArrows: false
      });
    });
  })

  function genericDelete(url){
        Swal.fire({
            title: '¿Estás seguro?',
            text: "No será posible revertir esta acción!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Si, elminar!',
            cancelButtonText: 'Cancelar'
            }).then((result) => {
            if (result.value) {
                axios.post(url, {
                    _method: 'DELETE',
                    _token: $('meta[name="csrf-token"]').attr('content')
                })
                .then(function (response) {
                  console.log(response);
                    Swal.fire(
                    'Eliminado!',
                    'El dato ha sido eliminado.',
                    'success'
                    ).then(function (respo) {
                        console.log(respo);
                        location.reload();     
                    })
                })
                .catch(function (error) {
                    console.log(error);
                });

            }
        });
        return false;
    }
</script>

@stop