@extends('front.layouts.master')
@section('content')
    <div id="owl-mainslider" class="owl-carousel owl-theme text-center" style="z-index:5">
        @foreach ($slideshows as $item)
            <div class="item">
                <img src="{{ $item->pic }}" alt="{{ $item->name }}" class="img-fluid" />
            </div>
        @endforeach
    </div>

    <div class="container verify"
        style="margin-top:-45px;z-index:100;position:relative;max-width:1100px;justify-content:center">
        <div class="row  bg-white  px-5 pt-3 shadow radius10 IRANSans_Bold text-center">
            @for ($i = 1; $i < 5; $i++)
                <div class="col-xl-3 col-md-4 col-6 mb-lg-1 mb-3">
                    <img src="{{ option('service-' . $i . '-pic') }}" class="mb-2" />
                    <h2>{{ option('service-' . $i . '-name') }}</h2>
                </div>
            @endfor
        </div>
    </div>

    <div class="container eslimipic">
        <div class="row">
            <div class="col-lg-12 text-center">
                <img src="/front/img/456.png" class="justify-content-center" />
            </div>
        </div>
    </div>

    @if ($categoreis->count())
        <section class="container blog-grid p_relative">
            <div class="d-flex flex-row mb-3">
                <div class="Dottedstocol ml-3"></div>
                <div class="singletitle">
                    <h1 class="testt text-right">دسته‌بندی‌ها</h1>
                </div>
            </div>
            <div id="" class="owl-carousel owl-theme owl-decoproject text-right " style="z-index:0!important">

                @foreach ($categoreis as $category)
                    <div class="m-2 blog_style ">
                        <a href="{{ route('catproducts', $category->slug) }}"><img class="card-img-top"
                                src="{{ $category->pic }}" alt="{{ $category->name }}"></a>
                        <div class="card-body">
                            <h3 class="mb-2"><a href="{{ route('catproducts', $category->slug) }}">
                                    {{ $category->name }}</a></h3>
                        </div>
                    </div>
                @endforeach

            </div>
        </section>
    @endif

    @if ($products->count())
        <section class="container-fluid blog-grid my-5 bg-midblue py-5">
            <div class="container">
                <div class="d-flex flex-row my-3">
                    <div class="Dottedstocol ml-3"></div>
                    <div class="singletitle">
                        <a href="/products"><span>مشاهده بیشتر</span></a>
                        <h1 class="text-right text-white">جدیدترین محصولات</h1>
                    </div>
                </div>
                <!--<h3 class="mt-2 mb-3 bt-center text-center IRANSans_Bold mb-4">آخرین مطالب وبلاگ</h3>-->
                <div id="owl-blogd3" class="owl-carousel owl-theme text-white text-right demo3">
                    @foreach ($products->chunk(2) as $producttion)
                        @foreach ($producttion as $product)
                            <div class="m-2 blog_style ">

                                <div class="badge_container">
                                    @foreach ($product->categories as $item)
                                        <span class="badge">{{ $item->name }}</span>
                                    @endforeach
                                </div>

                                <a href="{{ route('product', $product->slug) }}"><img class="card-img-top"
                                        src="{{ $product->pic }}" alt="{{ $product->name }}"></a>
                                <div class="card-body">
                                    <h3 class="mb-2"><a href="{{ route('product', $product->slug) }}">
                                            {{ $product->name }}</a></h3>
                                    <a class="btn btn-info d-block" href="tel:{{ option('tel') }}"><i
                                            class="fal fa-phone ml-2"></i>تماس بگیرید</a>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>

            </div>
        </section>
    @endif

    <section class="container mt-5">

        <section class="container bg-cudark text-white radius15 text-lg-right text-center my-5">
            <div class="row py-4 px-3 ">
                <div class="mb-3 d-flex align-items-center w-100">
                    <div class="gold radius25 px-3">{{ option('title') }}</div>
                    <div class="border-top flex-grow-1 ms-2 border-gold"></div>
                </div>
                <div class="col-lg-10  order-lg-0 order-1">
                    <h3 class="IRANSans_Bold text-bro mb-2">{{ option('aboutـtitle') }}</h3>
                    <p class="mb-3">
                        {{ option('aboute-info') }}
                    </p>
                </div>
                <div class="col-lg-2 text-lg-left order-lg-1 order-0">
                    <img src="{{ option('pic_about') }}" class="py-lg-0 p-3" />
                </div>
            </div>
        </section>

    </section>

    <div class="container  mt-5">
        <div class="d-flex flex-row mb-3">
            <div class="Dottedstocol ml-3"></div>
            <div class="singletitle">
                <a href="#"><span>{{ option('advantageـtitle') }}</span></a>
                <h1 class="testt text-right">{{ option('advantageـsubtitle') }}</h1>
            </div>
        </div>
        <div class="row Service">
            <div class="col-lg-3 col-md-6 d-lg-block d-none ">
                <img src="{{ option('advantage-img') }}" />
            </div>
            @for ($i = 1; $i < 4; $i++)
                <div class="col-lg-3 col-md-6 ">
                    <div class="d-flex  flex-column sbox py-4 px-5 mb-4 radius15">
                        <div class="mb-3">
                            <img src="{{ option('advantage-icon-' . $i) }}" />
                        </div>
                        <div class="line_bottom"></div>
                        <div>
                            <h2 class="IRANSans_Medium">{{ option('advantage-title-' . $i) }}</h2>
                            <p>{{ option('advantage-text-' . $i) }}</p>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>

    <div class="container">
        <div class="row  bg-warning  px-5 py-3 radius10">
            <div class="col-lg-9 text-dark  text-lg-right text-center">
                <h5 class="IRANSans_Medium">{{ option('contact_text') }}</h5>
            </div>
            <div class="col-lg-3 text-dark text-lg-left text-center mt-lg-0 mt-3">
                <a class="btn btn-light radius20 text-dark IRANSans_Medium">تماس بگیرید : {{ option('tel') }}</a>
            </div>
        </div>
    </div>

    <section class="container-fluid bg-cudark mb-5 p_relative mt-4">

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="container-fluid hot-posts my-4">
                        <h3 class="mt-2 mb-5 bt-center text-center text-white IRANSansWeb_Medium">گالری تصاویر</h3>

                        <div id="owl-toparticle" class="owl-carousel owl-theme text-right copic ">
                            @foreach ($galleris as $item)
                                <div class="m-2">
                                    <a href="{{ route('catgalleries',$item->slug) }}" class="grid">
                                        <figure class="effect-ruby radius10">
                                            <img src="{{ $item->galleries->first()->pic }}" alt="img01" class="radius10 img-fluid" />
                                            <figcaption>
                                                <h2>{{ $item->name }}</h2>
                                            </figcaption>
                                        </figure>
                                    </a>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="build-brd"></div>
    </section>

    <section class="container-fluid mt-4">
        <div class="container text-center">
            <h1 class="IRANSans_Medium mt-5 mb-5 tiltay">ویژگی‌های ایزل‌پارت</h1>
            <div class="row Service3">
                @for ($i = 1; $i < 5; $i++)
                    <div class="col-lg-3">
                        <div class="d-flex flex-column sbox3 py-4 px-5 mb-4 radius15 ">
                            <div class="mb-3">
                                <img src="{{ option('feature-icon-' . $i) }}" />
                                <!--<img src="Img/icons/icon9.png">-->
                            </div>
                            <!--<div class="line_bottom"></div>-->
                            <div>
                                <h2 class="IRANSans_Medium">{{ option('feature-title-' . $i) }}</h2>
                                <p>{{ option('feature-text-' . $i) }}</p>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </section>

    @if ($posts->count())
        <section class="container blog-grid mt-5">
            <div class="d-flex flex-row my-3">
                <div class="Dottedstocol ml-3"></div>
                <div class="singletitle">
                    <span>مقالات</span>
                    <h1 class="text-right">آخرین مطالب ارسالی </h1>
                </div>
            </div>
            <div id="owl-blog" class="owl-carousel owl-theme text-right ">
                @foreach ($posts as $post)
                    <div class="m-3 blog_style">
                        <a href="{{ route('blog', $post->slug) }}"><img class="card-img-top" src="{{ $post->pic }}"
                                alt="Card image"></a>
                        <div class="card-body">
                            <h3 class="mb-2"><a href="{{ route('blog', $post->slug) }}">{{ $post->name }}</a></h3>
                            <p class="mb-2">
                                {!! $post->content !!}
                            </p>
                            @foreach ($post->categories as $item)
                                <span><a href="{{ route('catblogs', $item->slug) }}">{{ $item->name }}</a></span>
                            @endforeach

                            <div class="d-flex flex-column justify-content-between mt-2 blog_style_footer">
                                <div class="d-flex justify-content-between">
                                    <span><i class="fal fa-user ml-2"></i>{{ $post->user->nf }}</span>
                                    <span class=""><i
                                            class="fal fa-clock ml-2"></i>{{ jdate($post->updated_at)->format('Y/m/d') }}
                                    </span>
                                </div>
                                <a class="mr-auto hover-4" href="{{ route('blog', $post->slug) }}">ادامه مطلب »</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    @if ($customers->count())
        <section class="container">
            <h3 class="bt-center text-center IRANSans_Bold my-3">مشتریان ما</h3>
            <div class="row">
                <div class="col-lg-12">
                    <div id="owl-customers" class="owl-carousel owl-theme text-center ">
                        @foreach ($customers as $item)
                            <div class="m-2">
                                <img src="{{ $item->pic }}" />
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </section>
    @endif


@endsection



@section('js-page')
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            function counter(id, start, end, duration) {
                let obj = document.getElementById(id),
                    current = start,
                    range = end - start,
                    increment = end > start ? 1 : -1,
                    step = Math.abs(Math.floor(duration / range)),
                    timer = setInterval(() => {
                        current += increment;
                        obj.textContent = current;
                        if (current == end) {
                            clearInterval(timer);
                        }
                    }, step);
            }
            @for ($i = 1; $i < 7; $i++)

                counter("count{{ $i }}", 0, {
                    {
                        option('counter-'.$i.
                            '-count')
                    }
                }, 8000);
            @endfor
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.counter-value').each(function() {
                $(this).prop('Counter', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 3500,
                    easing: 'swing',
                    step: function(now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        });
    </script>
@endsection