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

@section('content')
<section class="work">
    <div class="container">
        <img src="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">
                <input type="search" class="input" placeholder="Желаемая должность" required>
                <button type="submit" class="button button_light">Посмотреть вакансии</button>
                <span>
                            <svg>
                                <use xlink:href="images/sprite.svg#search"></use>
                            </svg>
                        </span>
            </form>
            <button class="button work__search">Я ищу сотрудника</button>
            <div class="work__get">
                <b>Скачать приложение</b>
                <a href="#">
                    <img src="images/google.svg" alt="">
                </a>
                <a href="#">
                    <img src="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">
            <button class="vacancies__more button button_light js-parent-toggle">Все должности</button>
            <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="#" 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="#">здесь</a>.</span>
                    <button class="about__button button button_whited">Поиск сотрудников</button>
                </div>
                <div class="about__item">
                    <b>Для сотрудников</b>
                    <span>Наше преимущество — это большой объем вакансий, более 70 судоходных компаний России и
                                СНГ ищут сотрудников через наши ресурсы</span>
                    <button class="about__button button button_whited">Посмотреть вакансии</button>
                </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="images/sprite.svg#arrow"></use>
                    </svg>
                </button>
                <button class="js-news-swiper-button-next">
                    <svg>
                        <use xlink:href="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