new_participant.jinja2

{% extends "sitebase.jinja2" %}
{% set page_title = _("Consent") %}
{% set show_breadcrumbs = True %}
{% block head %}
<script type="text/javascript" src="/static/vendor/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/vendor/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="/static/vendor/js/jquery.validate.min.js"></script>
<script type="text/javascript">
    function change_consent_div(radio) {
        $("#0-6-div").hide();
        $("#7-12-div").hide();
        $("#13-17-div").hide();
        $("#18-plus-div").hide();
        {% if age_range == 'legacy' %}
        $("#legacy-cancel-div").hide();
        {% endif %}
        $("#"+ radio.value +"-div").show();
    }

    function goHome() {
        {% if source_id is not none %}
            {% if reconsent is not none %}
                    window.location.replace("/accounts/{{ account_id |e }}/sources/{{ source_id |e }}/decline_reconsent");
            {% else %}
                {% if form_type == "biospecimen" %}
                    window.location.replace("/accounts/{{ account_id |e }}/sources/{{ source_id |e }}/kits");
                {% else %}
                    window.location.replace("/accounts/{{ account_id |e }}/sources/{{ source_id |e }}");
                {% endif %}
            {% endif %}
        {% else %}
            window.location.replace("/accounts/{{ account_id |e }}");
        {% endif %}
    }

    $(document).ready(function(e) {
        $("#0-6-div").hide();
        $("#7-12-div").hide();
        $("#13-17-div").hide();
        $("#18-plus-div").hide();

        {% if age_range is not none %}
        $("#{{ age_range }}-div").show();
        {% endif %}

        disableInputOnSubmit("#0-6-form", "#0-6-submit_button", "{{ _('Saving...') }}");
        disableInputOnSubmit("#7-12-form", "#7-12-submit_button", "{{ _('Saving...') }}");
        disableInputOnSubmit("#13-17-form", "#13-17-submit_button", "{{ _('Saving...') }}");
        disableInputOnSubmit("#18-form", "#18-submit_button", "{{ _('Saving...') }}");

        $("#home_page").click(function(){
            window.open('{{home_url}}', '_self')
        })

        $("#create_source").click(function(){
            $("#"+$(this).attr('form_id'))[0].submit();
        })

        preventImplicitSubmission("0-6-form");
        preventImplicitSubmission("7-12-form");
        preventImplicitSubmission("13-17-form");
        preventImplicitSubmission("18-form");

        // Validation for 0 - 6 form
        $("#0-6-form").validate({
            rules: {
                consent_parent: "required",
                participant_name: "required",
                parent_1_name: "required",
                submitHandler: function(form) {
                    form.submit();
                }
            },
            messages: {
                consent_parent: "{{ _('Please confirm that you have read this form.') }}",
                participant_name: "{{ _('Please enter the participant name.') }}",
                parent_1_name: "{{ _('Please enter the parent or guardian name.') }}"
            }
        });

        // Validation for 7 - 12 form
        $("#7-12-form").validate({
            rules: {
                consent_child: "required",
                participant_name: "required",
                consent_witness: "required",
                assent_obtainer: "required",
                consent_parent: "required",
                parent_1_name: "required",
                submitHandler: function(form) {
                    form.submit();
                }
            },
            messages: {
                consent_child: "{{ _('Please confirm that you will be in this study.') }}",
                participant_name: "{{ _('Please enter the participant name.') }}",
                consent_witness: "{{ _('Please confirm that the participant is voluntarily and knowingly giving consent.') }}",
                assent_obtainer: "{{ _('Please enter the name of the person obtaining assent.') }}",
                consent_parent: "{{ _('Please confirm that you have read this form.') }}",
                parent_1_name: "{{ _('Please enter the parent or guardian name.') }}"
            }
        });

        // Validation for 13 - 17 form
        $("#13-17-form").validate({
            rules: {
                consent_child: "required",
                participant_name: "required",
                consent_parent: "required",
                parent_1_name: "required",
                submitHandler: function(form) {
                    form.submit();
                }
            },
            messages: {
                consent_child: "{{ _('Please confirm that you have read this form.') }}",
                participant_name: "{{ _('Please enter the participant name.') }}",
                consent_parent: "{{ _('Please confirm that you have read this form.') }}",
                parent_1_name: "{{ _('Please enter the parent or guardian name.') }}"
            }
        });

        // Validation for 18+ form
        $("#18-form").validate({
            rules: {
                consent: "required",
                participant_name: "required",
                submitHandler: function (form) {
                    form.submit();
                }
            },
            messages: {
                consent: "{{ _('Please confirm that you have read this form.') }}",
                participant_name: "{{ _('Please enter the participant name.') }}"
            },
        });

        $("#0-6-form, #7-12-form, #13-17-form, #18-form").submit(function(e){
            e.preventDefault();
            $form_id = $(this).attr('id');
            $form_name = $('#' + $form_id);
            switch($form_id) {
                case "0-6-form":
                    $submit_button = $('#0-6-submit_button');
                    break;
                case "7-12-form":
                    $submit_button = $('#7-12-submit_button');
                    break;
                case "13-17-form":
                    $submit_button = $('#13-17-submit_button');
                    break;
                case "18-form":
                    $submit_button = $('#18-submit_button');
                    break;
            }

            if($form_name.valid()) {
                var duplicate_source_check_msg = "{{ _('It looks like you are creating a new profile that may be similar or the same as an existing profile. If this is the same person as an existing profile, please consider providing new samples or survey responses under that profile.') }}"
                var skip_dupe_check = "{{ skip_dupe_check |e }}";

                if(skip_dupe_check == false) {
                    var name = $('#'+$form_id+'_participant_name').val();
                    $.ajax({
                        url: '{{ duplicate_source_check }}',
                        data:JSON.stringify({participant_name:name}),
                        contentType:"application/json",
                        type: 'POST',
                        success: function(response){
                            if(response.error !== undefined){
                                alert(response.error)
                            }
                            if(response.source_duplicate){
                                $("#source_msg").empty();
                                $("#source_msg").text(duplicate_source_check_msg);
                                $("#source_modal").modal('show');
                                $("#create_source").attr("form_id", $form_id);
                                $submit_button.attr("value", "{{ _('I Accept') }}")
                                $submit_button.prop("disabled", false)
                            } else if (response.error === undefined && !response.source_duplicate) {
                                $("#"+$form_id)[0].submit();
                            }
                        },
                        error: function(error){
                            console.log(error);
                        }
                    });
                } else {
                    $("#"+$form_id)[0].submit();
                }
            } else {
                $submit_button.attr("value", "{{ _('I Accept') }}")
                $submit_button.prop("disabled", false)
            }
         });
    });
</script>
<style>
.required-field {
    color: red;
    display: inline-block;
}
</style>
{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="/accounts/{{account_id}}">{{ _('Dashboard') }}</a></li>
    {% if form_type == "biospecimen" %}
        <li class="breadcrumb-item active" aria-current="page">{{ _('Biospecimen Consent Form') }}</li>
    {% else %}
        <li class="breadcrumb-item active" aria-current="page">{{ _('Data Consent Form') }}</li>
    {% endif %}
{% endblock %}

{% block content%}

<div class="container default-container">
    {% if reconsent is not none %}
        <div id="consent_alert" class="alert alert-consent" role="alert">
            <strong>{{ _('Your consent is needed to proceed.') }}</strong><br />
            {{ _('We\'ve made some changes to the project since you last logged in, including an update to our consent agreement. To proceed, please provide your updated consent.') }}
        </div>
    {% endif %}
    {% if form_type == "biospecimen" %}
        <div class="row mb-4">
            <div class="col-12 biospecimen-alert">
                {{ _('Signature and agreement of this consent form is required to process your sample(s).') }}
            </div>
        </div>
    {% else %}
        <div class="row mb-4">
            <div class="col-12 biospecimen-alert">
                {{ _('Signature and agreement of this consent form is required to update your information.') }}
            </div>
        </div>
    {% endif %}
    {% if age_range is not none and age_range != 'legacy' %}
        <input type="hidden" name="age-range" value="{{ age_range }}" />
    {% else %}
    <div class="row">
        <div class="col-12">
            <strong>{{ _('Select age range of participant') }}</strong>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md">
            <input type="radio" id="age-range-1" name="age-range" value="0-6" onchange="change_consent_div(this)">
            <label for="age-range-1" class="consent-age-label">{{ tl['PARTICIPANT_FORM']['AGE_0_6'] |e}}</label>
        </div>
        <div class="col-md">
            <input type="radio" id="age-range-2" name="age-range" value="7-12" onchange="change_consent_div(this)">
            <label for="age-range-2" class="consent-age-label">{{ tl['PARTICIPANT_FORM']['AGE_7_12'] |e}}</label>
        </div>
        <div class="col-md">
            <input type="radio" id="age-range-3" name="age-range" value="13-17" onchange="change_consent_div(this)">
            <label for="age-range-3" class="consent-age-label">{{ tl['PARTICIPANT_FORM']['AGE_13_17'] |e}}</label>
        </div>
        <div class="col-md">
            <input type="radio" id="age-range-4" name="age-range" value="18-plus" onchange="change_consent_div(this)">
            <label for="age-range-4" class="consent-age-label">{{ tl['PARTICIPANT_FORM']['AGE_18'] |e}}</label>
        </div>
    </div>
    {% endif %}



{% if language_tag != "ja_JP" %}
<div id="0-6-div">
    <form id="0-6-form" name="consent_info" action="{{ post_url }}" method="post">
    <input type="hidden" name="sample_ids" value="{{ sample_ids }}">
    <input type="hidden" name="age_range" value="0-6">
    <div class='consent-scroll-text'>
    {% for doc in tl['CONSENT_DOCS'] %}
        {% if doc['consent_type'] == 'parent_' + form_type %}
            {{ doc['document'] }}
            <input type="hidden" name="consent_id" value="{{ doc['consent_id'] }}">
            <input type="hidden" name="consent_type" value="{{ doc['consent_type'] }}">
        {% endif %}
    {% endfor %}
    </div>
    <div class="mt-2 consent-form-text" id="consent">
        <a href="{{ _('https://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf') }}" target="_blank">{{ tl['PARTICIPANT_FORM']['BILL_OF_RIGHTS']|e}}</a><br/>
        <p>
            <input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_PARENT'] |e}}<br />
            <label for="consent_parent" class="error" style="display: none;">{{ _('Please confirm that you have read this form.') }}</label>
        </p>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="consent-form-label" for="participant_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_NAME'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="2" type="text" name="participant_name" id="0-6-form_participant_name" required data-rule-required="true" class="consent-form-input" {% if participant_name != None %}value="{{ participant_name }}" readonly {% endif %}>
            <label for="participant_name" class="error" style="display: none;">{{ _('Please enter the participant name.') }}</label>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="consent-form-label" for="parent_1_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_PARENT_1'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="7" type="text" name="parent_1_name" id="0-6-form_parent_1_name" required data-rule-required="true" class="consent-form-input">
            <label for="parent_1_name" class="error" style="display: none;">{{ _('Please enter the parent or guardian name.') }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <input type="button" id="cancel_button" value="{{ _('Cancel') }}" class="btn btn-white-blue-border me-4" onClick="goHome()">
            <input type="submit" id="0-6-submit_button" value="{{ _('I Accept') }}" class="btn btn-blue-gradient">
        </div>
    </div>
    </form>
</div>

<!------------------------------- CONSENT/ASSENT FOR AGE 7-12 STARTS HERE --------------------------------------------->
<div id="7-12-div">
    <form id="7-12-form" name="consent_info" action="{{ post_url }}" method="post">
    <input type="hidden" name="sample_ids" value="{{ sample_ids }}">
    <input type="hidden" name="age_range" value="7-12">
    <div class="consent-scroll-text">
        {% for doc in tl['CONSENT_DOCS'] %}
            {% if doc['consent_type'] == 'child_' + form_type %}
                {{ doc['document'] }}
                <input type="hidden" name="assent_id" value="{{ doc['consent_id'] }}" />
            {% endif %}
        {% endfor %}
    </div>
    <div class="mt-2 consent-form-text">
        <p>
            <input value="Yes" type="checkbox" name="consent_child" id="consent_child" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_SIMPLIFIED'] |e}}<br />
            <label for="consent_child" class="error" style="display: none;">{{ _('Please confirm that you will be in this study.') }}</label>
        </p>
    </div>
    <div class="row mb-2">
        <div class="col-md-6">
            <label class="consent-form-label" for="participant_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_NAME'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="2" type="text" name="participant_name" id="7-12-form_participant_name" required data-rule-required="true" class="consent-form-input" {% if participant_name != None %}value="{{ participant_name }}" readonly {% endif %}>
            <label for="participant_name" class="error" style="display: none;">{{ _('Please enter the participant name.') }}</label>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-12">
            <strong>{{ tl['PARTICIPANT_FORM']['PERSON_ATTAINING_ASSENT'] |e}}</strong>
        </div>
    </div>
    <div class="mt-2 consent-form-text">
        <p>
            <input value="Yes" type="checkbox" name="consent_witness" id="consent_witness" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_ASSENT_WITNESS'] |e}}<br />
            <label for="consent_witness" class="error" style="display: none;">{{ _('Please confirm that the participant is voluntarily and knowingly giving consent.') }}</label>
        </p>
    </div>
    <div class="row mb-4">
        <div class="col-md-6">
            <label class="consent-form-label" for="assent_obtainer">
                {{ tl['PARTICIPANT_FORM']['ASSENT_OBTAINER'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="3" type="text" name="assent_obtainer" id="assent_obtainer" required data-rule-required="true" class="consent-form-input">
            <label for="assent_obtainer" class="error" style="display: none;">{{ _('Please enter the name of the person obtaining assent.') }}</label>
        </div>
    </div>

    <div class="consent-scroll-text">
        {% for doc in tl['CONSENT_DOCS'] %}
            {% if doc['consent_type'] == 'parent_' + form_type %}
                {{ doc['document'] }}
                <input type="hidden" name="consent_id" value="{{ doc['consent_id'] }}" />
                <input type="hidden" name="consent_type" value="{{ doc['consent_type'] }}" />
            {% endif %}
        {% endfor %}
    </div>
    <div class="mt-2 consent-form-text" id="consent">
        <a href="{{ _('https://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf') }}" target="_blank">{{ tl['PARTICIPANT_FORM']['BILL_OF_RIGHTS']|e}}</a><br/>
        <p>
            <input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_PARENT'] |e}}<br />
            <label for="consent_parent" class="error" style="display: none;">{{ _('Please confirm that you have read this form.') }}</label>
        </p>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="consent-form-label" for="parent_1_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_PARENT_1'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="7" type="text" name="parent_1_name" id="7-12-form_parent_1_name" required data-rule-required="true" class="consent-form-input">
            <label for="parent_1_name" class="error" style="display: none;">{{ _('Please enter the parent or guardian name.') }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <input type="button" id="cancel_button" value="{{ _('Cancel') }}" class="btn btn-white-blue-border me-4" onClick="goHome()">
            <input type="submit" id="7-12-submit_button" value="{{ _('I Accept') }}" class="btn btn-blue-gradient">
        </div>
    </div>
    </form>
</div>

<!------------------------------- CONSENT/ASSENT FOR AGE 13-17 STARTS HERE --------------------------------------------->

<div id="13-17-div">
    <form id="13-17-form" name="13-17-form" action="{{ post_url }}" method="post">
    <input type="hidden" name="sample_ids" value="{{ sample_ids }}">
    <input type="hidden" name="age_range" value="13-17">
    <div class="consent-scroll-text">
        {% for doc in tl['CONSENT_DOCS'] %}
            {% if doc['consent_type'] == 'adolescent_' + form_type %}
                {{ doc['document'] }}
                <input type="hidden" name="assent_id" value="{{ doc['consent_id'] }}" />
            {% endif %}
        {% endfor %}
    </div>

    <div class="mt-2 consent-form-text">
        <p>
            <input value="Yes" type="checkbox" name="consent_child" id="13-17-form-consent_child" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_1'] |e}}<br />
            <label for="consent_child" class="error" style="display: none;">{{ _('Please confirm that you have read this form.') }}</label>
        </p>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="consent-form-label" for="participant_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_NAME'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="2" type="text" name="participant_name" id="13-17-form_participant_name" required data-rule-required="true" class="consent-form-input" {% if participant_name != None %}value="{{ participant_name }}" readonly {% endif %}>
            <label for="participant_name" class="error" style="display: none;">{{ _('Please enter the participant name.') }}</label>
        </div>
    </div>

    <div class="consent-scroll-text">
        {% for doc in tl['CONSENT_DOCS'] %}
            {% if doc['consent_type'] == 'parent_' + form_type %}
                {{ doc['document'] }}
                <input type="hidden" name="consent_id" value="{{ doc['consent_id'] }}" />
                <input type="hidden" name="consent_type" value="{{ doc['consent_type'] }}" />
            {% endif %}
        {% endfor %}
    </div>

    <div class="mt-2 consent-form-text" id="consent">
        <a href="{{ _('https://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf') }}" target="_blank">{{ tl['PARTICIPANT_FORM']['BILL_OF_RIGHTS']|e}}</a><br/>
        <p>
            <input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_PARENT'] |e}}<br />
            <label for="consent_parent" class="error" style="display: none;">{{ _('Please confirm that you have read this form.') }}</label>
        </p>
    </div>
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="consent-form-label" for="parent_1_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_PARENT_1'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="7" type="text" name="parent_1_name" id="13-17-form_parent_1_name" required data-rule-required="true" class="consent-form-input">
            <label for="parent_1_name" class="error" style="display: none;">{{ _('Please enter the parent or guardian name.') }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <input type="button" id="cancel_button" value="{{ _('Cancel') }}" class="btn btn-white-blue-border me-4" onClick="goHome()">
            <input type="submit" id="13-17-submit_button" value="{{ _('I Accept') }}" class="btn btn-blue-gradient">
        </div>
    </div>
    </form>
</div>
{% endif %}

<!------------------------------- CONSENT/ASSENT FOR AGE 18 AND ABOVE STARTS HERE --------------------------------------------->

<div id="18-plus-div">
    <form id="18-form" name="18-form" action="{{post_url}}" method="post">
    <input type="hidden" name="sample_ids" value="{{ sample_ids }}">
    <div class='consent-scroll-text'>
    <input type="hidden" name="age_range" value="18-plus">
        {% for doc in tl['CONSENT_DOCS'] %}
            {% if doc['consent_type'] == 'adult_' + form_type %}
                {{ doc['document'] }}
                <input type="hidden" name="consent_id" value="{{ doc['consent_id'] }}">
                <input type="hidden" name="consent_type" value="{{ doc['consent_type'] }}">
            {% endif %}
        {% endfor %}
    </div>
    <div class="mt-2 consent-form-text" id="consent">
        <a href="{{ _('https://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf') }}" target="_blank">{{ tl['PARTICIPANT_FORM']['BILL_OF_RIGHTS']|e}}</a><br/>
        <p>
            <input value="Yes" type="checkbox" name="consent" id="age18_consent" required data-rule-required="true"> * {{ tl['PARTICIPANT_FORM']['TEXT_I_HAVE_READ_1'] |e}}<br />
            <label for="consent" class="error" style="display: none;">{{ _('Please confirm that you have read this form.') }}</label>
        </p>
    </div>
    <div class="row mb-4">
        <div class="col-md-6">
            <label class="consent-form-label" for="participant_name">
                {{ tl['PARTICIPANT_FORM']['PARTICIPANT_NAME'] |e}} *
            </label>
        </div>
        <div class="col-md-6">
            <input tabindex="2" type="text" name="participant_name" id="18-form_participant_name" required data-rule-required="true" class="consent-form-input" {% if participant_name != None %}value="{{ participant_name }}" readonly {% endif %}>
            <label for="participant_name" class="error" style="display: none;">{{ _('Please enter the participant name.') }}</label>
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <input type="button" id="cancel_button" value="{{ _('Cancel') }}" class="btn btn-white-blue-border me-4" onClick="goHome()">
            <input type="submit" id="age18-submit_button" value="{{ _('I Accept') }}" class="btn btn-blue-gradient">
        </div>
    </div>
    </form>
</div>

{% if age_range == 'legacy' %}
<div id="legacy-cancel-div">
    <div class="row">
        <div class="col-12 text-center">
            <input type="button" id="cancel_button" value="{{ _('Cancel') }}" class="btn btn-white-blue-border me-4" onClick="goHome()">
        </div>
    </div>
</div>
{% endif %}

<!-- Modal -->
<div class="modal fade" id="source_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ _('Warning') }}</h5>
      </div>
      <div class="modal-body">
        <p id="source_msg"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-white-blue-border" id="home_page">{{ _('Return to Home Page') }}</button>
        <button type="button" class="btn btn-blue-gradient" id="create_source">{{ _('Proceed with Creating New Source') }}</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}