@extends('layout.frontend', ['title' => 'Образование и образовательные программы - РекаМоре'])
  
  @section('scripts')
      <script>
          console.log('Test system');
          $(document).on('change', '#sort_ajax', function() {
              var this_ = $(this);
              var val_ = this_.val();
              console.log('sort items '+val_);
  
              $.ajax({
                  type: "GET",

                  url: "{{ route('education') }}",

                  data: "sort="+val_+"&block=1",
                  success: function (data) {
                      console.log('Выбор сортировки');
                      console.log(data);

                      $('#block').html(data);
                      history.pushState({}, '', "{{ route('education') }}?sort="+val_+"@if (isset($_GET['page']))&page={{ $_GET['page'] }}@endif");

                  },
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  error: function (data) {
                      data = JSON.stringify(data);
                      console.log('Error: ' + data);
                  }
              });
          });
  
          $(document).ready(function(){
              var sel = $('#select2-sort_ajax-container');
              var key = getUrlParameter('sort');

              console.log(sel);
              console.log(key);

  
              if (key !=='') {
                  console.log(key);
                  switch (key) {
                      case "default": sel.html('Сортировка (по умолчанию)'); break;
                      case "name_up": sel.html('По имени (возрастание)'); break;
                      case "name_down": sel.html('По дате (убывание)'); break;
                      case "created_at_up": sel.html('По дате (возрастание)'); break;
                      case "created_at_down": sel.html('По дате (убывание)'); break;
                  }
  
              }
          });
      </script>
  @endsection
  
  @section('content')
      <section class="thing">
          <div class="container">
              <form class="thing__body" active="{{ route('education') }}">
                  <ul class="breadcrumbs thing__breadcrumbs">
                      <li><a href="{{ route('index') }}">Главная</a></li>
                      <li><b>Образование</b></li>
                  </ul>
                  <h1 class="thing__title">Образование</h1>
                  <p class="thing__text">Прежде всего, современная методология разработки представляет собой интересный эксперимент проверки направлений прогрессивного развития.</p>
                  <div class="search thing__search">
                      <input type="search" class="input" id="search" name="search" placeholder="Введите наименование работодателя" value="@if (!empty($_GET['search'])) {{ $_GET['search'] }} @endif">
                      <button type="submit" class="button">Найти</button>
                      <span>
                              <svg>
                                  <use xlink:href="{{ asset('images/sprite.svg#search') }}"></use>
                              </svg>
                      </span>
                  </div>
              </form>
          </div>
      </section>
      <main class="main">
          <div class="container">
              <div class="filters">

                  <div class="filters__label">Показано {{ $educations->firstItem() }} – {{ $educations->lastItem() }} из {{ $count_edu }} результатов поиска</div>

                  <div class="filters__body">
                      <div class="select filters__select">
                          <select class="js-select2" id="sort_ajax" name="sort_ajax">
                              <option value="default">Сортировка (по умолчанию)</option>
                              <option value="name_up">По имени (возрастание)</option>
                              <option value="name_down">По имени (убывание)</option>
                              <option value="created_at_up">По дате (возрастание)</option>
                              <option value="created_at_down">По дате (убывание)</option>
                          </select>
                      </div>
                  </div>
              </div>

              <div class="main__ads" id="block" name="block">
                  @if ($educations->count())

                      @foreach($educations as $edu)
                          <div class="main__ads-item">
                              <div class="main__ads-item-pic">
                                  <img src="@if (!empty($edu->image)) {{ asset(Storage::url($edu->image)) }} @else {{ asset('images/education.jpg') }} @endif" alt="{{ $edu->name }}">
                                  <span>
                                          <svg>
                                              <use xlink:href="{{ asset('images/sprite.svg#v') }}"></use>
                                          </svg>
                                  </span>
                              </div>
                              <div class="main__ads-item-body">
                                  <b>{{ $edu->name }}</b>
                                  <span>{{ $edu->program_education->count() }} учебных направлений</span>
                                  <a href="" class="button button_light">Читать далее</a>
                              </div>
                          </div>
                      @endforeach

                      {{ $educations->appends($_GET)->links('paginate') }}
                  @else
                      <H2>Нет данных</H2>
                  @endif

              </div>

              <!--<div class="pagination">
                  <a href="#" class="pagination__nav pagination__nav_prev">
                      <svg>
                          <use xlink:href="images/sprite.svg#arrow-bold"></use>
                      </svg>
                  </a>
                  <span class="pagination__item active">1</span>
                  <a href="#" class="pagination__item">2</a>
                  <a href="#" class="pagination__item">3</a>
                  <a href="#" class="pagination__item">4</a>
                  <a href="#" class="pagination__item">5</a>
                  <span class="pagination__dots">
                          <svg>
                              <use xlink:href="images/sprite.svg#dots"></use>
                          </svg>
                      </span>
                  <a href="#" class="pagination__item">25</a>
                  <a href="#" class="pagination__nav pagination__nav_next">
                      <svg>
                          <use xlink:href="images/sprite.svg#arrow-bold"></use>
                      </svg>
                  </a>
              </div>-->
          </div>
      </main>
      </div>
  @endsection