@extends('layouts.site')

@section('content')

<h3 class="mt-4">
  {!! $produto->nome_produto !!}
  <hr>
</h3>

<div class="col-12 col-md-6 col-lg-6 rounded">
  <div id="carouselProdutoFotos" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner bg-light">
      @foreach($produto_fotos as $key => $foto)
      @if($key == 0)
      <div class="carousel-item text-center active">
        <img src="/arquivos/upload/produtos/fotos/{{ $foto->url_image }}" class="py-3 produto-page-single" title="{!! $produto->nome_produto !!}" alt="{!! $produto->nome_produto !!}" style="margin:0 auto;">
      </div>
      @else
      <div class="carousel-item text-center">
        <img src="/arquivos/upload/produtos/fotos/{{ $foto->url_image }}" class="produto-page-single" title="{!! $produto->nome_produto !!}" alt="{!! $produto->nome_produto !!}" style="margin:0 auto;">
      </div>
      @endif
      @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselProdutoFotos" data-bs-slide="prev">
      <span class="carousel-control-prev-icon btn btn-sm btn-primary" aria-hidden="true"></span>
      <span class="visually-hidden">Anterior</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselProdutoFotos" data-bs-slide="next">
      <span class="carousel-control-next-icon btn btn-sm btn-primary" aria-hidden="true"></span>
      <span class="visually-hidden">Próximo</span>
    </button>
  </div>
</div>

<div class="col-12 col-md-6 col-lg-6 border border-light rounded">
  @if($produto->valor_promocao > 0)
  <h6 class="text-danger text-decoration-line-through">De R$ {{ number_format($produto->valor,2,',','.') }} por</h6>
  <h3 class="text-primary">R$ {{ number_format($produto->valor_promocao,2,',','.') }} à vista ou no pix</h3>
  @else
  <h3 class="text-danger">De R$ {{ number_format($produto->valor,2,',','.') }} à vista ou no pix</h3>
  @endif
  <hr>
  <div class="row">
    <div class="col-12 col-md-3 col-lg-3 fw-bold text-center">
      Quantidade:
    </div>
    <div class="col-12 col-md-2 col-lg-2 text-start">
      <input type="number" class="form-control form-control-sm" name="quantidade_produto_carrinho" id="quantidade_produto_carrinho" value="1">
    </div>
  </div>
  <hr>
  <form class="form" id="formulario-calcular-frete" method="POST">
    @csrf
    <h5>Calcular Frete</h5>
    <div class="form-group">
      <div class="row">
        <div class="col-12 col-md-5 col-lg-5">
          <input type="text" name="cep_frete" class="form-control form-control-sm" id="cep_frete" placeholder="CEP (Somente Números)" required>
        </div>
        <div class="col-12 col-md-4 col-lg-4 fw-bold">
          <input type="radio" name="forma_envio" id="pac" value="41106">&nbsp;PAC
          <input type="radio" name="forma_envio" id="sedex" value="40010">&nbsp;SEDEX
        </div>
        <div class="col-12 col-md-3 col-lg-3">
          <button type="button" class="btn btn-sm btn-primary" onclick="calcular_frete({{ $produto->id }});">Calcular Frete</button>
        </div>
      </div>
    </div>
  </form>
  <hr>
  <div class="row">
    <div class="col-12 col-md-6 col-lg-6 text-center">
      <a href="#" class="col-12 btn btn-sm btn-secondary" onclick="alert('Abrir modal com as informações de trocas e devoluções!')">
        <ion-icon name="alert-outline"></ion-icon>Política de Troca e Devolução
      </a>
    </div>
    <div class="col-12 col-md-6 col-lg-6 text-center">
      <a href="#" class="col-12 btn btn-sm btn-success" onclick="add_produto_carrinho({{ $produto->id }});">
        <ion-icon name="cart-outline"></ion-icon>&nbsp;Adicionar ao Carrinho
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="col-12 col-md-6 col-lg-6 fw-bold d-none" role="alert" id="loading_cep_frete">Calculando o valor do frete...</div>
      <div class="col-12 col-md-12 col-lg-12 fw-bold d-none" role="alert" id="valor_embalagem_frete"></div>
      <div class="col-12 col-md-12 col-lg-12 fw-bold d-none" role="alert" id="valor_cep_frete"></div>
      <div class="col-12 col-md-12 col-lg-12 fw-bold d-none" role="alert" id="valor_cep_frete_mais_valor_produto"></div>
    </div>
  </div>
</div>

<div class="row mt-4">
  <div class="row">
    <h5>Descrição do Produto
      <hr>
    </h5>
    <p class="col-12">
      {!! $produto->descricao_produto !!}
    </p>
  </div>
  <div class="row">
    <h5>Características do Produto
      <hr>
    </h5>
    <p class="col-12">
    <div><label class="fw-bold">Altura:</label> {{ $produto->altura }} cm</div>
    <div><label class="fw-bold">Largura:</label> {{ $produto->largura }} cm</div>
    <div><label class="fw-bold">Peso:</label> {{ $produto->peso }} kg</div>
    <div><label class="fw-bold">Comprimento:</label> {{ $produto->comprimento }} cm</div>
    </p>
  </div>
</div>

@endsection