@extends('delivery_mercado.default')
@section('content')

<style type="text/css">
.img-categoria{
  height: 300px;
  width: 350px;

}
.img-para-voce{
  height: 300px;
  width: 243px;
}
.card{
  margin-top: 10px;
}

</style>

<section class="section section-md bg-default">
  <div class="container">
    <input type="hidden" id="token" value="{{csrf_token()}}" name="">
    <div class="row">
      @foreach($produtos as $p)
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">

          @if(sizeof($p->galeria) > 0)
          <img src="/imagens_produtos/{{$p->galeria[0]->path}}" style="width: 500px; height: 300px"/>
          @else
          <img src="/imgs/no_image.png" style="width: 500px; height: 300px"/>
          @endif
          <div class="card-body">
            <h5 class="card-title"><a href="product.html" title="View Product">{{$p->produto->nome}}</a></h5>
            <p class="btn btn-danger btn-block" style="margin-top: -20px; font-size: 20px;">R$ {{number_format($p->valor, 2)}} {{$p->produto->unidade_venda}}</p>

            <div class="row" style="margin-top: -10px;">
              <div class="col-3">
                <button onclick="downProd({{$p->id}})" type="button" class="btn btn-circle btn-lg btn-down">
                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bag-dash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14 5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5zM1 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4H1z"/>
                    <path d="M8 1.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z"/>
                    <path fill-rule="evenodd" d="M5.5 10a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z"/>
                  </svg>
                </button>
              </div>

              <div class="input-group input-group-sm col-6">

                <input disabled id="input_prod_{{$p->id}}" value="{{$p->quantidade}}" type="number" class="form-control" style="text-align: center;">
                

              </div>

              <div class="col-3">
                <button onclick="upProd({{$p->id}})" type="button" class="btn btn-circle btn-lg btn-up">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bag-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M14 5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5zM1 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4H1z"/>
                  <path d="M8 1.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z"/>
                  <path fill-rule="evenodd" d="M8 7.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z"/>
                  <path fill-rule="evenodd" d="M7.5 10a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-2z"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endforeach

  </div>
</div>


</section>

@endsection