<%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;
      });
      
//---------------------------------------- Client side registration behavior ----------------------------------------//
      
      // 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
     
      $('select.affiliation-controller').change(function() {
        $(this).siblings('.affiliation-controlled').slideUp('fast');
        
        if ($(this).children("option:selected").val() === 'Stanford University') {
          $(this).siblings('.affiliation-controlled#sunet_id_container, .affiliation-controlled#stanford_department_container').slideDown('fast');
        } else if ($(this).children("option:selected").val() === "Packard Children's Health Alliance") {
          $(this).siblings('.affiliation-controlled#PCHA_affiliation_container').slideDown('fast');
        } else if ($(this).children("option:selected").val() === 'University Healthcare Alliance') {
          $(this).siblings('.affiliation-controlled#UHA_affiliation_container').slideDown('fast');
        } else if ($(this).children("option:selected").val() === 'Other') {
          $(this).siblings('.affiliation-controlled#other_affiliation_container').slideDown('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();
        }
      });
      
      // Dependent required fields
      $('select#professional_designation').change(function() {
        var dependentRequiredFields = 'li#license-number_container, li#license-country_container, li#physician_status_container, li#patient_population_container, li#specialty-container';
        
        if ($(this).children("option:selected").val() === 'MD' || $(this).children("option:selected").val() === 'MD,PhD' || $(this).children("option:selected").val() === 'DO' || $(this).children("option:selected").val() === 'MBBS') {
          $(this).parent().siblings(dependentRequiredFields).addClass('required');
        } else {
          $(this).parent().siblings(dependentRequiredFields).removeClass('required');
        }
      });
      $('select#stanford_affiliation').change(function() {
        if ($(this).children("option:selected").val() === 'Other' || $(this).children("option:selected").val() === '') {
          $(this).parent().siblings('li.field').removeClass('required');
        } else {
          $(this).parent().siblings('li.field').addClass('required');
        }
      });
      $('select#license_country').change(function() {
        var dependentRequiredFields = 'li#license-state_container';
        
        if ($(this).children("option:selected").val() === 'United States') {
          $(this).parent().siblings(dependentRequiredFields).addClass('required');
        } else {
          $(this).parent().siblings(dependentRequiredFields).removeClass('required');
        }
      });
      $('select#country').change(function() {
        var dependentRequiredFields = 'li#state_container';
        
        if ($(this).children("option:selected").val() === 'United States') {
          $(this).parent().siblings(dependentRequiredFields).addClass('required');
        } else {
          $(this).parent().siblings(dependentRequiredFields).removeClass('required');
        }
      });
      
//--------------------------------------- /Client side registration behavior ----------------------------------------//
    });

    (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');
          if(json.redirect_url){
            location.href=json.redirect_url;
          }
          else {
            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>
          
          <li class="field required text" id="field-name">
            <label for="name">Last Name</label>
            <input id="last_name" type="text" name="last_name" value="" required aria-required="true" />
          </li>
          
          <li class="field required text" id="field-name">
            <label for="name">First Name</label>
            <input id="first_name" type="text" name="first_name" value="" required aria-required="true" />
          </li>
          
          <li class="field select" id="field-name">
            <label for="name">Middle Initial</label>
            <input id="middle_initial" type="text" name="middle_initial" value="" required aria-required="true" />
          </li>
          
          <li class="field required text" id="field-name">
            <label for="name">Month and Day of Birth</label>
            <input id="birth_date" type="text" name="birth_date" value="" required aria-required="true" placeholder="MM/DD" maxlength="5" />
          </li>
          
          <li class="field select" id="gender_container">
           <label for="gender">Gender</label>
           <select id="gender" name="gender">
             <option value="">--</option>
             %for code, gender in CmeUserProfile.GENDER_CHOICES:
               <option value="${code}">${gender}</option>
             %endfor
           </select>
          </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-professionalinformation form-page">
       <hr />
       <h3><strong>Professional Information</strong></h3>
   
       <ol class="list-input">
         
          <li class="field required text" id="field-professional-designation_container">
            <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 select" id="license-number_container">
            <label for="license_number">License Number</label>
            <input id="license_number" type="text" name="license_number" />
          </li>

          <li class="field select" id="license-country_container">
            <label for="license_country">License Country</label>
           <select id="license_country" name="license_country">
             <option value="">--</option>
             %for code, country in CmeUserProfile.COUNTRY_CHOICES:
               <option value="${code}">${country}</option>
             %endfor
           </select>
          </li>

          <li class="field select" id="license-state_container">
            <label for="license_state">License State</label>
           <select id="license_state" name="license_state">
             <option value="">--</option>
             %for code, state in CmeUserProfile.STATE_CHOICES:
               <option value="${code}">${state}</option>
             %endfor
           </select>
          </li>

          <li class="field select" id="physician_status_container">
            <label for="physician_status">Physician Status</label>
           <select id="physician_status" name="physician_status">
             <option value="">--</option>
             %for code, status in CmeUserProfile.PHYSICIAN_STATUS_CHOICES:
               <option value="${code}">${status}</option>
             %endfor
           </select>
          </li>

        <li class="field select" id="patient_population_container">
          <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 select" style="display: none;" id="specialty-container">
            <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." placeholder="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;" id="sub-specialty-container">
          <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." placeholder="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-affiliationinformation form-page">
        <hr />
        <h3><strong>Affiliation Information</strong></h3>
      
        <ol class="list-input">
          
          <li class="field select" id="affiliation">
            <label for="affiliation">Affiliation</label>
            <select id="affiliation" name="affiliation" class="affiliation-controller">
              <option value="">--</option>
              %for code, affiliation in CmeUserProfile.AFFILIATION_CHOICES:
                <option value="${code}">${affiliation}</option>
              %endfor
            </select>
           
            <div class="field affiliation-controlled select required" id="sunet_id_container" style="display: none;">
              <br />
              <label for="sunet_id">SUNet ID</label>
              <input id="sunet_id" type="text" name="sunet_id" />
            </div>
            
            <div class="field affiliation-controlled select required" id="stanford_department_container" style="display: none;">
              <label for="stanford_department">Stanford Department</label>
              <select id="stanford_department" name="stanford_department">
                <option value="">--</option>
                %for code, stanford_department in CmeUserProfile.DEPARTMENT_CHOICES:
                  <option value="${code}">${stanford_department}</option>
                %endfor
              </select>
            </div>
            
            <div class="field affiliation-controlled select required" id="PCHA_affiliation_container" style="display: none;">
              <br />
              <label for="PCHA_affiliation">Packard Children's Health Alliance Affiliation</label>
              <select id="PCHA_affiliation" name="PCHA_affiliation">
                <option value="">--</option>
                %for code, PCHA_affiliation in sub_affiliation_choices['Packard_Childrens_Health_Alliance']:
                  <option value="${code}">${PCHA_affiliation}</option>
                %endfor
              </select>
            </div>
            
            <div class="field affiliation-controlled select required" id="UHA_affiliation_container" style="display: none;">
              <br />
              <label for="UHA_affiliation">University Healthcare Alliance Affiliation</label>
              <select id="UHA_affiliation" name="UHA_affiliation">
                <option value="">--</option>
                %for code, UHA_affiliation in sub_affiliation_choices['University_Healthcare_Alliance']:
                  <option value="${code}">${UHA_affiliation}</option>
                %endfor
              </select>
            </div>
           
            <div class="field affiliation-controlled" id="other_affiliation_container" style="display: none;">
              <br />
              <input id="other_affiliation" type="text" name="other_affiliation" title="Please enter your affiliation here." placeholder="Please enter your affiliation here." />
            </div>
          </li>
          
        </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_container">
           <label for="address_1">Address 1</label>
           <input id="address_1" type="text" name="address_1" />
         </li>
       
         <li class="field select" id="address_2_container">
           <label for="address_2">Address 2</label>
           <input id="address_2" type="text" name="address_2" />
         </li>
       
         <li class="field required" id="city_container">
           <label for="city">City</label>
           <input id="city" type="text" name="city" />
         </li>

         <li class="field required" id="country_container">
           <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" id="state_container">
           <label for="state">State</label>
           <select id="state" name="state">
             <option value="">--</option>
             %for code, state in CmeUserProfile.STATE_CHOICES:
               <option value="${code}">${state}</option>
             %endfor
           </select>
         </li>
         
         <li class="field" id="county_province_container">
           <label for="county_province">International Province or Territory</label>
           <input id="county_province" type="text" name="county_province" />
         </li>

         <li class="field required" id="postal_code_container">
           <label for="postal_code">Postal/Zip Code</label>
           <input id="postal_code" type="text" name="postal_code" />
         </li>
       
        </ol>
      </fieldset>

      <fieldset class="group group-form group-form-accountacknowledgements" id="form-checkboxes">
        <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" id="form-submit">
        <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>
