@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="cart_pg checkout_pg section">
            <div class="container">
                <form>
                    <div class="row">

                        <div class="col-lg-11 m-auto">
                            @if(count($carts) == 0)
                                <div class="alert alert-danger py-4 text-center my-5" role="alert">
                                    {{__('web.empty_cart')}}
                                </div>
                            @else
                                <div class="box mb-5">
                                    <h2 class="sec_title bb fw-bold mb-4">  {{__('web.cart')}} </h2>
                                    @include('web.pages.components.cart.cart')
                                </div>
                                <div class="d-flex align-items-center justify-content-center">
                                    <a href="{{route('products')}}"
                                       class="butn primary_border_butn me-2">{{__('web.continue_cart')}}</a>
                                    <a href="{{$forward_action}}" class="butn primary_butn">
                                        {{__('web.order_finish')}}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>
    @section('inject_js')
        <script>
            let url_edit_cart = "{{url(getCurrentLocale().'/cart/edit')}}"
            let url_delete_cart = "{{url(getCurrentLocale().'/cart/delete')}}"
            let url_calculate_order = "{{route('order.calculate')}}"
            let sar = " " + "{{__('web.sar')}}"
        </script>
        <script>
            setTimeout(function () {
                calculate()
            }, 700);
            var buttonPlus = $(".qty-btn-plus");
            var buttonMinus = $(".qty-btn-minus");

            var incrementPlus = buttonPlus.click(function () {
                var $n = $(this)
                    .parent(".qty-container")
                    .find(".input-qty");
                var cart_id = $(this).attr('data-id')

                $.ajax
                ({
                    url: url_edit_cart + '/' + cart_id,
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: 'count=' + (Number($n.val()) + 1) + '&status=plus',
                    dataType: 'json',
                    success: function (data) {
                        $n.val(Number($n.val()) + 1);
                        toasterSuccess(data.message);
                        calculate()
                    }
                    , error: function (data) {
                        toasterError(Object.values(data.responseJSON.errors)[0]);
                    }
                })

            });

            var incrementMinus = buttonMinus.click(function () {
                var $n = $(this)
                    .parent(".qty-container")
                    .find(".input-qty");
                var cart_id = $(this).attr('data-id')
                var amount = Number($n.val());
                if (amount > 1) {
                    $.ajax
                    ({
                        url: url_edit_cart + '/' + cart_id,
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: 'count=' + (amount - 1) + '&status=minus',
                        dataType: 'json',
                        success: function (data) {
                            $n.val(amount - 1);
                            toasterSuccess(data.message);
                            calculate()
                        }
                        , error: function (data) {
                            toasterError(Object.values(data.responseJSON.errors)[0]);
                        }
                    })
                }
            });

            function calculate() {
                $.ajax
                ({
                    url: url_calculate_order,
                    type: "GET",
                    data: '',
                    dataType: 'json',
                    success: function (data) {
                        $.each(data.products, function (key, product) {
                            $('#cart' + product.cart_id).html(product.count);
                            $('#product_cost' + product.cart_id).html(product.product_cost + sar);
                            $('#tax_value' + product.cart_id).html(product.tax + sar);
                            $('#product_cost_total' + product.cart_id).html(product.product_total + sar);
                        });
                        $('#products_total').html(data.total_products + sar);
                        $('#tax_total').html(data.total_tax + sar);
                        if (data.tax_valid == 'true') {
                            $('.tax_valid').show();
                        } else {
                            $('.tax_valid').hide();
                        }
                        $('#order_total').html((data.total_products + data.total_tax) + sar);
                    }
                    , error: function (data) {
                        toasterError(Object.values(data.responseJSON.errors)[0]);
                    }
                })
            }

            function deleteCart(elem) {
                let cart_id = $(elem).attr('data-id');
                $.ajax
                ({
                    url: url_delete_cart + '/' + cart_id,
                    type: 'GET',
                    data: '',
                    success: function (data) {
                        $(elem).closest('.cart_row').fadeOut(1000);
                        calculate()
                    }
                })
            }
        </script>
    @endsection
@stop