@extends('layouts.front.app')

@section('og')
    <meta property="og:type" content="categoria"/>
    <meta property="og:title" content="{{ config('app.name') }} - Monte sua cesta"/>
    <meta property="og:description" content="Monte sua cesta com os presentes que desejar"/>
@endsection
@section('css')
<style>
    .imagem{
        position:relative;
     }
     .imagem-esgotado {
        width:180px; /* largura da imagem máscara */
        height:180px; /* altura da imagem máscara */
        position:absolute;
        z-index: 100 !important;
        top:25%;
        /*background:url('storage/img/carimbo-esgotado.png') 0 0 no-repeat; /* imagem máscara */
     }
    .h-cesta {
      height: auto !important;
    }

</style>
@endsection
@section('content')
<!--Section: Products v.3-->
<section class="text-center mb-4">
    <div class="container div-produtos">
      <!-- Modal: modalCart -->
      <div class="modal fade p-5" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Sua cesta</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <!--Body-->
            <div class="modal-body">

              <table class="table table-hover" id="carTable">
                <thead>
                  <tr>
                    <th>Qtde</th>
                    <th>Nome</th>
                    <th>Preço</th>
                    <th>Remover</th>
                  </tr>
                </thead>
                <tbody class="linhaCarrinho">
                  
                </tbody>
                <tfoot class="font-italic">
                  <th colspan="2">Total</th>
                  <th colspan="2">{!! config('cart.currency_symbol') !!} <span class="cartTotal"></span></th>
                </tfoot>
              </table>

            </div>
            <!--Footer-->
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Fechar</button>
            <button class="btn btn-primary" id="verCarrinho">Ver Carrinho</button>
            </div>
          </div>
        </div>
      </div>
    <!-- Modal: modalCart -->
        <!-- Menu Superior -->
        <div class="container h-100">
            <!-- MenuSuperior-->
            @include('layouts.front.menu-superior')
            <!--/.MenuSuperior-->
        </div>
        <!-- /.Menu Superior -->
        <!-- Heading -->
        <nav aria-label="breadcrumb">
            <ul class="breadcrumb blue-grey lighten-4 opera-text">
                <li class="opera-text"><a href="{{ route('home') }}" class=" opera-text"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2"
                    aria-hidden="true"></i></li>
                <li class="active"> Monte seu presente</li>

            </ul>
        </nav>
          @foreach($category as $categoria)
            <div class="container row wow fadeIn d-inline-block">
              <div id="multi-item-example-{{ $categoria->slug }}" class="carousel slide carousel-multi-item" data-ride="carousel">
                {{-- <div class="navbar-opera rounded container z-depth-2 pointer link-categoria" data-href="{{ route('front.category.slug', $categoria->slug) }}">
                    <span class="h2-responsive">{{ $categoria->name }}</span>
                </div> --}}
                <div class="controls-top font-oswald opera-text z-depth-1 rounded mb-2">
                  <a class="btn-floating float-left white-text mt-1 btn-success ml-3 btn-rounded p-2 mb-1 z-depth-1" href="#multi-item-example-{{ $categoria->slug }}" data-slide="prev"><i class="fas fa-chevron-left waves-effect waves-light pl-2 pr-2"></i></a>
                  <span class="h2-responsive">{{ $categoria->name }}</span>
                  <a class="btn-floating float-right white-text mt-1 btn-success mr-3 btn-rounded p-2 mb-1 z-depth-1" href="#multi-item-example-{{ $categoria->slug }}" data-slide="next"><i class="fas fa-chevron-right waves-effect waves-light pl-2 pr-2"></i></a>
                </div>
                <div class="carousel-inner h-cesta justify-content-center" role="listbox">
                  @include('front.products.product-carousel')
                </div>
              </div>
            </div>
          @endforeach
    </div>
    
</section>
@endsection
@section('js')
  <script>
    $(document).ready(function () {
      $('.comprar').on('click', function(){
        $('.linhaCarrinho').html('<tr><td colspan="2"><div class="spinner-border text-danger" role="status"><span class="sr-only">Aguarde...</span></div></td></tr>')
        $('#modalCart').modal( 'show' )
        let product = ($(this).data('product'))
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });

        $.ajax({
            type: "GET",
            url: {!! json_encode(url('/')) !!}+'/cart-add',
            data: {product : product, quantity: 1, associa: true},
            dataType: "json",
            success: function (response) {
                if (response) {
                    $('.linhaCarrinho').html("")
                    let cartQdte = $('#cartCount').html()
                    let cartTotal = response.subtotal
                    let cartItens = response.cartItems
                    $('#cartCount').html(parseInt(cartQdte) + 1)
                    $('.cartCount').html(parseInt(cartQdte) + 1)
                    $('.cartTotal').html(cartTotal.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}))
                    let linhaCarrinho;
                    $.each(cartItens, function (i, v) { 
                      let itemPrice = v.price
                      itemPrice.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"})
                      linhaCarrinho += '<tr id="'+v.rowId+'">'
                      linhaCarrinho += '<th scope="row">' + v.qty + '</th>'
                      linhaCarrinho += '<td>' + v.name + '</td>'
                      linhaCarrinho += '<td>{!! config('cart.currency_symbol') !!} ' + v.price + '</td>'
                      linhaCarrinho += '<td class="removeProduct pointer" data-product="'+v.rowId+'"><i class="fas fa-trash-alt"></i></td>'
                      linhaCarrinho += '</tr>'
                    });
                    $('.linhaCarrinho').html(linhaCarrinho)
                    

                    $('.removeProduct').on('click', function(){
                      let id = ($(this).data('product'))
                      var tr = $('#'+id);
                      //change the background color to red before removing
                      tr.css("background-color","#FF3700");
                      $.ajax({
                        type: "GET",
                        url: {!! json_encode(url('/')) !!}+'/cart-del/',
                        data: {id : id},
                        dataType: "json",
                        success: function (response) {
                          let cartTotal = response.subTotal
                          let cartCount = response.cartCount
                          $('.cartCount').html(cartCount)
                          $('.cartTotal').html(cartTotal)
                          tr.fadeOut(400, function(){
                            tr.remove();
                          });
                        }
                      });
                    })
                }
            },
          })
      })

      
      $('#verCarrinho').on('click', function(){
        location.href="{{ route('cart.index') }}"
      })
    })
  </script>
@endsection