@extends('layouts.public')

@section('content')
    <div class="section-products full-height flex-column">
        <div class="d-flex justify-content-center">
            <div class="container">
                <div class="row d-flex justify-content-center">
{{--                    <div class="d-flex justify-content-center pt-3">--}}
{{--                        <button id="cart" class="btn btn-block btn-hero-button-dark">Check Out</button>--}}
{{--                    </div>--}}
                    <div class="d-flex justify-content-center pt-3">
                        <button id="check-out" class="btn btn-hero-button btn-hero-button-dark disabled">Check Out (0)</button>
                    </div>
                </div>
                <div class="row pt-5">
                    @foreach($products as $product)
{{--                        <pre width="500px;" style="height: 500px;">{{ print_r($product, true) }}</pre>--}}
                        <div class="col-6 col-md-3 mx-auto d-flex justify-content-center">
                            <div class="product mb-5">
                                <div class="product-header mb-2">
                                    <div class="d-flex justify-content-center mb-3">
                                        <img src="{{ $product->image }}">
                                    </div>
                                    <p class="title">{{ \Str::limit($product->title, 35) }}</p>
                                    <p class="price d-flex justify-content-center">
                                        ${{ number_format($product->price, 2) }}</p>
                                </div>
                                <div class="product-footer">
                                    <div class="d-flex justify-content-center">
                                        <input id="count-{{ $product->handle }}" type="number" value="{{ rand(1, 5) }}" min="0" max="10" step="1"/>
                                    </div>
                                    <div class="d-flex justify-content-center pt-3">
                                        <button class="gift btn btn-block btn-hero-button btn-hero-button-dark"
                                                data-variant-id="{{ $product->variant_id }}"
                                                data-handle="{{ $product->handle }}"
                                        >{{ __( env('BUTTON_BUY', config('lv.button_buy', 'Gift') ) }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts-footer')
    @parent
    <script type="text/javascript">
        let product = null;
        let ucheckout = null;
        let lineItems = [];
        let productIds = [];
        let totalItems = 0;

        // Fetch all products in your shop
        // client.product.fetchAll().then((products) => {
        //     // Do something with the products
        //     product = products[0];
        //     console.log({'product': product});
        // });

        // Fetch a single product by ID
        // const productId = '30980876894268';
        //
        // client.product.fetch(productId).then((product) => {
        //     // Do something with the product
        //     console.log({'product': product});
        // });

        /**
         * Add Line Items to the list by variant Id
         * @param variantId
         * @param count
         */
        let addLineItemsByVariantId = function(variantId, count){
            let currentLineItem = lineItems.filter(function(lineItem){
                return lineItem.variantId == variantId;
            })[0];

            currentLineItem = Object.assign(currentLineItem || {}, {
                'variantId': variantId,
                quantity: count,
                //customAttributes: [{key: "MyKey", value: "MyValue"}]
            });
            //console.log(currentLineItem);

            lineItems = _.reject(lineItems, function(lineItem){
                return lineItem.variantId == currentLineItem.variantId
                    || lineItem.quantity == 0;
            });

            if(currentLineItem.quantity > 0) {
                lineItems.push(currentLineItem);
            }

            console.log(lineItems);

            totalItems = lineItems
                .map(function(lineItem){ return lineItem.quantity; })
                .reduce(function(total, count){ return total + count; }, 0);

            let $checkout = $('#check-out');
            $checkout.text('Check Out (' + totalItems + ')');
            if(totalItems) {
                $checkout.removeClass('disabled');
            }else{
                $checkout.addClass('disabled');
            }
        };

        /**
         * Convert an integer variant Id to a shopify cart Variant Id
         * @param variantId
         * @returns {string}
         */
        let variantIdToRemoteVariantId = function(variantId){
            return window.btoa('gid://shopify/ProductVariant/' + variantId )
        };

        /**
         * Add Line Items by product handle
         * @param handle
         * @param count
         */
        let addLineItemsByHandle = function(handle, count, variantId){
            if(!productIds.hasOwnProperty(handle)) {
                console.log(handle);

                client.product.fetchByHandle(handle).then((product) => {
                    //console.log(product);
                    productIds[handle] = product.variants[0].id;
                    addLineItemsById(productIds[handle], count);
                });
            } else{
                addLineItemsById(productIds[handle], count);
            }
        };

        /**
         * Get Shopify checkout
         * @param callback
         * @returns {*}
         */
        let getCheckout = function(callback){
            if (ucheckout == null) {
                // Create an empty checkout
                client.checkout.create().then((checkout) => {
                    console.log('creating new checkout');
                    ucheckout = checkout;
                    return callback(checkout);
                });
            } else {
                return callback(ucheckout);
            }
        };

        $('.gift').click(function(e){
            let handle = $(this).data('handle');
            let variantId = $(this).data('variantId');

            let count = parseInt($('#count-' + handle).val());
            //addLineItemsByHandle(handle, count, variantIdToRemoteVariantId(variantId));
            addLineItemsByVariantId(variantIdToRemoteVariantId(variantId), count);
        });

        $('#check-out').click(function () {
            if(totalItems > 0) {
                getCheckout((checkout) => {
                    console.log(client.checkout);
                    client.checkout.addLineItems(checkout.id, lineItems).then(checkout => {
                        window.open(checkout.webUrl).focus();
                        ucheckout = checkout;
                        return checkout;

                        /*const shippingAddress = {
                            address1: 'Chestnut Street 92',
                            address2: 'Apartment 2',
                            city: 'Louisville',
                            company: null,
                            country: 'United States',
                            firstName: 'Bob',
                            lastName: 'Norman',
                            phone: '555-625-1199',
                            province: 'Kentucky',
                            zip: '40202'
                        };

                        // Update the shipping address for an existing checkout.
                        return client.checkout.updateShippingAddress(checkout.id, shippingAddress).then(checkout => {
                            window.open(checkout.webUrl).focus();
                            ucheckout = checkout;
                            return checkout;
                        });*/
                    });
                });
            }else{
                alert('Please add some items to your cart');
            }
        });

        $('#cart').click(function () {
            //console.log({'product': product});

            if (ucheckout == null) {
                // Create an empty checkout
                client.checkout.create().then((checkout) => {
                    console.log('creating new checkout');
                    // Do something with the checkout
                    ucheckout = checkout;
                    console.log({'checkout': ucheckout, 'webUrl': ucheckout.webUrl});
                });
            } else {
                console.log('already created');
                let checkoutId = ucheckout.id;

                /*const input = {customAttributes: [{
                    // key: "MyKey", value: "MyValue"
                }]};

                client.checkout.updateAttributes(checkoutId, input).then((checkout) => {
                    // Do something with the updated checkout
                    ucheckout = checkout;
                    console.log({'checkout': ucheckout});
                });*/

                const lineItemsToAdd = [
                    {
                        variantId: product.variants[0].id,
                        quantity: 5,
                        //customAttributes: [{key: "MyKey", value: "MyValue"}]
                    }
                ];

                // Add an item to the checkout
                client.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) => {
                    // Do something with the updated checkout
                    ucheckout = checkout;
                    console.log({'lineItems': ucheckout.lineItems}); // Array with one additional line item

                    const shippingAddress = {
                        address1: 'Chestnut Street 92',
                        address2: 'Apartment 2',
                        city: 'Louisville',
                        company: null,
                        country: 'United States',
                        firstName: 'Bob',
                        lastName: 'Norman',
                        phone: '555-625-1199',
                        province: 'Kentucky',
                        zip: '40202'
                    };

                    // Update the shipping address for an existing checkout.
                    client.checkout.updateShippingAddress(checkoutId, shippingAddress).then(checkout => {
                        ucheckout = checkout;

                        window.open(ucheckout.webUrl).focus();
                    });
                });
            }
        });

        // $( document ).ready(function() {
        //     let config = {
        //         // decrementButton: "<strong>-</strong>", // button text
        //         // incrementButton: "<strong>+</strong>", // ..
        //         groupClass: "input-group-sm input-group-spinner input-group-spinner-cart", // css class of the resulting input-group
        //         buttonsClass: "text-dark",
        //         buttonsWidth: "1.75rem",
        //         // textAlign: "center",
        //         // autoDelay: 500, // ms holding before auto value change
        //         // autoInterval: 100, // speed of auto value change
        //         // boostThreshold: 10, // boost after these steps
        //         // boostMultiplier: "auto", // you can also set a constant number as multiplier
        //         // locale: null // the locale for number rendering; if null, the browsers language is used
        //     };
        //
        //     $("input[type='number']").inputSpinner(config);
        // });
    </script>
@endsection