{# set progress from 1-5 #}
{% set progress_nav = 2 %}

{% set page_class = 'whiteBackground' %}

{% extends 'layouts/default.twig' %}

{% block head %}

    {{ judopay_assets() }}
    {% if initial_payload is defined and initial_payload is not empty %}
        <script>
            window.__INITIAL_BASKET_PAYLOAD__ = {{ initial_payload|json_encode|raw }};
        </script>
    {% endif %}

{% endblock %}

{% block content %}

    {% include 'navigation/breadcrumbs.twig' with {
        hide_logos: true,
        class: '',
        breadcrumbs: [
            {
                url: '/',
                name: 'Home'
            },
            {
                url: '/shop/checkout/basket.php',
                name: 'Your Basket'
            },
        ]
    } %}
    

    {% include 'includes/page_blocks/title_banner.twig' with {
        title: 'Your basket',
        subtitle: false,
        content: false,
        dark_background: false,
        class: 'checkoutTitle'
    }%}


    <div id="checkout" class="checkoutBasket">

        {{ hooks_do_action('call_static_block', 3) }}

        {{ macro.alert('success', success) }}

        <form action="#basket" method="post" class="checkoutForm" novalidate>


            <basket
                    inline-template
                    input_hide_inputs="{{ hide_inputs }}"
                    v-cloak
            >
                <div class="fragment">

                    <div v-if="basket_item_count" class="basketWrapper">



                        <div class="orderSummaryArea" v-if="loaded">

                            <div class="orderSummaryBox">

                                <h4>Order Summary</h4>

                                <div class="innerSummary">

                                    {{ include('shop/basket/view.twig') }}

                                    {{ include('shop/basket/view_totals.twig') }}

                                </div> <!-- .innerSummary -->

                            </div> <!-- #orderSummary -->

                            {{ hooks_do_action('after_order_summary') }}

                            <div class="checkoutActions">
                                <a class="continueShoppingLink" href="/browse">Continue Shopping</a>
                                <a href="#" id="mobileCheckoutButton" class="button">Begin Secure Checkout</a>
                            </div>

                        </div> <!-- .orderSummaryWrap -->



                        <div class="userDetailsWrap">

                            <div id="userDetails" class="formInline">

                                <div class="row validationMessage" v-if="hasField('errors.blacklisted')">
                                    <span>[% errors.blacklisted %]</span>
                                </div>

                                <h2 class="checkoutTitle">Checkout Now</h2>

                                {% if settings.MEMBERS_SECTION and member.id < 1 and settings.MEMBERS_BASKET %}
                                    {{ member_error|raw }}
                                    <div class="memberAlready">
                                        <h3>Member Already?</h3>
                                        <p>Signed up for an account previously? Sign in here to speed up the checkout process.</p>
                                        <a href="{{ route('members-login', {
                                            'redirect' : '/shop/checkout/',
                                            'check_existing_subscriptions': 'y'
                                        }, false) }}" class="button">Sign In</a>
                                    </div>
                                {% endif %}

                                {{ hooks_do_action('basket_login_section') }}

                                <div class="checkoutSectionWrap"
                                     v-if="loaded">
                                    <h4 class="checkoutSectionTitle">Personal Details</h4>
                                    {{ include('shop/basket/personal_details.twig') }}
                                    {{ include('shop/basket/id_check_form.twig') }}
                                </div>

                                <div class="checkoutSectionWrap" v-if="loaded">

                                    <h4 class="checkoutSectionTitle">Billing Details</h4>

                                    <div class="row" v-if="basket.require_id_check">

                                        <div class="alert complyMessage">
                                            <span>Please enter your billing address. This is the one which is linked to your bank account and allows us to complete your ID check. You can add a different delivery address below</span>
                                        </div>

                                    </div>

                                    {{ include('shop/basket/billing_details.twig') }}

                                    {% if basket.allow_alternate_delivery %}
                                        <div class="row"
                                            v-bind:class="{ alternate_delivery: !basket.billing_address_used }"
                                            id="shipAddress"
                                        >
                                            <h4 class="checkoutSectionTitle">Alternative Delivery Details (Optional)</h4>
                                            {{ include('shop/basket/shipping_details.twig') }}
                                        </div>
                                    {% endif %}

                                </div> <!-- .checkoutSectionWrap -->

                                {% if settings.ORDER_NOTES_ENABLED %}
                                    <div class="checkoutSectionWrap">
                                        <h6>Additional Info</h6>
                                        <div class="row">
                                            <label for="orderNotes">
                                                Notes
                                            </label>
                                            <textarea name="order_notes"
                                                id="orderNotes"
                                                @change="hasField('errors.info.message')"
                                                @keyup="notesLength({{ settings.ORDER_NOTES_MAX_LENGTH }})"
                                                v-model="basket.info.message"
                                            ></textarea>
                                            <div class="countdown">
                                                {{ settings.ORDER_NOTES_MAX_LENGTH }} characters remaining
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}


                                {% if settings.BASKET_HOW_DID_YOU_HEAR_ABOUT_US_ENABLED and member.id < 1 %}
                                    <div class="checkoutSectionWrap">
                                        <div class="row">
                                            <label for="how_did_you_hear_about_us">How did you hear about us?</label>
                                            <div class="inputWrap">
                                                <select name="how_did_you_hear_about_us"
                                                    v-select:store_details="basket.info.how_did_you_hear_about_us"
                                                    id="how_did_you_hear_about_us"
                                                >
                                                    <option value="">
                                                        Choose Option
                                                    </option>
                                                    <option v-for="choice in how_did_you_hear_about_us_choices"
                                                        :value="choice"
                                                        :selected="basket.info.how_did_you_hear_about_us == choice"
                                                    >
                                                        [% choice %]
                                                    </option>
                                                    <option value="other"
                                                        :selected="other_for_how_did_you_hear_about_us"
                                                    >
                                                        Other (please specify)
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row"
                                            v-if="other_for_how_did_you_hear_about_us"
                                        >
                                            <label for="how_did_you_hear_about_us_other">Other:</label>
                                            <div class="inputWrap">
                                                <input type="text"
                                                    name="how_did_you_hear_about_us_other"
                                                    id="how_did_you_hear_about_us_other"
                                                    v-model="basket.info.how_did_you_hear_about_us_text"
                                                    class="text"
                                                />
                                            </div>
                                        </div>
                                    </div> <!-- .checkoutSectionWrap -->
                                {% endif %}

                                <div class="row">
                                    <input type="checkbox"
                                           name="newsletter"
                                           id="newsletter"
                                           v-model="basket.info.newsletter"
                                           {% if member.id is empty %}checked="checked"{% endif %}
                                           value="on"
                                    />
                                    <label for="newsletter">
                                        I want to receive updates and special offers via email
                                    </label>
                                </div>


                                {% if settings.TERMS_SHOW %}
                                    <div class="checkoutSectionWrap">
                                        <div class="row checkboxRow"
                                            v-bind:class="{
                                                'errorWrap showError': hasField('errors.terms')
                                            }"
                                        >
                                            <input type="checkbox"
                                                   name="agree_to_terms"
                                                   id="termsAgree"
                                                   v-model="terms"
                                                   v-bind:true-value="1"
                                                   v-bind:false-value="0"
                                                   @focus="clearError('errors.terms')"
                                            />
                                            <label for="termsAgree">
                                                <strong>Please confirm that you have read and agree with our
                                                    <a href="/customer-care/terms-and-conditions" target="_blank" class="termsLink">
                                                        terms &amp; conditions
                                                    </a>
                                                </strong>
                                            </label>
                                            <div class="validationMessage"
                                                v-if="hasField('errors.terms')"
                                            >
                                                <span>[% errors.terms %]</span>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}


                                <div class="checkoutButtonWrap primaryCheckoutButton">

                                    <button type="submit"
                                            name="submit[checkout]"
                                            v-if="loaded && !basket.stock_error&& !basket.general_error"
                                            @click.prevent="callUpdate('try_checkout')"
                                            :disabled="busy"
                                            id="shipPayment"
                                            class="button"
                                    >
                                        Review and pay
                                    </button>

                                </div> <!-- .checkoutButtonWrap -->
                                
                                
                                {{ judopay_gpay_btn() }}
                                
                                {{ judopay_apay_btn() }}
                                
                              

                                <div id="basketStockError"
                                     v-if="loaded && basket.stock_error">
                                    {{ macro.alert('error', 'One or more items in your basket has exceeded available stock, please change the quantities of these items.', 'basket_stock_error') }}
                                </div>
                                <div id="basketLimitError"
                                     v-if="loaded && basket.limit_error">
                                    {{ macro.alert('error', 'One or more items in your basket has exceeded the purchase limit', 'basket_limit_error') }}
                                </div>
                                <div id="basketGeneralError"
                                     v-if="loaded && basket.general_error">
                                    {{ macro.alert('error', basket.general_error, 'basket_general_error') }}
                                </div>
                                <div id="basketIncompatibilityError"
                                     v-if="loaded && basket.incompatibility_error">
                                    {{ macro.alert('error', 'The medication in the basket have restrictions. Please see the list of medication for more information.', 'basket_incompatibility_error') }}
                                </div>

                            </div> <!-- #userDetails -->

                        </div> <!-- .userDetailsWrap -->

                    </div>

                    <div class="emptyBasket"
                        v-else
                        :class="{ loading : busy }"
                    >
                        <div class="emptyBasketMessage">
                          
                            <loading-spinner
                                    :loading="busy"
                                    :loading-text="empty_basket_message"
                                    :show-loading-text="true"
                            ></loading-spinner>
                            
                            <h4 v-html="empty_basket_message" v-if="!busy"></h4>
                        </div>


                    </div> <!-- .emptyBasket -->

                </div> <!-- .fragment -->
            </basket>
        </form> <!-- .checkoutForm -->

    </div> <!-- #checkout -->

    {% include 'shop/basket/delivery_banner.twig' with {
        no_wrapper: false,
        show_expected_delivery: true
    } %}


{% endblock %}
