@extends('layouts.frontend')

@section('title', 'Tu carrito')

@section('content')
    <article id="cart">
        <div class="breadcrumb">
            <div class="container d-flex align-items-center">
                <a href="{{ url('/') }}">Inicio</a>
                <span>@yield('title')</span>
            </div>
        </div>
        <section>
            <div class="container">
                @if(Cart::count())
                    <div class="table-responsive">
                        @include('partials.cart-full')
                    </div>
                    <div class="btn-container mt-5 text-right">
                        <a href="{{ url('checkout') }}" class="btn">
                            <span>Proceder al pago</span>
                            <i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                @else
                    <h2 class="text-center">Tu carrito está vacío</h2>
                    <div class="text-center mt-5">
                        <a href="{{ url('productos') }}" class="btn">
                            <span>Ir a Productos</span>
                            <i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                @endif
            </div>
        </section>
    </article>
@endsection

@push('scripts')
    <script>
      var clickTimeout;

      $(function() {
        $('body').on('submit', 'form', function() {
          return false;
        });

        $('body').on('change', '.qty', function() {
          clearTimeout(clickTimeout);
          var $this = $(this).parents('form');
          clickTimeout = setTimeout(function(){
            $('.table').addClass('busy');
            $.post('{{ route('cart.action') }}', $this.serialize(), function(response) {
              $('.cart-count').text(response.count);
              $('.cart-content').html(response.cart);
              $('#cart .table-responsive').html(response.cart_full);
            }).fail(function(response) {
              alert(response.responseJSON.message);
            }).always(function() {
              $('.table').removeClass('busy');
            });
          }, 1000);
          return false;
        });
      });
    </script>
@endpush