@extends ('site::public.layout',['bodyClass' => 'beva--'.$product->header_class])
@section('content')
  @php 
    $p_video = '';
    if($product->video!=''){
        $video = json_decode($product->video);
        $p_video =  ENV('IMG_URL').str_replace(' ', '%20', $video->path);
    }
    $p_logo = $p_thumbnail = asset('assets/img/no-image.jpg');
    if($product->logo!=''){
        $logo = json_decode($product->logo);
        $p_logo = $logo->path;
    }
  @endphp
  <main class="product-detail-page">
    <div class="top-gradient"></div>
    <section class="banner">
      <div class="container">
        <div class="product__title">
          <h1 class="display">
            {!! $product->outputTranslate('header_text', session('locale')) !!}
            @if($product->header_text_second!='') {!! $product->outputTranslate('header_text_second', session('locale')) !!} @endif
          </h1>
          <h6>
            BEVA &#174; {!! $product->outputTranslate('subname', session('locale')) !!}
          </h6>
        </div>
        <div class="pagination">
          @php 
            $def_variant = ''; 
            if( count($product->banner_data) >0 ){
              $def_variant = $product->banner_data['0']['title']; 
            }else{
              if( count($product->variants) >0 ){
                $def_variant = $product->variants['0']->title; 
              }
            }
          @endphp
          <span id="activeProductVariant">{!! $def_variant !!}</span>
          <div class="swiper-pagination">
          </div>
        </div>
      </div>
      <div class="product__main-img">
        <video id="productVideo" width="100%" height="100%" muted autoplay class="active">
          <source src="{!! $p_video !!}" type="video/mp4">
        </video>

        <div class="slider">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              @if( count($product->banner_data) >0 )
                @foreach($product->banner_data as $k=>$v)
                <div class="swiper-slide">
                  <img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $v['image'] !!}" class="lazy md:hidden" variant="{!! $v['title'] !!}" alt="{!! $v['alt_image'] !!}">
                  <img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $v['image'] !!}" class="lazy hidden md:block" variant="{!! $v['title'] !!}" alt="{!! $v['alt_image'] !!}">
                </div>
              @endforeach
              @else
                @foreach($product->variants as $k=>$v)
                  @php
                    $v_img = asset('assets/img/no-image.jpg');
                    if($v->banner!=''){
                        $img = json_decode($v->banner);
                        $v_img =  ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                    }
                  @endphp
                  <div class="swiper-slide">
                    <img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $v_img !!}" class="lazy md:hidden" variant="{!! $v->title !!}" alt="{!! $v->outputTranslate('alt_banner', session('locale')) !!}">
                    <img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $v_img !!}" class="lazy hidden md:block" variant="{!! $v->title !!}" alt="{!! $v->outputTranslate('alt_banner', session('locale')) !!}">
                  </div>
                @endforeach
              @endif
            </div>
          </div>
        </div> 
      </div>
    </section>
    <section class="mb-40">
      <div class="container animate">
        <div class="text-center mb-20 from-bottom">
          <h4 class="mb-8">
            BEVA &#174; {!! $product->outputTranslate('subname', session('locale')) !!}
          </h4>
          <div class="product__cta">
            <a href="{{ url('contact-us') }}" target="blank" class="btn">{!! get_staticwording('shopnow', session('locale')) !!}</a>
            <a href="{{ url('discover') }}" class="btn btn--border">{!! get_staticwording('productpremium', session('locale')) !!}</a>
            @if($product->brochure!='')
              <button class="btn btn--border btn-download-catalog" related-data="product" related-id="{{ $product->id }}" item-data="catalog" item-id="{{ $product->brochure }}">{!! get_staticwording('catalogdownload', session('locale')) !!}</button>
            @endif
          </div>

          @php $btn_360 = ''; @endphp
          @foreach($product->variants as $idx_v=>$v)
            @if( isset($data_360[$v->id]) )
              @if( isset($data_360[$v->id]['image']) )
                <div class="product__360" id="variant-360">
                  <ul class="list--360">
                    @foreach($data_360[$v->id]['image'] as $im)
                      <li><img src="{!! env('IMG_URL').$im !!}" /></li>
                    @endforeach
                  </ul>
                </div>
                @php $btn_360 .= '<button class="btn btn-360" data-variant="'.$v->id.'">'.$data_360[$v->id]['title'].'</button>'; @endphp
                {{-- <button class="btn btn-360" data-variant="{!! $v->id !!}">{!! $data_360[$v->id]['title'] !!}</button> --}}
              @else 
              @php $btn_360 .= '<button class="btn btn-360 btn--border" data-variant="'.$v->id.'">'.$data_360[$v->id]['title'].'</button>'; @endphp
                {{-- <button class="btn btn-360 btn--border" data-variant="{!! $v->id !!}">{!! $data_360[$v->id]['title'] !!}</button> --}}
              @endif
            @endif
          @endforeach

          @if($btn_360!='')
            <p>
                {!! (session('locale')=='en')? setting('360.title_en'):setting('360.title_id') !!}
            </p>
            <div class="product__cta">
              {!! $btn_360 !!}
            </div>
          @endif


          {{-- @if( count($product->gallery_url)>0 )
            <div class="product__360">
              <ul class="list--360">
                @foreach($product->gallery_url as $key=>$im)
                  <li><img src="{!! env('IMG_URL').$im !!}" /></li>
                @endforeach
              </ul>
            </div>
          @endif --}}

        </div>
        <div class="spec from-bottom mb-5">
          <div class="spec__featured">
            <div class="spec__featured--full">
              @php $ing_count = 0; @endphp
              @foreach($product->ingredients as $k=>$ing)
                @php
                  $ing_cover = asset('assets/img/no-image.jpg');
                  if($ing->cover!=''){
                      $ing_cover = $ing->cover_url;
                  }

                  if($ing->is_featured == 1){ $ing_count += 1; }
                  else{ continue; }
                @endphp

                @if($ing_count==1)
                    <a href="javascript:void(0)" onclick="sctProduct('pd-{{$ing->id}}')">
                      @if($ing->cover_type=='image')
                        <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $ing_cover !!}" alt="{!! $ing->outputTranslate('alt_cover', session('locale')) !!}">
                      @else 
                        <video autoplay muted loop>
                          <source src="{!! $ing_cover !!}" type="video/mp4">
                        </video>
                      @endif
                      <span class="h4 grad-text">
                        <span class="text">{!! $ing->title !!}</span>
                        <span class="mask"></span>
                      </span>
                      <span class="arrow">
                        <img src="{{ asset('styling/img/icon-arrow-right-3.svg') }}">
                      </span>
                    </a>	
                  </div>
                  <div class="spec__featured--half">
                @else
                  @php if($ing_count>3){ break;  } @endphp
                    <a href="javascript:void(0)" onclick="sctProduct('pd-{{$ing->id}}')">
                      @if($ing->cover_type=='image')
                        <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $ing_cover !!}" alt="{!! $ing->outputTranslate('alt_cover', session('locale')) !!}">
                      @else 
                        <video autoplay muted loop>
                          <source src="{!! $ing_cover !!}" type="video/mp4">
                        </video>
                      @endif
                      <span class="h4 grad-text">
                        <span class="text">{!! $ing->outputTranslate('title', session('locale')) !!}</span>
                        <span class="mask"></span>
                      </span>
                      <span class="arrow">
                        <img src="{{ asset('styling/img/icon-arrow-right-3.svg') }}">
                      </span>
                    </a>	
                @endif
              @endforeach
            </div>
          </div>

          @if( $product->ingredients->count() > 3 )
            
            @foreach($product->ingredients as $k=>$ing)
              @php
                $ing_cover = asset('assets/img/no-image.jpg');
                if($ing->cover!=''){
                    $ing_cover = $ing->cover_url;
                }
              @endphp
              @if($k<3)
                {{-- continue --}}
              @else
                <div class="spec__featured">
                  <div class="spec__featured--third">
                    <a href="javascript:void(0)" onclick="sctProduct('pd-{{$ing->id}}')">
                      @if($ing->cover_type=='image')
                        <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $ing_cover !!}" alt="{!! $ing->outputTranslate('alt_cover', session('locale')) !!}">
                      @else 
                        <video autoplay muted loop>
                          <source src="{!! $ing_cover !!}" type="video/mp4">
                        </video>
                      @endif
                      <span class="h4 grad-text">
                        <span class="text">{!! $ing->outputTranslate('title', session('locale')) !!}</span>
                        <span class="mask"></span>
                      </span>
                      <span class="arrow">
                        <img src="{{ asset('styling/img/icon-arrow-right-3.svg') }}">
                      </span>
                    </a>		
                  </div>
                </div>
              @endif
            @endforeach
          @endif

        </div>
      </div>
    </section>
    <section class="spec mb-40 animate">
      <div class="container from-bottom done">
        <h4 class="text-center">
          {!! $product->outputTranslate('ingredients_title', session('locale')) !!}
        </h4>

        @php  
          $table_view = ''; $title_row = 1;
          foreach($product->variants as $idx_v=>$v){
            if($v->type=="table"){ $table_view = 'yes'; }
            if( strlen($v->title) > 15 ){ $title_row = 2; }
          }
        @endphp  

        <div class="spec__product">
          @foreach($product->variants as $idx_v=>$v)
            @php  
              $v_img = asset('assets/img/no-image.jpg');
              if($v->image!=''){
                  $img = json_decode($v->image);
                  $v_img =  ENV('IMG_URL').str_replace(' ', '%20', $img->path);
              }
            @endphp
            <div>
              <div class="spec__product-single top">
                <figure>
                  <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $v_img !!}" alt="{!! $v->outputTranslate('alt_image', session('locale')) !!}">
                </figure>
                <div class="spec__desc">
                  <h4>
                    @php 
                      $cur_length = (strlen($v->title)>15)? 2:1;

                      echo $v->title;
                      for($i=$cur_length; $i<$title_row; $i++){
                        echo '<br />';
                      }
                    @endphp
                    {{-- {!! $v->title !!} {{ strlen($v->title) }} - {{ $cur_length }} --}}
                  </h4>
                  <a href="{{ url(setting('shop.url')) }}" target="blank" class="btn">{!! get_staticwording('shopnow', session('locale')) !!}</a>
                </div>
              </div>
              
              @if($v->type=='list')
                @foreach($v->details as $idx_vd=>$vd)
                  @php 
                  $vd_icon = asset('assets/img/no-image.jpg');
                  if($vd->icon!=''){
                      $img = json_decode($vd->icon);
                      $vd_icon =  ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                  }

                  $arr_vdd = explode(',',$vd->detail);
                  @endphp
                  <div>
                    <div class="spec__product-single" @if($table_view=="yes") style="border-top:0px;" @endif>
                      <figure><img src="{!! $vd_icon !!}" alt="{!! $vd->outputTranslate('alt_icon', session('locale')) !!}"></figure>
                      <p><b>{!! $vd->title !!}</b></p>
                      @for($i=0; $i<$vd_length[$idx_vd]; $i++)
                        @if(isset($arr_vdd[$i]))
                          <p>{!! $arr_vdd[$i] !!}</p>
                        @else
                          <p>-</p>
                        @endif
                      @endfor
                    </div>
                  </div>
                @endforeach
              @else 
                <div class="spec__product-single" @if($table_view=="yes") style="border-top:0px;" @endif></div>
              @endif
            </div>
          @endforeach
        </div>

        @if($table_view='yes')
          @foreach($product->variants as $idx_v=>$v)
            @if($v->type=='table')
              @foreach($v->details as $idx_vd=>$vd)
                @php 
                $vd_table = '';
                if($vd->table_image!=''){
                    foreach ($vd->table_image_url as $idx_ti=>$ti) {
                      $vd_table .= '<img src="'.$ti.'" alt="'.$vd->outputTranslate('alt_table_image', session('locale')).'">';
                    }
                }
                @endphp
                <div class="spec__product-single" @if($table_view=="yes") style="border-top:0px;" @endif>
                  <h4>{!! $vd->title !!}</h4>
                  <figure>{!! $vd_table !!}</figure>
                </div>
              @endforeach
            @endif
          @endforeach
        @endif

      </div>
    </section>	
    <section class="project">
      <div class="container animate">
        <div class="h1 mb-8 text-center from-bottom">
          {!! get_staticwording('preview', session('locale')) !!} <br>
          {!! get_staticwording('projectreference', session('locale')) !!}
        </div>
        <div class="project__slider" id="project-slider">
          <div class="swiper-container from-bottom">
            <div class="swiper-wrapper">
              @foreach($project as $idx=>$p)
                @php 
                $p_thumb = asset('assets/img/no-image.jpg');
                if($p->thumbnail!=''){
                    $img = json_decode($p->thumbnail);
                    $p_thumb =  ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                }
                @endphp
                <div class="swiper-slide">
                  <figure>
                    <img src="{!! $p_thumb !!}" loading="lazy" alt="{!! $p->outputTranslate('alt_thumbnail', session('locale')) !!}" />
                        <div class="swiper-lazy-preloader"></div>
                  </figure>
                  <div class="project__caption">
                    <div class="project__category">
                      {!! get_staticwording('project', session('locale')) !!}
                      <span>{!! $product->outputTranslate('name', session('locale')) !!}</span>
                    </div>
                    <div class="project__info">
                      <p><b>
                        <a href="{!! url('project/'.$p->slug) !!}">
                          {!! $p->outputTranslate('title', session('locale')) !!}
                        </a>
                      </b></p>
                      <a class="cta" href="{!! url('project/'.$p->slug) !!}"><img src="{{ asset('styling/img/icon-arrow-right.svg') }}"> {!! get_staticwording('detailproject', session('locale')) !!}</a>
                    </div>
                  </div>	 
                </div>
              @endforeach 
            </div>
          </div>
          <button class="swiper-prev"><img src="{{ asset('styling/img/btn-prev-2.svg') }}"></button>
          <button class="swiper-next"><img src="{{ asset('styling/img/btn-next-2.svg') }}"></button>
        </div>
      </div>
    </section>

    @if($article)
    <section class="news animate" id="news">
      <div class="container">
        <div class="text-center mb-24 from-bottom md:mb-12">
          <div class="h1 mb-8">
            {!! get_staticwording('ourlatestnews', session('locale')) !!}
          </div>
          <div class="btn-wrapper">
            <a href="{!! url('news-and-media') !!}" class="btn btn--primary">
              <span>
                <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
                </svg>
                {!! get_staticwording('allarticle', session('locale')) !!}
              </span>
            </a>
          </div>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-1 gap-8 w-4/5 lg:w-full mx-auto">
          @foreach($article as $key=>$a)
            @if($key==0)
                <div class="news__single from-left">
                    <figure>
                        <img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $a->image_formated }}" class="lazy" alt="{!! $a->outputTranslate('alt_image', session('locale')) !!}" />
                        <img src="{{ asset('styling/img/logo-white.png') }}" class="logo">
                    </figure>
                    <div class="news__short">
                        @foreach($a->category_data as $cat)
                          <span class="btn btn--primary btn--br mb-5px">
                            {{ $cat['title'] }}
                          </span>
                        @endforeach
                        {{-- <span class="btn btn--primary btn--br">
                            {!! $a->outputTranslate('category', session('locale')) !!}
                        </span> --}}
                        <p class="news__date">
                          {!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($a->created_at)) }}
                        </p>
                        <h6>
                            <a href="{{ route('fe.detail_articles', ['slug' => $a->slug]) }}">
                                {!! $a->outputTranslate('title', session('locale')) !!}
                            </a>
                        </h6>
                        <p>
                            {!! $a->outputTranslate('excerpt', session('locale')) !!}
                        </p>
                        <a href="{{ route('fe.detail_articles', ['slug' => $a->slug]) }}" class="btn news__cta">
                            <span>
                                <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
                                </svg>
                                {!! get_staticwording('readmore', session('locale')) !!}
                            </span>
                        </a>
                    </div>
                </div>
            @else
                <div class="news__single from-right">
                    <figure>
                        <img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $a->image_formated }}" class="lazy" alt="{!! $a->outputTranslate('alt_image', session('locale')) !!}">
                        <img src="{{ asset('styling/img/logo-white.png') }}" class="logo">
                    </figure>
                    <div class="news__short">
                        @foreach($a->category_data as $cat)
                          <span class="btn btn--primary btn--br mb-5px">
                            {{ $cat['title'] }}
                          </span>
                        @endforeach
                        {{-- <span class="btn btn--primary btn--br">
                            {!! $a->outputTranslate('category', session('locale')) !!}
                        </span> --}}
                        <p class="news__date">
                          {!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($a->created_at)) }}
                        </p>
                        <h6>
                            <a href="{!! url('article/detail/'.$a->slug) !!}">
                                {!! $a->outputTranslate('title', session('locale')) !!}
                            </a>
                        </h6>
                        <p>
                            {!! $a->outputTranslate('excerpt', session('locale')) !!}
                        </p>
                        <a href="{!! url('article') !!}" class="btn news__cta">
                            <span>
                                <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
                                </svg>
                                {!! get_staticwording('readmore', session('locale')) !!}
                            </span>
                        </a>
                    </div>
                </div>
            @endif
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <section class="animate">
      <div class="container from-bottom">
        <div class="text-center">
          @if($product->certificate!='')
            <div class="h1 mb-8">
              {!! get_staticwording('certificateby', session('locale')) !!} <br>
              {{-- {!! $product->related_certificate ['title'] !!} --}}
            </div>
            <div class="certified">
				      @php $file_url = ''; @endphp
              @foreach($product->related_certificate['detail'] as $key=>$pc)
				        @php $file_url = url($pc['file_url']); @endphp
                <img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $pc['logo'] !!}" class="lazy" alt="{!! $pc['alt_logo'] !!}" />
              @endforeach
            </div>
            <div class="btn-wrapper">
              <a href="{!! $file_url !!}" class="btn btn--primary">
                <span>
                  <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
                  </svg>
                  {!! get_staticwording('certificatecheck', session('locale')) !!}
                </span>
              </a>
              @if($product->brochure!='')
                <button class="btn btn--border btn-download-catalog" related-data="product" related-id="{{ $product->id }}" item-data="catalog" item-id="{{ $product->brochure }}" >{!! get_staticwording('catalogdownload', session('locale')) !!}</button>
              @endif
            @endif
          </div>
        </div>

        <div class="text-center" style="margin-top:50px;">
            <p>{!! $product->outputTranslate('excerpt', session('locale')) !!}</p>
        </div>

      </div>
    </section>
  </main>


  <div class="popup popup--page" id="popupProduct" title="Product Information Sample All Product" style="display:  ">
    <div class="popup-full">
      <div class="popup-wrapper">
        <div class="inner">
          <div class="container">
            <div class="scroller">
              @foreach($product->ingredients as $key=>$ing)
                @if($key==0)
                  <section id="pd-{{$ing->id}}">
                    <div class="container">
                      <div class="product-more__desc">
                        <div class="text">
                          <span class="product__name">{!! $product->outputTranslate('name', session('locale')) !!}</span>
                          <span class="h1 grad-text-2">
                            <span class="text">{!! $ing->outputTranslate('title', session('locale')) !!}</span>
                            <span class="mask"></span>
                          </span>
                          {!! $ing->outputTranslate('description', session('locale')) !!}
                        </div>
                        @if($ing->image!='')
                        <figure>
                          @php  
                            $img = json_decode($ing->image);
                            $ing_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                          @endphp
                          <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $ing_img !!}" alt="{!! $ing->outputTranslate('alt_image', session('locale')) !!}">
                        </figure>
                        @endif
                      </div>
                    </div>
                    
                    {{-- @if($ing->slider=='yes') --}}
                    @if($ing->sliders->count() > 0)
                      <div class="product-more__slider">
                        <div class="container">
                          @if($ing->sliders->count() > 1)
                            <div class="swiper-container">
                              <div class="swiper-wrapper">
                                @foreach($ing->sliders as $k=>$slide)
                                  <div class="swiper-slide">
                                    @if($slide->image!='')
                                    <figure>
                                      @php  
                                        $img = json_decode($slide->image);
                                        $slide_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                                      @endphp
                                      <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $slide_img !!}" alt="{!! $slide->outputTranslate('alt_image', session('locale')) !!}">
                                    </figure>
                                    @endif
                                    <div class="text">
                                      <h4 class="bebas-kai">{!! $slide->outputTranslate('title', session('locale')) !!}</h4>
                                      {!! $slide->outputTranslate('description', session('locale')) !!}
                                    </div>
                                  </div>
                                @endforeach
                              </div>
                            </div>
                            <div class="swiper-navigation">
                              <button class="swiper-prev">
                                <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M8.5 1.5L1 9M1 9L8.5 16.5M1 9H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                              </button>
                              <div class="swiper-pagination"></div>
                              <button class="swiper-next">
                                <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M11.5 1.5L19 9M19 9L11.5 16.5M19 9H1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                              </button>
                            </div>
                          @else
                            @foreach($ing->sliders as $k=>$slide)
                              <div class="swiper-slide">
                                @if($slide->image!='')
                                <figure>
                                  @php  
                                    $img = json_decode($slide->image);
                                    $slide_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                                  @endphp
                                  <img class="lazy" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $slide_img !!}" alt="{!! $slide->outputTranslate('alt_image', session('locale')) !!}">
                                </figure>
                                @endif
                                <div class="text">
                                  <h4 class="bebas-kai">{!! $slide->outputTranslate('title', session('locale')) !!}</h4>
                                  {!! $slide->outputTranslate('description', session('locale')) !!}
                                </div>
                              </div>
                            @endforeach
                          @endif
                        </div>
                      </div>
                    @endif
                  </section>
                @else
                  <section id="pd-{{$ing->id}}" class="product-more__spec">
                    <div class="container">
                      <span class="h1 grad-text-2">
                        <span class="text">{!! $ing->outputTranslate('title', session('locale')) !!}</span>
                        <span class="mask"></span>
                      </span>
                      {!! $ing->outputTranslate('description', session('locale')) !!}

                      @if($ing->image!='')
                        @php  
                          $img = json_decode($ing->image);
                          $ing_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                        @endphp
                        <img class="lazy product-more__image" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $ing_img !!}" alt="{!! $ing->outputTranslate('alt_image', session('locale')) !!}">
                      @endif
                    </div>
                    @if($ing->sliders->count() > 0)
                      <div class="container">
                        @foreach($ing->sliders as $k=>$slide)
                          {!! $slide->outputTranslate('description', session('locale')) !!}
                          @if($slide->image!='')
                            @php  
                              $img = json_decode($slide->image);
                              $slide_img = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
                            @endphp
                            <img class="lazy product-more__image" src="{{ asset('styling/img/blank.png') }}" data-src="{!! $slide_img !!}" alt="{!! $slide->outputTranslate('alt_image', session('locale')) !!}">
                          @endif  
                        @endforeach
                      </div>
                    @endif
                  </section>
                @endif
              @endforeach

              
              <div class="close-btn">
                <button onclick="$(this).parents('.popup').fadeOut(); setTimeout(function(){$('#popupProduct .scroller').scrollTop(0);}, 300);"><img src="{{ asset('styling/img/icon-close.png') }}"></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function(){

      $('body').on('click', '.btn-360', function(){
        $('.popup--loading').fadeIn('');
        var idx = $('.btn-360').index($(this));
        console.log(idx);
        var data_variant = $(this).attr('data-variant');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type:'POST',
            url:SITE_URL+'/get-data-360',
            dataType: 'JSON',
            async: false,
            data:{data_variant:data_variant},
            success:function(data){
                $('.popup--loading').fadeOut('');
                if(data.status=='true'){
                  $('.list--360').html(data.html);

                  $('.btn-360').addClass('btn--border');
                  $('.btn-360').eq(idx).removeClass('btn--border');
                }
                
            }
        });
      });


      // function tes_360(el){

      //   // alert(el);
      //   if ($('.'+el).length > 0) {
      //     var pic_X=$('.'+el).offset().left;
      //     var pic_Y=$('.'+el).offset().top;
      //     var pic_W=$('.'+el).width()/2;
      //     var pic_H=$('.'+el).height()/2;
      //     var center_X=pic_X+pic_W;
      //     var center_Y=pic_Y+pic_H;
      //     var movestop=pic_W/10;
      //     $('.'+el).mousemove(function(event){
      //         console.log(el);
      //         var mouse_X=event.pageX;
      //         var mouse_Y=event.pageY;
      //         if(mouse_X-center_X<=0){
      //             moveImg2(mouse_X,mouse_Y,'left')
      //         }else{
      //             moveImg2(mouse_X,mouse_Y)
      //         }
      //     });
      //     function moveImg2(m_X,m_Y,dir){
      //         var index=Math.ceil(Math.abs(m_X-center_X)/movestop);
      //         if(dir){
      //             $('.'+el).eq(index).show().siblings().hide();
      //         }else{
      //             $('.'+el).eq(18-index).show().siblings().hide();
      //         }
      //     }
      //   }

      // }

      // function variant360(){
      //   $('.variant-360').each(function() {
      //     var data_class = $(this).attr('data-class');
      //     console.log(data_class);
      //     tes_360(data_class);
      //   });
      // }

      // variant360();
    });
  </script>

@stop