@extends('layouts.main')
@section('content')
    <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('sigma/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 class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="container" style="margin-bottom: 40px">
            <div class="row">
                @if(isset($pendingcart) && count($pendingcart) > 0)
                <div class="shopping-cart">
                    @php
                        $ifdelivery = 1;
                    @endphp
                    <div class="shopping-cart-table col-sm-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th class="cart-romove item">Remove</th>
                                    <th class="cart-product-image item">Image</th>
                                    <th class="cart-product-name item">Product Name</th>
                                    <th class="cart-qty item">Quantity</th>
                                    <th class="cart-qty item">Delivery method</th>
                                    <th class="cart-sub-total item">Subtotal</th>
                                    <th class="cart-total last-item">Grandtotal</th>
                                </tr>
                                </thead><!-- /thead -->

                                <tbody>
                                @foreach($pendingcart as $item)
                                    @php
                                        if($item->delivery_type == 2){
                                        $ifdelivery = 2;
                                        }
                                    @endphp
                                <tr id="{{$item->id}}">
                                    <td class="romove-item"><a id="{{$item->id}}" title="cancel" class="icon remove"><i class="fa fa-trash-o"></i></a></td>
                                    <td class="romove-item">
                                        <a data-lightbox="image-{{$item->image}}" data-title="{{$item->name}}" href="{{$item->image}}">
                                        <img src="{{$item->image}}" style="width: 80px;">
                                        </a>
                                    </td>
                                    <td class="cart-product-name-info">
                                        <h4 class='cart-product-description'>{{$item->name}}
                                            @if($item->attrib)
                                              ( {{$item->attrib->value}} )
                                            @endif
                                        </h4>
                                    </td>
                                    <td class="cart-product-quantity">
                                            <input type="number" min="1" id="{{$item->id}}" name="orderqty" value="{{$item->qty}}" class="form-control orderqty" style="width: 70px;">

                                    </td>
                                    <td class="cart-product-quantity">
                                    @if($item->delivery_type == 2)
                                            <span title="Delivery">Delivery</span>
                                        @else
                                            <span title="Pickup">Pickup</span>
                                        @endif
                                    </td>
                                    <td class="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
                                    </td>
                                    <td class="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 ) }}   {{Auth::user()->currency->currency}}</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>

                                <tfoot>
                                <tr>
                                    <td colspan="7">
                                        <div class="shopping-cart-btn">
							<span class="">
								<a href="{{url('catalogue')}}" class="btn btn-upper btn-primary outer-left-xs custom_button_color">Continue Shopping</a>
								{{--<a href="#" class="btn btn-upper custom_button_color_2 update-button btn-primary pull-right outer-right-xs">Update shopping cart</a>--}}
							</span>
                                        </div><!-- /.shopping-cart-btn -->
                                    </td>
                                </tr>
                                </tfoot>
                            </table><!-- /table -->
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12 pull-right cart-shopping-total">
                        @if(isset($pendingcart) && count($pendingcart) > 0)
                        <table class="table">
                            <thead>
                            <tr>
                                <th>
                                    <div class="cart-grand-total" style="color: #000;text-align: center;" data-title="Subtotal subtotalvalue" id="subtotal_value" data-subtotal="{{ $pendingcartsum[0] }}">
                                        Subtotal<span class="inner-left-md">
                                        @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 ). ' '. Auth::user()->currency->currency : '0' @endphp
                                            @endif
                                        @endif
                                        </span>
                                    </div>
                                </th>
                            </tr>
                            </thead><!-- /thead -->
                            <tbody>
                            <tr>
                                <td>
                                    <div class="cart-checkout-btn pull-right text-center" style="width: 100%;">
                                        @if($ifdelivery == 1)
                                        <button type="button" class="btn btn-primary 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-primary checkout-btn custom_button_color">PROCEED TO CHECKOUT</a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            </tbody><!-- /tbody -->
                        </table><!-- /table -->
                            @endif
                    </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>
@endsection
        @push('style')
            <link rel="stylesheet" type="text/css" href="{{asset('sigma/css/alertui.min.css')}}">
        @endpush
@push('script')
            <script src="{{asset('sigma/js/alertui.min.js')}}"></script>
            <script src="{{ asset('sigma/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(){
                            $.post("{{url('api/delete_cart_item')}}", {id:id})
                                .done(function (res) {
                                    // handle success
                                    if (!res) {
                                        alertui.notify('error', 'Failed to update your cart');
                                        return false;
                                    }
                                    if (res.data.status == '400') {
                                        alertui.notify('error', res.data.data);
                                        return false;
                                    }
                                    $("tr[id="+id+"] ").fadeOut("slow", function(){
                                        alertui.notify('success', 'Your cart has been updated');
                                        location.reload();
                                    })

                                })
                                .fail(function (error) {
                                    // handle error
                                    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 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 == '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);
                }

            </script>
@endpush