@extends('front.includes.master')
@if(\App::getLocale()=='ar') 
<style>
  .page-header  {
direction: rtl;
text-align: right;
}
.center-align {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.product-img-action-wrap {
  position: relative;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px; /* Adjust the font size as needed */
}
</style>
  @endif
@section('main-content')
    <!-- Slider Area -->
    <div class="page-header breadcrumb-wrap">
      <div class="container">
          <div class="breadcrumb">
              <a href="{{route('front')}}" rel="nofollow">{{ __('admin.web.Home') }}</a>
              <span></span> {{$productCategory->title}}
          </div>
      </div>
  </div>


 
     
  <section class="product-tabs mt-50 mb-50">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              
                <div class="row product-grid-3">
                  @foreach ( $data as $product)
                  @if(\App::getLocale()=='en') 
                  @php
                        $productname=$product->title_en;
                      $category=$productCategory->title_en;
                  @endphp
                @else
                  @php
                      $productname=$product->title;
                      $category=$productCategory->title;
                  @endphp
                @endif
                    <div class="col-lg-3 col-md-3 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" style="background: #ececec;" src="{{URL(env('STORAGE_IMAGES').@$product->photo)}}" alt="">
                                      <img class="hover-img" style="background: #ececec;" src="{{URL(env('STORAGE_IMAGES').@$product->photo)}}" alt="">
                                    </a>
                                </div>
                              
                            </div>
                            <div class="product-content-wrap">
                                <div class="product-category">
                                    <a href="">{{$category}}</a>
                                </div>
                                <h2><a href="{{route('front.single-product',$product->id)}}">{{$productname}}</a></h2>
                              
                                
                                
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <!--pagination-->
                <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
                    <nav aria-label="Page navigation example">
                        {!! $data->appends(request()->except('page'))->links() !!}
                    </nav>
                </div>
            </div>
          
        </div>
    </div>
</section>


 @endsection