@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')
@php
$menu_banner = [
  ['link' => route('front.category.slug', ['romantico',  15]), 'banner' => 'banner/112.jpg'],
  ['link' => route('front.category.slug', ['aniversario',  19]), 'banner' => 'banner/113.jpg'],
  ['link' => route('front.category.slug', ['maternidade',  3]), 'banner' => 'banner/114.jpg'],
  ['link' => route('front.category.slug', ['presentes',  14]), 'banner' => 'banner/116.jpg'],
  ['link' => route('front.category.slug', ['decoracao',  20]), 'banner' => 'banner/117.jpg'],
];
@endphp
@include(config('site.domain').'.layouts.front.menu-superior')
@include(config('site.domain').'.layouts.front.menu-banner')

<section>
  <div class="container my-2">
    <nav>
      <ol class="breadcrumb grey lighten-3">
        <li>
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold"> 
            <i class="fa fa-home"></i> Home</a>
            <i class="fas fa-angle-double-right mx-2"></i>
          </li>
          <li class="breadcrumb-item black-text font-weight-bolder">
            <i class="fas fa-shopping-cart"></i> Carrinho
          </li>
        </ol>
      </nav>
    </div>
  </section>

  <section>
    <div class="alert alert-warning alert-page" role="alert" style="display: none;">
      <span id="monitor"></span>
    </div>
  </section>

  <section>
    <div class="container">

      <div class="my-4">
        @if($cartItems->count() > 0)
        <table class="table cart table-responsive table-hover table-bordered white my-3">

          <thead>
            <tr class="red-opera white-text">
              <th class="col-lg-5"><h5 class="white-text font-weight-bolder">PRODUTO</h5></th>
              <th class="col-lg-2"><h5 class="white-text font-weight-bolder">PREÇO</h5></th>
              <th class="col-lg-1"><h5 class="white-text font-weight-bolder text-center">QUANTIDADE</h5></th>
              <th class="col-lg-2"><h5 class="white-text font-weight-bolder text-center">SUBTOTAL</h5></th>
              <th class="col-lg-1"></th>
            </tr>
          </thead>

          <tbody>
            @foreach($cartItems as $cartItem)
            @php
            $product = \App\Shop\Products\Product::find($cartItem->product->id);
            @endphp
            <tr>
              <td data-th="Produto">
                <div class="row">
                  <div class="col-lg-3">
                    @if($cartItem->cover)
                    @php
                    $linkCart = config('site.url')."storage/".$product->cover;
                    @endphp
                    <img src='{{ $linkCart }}' alt="{{ $cartItem->name }}"  class="img-thumbnail">
                    @else
                    <img src="https://via.placeholder.com/120" alt="{{ $cartItem->name }}" class="img-thumbnail" />
                    @endif
                  </div>
                  <div class="col-lg-9 my-auto">
                    <h6 class="font-weight-bolder">
                      {{ $cartItem->name }}
                    </h6>
                  </div>
                </div>
              </td>
              <td data-th="Preco" class="text-center h6">
                @if ($cartItem->product->sale_price && ($cartItem->sale_price_ini < date("Y-m-d")) && ($cartItem->sale_price_fim >= date("Y-m-d")))
                <span class="mr-1"><del>{{ config('cart.currency_symbol') }} {{ number_format($cartItem->product->price, 2, ',', '.') }}</del></span>
                <span>{{config('cart.currency_symbol')}} {{ number_format($cartItem->product->sale_price, 2, ',', '.') }}</span>
                @else
                <span>{{config('cart.currency_symbol')}} {{ number_format($cartItem->product->price, 2, ',', '.') }}</span>
                @endif
              </td>
              <td data-th="Quantidade">
               <form action="{{ route('cart.atualiza') }}" method="POST">
                {{ csrf_field() }}
                <div class="md-form input-group border mb-3">
                  <input type="hidden" name="method" value="_post">
                  <input type="hidden" name="id" value="{{$cartItem->rowId}}">                                                          
                  <input type="number" name="quantity" class="form-control text-center" value="{{$cartItem->qty}}" min="1" max="{{ $cartItem->product->quantity}}">
                  <div class="input-group-append">
                    <button type="submit" class="btn red-opera btn-md m-0 px-3"><i class="fas fa-sync-alt white-text" style="cursor: pointer;"></i></button>
                  </div>
                </div>
              </form>
            </td>

            <td data-th="Subtotal" class="text-center h6">
              {{ config('cart.currency_symbol') }} {{ number_format(($cartItem->price * $cartItem->qty), 2, ',', '.') }}
            </td>
            <td class="actions" data-th="">
              <form action="{{ route('cart.destroy', $cartItem->rowId) }}" class="" method="post" id="ExcluiItem_{{ $cartItem->rowId }}">
                {{ csrf_field() }}
                <input type="hidden" name="_method" value="delete">
                <button onclick="return confirm('Deseja remover esse produto?')" class="btn box-red btn-sm" title="Remover"><i class="fas fa-trash fa-lg"></i></button>
              </form>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>

      <div class="row">

        <div class="col-lg">
          <table class="table text-center white mb-0">
            <tbody>
              <tr >
                <th class="red-opera d-lg-table-cell d-none"></th>
                <th class="red-opera white-text font-weight-bold w-25 h3 text-right">Total:</th>
                <th class="red-opera white-text font-weight-bold w-25 h3 text-right">{{ config('cart.currency_symbol') }} {{ number_format($cartTotal, 2, ',', '.') }}</th>
              </tr>
            </tbody>
          </table>

          <div class="white py-2">
            <div class="row">
              <div class="col-lg text-lg-left text-center">
                <button type="button" class="btn btn-info btn-lg btn-cart" data-href="{{ route('home') }}">Continuar comprando</button>
              </div>
              <div class="col-lg text-lg-right text-center">
                @if (auth()->check())
                <button type="button" class="btn btn-green btn-lg btn-cart h2" data-href="{{ route('checkout.index') }}">FINALIZAR COMPRA</button>

                @else
                <a data-toggle="modal" data-target="#modalLRForm" class="btn btn-green btn-lg h2">FINALIZAR COMPRA</a>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>

      @else

      <div class="container">
        <div class="p-3">
          <div class="p-4 text-center">
            <h3 class="font-weight-bold font-abeezee red-text">Seu carrinho está vazio</h3>
            <p class="font-weight-bolder new-grey">Para continuar comprando, navegue pelas categorias do site ou faça uma busca pelo seu produto.</p>
            <a href="{{ route('home') }}" class="btn btn-lg white-text btn-green font-weight-bold">Escolher produtos</a>
          </div>
        </div>
      </div>

      @endif
    </div>

  </div>
</section>
@endsection
@section('js')
<script type="text/javascript">

  $(document).ready(function(){

    $('.alert-page').hide()
    $('input[name=quantity]').on('blur', function() {
      let product = $(this).data('product')
      $('#modalAviso').modal( 'show' )
      
      $('#modalAviso').on('shown.bs.modal', function (event) {
        var modal = $(this)
        modal.find('.modal-title').text('Atualizando o carrinho')
        $(this).modal({
          backdrop: 'static'
        })
      })
      if($(this).val() > 0) {
        $('#formCartUpdate').submit()
      } else {
        $('#ExcluiItem_'+product).submit()
      }
    })
    $('input[name=quantity]').on('change', function() {
      let idCart = $(this).attr('id')
      let qtde = $(this).val()
      let maxqtde = $(this).attr('max')
      
      if (parseInt(qtde) > parseInt(maxqtde)) {
        $('.msg_' + idCart + '').show().addClass('animated fadeIn')
        $(this).val(maxqtde)
        $('.msg_' + idCart + '').html('Você atingiu a quantidde máxima.')
      } else {
        $('.alert-qtde').hide()
      }
    })
    $('.btn-cart').on('click', function() {
      location.href = $(this).data('href')
    })
    $('.alert').alert()
  })
</script>
@endsection