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

{% block content %}

    {% set billing_address = member.addressBilling %}
    {% set shipping_address = member.addressShipping %}

    {% set billing_postcode_fields = {'postcode': billing_address.postcode, 'address_type': 'billing'} %}
    {% set shipping_postcode_fields = {'postcode': shipping_address.postcode, 'address_type': 'shipping'} %}

    <div class="pageWrap">

        {% include 'navigation/breadcrumbs.twig' with {

            members_area: true,
            breadcrumbs: [
                {
                    url: route('members-account', [], false),
                    name: 'Edit Details'
                }
            ]

        } %}


        <div class="contentPageWrap">


            <div class="contentWrap membersWrap">


                <div class="memberTopContainer">

                    {#
                    <div class="memberMenuContainer">
                        {% include 'navigation/member_menu.twig' %}
                    </div>
                    #}

                    <div class="greetingContainer">

                        <div class="greetingContainer nhsPrescriptionsContainer">

                            <div class="greetingContent">
                                <h1>NHS Prescriptions</h1>

                                <p>
                                    You can order your medications using the list below or select the 'add or edit' button to
                                    manage your medications. These will be added to your NHS Repeat profile.
                                </p>
                            </div>

                            <div class="backToAccount">
                                <a href="/members">
                                    <i class="fal fa-long-arrow-left"></i> Back to Account Page
                                </a>
                            </div>

                            <div class="contentWrap">

                                {% include 'messages.twig' %}

                                <nhs-prescriptions inline-template v-cloak>
                                    <div id="nhs-prescriptions">
                                        <form method="post" action="checkout.php" id="nhsPrescriptionsForm">
                                            <table class="alternating">
                                                <thead>
                                                <tr>
                                                    <th>Item</th>
                                                    <th>Prescription Quantity</th>
                                                    <th>Dosage</th>
                                                    <th v-if="editing">Frequency</th>
                                                    <th v-if="!editing">Current Prescription</th>
                                                    <th v-if="editing">Current Prescription<br />End Date</th>
                                                    <th v-if="!editing" class="prescriptionSeparator">New Prescription</th>
                                                    <th><span v-if="!editing">Order</span></th>
                                                    {% if is_admin %}
                                                        <th v-if="!editing"><span title="One-off prescriptions are temporary and will be removed from this list after placing the order">One-off</span></th>
                                                    {% endif %}
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-if="editing == false" v-for="item in prescriptions">
                                                    <td class="itemName">[% item.name %]</td>
                                                    <td class="quantity">[% item.quantity %]</td>
                                                    <td class="dose"><span v-if="item.quantity_per_dose > 0">[% item.quantity_per_dose %] x </span>[% item.dosage.name %]</td>
                                                    <td class="currentPresc">
                                        <span v-if="item.prescription_ends">
                                            <span v-if="item.has_ended" class="prescriptionEnded">Ended: [% item.prescription_ends %]</span>
                                            <span v-else>
                                                Ends: [% item.prescription_ends %]
                                                <br /><span v-bind:class="item.reorder_overdue ? 'red' : ''">Reorder: [% item.current_reorder_date %]</span>
                                            </span>
                                        </span>
                                                        <span v-else>-</span>
                                                    </td>
                                                    <td class="prescriptionSeparator">
                                                        Starts: [% item.new_prescription_starts %]<br />
                                                        Ends: [% item.new_prescription_ends %]
                                                    </td>
                                                    <td class="orderButton">
                                                        <div class="row">
                                                            <input type="checkbox"
                                                                   name="add_to_basket_order[]"
                                                                   v-bind:value="item.id"
                                                                   v-bind:id="'add_to_basket_order_' + item.id"
                                                                   @click="confirmDeliveryDate(item)"
                                                                   checked
                                                            />
                                                            <label v-bind:for="'add_to_basket_order_' + item.id"></label>
                                                        </div>
                                                    </td>
                                                    {% if is_admin %}
                                                        <td class="oneOff">
                                                            <div class="row">
                                                                <input type="checkbox"
                                                                       name="one_off_prescription[]"
                                                                       v-bind:value="item.id"
                                                                       v-bind:id="'one_off_prescription_' + item.id"
                                                                />
                                                                <label v-bind:for="'one_off_prescription_' + item.id"></label>
                                                            </div>
                                                        </td>
                                                    {% endif %}
                                                </tr>
                                                <tr v-if="editing == true" v-for="(item, key) in prescriptions" :key="'prescription' + key">
                                                    <td class="itemName">
                                                        <input type="text"
                                                               placeholder="Item Name"
                                                               v-model="item.name"
                                                               list="medication"
                                                               v-on:keyup="getMedications(item.name)"
                                                               @change="calculateExpiry(item)"
                                                        />
                                                    </td>
                                                    <td class="quantity">
                                                        <input type="number"
                                                               placeholder="Prescription Quantity"
                                                               v-model="item.quantity"
                                                               step="1"
                                                               @change="calculateExpiry(item)"
                                                        />
                                                    </td>
                                                    <td class="dose">
                                                        <input type="number"
                                                               placeholder="Dosage"
                                                               v-model="item.quantity_per_dose"
                                                               step="1"
                                                               @change="calculateExpiry(item)"
                                                        />
                                                    </td>
                                                    <td class="frequency">

                                                        <div class="inputWrap selectWrap">
                                                            <select class="no-chosen" v-model="item.dosage_id" @change="calculateExpiry(item)">
                                                                <option v-for="dosage in dosages" v-bind:value="dosage.id">[% dosage.name %]</option>
                                                                <option value="">Other</option>
                                                            </select>
                                                        </div> <!-- .inputWrap -->

                                                        <input v-model="item.dosage_other" v-if="item.dosage_id == ''">
                                                    </td>
                                                    <td class="currentPrescEndDate">
                                                        <input type="text"
                                                               placeholder="End Date"
                                                               v-model="item.prescription_ends"
                                                               v-date-picker/>
                                                    </td>
                                                    <td v-if="editing" class="delete">
                                                        <button @click="prescriptions.splice($index, 1)" class="button buttonDelete">
                                                            Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>

                                            <button class="button buttonAlt" v-if="!editing" @click="edit()">Add/Edit Medications</button>

                                            <div class="right" v-if="!editing && prescriptions.length > 0">
                                                <button type="button" class="button" v-nhs-confirm-overlay href="#nhsCheckoutNotification" data-no-ajax="true">
                                                    Confirm Order &amp; Checkout
                                                </button>
                                            </div>
                                            <input type="hidden" name="new_prescription_date" id="newPrescriptionDate" />
                                        </form>
                                        <button class="button buttonAlt" v-if="editing" @click="addBlank()">Add New</button>
                                        <button class="button right" v-if="editing" @click="save()">Save</button>

                                        <datalist id="medication">
                                            <option v-for="item in medications" value="[% item %]">[% item %]</option>
                                        </datalist>
                                    </div>
                                </nhs-prescriptions>


                                <form action="{{ self }}" method="post" class="clear clearfix">
                                    <div class="row checkboxRow">
                                        <input type="hidden"
                                               name="prescription_reminder_email"
                                               value="0"/>
                                        <input type="checkbox"
                                               id="prescription_reminder_email"
                                               name="prescription_reminder_email"
                                               value="1"
                                                {{ member.prescription_reminder_email ? 'checked' : '' }}/>
                                        <label for="prescription_reminder_email">
                                            Allow sending reminder emails in regards of prescriptions
                                        </label>
                                    </div>

                                    <div class="row checkboxRow">
                                        <input type="hidden"
                                               name="prescription_reminder_sms"
                                               value="0"/>
                                        <input type="checkbox"
                                               id="prescription_reminder_sms"
                                               name="prescription_reminder_sms"
                                               value="1"
                                                {{ member.prescription_reminder_sms ? 'checked' : '' }}/>
                                        <label for="prescription_reminder_sms">
                                            Allow sending reminder SMS in regards of prescriptions
                                        </label>
                                    </div>

                                    <button type="submit"
                                            class="button notifyButton"
                                            name="action"
                                            value="update_reminder_details">
                                        Update Reminder Settings
                                    </button>
                                </form>


                            </div> <!-- .contentWrap -->

                    </div>
                </div>

            </div> <!-- .membersWrap -->

        </div> <!-- .membersWrap -->

    </div> <!-- .pageWrap -->

        <div id="nhsCheckoutNotification" class="hideme">
            <div class="row nhsNotification">
                <h3>Please confirm when this prescription is needed</h3>
                <div class="row">
                    <input v-date-picker
                           name="dateRequired"
                           id="newPrescriptionDateField"
                           value="{{ min_order_date }}"
                           data-mindate="{{ min_order_date }}"
                           readonly
                    />
                    <label for="newPrescriptionDateField"><i class="fa fa-calendar"></i></label>
                </div>
                <p>All prescriptions may take up to 5 working days to arrive after you place your order. If you need your medication earlier than this please contact the pharmacy or your general practice directly.</p>
                <div class="row">
                    <button type="button" id="nhsCheckoutNotificationConfirm" class="button">Continue</button>
                    <button type="button" id="nhsCheckoutNotificationCancel" class="buttonAlt buttonGreyed">Cancel</button>
                </div>
            </div>
        </div>

{% endblock %}
