{% extends "base.html" %}
{% block content %}
    <div class="wizard-step mx-auto">
        <h2 class="mb-4">AI Differential Diagnosis</h2>
        <p class="alert alert-info">{{ summary }}</p>
        <button type="button"
                class="btn btn-outline-primary mb-3"
                data-bs-toggle="modal"
                data-bs-target="#addDiagnosisModal">
            <i class="fs-5 bi bi-clipboard-plus"></i>
            Add Diagnosis
        </button>
        <form id="diagnosis-form" method="post">
            <div class="text-danger mb-2">
                <span id="show-errors"></span>
            </div>
            <input type="hidden" name="sid" value="{{ sid }}" />
            {% 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="opt{{ loop.index }}" />
                            <label class="form-check-label" for="opt{{ 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 diagnosis 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">
                            <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="diagnosis-next" class="btn btn-primary my-3">Next</button>
        </form>
    </div>
    <!-- Modal Add Custom Diagnosis -->
    <div class="modal fade"
         id="addDiagnosisModal"
         tabindex="-1"
         aria-labelledby="addDiagnosisModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addDiagnosisModalLabel">Add Diagnosis</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 diagnostic 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">Diagnosis</label>
                        <input class="form-control"
                               type="text"
                               name="custom-diagnosis"
                               id="custom-diagnosis" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button disabled id="add-custom-diagnosis-button" class="btn btn-success">Add Diagnosis</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 DIAGNOSES = JSON.parse('{{ options | tojson | safe }}');

    // initialize just-validate instance
    const validator = new JustValidate('#diagnosis-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 diagnosis';
           return false;        }
    };

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

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

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


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

                console.debug(`"${checkbox.diagnosis}" 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' }
                ]);


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

                // clean up validation form fields if diangnosis was unselected
                console.debug(`"${checkbox.diagnosis}" was deselected. Removing validation rules...`);
                validator.removeField(selectors.accuracy);
                validator.removeField(selectors.relevance);
                validator.removeField(selectors.usefulness);
                validator.removeField(selectors.coherence);
            }

            // 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 = ({diagnosis}) => {
        const diagnosisID = diagnosis.replaceAll(' ', '-');

        const template = `
            <div id="${diagnosisID}" 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="${diagnosis}" id="custom-diagnosis" />
                        <label class="form-check-label" for="custom-diagnosis">${diagnosis}</label>
                    </div>
                    <div>
                        <button onclick="this.closest('#${diagnosisID}').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('diagnosis-form');
        const button = form.querySelector('#diagnosis-next');
        form.insertBefore(newNode, button);
    }

    // Handle Modal Add Diagnosis

    const customDiagnosisInput = document.getElementById('custom-diagnosis');
    const addCustomDiagnosisButton = document.getElementById('add-custom-diagnosis-button');

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

    addCustomDiagnosisButton.addEventListener('click', () => {
        createCustomOptionCard({diagnosis: customDiagnosisInput.value});
        customDiagnosisInput.value = '';
        addCustomDiagnosisButton.disabled = true;
        const modal = bootstrap.Modal.getInstance(document.getElementById('addDiagnosisModal'));

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