@extends('backpack::layout')

@section('header')
	<section class="content-header">
	  <h1>
      <span class="text-capitalize">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</span>
      <small id="datatable_info_stack">{!! $crud->getSubheading() ?? trans('backpack::crud.all').'<span>'.$crud->entity_name_plural.'</span> '.trans('backpack::crud.in_the_database') !!}.</small>
	  </h1>
	  <ol class="breadcrumb">
	    <li><a href="{{ url(config('backpack.base.route_prefix'), 'dashboard') }}">{{ trans('backpack::crud.admin') }}</a></li>
	    <li><a href="{{ url($crud->route) }}" class="text-capitalize">{{ $crud->entity_name_plural }}</a></li>
	    <li class="active">{{ trans('backpack::crud.list') }}</li>
	  </ol>
	</section>
@endsection

@section('content')
<!-- Default box -->
  <div class="row">

    <!-- THE ACTUAL CONTENT -->
    <div class="{{ $crud->getListContentClass() }}">
      <div class="box">

      

        {{-- Backpack List Filters --}}
        @if ($crud->filtersEnabled())
          @include('crud::inc.filters_navbar_lib')
        @endif

        <div class="box-body overflow-hidden">
          {{-- Custom Grid View --}}
          <style>
            .book-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
              gap: 2rem;
              padding: 20px;
            }
            
            .book-card {
              border-radius: 8px;
              box-shadow: 0 2px 4px rgba(0,0,0,0.1);
              overflow: hidden;
              transition: transform 0.2s;
              background: white;
            }
            
            .book-card:hover {
              transform: translateY(-5px);
            }
            
            .book-image {
              height: 300px;
              background-size: cover;
              background-position: center;
              cursor: pointer;
            }
            
            .book-info {
              padding: 15px;
              text-align: center;
            }
            
            .book-title {
              font-weight: 600;
              margin-bottom: 5px;
              color: #2d3748;
            }
            
            .book-author {
              color: #718096;
              font-size: 0.9em;
            }
          </style>

          <div class="book-grid">
            @foreach ($crud->getEntries() as $entry)
              <div class="book-card">
                <div onclick="window.open('{{ $entry->url }}', '_blank')" class="book-image" style="background-image: url('{{ $entry->photo }}')"></div>
                <div class="book-info">
                  <div class="book-title">{{ $entry->name }}</div>
                  <div class="book-author">{{ $entry->author }}</div>
                </div>
              </div>
            @endforeach
          </div>

         

          @if ( $crud->buttons->where('stack', 'bottom')->count() )
          <div id="bottom_buttons" class="hidden-print">
            @include('crud::inc.button_stack', ['stack' => 'bottom'])

            <div id="datatable_button_stack" class="pull-right text-right hidden-xs"></div>
          </div>
          @endif

        </div><!-- /.box-body -->

      </div><!-- /.box -->
    </div>

  </div>

@endsection

@section('after_styles')
  <!-- DATA TABLES -->
  <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css">

  <link rel="stylesheet" href="{{ asset('vendor/backpack/crud/css/crud.css') }}">
  <link rel="stylesheet" href="{{ asset('vendor/backpack/crud/css/form.css') }}">
  <link rel="stylesheet" href="{{ asset('vendor/backpack/crud/css/list.css') }}">

  <!-- CRUD LIST CONTENT - crud_list_styles stack -->
  @stack('crud_list_styles')
@endsection






@section('after_scripts')
<script>
    jQuery(document).ready(function($) {
      // Кастомная обработка фильтров для grid
      function updateGrid(url) {
        $.ajax({
          url: url,
          type: 'GET',
          success: function(data) {
            // Обновляем только grid и пагинацию
            var $parsedData = $('<div>').html(data);
            $('.book-grid').html($parsedData.find('.book-grid').html());
            $('.pagination').html($parsedData.find('.pagination').html());
            
            // Обновляем URL в браузере
            window.history.replaceState({}, document.title, url);
          }
        });
      }

      // Обработка изменения фильтров
      $('.filter').on('change', function() {
        var formData = $('#crudFiltersForm').serialize();
        var newUrl = '{{ url($crud->route) }}?ajax_request=1&' + formData;
        updateGrid(newUrl);
      });

      // Кнопка сброса фильтров
      $('#remove_filters_button').click(function(e) {
        e.preventDefault();
        $('.filter').val('').trigger('change');
        updateGrid('{{ url($crud->route) }}');
        $(this).addClass('hidden');
      });

      // Обработка пагинации
      $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        var url = $(this).attr('href') + '&ajax_request=1';
        updateGrid(url);
      });
    });
  </script>


  <script src="{{ asset('vendor/backpack/crud/js/crud.js') }}"></script>
  <script src="{{ asset('vendor/backpack/crud/js/form.js') }}"></script>
  <script src="{{ asset('vendor/backpack/crud/js/list.js') }}"></script>


  <!-- CRUD LIST CONTENT - crud_list_scripts stack -->
  @stack('crud_list_scripts')
@endsection