<%inherit file="main.html" />

<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>

<%! from django.core.urlresolvers import reverse %>
<%! from django.utils import html %>
<%! from django_countries.countries import COUNTRIES %>
<%! from django.utils.translation import ugettext as _ %>
<%! from student.models import UserProfile %>
<%! from cme_registration.models import CmeUserProfile %>
<%! from datetime import date %>
<%! import calendar %>

<%block name="title"><title>Register for ${settings.PLATFORM_NAME}</title></%block>

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

      var view_name = 'view-register';

      // adding js class for styling with accessibility in mind
      $('body').addClass('js').addClass(view_name);

      // new window/tab opening
      $('a[rel="external"], a[class="new-vp"]')
      .click( function() {
      window.open( $(this).attr('href') );
      return false;
      });

      // form field label styling on focus
      $("form :input").focus(function() {
        $("label[for='" + this.id + "']").parent().addClass("is-focused");
      }).blur(function() {
        $("label").parent().removeClass("is-focused");
      });
     
      // display dependent form sections
      $('input.controller-show').click(function() {
        $(this).parent().siblings('.controlled').slideDown('fast');
      });
     
      $('input.controller-hide').click(function() {
        $(this).parent().siblings('.controlled').slideUp('fast');
      });
     
      $('select.controller').change(function() {
        if ($(this).children("option:selected").val() === 'Other') {
          $(this).siblings('.controlled').slideDown('fast');
        } else {
          $(this).siblings('.controlled').slideUp('fast');
        }
      });
     
      $('select.select-controller').change(function() {
        var controllerClasses = $(this).children("option:selected").attr('class');
        var controllerClass = controllerClasses.split(' ')[0];
        var controlledFieldContents = '#' + controllerClass;
        var controlledField = '#' + controllerClass.split('-')[0];
        $(controlledField).html('<option value="">--</option>').siblings('.controlled').hide().children('input').val('');
        $(controlledField).parent().hide();
       
        var controllerClass2 = '#' + controllerClasses.split(' ')[1];
        $(controllerClass2).html('<option value="">--</option>').siblings('.controlled').hide().children('input').val('');
        $(controllerClass2).parent().hide();
       
        if ($(controlledFieldContents).html() != null) {
          $(controlledField).html($(controlledFieldContents).html()).parent().show();
        }
      });

    });

    (function() {
      toggleSubmitButton(true);

      $('#register-form').on('submit', function() {
        toggleSubmitButton(false);
      });

      $('#register-form').on('ajax:complete', function() {
        toggleSubmitButton(true);
      });

      $('#register-form').on('ajax:success', function(event, json, xhr) {
        if(json.success) {
          $('.message.submission-error').removeClass('is-shown');
          location.href="${reverse('dashboard')}";
       } else {
         $('.status.message.submission-error').addClass('is-shown').focus();
         $('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block");
         $(".field-error").removeClass('field-error');
         $("[data-field='"+json.field+"']").addClass('field-error')
       }
      });
    })(this);

    function toggleSubmitButton(enable) {
      var $submitButton = $('form .form-actions #submit');

      if(enable) {
        $submitButton.
          removeClass('is-disabled').
          removeProp('disabled').
          html('Create my ${settings.PLATFORM_NAME} Account');
      }
      else {
        $submitButton.
          addClass('is-disabled').
          prop('disabled', true).
          html('Processing your account information &hellip;');
      }
    }
  </script>
</%block>

<section class="introduction">
  <header>
    <h1 class="sr">${_("Welcome! Register below to create your %(platform_name)s account") % {'platform_name': settings.PLATFORM_NAME}}</h1>
  </header>
</section>

<section class="register container">
  <section role="main" class="content">
    <form role="form" id="register-form" method="post" data-remote="true" action="${reverse('create_account')}" novalidate>

      <!-- status messages -->
      <div role="alert" class="status message">
        <h3 class="message-title">We're sorry, ${settings.PLATFORM_NAME} enrollment is not available in your region</h3>
        <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>

      <div role="alert" class="status message submission-error" tabindex="-1">
        <h3 class="message-title">The following errors occured while processing your registration: </h3>
        <ul class="message-copy"> </ul>
      </div>

      <p class="instructions">
        Please complete the following fields to register for an account. <br />
        Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
      </p>

      <fieldset class="group group-form group-form-requiredinformation">
        <hr />
        <h3><strong>Required Information</strong></h3>

        % if has_extauth_info is UNDEFINED:

        <ol class="list-input">
          <li class="field required text" id="field-email">
            <label for="email">E-mail</label>
            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
          </li>
          <li class="field required password" id="field-password">
            <label for="password">Password</label>
            <input id="password" type="password" name="password" value="" required aria-required="true" />
          </li>
          <li class="field required text" id="field-username">
            <label for="username">Public Username</label>
            <input id="username" type="text" name="username" value="" placeholder="example: JaneDoe" required aria-required="true" />
            <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
          </li>
          <li class="field required text" id="field-name">
            <label for="name">Full Name</label>
            <input id="name" type="text" name="name" value="" placeholder="example: Jane C Doe" required aria-required="true" />
            <span class="tip tip-input">Needed for any certificates you may earn <strong>(cannot be changed later)</strong></span>
          </li>
        </ol>

        % else:

        <div class="message">
          <h3 class="message-title">Welcome ${extauth_id}</h3>
          <p class="message-copy">Enter a public username:</p>
        </div>

        <ol class="list-input">
         
          % if ask_for_email:

          <li class="field required text" id="field-email">
            <label for="email">E-mail</label>
            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
          </li>
         
          % endif
         
          <li class="field required text" id="field-username">
            <label for="username">Public Username</label>
            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="example: JaneDoe" required aria-required="true" />
            <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
          </li>
         
          % if ask_for_fullname:
         
          <li class="field required text" id="field-name">
            <label for="name">Full Name</label>
            <input id="name" type="text" name="name" value="" placeholder="example: Jane Doe" />
            <span class="tip tip-input">Needed for any certificates you may earn <strong>(cannot be changed later)</strong></span>
          </li>
         
          % endif
         
        </ol>

        % endif
      </fieldset>

      <fieldset class="group group-form group-form-secondary group-form-personalinformation">
       <hr />
       <h3><strong>Professional Information</strong></h3>
   
       <ol class="list-input">
          <li class="field required text" id="field-profession">
            <label for="profession">Profession</label>
            <select id="profession" name="profession">
              <option value="">--</option>
              %for code, profession in CmeUserProfile.PROFESSION_CHOICES:
                <option value="${code}">${profession}</option>
              %endfor
            </select>
          </li>
         
          <li class="field select" id="field-professional-designation">
            <label for="professional_designation">Professional Designation</label>
            <select id="professional_designation" name="professional_designation">
              <option value="">--</option>
              %for code, professional_designation in CmeUserProfile.PROFESSIONAL_DESIGNATION_CHOICES:
                <option value="${code}">${professional_designation}</option>
              %endfor
            </select>
          </li>
         
          <li class="field required text" id="license-number">
            <label for="license_number">License Number</label>
            <input id="license_number" type="text" name="license_number" />
          </li>
         
      </ol>
      </fieldset>
     
      <fieldset class="group group-form group-form-secondary group-form-organizationinformation">
       <hr />
       <h3><strong>Organization Information</strong></h3>
      
       <ol class="list-input">
         <li class="field select" id="organization">
            <label for="organization">Organization</label>
            <input id="organization" type="text" name="organization" />
         </li>
      
         <li class="field required" id="stanford_affiliated">
           <label for="stanford_affiliated">Are you affiliated with Stanford?</label>
           <div class="field select radio " id="is_stanford_affiliated">
              <span><input id="stanford_affiliated_yes" class="controller-show" type="radio" value="1" name="stanford_affiliated" aria-label="Yes" /> Yes</span>
              <span><input id="stanford_affiliated_no" class="controller-hide" type="radio" value="0" name="stanford_affiliated" aria-label="No" style="margin-left: 50px;" /> No</span>
             
              <div class="field select controlled" id="how_stanford_affiliated" style="display: none;">
                <br />
                <label for="how_stanford_affiliated">How are you affiliated with Stanford?</label>
                <select class="controller" id="how_stanford_affiliated" name="how_stanford_affiliated">
                  <option value="">--</option>
                  % for code, how_stanford_affiliated in CmeUserProfile.HOW_STANFORD_AFFILIATED_CHOICES:
                    % if code == "Other, please enter:":
                      <option value="${code}" class="controller-show">${how_stanford_affiliated}</option>
                    % else:
                      <option value="${code}" class="controller-hide">${how_stanford_affiliated}</option>
                    % endif
                  % endfor
                </select>
                <div class="field controlled" id="how_stanford_affililiated_free_container" style="display: none;">
                  <br />
                  <input id="how_stanford_affililiated_free" type="text" name="how_stanford_affiliated_free" title="Please enter how you are affiliated with Stanford here." />
                </div>
              </div>
           </div>
         </li>

       </ol>
      </fieldset>

      <fieldset class="group group-form group-form-secondary group-form-patientinformation">
       <hr />
       <h3><strong>Your Patient Information</strong></h3>
      
       <ol class="list-input">
        <li class="field required" id="patient_population">
          <label for="patient_population">Patient population</label>
          <select id="patient_population" name="patient_population" class="select-controller">
            <option value="">--</option>
            %for code, patient_population in patient_population_choices:
              <option value="${code}" class="specialty-${code} sub_specialty">${patient_population}</option>
            %endfor
          </select>
        </li>
       
          #####################################################
          ## Specialty Select Field
          #####################################################
         
          <li class="field required" style="display: none;">
            <label for="specialty">Specialty</label>
            <select id="specialty" name="specialty" class="controller select-controller">
              <option value="">--</option>
            </select>
           
            <div class="field controlled" id="specialty_free_container" style="display: none;">
              <br />
              <input id="specialty_free" type="text" name="specialty_free" title="Please enter your Specialty here." />
           </div>
          </li>
         
          <div id="specialty-Adult" class="specialty-container" style="display: none;">
            <option value="">--</option>
            %for code, specialty in specialty_choices['Adult']:
              <option value="${code}" class="sub_specialty-${code}">${specialty}</option>
            %endfor
          </div>
         
          <div id="specialty-Pediatric" class="specialty-container" style="display: none;">
            <option value="">--</option>
            %for code, specialty in specialty_choices['Pediatric']:
              <option value="${code}" class="sub_specialty-${code}">${specialty}</option>
            %endfor
          </div>
         
          <div id="specialty-Both" class="specialty-container" style="display: none;">
            <option value="">--</option>
            %for code, specialty in specialty_choices['Both']:
              <option value="${code}" class="sub_specialty-${code}">${specialty}</option>
            %endfor
          </div>
       
       
          #####################################################
          ## Sub Specialty Select Field
          #####################################################
       
        <li class="field" style="display: none;">
          <label for="sub_specialty">Sub-Specialty</label>
          <select id="sub_specialty" name="sub_specialty" class="controller">
            <option value="">--</option>
          </select>
         
          <div class="field controlled" id="sub_specialty_free_container" style="display: none;">
           <br />
           <input id="sub_specialty_free" type="text" name="sub_specialty_free" title="Please enter your Sub-Specialty here." />
          </div>
        </li>
       
        <div id="sub_specialty-Cardiology" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Cardiology']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Internal_Medicine" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Internal_Medicine']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Obstetrics_Gynecology" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Obstetrics_Gynecology']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Oncology" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Oncology']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Palliative_Care" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Palliative_Care']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Pediatrics" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Pediatrics']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Pulmonology" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Pulmonology']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Surgery" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Surgery']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
        <div id="sub_specialty-Transplant" class="sub_specialty-container" style="display: none;">
          <option value="">--</option>
          %for code, sub_specialty in sub_specialty_choices['Transplant']:
            <option value="${code}">${sub_specialty}</option>
          %endfor
        </div>
       
       </ol>
      </fieldset>
       

      <fieldset class="group group-form group-form-secondary group-form-personalinformation">
        <hr />
        <h3><strong>Professional Contact Information</strong></h3>
       

        <ol class="list-input">
        
         <li class="field required" id="address_1">
           <label for="address_1">Address 1</label>
           <input id="address_1" type="text" name="address_1" />
         </li>
       
         <li class="field select" id="address_2">
           <label for="address_2">Address 2</label>
           <input id="address_2" type="text" name="address_2" />
         </li>
       
         <li class="field required" id="city">
           <label for="city">City</label>
           <input id="city" type="text" name="city" />
         </li>
       
         <li class="field required" id="state_province">
           <label for="state_province">State/Province</label>
           <select id="state_province" name="state_province">
             <option value="">--</option>
             %for code, state in CmeUserProfile.STATE_CHOICES:
               <option value="${code}">${state}</option>
             %endfor
           </select>
         </li>
       
         <li class="field required" id="postal_code">
           <label for="postal_code">Postal Code</label>
           <input id="postal_code" type="text" name="postal_code" />
         </li>
       
         <li class="field required" id="country">
           <label for="country">Country</label>
           <select id="country" name="country">
             <option value="">--</option>
             %for code, country in CmeUserProfile.COUNTRY_CHOICES:
               <option value="${code}">${country}</option>
             %endfor
           </select>
         </li>
        
         <li class="field required" id="phone_number">
           <label for="phone_number">Phone Number</label>
           <input id="phone_number" type="text" name="phone_number" />
         </li>
       
         <li class="field select" id="extension">
           <label for="extension">Extension</label>
           <input id="extension" type="text" name="extension" />
         </li>
       
         <li class="field select" id="fax">
           <label for="fax">Fax</label>
           <input id="fax" type="text" name="fax" />
         </li>
       
         <li class="field required" id="hear_about_us">
           <label for="hear_about_us">How did you hear about us?</label>
           <select class="controller" id="hear_about_us" name="hear_about_us">
             <option value="">--</option>
             %for code, about_us in CmeUserProfile.HEAR_ABOUT_US_CHOICES:
                % if code == "Other, please enter:":
                  <option value="${code}" class="controller-show">${about_us}</option>
                % else:
                  <option value="${code}" class="controller-hide">${about_us}</option>
                % endif
              %endfor
           </select>
           <div class="field controlled" id="hear_about_us_free" style="display: none;">
              <br />
              <input id="hear_about_us_free" type="text" name="hear_about_us_free" title="Please enter how you heard about us here." />
           </div>
         </li>
       
         <div class="field select checkbox" id="mailing_list">
            <input id="mailing_list" type="checkbox" name="mailing_list" value="true" checked />
            <label for="mailing_list">Yes, include me on the mailing list for future educational activities</label>
         </div>
       
        </ol>
      </fieldset>

      <fieldset class="group group-form group-form-accountacknowledgements">
        <hr />
        <legend class="sr">Account Acknowledgements</legend>

        <ol class="list-input">
          <li class="field-group">

            % if has_extauth_info is UNDEFINED or ask_for_tos :

            <div class="field required checkbox" id="field-tos">
              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" required aria-required="true" />
              <label for="tos-yes">I agree to the <a href="${marketing_link('TOS')}" class="new-vp">Terms of Service</a></label>
            </div>

            % endif

            <div class="field required checkbox" id="field-honorcode">
              <input id="honorcode-yes" type="checkbox" name="honor_code" value="true" />
              <%
                ## TODO: provide a better way to override these links
                if self.stanford_theme_enabled():
                  honor_code_path = marketing_link('TOS') + "#honor"
                else:
                  honor_code_path = marketing_link('HONOR')
              %>
              <label for="honorcode-yes">I agree to the <a href="${honor_code_path}" class="new-vp">Honor Code</a></label>
            </div>
          </li>
        </ol>
      </fieldset>

% if course_id and enrollment_action:
      <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />
      <input type="hidden" name="course_id" value="${course_id | h}" />
% endif

      <div class="form-actions">
        <button name="submit" type="submit" id="submit" class="action action-primary action-update">Register <span class="orn-plus">+</span> Create My Account</button>
      </div>
    </form>
  </section>

  <aside role="complementary">
    <header>
      <h3 class="sr">Registration Help</h3>
    </header>

    % if has_extauth_info is UNDEFINED:

    <div class="cta">
      <h3>Already registered?</h3>
      <p class="instructions">
        <a href="${reverse('signin_user')}${login_query()}">
          Click here to log in.
        </a>
      </p>
    </div>
     
    % endif

    ## TODO: Use a %block tag or something to allow themes to
    ## override in a more generalizable fashion.
    % if not self.stanford_theme_enabled():
      <div class="cta cta-welcome">
        <h3>Welcome to ${settings.PLATFORM_NAME}</h3>
        <p>Registering with ${settings.PLATFORM_NAME} gives you access to all of our current and future free courses. Not ready to take a course just yet? Registering puts you on our mailing list – we will update you as courses are added.</p>
      </div>
    % endif

    <div class="cta cta-nextsteps">
      <h3>Next Steps</h3>
      % if self.stanford_theme_enabled():
        <p>You will receive an activation email. You must click on the activation link to complete the process. Don’t see the email? Check your spam folder and mark emails from class.stanford.edu as ‘not spam’, since you'll want to be able to receive email from your courses.</p>
      % else:
      <p>As part of joining ${settings.PLATFORM_NAME}, you will receive an activation email. You must click on the activation link to complete the process. Don’t see the email? Check your spam folder and mark ${settings.PLATFORM_NAME} emails as ‘not spam’. At ${settings.PLATFORM_NAME}, we communicate mostly through email.</p>
      % endif
    </div>

    % if settings.MKTG_URL_LINK_MAP.get('FAQ'):
      <div class="cta cta-help">
        <h3>Need Help?</h3>
        <p>Need help in registering with ${settings.PLATFORM_NAME}?
          <a href="${marketing_link('FAQ')}">
              View our FAQs for answers to commonly asked questions.
          </a>
          Once registered, most questions can be answered in the course specific discussion forums or through the FAQs.</p>
      </div>
    % endif
  </aside>
</section>
