<template>

    <section>

        <div class="highlightBox highlightExempt">

            <div class="row" :class="[errors.is_pay_for_prescriptions ? 'errorWrap' : '']">

                <div class="inputWrap">

                    <input
                            type="checkbox"
                            id="prescription_paymanet_exemption"
                            name="prescription_paymanet_exemption"
                            v-model="data.is_pay_for_prescriptions"
                            :true-value="0"
                            :false-value="1"
                            @change="toggleExemptions"
                    >
                    <label for="prescription_paymanet_exemption">
                        <span v-html="text.exemptText"></span>
                        <i class="hoverFX"></i>
                    </label>

                </div> <!-- .inputWrap -->

                <div class="validationMessage" v-if="errors.is_pay_for_prescriptions" v-html="errors.is_pay_for_prescriptions"></div>

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

        </div><!-- .Highlight Box -->


        <div id="exemptionReasons" class="exemptionReasonsWrap" :class="[data.is_pay_for_prescriptions ? 'showExemptions' : '']">

            <div class="row" :class="[errors.pay_explanation ? 'errorWrap' : '']" v-for="(reason, exemptionKey) in exemption_reasons">

                <div class="inputWrap">

                    <input
                            :id="'exemption_' + exemptionKey"
                            type="radio"
                            name="exemption"
                            v-model="data.pay_explanation"
                            :value="reason"
                    />
                    <label :for="'exemption_' + exemptionKey">
                        <span v-html="reason"></span>
                        <i class="hoverFX"></i>
                    </label>

                </div> <!-- .inputWrap -->


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

            <div class="error" v-if="errors.pay_explanation" v-html="errors.pay_explanation">
            </div> <!-- .error -->

        </div> <!-- .excemptionReasonsWrap -->


        <div class="row" v-if="doShowExemptionReasons">
            <div class="datepickerWrap">

                <datepicker
                        class="datepicker"
                        v-model="data.exemption_expiry_date"
                        :options="{
                            dateFormat: 'dd/mm/yy',
                            altFormat: 'yy-mm-dd',
                            minDate: '0d',
                        }"
                        placeholder="Exemption expiry date"
                        id="nhs_member_exemption_expiry_date"
                ></datepicker>

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


    </section>

</template>



<script>

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

export default {

    props: [
        "data",
        "errors",
        "urlGetAvailableExemptionReasons",
    ],


    data: function() {
        return {
            exemption_reasons: [],
            text: {
                exemptText: config.get_string("page_4", "exemptText"),
            }
        }
    },


    mounted: function () {

        let $exemptions = $('#exemptionReasons');

        if ($exemptions.length && !this.is_pay_for_prescriptions) {
            $exemptions.show();
        }else{
            $exemptions.hide();
        }

        this.getExemptionReasons();
    },


    computed: {

        isExemptFromPaying: function() {
            return (!this.data.is_pay_for_prescriptions);
        },

        doShowExemptionReasons: function() {
            return this.isExemptFromPaying;
        },

    },

    watch: {
        data: function() {
            this.toggleExemptions();
        }
    },


    methods: {

        getExemptionReasons: function() {
            this.$http.get(this.urlGetAvailableExemptionReasons)
            .then(function (res) {
                if (res.data.exemption_reasons) {
                    this.exemption_reasons = res.data.exemption_reasons;
                }
            });
        },

        toggleExemptions: function() {
            var vm = this,
                $exemptions = $('#exemptionReasons');

            if ($exemptions.length) {

                if (!vm.data.is_pay_for_prescriptions) {
                    $exemptions.stop().slideDown(500);
                } else {
                    $exemptions.stop().slideUp(500);
                }
            }
        },

    }
}

</script>
