@extends('layouts.site')

@section('content')

<div id="produtos_principal">
    <div class="row">
        @if(isset($produtos) && !empty($produtos) && !is_null($produtos) && isset($produto_categoria) && !empty($produto_categoria) && !is_null($produto_categoria))
        <h3 class="my-4">{{ $produto_categoria[0]->nome }}
            <hr>
        </h3>
        @foreach($produtos as $k => $p)
        <div class="col-12 col-md-3 col-lg-3 text-center box-produto-home">
            <a href="{{ route('produto.show',$p->url) }}">
                <img src="/arquivos/upload/produtos/fotos/{{ $produto_fotos[$k][0]->url_image }}" class="img-thumbnail image-produto" height="24" title="{!! $p->nome_produto !!}" alt="{!! $p->nome_produto !!}">
            </a>
            <h6 class="text-uppercase mt-2">{!! $p->nome_produto !!}</h6>
            @if($p->valor_promocao > 0)
            <h6 class="text-danger text-decoration-line-through">R$ {!! number_format($p->valor,2,',','.') !!}</h6>
            <h5 class="text-primary">R$ {{ number_format($p->valor_promocao,2,',','.') }}</h5>
            @else
            <h5 class="text-center rounded valor_produto">
                R$ {!! number_format($p->valor,2,',','.') !!}
            </h5>
            @endif
            <a href="{{ route('produto.show',$p->url) }}" class="col-12 btn btn-sm btn-primary">
                <ion-icon name="reader-outline"></ion-icon>&nbsp;Ver Produto
            </a>
        </div>
        @endforeach
        @else
        <div class="col-12 alert alert-info mt-4 text-center" role="alert">Não há produtos cadastrados até o momento!</div>
        @endif
    </div>
</div>

<div class="modal fade" id="descricaoProduto" tabindex="-1" aria-labelledby="descricaoProdutoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="descricaoProdutoLabel">Descrição do Produto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-start" id="descricao_produto_modal">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@endsection