<%! from django.utils.translation import ugettext as _ %>

<%!
  from django.core.urlresolvers import reverse
  from courseware.courses import course_image_url, get_course_about_section
  from courseware.access import has_access
  from certificates.models import CertificateStatuses
%>
<%inherit file="main.html" />

<%namespace name='static' file='static_content.html'/>

<%block name="title"><title>${_('Pearson VUE Test Center Proctoring - Registration')}</title></%block>

<%block name="js_extra">
  <script type="text/javascript">
  (function() {

    // if form is disabled or registration is closed
    $('#testcenter_register_form.disabled').find('input, textarea, button').attr('disabled','disabled');

    // toggling accommodations elements
    $('.form-fields-secondary-visibility').click(function(e){
      e.preventDefault();
      $(this).addClass("is-hidden");

      $('.form-fields-secondary').addClass("is-shown");
    });


    $(document).on('ajax:success', '#testcenter_register_form', function(data, json, xhr) {
      if(json.success) {
        // when a form is successfully filled out, return back to the dashboard.
        location.href="${reverse('dashboard')}";
      } else {
    	// 	This is performed by the following code that parses the errors returned as json by the
    	// 	registration form validation.
        var field_errors = json.field_errors;
        var non_field_errors = json.non_field_errors;
        var fieldname;
        var field_errorlist;
        var field_error;
        var error_msg;
        var num_errors = 0;
        var error_html = '';
        // first get rid of any errors that are already present:
        $(".field.error", ".form-actions").removeClass('error');
        $("#submission-error-list").html(error_html);
		// start to display new errors:
        $(".form-actions").addClass("error");
        $(".submission-error").addClass("is-shown");
        for (fieldname in field_errors) {
          // to inform a user of what field the error occurred on, add a class of .error to the .field element.
          // for convenience, use the "id" attribute to identify the one matching the errant field's name.
          var field_id = "field-" + fieldname;
          var field_label = $("[id='"+field_id+"'] label").text();

          $("[id='"+field_id+"']").addClass('error');

          field_errorlist = field_errors[fieldname];
          for (i=0; i < field_errorlist.length; i+= 1) {
            field_error = field_errorlist[i];
            error_msg = '<span class="field-name">' + field_label + ':</span>' + '<span class="field-error">' + field_error + '</span>';
          	error_html =  error_html + '<li>' + '<a href="#field-' + fieldname + '">' + error_msg + '</a></li>';
          	num_errors += 1;
          }
        }
        for (i=0; i < non_field_errors.length; i+= 1) {
          error_msg = non_field_errors[i];
      	  error_html = error_html + '<li class="to-be-determined">' + error_msg + '</li>';
       	  num_errors += 1;
        }
        if (num_errors == 1) {
        	error_msg = 'was an error';
		} else {
        	error_msg = 'were ' + num_errors + ' errors';
		}
	    $('#submission-error-heading').text("We're sorry, but there " + error_msg + " in the information you provided below:")
        $("#submission-error-list").html(error_html);
      }
    });

    $("form :input").focus(function() {
      $("label[for='" + this.id + "']").addClass("is-focused");
    }).blur(function() {
      $("label").removeClass("is-focused");
    });

  })(this)
  </script>
</%block>

<section class="testcenter-register container">

  <section class="introduction">
    <header>
      <hgroup>
        <h2><a href="${reverse('dashboard')}">${get_course_about_section(course, 'university')} ${course.display_number_with_default | h} ${course.display_name_with_default | h}</a></h2>

        % if registration:
        <h1>${_('Your Pearson VUE Proctored Exam Registration')}</h1>
        % else:
        <h1>${_('Register for a Pearson VUE Proctored Exam')}</h1>
        % endif
      </hgroup>
    </header>
  </section>

  <%
    exam_help_href = "mailto:exam-help@edx.org?subject=Pearson VUE Exam - " + get_course_about_section(course, 'university') + " - " + course.number
  %>

  % if registration:
    <!-- select one of four registration status banners to display -->
    % if registration.is_accepted:
    <section class="status message message-flash registration-processed message-action is-shown">
      <h3 class="message-title">${_('Your registration for the Pearson exam has been processed')}</h3>
      <p class="message-copy">${_("Your registration number is <strong>{reg_number}</strong>. "
        "(Write this down! You\'ll need it to schedule your exam.)").format(reg_number=registration.client_candidate_id)}</p>
      <a href="${registration.registration_signup_url}" class="button exam-button">${_('Schedule Pearson exam')}</a>
    </section>
    % endif

    % if registration.demographics_is_rejected:
    <section class="status message message-flash demographics-rejected message-action is-shown">
      <h3 class="message-title">${_('Your demographic information contained an error and was rejected')}</h3>
      <p class="message-copy">${_('Please check the information you provided, and correct the errors noted below.')}
    </section>
    % endif

    % if registration.registration_is_rejected:
    <section class="status message message-flash registration-rejected message-action is-shown">
      <h3 class="message-title">${_('Your registration for the Pearson exam has been rejected')}</h3>
      <p class="message-copy">${_('Please see your <strong>registration status</strong> details for more information.')}</p>
    </section>
    % endif

    % if registration.is_pending:
   <section class="status message message-flash registration-pending is-shown">
    <h3 class="message-title">${_('Your registration for the Pearson exam is pending')}</h3>
    <p class="message-copy">${_('Once your information is processed, it will be forwarded to Pearson and you will be able to schedule an exam.')}</p>
   </section>
    % endif

  % endif

  <section class="content">
    <header>
      <h3 class="is-hidden">${_('Registration Form')}</h3>
    </header>
  % if exam_info.is_registering():
    <form id="testcenter_register_form" method="post" data-remote="true" action="/create_exam_registration">
  % else:
    <form id="testcenter_register_form" method="post" data-remote="true" action="/create_exam_registration" class="disabled">
      <!-- registration closed, so tell them they can't do anything: -->
      <div class="status message registration-closed is-shown">
        <h3 class="message-title">${_('Registration for this Pearson exam is closed')}</h3>
        <p class="message-copy">${_('Your previous information is available below, however you may not edit any of the information.')}
      </div>
  % endif

      % if registration:
      <p class="instructions">
        ${_('Please use the following form if you need to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)')}</strong>.
      </p>
      % else:
      <p class="instructions">
        ${_('Please provide the following demographic information to register for a Pearson VUE Proctored Exam. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)')}</strong>.
      </p>
      % endif

      <!-- include these as pass-throughs -->
      <input id="id_email" type="hidden" name="email" value="${user.email}" />
      <input id="id_username" type="hidden" name="username" value="${user.username}" />
      <input id="id_course_id" type="hidden" name="course_id" value="${course.id}" />
      <input id="id_exam_series_code" type="hidden" name="exam_series_code" value="${exam_info.exam_series_code}" />

      <div class="form-fields-primary">
        <fieldset class="group group-form group-form-personalinformation">
          <legend class="is-hidden">${_('Personal Information')}</legend>

          <ol class="list-input">
            <li class="field" id="field-salutation">
              <label for="salutation">${_('Salutation')}</label>
              <input class="short" id="salutation" type="text" name="salutation" value="${testcenteruser.salutation}" placeholder="${_('e.g. Mr., Ms., Mrs., Dr.')}" />
            </li>
            <li class="field required" id="field-first_name">
              <label for="first_name">${_('First Name')} </label>
              <input id="first_name" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="${_('e.g. Albert')}" />
            </li>
            <li class="field" id="field-middle_name">
              <label for="middle_name">${_("Middle Name")}</label>
              <input id="middle_name" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
            </li>
            <li class="field required" id="field-last_name">
              <label for="last_name">${_('Last Name')}</label>
              <input id="last_name" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="${_('e.g. Einstein')}" />
            </li>
            <li class="field" id="field-suffix">
              <label for="suffix">${_('Suffix')}</label>
              <input class="short" id="suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="${_('e.g. Jr., Sr. ')}" />
            </li>
          </ol>
        </fieldset>

        <fieldset class="group group-form group-form-mailingaddress">
          <legend class="is-hidden">${_('Mailing Address')}</legend>

          <ol class="list-input">
            <li class="field required" id="field-address_1">
              <label class="long" for="address_1">${_('Address Line #1')}</label>
              <input id="address_1" type="text" name="address_1" value="${testcenteruser.address_1}" placeholder="${_('e.g. 112 Mercer Street')}" />
            </li>
            <li class="field-group addresses">
              <div class="field" id="field-address_2">
                <label for="address_2">${_('Address Line #2')}</label>
                <input id="address_2" class="long" type="text" name="address_2" value="${testcenteruser.address_2}" placeholder="${_('e.g. Apartment 123')}" />
              </div>
              <div class="field" id="field-address_3">
                <label for="address_3">${_('Address Line #3')}</label>
                <input id="address_3" class="long" type="text" name="address_3" value="${testcenteruser.address_3}" placeholder="${_('e.g. Attention: Albert Einstein')}" />
              </div>
            </li>
            <li class="field required postal-1" id="field-city">
              <label for="city">${_('City')}</label>
              <input id="city" class="long" type="text" name="city" value="${testcenteruser.city}" placeholder="${_('e.g. Newark')}" />
            </li>
            <li class="field-group postal-2">
              <div class="field" id="field-state">
                <label for="state">${_('State/Province')}</label>
                <input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="${_('e.g. NJ')}" />
              </div>
              <div class="field" id="field-postal_code">
                <label for="postal_code">${_('Postal Code')}</label>
                <input id="postal_code" class="short" type="text" name="postal_code" value="${testcenteruser.postal_code}" placeholder="${_('e.g. 08540')}" />
              </div>
              <div class="field required" id="field-country">
                <label class="short" for="country">${_('Country Code')}</label>
                <input id="country" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="${_('e.g. USA')}" />
              </div>
            </li>
          </ol>
        </fieldset>

        <fieldset class="group group-form group-form-contactinformation">
          <legend class="is-hidden">${_('Contact &amp; Other Information')}</legend>

          <ol class="list-input">
            <li class="field-group phoneinfo">
              <div class="field required" id="field-phone">
                <label for="phone">${_('Phone Number')}</label>
                <input id="phone" type="tel" name="phone" value="${testcenteruser.phone}" />
              </div>
              <div class="field" id="field-extension">
                <label for="extension">${_('Extension')}</label>
                <input id="extension" class="short" type="tel" name="extension" value="${testcenteruser.extension}"  />
              </div>
              <div class="field required" id="field-phone_country_code">
                <label for="phone_country_code">${_('Phone Country Code')}</label>
                <input id="phone_country_code" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" />
              </div>
            </li>
            <li class="field-group faxinfo">
              <div class="field" id="field-fax">
                <label for="fax">${_('Fax Number')}</label>
                <input id="fax" type="tel" class="short" name="fax" value="${testcenteruser.fax}" />
              </div>
              <div class="field" id="field-fax_country_code">
                <label for="fax_country_code">${_('Fax Country Code')}</label>
                <input id="fax_country_code" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" />
              </div>
            </li>
            <li class="field" id="field-company_name">
              <label for="company_name">${_('Company')}</label>
              <input id="company_name" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="${_('e.g. American Association of University Professors')}" />
            </li>
          </ol>
        </fieldset>
      </div>

      % if registration:
        % if registration.accommodation_request and len(registration.accommodation_request) > 0:
      <div class="form-fields-secondary is-shown disabled" id="form-fields-secondary">
        % endif
      % else:
      <div class="form-fields-secondary" id="form-fields-secondary">
      % endif

        % if registration:
          % if registration.accommodation_request and len(registration.accommodation_request) > 0:
        <p class="note">${_('<span class="title">Note</span>: Your previous accommodation request below needs to be reviewed in detail <strong>and will add a significant delay to your registration process</strong>.')}</p>
          % endif
        % else:
        <p class="note">${_('<span class="title">Note</span>: Accommodation requests are not part of your demographic information, <strong>and cannot be changed once submitted</strong>. Accommodation requests, which are reviewed on a case-by-case basis, <strong>will add significant delay to the registration process</strong>.')}</p>
        % endif

        <fieldset class="group group-form group-form-optional">
          <legend class="is-hidden">${_('Optional Information')}</legend>

          <ol class="list-input">
            % if registration:
              % if registration.accommodation_request and len(registration.accommodation_request) > 0:
            <li class="field submitted" id="field-accommodation_request">
              <label for="accommodation_request">${_('Accommodations Requested')}</label>
              <p class="value" id="accommodations">${registration.accommodation_request}</p>
            </li>
              % endif
            % else:
            <li class="field" id="field-accommodation_request">
              <label for="accommodation_request">${_('Accommodations Requested')}</label>
              <textarea class="long" id="accommodation_request" name="accommodation_request" value="" placeholder=""></textarea>
            </li>
            % endif
          </ol>
        </fieldset>
      </div>

      <div class="form-actions">
        % if registration:
        <button type="submit" id="submit" class="action action-primary action-update">${_('Update Demographics')}</button>
        <a href="${reverse('dashboard')}" class="action action-secondary action-cancel">${_('Cancel Update')}</a>
        % else:
        <button type="submit" id="submit" class="action action-primary action-register">${_('Register for Pearson VUE Test')}</button>
        <a href="${reverse('dashboard')}" class="action action-secondary action-cancel">${_('Cancel Registration')}</a>
        % endif

        <div class="message message-status submission-error">
          <p id="submission-error-heading" class="message-copy"></p>
          <ul id="submission-error-list"></ul>
        </div>
      </div>
    </form>

    % if registration:
      % if registration.accommodation_request and len(registration.accommodation_request) > 0:
    <a class="actions form-fields-secondary-visibility is-hidden" href="#form-fields-secondary">${_('Special (<abbr title="Americans with Disabilities Act">ADA</abbr>) Accommodations')}</a>
      % endif
    % else:
    <a class="actions form-fields-secondary-visibility" href="#form-fields-secondary">${_('Special (<abbr title="Americans with Disabilities Act">ADA</abbr>) Accommodations')}</a>
    % endif
  </section>

  <aside>
   % if registration:

    % if registration.is_accepted:
    <div class="message message-status registration-processed is-shown">
    % endif
    % if registration.is_rejected:
    <div class="message message-status registration-rejected is-shown">
    % endif
    % if registration.is_pending:
    <div class="message message-status registration-pending is-shown">
    % endif
      <h3>${_('Pearson Exam Registration Status')}</h3>

      <ol class="status-list">
        <!-- first provide status of demographics -->
        % if registration.demographics_is_pending:
        <li class="item status status-pending status-demographics">
          <h4 class="title">${_('Demographic Information')}</h4>
          <p class="details">${_('The demographic information you most recently provided is pending. You may edit this information at any point before exam registration closes on <strong>{end_date}</strong>').format(end_date=exam_info.registration_end_date_text)}</p>
        </li>
        % endif
        % if registration.demographics_is_accepted:
        <li class="item status status-processed status-demographics">
          <h4 class="title">${_('Demographic Information')}</h4>
          <p class="details">${_('The demographic information you most recently provided has been processed. You may edit this information at any point before exam registration closes on <strong>{end_date}</strong>').format(end_date=exam_info.registration_end_date_text)}</p>
        </li>
        % endif
        % if registration.demographics_is_rejected:
        <li class="item status status-rejected status-demographics">
          <h4 class="title">${_('Demographic Information')}</h4>
          <p class="details">${_('The demographic information you most recently provided has been rejected by Pearson. You can correct and submit it again before the exam registration closes on <strong>{end_date}</strong>. The error message is:').format(end_date=exam_info.registration_end_date_text)}</p>

          <ul class="error-list">
            <li class="item">${registration.testcenter_user.upload_error_message}.</li>
          </ul>

          <p class="action">${_('If the error is not correctable by revising your demographic information, please {contact_link_start}contact edX at exam-help@edx.org{contact_link_end}.').format(contact_link_start='<a class="contact-link" href="{}"'.format(exam_help_href), contact_link_end='</a>')}</p>
        </li>
        % endif

        <!-- then provide status of accommodations, if any -->
        % if registration.accommodation_is_pending:
        <li class="item status status-pending status-accommodations">
          <h4 class="title">${_('Accommodations Request')}</h4>
          <p class="details">${_('Your requested accommodations are pending. Within a few days, you should see confirmation here of granted accommodations.')}</p>
        </li>
        % endif
        % if registration.accommodation_is_accepted:
        <li class="item status status-processed status-accommodations">
          <h4 class="title">${_('Accommodations Request')}</h4>
          <p class="details">${_('Your requested accommodations have been reviewed and processed. You are allowed:')}</p>

          <ul class="accommodations-list">
            % for accommodation_name in registration.get_accommodation_names():
            <li class="item">${accommodation_name}</li>
            % endfor
          </ul>
        </li>
        % endif
        % if registration.accommodation_is_rejected:
        <li class="item status status-processed status-accommodations">
          <h4 class="title">${_('Accommodations Request')}</h4>
          <p class="details">${_('Your requested accommodations have been reviewed and processed. You are allowed no accommodations.')}</p>

          <p class="action">${_('Please {contact_link_start}contact {edX} at ${exam_help}{contact_link_end}.').format(contact_link_start='<a class="contact-link" href="{}">'.format(exam_help_href), contact_link_end='</a>', edX="edX", exam_help="exam-help@edx.org")}</p>
        </li>
        % endif

        <!-- finally provide status of registration -->
        % if registration.registration_is_pending:
        <li class="item status status-pending status-registration">
          <h4 class="title">${_('Registration Request')}</h4>
          <p class="details">${_('Your exam registration is pending. Once your information is processed, it will be forwarded to Pearson and you will be able to schedule an exam.')}</p>
        </li>
        % endif
        % if registration.registration_is_accepted:
        <li class="item status status-processed status-registration">
          <h4 class="title">${_('Registration Request')}</h4>
          <p class="details">${_('Your exam registration has been processed and has been forwarded to Pearson. <strong>You are now able to {exam_link_start}schedule a Pearson exam{exam_link_end}</strong>.').format(exam_link_start='<a href="{}" class="exam-link">'.format(registration.registration_signup_url), exam_link_end='</a>')}</p>
        </li>
        % endif
        % if registration.registration_is_rejected:
        <li class="item status status-rejected status-registration">
          <h4 class="title">${_('Registration Request')}</h4>
          <p class="details">${_('Your exam registration has been rejected by Pearson. <strong>You currently cannot schedule an exam</strong>. The errors found include:')}</p>

          <ul class="error-list">
            <li class="item">${registration.upload_error_message}</li>
          </ul>

          <p class="action">${_('Please {contact_link_start}contact edX at exam-help@edx.org{contact_link_end}.').format(contact_link_start='<a class="contact-link" href="{}"'.format(exam_help_href), contact_link_end='</a>')}</p>
        </li>
        % endif
      </ol>

   </div>


   % endif

    <div class="details details-course">
      <h4>${_("About {university} {course_number}").format(university=get_course_about_section(course, 'university'), course_number=course.course.display_number_with_default) | h}</h4>
      <p>
      % if course.has_ended():
      <span class="label">${_('Course Completed:')}</span> <span class="value">${course.end_date_text}</span>
      % elif course.has_started():
      <span class="label">${_('Course Started:')}</span> <span class="value">${course.start_date_text}</span>
      % else:   # hasn't started yet
      <span class="label">${_('Course Starts:')}</span> <span class="value">${course.start_date_text}</span>
      % endif
      </p>
    </div>

    <div class="details details-registration">
      <h4>${_('Pearson VUE Test Details')}</h4>
      % if exam_info is not None:
        <ul>
          <li>
            <span class="label">${_('Exam Name:')}</span> <span class="value">${exam_info.display_name_with_default}</span>
          </li>
          <li>
            <span class="label">${_('First Eligible Appointment Date:')}</span> <span class="value">${exam_info.first_eligible_appointment_date_text}</span>
          </li>
          <li>
            <span class="label">${_('Last Eligible Appointment Date:')}</span> <span class="value">${exam_info.last_eligible_appointment_date_text}</span>
          </li>
          <li>
            <span class="label">${_('Registration Ends:')}</span> <span class="value">${exam_info.registration_end_date_text}</span>
          </li>
        </ul>
      % endif
    </div>

    <div class="details details-contact">
      <h4>${_('Questions')}</h4>
      <p>${_('If you have a specific question pertaining to your registration, you may {contact_link_start}contact edX at exam-help@edx.org{contact_link_end}.').format(contact_link_start='<a class="contact-link" href="{}"'.format(exam_help_href), contact_link_end='</a>')}</p>
    </div>
  </aside>
</section>
