@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.home'))

@section('page_title', trans('title.home'))

@section('content')
    <div class="container cat_slider">
        <div class="categories">
            <h3>
                <a href="{{ url('/products') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path id="Path_4620" data-name="Path 4620"
                            d="M11.889,19V10.111H19V19ZM3,11.889V3h7.111v8.889Zm5.333-1.778V4.778H4.778v5.333ZM3,19V13.667h7.111V19Zm1.778-1.778H8.333V15.444H4.778Zm8.889,0h3.556V11.889H13.667ZM11.889,3H19V8.333H11.889Zm1.778,1.778V6.556h3.556V4.778Z"
                            transform="translate(-3 -3)" fill="#fff" />
                    </svg>
                    @lang('menu.products')
                </a>
            </h3>
            <ul>
                @foreach ($categories as $category)
                    <li>
                        <a href="{{ $category->url }}">{{ $category->title }}</a>
                        @if ($category->children->count() > 0)
                            <span class="cat_dropdown">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
                                    <path id="Path_1704" data-name="Path 1704"
                                        d="M11.5,11.757,14,14.423l-1.25,1.334-3.75-4,3.75-4L14,9.091Z"
                                        transform="translate(-9 -7.757)" />
                                </svg>
                            </span>
                            <ul>
                                @foreach ($category->children as $second)
                                    <li>
                                        <a href="{{ $second->url }}">{{ $second->title }}</a>
                                        @if ($second->children->count() > 0)
                                            <span class="cat_dropdown_inner">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
                                                    <path id="Path_1704" data-name="Path 1704"
                                                        d="M11.5,11.757,14,14.423l-1.25,1.334-3.75-4,3.75-4L14,9.091Z"
                                                        transform="translate(-9 -7.757)" />
                                                </svg>
                                            </span>
                                            <ul>
                                                @foreach ($second->children as $third)
                                                    <li><a href="{{ $third->url }}">{{ $third->title }}</a></li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="main_slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($slides as $item)
                        <div class="swiper-slide">
                            <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                            <div class="slider_texts">
                                <h3>
                                    {{ $item->title }}
                                </h3>
                                {!! $item->description !!}
                                @if ($item->link)
                                    <a href="{{ $item->link }}" target="_blank"></a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    @if ($discountedProductsCount > 0)
        <div class="section_title container">
            <h3>@lang('site.discounted_products')</h3>
            <a href="{{ url('/products?sales=1') }}">
                @lang('site.all_products') ({{ $discountedProductsCount }})
            </a>
        </div>
        <div class="half_slider saled_products">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($discountedProducts as $item)
                        <div class="swiper-slide">
                            @include('partials.product-item', $item)
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="swiper-button-next">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
            <div class="swiper-button-prev">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
        </div>
    @endif

    @if ($mainPageProductsCount > 0)
        <div class="section_title container">
            <h3>@lang('site.required_products')</h3>
            <a href="{{ url('/products?required=1') }}">
                @lang('site.all_products') ({{ $mainPageProductsCount }})
            </a>
        </div>
        <div class="half_slider featured_products">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($mainPageProducts as $item)
                        <div class="swiper-slide">
                            @include('partials.product-item', $item)
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="swiper-button-next">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
            <div class="swiper-button-prev">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
        </div>
    @endif

    @if ($centerLeftBanner || $centerTopBanner || $centerBottomLeftBanner || $centerBottomRightBanner)
        <div class="middle_banners container">
            @if ($centerLeftBanner)
                <div class="l_banner">
                    <a href="{{ $centerLeftBanner->link }}" target="_blank">
                        <img src="{{ asset($centerLeftBanner->image) }}" alt="{{ $centerLeftBanner->title }}">
                    </a>
                </div>
            @endif
            <div class="r_banner">
                @if ($centerTopBanner)
                    <div class="rsm_banner">
                        <a href="{{ $centerTopBanner->link }}" target="_blank">
                            <img src="{{ asset($centerTopBanner->image) }}" alt="{{ $centerTopBanner->title }}">
                        </a>
                    </div>
                @endif
                <div class="rsm_banner">
                    @if ($centerBottomLeftBanner)
                        <div class="sm_banner">
                            <a href="{{ $centerBottomLeftBanner->link }}" target="_blank">
                                <img src="{{ asset($centerBottomLeftBanner->image) }}"
                                    alt="{{ $centerBottomLeftBanner->title }}">
                            </a>
                        </div>
                    @endif
                    @if ($centerBottomRightBanner)
                        <div class="sm_banner">
                            <a href="{{ $centerBottomRightBanner->link }}" target="_blank">
                                <img src="{{ asset($centerBottomRightBanner->image) }}"
                                    alt="{{ $centerBottomRightBanner->title }}">
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    @if ($mainOnlineSaleProductsCount > 0)
        <div class="section_title container">
            <h3>@lang('site.online_saled_products')</h3>
            <a href="{{ url('/products?required=1') }}">
                @lang('site.all_products') ({{ $mainOnlineSaleProductsCount }})
            </a>
        </div>
        <div class="half_slider featured_products">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($mainOnlineSaleProducts as $item)
                        <div class="swiper-slide">
                            @include('partials.product-item', $item)
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="swiper-button-next">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
            <div class="swiper-button-prev">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                    <path id="Path_1704" data-name="Path 1704"
                        d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                        transform="translate(-9 -7.757)" fill="#fff" />
                </svg>
            </div>
        </div>
    @endif

    @if ($firstLineCategories->count() > 0)
        <div class="categories_tabs">
            <div class="section_title container">
                <div class="left">
                    <ul class="cat-tabs cat__tabs-first">
                        <span class="cat-tabs__mobile">
                            <b>{{ $firstLineCategories[0]->title }}</b>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4">
                            <path id="prefix__Path_113" d="M12 14l-4-4h8z" data-name="Path 113" transform="translate(-8 -10)"></path>
                        </svg>
                        </span>
                        <div class="cat-tabs__list">
                            @foreach ($firstLineCategories as $key => $item)
                                <li data-target="#cat{{ $item->id }}" class="{{ $key == 0 ? 'active' : '' }}" onclick="fetchProducts({{ $item -> id }}, 'categories-first-line')">{{ $item->title }}</li>
                            @endforeach
                        </div>
                    </ul>
                </div>
                <a href="{{ url('/products') }}" class="categories-first-line">
                    @lang('site.all_products') (<span>0</span>)
                </a>
            </div>
            <div class="container">
                <div class="tab-content">
                    @foreach ($firstLineCategories as $key => $item)
                        <div id="cat{{ $item->id }}"
                            class="cat-tab-panel {{ $key == 0 ? 'active' : '' }}">
                            <div class="products_By_category">
                                <div class="swiper-container products_By_category-swiper">
                                    <div class="swiper-wrapper" id="for-products-{{ $item->id }}"></div>
                                </div>
                                <div class="swiper-button-next">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                                        <path id="Path_1704" data-name="Path 1704"
                                            d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                                            transform="translate(-9 -7.757)" fill="#fff" />
                                    </svg>
                                </div>
                                <div class="swiper-button-prev">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                                        <path id="Path_1704" data-name="Path 1704"
                                            d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                                            transform="translate(-9 -7.757)" fill="#fff" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    @endif

    @if ($secondLineCategories->count() > 0)
        <div class="categories_tabs">
            <div class="section_title container">
                <div class="left">
                    <ul class="cat-tabs cat__tabs-second">
                        <span class="cat-tabs__mobile">
                            <b>{{ $secondLineCategories[0]->title }}</b>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4">
                            <path id="prefix__Path_113" d="M12 14l-4-4h8z" data-name="Path 113" transform="translate(-8 -10)"></path>
                        </svg>
                        </span>
                        <div class="cat-tabs__list">
                            @foreach ($secondLineCategories as $key => $item)
                                <li data-target="#cat{{ $item->id }}" class="{{ $key == 0 ? 'active' : '' }}" onclick="fetchProducts({{ $item->id }}, 'categories-second-line')">{{ $item->title }}</li>
                            @endforeach
                        </div>
                    </ul>
                </div>
                <a href="{{ url('/products') }}" class="categories-second-line">
                    @lang('site.all_products') (<span>0</span>)
                </a>
            </div>

            <div class="container">
                <div class="tab-content">
                    @foreach ($secondLineCategories as $key => $item)
                        <div id="cat{{ $item->id }}" class="cat-tab-panel {{ $key == 0 ? 'active' : '' }}">
                            <div class="products_By_category_bottom">
                                <div class="swiper-container products_By_category_bottom-swiper">
                                    <div class="swiper-wrapper" id="for-products-{{ $item->id }}"></div>
                                </div>
                                <div class="swiper-button-next">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                                        <path id="Path_1704" data-name="Path 1704"
                                            d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                                            transform="translate(-9 -7.757)" fill="#fff" />
                                    </svg>
                                </div>
                                <div class="swiper-button-prev">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.684 7.026">
                                        <path id="Path_1704" data-name="Path 1704"
                                            d="M11.342,11.27l2.342,2.342-1.171,1.172L9,11.27l3.513-3.513,1.171,1.172Z"
                                            transform="translate(-9 -7.757)" fill="#fff" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    @endif

    @if ($blogLeftBanner || $blogRightTopBanner || $blogRightBottomBanner)
        <div class="section_title container">
            <h3>@lang('site.blog_banners_title')</h3>
        </div>
        <div class="news_banners container">
            @if ($blogLeftBanner)
                <div class="left">
                    <a href="{{ $blogLeftBanner->link }}" target="_blank">
                        <img src="{{ asset($blogLeftBanner->image) }}" alt="{{ $blogLeftBanner->title }}">
                    </a>
                </div>
            @endif
            <div class="right">
                @if ($blogRightTopBanner)
                    <div class="rsm_banner">
                        <a href="{{ $blogRightTopBanner->link }}" target="_blank">
                            <img src="{{ asset($blogRightTopBanner->image) }}" alt="{{ $blogRightTopBanner->title }}">
                        </a>
                    </div>
                @endif
                @if ($blogRightBottomBanner)
                    <div class="rsm_banner">
                        <a href="{{ $blogRightBottomBanner->link }}" target="_blank">
                            <img src="{{ asset($blogRightBottomBanner->image) }}"
                                alt="{{ $blogRightBottomBanner->title }}">
                        </a>
                    </div>
                @endif
            </div>
        </div>
    @endif

    <div class="section_title container">
        <h3>@lang('site.products')</h3>
        <a href="{{ url('/products') }}">
            @lang('site.all_products') ({{ $productsCount }})
        </a>
    </div>

    <div class="products_list container">
        @foreach ($products as $item)
            @include('partials.product-item', $item)
        @endforeach
    </div>

    <div class="more_products">
        <a href="{{ url('/products') }}">
            @lang('site.show_more')
        </a>
    </div>

    @if ($banners->count() > 0)
        <div class="banners container">
            @foreach ($banners as $item)
                <div class="banner">
                    <a href="{{ $item->link }}" target="_blank">
                        <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                    </a>
                </div>
            @endforeach
        </div>
    @endif

    @if ($brands->count() > 0)
        <div class="partners container">
            <div class="title">
                <h2>@lang('site.brands')</h2>
                <div class="partners_navigation">
                    <div class="swiper-pagination"></div>
                    <div class="nav">
                        <div class="swiper-button-prev">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <g id="prefix__Group_35" data-name="Group 35" transform="rotate(180 12 12)">
                                    <path id="prefix__Path_156" d="M0 0h24v24H0z" data-name="Path 156"
                                        style="fill:none" />
                                    <path id="prefix__Path_157"
                                        d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                                        data-name="Path 157" />
                                </g>
                            </svg>
                        </div>
                        <div class="swiper-button-next">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.556"
                                viewBox="0 0 16 15.556">
                                <path id="prefix__Path_157"
                                    d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                                    data-name="Path 157" transform="translate(-4 -4.222)" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($brands as $item)
                        <div class="swiper-slide">
                            <div class="image">
                                <a href="{{ $item->url }}" rel="noopener noreferrer">
                                    <img src="{{ asset($item->thumb ?? 'assets/client/images/no_image.png') }}" alt="{{ $item->title }}">
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    {{-- <div class="modal active fb_like_modal">
        <div class="modal_bg"></div>
        <div class="modal_container">
            <div class="modal_header">
                <h3>
                    @lang('site.like_button')
                </h3>
                <span class="close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
                        <path id="Path_4637" data-name="Path 4637" d="M11.636,10.3,16.3,5.636l1.333,1.333-4.667,4.667L17.636,16.3,16.3,17.636l-4.667-4.667L6.969,17.636,5.636,16.3,10.3,11.636,5.636,6.969,6.969,5.636Z" transform="translate(-5.636 -5.636)"></path>
                    </svg>
                </span>
            </div>
            <div class="modal_body">
                <div class="fb-like" data-href="https://www.facebook.com/citadeli" data-width="1000" data-layout="button_count" data-action="like" data-size="large" data-share="true"></div>
            </div>
        </div>
    </div> --}}
@endsection

@section('scripts')
    <script>
        let firstLineCount = {{ $firstLineCategories->count() }}
        let secondLineCount = {{ $secondLineCategories->count() }}
        if (firstLineCount > 0 || secondLineCount > 0) {
            $().ready(function() {
                setTimeout(() => {
                    if (firstLineCount > 0) {
                        fetchProducts({{ $firstLineCategories->first()->id ?? 0 }}, 'categories-first-line');
                    }
                    if (secondLineCount > 0) {
                        fetchProducts({{ $secondLineCategories->first()->id ?? 0 }}, 'categories-second-line');
                    }
                }, 1000);
            });
        }

        function fetchProducts(id, className) {
            $.ajax({
                url: "{{ route('products.with.category') }}",
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    category_id: id,
                }
            }).done(function(data) {
                $('a.' + className + ' span').text(data.count);
                $('a.' + className).attr('href', data.category_url);
                $('#for-products-' + id).html(data.html);
                initialSliders(id);
                addToCart();
                addToWishlist();
                addToCompare();
            });
        }

        function initialSliders(id) {
            new Swiper('.products_By_category .products_By_category-swiper', {
                slidesPerView: 'auto',
                loop: true,
                navigation: {
                    nextEl: '.products_By_category .swiper-button-next',
                    prevEl: '.products_By_category .swiper-button-prev',
                }
            });
            new Swiper('.products_By_category_bottom .products_By_category_bottom-swiper', {
                slidesPerView: 'auto',
                loop: true,
                navigation: {
                    nextEl: '.products_By_category_bottom .swiper-button-next',
                    prevEl: '.products_By_category_bottom .swiper-button-prev',
                }
            });
            setTimeout(() => {
                new Swiper(".products_By_category .product_item_slider .swiper-container", {
                    slidesPerView: 1,
                    loop: false,
                    navigation: {
                        nextEl: ".pr-next",
                        prevEl: ".pr-prev",
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'bullets',
                        clickable: true
                    },
                });

                new Swiper(".products_By_category_bottom .product_item_slider .swiper-container", {
                    slidesPerView: 1,
                    loop: false,
                    navigation: {
                        nextEl: ".pr-next",
                        prevEl: ".pr-prev",
                    },
                });
            }, 200);
        }
    </script>
@endsection

@section('scripts')
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ka_GE/sdk.js#xfbml=1&version=v13.0&appId=1038412390034941&autoLogAppEvents=1" nonce="dTEx7WGq"></script>
@endsection