@extends('layouts.main')
{{--@push('catalogue-nav')--}}
{{--    @include('partials.general.catalogue-nav')--}}
{{--@endpush--}}
@section('content')
{{--{{var_dump($pendingcart)}}--}}
    <div class="modal fade" id="ordernotify" tabindex="-1" role="dialog" aria-labelledby="ordernotify" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header custom_bg_color_2">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 1;color: #fff"><span aria-hidden="true">&times;</span></button>
                    <img
                            src="{{asset('images/check.png')}}"
                            class="text-center" alt="success"
                            style="
                            width: 100px;
                            margin: 0 auto;
                            left: 40%;
                            top: 10%;
                            position: relative;"
                    >
                </div>
                <div class="modal-body text-center">
                    <h2 class="">Great!</h2>
                    <h4 class="order_response"></h4>
                    <br><br>
                    <div class="row" role="group" aria-label="">
                        <div class="col-sm-10 col-sm-offset-1">
                            <div class="col-sm-6" role="group">
                                <a type="button" href="{{url('catalogue')}}" aria-label="Close" class="btn btn-large custom_button_color_2" style="width: 100%; height: 40px;">
                                    <span>Continue Shopping</span> <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </div>
                            <div class="col-sm-6" role="group">
                                <a href="{{url('cart')}}" class="btn btn-large custom_button_color"  style="width: 100%; height: 40px;">
                                    <i class="fa fa-shopping-cart" aria-hidden="true"></i> <span>View Cart</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<div id="tt-pageContent">
    <div class="container-indent">
        <div class="container">
            @if(isset($pendingcart) && count($pendingcart) > 0)
                <h1 class="tt-title-subpages noborder">SHOPPING CART</h1>
                @php
                    $ifdelivery = 1;
                @endphp
                <div class="tt-shopcart-table-02">
                    <table>
                        <tbody>
                        @foreach($pendingcart as $item)
                            @php
                                if($item->delivery_type == 2){
                                $ifdelivery = 2;
                                }
                            @endphp
                            <tr id="{{$item->id}}">
                                <td>
                                    <div class="tt-product-img">
                                        <img src="{{asset('images/loader.svg')}}" data-src="{{$item->image}}" alt="">
                                    </div>
                                </td>
                                <td>
                                    <h2 class="tt-title">
                                        <a href="#">{{$item->name}}</a>
                                    </h2>
                                    <ul class="tt-list-description">
                                        @if($item->attrib)
                                            <li style="font-weight: bolder;"><b>( {{rtrim(trim($item->attrib->value),",")}} )</b></li>
                                        @endif
                                        @if($item->delivery_type == 2)
                                            <span title="Delivery">Delivery</span>
                                        @else
                                            <span title="Pickup">Pickup</span>
                                        @endif
                                    </ul>
                                    {{--                                    <ul class="tt-list-parameters">--}}
                                    {{--                                        <li>--}}
                                    {{--                                            <div class="tt-price">--}}
                                    {{--                                                $124--}}
                                    {{--                                            </div>--}}
                                    {{--                                        </li>--}}
                                    {{--                                        <li>--}}
                                    {{--                                            <div class="detach-quantity-mobile"></div>--}}
                                    {{--                                        </li>--}}
                                    {{--                                        <li>--}}
                                    {{--                                            <div class="tt-price subtotal">--}}
                                    {{--                                                $124--}}
                                    {{--                                            </div>--}}
                                    {{--                                        </li>--}}
                                    {{--                                    </ul>--}}
                                </td>
                                <td>
                                    <div class="tt-price cart-product-sub-total">
                                        @if(Auth::check())
                                            @if(Auth::user()->currency->is_currency_fixed == '1')
                                                <span class="cart-sub-total-price"><span>&#8358;</span>{{transform_product_price($item->price, 1) }}</span>
                                            @else
                                                <span class="cart-sub-total-price"><span>{{ transform_product_price($item->price, Auth::user()->currency->rate )  }}</span> {{Auth::user()->currency->currency}}</span>
                                            @endif
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="detach-quantity-desctope">
                                        <div class="tt-input-counter style-01">
                                            <span class="minus-btn"></span>
                                            <input type="number" min="1" id="{{$item->id}}" name="orderqty" value="{{$item->qty}}" size="5" class="orderqty">
                                            <span class="plus-btn"></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="tt-price subtotal cart-product-grand-total">
                                        @if(Auth::user()->currency->is_currency_fixed == '1')
                                            <span class="cart-grand-total-price"> {{transform_product_price(($item->price * $item->qty), 1) }}</span>
                                        @else
                                            <span class="cart-grand-total-price">{{ transform_product_price(($item->price * $item->qty), Auth::user()->currency->rate ) }}   <span class="green-text">{{Auth::user()->currency->currency}}</span></span>
                                        @endif
                                    </div>
                                </td>
                                <td class="romove-item">
                                    <a href="#" id="{{$item->id}}"  title="cancel" class="tt-btn-close remove"></a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <div class="tt-shopcart-btn">
                        <div class="col-left">
                            <a class="btn-link" href="{{url('catalogue')}}"><i class="icon-e-19"></i>CONTINUE SHOPPING</a>
                        </div>
                        {{--                        <div class="col-right">--}}
                        {{--                            <a class="btn-link" href="#"><i class="icon-h-02"></i>CLEAR SHOPPING CART</a>--}}
                        {{--                            <a class="btn-link" href="#"><i class="icon-h-48"></i>UPDATE CART</a>--}}
                        {{--                        </div>--}}
                    </div>
                </div>
                <div class="tt-shopcart-col">
                    <div class="row">
                        <div class="col-md-6 col-lg-4">
                        </div>
                        <div class="col-md-6 col-lg-4">
                        </div>
                        <div class="col-md-6 col-lg-4 col-12 col-sm-12">
                            <div class="tt-shopcart-box tt-boredr-large">
                                <table class="tt-shopcart-table01">
                                    <tbody>
                                    <tr>
                                        <th>SUBTOTAL</th>
                                        <td> @if(Auth::check())
                                                @if(Auth::user()->currency->is_currency_fixed == '1')
                                                    <span>&#8358;</span> @php echo $pendingcartsum ? transform_product_price($pendingcartsum[0], 1) : '0' @endphp
                                                @else
                                                    @php echo $pendingcartsum ? transform_product_price($pendingcartsum[0], Auth::user()->currency->rate ). ' <span class="green-text">'. Auth::user()->currency->currency : '0</span>' @endphp
                                                @endif
                                            @endif</td>
                                    </tr>
                                    </tbody>
                                </table>
                                @if($ifdelivery == 1)
                                    <button type="button" class="btn btn-lg checkout-btn custom_button_color_2" id="checkoutbtn" style="width: 100%;">
                                        <i class="fa fa-spinner fa-spin off process_indicator"></i> <span class="purchase_action_text" style="color:#fff;"> PAY </span></button>
                                @elseif($ifdelivery == 2)
                                    <a href="{{url('checkout')}}"  class="btn btn-lg checkout-btn custom_button_color">PROCEED TO CHECKOUT</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row justify-content-center align-items-center text-center">
                    <div class="col">
                        <img src="{{asset('assets/images/cart/shopping-cart-icon.png')}}" alt="" style="margin: 10px auto; width: 10%;">
                        <h3 class="text-center mb-5">Your Cart is empty</h3>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>




    <div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width: 55%">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header no-height">
                    {{--                    <button type="button" class="close" data-dismiss="modal">&times;</button>--}}
                    <h4 class="modal-title">Items Update</h4>
                </div>
                <div class="modal-body">

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Status</th>
                            <th>Item</th>
                            <th>Item Name</th>
                            <th>QTY</th>
                            <th></th>
{{--                            <th>Old Item Price</th>--}}
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="error-data">

                        </tbody>
                    </table>


                </div>
                <div class="modal-footer modal-center">
                    <button class="btn btn-green btnmodproceed" data-dismiss="modal" onclick="reloadpage()">Proceed</button>
                    <a class="btn btn-green btncontineshopping" style="display: none;" href="{{url('catalogue')}}">Cart is Empty Click to Continue Shopping</a>
                </div>
            </div>

        </div>
    </div>

   @if($table != "")

    <div data-table="{{$table}}" id="error" data-cart="{{$cartqty}}"></div>
   @endif


@endsection
        @push('style')
            <link rel="stylesheet" type="text/css" href="{{asset('css/alertui.min.css')}}">
        @endpush
@push('script')
            <script src="{{asset('js/alertui.min.js')}}"></script>
            <script src="{{ asset('js/lodash.min.js')}}"></script>
            <script>
                var processState = 0;
                var cartItems = [];

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $(".overlay").click(function(){
                    $(this).hide();
                })


                var update = function() {

                    var item = {id:$(this).prop('id'), qty:$(this).val() };
                    var cartItems = [];
                    $("input[name='orderqty']").each(function () {
                        var item = {id:$(this).prop('id'), qty:$(this).val() };
                        cartItems.push(item);
                    })
                    $.post("{!! url('update_cart') !!}",{items:cartItems})
                        .done(function (res) {
                            if(!res){
                                alertui.notify('error', 'Failed to update cart');
                                return false;
                            }
                            if(res.status == '400'){
                                alertui.notify('error', res.data);
                                return false;
                            }
                            alertui.notify('success', 'Success cart updated');

                            setTimeout(function () {
                                location.reload()
                            }, 2000);
                        })
                        .fail(function (error) {
                            if(response.status == 500){
                                alertui.notify('error', 'Apologies, an error occurred. Failed update cart');
                            }
                            else{
                                alertui.notify('error', response.responseJSON.data)
                            }
                        })
                };

                $(document).ready(function () {

                    $(".remove").on('click', function () {
                        popcartitem($(this).attr('id'))
                    });


                    $(".orderqty").on({
                        change: _.debounce(update, 2000)
                    });

                    //Checkout button event
                    $("#checkoutbtn").click(function (event) {
                        event.preventDefault();
                        checkout_redeem();
                    });

                    $(".update-button").on('click', function(e) {
                        e.preventDefault();
                        cartItems = [];
                        $("input[name='orderqty']").each(function () {
                            var item = {id:$(this).prop('id'), qty:$(this).val() };
                            cartItems.push(item);
                        })
                        // console.log(cartItems);
                        updatecart()
                    });
                })

                function popcartitem(id) {

                    alertui.confirm('Confirm Remove'
                        , 'Do you want to remove this item from your Cart? '
                        , function () {
                            $('#' + id + '.remove').html('<img src="{{asset('assets/images/spinnerb.gif')}}" style="width: 60px"/>')
                            $.post("{{url('api/delete_cart_item')}}", {id: id})
                                .done(function (res) {
                                    // handle success
                                    if (!res) {
                                        $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                        alertui.notify('error', 'Failed to update your cart');
                                        return false;
                                    }
                                    if (res.data.status == '400') {
                                        $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                        alertui.notify('error', res.data.data);
                                        return false;
                                    }

                                    $("tr[id=" + id + "] ").fadeOut("slow", function () {
                                        alertui.notify('success', 'Your cart has been updated');
                                        location.reload();
                                    })
                                    $("tr[id=" + id + "] ").fadeOut("slow", function () {
                                        alertui.notify('success', 'Your cart has been updated');
                                        location.reload();
                                    })


                                })
                                .fail(function (error) {
                                    // handle error
                                    $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                    alertui.notify('error', 'An Error occurred. Failed to update your cart');
                                })
                        }, function () {
                            // Notify success callback button default Cancel
                            alertui.notify('info', 'Item is safe in your Cart');
                        }
                    );
                }

                    function popupcartitem(id) {

                        alertui.confirm('Confirm Remove'
                            , 'Do you want to remove this item from your Cart? '
                            , function () {
                                $('#' + id + '.remove').html('<img src="{{asset('assets/images/spinnerb.gif')}}" style="width: 60px"/>')
                                $.post("{{url('api/delete_cart_item')}}", {id: id})
                                    .done(function (res) {
                                        // handle success
                                        if (!res) {
                                            $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                            alertui.notify('error', 'Failed to update your cart');
                                            return false;
                                        }
                                        if (res.data.status == '400') {
                                            $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                            alertui.notify('error', res.data.data);
                                            return false;
                                        }
                                        if(res.cartqty === 0)
                                        {
                                            $('.btncontineshopping').show();
                                            $('.btnmodproceed').hide();
                                        }



                                        $("#mod" + id).hide();
                                        $("tr[id=" + id + "] ").fadeOut("slow", function () {
                                            alertui.notify('success', 'Your cart has been updated');
                                            // location.reload();
                                        })


                                    })
                                    .fail(function (error) {
                                        // handle error
                                        $('#' + id + '.remove').html('<i class="fa fa-trash-o"></i>');
                                        alertui.notify('error', 'An Error occurred. Failed to update your cart');
                                    })
                            }, function () {
                                // Notify success callback button default Cancel
                                alertui.notify('info', 'Item is safe in your Cart');
                            }
                        );
                    }

                    function reloadpage() {
                        location.reload();
                    }

                    function checkout_redeem() {
                        $(".process_indicator").removeClass('off');
                        disableItem($("#checkoutbtn"), true)
                        $.post("{{url('api/redeem_cart')}}")
                            .done(function (res) {
                                $(".process_indicator").addClass('off');
                                disableItem($("#checkoutbtn"), false)
                                // handle success
                                if (!res) {
                                    alertui.notify('success', 'Failed to complete payment');
                                    return false;
                                }
                                if (res.status == '400') {
                                    alertui.notify('error', res.data.message);
                                    return false;
                                }
                                if (res.status == '300') {

                                    $('#myModal').modal('toggle');
                                    $('#error-data').append(res.table);
                                    if(res.cartqty === 0)
                                    {
                                        $('.btncontineshopping').show();
                                        $('.btnmodproceed').hide();
                                    }
                                    return false;
                                }
                                if (res.status == 'servererror') {
                                    alertui.notify('error', res.data.message);
                                    return false;
                                }
                                if (res.status == 'fail') {
                                    alertui.notify('error', res.data);
                                    return false;
                                }
                                if (res.status == '200') {
                                    updateAccount(res.account)
                                    updateCartCount(0);
                                    window.location.replace("{{url('ordercomplete')}}/" + res.data)

                                    {{--$(".cart-wrapper").fadeOut("slow")--}}
                                    {{--$('#ordernotify').modal('show');--}}
                                    {{--var oldlink = $("#order_receipt").prop('href');--}}
                                    {{--$('#ordernotify').on('shown.bs.modal', function (e) {--}}
                                    {{--$("#order_receipt").prop('href', "{{url('ordercomplete')}}"+'/'+res.data);--}}
                                    {{--});--}}
                                }
                            })
                            .fail(function (response, status, error) {
                                // handle error
                                $(".process_indicator").addClass('off');
                                disableItem($("#checkoutbtn"), false)
                                $(".orderloader").hide();
                                if (response.status == 500) {
                                    alertui.notify('error', 'Error completing order.. Please try again.')
                                } else {
                                    alertui.notify('error', 'Error completing order.. Please try again.')
                                }
                            })
                    }

                    function updatecart() {
                        $.post("{{url('api/update_cart')}}", {items: cartItems})
                            .done(function (res) {
                                if (!res) {
                                    alertui.notify('error', 'Failed to update cart');
                                    return false;
                                }
                                if (res.status == '400') {
                                    alertui.notify('error', res.data);
                                    return false;
                                }
                                alertui.notify('success', 'Success cart updated');
                                location.reload();
                            })
                            .fail(function (response, status, error) {
                                if (response.status == 500) {
                                    alertui.notify('error', 'Apologies, an error occurred. Failed update cart');
                                } else {
                                    alertui.notify('error', response.responseJSON.data)
                                }
                            })
                    };

                    function updateCartCount(cartqty) {
                        $("span.count").html(cartqty);
                    }

                    if ($('#error').length) {
                        var temptable = $('#error').attr('data-table');
                        $('#myModal').modal('toggle');
                        $('#error-data').append(temptable);

                        var incart = $('#error').attr('data-cart');

                        if(incart == 0)
                        {
                            $('.btncontineshopping').show();
                            $('.btnmodproceed').hide();
                        }else{
                            $('.btncontineshopping').hide();
                            $('.btnmodproceed').show();
                        }
                    }


            </script>
@endpush