@extends('aron-layouts.main')

@section('content')
    <section class="page_content_parent_section">

    @include('aron-layouts.includes._header')

    <!-- /Portfolio Section -->
        <style>
            @media screen and (min-width: 800px) {
                .menu-detail-outer {
                    margin-right: 20px;
                }
            }
        </style>

        <section class="content_section big_padding text-center blog_meox " style="padding-top:200px">

            @if (session('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif

            <div class="container">
                <section class="portfolio_section big_padding" id="responseMsg" style="padding-bottom: 0;">
                    <div class="container">
                        <div class="text-center">
                            <span class="text-success text-left couponsuccess" role="alert"
                                  style="display: none;">
                            </span>
                            <span class="text-danger text-left couponerror" role="alert"
                                  style="display: none;">
                            </span>
                        </div>

                        
                        <div class="tp-caption rev-btn"
                             id="layers-twel"
                             data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
                             data-responsive_offset="on"
                             data-responsive="off"
                             data-frames='[{"from":"y:100px;rX:90deg;opacity:0;","speed":1500,"to":"o:1;","delay":700,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                             style="z-index: 999;padding-top: 25px;">
                            <a href="{{route("cart.clear")}}"
                               class="button default button button_default_style bg_pink bg_before_navy text-capitalize "
                               style="line-height: 24px;">Clear Cart</a>
                            <a href="{{route("checkout.index")}}"
                               class="button default button button_default_style bg_pink bg_before_navy text-capitalize"
                               style="line-height: 24px;">Checkout</a>
                        </div>

                    </div>

                </section>

            </div>
        </section>
        @include('aron-layouts.includes._footer')

    </section>
@endsection
@section("script")
    <script>
        $(document).ready(function () {
            $('.remove').click(function () {
                var cartId = $(this).attr('cartid');
                var mealType = $(this).attr('mealType');
                var cartIdSplit = cartId.split('/');
                // var day = $('#oneDayMeals').val();
                $.ajax({
                    dataType: "json",
                    url: "{{route("cart.remove")}}",
                    method: "GET",
                    data: {mealType: mealType, id: cartId, _token: "{{ csrf_token() }}"},
                    success: function (response) {
                        if (response.status) {
                            $('#' + cartIdSplit[0]).remove();
                            // $('.couponerror').hide("fade");
                            // $('.couponsuccess').show("fade");
                            // $('.couponsuccess').html(response.message);
                            // setTimeout(function() {
                            //     $('.couponsuccess').hide("fade");
                            // }, 2000);
                            $('.cartQuantity').show("fade");
                            $('.cartQuantity').html(response.cartQuantity);
                            $.notify(response.message, {
                                position: "top right",
                                className: "success",
                                autoHideDelay: 10000
                            });
                        } else {
                            // $('.couponsuccess').hide("fade");
                            // $('.couponerror').show("fade");
                            // $('.couponerror').html(response.message);
                            $('.cartQuantity').show("fade");
                            $('.cartQuantity').html(response.cartQuantity);
                            $.notify(response.message, {
                                position: "top right",
                                className: "error",
                                autoHideDelay: 10000
                            });
                        }
                        // $('html, body').animate({
                        //     scrollTop: $("#responseMsg").offset().top
                        // }, 500);
                    }
                });
            });

            {{--$('#checkout').click(function(){--}}
            {{--    $.ajax({--}}
            {{--        dataType: "json",--}}
            {{--        url: "{{route("cart.totals")}}",--}}
            {{--        method: "POST",--}}
            {{--        data: {_token: "{{ csrf_token() }}"},--}}
            {{--        success: function (response) {--}}
            {{--            if (response.status) {--}}
            {{--                $('#'+cartIdSplit[0]).remove();--}}
            {{--                $('.couponerror').hide("fade");--}}
            {{--                $('.couponsuccess').show("fade");--}}
            {{--                $('.couponsuccess').html(response.message);--}}
            {{--                setTimeout(function() {--}}
            {{--                    $('.couponsuccess').hide("fade");--}}
            {{--                }, 2000);--}}
            {{--            } else {--}}
            {{--                $('.couponsuccess').hide("fade");--}}
            {{--                $('.couponerror').show("fade");--}}
            {{--                $('.couponerror').html(response.message);--}}
            {{--            }--}}
            {{--            $('html, body').animate({--}}
            {{--                scrollTop: $("#responseMsg").offset().top--}}
            {{--            }, 500);--}}
            {{--        }--}}
            {{--    });--}}
            {{--});--}}

        });
    </script>

@endsection