<template>

    <section class="inline-template-wrapper">

        <div class="pages">


            <section class="page">

                <div class="pageHeading">

                    <div class="iconWrap">
                        <div class="icon">
                            <img src="/sites/default/images/svgs/doctor.svg" />
                        </div> <!-- .icon -->
                    </div> <!-- .iconWrap -->
                    <h2>Getting started</h2>
                    <p>We just have a couple of questions before you get started.</p>

                </div> <!-- .pageHeading -->


                <div class="innerPageContent">

                    <div class="medicationsPage nhsPrescriptions referrerQuestionPage">

                        <div class="patientToggle">

                            <div class="questionWrap">

                                <div class="question">
                                    Are you looking to order on behalf of someone else?
                                </div>

                                <div class="questionFields">

                                    <div class="row">

                                        <div class="radioButtons">
                                            <input
                                                    id="ordering_for_patient_1"
                                                    type="radio"
                                                    name="ordering_for_patient"
                                                    value="referrer"
                                                    v-model="member_type_selected"
                                            />
                                            <label for="ordering_for_patient_1" class="radioButton">
                                                Yes
                                            </label>

                                            <input
                                                    id="ordering_for_patient_2"
                                                    type="radio"
                                                    name="ordering_for_patient"
                                                    value="patient"
                                                    v-model="member_type_selected"
                                            />
                                            <label for="ordering_for_patient_2" class="radioButton">
                                                No
                                            </label>

                                        </div> <!-- .radioButtons -->

                                    </div> <!-- .row -->

                                </div> <!-- .questionFields -->

                            </div> <!-- .questionWrap -->

                        </div> <!-- .patientToggle -->



                        <transition name="fade">

                            <div class="innerPatientWrap" v-if="(member_type_selected == 'referrer')">

                                <section class="checkboxList">

                                    <div class="highlightBox">Please select from the following</div>

                                    <div class="checkboxListWrap withTextHighlightBox">

                                        <div class="row">

                                            <div class="formInput">

                                                <input
                                                        id="is_hcp"
                                                        type="radio"
                                                        value="hcp"
                                                        v-model="referrer_type"
                                                />
                                                <label for="is_hcp">
                                                    I am a healthcare professional
                                                </label>

                                            </div> <!-- .formInput -->

                                        </div> <!-- .row -->

                                        <div class="row">

                                            <div class="formInput">

                                                <input
                                                        id="is_professional_carer"
                                                        type="radio"
                                                        value="professional_carer"
                                                        v-model="referrer_type"
                                                />
                                                <label for="is_professional_carer">
                                                    I work in a care home
                                                    <tooltip
                                                            title="I work in a care home"
                                                            content="This includes nurses and care home managers – if you’re ordering for a care home, this is the one for you!"
                                                            position="bottom"
                                                    ></tooltip>
                                                </label>

                                            </div> <!-- .formInput -->

                                        </div> <!-- .row -->

                                        <div class="row">

                                            <div class="formInput">

                                                <input
                                                        id="is_private_carer"
                                                        type="radio"
                                                        value="private_carer"
                                                        v-model="referrer_type"
                                                />
                                                <label for="is_private_carer">
                                                    I am a private carer
                                                    <tooltip
                                                            title="Private carer"
                                                            content="You are looking after a friend or family member."
                                                            position="bottom"
                                                    ></tooltip>
                                                </label>

                                            </div> <!-- .formInput -->

                                        </div> <!-- .row -->

                                    </div><!-- .checkboxListWrap -->

                                </section>


                            </div> <!-- .innerPatientWrap -->


                        </transition>

                    </div><!-- referrerQuationPage -->

                </div> <!-- .innerPageContent -->


                <div class="buttonWrapper">

                    <a
                            :href="patientButtonUrl"
                            @click="triggerTrackingEvent()"
                            class="next button"
                            :disabled="member_type_selected != 'patient'"
                            v-if="(member_type_selected != 'referrer')"
                    >Add prescription</a>

                    <a
                            :href="referrerButtonUrl"
                            @click="triggerTrackingEvent()"
                            class="next button"
                            :disabled="!referrer_type"
                            v-else-if="(member_type_selected == 'referrer')"
                    >Log in / Register</a>


                </div> <!-- .buttonWrapper -->

            </section>

        </div> <!-- .pages -->

    </section>


</template>


<script>

export default {

    props: [
        'patientButtonUrl',
        'referrerButtonBaseUrl',
    ],


    created: function() {
        window.ee.sendEvent('addToCart');
    },


    computed: {

        referrerButtonUrl: function() {
            let base_url = this.referrerButtonBaseUrl.split('?')[0];

            return base_url + "?nhs_referrer_type=" + this.referrer_type;
        },


        checkoutEventOption: function() {
            var option = this.member_type_selected;

            if (this.member_type_selected == 'referrer') {
                option += " (" + this.referrer_type + ")";
            }

            return option;
        },

    },


    methods: {

        triggerTrackingEvent: function() {
            window.ee.sendEvent('checkout', {
                stepName: 'prescription_created',
                option: this.checkoutEventOption,
            });
        }

    },


    data: function() {
        return {
            member_type_selected: '',
            referrer_type: '',
        }
    },


}

</script>
