@extends('layouts.app')

@section('title') Shopping Bag @endsection

@section('content')
<div id="cart" class="container py-5">
    @include('partials.carts')
</div> 
@endsection

@section('js')
<script>
    function refreshContent()
    {
        $.ajax({
            url: `{{ route('carts.index') }}`,
            dataType: 'html'

        }).done(function(data)
        {
            $('#cart').html(data);
        });
    }

    $('#cart').delegate('.form-cart', 'submit', function(e)
    {
        $.Event(e).preventDefault();

        const form = $(this);

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'JSON'

        }).done(function(data)
        {
            if (data.status == 'error')
            {
                showNoty(data);
            }

            else
            {
                $('[data-attribute="cart_quantity"]').text(data.data.quantity);
                
                refreshContent();
            }
        });
    });
</script>
@endsection