@extends('layouts.front.app')

@section('og')
  <meta property="og:type" content="home" />
  <meta property="og:title" content="{{ config('app.name') }} - Inicial" />
  <meta property="og:description" content="{{ config('app.description') }}" />
@endsection

@section('content')
  <!--Section: Products v.3-->

  <!-- Modal: modalCart -->
  <div class="modal fade p-5" id="modalCart" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <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 class="white-text">&times;</span>
          </button>
        </div>

        <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>

        <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 -->
  <!-- Modal caso o Cupom esteja vazio -->

  <!-- MenuSuperior-->
  @include(config('site.domain').'.layouts.front.menu-superior')
  @include(config('site.domain').'.layouts.front.menu-banner')
  <!--/.MenuSuperior-->

  <section>
    <div class="container div-produtos">
      <nav>
        <ul class="breadcrumb grey lighten-4 mt-5">
          <li class="opera-text">
            <a href="{{ route('home') }}" class="font-weight-bold opera-text">
              <i class="fa fa-home"></i> Home
            </a>
            <i class="fas fa-angle-double-right mx-2"></i>
          </li>
          <li class="font-weight-bolder opera-text"> Monte seu presente</li>
        </ul>
      </nav>
    </div>
  </section>

  <section>

    <div class="container">
      @php
      $menu = new App\Http\Controllers\Menu\MenuController;
      $subMonteCesta = $menu->getMonteCesta();
      @endphp
      @foreach ($subMonteCesta as $key => $montaCesta)
        <div class="rounded z-depth-1 pointer barra-link py-2">
          <div class="d-flex justify-content-center">
            <div class="my-auto">
              <h3 class="h3-responsive font-montserrat font-weight-bold opera-text link-parcial-cat">{{ $montaCesta->name }}</h3>
            </div>
          </div>
        </div>
        @php
        $products = $menu->getProductByWebSg($montaCesta->grupo_sub_id);

        @endphp
        <div class="carousel-opera">

          @if ($products->count() > 0)

            @foreach ($products->split(config('site.por_pagina')) as $produtos)
              @include(config('site.domain').'.front.products.product-carousel', ['products' => $produtos])
            @endforeach

          @endif

        </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
            let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
            $('#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', formato)
              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