{% extends "base.html" %}
{% block content %}
    <div class="wizard-step mx-auto">
        <h2 class="mb-4">AI Exam&nbsp;/ Test Suggestions</h2>
        <!-- short model narrative -->
        <p class="alert alert-info">{{ summary }}</p>
        <button type="button"
                class="btn btn-outline-primary mb-3"
                data-bs-toggle="modal"
                data-bs-target="#addExamModal">
            <i class="fs-5 bi bi-clipboard-plus"></i>
            Add Exam/Test
        </button>
        <form id="exams-form" method="post">
            <div class="text-danger mb-2">
                <span id="show-errors"></span>
            </div>
            <input type="hidden" name="sid" value="{{ sid }}" />
            <!-- checkbox list of suggested exams -->
            {% for option in options %}
                <div id="{{ option | replace(' ', '_') }}_diag" class="card mb-2 rounded">
                    <div class="card-header">
                        <div class="form-check">
                            <input class="form-check-input"
                                   data-bs-toggle="collapse"
                                   data-bs-target="#collapse{{ loop.index }}"
                                   type="checkbox"
                                   name="selected"
                                   value="{{ option }}"
                                   id="exam{{ loop.index }}" />
                            <label class="form-check-label" for="exam{{ loop.index }}">{{ option }}</label>
                        </div>
                    </div>
                    <div class="card-body collapse" id="collapse{{ loop.index }}">
                        <div class="row mb-4">
                            <div class="col">
                                <small class="text-secondary">Please, rate the suggested test below:</small>
                                <hr />
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-3">
                                <div class="d-flex flex-column">
                                    <label for="accuracy" class="text-primary form-label pl-3">Accuracy</label>
                                    <select name="{{ option }}--accuracy"
                                            id="{{ option | replace(' ', '_') }}-accuracy"
                                            class="form-select form-select-sm"
                                            aria-label="Accuracy Rating Select">
                                        <option disabled value="" selected>Not Rated</option>
                                        {% for i in range(0, 11) %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="d-flex flex-column">
                                    <label for="relevance" class="text-primary form-label pl-3">Relevance</label>
                                    <select name="{{ option }}--relevance"
                                            id="{{ option | replace(' ', '_') }}-relevance"
                                            class="form-select form-select-sm"
                                            aria-label="Relevance Rating Select">
                                        <option disabled value="" selected>Not Rated</option>
                                        {% for i in range(0, 11) %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="d-flex flex-column">
                                    <label for="usefulness" class="text-primary form-label pl-3">Usefulness</label>
                                    <select name="{{ option }}--usefulness"
                                            id="{{ option | replace(' ', '_') }}-usefulness"
                                            class="form-select form-select-sm"
                                            aria-label="Usefulness Rating Select">
                                        <option disabled value="" selected>Not Rated</option>
                                        {% for i in range(0, 11) %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="d-flex flex-column">
                                    <label for="coherence" class="text-primary form-label pl-3">Coherence</label>
                                    <select name="{{ option }}--coherence"
                                            id="{{ option | replace(' ', '_') }}-coherence"
                                            class="form-select form-select-sm"
                                            aria-label="Coherence Rating Select">
                                        <option disabled value="" selected>Not Rated</option>
                                        {% for i in range(0, 11) %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row mb-3">
                            <div class="col">
                                <div id="{{ option | replace(' ', '_') }}-safety">
                                    <div>
                                        <label for="safety" class="text-primary form-label pl-3">Safety</label>
                                        <small class="text-secondary">(Evaluates the suggested test safety.)</small>
                                        <div id="{{ option | replace(' ', '_') }}-safety-error"></div>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="{{ option }}--safety"
                                               data-radio-type="{{ option | replace(' ', '_') }}-safety"
                                               id="safe"
                                               value="safe" />
                                        <label class="form-check-label" for="safety">Safe</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="{{ option }}--safety"
                                               data-radio-type="{{ option | replace(' ', '_') }}-safety"
                                               id="needs-review"
                                               value="needs_review" />
                                        <label class="form-check-label" for="safety">Needs Review</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="{{ option }}--safety"
                                               data-radio-type="{{ option | replace(' ', '_') }}-safety"
                                               id="unsafe"
                                               value="unsafe" />
                                        <label class="form-check-label" for="safety">Unsafe</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label for="comments" class="text-primary  form-label">Comments</label>
                                    <textarea name="{{ option }}--comments"
                                              placeholder="Add any observations about the suggested diagnosis"
                                              class="form-control"
                                              id="comments"
                                              rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
            <button id="exams-next" class="btn btn-primary my-3">Finish</button>
        </form>
    </div>
    <!-- Modal Add Custom Diagnosis -->
    <div class="modal fade"
         id="addExamModal"
         tabindex="-1"
         aria-labelledby="addExamModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addExamModalLabel">Add Exam</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-secondary">
                        The model generates exams/tests suggestions based on the given input data. However, these outputs may not encompass all clinically plausible hypotheses. To improve diagnostic coverage, users may manually insert additional candidate conditions supported by their clinical evaluation.
                    </p>
                    <div>
                        <label class="form-label" for="custom-diagnosis">Exam/Test</label>
                        <input class="form-control" type="text" name="custom-exam" id="custom-exam" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button disabled id="add-custom-exam-button" class="btn btn-success">Add Exam</button>
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end modal add custom diagnosis -->
{% endblock %}
{% block scripts %}
    <script>
// when document is ready
document.addEventListener("DOMContentLoaded", () => {

    // get dianoses from jinja context
    const EXAMS = JSON.parse('{{ options | tojson | safe }}');

    // initialize just-validate instance
    const validator = new JustValidate('#exams-form', {
        validateBeforeSubmitting: true,
    });

    // check if at least one diagnosis is selected
    const atLeastOneOptionIsSelected = () => {
        const selectedOptions = document.querySelectorAll('input[type="checkbox"][name="selected"]');
        const customOptions = document.querySelectorAll('input[type="checkbox"][name="custom"]');


        if (customOptions.length > 0) { return true;}

        const isSelected = [...selectedOptions].some(checkbox => checkbox.checked);
        const errorMsgElement = document.getElementById('show-errors');

        if (isSelected) {
            // clean error msg in case it was previously shown
            errorMsgElement.innerText = '';
            return true;
        } else {
           // show error message
           errorMsgElement.innerText = 'Please select at least one suggested exam/test';
           return false;        }
    };

    // initialize array of diagnosis checkboxes
    // as an object with element (DOM) and diagnosis (name)
    const examsCheckboxes = EXAMS.map((diag, idx) => ({
        'element': document.getElementById(`exam${idx+1}`),
        'exam': diag.replaceAll(' ', '_'),
    }));

    // add event (change) listener to all diagnosis checkboxes
    examsCheckboxes.forEach(checkbox => {
        checkbox.element.addEventListener('change', () => {

            // map form fields DOM selectors
            const selectors = {
                'accuracy': `#${checkbox.exam}-accuracy`,
                'relevance': `#${checkbox.exam}-relevance`,
                'usefulness': `#${checkbox.exam}-usefulness`,
                'coherence': `#${checkbox.exam}-coherence`,
                'safety': `#${checkbox.exam}-safety`,
            };


            // when event triggers, check if dianosis was selected
            if (checkbox.element.checked) {

                console.debug(`"${checkbox.exam}" was selected. Binding validation rules...`);

                // add validation rules to all fields
                validator.addField(selectors.accuracy, [
                    { rule: 'required', errorMessage: 'Accuracy is required' }
                ]);

                validator.addField(selectors.relevance, [
                    { rule: 'required', errorMessage: 'Relevance is required' }
                ]);

                validator.addField(selectors.usefulness, [
                    { rule: 'required', errorMessage: 'Usefulness is required' }
                ]);

                validator.addField(selectors.coherence, [
                    { rule: 'required', errorMessage: 'Coherence is required' }
                ]);

                validator.addRequiredGroup(selectors.safety, 'Safety rating is required',{
                    errorsContainer: `#${checkbox.exam}-safety-error`,
                });



            // also checks if diagnosis was unselected
            } else if (!checkbox.element.checked) {

                // clean up validation form fields if diangnosis was unselected
                console.debug(`"${checkbox.exam}" was deselected. Removing validation rules...`);
                validator.removeField(selectors.accuracy);
                validator.removeField(selectors.relevance);
                validator.removeField(selectors.usefulness);
                validator.removeField(selectors.coherence);
                validator.removeGroup(selectors.safety);
            }
            // everytime a checkbox changes, check if at least one diagnosis is selected
            atLeastOneOptionIsSelected();
        })
    });

    validator.onSuccess((event) => {
        event.preventDefault();

        if (atLeastOneOptionIsSelected()) {
            // final check to validate if at least one diagnosis is selected
            console.debug('Validation passes and form submitted');
            event.target.submit();
        }

        console.debug('Form not valid');
    });

    validator.onFail((fields) => {
        console.debug('Validation failed:', fields);
    });


    // add user custom diagnosis
    const createCustomOptionCard = ({exam}) => {
        const examID = exam.replaceAll(' ', '-');

        const template = `
            <div id="${examID}" class="card mb-2 rounded">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                    <div class="form-check pe-none">
                        <input class="form-check-input" checked type="checkbox" name="custom" value="${exam}" id="custom-exam" />
                        <label class="form-check-label" for="custom-exam">${exam}</label>
                    </div>
                    <div>
                        <button onclick="this.closest('#${examID}').remove();" class="btn btn-sm btn-outline-danger" type="button">Delete</button>
                    </div>
                    </div>
                </div>
            </div>
        `;

        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = template.trim();
        const newNode = tempDiv.firstChild;

        const form = document.getElementById('exams-form');
        const button = form.querySelector('#exams-next');
        form.insertBefore(newNode, button);
    }

    // Handle Modal Add Diagnosis

    const customExamInput = document.getElementById('custom-exam');
    const addCustomExamButton = document.getElementById('add-custom-exam-button');

    customExamInput.addEventListener('keyup', (event) => {
        addCustomExamButton.disabled = event.target.value.trim().length === 0;
    });

    addCustomExamButton.addEventListener('click', () => {
        createCustomOptionCard({exam: customExamInput.value});
        customExamInput.value = '';
        addCustomExamButton.disabled = true;
        const modal = bootstrap.Modal.getInstance(document.getElementById('addExamModal'));

        modal.hide();
    })
});
    </script>
{% endblock %}