@extends('layout.frontend', ['title' => 'Главная страница РекаМоре'])

  @section('scripts')
      <script>
          console.log('Test system');
          $(document).on('click', '#button_send', function() {
              var field_login = $('#email');
              var field_pwd = $('#password');
              var login_val = field_login.val();
              var pwd_val = field_pwd.val();
  
              console.log('login: '+login_val+' password: '+pwd_val);
  
              $.ajax({
                  type: "GET",
                  url: "{{ route('login') }}",
                  data: "email="+login_val+"&password="+pwd_val,
                  success: function (data) {
                      console.log('Вход в систему');
                      console.log(data);
                      //$('#block_1').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="work">
      <div class="container">

          <img src="{{ asset('images/1.png') }}" alt="" class="work__pic">

          <div class="work__body">
              <div class="work__title">
                  Работа в море /
                  <span class="br">Работа на реке</span>
              </div>
              <div class="work__text">Профессиональная сеть морского сообщества «RekaMore.su» приветствует вас —
                  тех, кто не представляет себе жизнь без моря, тех, кто готов связать свою жизнь с работой в
                  сложных, но очень интересных условиях. </div>
              <div class="work__list">
                  <div>Тысячи соискателей увидят Ваше объявление</div>
                  <div>Десятки компаний выкладывают объявления каждый день</div>
              </div>

              <form class="search work__form" action="{{ route('search_vacancies') }}" method="GET">
                  <input type="search" id="search" name="search" class="input" placeholder="Желаемая должность" required>

                  <button type="submit" class="button button_light">Посмотреть вакансии</button>
                  <span>

                      <svg>
                          <use xlink:href="{{ asset('images/sprite.svg#search') }}"></use>
                      </svg>
                  </span>

              </form>

              <a href="{{ route('bd_resume') }}" class="button work__search">Я ищу сотрудника</a>

              <div class="work__get">
                  <b>Скачать приложение</b>

                  <a href="">
                      <img src="{{ asset('images/google.svg') }}" alt="">

                  </a>

                  <a href="">
                      <img src="{{ asset('images/apple.svg') }}" alt="">

                  </a>
              </div>
          </div>
      </div>
  </section>
  <section class="numbers">
      <div class="container">
          <div class="numbers__body">
              <div class="numbers__item">
                  <b>500+</b>
                  <span>Резюме</span>
                  Банальные, но неопровержимые выводы, а также элементы политического процесса лишь добавляют
                  фракционных разногласий и призваны к ответу.
              </div>
              <div class="numbers__item">
                  <b>1 000+</b>
                  <span>Вакансий</span>
                  В рамках спецификации современных стандартов, диаграммы связей заблокированы в рамках своих
                  собственных рациональных ограничений.
              </div>
              <div class="numbers__item">
                  <b>265</b>
                  <span>Компаний</span>
                  Но сторонники тоталитаризма в науке заблокированы в рамках своих собственных рациональных
                  ограничений.
              </div>
          </div>
      </div>
  </section>
  <section class="vacancies">
      <div class="container">
          <div class="title">Новые вакансии</div>
          <div class="vacancies__body">

              <a class="vacancies__more button button_light js-parent-toggle" href="{{ route('vacancies') }}">Все должности</a>

              <div class="vacancies__list">

                  @if ($categories->count())
                  @foreach ($categories as $cat)

                  <a href="#" class="vacancies__item">

                      <span style="border-color:#F4C4C2">
                          <b>{{ $cat->name }}</b>
                          <i>Вакансий: <span>{{ $cat->cnt }}</span></i>
                      </span>
                  </a>
                  @endforeach
                  @else
                      Тут пока нет никаких вакансий
                  @endif

              </div>
          </div>
      </div>
  </section>
  <section class="employer">
      <div class="container">
          <div class="title">Работодатели</div>
          <div class="swiper js-employer-swiper">
              <div class="swiper-wrapper">

  
                  @if ($employers->count())
                      @php
                          $rec = 0;
                          $count = $employers->count();
                      @endphp
                      @foreach($employers as $emp)
                          @php $rec++ @endphp
                          @if (($rec==1) || ($rec==5) || ($rec==9) || ($rec==13) || ($rec==17))
                              <div class="swiper-slide">
                                  <div class="employer__item">
                          @endif
                              <a href="">
                                  <img src="{{ asset(Storage::url($emp->logo)) }}" alt="{{ $emp->name_company }}">
                              </a>
                          @if (($rec==4) || ($rec==8) || ($rec==12) || ($rec==16) || ($rec==20) || ($rec == $count))
                                  </div>
                              </div>
                          @endif
                      @endforeach
                  @else
                      <h5>Тут нет никаких записей</h5>
                  @endif

              </div>
              <div class="swiper-pagination"></div>
          </div>

          <a href="{{ route('shipping_companies') }}" class="employer__more button button_light">Все работодатели</a>

      </div>
  </section>
  <section class="about">
      <div class="container">
          <div class="about__wrapper">
              <div class="title about__title">О нас</div>
              <div class="about__body">
                  <div class="about__line"></div>
                  <div class="about__item">
                      <b>Для работодателей</b>
                      <span>Наш ресурс позволит Вам за демократичную цену найти нужных специалистов в кратчайшие

                                  сроки, подробнее об условиях можно узнать <a href="{{ route('page', ['pages' => 'Stoimost-razmescheniya']) }}">здесь</a>.</span>
                      <a class="about__button button button_whited" href="{{ route('bd_resume') }}">Поиск сотрудников</a>

                  </div>
                  <div class="about__item">
                      <b>Для сотрудников</b>
                      <span>Наше преимущество — это большой объем вакансий, более 70 судоходных компаний России и
                                  СНГ ищут сотрудников через наши ресурсы</span>

                      <a class="about__button button button_whited" href="{{ route('vacancies') }}">Посмотреть вакансии</a>

                  </div>
              </div>
          </div>
      </div>
  </section>
  <section class="news">
      <div class="container">
          <div class="news__toper">
              <div class="title">Новости и статьи</div>
              <div class="navs">
                  <button class="js-news-swiper-button-prev">
                      <svg class="rotate180">

                          <use xlink:href="{{ asset('images/sprite.svg#arrow') }}"></use>

                      </svg>
                  </button>
                  <button class="js-news-swiper-button-next">
                      <svg>

                          <use xlink:href="{{ asset('images/sprite.svg#arrow') }}"></use>

                      </svg>
                  </button>
              </div>
          </div>
          <div class="swiper js-news-swiper">
              <div class="swiper-wrapper">

                  @if ($news->count())
                      @foreach ($news as $new)
                      <div class="swiper-slide">
                          <div class="news__item">
                              <img src="{{ asset(Storage::url($new->image)) }}" alt="" class="news__item-pic">
                              <div class="news__item-body">
                                  <time datetime="2023-05-01" class="news__item-date">{{ $new->created_at }}</time>
                                  <span class="news__item-title">{{ $new->title }}</span>
                                  <span class="news__item-text">{{ mb_strimwidth($new->text, 0, 100) }}</span>
                                  <a href="#" class="news__item-more button button_light">Читать далее</a>
                              </div>

                          </div>
                      </div>

                      @endforeach
                  @endif

              </div>
              <div class="swiper-pagination"></div>
          </div>
          <div class="news__all button button_light">Все новости</div>
      </div>
  </section>
  <section class="info">
      <div class="container">
          <img src="images/5.png" alt="" class="info__pic">
          <div class="info__body">
              <div class="title info__title">Мы в социальных сетях</div>
              <div class="info__item">
                  <div class="info__text">Телеграм — Подпишитесь на наш телеграм канал и получайте уведомления о
                      новых вакансиях прямо на свой смартфон</div>
                  <a href="#" class="info__link" style="background:#20A0E1">
                      <svg>
                          <use xlink:href="images/sprite.svg#tg"></use>
                      </svg>
                      Телеграм
                  </a>
              </div>
              <div class="info__item">
                  <div class="info__text">ВКонтакте — Лучшие вакансии за неделю выкладываем именно тут, информация
                      о судоходных компаниях, инструкции по работе с сайтом, конкурсы и многое другое</div>
                  <a href="#" class="info__link" style="background:#2787F5">
                      <svg>
                          <use xlink:href="images/sprite.svg#vk"></use>
                      </svg>
                      ВКонтакте
                  </a>
              </div>
          </div>
      </div>
  </section>
  @endsection