@extends('parts.header')
@section('content')
<div class="faixa">
  <div class="text-center">
    <b>EMPRESA ESPECIALIZADA</b> EM GUARDA-CHUVAS E SOMBRINHAS PERSONALIZADAS
  </div>
</div>
<div class="container">
  <div class="grupo-produto"></div>
  <div id="main_area">
    <!-- Slider -->
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-6">
            <div class="flexslider" id="flex">
              <div class="flex-viewport" style="overflow: hidden; position: relative;">
                <ul class="slides" style=" transition-duration: 0.6s; transform: translate3d(-1875px, 0px, 0px);">
                  @foreach($produtos->produtoFotos as $fotos)
                  <li data-thumb="/images/{{$fotos->filename}}" class="img-responsive">
                    <span class='zoom'>
                      <div class="thumb-image">
                        <img src="/images/{{$fotos->filename}}" data-zoom-image="/images/{{$fotos->filename}}" alt="/images/{{$fotos->filename}}"
                          class="img-responsive" id="trocarimg{{$id}}">
                      </div>
                    </span>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <form>
              <div class="row">
                <div class="col-md-6 col-md-offset-3">
                  <div class="form-group">
                  </div>
                </div>
              </div>
              <div class="product__details">
                <h3 class="product__heading">Referencia: {{$produtos->referencia}}</h3>
                <h5>Descrição</h5>
                <blockquote>
                  <p style="overflow: hidden; text-overflow: ellipsis;"><em>{{$produtos->descricao}}</em></p>
                </blockquote>
                <hr class="line">
                <div class="feature text-center">
                  @foreach ($destaques as $destaque)
                  @if (in_array($destaque->id, array_pluck($produtos->destaquesProdutos, 'destaques_id')))
                  <div class="quad grey">{{$destaque->descricao}}</div>
                  @endif
                  @endforeach
                </div>
                <div class="clearfix"></div>
                <hr class="line">
                <h5>Cores</h5>
                <div class="colors">
                  @foreach ($cores as $cor)
                  <label class="cl-prod">
                    @if (in_array($cor->id, array_pluck($produtos->coresProdutos, 'cor_id')))
                    <input type="button" class="color" style="background: {{$cor->hexa}};" onclick=" img({{$cor->id}}); ">
                    @endif
                  </label>
                  @endforeach
                </div>
                <div class="clearfix"></div>
                <hr class="line">
                <a href="{{route('orcamento', $produtos->slug)}}">
                  <div class="btn-detalhes"> Adicionar</div>
                </a>
                <a href="#ficha-produto" class="">
                  <div class="btn-features"> Ver Ficha Técnica</div>
                </a>
              </div>
          </div>
          <br>
        </div>
        </form>
      </div>
      <div class="clearfix"> </div>
      <hr class="line">
      <div class="produtos-relacionados">
        <h4>CONFIRA ALGUNS MODELOS JÁ PRODUZIDOS</h4>
        <div class="container">

          <div class="row">
            <div class="col-md-12">
              <div id="Carousel" class="carousel slide">
                <div class="carousel-inner">
                  @foreach($prod->chunk(4) as $items)
                  <div class="item {{ $loop->first ? 'active' : '' }}">
                    <div class="row">
                      @foreach($items as $item)
                      <div class="col-md-3">
                        <a href="{{route('detalhes', $item->slug)}}">
                          @foreach($item->produtoFotos->take(1) as $fotos)
                          <img src="/images/{{$fotos->filename}}" alt="" style="max-width:100%;">
                          @endforeach
                        </a>
                      </div>
                      @endforeach
                    </div>
                  </div>
                  @endforeach
                </div>

                <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
                <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
              </div>

            </div>
          </div>
        </div>

        <hr class="line">

        <div class="clearfix"> </div>
        <div class="ficha-produto" id="ficha-produto">
          <h4>Ficha Técnica:</h4>
          <p style="white-space: nowrap;">
            {!!$produtos->ficha_tecnica!!}
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
@include('parts.footer')
<script>
  var i, array_produtos, string_array, cores;
  string_array = <?php echo $produtos->produtoFotos?>;
  cores = <?php echo $produtos->coresProdutos ?>;
  for (i = 0; i < string_array.length; i++) {
    function img(i) {
      //Aqui preciso pegar a variavel
      console.log(
      document.getElementById("trocarimg"+i);
    }
  }
</script>
@stop