@extends("web.layouts.master")

@section("content")
@include("web.components.title")
<section class="space--sm">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Checkout</h1>
                <hr>
            </div>
        </div>
        <!--end of row-->
    </div>
    <!--end of container-->
</section>
<section>
    <div class="container">
        <form id="cart-form" class="cart-form" action="{{ route("web.cart.checkout") }}" method="POST">
            <div class="masonry">
                <div class="masonry__container row">
                    @forelse ($cartHelper->getCartItems() as $cartItem)
                        <div class="masonry__item col-md-4">
                            <div class="product border--round" style="border: 1px solid #ececec; padding: 10px;">
                                <div class="product__controls row align-items-center">
                                    <div class="col-3">
                                        <span class="label" style="position: initial;">QTY: {{ $cartItem["qty"] }}</span>
                                    </div>
                                    <div class="col-6">
                                    </div>
                                    <div class="col-3 text-right">
                                        <a href="{{ route("web.cart.remove", [ "productId" => $cartItem["product_id"] ]) }}" class="checkmark checkmark--cross bg--error"></a>
                                    </div>
                                </div>
                                <img alt="Image" src="{{ $cartItem["product_image"] }}" class="img-fluid border--round"/>
                                <div>
                                    <h5>{{ $cartItem["name"] }}</h5>
                                </div>
                                <div>
                                    <span class="h4 inline-block">{{ GeneralHelper::transformAmount($cartItem["subTotal"]) }}</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="masonry__item col-md-12 text-center">
                            <h3><i class="stack-basket"></i> Shopping Cart is empty.</h3>
                        </div>
                    @endforelse
                </div>
            </div>
            <div class="row mt--2">
                <div class="col-md-12">
                    <div class="boxed boxed--border cart-total">
                        <div class="row unmarg">
                            <div class="col-6">
                                <span class="h5">Subtotal:</span>
                            </div>
                            <div class="col-6 text-right">
                                <span id="subtotal-label">{{ GeneralHelper::transformAmount($cartHelper->getSubTotal()) }}</span>
                            </div>
                        </div>
                        <hr>
                        <div class="row unmarg">
                            <div class="col-6">
                                <span class="h4">Total:</span>
                            </div>
                            <div class="col-6 text-right">
                                <span class="h4" id="total-label">{{ GeneralHelper::transformAmount($cartHelper->getTotal()) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-8" style="margin-top: 3.71428571em">
                    <h4>Payment Information</h4>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Payment Method <span style="color: red;">*</span></label>
                                <div class="input-select">
                                    {{
                                        Form::select(
                                            "payment_method",
                                            PaymentMethodEnum::getArrayWithStringKey(),
                                            null,
                                            ["class" => "form-control"]
                                        )
                                    }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="notes">Notes</label>
                                <textarea type="text" id="notes" class="form-control" name="notes" placeholder="Notes"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--end of row-->
                </div>
            </div>

            <div id="ajax-loading-icon" class="row mt--2 hidden" style="position: relative">
                <div class="ajax-loading-icon">
                    <img src="{{ asset("web/assets/img/loading-icon.gif") }}" width="30" height="30">
                </div>
            </div>

            <div class="row justify-content-center mt--2">
                <div class="col-md-12 col-lg-8">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <span>
                                By clicking this button below, you have accepted our <br/>
                                <a href="{{ route("web.cart.tnc") }}">Terms & Conditions</a>
                            </span>
                        </div>
                        <div class="col-md-12 text-right">
                            <button type="submit" id="checkout-btn" class="btn btn--primary">Checkout</button>
                        </div>
                    </div>
                    <!--end of row-->
                </div>

            </div>
        </form>
        <!--end checkout form-->
    </div>
    <!--end of container-->
</section>
@endsection

@push("stackJs")
<script type="text/javascript">
    $(document).ready(function () {
        var $cartForm = $("#cart-form");
        var isCartEmpty = {{ $cartHelper->getCount() }} == 0 ? true : false;

        $cartForm.on("submit", function (e) {
            e.preventDefault();

            if (isCartEmpty) {
                showAlertNotification({
                    "message": "Shopping Cart is empty."
                });
                return;
            }

            var serializeArray = $(this).serializeArray();

            var data = {};
            for (var key in serializeArray) {
                var obj = serializeArray[key];
                data[obj.name] = obj.value;
            }

            showAjaxLoadingIcon2();
            $.ajax({
                url: "{{ route("web.cart.payment") }}",
                method: "POST",
                data: data,
                success: function (res) {
                    hideAjaxLoadingIcon2();

                    if (res.success) {
                        var goToTransactionDetailBtnHtml = '</br><a href="' + res.redirect_url + '" class="btn btn--primary" style="width: 100%;">OK</a>';
                        showModalNotification({
                            "title": "Checkout",
                            "message": "<div class='text-center'><span>Your Order Submitted Successfully</span><br>" + goToTransactionDetailBtnHtml + "</div>"
                        });
                    } else {
                        showCancelableModalNotification({
                            "message": res.message
                        });
                    }
                },
                error: function (res) {
                    hideAjaxLoadingIcon2();

                    showCancelableModalNotification({
                        "message": "Failed to checkout."
                    });
                }
            });
        });

        function showAjaxLoadingIcon2() {
            showModalWithLoadingIcon();
        }

        function hideAjaxLoadingIcon2() {
            hideModalWithLoadingIcon();
        }
    });
</script>
@endpush