@extends('layouts.front.app')
@section('css')
  <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection

@section('content')
  <div class="container">
    @php
      $product = $product->getEcolabel($id_produto);
    @endphp

    <div class="row">
      <div class="col-4">
        <img src="{{asset('storage/img/etiqueta-nacional-de-conservacao-de-energia-ence-etiqueta-para-pneu-inmetro-319x600.jpg')}}" class="img-fluid" alt="Responsive image">
      </div>
      <div class="col-4 border border-info rounded-lg my-1">

        <div class="row mt-3">
          <!-- Área de Resistência ao Rolamento -->
        <div class="col-7">
          <div class="row">
            <div class="col-3">
              &nbsp;
            </div>
            <div class="col border border-bottom-0 border-info mx-4">
              <img src="{{asset('storage/img/resistencia-ao-rolamento.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento - {{ config('app.name')}}">
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'A')
                A
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'B')
                B
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'C')
                C
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'D')
                D
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'E')
                E
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'F')
                F
              @endif
            </div>
          </div>
          <div class="row">
            <div class="col-3 pt-1">
              <img src="{{asset('storage/img/resistencia-ao-rolamento-a.jpg')}}" class="img-fluid" alt="Resitencia ao Rolamento A - {{ config('app.name')}}">
              {{-- <div class="seta-1"></div> --}}
            </div>
            <div class="col border-right border-info mx-4">
              @if($product->item_pneu_aderencia === 'G')
                G
              @endif
            </div>
          </div>
        </div>
        <!-- ./ Área de Resistência ao Rolamento -->
        <!-- Área de Aderência ao molhado -->
        <div class="col-5">
          2
        </div>
        <!-- ./ Área de Aderência ao molhado -->
        </div>

        <div class="row">
          <!-- Área de Ruido Externo -->
          <div class="col-12">
            {{$product->item_pneu_ruido}}
          </div>
          <!-- ./ Área de Ruido Externo -->
        </div>
        <div class="row">
          <!-- Área de Logomarca do INMETRO -->
          <div class="col-12">
            4
          </div>
          <!-- ./ Área de Logomarca do INMETRO -->
        </div>
      </div>
    </div>

  </div>
@endsection