@extends('front.includes.master')

@section('main-content')
    <!-- Slider Area -->
@include('front.includes.slider')
    <!-- end Slider Area -->
    <!-- Services Section -->

    <section class="featured section-padding">
        <div class="container">
            <div class="row"> 
                @foreach($mainFeatures->children as $feature)
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up animated">
                        <img src="{{URL('storage/uploads/contents/images/'.@$feature->lookup_image)}}" alt="">
                        <h4 class="" style="background: #004B88  ;color :#fff ">
                         @if(\App::getLocale()=='en') 
                         {{ $feature->lookup_name_en}}
                         @else
                         {{ $feature->lookup_name}}
                         @endif
                         </h4>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>



    <section class="product-tabs section-padding wow fadeIn animated">
        <div class="container">
            <div class="tab-header">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                   @php  $i=0; @endphp
                    @foreach($categories as $category)
                    <li class="nav-item" role="presentation" style="margin-bottom: 16px;">
                        
                        <button class="nav-link @if ($i==0)active @endif" id="{{$category->id}}" data-bs-toggle="tab" data-bs-target="#tab{{$category->id}}" type="button" role="tab" aria-controls="tab{{$category->id}}"  aria-selected="@if($i==0)true @else false @endif">
                            @if(\App::getLocale()=='en') 
                            {{$category->title_en}}
                            @else
                            {{$category->title}}
                            @endif
                        
                        </button>
                    </li>
                 @php  $i++; @endphp
                    @endforeach
                </ul>
            </div>
            <!--End nav-tabs-->
            <div class="tab-content wow fadeIn animated" id="myTabContent">
                @php  $x=0; @endphp
                @foreach($categories as $category)
              
                <div class="tab-pane fade @if($x==0)show active @endif" id="tab{{$category->id}}" role="tabpanel" aria-labelledby="tab{{$category->id}}">
                    <div class="row product-grid-4">
                        @foreach($category->products as $product)
                        <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                            <div class="product-cart-wrap mb-30">
                                <div class="product-img-action-wrap">
                                    <div class="product-img product-img-zoom">
                                        <a href="{{route('front.single-product',$product->id)}}">
                                            <img class="default-img" src="{{URL('storage/uploads/contents/images/'.@$product->photo)}}" alt="">
                                            <img class="hover-img" src="{{URL('storage/uploads/contents/images/'.@$product->photo2)}}" alt="">
                                        </a>
                                    </div>
                                  
                                </div>
                                <div class="product-content-wrap">
                                
                                    <div class="product-category">
                                        <a href=""> @if(\App::getLocale()=='en') 
                                            {{$category->title_en}}
                                            @else
                                            {{$category->title}}
                                            @endif</a>
                                    </div>
                                    <h2><a href="{{route('front.single-product',$product->id)}}">
                                        @if(\App::getLocale()=='en') 
                                        {{$product->title_en}}
                                        @else
                                        {{$product->title}}
                                        @endif</a></h2>
                                   
                                    <div class="product-price">
                                        <span>{{$product->price}} </span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="Show product" class="action-btn hover-up" href="{{route('front.single-product',$product->id)}}" ><i  class="fi-rs-eye"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <!--End product-grid-4-->
                </div>
                <!--En tab one (Featured)-->
                @php  $x++; @endphp
                @endforeach
            </div>
            <!--End tab-content-->
        </div>
    </section>


    <section class="banner-2 section-padding pb-0">
        <div class="container">
            <div class="banner-img banner-big wow fadeIn animated f-none">
                <img src="{{URL('storage/uploads/blogs/images/'.@$blog1->blog_image)}}" alt="">
                <div class="banner-text d-md-block d-none">
                    <h4 class="mb-15 mt-40 text-brand"></h4>
                    <a href="{{route('front.single-blog',$blog1->id)}}" class="btn">{{ __('admin.web.Read Article') }} <i class="fi-rs-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>


    <section class="popular-categories section-padding mt-15" >
        <div class="container wow fadeIn animated">
            <h3 class="section-title mb-20"><span>{{ __('admin.web.Categories')}} </span> </h3>
            <div class="carausel-6-columns-cover position-relative">
                <div class="slider-arrow slider-arrow-2 carausel-6-columns-arrow" id="carausel-6-columns-arrows"></div>
                <div class="carausel-6-columns" id="carausel-6-columns">
                    @foreach($categories as $category)
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a href="{{route('front.category',$category->id)}}"><img src="{{URL('storage/uploads/contents/images/'.@$category->photo)}}" alt=""></a>
                        </figure>
                        <h5><a href="{{route('front.category',$category->id)}}"> @if(\App::getLocale()=='en') 
                            {{$category->title_en}}
                            @else
                            {{$category->title}}
                            @endif</a></h5>
                    </div>
                @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="banner-2 section-padding pb-0">
        <div class="container">
            <div class="banner-img banner-big wow fadeIn animated f-none">
                <img src="{{URL('storage/uploads/blogs/images/'.@$blog2->blog_image)}}" alt="">
                <div class="banner-text d-md-block d-none">
                    <h4 class="mb-15 mt-40 text-brand"></h4>
                    <a href="{{route('front.single-blog',$blog2->id)}}" class="btn">{{ __('admin.web.Read Article') }} <i class="fi-rs-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-25 pb-20">
        <div class="container wow fadeIn animated">
            <h3 class="section-title mb-20"><span>{{ __('admin.web.New arrival')}}</span></h3>
            <div class="carausel-6-columns-cover position-relative">
                <div class="slider-arrow slider-arrow-2 carausel-6-columns-arrow" id="carausel-6-columns-2-arrows"></div>
                <div class="carausel-6-columns carausel-arrow-center" id="carausel-6-columns-2">
                    @foreach ( $newProducts as $newProduct)
                        
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a href="{{route('front.single-product',$newProduct->id)}}">
                                    <img class="default-img" src="{{URL('storage/uploads/contents/images/'.@$newProduct->photo)}}" alt="">
                                    <img class="hover-img" src="{{URL('storage/uploads/contents/images/'.@$newProduct->photo2)}}" alt="">
                                </a>
                            </div>
                          
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="hot" style="background: #004B88  ;">{{ __('admin.web.New')}}</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a href="{{route('front.single-product',$newProduct->id)}}">
                                @if(\App::getLocale()=='en') 
                                {{$newProduct->title_en}}
                                @else
                                {{$newProduct->title}}
                                @endif</a></h2>
                           
                        </div>
                    </div>
                    @endforeach
                    <!--End product-cart-wrap-2-->
                </div>
            </div>
        </div>
    </section>



 @endsection