{% extends "layout.html" %}

{% block page_title %} Add medication {% endblock %}

{% block head %}
    {% include "includes/head.html" %}
    {% include "includes/scripts.html" %}
{% endblock %}

{% block after_header %}
    {{ banner.input() }}
{% endblock %}





{% block content %}
    <main id="content" role="main" tabindex="-1">
        <div class="grid-row" id="FEP8">
            <div class="column-two-thirds">
                <h1 class="heading-large">Your <span class="currentCondition"></span> medication</h1>

                <p>Tell us about your current <span class="currentCondition"></span> medication, as well as medication that you have now stopped taking</p>

                <div class="form-group medication">
                    <div id="medication" class="medication">

                    </div>
                </div>

                <div class="form-group">
                    <a class="bold-small" id="add" href="javascript:goInvisible('/epilepsy/medication/add')">Add more medication</a>
                </div>

                <div class="form-group" id="question">
                    <input id="continue" name="continue" class="button" type="button" value="I have finished providing medication" onclick="validate()">
                </div>
            </div>

            {% include "includes/widgets/need-help.html" %}
        </div>
    </main>
{% endblock %}





{% block body_end %}
    <script type="text/javascript">
        $('.currentCondition').html(getCurrentConditionName());

        // If no medication added yet, show different messages
        var medicationList = [];
        var orderedMedicationList = [];
        var medicationTable = "";

        generateMedicationTable();

        function validate() {
            var question = "Provide details of your " + getCurrentConditionName() + "  medication";

            var medicationPlayback = "<div class='medication'><div class='grid-row'><p>Medication</p></div>";

            var currentMedicationTotal = 0;

            orderedMedicationList.forEach(function(medication, index, array) {
                medicationPlayback += "<div class='grid-row'>";
                medicationPlayback += "<div class='column-half'><p><strong>" + medication.name + "</strong></p></div>";
                medicationPlayback += "<div class='column-half'><p>" + moment(medication.start).format("DD/MM/YYYY") + " – " + (medication.end !== undefined ? moment(medication.end).format('DD/MM/YYYY') : "Current") + "</p></div>";
                medicationPlayback += "</div>";

                if (medication.end === undefined) {
                    ++currentMedicationTotal;
                }
            });

            medicationPlayback += "</div>";

            addResponse("FEP", "8", question, orderedMedicationList, medicationPlayback, '/epilepsy/medication/your-medication'); 

            if (currentMedicationTotal > 0) {
                go('/epilepsy/confused-drowsy');
            } else {
                go('/epilepsy/regular-check-ups');
            }
        }

        function generateMedicationTable() {
            medicationTable = "";
            try {
                medicationList = responses["FEP"]["8"].response;

                orderedMedicationList = _(medicationList).chain().sortBy(function(medication) { return medication.start; }).sortBy(function(medication) { return medication.end; }).reverse().value();

                orderedMedicationList.forEach(function(medication, index) {
                    medicationTable += '<div class="grid-row"><div class="column-third"><p class="bold-xsmall">' + medication.name + '</p></div><div class="column-third"><p class="font-xsmall">' + moment(medication.start).format('DD/MM/YYYY') + ' – ' + (medication.end !== undefined ? moment(medication.end).format('DD/MM/YYYY') : "Current") + '</p></div><div class="column-third"><p class="bold-xsmall"><a href="javascript:change(' + index + ')">Change <a href="javascript:remove(' + index + ')">Remove</a></p></div></div>'
                });

                $('#medication').html(medicationTable);
                if (orderedMedicationList.length === 0) {
                    $('#add').html('Add medication');
                    $('#continue').val('I have never taken ' + getCurrentConditionName() + '  medication');
                }
            } catch (err) {
                $('#add').html('Add medication');
                $('#continue').val('I have never taken  ' + getCurrentConditionName() + '  medication');
            }
        }

        function remove(index) {
            if (confirm('Are you sure want to remove this medication?')) {
                orderedMedicationList.splice(index, 1);
                addResponse("FEP", "8", question, orderedMedicationList, "List", '/epilepsy/medication/your-medication'); // Make sure ordering changes are saved
                generateMedicationTable();
            }
        }

        function change(index) {
            addResponse("FEP", "8", question, orderedMedicationList, "List", '/epilepsy/medication/your-medication'); // Make sure ordering changes are saved for correct index
            goInvisible('/epilepsy/medication/edit?change=' + index);
        }
    </script>
{% endblock %}