@extends('front.layouts.app')
@section('title', 'Cart')
@section('description', 'Cart description')
@section('content')
    <style>
        .disabled {
            background: #808080;
        }
    </style>
    <!-- Begin: Main Slider -->
    <div id="cursor-follow"></div>
    <div class="main-slider proIner">
        <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
            <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="img-fluid w-100" src="{{ asset('front/images/abtBg.jpg') }}" alt="First slide">
                        <div class="carousel-caption">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2>Cart</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="overlay">
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <section class="checkOutStyle">
        <div class="container">
            <div class="row">
                <div class="col-md-12 p-sm-0">
                    <div class="title">
                        <h2>Confirm Your Purchase</h2>
                    </div>
                </div>
            </div>
            @if(session('cart'))
                @foreach(session()->get('cart') as $id => $details)
                    <div class="row cartItemCard">
                        <input type="hidden" name="cart_id" class="id" value="{{ $id }}">
                        <div class="col-md-1">
                            <img src="{{ asset('uploads/products') . '/' . $details['image'] }}" alt="">
                        </div>
                        <div class="col-md-4 text-left">
                            <h4>{{ $details['product_name'] }}</h4>
                        </div>
                        <div class="col-md-2">
                            {{--                            <strong class="price">${{ $details['price'] }} USD</strong>--}}
                            <strong class="price">${{ $details['price'] }} USD</strong>
                        </div>
                        <div class="col-md-2">
                            <div class="proCounter">
                                {{--                                <span class="minus">-</span>--}}
                                {{--                                <input type="text" value="{{ $details['quantity'] }}" name="quantity[]" data-id="{{ $id }}"/>--}}
                                {{--                                <span class="plus">+</span>--}}

                                <input data-id={{ $id }} type="number"
                                       class="input-text qty text input-quantity "
                                       step="1" min="1" name="quantity[]"
                                       value="{{ $details['quantity'] }}" title="Qty" size="4">
                            </div>
                        </div>
                        <div class="col-md-2">
                            {{--                            <strong class="price">${{ $details['price'] }} USD</strong>--}}
                            <strong class="price">${{ $details['quantity'] * $details['price'] }} USD</strong>
                        </div>
                        <div class="col-md-1">
                            <a href="#" class="delete remove-from-cart" id="{{ $id }}"><i class="far fa-trash-alt"></i></a>
                        </div>
                    </div>
                @endforeach
            @else
                <p>Cart is empty</p>
            @endif
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="text-center">
                        {{--                        <a href="#" onClick="window.location.reload();return false;" class="themeBtn my-5 update-cart">Update--}}
                        {{--                            Cart</a>--}}
                        @if(session('cart'))
                            <button class="themeBtn my3 update-cart disabled" onclick="window.location.reload()" disabled>Update Cart</button>
                            <a href="{{ url('checkout') }}" class="themeBtn my-5">Proceed To Checkout</a>
                        @else
                            <a href="{{ url('shop') }}" class="themeBtn my-5">Shop Now</a>
                        @endif
                    </div>
                    {{--                    <ul class="shipping-billing-col">--}}
                    {{--                        <li>--}}
                    {{--                            <p><i class="fas fa-map-marker-alt"></i> 543 Flint Street, Atlanta, GA Georgia, 30303 <a--}}
                    {{--                                    href="" class="edit">edit</a></p>--}}
                    {{--                        </li>--}}
                    {{--                        <li>--}}
                    {{--                            <p><i class="fas fa-phone"></i> <a href="tel:1234567890">123 456 7890</a> <a href="#"--}}
                    {{--                                                                                                         class="edit">edit</a>--}}
                    {{--                            </p>--}}
                    {{--                        </li>--}}
                    {{--                        <li>--}}
                    {{--                            <p><i class="fas fa-envelope"></i><a href="mailto:info@demolink.com">info@demolink.com</a><a--}}
                    {{--                                    href="#" class="edit">edit</a></p>--}}
                    {{--                        </li>--}}
                    {{--                    </ul>--}}
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $(".remove-from-cart").click(function (e) {
            e.preventDefault();

            var product = $(this);

            if (confirm("Confirm want to remove product?")) {
                $.ajax({
                    url: '{{ route('remove.from.cart') }}',
                    method: "DELETE",
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: product.attr("id")
                    },
                    success: function (response) {
                        window.location.reload();
                    }
                });
            }
        });

        $(document).on('click', '.qty', function (e) {
            e.preventDefault();

            var quantity = $(this).val();
            var id = $(this).attr("data-id");

            $.ajax({
                url: '{{ route('update.cart') }}',
                method: 'Post',
                data: {
                    _token: '{{ csrf_token() }}',
                    quantity: quantity,
                    id: id,
                },
                beforeSend: function () {
                    $('.update-cart').attr('disabled', true);
                    $('.update-cart').addClass('disabled');
                },
                success: function (response) {
                    // console.log(response);
                    $('.update-cart').removeAttr('disabled');
                    $('.update-cart').removeClass('disabled');
                }
            });
        });
    </script>
@endsection