@extends('layouts.front-end.app')

@section('title', $category->name)

@push('css_or_js')
    <meta name="robots" content="index, follow">
    <meta property="og:image" content="{{$web_config['web_logo']['path']}}"/>
    <meta property="og:title" content="Welcome To {{$web_config['company_name']}} Home"/>
    <meta property="og:url" content="{{env('APP_URL')}}">
    <meta property="og:description"
          content="{{ substr(strip_tags(str_replace('&nbsp;', ' ', $web_config['about']->value)),0,160) }}">

    <meta property="twitter:card" content="{{$web_config['web_logo']['path']}}"/>
    <meta property="twitter:title" content="Welcome To {{$web_config['company_name']}} Home"/>
    <meta property="twitter:url" content="{{env('APP_URL')}}">
    <meta property="twitter:description"
          content="{{ substr(strip_tags(str_replace('&nbsp;', ' ', $web_config['about']->value)),0,160) }}">

    <link rel="stylesheet" href="{{theme_asset(path: 'assets/front-end/css/home.css')}}"/>
    <link rel="stylesheet" href="{{ theme_asset(path: 'assets/front-end/css/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ theme_asset(path: 'assets/front-end/css/owl.theme.default.min.css') }}">
@endpush

@section('content')
    @php($decimalPointSettings = !empty(getWebConfig(name: 'decimal_point_settings')) ? getWebConfig(name: 'decimal_point_settings') : 0)

    <div class="__inline-61 container">

        <div class="owl-carousel owl-theme new-arrivals-product mt-5" id="sub_cats_slider" dir="rtl">
            @foreach($category->childes as $child)
                <a href="{{route('category',$child['slug'])}}">
                    <img class=" sub_cat_image" alt="{{$child['name']}}"
                         src="{{ getStorageImages(path: $child->icon_full_url, type: 'category') }}">
                    <h3 class="cat_title text-center mt-3">
                        {{$child['name']}}
                    </h3>
                </a>
            @endforeach
        </div>
        <div class="row mt-5">
            @foreach($category->categoryBanners as $banner)
                <div class="col-lg-6 col-12 $banner">
                    @if($banner->url != null)
                        <a href="{{$banner->url}}" class="w-100">
                            <img src="{{ asset($banner->full_image_url) }}" alt="" class="category_banner_img">
                        </a>
                    @else
                        <img src="{{ asset($banner->full_image_url) }}" alt="" class="category_banner_img">
                    @endif
                </div>
            @endforeach
        </div>
        @if($category->collections->count() > 0)
            @foreach($category->collections as $collection)
                <div class="mt-5">
                    <div class="row">
                        <div class="col-lg-6 col-8 text-right ">
                            <h3 class="h_title">
                                {{$collection->name}}
                            </h3>
                        </div>
                        <div class="col-lg-6 col-4 text-left">
                            <a href="{{url('products')}}" class="see_all">
                                {{translate('See All')}}
                            </a>
                        </div>
                    </div>
                    <div class="py-4 rtl px-0 px-md-3">
                        <div class="__inline-62 pt-3">
                            <div class="row align-items-center">
                                @if($collection->image != null)
                                    <div class="col-lg-3 col-12 collection_cover_div">
                                        <img
                                            src="{{ getStorageImages(path: $collection->image_full_url , type: 'backend-basic') }}"
                                            alt="" class="w-100">
                                    </div>
                                @endif
                                <div class="{{$collection->image != null ? 'col-lg-9' : 'col-lg-12'}} col-12">
                                    <div class="feature-product">
                                        <div class="carousel-wrap p-1">
                                            <div
                                                class="owl-carousel owl-theme new-arrivals-product mt-0 {{$collection->image != null ? 'featured_products_list_with_image' : 'featured_products_list'}}"
                                                id="featured_products_list_{{$collection->id}}"
                                                dir="ltr">
                                                @foreach($collection->products as $product)
                                                    <div>
                                                        @include('web-views.partials._feature-product',['product'=>$product, 'decimal_point_settings'=>$decimalPointSettings])
                                                    </div>

                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif

        <div class="mt-5">
            <div class="row">
                <div class="col-lg-6 col-6 text-right">
                    <h3>
                        {{translate('Shop_The_Best_Brands')}}
                    </h3>
                </div>
            </div>
            <div class="mt-sm-3 mb-3 brand-slider">
                <div class="owl-carousel owl-theme p-2 brands-slider custom_owl">
                    @php($brandCount=0)
                    @foreach($brands as $brand)
                        @if($brandCount < 15)
                            <div class="text-center">
                                <a href="{{route('products',['brand_id'=> $brand['id'],'data_from'=>'brand','page'=>1])}}"
                                   class="custom__brand-item">
                                    <img alt="{{ $brand->image_alt_text }}"
                                         src="{{ getStorageImages(path: $brand->image_full_url, type: 'brand') }}">
                                </a>
                            </div>
                        @endif
                        @php($brandCount++)
                    @endforeach
                </div>
            </div>
        </div>


        @foreach($category->childes as $child)
            @if($child->childes->count() > 0)
                <section class="mt-5">
                    <div class="sub_sub_container">
                        @foreach($child->childes as $sub_child)
                            <a href="{{ route('category',$sub_child['slug']) }}">
                                <img class=" sub_cat_image" alt="{{$sub_child['name']}}"
                                     src="{{ getStorageImages(path: $sub_child->icon_full_url, type: 'category') }}">
                                <h3 class="cat_title text-center mt-3">
                                    {{$sub_child['name']}}
                                </h3>
                            </a>
                        @endforeach
                    </div>
                    <div class="row">
                        @foreach($child->categoryBanners as $child_banner)
                            <div class="col-lg-6 col-12 $child_banner">
                                @if($child_banner->url != null)
                                    <a href="{{$child_banner->url}}" class="w-100">
                                        <img src="{{ asset($child_banner->full_image_url) }}" alt="" class="category_banner_img">
                                    </a>
                                @else
                                    <img src="{{ asset($child_banner->full_image_url) }}" alt="" class="category_banner_img">
                                @endif
                            </div>
                        @endforeach
                    </div>

                    @if($child->collections->count() > 0)
                        @foreach($child->collections as $collection)
                            <div class="mt-5">
                                <div class="row">
                                    <div class="col-lg-6 col-6 text-right">
                                        <h3>
                                            {{$collection->name}}
                                        </h3>
                                    </div>
                                    <div class="col-lg-6 col-6 text-left">
                                        <a href="{{url('products')}}" class="see_all">
                                            {{translate('See All')}}
                                        </a>
                                    </div>
                                </div>
                                <div class="py-4 rtl px-0 px-md-3">
                                    <div class="__inline-62 pt-3">
                                        <div class="row align-items-center">
                                            @if($collection->image != null)
                                                <div class="col-lg-3 col-12 collection_cover_div">
                                                    <img
                                                        src="{{ getStorageImages(path: $collection->image_full_url , type: 'backend-basic') }}"
                                                        alt="" class="w-100">
                                                </div>
                                            @endif
                                            <div
                                                class="{{$collection->image != null ? 'col-lg-9' : 'col-lg-12'}} col-12">
                                                <div class="feature-product">
                                                    <div class="carousel-wrap p-1">
                                                        <div
                                                            class="owl-carousel owl-theme new-arrivals-product mt-0 {{$collection->image != null ? 'rand_products_with_image' : 'rand_products'}}"
                                                            dir="ltr">
                                                            @foreach($collection->products as $product)
                                                                <div>
                                                                    @include('web-views.partials._feature-product',['product'=>$product, 'decimal_point_settings'=>$decimalPointSettings])
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </section>
            @endif
        @endforeach

    </div>
    <span id="direction-from-session" data-value="{{ session()->get('direction') }}"></span>
@endsection

@push('script')
    <script src="{{theme_asset(path: 'assets/front-end/js/owl.carousel.min.js')}}"></script>
    {{--    <script src="{{ theme_asset(path: 'assets/front-end/js/home.js') }}"></script>--}}
    <script>
        $("#sub_cats_slider").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            ltr: false,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 2,
                },
                375: {
                    items: 2,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 4,
                },
                992: {
                    items: 6,
                },
                1200: {
                    items: 8,
                },
                1400: {
                    items: 8,
                },
            },
        });
        $(".brands-slider").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                directionFromSession === "rtl"
                    ? [
                        "<i class='czi-arrow-right'></i>",
                        "<i class='czi-arrow-left'></i>",
                    ]
                    : [
                        "<i class='czi-arrow-left'></i>",
                        "<i class='czi-arrow-right'></i>",
                    ],
            dots: false,
            rtl: directionFromSession === "rtl",
            ltr: directionFromSession === "ltr",
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 4,
                },
                1200: {
                    items: 5,
                },
                1400: {
                    items: 5,
                },
            },
        });
        $(".featured_products_list_with_image").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                375: {
                    items: 1,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 3,
                },
                1200: {
                    items: 4,
                },
            },
        });

        $(".featured_products_list").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                375: {
                    items: 1,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 4,
                },
                1200: {
                    items: 5,
                },
            },
        });
        $("#special_products_list").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                375: {
                    items: 1,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 3,
                },
                1200: {
                    items: 4,
                },
            },
        });
        $(".rand_products").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                375: {
                    items: 1,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 4,
                },
                1200: {
                    items: 5,
                },
            },
        });

        $(".rand_products_with_image").owlCarousel({
            loop: false,
            autoplay: false,
            margin: 20,
            nav: true,
            navText:
                [
                    "<i class='czi-arrow-right'></i>",
                    "<i class='czi-arrow-left'></i>",
                ],
            dots: false,
            rtl: true,
            responsive: {
                0: {
                    items: 1,
                },
                360: {
                    items: 1,
                },
                375: {
                    items: 1,
                },
                540: {
                    items: 2,
                },
                576: {
                    items: 2,
                },
                768: {
                    items: 3,
                },
                992: {
                    items: 3,
                },
                1200: {
                    items: 4,
                },
            },
        });
    </script>

@endpush