@extends('home.layouts.index')
@section('title')
    {{ $setting['name'] }}
@endsection
@section('description')
    {{ $setting->meta_des }}
@endsection
@section('keywords')
    {{ $setting->meta_key }}
@endsection


@section('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">
        <div class="page-content">
            <div class="container-fluid header-main-wrap">
                <div class=" header-main">
                    <div class="header-backdrop"></div>


                    <video src="{{asset('home/video/fan.mp4')}}" autoplay="true" loop="true" muted width="100%"
                           height="100%"></video>
                    <div class="header-main-title">
                        <h2 style="z-index:10 ;position: relative">
                            فن یا سیستم تهویه مورد نظرتان را جستجو کنید
                        </h2>
                        <h6 style="z-index:10 ;position: relative">
                            ماهان فن مرکز طراحی و ساخت هواکش‌های صنعتی و انواع فن
                        </h6>
                    </div>
                    <div style="z-index:10" class="container filter-tabs-wrapper  appear-animate rtl text-right"
                         data-animation-options="{
        'delay': '.3s'
    }">
                        <div class="mx-auto">
                            <div class="tab tab-nav-simple tab-nav-center tab-nav-boxed">
                                <form action="#" class="input-wrapper mx-auto">
                                    <input type="text" class="form-control" name="search" autocomplete="off"
                                           placeholder="جستجو ..." required="">
                                    <button class="btn btn-search btn-rounded btn-dark btn-block btn-gradient"
                                            type="submit" title="submit-button">
                                        <i class="fa-light fa-search"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="container ellipse-section" style="margin-top: -90px;">
                        <div class="ellipse-wrap">
                            <div class="owl-carousel owl-theme owl-shadow-carousel cols-xl-8 cols-lg-6 cols-md-5 cols-xs-2 cols-2"
                                 data-owl-options="{
     'rtl':true,
    'nav': false,
    'dots': false,
    'items': 8,
    'loop': true,
    'autoplay': true,
    'margin':  20,
    'responsive': {
        '0': {
            'items': 2
        },
        '480': {
            'items': 2
        },
        '576': {
            'items': 3
        },
        '768': {
            'items': 5
        },
        '992': {
            'items': 6
        },
        '1200': {
            'items': 8,
            'dots': false
        }
    }
}">
                                @if(count($active_categories))
                                    @foreach($active_categories as $category)
                                        <div class="category category-top ">
                                            <a href="{{ route('home.product_categories',['category'=>$category->alias]) }}">
                                                <figure class="category-media category-media-img">
                                                    <img src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->image) }}"
                                                         alt="{{$category->name}}"/>
                                                </figure>
                                            </a>
                                            <div class="category-content rtl">
                                                <h4 class="category-name">
                                                    <a href="{{ route('home.product_categories',['category'=>$category->alias]) }}">{{$category->name}}</a>
                                                </h4>
                                                <span class="category-count">
                                                <span>{{count($category->Products)}}</span>محصول
                                            </span>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif

                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <section class="banners-group">
                <div class="container appear-animate rtl text-right" data-animation-options="{
                    'delay': '.3s'
                }">
                    <div class="banner-group1">
                        <div class="decoration deco-top deco-1">
                            <img src="home/images/banner/deco-1.png" alt="banner" width="84" height="84">
                        </div>
                        <div class="decoration deco-top deco-2">
                            <img src="home/images/banner/wind_vectors.png" alt="banner" width="303" height="232">
                        </div>
                        <div class="container-fluid banners-group-wrap">
                            <div class="col-md-6 banner-desc-wrapper d-flex ">
                                <div class="banner-content">
                                    <h3 class="banner-title font-weight-bold mb-2 main-title rtl"> درباره ما</h3>
                                    <p class="text-body mb-5 appear-animate"
                                       data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.4s'}">
                                        فن های خانگی : هواکش های سایز کوچک ، فن بین کانالی ، سانتریفیوژ (حلزونی ) ،
                                        هواکش دمپر دار مخصوص آشپزخانه ، فن های مخصوص باربیکیو و منقل های خانگی ، تراس ،
                                        گلخانه ،انباری ، سالن پرورش و اتاق حیوانات و....<br/>
                                        فن های صنعتی : ضد رطوبت ، ضد گرد و غبار ، ضد اسید ، ضد انفجار ، ضد حرارت ، ضد
                                        سرمای شدید ،  سانتریفیوژ ( حلزونی ) ، انتقال مواد ، بین کانالی ، کامپیوتری (
                                        تابلویی ) ، آکسیال ، رادیال ، ساید‌چنل ، مرغداری ، سیرکوله ، گلخانه ای ، جت فن ،
                                        دم فشار ، بلوور ، هواساز و....<br/>
                                        متعلقات و قطعات : انواع پروانه ( پره ) ، قاب ، توری حفاظ عقب و جلو ، تایمر روشن
                                        و خاموش ، اینورتر ، دیمر ، الکتروموتور ، بدنه ی دستگاه های مختلف و ....

                                    </p>
                                    {{--                                    <a href="#" class="btn mb-1 appear-animate btn-gradient"
                                                                           data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.6s'}">
                                                                            ما را بیشتر بشناسید
                                                                        </a>
                                    --}}
                                </div>
                            </div>
                            <div class="col-md-6 banner-images-wrapper">
                                <div class="row">
                                    <div class="col-12 about-main">
                                        <img src="home/images/Fan.png"
                                             data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.4s'}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="intro-section">
                <div class="container rtl">
                    <div class="row gutter-sm grid">
                        <div class="grid-item col-md-8 height-x3">
                            <div class="intro-slider owl-carousel owl-theme row owl-dot-inner owl-dot-white owl-full-height animation-slider cols-1 gutter-no ltr"
                                 data-owl-options="{
                                            'items': 1,
                                            'nav': false,
                                            'dots': true,
                                            'loop': true,
                                            'autoplay': true,
                                 'animateIn': 'fadeIn',
                                 'animateOut': 'fadeOut'
                                        }">
                                @foreach($banners as $key =>$banner)
                                    <div class="intro-slide{{$key}} banner banner-fixed"
                                         style="background-color: #eee">
                                        <figure>
                                            <img src="{{ imageExist(env('BANNER_IMAGES_UPLOAD_PATH'),$banner->image) }}"
                                                 width="580" height="460"
                                                 alt="{{$banner->title}}"/>
                                        </figure>
                                        <div class="banner-content rtl">
                                            <div class="slide-animate"
                                                 data-animation-options="{'name': 'blurIn', 'duration': '1.4s'}">
                                                <h4 class="banner-subtitle font-weight-semi-bold mb-2  text-white">
                                                    {{$banner->titile}}
                                                </h4>
                                                <h5 class="banner-title mb-2 text-white">
                                                    {{$banner->text}}
                                                </h5>

                                                <a href="{{$banner->button_link}}"
                                                   class="btn btn-rounded mb-1 appear-animate btn-success btn-gradient"
                                                   data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.6s'}">
                                                    {{$banner->button_text}}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="grid-item  grid-item-main col-md-4 col-xs-6 height-x1">
                            <div class="category category-banner category-absolute appear-animate"
                                 data-animation-options="{
                                            'name': 'fadeInLeftShorter',
                                            'delay': '.1s'
                                        }">
                                <img src="home/images/categories/cat2.png"/>
                                <div class="category-content rtl">
                                    <h4 class="category-name"> پیشنهادهای ویژه</h4>
                                    <span class="category-count">
                                            <span>و امتیازات </span> ویژه
                                        </span>
                                    <a href="demo14-shop.html" class="btn btn-rounded mb-1 btn-gradient">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="grid-item  grid-item-main col-md-4 col-xs-6 height-x1">
                            <div class="category category-banner category-absolute appear-animate"
                                 data-animation-options="{
                                            'name': 'fadeInLeftShorter',
                                            'delay': '.1s'
                                        }">
                                <img src="home/images/categories/cat1.png"/>
                                <div class="category-content rtl">
                                    <h4 class="category-name">ارسال سریع و رایگان</h4>
                                    <span class="category-count">
                                            <span>تمامی</span> نقاط کشور
                                        </span>
                                    <a href="demo14-shop.html" class="btn btn-rounded mb-1 btn-gradient">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="grid-item  grid-item-main col-md-4 height-x1">
                            <div class="category category-banner category-absolute appear-animate"
                                 data-animation-options="{
                                            'name': 'fadeInLeftShorter',
                                            'delay': '.3s'
                                        }">
                                <img src="home/images/categories/cat3.png"/>
                                <div class="category-content rtl">
                                    <h4 class="category-name">سفارشی‌سازی </h4>
                                    <span class="category-count">
                                            <span>حک پیام روی محصول </span>
                                        </span>
                                    <a href="demo14-shop.html" class="btn btn-rounded mb-1 btn-gradient">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="grid-space col-1"></div>
                    </div>
                </div>
            </section>
            <section class="category-tow">
                <div class="container category-tow-wrap section-main rtl">
                    <h3 class="banner-title font-weight-bold mb-2 main-title rtl">
                        پرفروش ترین ها
                    </h3>
                    <div class="owl-carousel owl-theme row cols-lg-2 cols-sm-2 cols-1 discount-main" data-owl-options="{
                                 'rtl':true,
                                'nav': false,
                                'dots': true,
                                'items': 2,
                                'margin':  20,
                                'loop': true,
                                'autoplay': true,
                                'responsive': {
                                    '0': {
                                        'items': 1
                                    },
                                    '576': {
                                        'items': 1
                                    },
                                    '992': {
                                        'items': 2,
                                        'dots': false
                                    }
                                }
                            }">
                        @php
                            $categories = \App\Models\Category::where('parent_id', 0)->where('is_active',1)->orderby('priority','asc')->get();
                        @endphp
                        @foreach($categories as $key=>$cat)
                            <div class="category category-group-image category-tow-item">
                                <a href="{{ route('home.product_categories',['category'=>$cat->alias]) }}">
                                    <figure class="category-media">
                                        <img src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$cat->image) }}"
                                             alt="category" width="190"
                                             height="169"/>
                                    </figure>
                                </a>
                                <div class="category-content rtl">
                                    <h4 class="category-name"><a
                                                href="{{ route('home.product_categories',['category'=>$cat->alias]) }}">{{$cat->name}}</a>
                                    </h4>
                                    <ul class="category-list">
                                        @php
                                            $children_categories = \App\Models\Category::where('parent_id', $cat->id)->where('is_active',1)->orderby('priority','asc')->get();
                                        @endphp
                                        @foreach($children_categories as $item)
                                            <li>
                                                <a href="{{ route('home.product_categories',['category'=>$item->alias]) }}">{{$item->name}} </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </section>
            <section class="appear-animate section-main ltr text-right" data-animation-options="{
                    'name': 'fadeIn',
                    'delay': '.1s'
                    }">
                <div class="container best-section-wrap">
                    <div class="d-flex justify-content-between">
                        <div  class="main-page-category-wrapper">
                            <input type="radio" name="main-page-category" id="cat1"/>
                            <label class=" " for="cat1">دسته بندی 1</label>
                            <input type="radio" name="main-page-category" id="cat2"/>
                            <label class=" " for="cat2">دسته بندی 2 </label>
                            <input type="radio" name="main-page-category" id="cat3"/>
                            <label class="" for="cat3">دسته بندی 3</label>

                        </div>
                        <span>
                            <h3 class="banner-title font-weight-bold mb-2 main-title rtl">کالاهای تخفیف دار</h3>
                        </span>

                    </div>

                    <div class="owl-carousel owl-theme owl-nav-top owl-nav-arrow row cols-lg-4 cols-md-3 cols-2 "
                         data-owl-options="{
                                     'rtl':true,
                                    'nav': true,
                                    'dots': false,
                                    'margin': 20,
                                    'autoplay': true,
                                    'autoplayTimeout': 5000,
                                    'responsive': {
                                        '0': {
                                            'items': 1,
                                            'dots': true,
                                            'nav': false
                                        },
                                        '576': {
                                            'items': 2
                                        },
                                        '768': {
                                            'items': 3
                                        },
                                        '992': {
                                            'items': 3
                                        },
                                        '1200': {
                                            'items': 4
                                        }
                                    }
                                }">
                        @foreach($products_hit as $product)
                            @include('home.sections.product_box')
                        @endforeach


                    </div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-113.7635 206.6533 771.3147 501.3673" width="771.3147"
                     height="501.3673" role="img" aria-labelledby="ar1mullynfgee71c2kxhmfhktwbiqm3g"
                     class="unlock-vecteezy__path">
                    <desc id="ar1mullynfgee71c2kxhmfhktwbiqm3g"></desc>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M -111.285 207.337 C -108.9 205.944 -105.838 206.747 -104.445 209.132 C 5.919 398.044 157.539 498.59 295.838 533.863 C 331.174 542.876 365.572 547.621 398.162 548.511 C 382.183 511.274 374.035 471.674 375.287 434.743 C 376.778 390.791 391.621 350.275 422.857 322.377 C 484.883 266.978 556.194 278.607 601.311 317.117 C 646.145 355.385 666.081 421.369 623.712 474.048 C 581.048 527.095 504.482 557.673 413.827 558.625 C 414.847 560.694 415.893 562.754 416.963 564.803 C 460.59 648.286 545.329 713.11 651.708 694.932 C 654.43 694.467 657.014 696.296 657.479 699.018 C 657.944 701.74 656.115 704.324 653.393 704.789 C 541.391 723.928 453.023 655.397 408.101 569.435 C 406.228 565.852 404.43 562.237 402.707 558.594 C 367.818 558.036 331.008 553.153 293.367 543.553 C 152.327 507.58 -1.444 405.264 -113.08 214.176 C -114.473 211.792 -113.669 208.73 -111.285 207.337 Z M 409.147 548.666 C 499.587 548.735 574.958 518.711 615.92 467.781 C 653.868 420.598 636.916 360.655 594.819 324.723 C 553.006 289.033 487.344 278.189 429.518 329.835 C 400.829 355.459 386.706 393.089 385.282 435.082 C 384.039 471.73 392.496 511.44 409.147 548.666 Z"
                          fill="#b5d9ff"
                          transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, -5.684341886080802e-14, -2.842170943040401e-14)"></path>
                </svg>
            </section>
            <section class="feature-box p-relative rtl text-right">
                <div class="container">
                    <div class="row">
                        <div class="container">
                            <h3 class="banner-title font-weight-bold mb-2 main-title rtl">
                                آمار موفقیت کسب‌وکار شما در یک نگاه
                            </h3>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-12 feature-body-right">
                            <div class="appear-animate"
                                 data-animation-options="{'name':'fadeInRightShorter','during':'1.2s'}">
                                <div class="svg-icon svg-delivery-icon">
                                    <img src="home/images/icons/icon1.png"/>
                                </div>
                                <h4 class="title text-normal mb-2">کاهش نرخ پرش کاربران</h4>
                                <p class="mb-10 pb-4">
                                    طراحی جذاب و محتوای مفید در وب‌سایت، نرخ پرش کاربران را کاهش داده است. این به معنای
                                    ماندگاری بیشتر کاربران در سایت و افزایش احتمال تبدیل آن‌ها به مشتریان واقعی است.
                                </p>
                            </div>
                            <div class="appear-animate"
                                 data-animation-options="{'name':'fadeInRightShorter','during':'1.2s','delay':'.7s'}">
                                <div class="svg-icon svg-delivery-icon">
                                    <img src="home/images/icons/icon2.png"/>
                                </div>
                                <h4 class="title mb-3 text-normal">افزایش تعاملات کاربران</h4>
                                <p>
                                    .فعالیت کاربران در بخش نظرات، پرسش‌ها و استفاده از امکانات سایت، نشان‌دهنده افزایش
                                    تعاملات است. این تعاملات به ایجاد اعتماد و ارتباط نزدیک‌تر با مشتریان کمک می‌کند.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-4 col-sm-6 col-12  d-md-show feature-body-center p-relative">
                            <img class="appear-animate p-absolute" src="home/images/center.png"
                                 alt="Featured image" width="472" height="362">
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6 col-12  feature-body-left text-left">
                            <div class="appear-animate"
                                 data-animation-options="{'name':'fadeInLeftShorter','during':'1.2s'}">
                                <div class="svg-icon svg-calory-icon">
                                    <img src="home/images/icons/icon3.png"/>
                                </div>
                                <h4 class="title title-1 text-normal d-flex justify-content-end">
                                    افزایش مشتریان وفادار
                                </h4>
                                <p class="mr-auto mb-10 pb-2">
                                    یکی از مهم‌ترین نتایج بهبود خدمات و تجربه کاربری، افزایش تعداد مشتریان وفادار است.
                                    این مشتریان نه‌تنها به‌صورت مداوم از خدمات شما استفاده می‌کنند، بلکه شما را به
                                    دیگران نیز معرفی می‌کنند و نقش مهمی در رشد کسب‌وکار دارند.
                                </p>
                            </div>
                            <div class="second-div appear-animate"
                                 data-animation-options="{'name':'fadeInLeftShorter','during':'1.2s','delay':'.7s'}">
                                <div class="svg-icon svg-calory-icon">
                                    <img src="home/images/icons/icon4.png"/>
                                </div>
                                <h4 class="title d-flex mb-3 justify-content-end">رشد فروش آنلاین</h4>
                                <p class="mr-auto mb-10 pb-2">
                                    با افزایش دسترسی کاربران به وب‌سایت، فروش آنلاین به‌طور چشمگیری رشد کرده است. این
                                    رشد نشان‌دهنده تأثیر استراتژی‌های بازاریابی دیجیتال و بهبود تجربه خرید آنلاین برای
                                    مشتریان است.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="container appear-animate rtl text-right" data-animation-options="{
                    'delay': '.3s'
                }">
                <section class="banners-group banners-group1">
                    <div class="banner-group2 align-items-center">
                        <div class="banner-right-section skrollr appear-animate"
                             data-options='{"data-bottom-top":"transform:translateX(-20%);opacity: 0;","data-center":"transform:translateX(0%);opacity: 1;"}'>
                            <div class="banner">
                                <img src="home/images/banner/8.jpg" class="d-block" alt="banner" width="680"
                                     height="346" style="background-color: rgb(21,  17);">
                            </div>
                        </div>
                        <div class="banner-left-section bg-white mt-4 mt-md-0">
                            <div class="banner-content pr-3 pl-3 pr-lg-10 y-50 appear-animate"
                                 data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.4s'}">
                                <h3 class="banner-title font-weight-bold mb-2 main-title rtl">جشنواره بزرگ تخفیف‌ها</h3>
                                <p class=" mb-4 pl-5">
                                    |فرصتی طلایی برای خرید محصولات مورد علاقه‌تان با قیمت‌های استثنایی است! در این روز
                                    خاص، می‌توانید بهترین کالاها را با تخفیف‌های فوق‌العاده تهیه کنید و از خریدی
                                    مقرون‌به‌صرفه لذت ببرید. از لوازم خانگی و پوشاک گرفته تا گجت‌های هوشمند و لوازم
                                    آرایشی، همه چیز در دسترس شماست. فرصت را از دست ندهید، چرا که این تخفیف‌ها تنها
                                    یک‌بار در سال اتفاق می‌افتند! همین حالا به فروشگاه ما سر بزنید و خریدی لذت‌بخش را
                                    تجربه کنید.
                                </p>
                                <a href="#"
                                   class="btn btn-gradient mb-1 appear-animate fadeInUpShorter appear-animation-visible"
                                   data-animation-options="{'name': 'fadeInUpShorter', 'delay': '.6s'}"
                                   style="animation-duration: 1.2s;">
                                    فروشگاه
                                </a>
                            </div>
                        </div>
                        <div class="decoration deco-bottom deco-1">
                            <img src="home/images/banner/deco-1.png" alt="banner" width="84" height="84">
                        </div>
                        <div class="decoration deco-bottom deco-2">
                            <img src="home/images/banner/wind_vectors.png" alt="banner" width="303" height="232">
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
@endsection