@extends('front.index')

@section('meta_title'){{trans('front.home')}}  @endsection
@section('meta_des'){{trans('front.home')}}   @endsection
@section('meta_key'){{trans('front.home')}}   @endsection

@section('content')
    <div class="slider">
        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    @foreach($sliders as $slider)
                    <li data-transition="fade" data-slotamount="7" data-masterspeed="700" data-saveperformance="on">
                        <img src="" alt="slidebg1" data-lazyload="{{$slider->ImageWithBase}}" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
                        <div class="container">
                            <div class="tp-caption grey_heavy_72 skewfromrightshort tp-resizeme rs-parallaxlevel-0" data-x="center" data-y="0" data-speed="500" data-start="1100" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1">{{$slider->name}}</div>
                            <div class="tp-caption grey_regular_18 customin tp-resizeme rs-parallaxlevel-0" data-x="0" data-y="50" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="1500" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1">{{$slider->body}}  </div><a class="tp-caption customin tp-resizeme rs-parallaxlevel-0 largeredbtn" href="{{$slider->url}}" data-x="0" data-y="100" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="1900" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next">{{trans('front.showNow')}}</a>
                        </div>
                    </li>
                        @endforeach

                </ul>
                <div class="tp-bannertimer"></div>
            </div>
        </div>
    </div><!--End Slider-->

    <section class="products">
        <div class="container">
            <h2 class="title">{{trans('front.productOther')}}</h2>
            <div class="products-slider">
                @foreach($productsFainlys as $iddds=> $proFianl)

                <div class="pro-item">
                    @if($proFianl->isfavourite == 0)
                        <a class="far fa-heart hart" href="{{route('front.favorites.store',[$proFianl->id])}}" data-toggle="tooltip" title="{{trans('front.Add-to-fave')}}"></a>
                    @else
                        <a class="fa fa-heart hart" href="{{route('front.favorites.store',[$proFianl->id])}}" data-toggle="tooltip" title="{{trans('front.remove-to-fave')}}"></a>
                    @endif
                        @if($proFianl->CountColor ==0)
                            <a class="cart" href="{{route('front.product.addToCart',[$proFianl->id])}}" data-product-id="{{$proFianl->id}}" data-toggle="tooltip" title="{{trans('front.Add-to-cart')}}">
                                <img src="{{asset('assets')}}/images/shopping-cart.png" alt="{{$proFianl->name}}" title="{{$proFianl->name}}">
                            </a>
                        @else
                            <a class="cart model_open" data-id="{{$proFianl->id}}" title="{{trans('front.Add-to-cart')}}">
                                <img src="{{asset('assets')}}/images/shopping-cart.png" alt="{{$proFianl->name}}" title="{{$proFianl->name}}">
                            </a>
                        @endif


                        <div class="textnew">
                            <p>{{trans('front.new')}}    </p>
                        </div>
                        <a class="photo" href="{{route('front.product',[$proFianl->slug])}}">
                            <img src="{{$proFianl->image}}" alt="{{$proFianl->name}}" title="{{$proFianl->name}}">
                        </a>
                        <a class="title-it" href="{{route('front.product',[$proFianl->slug])}}">{{$proFianl->name}}</a>
                        <div class="price"><span class="new">{{$proFianl->price_after_discount}}</span>@if($proFianl->price != 0)<span class="old">{{$proFianl->price}}</span>@endif</div>
                        <ul class="rating">
                            @for($i=0;$i < $proFianl->stars ;$i++ )
                                <li class="fas fa-star active"></li>
                            @endfor
                            @for($i=0;$i < (5-$proFianl->stars) ;$i++ )
                                <li class="fas fa-star "></li>
                            @endfor


                        </ul>
                </div>

                @endforeach

            </div>
        </div>
    </section>
    <div class="modal fade overlaybox" id="card-item" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-inner"><span class="filter-clos" data-dismiss="modal" aria-label="Close"></span>

                </div>
            </div>
        </div>
    </div><!--End products-min-->

    <section class="offers">
        <div class="container">
            <h2 class="title">{{trans('front.Categearyes')}}</h2>
{{--            <p class="text-center">بزيارة صفحة متجرنا لمعرفة جميع الميزات الرئيسية لمتجرك</p>--}}
            <div class="row">
                @foreach($categories as $keyy=>$cate)
                    @if($keyy==0)
                    <div class="col-sm-6 prod-itme">
                        <div class="photo">
                            <img src="{{$cate->ImageWiteBase}}" alt="{{$cate->name}}" title="{{$cate->name}}">
                            <a class="bottom" href="{{route('front.getProducts',['cate%5B%5D='.$cate->id])}}">{{$cate->name}}</a>
                        </div>
                    </div>

                        <div class="col-sm-3 prod-itme tow-item">
                            <div class="row">
                                @elseif($keyy==1 ||$keyy==2 )
                                <div class="col-sm-12 prod-itme">
                                    <div class="photo">
                                        <img src="{{$cate->ImageWiteBase}}" alt="{{$cate->name}}" title="{{$cate->name}}">
                                        <a class="bottom" href="{{route('front.getProducts',['cate%5B%5D='.$cate->id])}}">{{$cate->name}}</a>
                                    </div>
                                </div>
                                @elseif($keyy==3)
                            </div>
                        </div>

                            <div class="col-sm-3 prod-itme">
                                <div class="photo"><img src="{{$cate->ImageWiteBase}}" alt="{{$cate->name}}" title="{{$cate->name}}"><a class="bottom" href="{{route('front.getProducts',['cate%5B%5D='.$cate->id])}}">{{$cate->name}}</a></div>
                            </div>
                    @endif


                    @endforeach
            </div>
        </div>
    </section><!--End minoffers-->

    <section class="products">
        <div class="container">
            <h2 class="title">{{trans('front.spaiclProduct')}}</h2>
{{--            <p class="text-center">بزيارة صفحة متجرنا لمعرفة جميع الميزات الرئيسية لمتجرك</p>--}}
            <div class="products-slider">
                @foreach($productsSpecial as $productsSpecia)
                    <div class="pro-item">
                        @if($productsSpecia->isfavourite == 0)
                    <a class="far fa-heart hart" href="{{route('front.favorites.store',[$productsSpecia->id])}}" data-toggle="tooltip" title="{{trans('front.Add-to-fave')}}"></a>
                    @else
                     <a class="fa fa-heart hart" href="{{route('front.favorites.store',[$productsSpecia->id])}}" data-toggle="tooltip" title="{{trans('remove.Add-to-fave')}}"></a>
                    @endif
                        @if($productsSpecia->CountColor ==0)
                                <a class="cart" href="{{route('front.product.addToCart',[$productsSpecia->id])}}" data-product-id="{{$productsSpecia->id}}" data-toggle="tooltip" title="{{trans('front.Add-to-cart')}}">
                                    <img src="{{asset('assets')}}/images/shopping-cart.png" alt="{{$productsSpecia->name}}" title="{{$productsSpecia->name}}">
                                </a>
                            @else
                                <a class="cart model_open" data-id="{{$productsSpecia->id}}" title="{{trans('front.Add-to-cart')}}">
                                    <img src="{{asset('assets')}}/images/shopping-cart.png" alt="ORBIT STAR" title="ORBIT STAR">
                                </a>
                            @endif

                        <div class="textnew">
                            <p>{{trans('front.Special')}}    </p>
                        </div>
                        <a class="photo" href="{{route('front.product',[$productsSpecia->slug])}}">
                            <img src="{{$productsSpecia->image}}" alt="{{$productsSpecia->name}}" title="{{$productsSpecia->name}}">
                        </a>
                        <a class="title-it" href="{{route('front.product',[$productsSpecia->slug])}}">{{$productsSpecia->name}}</a>
                        <div class="price"><span class="new">{{$productsSpecia->price_after_discount}}</span>@if($productsSpecia->price != 0)<span class="old">{{$productsSpecia->price}}</span>@endif</div>
                        <ul class="rating">
                            @for($i=0;$i < $productsSpecia->stars ;$i++ )
                                <li class="fas fa-star active"></li>
                            @endfor
                            @for($i=0;$i < (5-$productsSpecia->stars) ;$i++ )
                                <li class="fas fa-star "></li>
                            @endfor


                        </ul>
                    </div>
                @endforeach

            </div>
        </div>
    </section><!--End products-min-->
    <script>
        $(document).on('click', '.model_open', function() {
            var id = $(this).attr('data-id');
            $.get("{{route('front.get_color')}}"+ '/'+ id, function(data){
                $('.modal-inner').html(data);
                $('#card-item').modal('show');
            });
        });
    </script>
@endsection