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

<%block name="headextra">
  <%static:css group='course'/>
</%block>

<%namespace name="profile_graphs" file="profile_graphs.js"/>

<%block name="title"><title>Profile - edX 6.002x</title></%block>

<%!
    from django.core.urlresolvers import reverse
%>

<%block name="js_extra">
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
<script>
${profile_graphs.body(grade_summary, course.grade_cutoffs, "grade-detail-graph")}
</script>

<script>
var loc=true; // Activate on clicks? Not if already clicked.
var lang=true;
$(function() {
    $("#change_location").click(function() {
       $(this).hide();

       log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});

       if(loc) {
         $("#description").html('<div>'+
                                "Preferred format is city, state, country (so for us, "+
                                "&quot;Cambridge, Massachusetts, USA&quot;), but give "+
                                "as much or as little detail as you want. </div>");

         loc=false;

         $("#location_sub").html('<form>'+'<input id="id_loc_text" type="text" name="loc_text" />'+
           '<input type="submit" id="change_loc_button" value="Save" />'+'</form>');

         $("#change_loc_button").click(function() {
           $("#change_location").show();

            postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
              $("#location_sub").text(json.location);
              loc=true;
              $("#description").html("");
             log_event("profile", {"type":"location_change", "new":json.location});
            });
         });
       }
    });

    $('#change_password').click(function(){
      $('.modal').trigger('click');
      log_event("profile", {"type":"password_show"});
    });

  $('#pwd_reset_button').click(function() {
    $.postWithPrefix('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
                  "email"  : $('#id_email').val()}, function(data){
       $("#password_reset_complete_link").click();
       log_event("profile", {"type":"password_send"});
    });
  });


  $("#change_email_form").submit(function(){
    var new_email = $('#new_email_field').val();
    var new_password = $('#new_email_password').val();

    postJSON('/change_email',{"new_email":new_email,
                              "password":new_password},
             function(data){
        if(data.success){
        $("#change_email").html("<h1>Please verify your new email</h1><p>You'll receive a confirmation in your in-box. Please click the link in the email to confirm the email change.</p>");
        } else {
          $("#change_email_error").html(data.error);
        }
     });
     log_event("profile", {"type":"email_change_request",
                             "old_email":"${email}",
                             "new_email":new_email});
     return false;
  });

  $("#change_name_form").submit(function(){
    var new_name = $('#new_name_field').val();
    var rationale = $('#name_rationale_field').val();

    postJSON('/change_name',{"new_name":new_name,
                              "rationale":rationale},
             function(data){
        if(data.success){
        $("#apply_name_change").html("<h1>Your request has been submitted.</h1><p>We'll send you an e-mail when approve the change or need further information. Please allow for up to a week for us to process your request.</p>");
        } else {
          $("#change_name_error").html(data.error);
        }
     });
     log_event("profile", {"type":"name_change_request",
                             "new_name":new_name,
                             "rationale":rationale});
     return false;
  });

});
</script>
</%block>

<%include file="course_navigation.html" args="active_page='profile'" />

<section class="container">
  <div class="profile-wrapper">

    <section class="course-info">
      <header>
        <h1>Course Progress</h1>
      </header>

      <div id="grade-detail-graph"></div>

      <ol class="chapters">
        %for chapter in courseware_summary:
        %if not chapter['display_name'] == "hidden":
        <li>
          <h2>${ chapter['display_name'] }</h2>

          <ol class="sections">
            %for section in chapter['sections']:
            <li>
              <%
              earned = section['section_total'].earned
              total = section['section_total'].possible
              percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else ""
              %>

              <h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id, chapter=chapter['url_name'], section=section['url_name']))}">
                ${ section['display_name'] }</a><span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span></h3>
              <p>
                ${section['format']}

                %if 'due' in section and section['due']!="":
                  <em>
                  due ${section['due']}
                  </em>
                %endif
              </p>

              %if len(section['scores']) > 0:
                <section class="scores">
                  <h3> ${ "Problem Scores: " if section['graded'] else "Practice Scores: "} </h3>
                  <ol>
                    %for score in section['scores']:
                    <li>${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible))}</li>
                    %endfor
                  </ol>
                </section>
              %endif

            </li> <!--End section-->
            %endfor
          </ol> <!--End sections-->
        </li> <!--End chapter-->
        %endif
        %endfor
      </ol> <!--End chapters-->

    </section>

    <section aria-label="Profile Navigation" class="user-info">

      <header>
        <h1>Student Profile</h1>
      </header>

      <ul>
        <li>
          Name: <strong>${name}</strong>
          %if True:
          <a href="#apply_name_change" rel="leanModal" class="name-edit" aria-label="Edit Name">Edit</a>
          %else:
          (Name change pending)
          %endif
        </li>

        <li>
          Forum name: <strong>${username}</strong>
        </li>

        <li>
          E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email" aria-label="Edit Email">Edit</a>
        </li>
        <li>
          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location" aria-label="Edit Location">Edit</a>
        </li>
        <li>
          Password reset
          <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
          <input type="submit" id="pwd_reset_button" value="Reset" aria-label="Reset Password" />
          <p>We'll e-mail a password reset link to ${email}.</p>
        </li>
      </ul>

    </section>
  </div>
</section>

<div id="password_reset_complete" class="modal">
  <a href="#password_reset_complete" rel="leanModal" id="password_reset_complete_link"></a>
  <h1>Password Reset Email Sent</h1>
  <p>
    An email has been sent to ${email}. Follow the link in the email to change your password.
  </p>
</div>

<div id="apply_name_change" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2>Apply to change your name</h2>
      <hr />
    </header>
    <form id="change_name_form">
      <div id="change_name_error"> </div>
      <fieldset>
        <p>To uphold the credibility of <span class="edx">edX</span> certificates, name changes must go through an approval process. A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your request to be processed. Thank you.</p>
        <label>Enter your desired full name, as it will appear on the <span class="edx">edX</span> Certificate: </label>
        <input id="new_name_field" value="" type="text" />
        <label>Reason for name change:</label>
        <textarea id="name_rationale_field" value=""></textarea>
        <input type="submit" id="submit">
      </fieldset>
    </form>
  </div>
</div>

<div id="change_email" class="modal">
  <div class="inner-wrapper">
  <header>
    <h2>Change e-mail</h2>
    <hr />
  </header>
  <div id="apply_name_change_error"></div>
  <form id="change_email_form">
    <div id="change_email_error"> </div>
    <fieldset>
      <label> Please enter your new email address: </label>
      <input id="new_email_field" type="email" value="" />
      <label> Please confirm your password: </label>
      <input id="new_email_password" value="" type="password" />
      <p>We will send a confirmation to both ${email} and your new e-mail as part of the process.</p>
      <input type="submit" id="submit_email_change" />
    </fieldset>
  </form>
  </div>
</div>

<div id="deactivate-account" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2>Deactivate <span class="edx">edX</span> Account</h2>
      <hr />
    </header>
    <p>Once you deactivate you&rsquo;re MIT<em>x</em> account you will no longer recieve updates and new class announcements from MIT<em>x</em>.</p>
    <p>If you&rsquo;d like to still get updates and new class announcements you can just <a href="#unenroll" rel="leanModal">unenroll</a> and keep your account active.</p>

    <form id="unenroll_form">
      <div id="unenroll_error"> </div>
      <fieldset>
        <input type="submit" id="" value="Yes, I don't want an edX account or hear about any new classes or updates to edX" />
      </fieldset>
    </form>
  </div>
</div>

<div id="unenroll" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2>Unenroll from 6.002x</h2>
      <hr />
    </header>
    <p>Please note: you will still receive updates and new class announcements from ed<em>X</em>. If you don&rsquo;t wish to receive any more updates or announcements <a href="#deactivate-account" rel="leanModal">deactivate your account</a>.</p>

    <form id="unenroll_form">
      <div id="unenroll_error"> </div>
      <fieldset>
        <input type="submit" id="" value="Yes, I want to unenroll from 6.002x but still hear about any new classes or updates to edX" />
      </fieldset>
    </form>
  </div>
</div>
