@extends('layouts.app')

@php
$fields = App\Controllers\Product::getFields();
@endphp

@section('content')
<section class="container">
  <div class="navXT">
    @php
    bcn_display()
    @endphp
  </div>
</section>
<section class="single-product-header section-block">
  <div class="container">
    <div class="row">
      <div class="col-12 col-xl-4 d-flex flex-column align-items-start">
        <span class="before_title">{!!get_the_terms(get_queried_object()->ID, 'categorie')[0]->name!!}</span>
        <h1 class="text-left">{!!ucfirst(get_the_title())!!}</h1>
        <p class="text-left mb-0">{{$fields['description_1']}}</p>
        <a class="btn btn-primary" target="_blank" href="/app/uploads/2020/04/00691_HB_Cata_2020_FR-WEB-192-210.pdf">
          @if(ICL_LANGUAGE_CODE === 'fr') Notice de mise en œuvre @endif
          @if(ICL_LANGUAGE_CODE == 'de') Bedienungsanleitung @endif
          <svg style="margin-left: 50px" id="Groupe_835" data-name="Groupe 835" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <rect id="Rectangle_113" data-name="Rectangle 113" width="24" height="24" fill="#fff" opacity="0" />
            <g id="Groupe_834" data-name="Groupe 834">
              <path id="Tracé_3094" data-name="Tracé 3094" d="M21,14a.945.945,0,0,0-1,1v4a.945.945,0,0,1-1,1H5a.945.945,0,0,1-1-1V15a.945.945,0,0,0-1-1,.945.945,0,0,0-1,1v4a2.946,2.946,0,0,0,3,3H19a2.946,2.946,0,0,0,3-3V15A.945.945,0,0,0,21,14Z" fill="#fff" />
              <path id="Tracé_3095" data-name="Tracé 3095" d="M11.3,15.7c.1.1.2.2.3.2a.6.6,0,0,0,.4.1.6.6,0,0,0,.4-.1c.1-.1.2-.1.3-.2l5-5a.99.99,0,1,0-1.4-1.4L13,12.6V3a1,1,0,0,0-2,0v9.6L7.7,9.3a.99.99,0,1,0-1.4,1.4Z" fill="#fff" />
            </g>
          </svg>
        </a>
      </div>
      <div class="col-12 col-lg-7 col-xl-7 offset-xl-1">
        @if(isset($fields['gallery']) && !empty($fields['gallery']))
        <div class="single-product-image">
          <div class="single-product-slider">
            @foreach($fields['gallery'] as $item)
            <div>
              <div class="image-wrapper">
                <img class="img-fluid" src="{{$item['img']['sizes']['slider_product_image']}}" alt="{{$item['img']['alt']}}">
                <div class="foot">
                  <div class="foot-legend">
                    <p>{{$item['img-legend']}}</p>
                  </div>
                  <div class="foot-counter">
                    <p>{{$loop->iteration}} <sup>/ {{$loop->count}}</sup></p>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>

        <div class="single-product-image-thumbs">
          @foreach($fields['gallery'] as $key => $item)
          <div class="item">
            <a href="{{$item['img']['sizes']['slider_fancy_image']}}" data-fancybox="gallery" data-thumb="{{$item['img']['sizes']['slider_fancy_thumb']}}" data-caption="{{$item['img-legend']}}">
              <img src="{{$item['img']['sizes']['slider_product_thumb']}}" alt="{{$item['img']['alt']}}">
            </a>
          </div>
          @endforeach
        </div>
        @endif
      </div>
    </div>
  </div>
</section>
{{-- <section class="single-product-description">
  <div class="container">
    <div class="row">
      <div class="single-product-description-download">
        <a target="_blank" href="/app/uploads/2020/04/00691_HB_Cata_2020_FR-WEB-192-210.pdf">
          @if(ICL_LANGUAGE_CODE === 'fr') Notice de mise en œuvre @endif
          @if(ICL_LANGUAGE_CODE == 'de') Bedienungsanleitung @endif
          <svg style="margin-left: 50px" id="Groupe_835" data-name="Groupe 835" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <rect id="Rectangle_113" data-name="Rectangle 113" width="24" height="24" fill="#fff" opacity="0" />
            <g id="Groupe_834" data-name="Groupe 834">
              <path id="Tracé_3094" data-name="Tracé 3094" d="M21,14a.945.945,0,0,0-1,1v4a.945.945,0,0,1-1,1H5a.945.945,0,0,1-1-1V15a.945.945,0,0,0-1-1,.945.945,0,0,0-1,1v4a2.946,2.946,0,0,0,3,3H19a2.946,2.946,0,0,0,3-3V15A.945.945,0,0,0,21,14Z" fill="#fff" />
              <path id="Tracé_3095" data-name="Tracé 3095" d="M11.3,15.7c.1.1.2.2.3.2a.6.6,0,0,0,.4.1.6.6,0,0,0,.4-.1c.1-.1.2-.1.3-.2l5-5a.99.99,0,1,0-1.4-1.4L13,12.6V3a1,1,0,0,0-2,0v9.6L7.7,9.3a.99.99,0,1,0-1.4,1.4Z" fill="#fff" />
            </g>
          </svg>
        </a>
      </div>

      <div class="single-product-description-content">
        <div class="row">
          <div class="col-md-5 col-12">
            <!--   @if(isset($fields['description_2']) && !empty($fields['description_2']))
            <p>{{$fields['description_2']}}</p>
            @endif -->
          </div>
          <div class="col-md-5 col-12 offset-md-1">
            <!--    @if(isset($fields['description_3']) && !empty($fields['description_3']))
            <p>{{$fields['description_3'] ?? ''}}</p>
            @endif -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section> --}}

<section class="single-product-features">
  @if( isset($fields['features']) && !empty($fields['features']) || (isset($fields['text_feature']) && !empty($fields['text_feature'])))
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="text-center-lg text-left">{{!empty($fields['carac_tab_title']) ? $fields['carac_tab_title'] : 'Caractéristiques'}}</h2>
      </div>
      <div class="col-12">
        @if( isset($fields['text_feature_2']) && !empty($fields['text_feature_2']))
        <p>{!!$fields['text_feature_2']!!}</p>
        @endif
        @if( isset($fields['features']) && !empty($fields['features']))
        <ul class="single-product-features-list">
          @foreach($fields['features'] as $item)
          <li>{{$item['title_feature']}}</li>
          @if( isset($item['under_features']) && !empty($item['under_features']))
          <ul class="single-product-features-list pl-4">
            @foreach($item['under_features'] as $item)
            <li>{{$item['title_under_feature']}}</li>
            @endforeach
          </ul>
          @endif
          @endforeach
        </ul>
        @endif
        @if( isset($fields['features_2']) && !empty($fields['features_2']))
        <ul class="single-product-features-list">
          @foreach($fields['features_2'] as $item)
          <li>{{$item['title_feature_2']}}</li>
          @if( isset($item['under_features_2']) && !empty($item['under_features_2']))
          <ul class="single-product-features-list pl-4">
            @foreach($item['under_features_2'] as $item)
            <li>{{$item['title_under_feature_2']}}</li>
            @endforeach
          </ul>
          @endif
          @endforeach
        </ul>
        @endif
        @if( isset($fields['text_feature']) && !empty($fields['text_feature']))
        <p>{!!$fields['text_feature']!!}</p>
        @endif
      </div>
      @if( isset($fields['icons']) && !empty($fields['icons']))
      <div class="col-lg-1">
        <ul class="single-product-icons">
          @foreach($fields['icons'] as $item)
          <li><img class="img-fluid" src="{{$item}}"></li>
          @endforeach
        </ul>
      </div>
      @endif
    </div>
  </div>
  @endif
</section>
@if(isset($fields['colors']) && !empty($fields['colors']))
<section class="single-product-coloris">
  <div class="container">
    <h2>{{!empty($fields['color_tab_title']) ? $fields['color_tab_title'] :'Coloris'}}</h2>
  </div>
  <div class="d-flex justify-content-end">
    <div class="coloris container">
      @foreach($fields['colors'] as $item)
      <div class="d-flex flex-column align-items-center justify-content-center coloris-item">
        <div>
          <img class="img-fluid" src="{{$item['img']['url']}}" alt="slider">
        </div>
        <p>{{$item['Titre']}}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endif

<section class="single-product-exemple">
  <div class="container">

    <div class="row">
      @if(isset($fields['rows']) && !empty($fields['rows']))
      <div class="col-12">
        <div>
          <a data-toggle="collapse" data-target="#collapseFormatProduct" aria-expanded="false" aria-controls="collapseExample" class="d-flex justify-content-between">{{!empty($fields['format_tab_title']) ? $fields['format_tab_title'] : 'Formats'}}
            <div class="plus">
              <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33"><g transform="translate(0.5 0.5)"><rect width="32" height="32" fill="#3a3e45" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0"/><path d="M24,13.333H16v-8a1.333,1.333,0,1,0-2.667,0v8h-8a1.333,1.333,0,1,0,0,2.667h8v8A1.333,1.333,0,1,0,16,24V16h8a1.333,1.333,0,1,0,0-2.667Z" transform="translate(1.333 1.333)" fill="#3a3e45" stroke="rgba(0,0,0,0)" stroke-width="1"/></g></svg>
            </div>
            <div class="moins">
              <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33"><g transform="translate(0.5 0.5)"><rect width="32" height="32" fill="#3a3e45" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0"/><g transform="translate(5.333 14.667)"><path d="M24,13.667H5.333a1.333,1.333,0,1,1,0-2.667H24a1.333,1.333,0,1,1,0,2.667Z" transform="translate(-4 -11)" fill="#3a3e45" stroke="rgba(0,0,0,0)" stroke-width="1"/></g></g></svg>
            </div>
          </a>
        </div>
        <div class="collapse show" id="collapseFormatProduct">
          <div class="row">
            <p class="h4">{{$fields['title_table_1'] ?? ''}}</p>

            <table class="table table-responsive ">

              <thead>
                @foreach($fields['rows'] as $rowKey => $row)
                @if ($rowKey == 0)
                <tr>
                  @foreach($row['cols'] as $col)
                  <th>{!! $col['content'] !!}</th>
                  @endforeach
                </tr>
                @endif
                @endforeach
              </thead>

              <tbody>
                @foreach($fields['rows'] as $rowKey => $row)
                @if ($rowKey > 0)
                <tr>
                  @foreach($row['cols'] as $col)
                  <td>{!! $col['content'] !!}</td>
                  @endforeach
                </tr>
                @endif
                @endforeach
              </tbody>
            </table>
            <p class="warning">{!! get_field('warning') ?? '' !!}</p>
          </div>
          <div class="row">


            @if(isset($fields['rows_2']) && !empty($fields['rows_2']))
            <p class="h4">{{$fields['title_table_2'] ?? ''}}</p>
            <table class="table table-responsive ">

              <thead>
                @foreach($fields['rows_2'] as $rowKey => $row)
                @if ($rowKey == 0)
                <tr>
                  @foreach($row['cols_2'] as $col)
                  <th>{!! $col['content_2'] !!}</th>
                  @endforeach
                </tr>
                @endif
                @endforeach
              </thead>

              <tbody>
                @foreach($fields['rows_2'] as $rowKey => $row)
                @if ($rowKey > 0)
                <tr>
                  @foreach($row['cols_2'] as $col)
                  <td>{!! $col['content_2'] !!}</td>
                  @endforeach
                </tr>
                @endif
                @endforeach
              </tbody>
            </table>

            <p class="warning">{!! get_field('warning') ?? '' !!}</p>
            @endif
          </div>
        </div>
      </div>
      @endif

      @if(isset($fields['pose']) && !empty($fields['pose']))
      <div class="col-12">
        <div>
          <a data-toggle="collapse" data-target="#collapseExempleProduct" aria-expanded="false" aria-controls="collapseExample" class="d-flex justify-content-between collapsed">{{!empty($fields['link_tab_title']) ? $fields['link_tab_title'] :  'Exemples'}}
           {{-- @if(ICL_LANGUAGE_CODE == 'fr'){{"de pose"}}@endif --}}
           <svg id="Groupe_894" data-name="Groupe 894" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
            <rect id="Rectangle_101" data-name="Rectangle 101" width="32" height="32" fill="#3a3e45" opacity="0" />
            <g id="Groupe_806" data-name="Groupe 806" transform="translate(6.666 10.666)">
              <path id="Tracé_3052" data-name="Tracé 3052" d="M14.333,18.667a1.33,1.33,0,0,1-.943-.391l-8-8A1.333,1.333,0,1,1,7.276,8.391l7.057,7.057,7.057-7.057a1.333,1.333,0,1,1,1.885,1.885l-8,8A1.33,1.33,0,0,1,14.333,18.667Z" transform="translate(-5 -8)" fill="#3a3e45" />
            </g>
          </svg>
        </a>
      </div>
      <div class="collapse" id="collapseExempleProduct">
        <div class="row">
          @foreach($fields['pose'] as $item)
          <div class="single-product-exemple-item col-lg-2 d-flex flex-column justify-content-start">
            <div class="match-height">
              <img class="img-fluid" src="{{$item['img']['url']}}" alt="image de {{$item['title']}}">
            </div>
            <p class="h2">{{$item['title']}}</p>
            <p>{!!$item['description']!!}</p>
          </div>
          @endforeach
        </div>
        <a href="https://heinrich-bock.webidea.fr/app/uploads/2020/04/00691_HB_Cata_2020_FR-WEB-178-210.pdf" class="download">Télécharger les exemples de pose</a>
      </div>
    </div>
    @endif
  </div>
</div>
</section>
@endsection