@extends('home.layouts.index')

@section('title')
    {{ $setting['name'] }}
@endsection

@section('description')
    {{ $setting->meta_des }}
@endsection

@section('keywords')
    {{ $setting->meta_key }}
@endsection

@section('style')
    <style>
.tab-header .nav .nav-item {
    margin-right:15px
}

@media screen and (min-width:768px){
    .d-md-none{
        display:none !important;
    }
}
@media screen and (max-width:768px){
    .d-sm-none{
        display:none !important;
    }
}
.owl-carousel .owl-item img {width: auto !important;}
.owl-theme .owl-nav .owl-next, .owl-theme .owl-nav .owl-prev{
    transform:translateY(-96px) !important;
}
.owl-theme .owl-nav .owl-prev{
    left:19px !important;
}
.owl-theme .owl-nav .owl-next {
    right: 19px !important;
}
    </style>
@endsection

@section('script')
    <script>
        function change_quantity(type) {
            let quantity = $('#quantity').val();
            if (type == 1) {
                quantity = parseInt(quantity) + 1;
            } else {
                quantity = parseInt(quantity) - 1;
            }
            if (quantity == 0) {
                quantity = 1;
                $('#quantity').val(quantity);
            } else {
                $('#quantity').val(quantity);
            }


        }

        function ActiveCatNav(tag, cat_id) {
            $('.category-icon').removeClass('active');
            $(tag).addClass('active');
            $('.products_category').addClass('d-none');
            $('.cat_' + cat_id).removeClass('d-none');
        }
    </script>
@endsection

@section('content')

    <main class="main">
        <section class=" d-sm-none intro-section p-relative">
            <div
                class="owl-carousel owl-theme owl-nav-fade owl-nav-arrow intro-slider animation-slider row cols-1 gutter-no"
                data-owl-options="{
                        'dotsContainer': '.owl-dots-container',
                        'nav': false,
                        'dots': false,
                        'rtl': true,
                        'loop': true,
                        'items': 1,
                        'autoplay': false,
                        'autoplayTimeout': 8000,
                        'responsive': {
                            '768': {
                                'dots': true
                            }
                        }
                    }">
                @foreach($sliders as $slider)
                    <div class="d-sm-none intro-slider intro-slide2 banner banner-fixed">
                        <figure>
                            <img src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image ) }}"
                                 alt="intro-banner" width="1903"
                                 height="798" style="background-color: #333438;"/>
                        </figure>
                        <div class="row p-absolute banner-content mt-10 mt-md-0  pt-10 pt-md-0">
                            <div class="col-12 col-md-6 banner-text">
                                <div class="p-absolute y-50  mt-lg-10 pt-1">
                                    <h3 class="banner-subtitle slide-animate ls-m text-primary font-weight-normal"
                                        data-animation-options="{'name': 'blurIn', 'duration': '1.2s', 'delay': '.2s'}">
                                        {{$slider->title}}</h3>
                                    <h2 class="banner-title font-weight-bold mb-9 slide-animate ls-s text-white"
                                        data-animation-options="{'name': 'fadeInUpShorter', 'duration': '1s', 'delay': '1.4s'}">
                                        {{$slider->text}}
                                    </h2>
                                    <a href="{{ $slider->button_link }}"
                                       class="btn btn-dark btn-rounded slide-animate ls-normal mb-2 text-uppercase"
                                       data-animation-options="{'name': 'fadeInUpShorter', 'duration': '1s', 'delay': '1.8s'}">
                                        خرید کنید
                                        <i class="d-icon-arrow-right"></i></a>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 banner-figure">
                                <figure class="p-absolute y-50 x-50 floating"
                                        data-options="{&quot;invertX&quot;:true,&quot;invertY&quot;:true}">
                                    <img  src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->thumbnail ) }}"
                                         class="layer mx-auto " alt="slide2-shoes" width="779" height="500">
                                </figure>
                            </div>

                        </div>
                    </div>
                @endforeach


            </div>
            {{--        <div class="owl-dots-container p-absolute y-50 d-lg-show d-flex flex-column mt-10">--}}
            {{--            <button title="dots-container" class="owl-dot">--}}
            {{--                <img src="images/demos/demo-market3/intro/slide-dot-1.png" alt="intro-dot" width="91" height="91"/>--}}
            {{--                <span class="dot-content">--}}
            {{--<span class="dot-index">01.</span>--}}
            {{--</span>--}}
            {{--            </button>--}}


            {{--        </div>--}}
        </section>
<section class=" d-md-none intro-section p-relative">
            <div
                class="owl-carousel owl-theme owl-nav-fade owl-nav-arrow intro-slider animation-slider row cols-1 gutter-no"
                data-owl-options="{
                        'dotsContainer': '.owl-dots-container',
                        'nav': false,
                        'dots': false,
                        'rtl': true,
                        'loop': true,
                        'items': 1,
                        'autoplay': false,
                        'autoplayTimeout': 8000,
                        'responsive': {
                            '768': {
                                'dots': true
                            }
                        }
                    }">
                @foreach($sliders as $slider)
                    <div class="d-md-none intro-slider intro-slide2 banner banner-fixed">
                        <figure>
                            <img src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image_2 ) }}"
                                 alt="intro-banner" width="1903"
                                 height="798" style="background-color: #333438;"/>
                        </figure>
                        <div class="row p-absolute banner-content mt-10 mt-md-0  pt-10 pt-md-0">
                            <div class="col-12 col-md-6 banner-text">
                                <div class="p-absolute y-50  mt-lg-10 pt-1">
                                    <h3 class="banner-subtitle slide-animate ls-m text-primary font-weight-normal"
                                        data-animation-options="{'name': 'blurIn', 'duration': '1.2s', 'delay': '.2s'}">
                                        {{$slider->title}}</h3>
                                    <h2 class="banner-title font-weight-bold mb-9 slide-animate ls-s text-white"
                                        data-animation-options="{'name': 'fadeInUpShorter', 'duration': '1s', 'delay': '1.4s'}">
                                        {{$slider->text}}
                                    </h2>
                                    <a href="{{ $slider->button_link }}"
                                       class="btn btn-dark btn-rounded slide-animate ls-normal mb-2 text-uppercase"
                                       data-animation-options="{'name': 'fadeInUpShorter', 'duration': '1s', 'delay': '1.8s'}">
                                        خرید کنید
                                        <i class="d-icon-arrow-right"></i></a>
                                </div>
                            </div>


                        </div>
                    </div>
                @endforeach


            </div>
            {{--        <div class="owl-dots-container p-absolute y-50 d-lg-show d-flex flex-column mt-10">--}}
            {{--            <button title="dots-container" class="owl-dot">--}}
            {{--                <img src="images/demos/demo-market3/intro/slide-dot-1.png" alt="intro-dot" width="91" height="91"/>--}}
            {{--                <span class="dot-content">--}}
            {{--<span class="dot-index">01.</span>--}}
            {{--</span>--}}
            {{--            </button>--}}


            {{--        </div>--}}
        </section>
        <section>
            <div class="row gutter-no">
                <aside class="col-lg-3 col-xxl-sidebar page-sidebar sidebar sidebar-fixed sticky-sidebar-wrapper">
                    <div class="sidebar-overlay"></div>
                    <a href="#" class="sidebar-toggle"><i class="fas fa-chevron-right"></i></a>
                    <a class="sidebar-close" href="#"><i class="d-icon-times"></i></a>
                    <div class="sidebar-content">
                        <div class="sticky-sidebar" data-sticky-options="{'top': 10}">
                            <div class="widget">
                                <h3 class="widget-title">دسته بندی محصولات</h3>
                                <ul class="menu vertical-menu category-menu">