<%!
  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
  from student.models import get_testcenter_registrations_for_user_and_course
%>
<%inherit file="main.html" />

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

<%block name="title"><title>Pearson VUE Test Center Proctoring - Sign Up</title></%block>

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

    $(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").removeClass('error');
        $("#submission-error-list").html(error_html);
		// start to display new errors:
        $(".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 "data-field" attribute to identify the one matching the errant field's name.
          $("[data-field='"+fieldname+"']").addClass('error')
          field_errorlist = field_errors[fieldname];      
          for (i=0; i < field_errorlist.length; i+= 1) {
            field_error = field_errorlist[i];
            error_msg = fieldname + ": " + field_error;
          	error_html =  error_html + '<li class="to-be-determined">' + error_msg + '</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>${get_course_about_section(course, 'university')} ${course.number} ${course.title}</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>
  
  <section class="status">
    
    <!-- NOTE: BT - registration data updated confirmation message - in case upon successful submit we're directing
    	 folks back to this view.  To display, add "is-shown" class to div -->
    <div class="message message-status submission-saved">
      <p class="message-copy">Your registration data has been updated and saved.</p>
    </div>
        
    <!-- NOTE: BT - Sample markup for error message.  To display, add "is-shown" class to div -->
    <div class="message message-status submission-error">
      <p id="submission-error-heading" class="message-copy"></p>
      <ul id="submission-error-list"/>
    </div>
  </section>
  
  <section class="content">
    <header>
      <h3 class="is-hidden">Registration Form</h3>
    </header>      
    <form id="testcenter_register_form" method="post" data-remote="true" action="/create_test_registration">
      
      % if registration:
      <p class="instructions">
        Please complete the following form to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by <strong>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>bold text and an asterisk (*)</strong>.
      </p>
      % endif

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

      <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 data-field="salutation" class="field">
              <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 data-field="first_name" class="field required">
              <label for="name-first">First Name </label>
              <input id="name-first" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" />
            </li>
            <li data-field="middle_name" class="field">
              <label for="name-middle">Middle Name</label>
              <input id="name-middle" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
            </li>
            <li data-field="last_name" class="field required">
              <label for="name-last">Last Name</label>
              <input id="name-last" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" />
            </li>
            <li data-field="suffix" class="field">
              <label for="name-suffix">Suffix</label>
              <input class="short" id="name-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 data-field="address_1" class="field required">
              <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 data-field="address_2" class="field">
                <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 data-field="address_3" class="field">
                <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-group postal">
              <div data-field="city" class="field required">
                <label for="city">City</label>
                <input id="city" class="short" type="text" name="city" value="${testcenteruser.city}" placeholder="e.g. Newark" />
              </div>
              <div data-field="state" class="field">
                <label for="state">State/Province</label>
                <input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="e.g. NJ" />
              </div>
              <div data-field="postal_code" class="field">
                <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 data-field="country" class="field required">
                <label class="short" for="country-code">Country Code</label>
                <input id="country-code" 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 data-field="phone" class="field required">
                <label for="phone">Phone Number</label>
                <input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" />              
              </div>
              <div data-field="extension" class="field">
                <label for="phone-extension">Extension</label>
                <input id="phone-extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
              </div>
              <div data-field="phone_country_code" class="field required">
                <label for="phone-countrycode">Phone Country Code</label>
                <input id="phone-countrycode" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" placeholder="e.g. USA" />
              </div>
            </li>
            <li class="field-group faxinfo">
              <div data-field="fax" class="field">
                <label for="fax">Fax Number</label>
                <input id="fax" type="text" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" />
              </div>
              <div data-field="fax_country_code" class="field">
                <label for="fax-countrycode">Fax Country Code</label>
                <input id="fax-countrycode" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" placeholder="e.g. USA" />
              </div>
            </li>
            <li data-field="company_name" class="field">
              <label for="company">Company</label>
              <input id="company" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" />
            </li>
          </ol>
        </fieldset>
      </div>
      
      <div class="form-fields-secondary">
        <!-- NOTE: BT - Assuming accommodations cannot be edited after a user originally submits registration, I've disabled the field and provided different text. Correct if this is not the case. -->
        % if registration:
        <p class="instructions">Fields below this point are not part of the demographics, and are not editable currently.</p>
        % else: 
        <p class="instructions">Fields below this point are not part of the demographics, and cannot be changed once submitted.</p>
        % endif
                  
        <fieldset class="group group-form group-form-optional">
          <legend class="is-hidden">Optional Information</legend>
          
          <!-- Only display an accommodation request if one had been specified at registration time. 
               So only prompt for an accommodation request if no registration exists. 
               BW: Bug.  It is not enough to set the value of the disabled control.  It does
               not display any text.  Perhaps we can use a different control. -->
          <ol class="list-input">
            % if registration:
              % if registration.accommodation_request and len(registration.accommodation_request) > 0:
            <li class="field disabled">
              <label for="accommodations">Accommodations Requested</label>
              <textarea class="long" id="accommodations" value="${registration.accommodation_request}" placeholder="" disabled="disabled"></textarea>
            </li>
              % endif
            % else: 
            <li data-field="accommodation_request" class="field">
              <label for="accommodations">Accommodations Requested</label>
              <textarea class="long" id="accommodations" 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>
        % else: 
        <button type="submit" id="submit" class="action action-primary action-register">Register for Pearson VUE Test</button>
        % endif
      </div>        
    </form>
  </section>
    
  <aside>
   % if registration:
    <h3 class="is-hidden">Registration Details</h3>
    
    <!-- NOTE: BT - state for if registration is accepted -->
    % if registration.is_accepted():
      <% regstatus = "Registration approved by Pearson" %>
    <div class="message message-status registration-accepted is-shown">
      <p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
      <p class="registration-number"><span class="label">Registration number: </span> <span class="value">${registration.client_authorization_id}</span></p>
      <p class="message-copy">Write this down! You’ll need it to schedule your exam.</p>
      <a href="https://www1.pearsonvue.com/testtaker/signin/SignInPage/EDX" class="button exam-button">Schedule Pearson exam</a>
    </div>
    % endif
    
    % if registration.is_rejected():
    <!-- NOTE: BT - state for if registration is rejected -->
      <% regstatus = "Registration rejected by Pearson: %s" % registration.upload_error_message %>
    <div class="message message-status registration-rejected is-shown">
      <p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
      <p class="message-copy">Your registration for the Pearson exam has been rejected. Please contact Pearson VUE for further information regarding your registration.</p>
    </div>
    % endif
    
    % if registration.is_pending_accommodation():
        <% regstatus = "Registration pending approval of accommodation request" %>
    <!-- NOTE: BT - state for if registration is pending -->
    <div class="message message-status registration-pending is-shown">
      <p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
      <p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see confirmation here of granted accommodations.
      	At that point, your registration will be forwarded to Pearson.</p>
    </div>
    % endif

    % if registration.is_pending_acknowledgement():
        <% regstatus = "Registration pending acknowledgement by Pearson" %>
    <!-- NOTE: BT - state for if registration is pending -->
    <div class="message message-status registration-pending is-shown">
      <p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
      <p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see a confirmation number here, which can be used to schedule your exam.</p>
    </div>
    % endif

   % endif
    
    <div class="details details-course">
      <!-- NOTE: showing course details -->
      <h4>About ${get_course_about_section(course, 'university')} ${course.number}</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">
      <!-- NOTE: showing test details -->
      <h4>Pearson VUE Test Details</h4>
      % if exam_info is not None:
        <!-- TODO: BT - Can we obtain a more human readable value for test-type (e.g. "Final Exam" or "Midterm Exam")? -->
        <ul>
          <li>
            <span class="label">Exam Series Code:</span> <span class="value">${exam_info.get('Exam_Series_Code')}</span>
          </li>
          <li>
            <span class="label">First Eligible Appointment Date:</span> <span class="value">${exam_info.get('First_Eligible_Appointment_Date')}</span>
          </li>
          <li>
            <span class="label">Last Eligible Appointment Date:</span> <span class="value">${exam_info.get('Last_Eligible_Appointment_Date')}</span>
          </li>            
        </ul>
      % endif
    </div>
  </aside>
</section>
