@extends('home.layouts.index')

@section('title')
    فن صنعت | خرید هواکش صنعتی
@endsection

@section('description')
    فن صنعت مرکز طراحی ساخت و خرید انواع هواکش صنعتی مکنده، هواکش دمنده و هواکش سانتریفیوژ
@endsection

@section('keywords')
    فن صنعت، طراحی ساخت، هواکش صنعتی، مکنده، دمنده، هواکش سانتریفیوژ
@endsection

@section('style')
    <style>
        .price-new{
            font-size: 25px;
            text-align:center;
            margin-left: 50px;
            margin-bottom: 10px;
        }
        .price-new-old{
            color: red;
            text-decoration: line-through;
        }
    </style>
@endsection

@section('script')
    <script>
        $(".poster-countdown")
            .countdown($(".poster-countdown").attr('data-timer'), function(event) {
                $(this).html(
                    event.strftime("<div class='countdown-section'><div><div class='countdown-number'>%-D</div> <div class='countdown-unit'>روز</div> </div></div><div class='countdown-section'><div><div class='countdown-number'>%H</div> <div class='countdown-unit'>ساعت</div> </div></div><div class='countdown-section'><div><div class='countdown-number'>%M</div> <div class='countdown-unit'>دقیقه</div> </div></div><div class='countdown-section'><div><div class='countdown-number'>%S</div> <div class='countdown-unit'>ثانیه</div> </div></div>")
                );
            });

    </script>

@endsection

@section('content')
    <main class="main-wrapper">
        <div class="axil-main-slider-area main-slider-style-1">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-sm-6">
                        <div class="main-slider-content">
                            <div class="slider-content-activation-one">
                                @foreach($sliders as $slider)
                                    <div class="single-slide slick-slide" data-sal="slide-up" data-sal-delay="400"
                                         data-sal-duration="800">
                                        <span class="subtitle"><i class="fas fa-fire"></i>پیشنهادات ما</span>
                                        <h1 class="title">{{ $slider->title }}</h1>
                                        <div class="slide-action">
                                            <div class="shop-btn">
                                                <a href="{{ $slider->button_link }}" class="axil-btn btn-bg-white"><i
                                                            class="fal fa-shopping-cart"></i>خرید کردن</a>
                                            </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-sm-6">
                        <div class="main-slider-large-thumb">
                            <div class="slider-thumb-activation-one axil-slick-dots">
                                @foreach($sliders as $slider)
                                    <div class="single-slide slick-slide" data-sal="slide-up" data-sal-delay="600"
                                         data-sal-duration="1500">
                                        <img src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image ) }}"
                                             alt="Product">
                                        @if(count($slider->products )> 0)
                                            {{--
                                                <div class="product-price">
                                                    <span class="text">قیمت</span>

                                                    <span
                                                        class="price-amount">{{$slider->products()->first()->price}}</span>

                                                </div>
                                                --}}
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="shape-group">
                <li class="shape-1"><img src="{{asset('home/images/others/shape-1.png')}}" alt="Shape"></li>
                <li class="shape-2"><img src="{{asset('home/images/others/shape-2.png')}}" alt="Shape"></li>
            </ul>
        </div>
        {{--
                <!-- Start Categorie Area  -->
                <div class="axil-categorie-area bg-color-white axil-section-gapcommon">
                    <div class="container">
                        <div class="section-title-wrapper">
                            <span class="title-highlighter highlighter-secondary"> <i class="far fa-tags"></i> دسته بندی
                                ها</span>
                            <h2 class="title">دسته بندی های محبوب</h2>
                        </div>
                        <div class="categrie-product-activation slick-layout-wrapper--15 axil-slick-arrow  arrow-top-slide">