@extends('frontend.layouts.app')

@section('metatags')
    <meta name="description" content="Unique produce is a fruit export company, Who is deeply committed to provide fresh produce that contain higher nutritional values" />
    <meta name="keywords" content="Unique, Packing, Fruit,export, Avocados, morocco" />
    <meta name="copyright" content="Yacine Boughalem">
    <meta name="url" content="{{route('singleProduct',[$product->id,$product->slug])}}">
    <meta name="identifier-URL" content="{{route('singleProduct',[$product->id,$product->slug])}}">

    <meta itemprop="image" content="https://www.uniqpacking.ma/storage/products/{{$product->image}}" />
    <meta property="og:image" itemprop="image/*" content="https://www.uniqpacking.ma/storage/products/{{$product->image}}" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta property="og:site_name" content="Unique Packing" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

@endsection

@section('title', getTranslationProduct($product->id)['title'])

@section('content')

    <div class="uniq--breadcrumb--area" style="background-image: linear-gradient(to right,
    rgba(27, 38, 105, 0.8),rgba(58, 182, 74, .4)),url('/storage/products/{{$product->image}}'); background-size: auto; background-position: right ">
        <div class="container">
            <div class="col-md-8">
              <div class="uniq--breadcrumb--area--content wow animated bounceInRight" data-wow-duration="1.5s" data-wow-delay=".1s">
                <h1 class="p-top-10">{{ getTranslationProduct($product->id)['title'] }}</h1>
                <svg xmlns="http://www.w3.org/2000/svg" width="82" height="25.768" viewBox="0 0 82 25.768">
                    <g id="Group_329" data-name="Group 329" transform="translate(-140 -1018)">
                      <g id="Group_324" data-name="Group 324">
                        <g id="Group_275" data-name="Group 275" transform="translate(140.5 1028)">
                          <line id="Line_3" data-name="Line 3" x2="43" transform="translate(1.5 3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="4"/>
                        </g>
                        <g id="Group_323" data-name="Group 323" transform="translate(-6011.915 -9891.701)">
                          <g id="g20" transform="translate(6219.68 10916.274)">
                            <path id="path22" d="M-96.529-189.627h-.894v-3.137h.894a3.9,3.9,0,0,0,2.771-1.147,3.891,3.891,0,0,0,1.146-2.77,3.921,3.921,0,0,0-3.917-3.917h-7.181v-3.137h7.181a7.062,7.062,0,0,1,7.054,7.054,7.008,7.008,0,0,1-2.066,4.988,7.012,7.012,0,0,1-4.988,2.065" transform="translate(103.71 203.734)" fill="#fff"/>
                          </g>
                          <g id="g74" transform="translate(6208.97 10919.5)">
                            <path id="path76" d="M-93.064-214.645a6.932,6.932,0,0,1-6.924-6.924v-9.045h3.137v9.045a3.791,3.791,0,0,0,3.787,3.787,3.791,3.791,0,0,0,3.787-3.787v-6h3.137v6a6.932,6.932,0,0,1-6.924,6.924" transform="translate(99.988 230.614)" fill="#fff"/>
                          </g>
                          <g id="g78" transform="translate(6211.021 10913.442)">
                            <path id="path80" d="M-84.965-4.346s-3.056-.869-4.549.242a4.234,4.234,0,0,0-1.772,3.27L-88.6-2.5-90.843-.188a3.375,3.375,0,0,0,4.015-.823,6.455,6.455,0,0,0,1.863-3.335" transform="translate(91.286 4.67)" fill="#fff"/>
                          </g>
                          <g id="g82" transform="translate(6202 10909.701)">
                            <path id="path84" d="M-.3-.168S-.652,4.675,1.474,6.564A6.47,6.47,0,0,0,6.915,8.2L3.6,4.7,7.745,7.34A5.157,5.157,0,0,0,5.27,1.587C1.746-.442-.3-.168-.3-.168" transform="translate(0.32 0.18)" fill="#fff"/>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>

                  <div class="t--paragraph--white p-top-20 ">
                    {!! getTranslationProduct($product->id)['description'] !!}
                </div>
                  
            </div>
            </div>
        </div>
        <img src="/assets/images/logo--shape01.svg" class="shape--logo--01 wow animated bounceInRight" data-wow-duration="1.5s" data-wow-delay=".1s" />
    </div>

    <section class="uniq--logistics--area section--60" style="display: none">
      <div class="container">
       
        <div class="row align-items-center justify-content-center">
          <div class="col-md-6">
              <div class="t--paragraph--one p-top-10" data-aos="fade-up" data-aos-duration="1300">
                  {!! getTranslationProduct($product->id)['description'] !!}
              </div>
          </div>
          <div class="col-md-6">
              <div class="image--one" data-aos="zoom-in" data-aos-duration="1500">
                 <img src="/storage/products/{{$product->image}}"  alt=""/>
              </div>
          </div>
      </div>
      </div>
    </section>

    <section class="uniq--logistics--area section--60">
        <div class="container">
            @foreach ($attribs as $key => $attrib)
                
                    <div class="row  align-items-center">
                        <div class="col-md-12">
                            <div class="primary--title--small ">
                                <h3>
                                    {{ getTranslationAttrib($attrib->id)['title'] }}
                                </h3>
                                <svg xmlns="http://www.w3.org/2000/svg" width="82" height="25.768" viewBox="0 0 82 25.768">
                                    <g id="Group_342" data-name="Group 342" transform="translate(-140 -1018)">
                                      <g id="Group_275" data-name="Group 275" transform="translate(140.5 1028)">
                                        <line id="Line_3" data-name="Line 3" x2="43" transform="translate(1.5 3)" fill="none" stroke="#f15523" stroke-linecap="round" stroke-width="4"/>
                                      </g>
                                      <g id="Group_323" data-name="Group 323" transform="translate(-6011.915 -9891.701)">
                                        <g id="g20" transform="translate(6219.68 10916.274)">
                                          <path id="path22" d="M-96.529-189.627h-.894v-3.137h.894a3.9,3.9,0,0,0,2.771-1.147,3.891,3.891,0,0,0,1.146-2.77,3.921,3.921,0,0,0-3.917-3.917h-7.181v-3.137h7.181a7.062,7.062,0,0,1,7.054,7.054,7.008,7.008,0,0,1-2.066,4.988,7.012,7.012,0,0,1-4.988,2.065" transform="translate(103.71 203.734)" fill="#f15523"/>
                                        </g>
                                        <g id="g74" transform="translate(6208.97 10919.5)">
                                          <path id="path76" d="M-93.064-214.645a6.932,6.932,0,0,1-6.924-6.924v-9.045h3.137v9.045a3.791,3.791,0,0,0,3.787,3.787,3.791,3.791,0,0,0,3.787-3.787v-6h3.137v6a6.932,6.932,0,0,1-6.924,6.924" transform="translate(99.988 230.614)" fill="#8cc63f"/>
                                        </g>
                                        <g id="g78" transform="translate(6211.021 10913.442)">
                                          <path id="path80" d="M-84.965-4.346s-3.056-.869-4.549.242a4.234,4.234,0,0,0-1.772,3.27L-88.6-2.5-90.843-.188a3.375,3.375,0,0,0,4.015-.823,6.455,6.455,0,0,0,1.863-3.335" transform="translate(91.286 4.67)" fill="#8cc63f"/>
                                        </g>
                                        <g id="g82" transform="translate(6202 10909.701)">
                                          <path id="path84" d="M-.3-.168S-.652,4.675,1.474,6.564A6.47,6.47,0,0,0,6.915,8.2L3.6,4.7,7.745,7.34A5.157,5.157,0,0,0,5.27,1.587C1.746-.442-.3-.168-.3-.168" transform="translate(0.32 0.18)" fill="#8cc63f"/>
                                        </g>
                                      </g>
                                    </g>
                                  </svg>
                                  
                            </div>

                            <div class="t--paragraph--one p-top-20 ">
                                {!! getTranslationAttrib($attrib->id)['description'] !!}
                            </div>
                        </div>
                        <div class="col-md-12 p-top-20">
                                                        <div id="" class="product--carousel--item  owl-carousel owl-carousel-single owl-theme">                                              
                                @for ($i = 0; $i < @count($images) - 1; $i++)
                                    @if (Storage::disk('public')->exists('attribs/' . $images[$i]))
                                        {{-- <div class="image--three" style="margin: 0 10px">
                                            <img src="/storage/attribs/{{$images[$i]}}"
                                                class="d-block w-100"
                                                alt="{{ getTranslationAttrib($attrib->id)['title'] }}">
                                        </div>
                                        --}}
                                        
                                            <a href="/storage/attribs/{{$images[$i]}}" class="fancybox image--border" rel="ligthbox">
                                                <img src="/storage/attribs/{{$images[$i]}}" class="zoom img-fluid "  alt="{{ getTranslationAttrib($attrib->id)['title'] }}">
                                            </a>
                                    
                                
                                    @endif
                                @endfor

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




        </div>
    </section>


  @include('frontend/partials/subscribe')


@endsection

@section('scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
   <script>
       $(document).ready(function(){
  $(".fancybox").fancybox({
        openEffect: "none",
        closeEffect: "none"
    });
    
    $(".zoom").hover(function(){
		
		$(this).addClass('transition');
	}, function(){
        
		$(this).removeClass('transition');
	});
});
    
   </script>
@endsection