@extends('layout.frontend', ['title' => 'Вакансии РекаМоре'])
  
  @section('scripts')
      <script>

          $(document).on('change', '.jobs', function() {
              var val = $(this).val();
  
              console.log('Click change...');
              $.ajax({
                  type: "GET",
                  url: "{{ route('vacancies') }}",
                  data: "job="+val,
                  success: function (data) {
                      console.log('Выбор должности');
                      console.log(data);
                      $('#block_ajax').html(data);
                  },
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  error: function (data) {
                      data = JSON.stringify(data);
                      console.log('Error: ' + data);
                  }
              });
          });
      </script>
  @endsection
  
  @section('content')
      <section class="thing">
          <div class="container">
              <form class="thing__body">
                  <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="select select_search thing__select">
                      <div class="select__icon">
                          <svg>
                              <use xlink:href="{{ asset('images/sprite.svg#search') }}"></use>
                          </svg>
                      </div>
                      <select class="js-select2 jobs" id="jobs" name="jobs">
                          <option value="0">Выберите должность</option>
                          @if ($Job_title->count())
                              @foreach($Job_title as $JT)
                                  <option value="{{ $JT->id }}" @if ((isset($_GET['job'])) && ($_GET['job'] == $JT->id)) selected @endif>{{ $JT->name }}</option>
                              @endforeach
                          @endif
                      </select>
                  </div>
              </form>
          </div>
      </section>

      <main class="main">
          <div class="container">
              <div class="main__vacancies">
                  <h2 class="main__vacancies-title">Категории вакансий</h2>
                  <div class="vacancies__body">
                      <!--<button class="vacancies__more button button_more button_light js-toggle js-parent-toggle">
                          <span>Показать ещё</span>
                          <span>Скрыть</span>
                      </button>-->

                      <div class="vacancies__list" id="block_ajax" name="block_ajax">

                          @foreach($Main_Job as $key => $it_main)

                              <div class="vacancies__list-col">

                                  @include('block_real_new', ['it_main' => $it_main, 'category' => $key])

                              </div>
                          @endforeach

                          <!--_foreach (BigFlot as $key => $flot)
                              <div class="vacancies__list-col">
                                  _include('block_real', ['flot' => $flot, 'position' => $Position[$key]])
                              </div>
                          _endforeach-->

                      </div>
                  </div>
              </div>
          </div>
      </main>

  
  </div>

  @endsection