<template>

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

    <div class="prescriptionsLoading" :class="[loading ? 'isLoading' : '']">

        <div class="loadingIcon">
            <picture class="imageWrap">
                <img src="/sites/default/images/logo.png" alt="Logo">
            </picture>
            <div class="loadingText" v-html="loadingText"></div>
        </div> <!-- .loadingIcon -->

    </div> <!-- .prescriptionsLoading -->



    <a id="confirmOverlayButton" href="#confirmOverlay" data-no-ajax="true" v-show="false"></a>
    <div id="confirmOverlay" class="popupContent">
        <div class="innerPopupContent wysiwyg">
            <h2 class="mainPopuheader">Thanks - we got it!</h2>
            <p v-html="text.confirmPopupText"></p>
        </div> <!-- .innerPopupContent -->
    </div>



    <div class="pages">


        <section>

            <div class="pageHeading">

                <div class="iconWrap">
                    <div class="icon">
                        <img src="/sites/default/images/svgs/doctor.svg" />
                    </div> <!-- .icon -->
                </div> <!-- .iconWrap -->
                <h2>Confirm</h2>
                <p>All pending prescriptions:</p>

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


            <div class="innerPageContent" :class="[loading ? 'isLoading' : '']">


                <div class="medicationsPage nhsPrescriptions">

                    <section v-if="prescriptions.length > 0">

                        <div class="prescriptionBasketWrap" v-for="prescription in prescriptions">

                            <div class="membersInfoBox">

                                <div class="membersInfoWrap">

                                    <div class="infoSection infoName">
                                        <span class="titles">Name:</span>
                                        <span class="details" v-text="prescription.nhs_member.firstname + ' ' + prescription.nhs_member.lastname"></span>
                                    </div> <!-- .infoName -->

                                    <div class="infoSection infoRef">
                                        <span class="titles">Ref:</span>
                                        <span class="details" v-text="prescription.nhs_member.member_id + '/' + prescription.nhs_member.id"></span>
                                    </div> <!-- .infoRef -->

                                    <div class="infoSection infoNhsNumber">
                                        <span class="titles">NHS no.:</span>
                                        <span class="details" v-text="prescription.nhs_member.nhs_number"></span>
                                    </div> <!-- .infoName -->

                                </div> <!-- .membersInfoWrap -->

                            </div> <!-- .membersInfoBox -->


                            <table class="prescriptionBasket">
                                <tr>
                                    <th class="itemName">Item</th>
                                    <th class="itemQty">Qty</th>
                                    <th class="itemCost">Cost</th>
                                </tr>
                                <tr v-for="prescription_item in prescription.items">

                                    <td v-html="prescription_item.name"></td>

                                    <td v-html="prescription_item.quantity"></td>

                                    <td>

                                       <span class="itemTotal" v-html="prescription_item.price.payable || '0.00'"></span>


                                    </td>

                                </tr>

                            </table>

                            <div class="deliveryRow">

                                <div class="colLeft">
                                    Delivery
                                </div> <!-- .colLeft -->

                                <div class="colRight" v-html="prescription.delivery_method.cost || '0.00'" v-if="prescription.delivery_method">

                                </div> <!-- .colRight -->

                                <div class="colRight" v-html="'FREE'" v-else>

                                </div> <!-- .colRight -->

                            </div> <!-- .deliveryRow -->

                            <div class="totalsRow">

                                <div class="colLeft">
                                    Total
                                </div> <!-- .colLeft -->

                                <div class="colRight" v-text="prescription.payment_totals.payable">
                                </div> <!-- .colRight -->

                            </div> <!-- .totalsRow -->


                            <div class="buttonWrapper bottomOrderButtons">

                                <button class="button prev" type="button"
                                        @click="removePrescriptionFromBasket(prescription.uuid)"
                                >Submit Later
                                </button>

                                <a :href="prescription.edit_url"
                                   class="button next"
                                >Edit</a>

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


                        </div> <!-- .prescriptionBasketWrap -->


                    </section>

                    <section v-else>

                        No more prescriptions pending submission.

                    </section>

                </div>

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


            <div
                    class="newPrescriptionOptions">

                <!-- Disabled -->

                <div class="innerPrescriptionOpts">

                    <span class="helperText" v-html="text.newPrescriptionText"></span>

                    <a
                            :href="urlNhsPrescriptionsCreate"
                            rel="+ new prescription"
                            class="button buttonOutlined newOrderButton"
                    ><i class="fal fa-plus"></i>
                        <span v-html="text.newPrescriptionButtonText"></span>
                    </a>
                </div> <!-- .innerPrescriptionOpts -->


            </div> <!-- .newPrescriptionOptions -->


            <div
                    class="buttonWrapper footerButtonWrapper"
            >

                <a
                        :href="urlAbort"
                        class="button prev"
                        v-text="textAbort"
                ></a>

                <a
                        class="button next"
                        v-text="textSubmit"
                        @click="submitPrescriptions()"
                        v-if="prescriptions.length > 0"
                ></a>

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



        </section>

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


    </section>

</template>


<script>

import config from '../../../../plugins/NHS/js/components/config.js';

export default {

    props: [
        "urlSubmit",
        "urlAbort",
        "textSubmit",
        "textAbort",
        "urlGetPrescriptions",
        "urlNhsPrescriptionsCreate",
        "memberType"
    ],


    data: function () {
        return {
            loading: false,
            loadingText: 'Loading',
            prescriptions: [],
            text: {
                newPrescriptionText: '',
                newPrescriptionButtonText: '',
                confirmPopupText: config.get_string("page_5", "confirmPopupText"),
            },
            pages: [
                {
                    navTitle: config.get_string("page_5", "navTitle"),
                    navSubtitle: config.get_string("page_5", "navSubtitle")
                }
            ],
            currentPage: 0
        };
    },


    created: function () {

        window.ee.sendEvent('checkout', {
            stepName: 'landed_on_confirm_page',
        });

        config.setMemberType(this.memberType);
        this.updateConfigText();

        this.fetchPrescriptions();

        EventBus.$emit('initSidebarNav', this.pages, this.currentPage);

        EventBus.$on('set_page', function(pageNum) {
            if (vm.allowSetPage) {
                vm.currentPage = pageNum;
            }
        });


    },


    methods: {

        updateSidebar: function() {
            EventBus.$emit('updateSidebarNav', this.currentPage);
        },

        updateConfigText: function() {
            for(var i in this.text) {
                this.text[i] = config.get_string("page_5", i);
            }

            this.pages[0].navTitle = config.get_string("page_5", "navTitle");
            this.pages[0].navSubtitle = config.get_string("page_5", "navSubtitle");
        },

        setPrescriptions: function(data) {
            this.prescriptions = data;
        },


        fetchPrescriptions: function() {
            this.loading = true;

            this.$http.get(this.urlGetPrescriptions, {
                //
            })
            .then(function (res) {
                this.setPrescriptions(res.data.prescriptions);
                this.loading = false;
            })
            .catch(function(error) {
                this.loading = false;
            });
        },


        removePrescriptionFromBasket: function(uuid) {
            let remaining_prescriptions = [];

            for (let i = 0; i < this.prescriptions.length; i++) {

                if (this.prescriptions[i].uuid != uuid) {
                    remaining_prescriptions.push(this.prescriptions[i]);
                }
            }

            this.setPrescriptions(remaining_prescriptions);
        },


        submitPrescriptions: function() {

            this.loading = true;

            this.$http.post(this.urlSubmit, {
                prescriptions: this.prescriptions.map(p => p.uuid),
            })
            .then(function (res) {

                if (res.data.redirect) {

                    window.location = res.data.redirect;
                    return;

                } else {

                    window.ee.sendEvent('purchase', {
                        orderIDs: res.data.order_ids,
                    });

                    let vm = this;

                    $(function() {
                        $("#confirmOverlayButton").mtcOverlay({
                            content_class: '',
                            max_width: 600,
                            margin_vertical: 5,
                            margin_horizontal: 5,
                            onClose: function() {
                                vm.fetchPrescriptions();
                            },
                        });
                    });
                    $("#confirmOverlayButton").click();

                }

            })
            .catch(function(error) {
                this.loading = false;
            });
        },

    }

}

</script>
