@extends('layouts.default1400', ['title' => 'صفحه اصلی'])

@section('meta')
<link rel="stylesheet" type="text/css" href="/skdslider/skdslider.css" />
<meta name="enamad" content="21123452" /> 
@endsection

@section('content')

<!-- Hero Section-->
<section class="mt-5">

    @include('components.newlayout.homepage.slider', ['data' => $slides])

    {{-- <a href="#">
        <img class="w-full" src="/img-new1400/hero-img.png">
    </a> --}}
</section>


<!-- Category Section-->
<section class="mt-5 text-sm">
    <div class="flex mx-4 mt-2 font-medium items-center">
        <div class="ml-4 text-gray-400">
            <p> دسته بندی</p>
        </div>
        <div class="flex-grow bg-gray-300 h-1"></div>
    </div>

    <div class="lg:flex justify-center my-4 w-full ">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8">

            @foreach ($categories as $category)
            @include('components.newlayout.homepage.category', ['item' => $category])
            @endforeach

        </div>

    </div>



</section>



<!-- OFF Section-->
<section class="mt-5 bg-yellow-200">
    <div class="flex flex-col lg:flex-row-reverse items-center justify-between">

        <img class="flex lg:hidden h-12" src="/img-new1400/gift-m.png">

        <div class=" w-56 h-72 lg:flex flex-col justify-end ">

            <div class="bg-white p-4 mt-2">

                <p>
                    <a class="flex flex-row" href="{{ route('dailyoffer') }}">
                        <span> مشاهده همه </span>
                        <img class="h-5 px-3 pt-1" src="/svgs-new1400/angle-left.svg">
                    </a>
                </p>
            </div>

            <div class="h-48 w-56 bg-cover bg-no-repeat bg-left-bottom "
                style="background-image: url('/img-new1400/gift.png')"> </div>
        </div>

        <div class="flex flex-col w-full ">
            <div class="h-2"></div>
            <div
                class="bg-white w-full h-68 lg:rounded-l-full grid grid-cols-2  md:grid-cols-4 gap-2  justify-center lg:pl-28 pl-4 pr-4 py-2 mr-0">

                @foreach ($dailyOffers as $dailyOffer)
                @include('components.newlayout.homepage.dailyoffer', [
                'item' => $dailyOffer,
                'class' => $loop->iteration >= 6 ? 'hidden md:flex' : 'flex'
                ])
                @endforeach

            </div>
            <div class="h-4"></div>

            <div class="lg: bg-white p-2 m-2 -full rounded-full  flex justify-center">
                <p>
                    <a class="flex flex-row" href="{{ route('dailyoffer') }}">
                        <span>
                            مشاهده همه
                        </span>
                        <img class="h-5 px-3 pt-1" src="/svgs-new1400/angle-left.svg">

                    </a>
                </p>
            </div>

        </div>
</section>

<!-- For_you Section-->
<section class="mt-5">
    <div class="flex mx-4 mt-2 font-medium text-sm items-center">
        <div class="ml-4 text-gray-400">
            <p> <a href="/products/mostvisited">پربازدیدترین‌ها</a></p>
        </div>
        <div class="flex-grow bg-gray-300 h-1"></div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 lg:flex justify-center my-4 w-full px-2">

        @foreach ($mostvisited as $mostvisitedItem)
        @include('components.newlayout.homepage.mostvisited', [
        'item' => $mostvisitedItem,
        'class' => $loop->iteration >= 7 ? 'hidden lg:flex ' : 'flex'
        ])
        @endforeach

    </div>

</section>

<!-- Colorfull Section-->
<section class="mt-4">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mx-4">
        @foreach ($slidesFix as $item)
        @include('components.newlayout.homepage.smallbanner', [
        'item' => $item,
        'index' => $loop->index
        ])
        @endforeach

    </div>
</section>

<!-- Magazine Section-->
<section class="mt-5 bg-purple-200">
    <div class="flex flex-col lg:flex-row items-center justify-between">


        <div class="w-full lg:w-56 lg:flex flex-col justify-end ">

            <div class=" w-full lg:w-56  text-sm text-justify p-4">
                <p> <span class="font-bold"> مجله دنت آنلاین <br></span>
                    در مجله دنت آنلاین میتوانید از آخرین اخبار ، تازه های فناوری و معرفی ابزار های دندانپزشکی و
                    همچنین مقالات در رشته‌های مختلف تخصصی دندانپزشکی و بهداشت دهان و دندان و رویدادهای دنیای
                    دندانپزشکی مطلع شوید. </p>
            </div>


            <div class=" lg:flex bg-white p-4 mb-2">
                <p>
                    <a href="/articles" class="flex flex-row">
                        <span>
                            <img class="h-5 px-3 pt-1" src="/svgs-new1400/angle-right.svg">
                        </span>
                        مطالب بیشتر
                    </a>
                </p>
            </div>
        </div>

        <div class="flex flex-col w-full ">
            <div class="h-2"></div>
            <div
                class="bg-white w-full h-64 lg:rounded-r-full grid grid-cols-2 md:grid-cols-3 gap-2  justify-center lg:pr-28 pr-4 pl-4 py-2 mr-0">

                @foreach ($articles as $article)
                @include('components.newlayout.homepage.article', [
                'item' => $article,
                'class' => $loop->iteration >= 3 ? 'hidden md:flex ' : 'flex'
                ])
                @endforeach

            </div>
            <div class="h-4"></div>

            <div class="lg: bg-white p-2 m-2 -full rounded-full  flex justify-center">
                <p>

                    <a href="/articles" class="flex flex-row">
                        مطالب بیشتر
                        <span>
                            <img class="h-5 px-3 pt-1" src="/svgs-new1400/angle-left.svg">
                        </span>
                    </a>
                </p>
            </div>

        </div>
</section>

@include('components.newlayout.product-quickedit')

@stop

@section('scripts')
<script type="text/javascript" src="/skdslider/skdslider.min.js?v=2"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function(){
		  
		$('#top-slider').skdslider({
			slideSelector: '.slide',
			delay:5000,
			animationSpeed:1000,
			showNextPrev:true,
			showPlayButton:false, 
			autoSlide:true, 
			animationType:'fading'
		}); 
    });

</script>

@stop