@extends('front.layout.master')
    @section('head')
        {!! SEO::generate() !!}
    @endsection

@push('css')
    <style>
        @media only screen and (max-width: 768px) {

                .rowData{
                  position: absolute !important;
                    width: 100% !important;    left: 0px !important;
                }
       .bb{    margin-top: 9px;}

        .text-start{
            position: relative;
    top: -20px;
    display:none;
        }
            }
    </style>

    @endpush
@section('content')

    @if($sliders->count() > 0)

    <div class="slider-area-2">

        <div id="carousel-Indicators0" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">

                @foreach( $sliders as $index => $slider)
                                            <li data-target="#carousel-Indicators0" data-slide-to="{{ isset($index) ? $index : '0' }}" class="{{ $active}}"></li>

                @endforeach
            </ol>

            <div class="carousel-inner">
                @foreach($sliders as $index => $slider)
                                        <div class="carousel-item {{$active}} carousel-main">

                        <a href="#">
                            <div class="box-slider-1">
                                <img src="{{$slider->imagePath}}" class="d-block w-100 slider-img1" alt="...">
                            </div>
                        </a>

                    </div>
                @endforeach
            </div>


            <a class="carousel-control-prev" href="#carousel-Indicators0" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-Indicators0" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>


        </div>
    </div>

      @endif

    <!--  start catogeries-->
    <div class="main-catogeries-area mt-40 mb-30">
        <div class="container">
            <div class="row">
                @if($categories->count() > 0)
                    @foreach($categories as $index => $category)
                        


                        @if(count($categories) > 4 && count($categories) == 6)
                                @if(count($categories) == $index  ||  count($categories) - 1   == $index  )
                                                                    @else
                                                                    @endif
                                <div class="col-md-{{$col}} col-{{$col2}}">
                         @elseif(count($categories) <= 3)

                                 <div class="col-md-4 col-6">
                        @elseif(count($categories) > 4 && count($categories)< 6)
                                         @if(count($categories) == $index  ||  count($categories) - 1   == $index  )
                                                                                      @else
                                                                                      @endif
                                         <div class="col-md-{{$col}} col-{{$col2}}">
                               @else

                           <div class="col-md-3 col-6">
                         @endif
                    <div class=" wow animated animate delay-1s zoomIn">
                        <div class="hover-style" style="    width: 100%; height:100%">
                            <a href="{{route('main-category',str_replace(' ','-',$category->name))}}"><img src="{{app()->getLocale() == 'ar' ? $category->imagePath : $category->image_path_en}}" alt="" class="w-100">
                                <!--                                                    <h6>ازياء نسائية</h6>-->
                            </a>
                        </div>
                    </div>
                </div>
                    @endforeach

                  @endif



            </div>

        </div>

    </div>

    <!--   end catogeries-->


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



    <div class="banner-area0 bg-white ">
        <div class="container p-0">
            <a href="#">
                <div class="box-banner wow  animate delay-1s fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="{{$banner != null ? $banner->image_path : ''}}">
                </div>
            </a>
        </div>
    </div>



    <!--start products-->
    <div class="products-section mt-20 mb-30 offers">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-6 p-0">
                    <h4 class="title-section wow animated animate delay-3s flipInX">مُقترحة لك</h4>
                </div>
                <div class="col-md-6 more-product col-6 p-0"><a href="#">عرض الكل</a></div>
            </div>
        </div>
        <div class="container">

            <div class="row wow animated animate delay-2s fadeInUp">
                <div id="carousel-product-Controls" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">

                    <div class="carousel-inner">

                        <div class="carousel-item active">
                            <div class="row">
                                @foreach(productsByCats($id)->take(5) as $key => $product)
                                <div class="col-md-20 col-6 bb">
                                    <div class="product-item product-item-opt-2 ">
                                        <div class="product-item-info">
                                            <div class="product-item-photo">
                                                <span class="discountxs d-lg-none"> {{$product->product->prefit_price_discount}}%</span>
                                                <a href="{{route('single-product-page',['id'=>$product->product->id , 'slug' => str_replace(' ','-',$product->product->name)])}}" class="product-item-img"><img src="{{$product->product->image_path}}" alt="" width="208" height="285"></a>
                                                <div class="product-item-actions">
                                                    @auth
                                                        <a href="#" class="btn btn-wishlist  movie__button-heart {{$product->product->is_favourite ? 'fw-900' : ''  }}" id="productt-{{$product->product->id}}"
                                                           data-url="{{route('toggle_favorite',$product->product->id)}}"
                                                           data-id="{{$product->product->id}}"

                                                        ><i class="fa fa-heart{{!$product->product->is_favourite ? '-o' : ''  }} product-{{$product->product->id}}"></i></a>

                                                        {{--                                            <a href="#" data-no-instant=""  class="wishlistadd cb chp ttip_nt tooltip_right  movie__button-heart product-{{$prod->id}}" id="productt-{{$prod->id}}" rel="nofollow"--}}
                                                        {{--                                               data-url="{{route('toggle_favorite',$prod->id)}}"--}}
                                                        {{--                                               data-id="{{$prod->id}}"--}}
                                                        {{--                                            >--}}
                                                        {{--                                                <span class="tt_txt">@lang('front.addWishlist')</span>--}}
                                                        {{--                                                <i class="facl facl-heart{{!$prod->is_favourite ? '-o' : ''  }} product-{{$prod->id}}"></i>--}}
                                                        {{--                                            </a>--}}
                                                    @else
                                                        <a href="{{route('login')}}" class="btn btn-wishlist">
                                                            <i class="fa fa-heart-o"></i></a>
                                                    @endauth
                                                </div>
                                                @if ($product->product->stoke < 1)
                                                    <div class="product-item-actions" style="left: 180px;
    top: 0px;">
                                                        <a href="{{route('login')}}" class="btn btn-wishlist" >
                                                            <img src="{{asset('sold (1).png')}}" style="width: 35px;">
                                                        </a>
                                                    </div>
                                                @endif

                                            </div>

                                            <div class="product-item-detail" style="    min-height: 0px!important;
    max-height: 92px!important;">
                                                <div class="product-item-name" style="    height: 17px!important;"><a href="{{route('single-product-page',['id'=>$product->product->id , 'slug' => $product->product->name])}}" style="    color: black;
    font-size: 11px;
    font-weight: bolder;">{!! $product->product->name !!}</a></div>
                                                <div class="clearfix">
                                                    <div class="product-item-price" style="min-height: 92px!important;">


                                                        @if($product->product->mainprice = $product->product->discount)
                                                            <span class="price">{{$product->product->discount}}</span><span class="K-D">@lang('admin.KD')</span>

                                                        @else
                                                            <span class="discount">{{$product->product->prefit_price_discount}}%</span>
                                                            <span class="price">{{$product->product->discount}}</span><span class="K-D">@lang('admin.KD')</span>

                                                        @endif



                                                    </div>

                                                </div>
                                                <div class="row rowData" style="position: absolute;bottom: -23px;width: 96%;left: 20px;">

{{--                                                    <span>{{$product->product->free_deliver === true ? 'التوصيل مجاني' : ' ' }}</span>--}}
                                         <div class="col-md-12">
               <form method="post" action="{{route('addedCart')}}" id="addedForm" data-id="{{$product->product->id}}" data-chooseFeature="{{$product->product->choose_feature}}"  accept-charset="UTF-8" class="nt_cart_form variations_form variations_form_ppr" enctype="multipart/form-data" style="    position: relative;
                                   ">
                                @csrf
                                @method('post')
{{--                                @dd(getProductCart())--}}
                                         <input name="prod_id" value="{{ $product->product->id}}" type="hidden">
                                <input name="price" value="{{ $product->product->discount}}" type="hidden">
                                <input name="company_id" value="{{ $product->product->company->id}}" type="hidden">
                                <input name="quantity" value="1" type="hidden">


                                                 <button type="submit" style="color: #ffffff !important;
                                    margin-top: 38px;
                                    height: 37px;
                                        width: 100%;
                                        background: #e2ad35 !important;
                                        display:{{!empty(getProductCart($product->product->id)) ? 'none': 'block'}}
                                        " data-id="{{$product->product->id}}" class="btn btn-linear btn-add-card dataExist databt-{{ $product->product->id}}"> @lang('front.addToCart')<i class="ion-android-cart"></i></button>

 </form>
                                         </div>
                            <div class="col-md-12 col-xs-6 text-start data-{{$product->product->id}}" style="position: absolute;
        top: -63px; display:{{!empty(getProductCart($product->product->id)) ? 'block': 'none'}}">
                                        <div class="col-md-12 col-xs-6 product-quantity">
{{--                                            <h5 class="title-quantity">@lang('front.qyt')</h5>--}}
                                            <div class="cart-plus-minus" style="    width: 100%;">
                                                <div class="dec qtybutton  qyt-{{$product->product->id}}" data-url="{{route('update-cart')}}" data-action="decrease" data-id="{{getProductCart($product->product->id) != null ? getProductCart($product->product->id)->id  : ''}}">-</div>
                                                <input type="number" class="cart-plus-minus-box" style=" width: 100% !important;" step="1" min="1" id="quantaty" name="quantity" value="{{getProductCart($product->product->id) != null ? getProductCart($product->product->id)->quantity  : 1}}" size="4" pattern="[0-9]*" inputmode="numeric">
                                                <div class="inc qtybutton qyt-{{$product->product->id}}" data-url="{{route('update-cart')}}" data-action="increase" data-id="{{getProductCart($product->product->id) != null ? getProductCart($product->product->id)->id  : ''}}">+</div>
                                            </div>
                                        </div>
                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="carousel-item">
                            <div class="row">
                                @foreach(productsByCats($id)->take(5) as $product1)
                                <div class="col-md-20 col-6">
                                    <div class="product-item product-item-opt-2">
                                        <div class="product-item-info">
                                            <div class="product-item-photo">
                                                <span class="discountxs d-lg-none"> {{$product1->product->prefit_price_discount}}%</span>

                                                <a href="{{route('single-product-page',['id'=>$product1->product->id , 'slug' => str_replace(' ','-',$product1->product->name)])}}" class="product-item-img"><img src="{{$product1->product->image_path}}" alt="" width="208" height="285"></a>
                                                <div class="product-item-actions">
                                                    <a href="#" class="btn btn-wishlist"><i class="ion-ios-heart"></i></a>

                                                </div>

                                            </div>

                                            <div class="product-item-detail">
                                                <div class="product-item-name"><a href="{{route('single-product-page',['id'=>$product1->product->id , 'slug' => $product1->product->name])}}" style="    color: black;
    font-size: 11px;
    font-weight: bolder;">{!! $product1->product->name !!}</a></div>
                                                <div class="clearfix">
                                                    <div class="product-item-price">
                                                        <span class="discount">{{$product1->product->prefit_price_discount}}%</span>
                                                        <span class="price">{{$product1->product->discount}}</span><span class="K-D">@lang('admin.KD')</span>
                                                        <span class="price-old">{{$product1->product->mainprice}}</span><span class="K-D0">@lang('admin.KD')</span>
                                                    </div>

                                                </div>
                                    <div class="row rowData" style="position: absolute;bottom: -23px;width: 96%;left: 20px;">

{{--                                                    <span>{{$product->product->free_deliver === true ? 'التوصيل مجاني' : ' ' }}</span>--}}
                                         <div class="col-md-12">
               <form method="post" action="{{route('addedCart')}}" id="addedForm" data-id="{{$product1->product->id}}" data-chooseFeature="{{$product1->product->choose_feature}}"  accept-charset="UTF-8" class="nt_cart_form variations_form variations_form_ppr" enctype="multipart/form-data" style="    position: relative;
                                   ">
                                @csrf
                                @method('post')
{{--                                @dd(getProductCart())--}}
                                         <input name="prod_id" value="{{ $product1->product->id}}" type="hidden">
                                <input name="price" value="{{ $product1->product->discount}}" type="hidden">
                                <input name="company_id" value="{{ $product1->product->company->id}}" type="hidden">
                                <input name="quantity" value="1" type="hidden">


                                                 <button type="submit" style="color: #ffffff !important;
                                    margin-top: 38px;
                                    height: 37px;
                                        width: 100%;
                                        background: #e2ad35 !important;
                                        display:{{!empty(getProductCart($product1->product->id)) ? 'none': 'block'}}
                                        " data-id="{{$product1->product->id}}" class="btn btn-linear btn-add-card dataExist databt-{{ $product1->product->id}}"> @lang('front.addToCart')<i class="ion-android-cart"></i></button>

 </form>
                                         </div>
                            <div class="col-md-12 col-xs-6 text-start data-{{$product1->product->id}}" style="position: absolute;
        top: -63px; display:{{!empty(getProductCart($product1->product->id)) ? 'block': 'none'}}">
                                        <div class="col-md-12 col-xs-6 product-quantity">
{{--                                            <h5 class="title-quantity">@lang('front.qyt')</h5>--}}
                                            <div class="cart-plus-minus" style="    width: 100%;">
                                                <div class="dec qtybutton  qyt-{{$product1->product->id}}" data-url="{{route('update-cart')}}" data-action="decrease" data-id="{{getProductCart($product1->product->id) != null ? getProductCart($product1->product->id)->id  : ''}}">-</div>
                                                <input type="number" class="cart-plus-minus-box" style=" width: 100% !important;" step="1" min="1" id="quantaty" name="quantity" value="{{getProductCart($product1->product->id) != null ? getProductCart($product1->product->id)->quantity  : 1}}" size="4" pattern="[0-9]*" inputmode="numeric">
                                                <div class="inc qtybutton qyt-{{$product1->product->id}}" data-url="{{route('update-cart')}}" data-action="increase" data-id="{{getProductCart($product1->product->id) != null ? getProductCart($product1->product->id)->id  : ''}}">+</div>
                                            </div>
                                        </div>
                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    @endforeach

                            </div>
                        </div>


                    </div>

                    <a class="carousel-control-prev" href="#carousel-product-Controls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel-product-Controls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--end products-->


    <!--end products-->
    <div class="brands-area0">
        <div class="container">
            <div class="row">
                @foreach($banners as $bann)
                <div class="col-md-6 col-12">
                    <a href="#"> <img src="{{$bann->image_path}}" class="w-100"></a>
                </div>
                @endforeach

            </div>

        </div>
    </div>
    <!--start brands-->


    <!--start brands-->
    <div class="brands-area00">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-8 brands-section">
                    <h4 class="title-section mt-10 mb-15 wow animated animate delay-1s flipInX text-center">تسوق من افضل الماركات العالمية </h4>
                </div>
            </div>
        </div>

        <div class="container pxs-0">
            <div class="row">
            @foreach($brands as $brand)
                <div class="col-md-4 col-6 wow animated animate delay-1s flipInUp">

                    <a href="{{route('main-category',$brand->name)}}">
                        <div class="img-brand-0"> <img src="{{$brand->image_path}}" class="w-100">
                            <div class="brand-logo0"><img src="{{$brand->image_path}}" ></div></div>
                    </a>
                </div>
                @endforeach



            </div>
        </div>
    </div>
    <!--end brands-->


@endsection