@extends('layout.site', ['title' => 'Векпром - главная страница'])

@section('script_js')
    <script>
        function Ajax_query() {
            var data_filter = '';
            var filter_val = [];

            $('.tab_js').each(function() {
                var v = $(this).data('tab');
                var this_ = $(this);
                if (this_.hasClass('active'))
                    data_filter = v;
            });

            console.log('-------------------');
            $.ajax({
                type: "GET",
                url: "{{ route('index') }}",
                data: "filter="+data_filter+"",
                success: function(data) {
                    console.log('Успешно обновлены данные таблиц! ');
                    $('#block_ajax').html(data);
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                error: function(data) {
                    console.log('Error: '+ data);
                }
            });
        }

        $(document).on('click', '.tab_js', function() {
            console.log('Клик таб');
            Ajax_query();
        });

    </script>
@endsection

@section('banner')
    @include('banners.index')
@endsection

@section('content')
    <section class="cookie-popup js_cookie_popup">
        <div class="cookie-popup-wrapper">
            <p class="cookie-popup-wrapper__text">
                Мы используем файлы cookie для обработки ваших персональных данных
            </p>
            <a class="cookie-popup-wrapper__btn js_cookie_popup_btn" href="#">Хорошо</a>
        </div>
    </section>

    @if ($category->count())
    <section class="bloks">
        <div class="container">
            <div class="bloks-wrapper">
                @foreach ($category as $cat)
                <div class="bloks-item">
                    <a href="{{ route('catalog_detail', $cat->id) }}">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title">{{$cat->name}}</h3>
                                <div class="svg-wrapper">
                                </div>
                            </div>
                            <img class="bloks__item-img" width="150px" src="{{asset(Storage::url($cat->image))}}" alt="{{$cat->name}}">
                        </div>
                    </a>
                </div>
                @endforeach
                <!--<div class="bloks-item">
                    <a href="#">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title">Зиговочные
                                    станки</h3>
                                <div class="svg-wrapper">
                                </div>
                            </div>
                            <img class="bloks__item-img img-second" src="./img/main/bloks/2.png" alt="">
                        </div>
                    </a>
                </div>

                <div class="bloks-item">
                    <a href="#">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title">Обработка труб,
                                    профиля</h3>
                                <div class="svg-wrapper">
                                </div>
                            </div>
                            <img class="bloks__item-img img-third" src="./img/main/bloks/3.png" alt="">
                        </div>
                    </a>
                </div>

                <div class="bloks-item">
                    <a href="#">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title title-four">Автоматизация
                                    и механизации сварки</h3>
                                <div class="svg-wrapper">
                                </div>
                            </div>
                            <img class="bloks__item-img img-four" src="./img/main/bloks/4.png" alt="">
                        </div>
                    </a>
                </div>

                <div class="bloks-item">
                    <a href="#">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title title-five">Станки для механической
                                    обработки металла</h3>
                                <div class="svg-wrapper">
                                </div>

                            </div>
                            <img class="bloks__item-img img-five" src="./img/main/bloks/5.png" alt="">
                        </div>
                    </a>
                </div>

                <div class="bloks-item">
                    <a href="#">
                        <div class="item-wrapper">
                            <div class="blocks__item-text">
                                <h3 class="item-title">Заготовительноe
                                    производство</h3>
                                <div class="svg-wrapper">
                                </div>
                            </div>
                            <img class="bloks__item-img img-six" src="./img/main/bloks/6.png" alt="">
                        </div>
                    </a>
                </div>-->
            </div>
        </div>
    </section>
    @endif

    <section class="banner">
        <div class="container">
            <div class="banner-container">
                <h2 class="banner-container__title">
                    Подобрать оборудование
                    по вашему ТЗ
                </h2>
                <a class="banner-container__button">Подобрать</a>
            </div>
        </div>
    </section>

    <section class="catalog">
        <div class="container catalog-container">
            <h1 class="catalog__title">
                Каталог
            </h1>
            <ul class="catalog__tabs">
                <li class="tab active tab_js" data-tab="news">Новинки</li>
                <li class="tab tab_js" data-tab="stock">В наличии на складе</li>
                <li class="tab tab_js" data-tab="demo">В демозале</li>
                <li class="tab tab_js" data-tab="way">В пути</li>
            </ul>
            <div class="tabs__content">
                <!-- содержимое первой вкладки -->
                <div class="tabs__item tabs__item-active js-tab_1 tabs-item-main" id="block_ajax">
                    <!-- 1 -->
                    @if ($goods->count())
                        @foreach ($goods as $good_new)
                        <div class="content-item">
                        <div class="swiper swiper-catalog swiperCatalog">
                            <div class="swiper-icons">
                                <div class="swiper-icons-left">
                                    <svg class="swiper-icons-left__clock">
                                        <use xlink:href="./img/icons.svg#clock"></use>
                                    </svg>
                                    <p class="swiper-icons-left__text">Под заказ</p>
                                </div>
                                <div class="swiper-icons-right">
                                    <span class="swiper-icons-right__compare js_compare"></span>
                                    <span class="swiper-icons-right__favorite js_favorite"></span>
                                </div>
                            </div>

                            <div class="swiper-wrapper">
                                @if (!empty($good_new->image))
                                <div class="swiper-slide"><img src="{{ asset(Storage::url($good_new->image)) }}" width="280px" alt=""></div>
                                @endif
                                <!--<div class="swiper-slide"><img src="./img/main/catalog/cat-1.png" alt=""></div>
                                <div class="swiper-slide"><img src="./img/main/catalog/cat-1.png" alt=""></div>-->
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="content-text">
                            <a class="content-text-hover" href="{{ route('good', ['good' => $good_new->id]) }}">
                                <p>
                                {{$good_new->text}}
                            </p>
                            </a>
                            <h5 class="content-text__title">
                                {{ $good_new->title }}
                            </h5>
                            <div class="content-info">
                                <div class="info-one">
                                    <? if ((!empty($good_new->diametr_min)) && ($good_new->diametr_min > 0) &&
                                           (!empty($good_new->diametr_max)) && ($good_new->diametr_max > 0)) {?>
                                    <p class="info-one__par"><span class="content-info__par-title">⌀ обработки:</span> {{$good_new->diametr_min}}-{{$good_new->diametr_max}} мм
                                    </p>
                                    <? } ?>
                                    <? if ((!empty($good_new->RMC_min)) && ($good_new->RMC_min > 0) &&
                                          (!empty($good_new->RMC_max)) && ($good_new->RMC_max > 0)) {
                                    ?>
                                    <p class="info-one__par"><span class="content-info__par-title">РМЦ</span> {{$good_new->RMC_min}} - {{$good_new->RMC_max}} мм</p>
                                    <? } ?>
                                    <p class="info-one__par"><span>Мощность</span> {{$good_new->power}} кВт</p>
                                    <p class="info-one__par"><span>Вес</span> {{$good_new->weight}} кг</p>
                                </div>
                                <div class="info-two">
                                    <p class="info-two__title">Производитель:</p>
                                    <div class="info-two-wrapper">
                                        <img class="info-two-wrapper__country" src="{{ asset('/img/main/catalog/country/'.$good_new->country.'.svg') }}" alt="">
                                        <span class="info-two-wrapper__name">{{ $good_new->manufacturer }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="content-text-down">
                                @if ($good_new->price_old > 0)
                                <span class="content-text-down__before content-text-down__before--active">{{$good_new->price_old}} ₽</span>
                                @endif
                                @if ($good_new->price > 0)
                                <p class="content-text-down__price">
                                    {{$good_new->price}} ₽
                                </p>
                                @endif
                                <button class="content-text-down__button">В каталог</button>
                            </div>
                        </div>
                    </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <a class="catalog-button" href="{{ route('catalog') }}">Смотреть все</a>

        </div>
    </section>
<!--
    <section class="machines">
        <div class="container">
            <h2 class="machines__main-title">Оборудование для цеха
                обработки листа</h2>
            <div class="swiper swiper-machine">
                <div class="swiper-wrapper swiper-wrapper-machines">
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-4.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Станки</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-2.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Оборудование</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-3.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Машины</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-1.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Упарвление</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-4.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Приборы</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-machines">
                        <img class="swiper-slide-machines__img" src="./img/main/catalog/cat-2.png" alt="">
                        <div class="swiper-slide-machines__block">
                            <h3 class="swiper-slide-machines__title">Оборудование</h3>
                            <p class="swiper-slide-machines__text">124 товара</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
-->
    <section class="pick-up">
        <h2 class="visually-hidden">Автоматизация сварки</h2>
        <div class="container">
            <div class="pick-up-wrapper">
                <div class="pick-up-block">
                    <img src="./img/main/pick-up/1.png" alt="">
                </div>
                <div class="pick-up-block">
                    <img src="./img/main/pick-up/2.png" alt="">
                </div>
                <div class="pick-up-block">
                    <img src="./img/main/pick-up/3.png" alt="">
                </div>
                <div class="pick-up-block pick-up-block__four">
                    <img src="./img/main/pick-up/4.png" alt="">
                    <a class="pick-up-block__button" href="#">Подобрать</a>
                </div>
                <div class="pick-up-block">
                    <img src="./img/main/pick-up/5.png" alt="">
                </div>
                <div class="pick-up-block">
                    <img src="./img/main/pick-up/6.png" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <div class="about-top">
                <h2 class="about-top__title">
                    О компании
                </h2>
                <a class="about-top__link" href="{{ route('company') }}">Подробнее</a>
            </div>
            <div class="about-main">
                <div class="about-main-text">
                    <h3 class="about-main-text__title">
                        {{ $company[0]->title }}
                        <!--Официальный дилер оборудования 50 мировых брендов для
                        бизнеса и частных предприятий.-->
                    </h3>
                    <p class="about-main-text__par">
                        {{ $company[0]->text }}
                        <!--С 2008 года подбираем оборудование под производственные
                        задачи клиентов: металлообработка и сварка, стройка и
                        инструмент, станки с ЧПУ.
                        Менеджеры-инженеры с семилетним стажем сопровождают
                        клиента с первой консультации и до постгарантийного
                        обслуживания.
                        Бизнес-процессы, гибкая логистика и опыт сотрудников
                        компании решают задачу клиента даже в сложных ситуациях.
                        Востребованные запасные части на складе для минимизации
                        простоя оборудования у клиентов.
                        Продемонстрируем оборудование в работе на собственном
                        складе и на Ваших объектах.
                        Реализовано больше 500 проектов таких, как строительство
                        Керченского моста и газового потока «Сила Сибири».-->
                    </p>
                </div>
                <div class="about-main-numbers">
                    <div class="about-main-numbers-block">
                        <h4 class="about-main-numbers-block__num">{{ $company[0]->stock_area }}<!--3500--></h4>
                        <p class="about-main-numbers-block__def">кв.м складских
                            помещений</p>
                    </div>
                    <div class="about-main-numbers-block second">
                        <h4 class="about-main-numbers-block__num">{{ $company[0]->name_equipment }}<!--50 000--></h4>
                        <p class="about-main-numbers-block__def">наименований
                            в наличии</p>
                    </div>
                    <div class="about-main-numbers-block">
                        <h4 class="about-main-numbers-block__num">{{ $company[0]->area_demo }}<!--600--></h4>
                        <p class="about-main-numbers-block__def">кв.м демонстрационный зал оборудования</p>
                    </div>
                    <div class="about-main-numbers-block four">
                        <h4 class="about-main-numbers-block__num">{{ $company[0]->workers }}<!--140--></h4>
                        <p class="about-main-numbers-block__def">сотрудников
                            и специалистов</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if ($news->count())
    <section class="news">
        <div class="container news-container">
            <h2 class="news__title">
                Новости
            </h2>
            <div class="news-wrapper">
                @foreach ($news as $new)
                <div class="news-block">
                    <img class="news-block__img" src="{{ asset(Storage::url($new->image)) }}" alt="">
                    <h3 class="news-block__title news-block__title-1">{{ $new->title }}</h3>
                    <div class="news-block-bottom">
                        <a class="news-block-bottom__link" href="#">Читать далее</a>
                        <span class="news-block-bottom__date">{{ date('d.m.Y', strtotime($new->created_at)) }}</span>
                    </div>
                </div>
                @endforeach
                <!--<div class="news-block">
                    <img class="news-block__img" src="./img/main/news/2.png" alt="">
                    <h3 class="news-block__title">Приглашаем на выставку металлообработки - 2022</h3>
                    <div class="news-block-bottom">
                        <a href="#" class="news-block-bottom__link">Читать далее</a>
                        <span class="news-block-bottom__date">03.08.2022</span>
                    </div>
                </div>
                <div class="news-block">
                    <img class="news-block__img" src="./img/main/news/3.png" alt="">
                    <h3 class="news-block__title">Приглашаем на выставку металлообработки - 2022</h3>
                    <div class="news-block-bottom">
                        <a href="#" class="news-block-bottom__link">Читать далее</a>
                        <span class="news-block-bottom__date">03.08.2022</span>
                    </div>
                </div>-->

            </div>
            <a class="news__button">Смотреть еще</a>
        </div>
    </section>
    @endif
    <section class="partners">
        <div class="container partners-container">
            <h3 class="partners__title">Нам
                доверяют</h3>
            <div class="swiper swiper-partners">
                <div class="swiper-wrapper swiper-wrapper-partners">
                    <div class="swiper-slide swiper-slide-partners">
                        <div class="info-wrapper">
                            <img class="partner-img" src="./img/main/partners/1.png" alt="">
                            <p class="partner-text partner-text-one">«Optimum Maschinen»
                                занимается проектированием,
                                разработкой и производством металлообрабатывающего оборудования</p>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-partners">
                        <div class="info-wrapper">
                            <img class="partner-img partner-img-2" src="./img/main/partners/2.png" alt="">
                            <p class="partner-text">XT LASER —это предприятие, специализирующееся на производстве
                                оптоволоконного оборудования</p>
                        </div>

                    </div>
                    <div class="swiper-slide swiper-slide-partners">
                        <div class="info-wrapper">
                            <img class="partner-img partner-img-3" src="./img/main/partners/3.png" alt="">
                            <p class="partner-text">SAHINLER производитель
                                валковых, профилегибочных машин
                                и комбинированных ножниц</p>
                        </div>

                    </div>
                    <div class="swiper-slide swiper-slide-partners">
                        <div class="info-wrapper">
                            <img class="partner-img partner-img-2" src="./img/main/partners/2.png" alt="">
                            <p class="partner-text">SAHINLER производитель
                                валковых, профилегибочных машин
                                и комбинированных ножниц</p>
                        </div>
                    </div>

                </div>

            </div>
            <div class="swiper-button-next swiper-button-next_partner">
                <svg width="24" heigth="14px" class="svg-partners-next">
                    <use xlink:href="./img/icons.svg#partn-next-n"></use>
                </svg>
            </div>
            <div class="swiper-button-prev swiper-button-prev_partner">
                <svg class="svg-partners-back">
                    <use xlink:href="./img/icons.svg#partn-next-n"></use>
                </svg>
            </div>
        </div>
    </section>
@endsection