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

<%namespace name='static' file='static_content.html'/>
<%! from datetime import datetime %>
<%! import pytz %>
<%! from django.conf import settings %>
<%! from courseware.tabs import get_discussion_link %>

% if settings.MITX_FEATURES.get('ENABLE_FEEDBACK_SUBMISSION', False):

<div class="help-tab">
  <a href="#help-modal" rel="leanModal">${_("Help")}</a>
</div>

<section id="help-modal" class="modal" aria-hidden="true">
  <div class="inner-wrapper" id="help_wrapper">
    ## TODO: find a way to refactor this
    <a href="#" role="button" class="close-modal" tabindex="0" title="${_('Close Modal')}">&#10005;</a>

    <header>
      <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
      <hr>
    </header>

<%
discussion_link = get_discussion_link(course) if course else None
%>

% if discussion_link:
    <p>${_('For <strong>questions on course lectures, homework, tools, or materials for this course</strong>, post in the {link_start}course discussion forum{link_end}.').format(
      link_start='<a href="{url}" target="_blank">'.format(url=discussion_link),
      link_end='</a>',
      )}
    </p>
% endif

    <p>${_('Have <strong>general questions about {platform_name}</strong>? You can find lots of helpful information in the {platform_name} {link_start}FAQ{link_end}.').format(
        link_start='<a href="{url}" target="_blank">'.format(
          url=marketing_link('FAQ')
        ),
        link_end='</a>',
        platform_name=settings.PLATFORM_NAME)}
      </p>

    <p>${_('Have a <strong>question about something specific</strong>? You can contact the {platform_name} general support team directly:').format(platform_name=settings.PLATFORM_NAME)}</p>
    <hr>

    <div class="help-buttons">
      <a href="#" id="feedback_link_problem">${_('Report a problem')}</a>
      <a href="#" id="feedback_link_suggestion">${_('Make a suggestion')}</a>
      <a href="#" id="feedback_link_question">${_('Ask a question')}</a>
    </div>
  </div>

  <div class="inner-wrapper" id="feedback_form_wrapper">
    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>

    <header></header>

    <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
      <div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
% if not user.is_authenticated():
      <label data-field="name">${_('Name*')}</label>
      <input name="name" type="text">
      <label data-field="email">${_('E-mail*')}</label>
      <input name="email" type="text">
% endif
      <label data-field="subject">${_('Briefly describe your issue*')}</label>
      <input name="subject" type="text">
      <label data-field="details">${_('Tell us the details*')}
<span class="tip">${_('Include error messages, steps which lead to the issue, etc')}</span></label>
      <textarea name="details"></textarea>
      <input name="issue_type" type="hidden">
% if course:
      <input name="course_id" type="hidden" value="${course.id | h}">
% endif
      <div class="submit">
        <input name="submit" type="submit" value="Submit" id="feedback_submit">
      </div>
    </form>
  </div>

  <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>

    <header>
      <h2>${_('Thank You!')}</h2>
      <hr>
    </header>

    <%
      dst = datetime.now(pytz.utc).astimezone(pytz.timezone("America/New_York")).dst()
      if dst:
        open_time = "13:00"
        close_time = "21:00"
      else:
        open_time = "14:00"
        close_time = "22:00"
    %>
    <p>
    ${_(
        'Thank you for your inquiry or feedback.  We typically respond to a request '
        'within one business day (Monday to Friday, {open_time} UTC to {close_time} UTC.) In the meantime, please '
        'review our {link_start}detailed FAQs{link_end} where most questions have '
        'already been answered.'
    ).format(
        open_time=open_time,
        close_time=close_time,
        link_start='<a href="{}" target="_blank" id="feedback-faq-link">'.format(marketing_link('FAQ')),
        link_end='</a>'
    )}
    </p>
  </div>
</section>

<script type="text/javascript">
(function() {
    var onModalClose = function() {
            $(".help-modal .close-modal").off("click");
            $("#lean_overlay").off("click");
            $("#help-modal").attr("aria-hidden", "true");
            $(".help-tab").focus();
        },
        cycle_modal_tab = function(from_element_name, to_element_name) {
            $(from_element_name).on('keydown', function(e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode === 9) {
                    e.preventDefault();
                    $(to_element_name).focus();
                }
            });
        };

    $(".help-tab").click(function() {
        $(".field-error").removeClass("field-error");
        $("#feedback_form")[0].reset();
        $("#feedback_form input[type='submit']").removeAttr("disabled");
        $("#feedback_form_wrapper").css("display", "none");
        $("#feedback_error").css("display", "none");
        $("#feedback_success_wrapper").css("display", "none");
        $("#help_wrapper").css("display", "block");
        $("#help-modal").attr("aria-hidden", "false");
        $("#help-modal .close-modal").click(onModalClose);
        $("#lean_overlay").click(onModalClose);
        $("#help_wrapper .close-modal").focus();
    });
    showFeedback = function(event, issue_type, title, subject_label, details_label) {
        $("#help_wrapper").css("display", "none");
        $("#feedback_form input[name='issue_type']").val(issue_type);
        $("#feedback_form_wrapper").css("display", "block");
        $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
        $("#feedback_form_wrapper label[data-field='subject']").html(subject_label);
        $("#feedback_form_wrapper label[data-field='details']").html(details_label);
        $("#feedback_form_wrapper .close-modal").focus();
        event.preventDefault();
    };
    cycle_modal_tab("#feedback_link_question", "#help_wrapper .close-modal");
    cycle_modal_tab("#feedback_submit", "#feedback_form_wrapper .close-modal");
    cycle_modal_tab("#feedback_faq_link", "#feedback_success_wrapper .close-modal");
    $("#help-modal").on("keydown", function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 27) {
            e.preventDefault();
            $("#help_wrapper .close-modal").click();
        }
    });
    $("#feedback_link_problem").click(function(event) {
        showFeedback(
            event,
            gettext("problem"),
            gettext("Report a Problem"),
            gettext("Brief description of the problem*"),
            gettext("Details of the problem you are encountering*") + "<span class='tip'>" +
              gettext("Include error messages, steps which lead to the issue, etc.") + "</span>"
        );
    });
    $("#feedback_link_suggestion").click(function(event) {
        showFeedback(
            event,
            gettext("suggestion"),
            gettext("Make a Suggestion"),
            gettext("Brief description of your suggestion*"),
            gettext("Details*")
        );
    });
    $("#feedback_link_question").click(function(event) {
        showFeedback(
            event,
            gettext("question"),
            gettext("Ask a Question"),
            gettext("Brief summary of your question*"),
            gettext("Details*")
        );
    });
    $("#feedback_form").submit(function() {
        $("input[type='submit']", this).attr("disabled", "disabled");
    });
    $("#feedback_form").on("ajax:complete", function() {
        $("input[type='submit']", this).removeAttr("disabled");
    });
    $("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
        $("#feedback_form_wrapper").css("display", "none");
        $("#feedback_success_wrapper").css("display", "block");
        $("#feedback_success_wrapper").focus();
    });
    $("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
        $(".field-error").removeClass("field-error").removeAttr("aria-invalid");
        var responseData;
        try {
            responseData = jQuery.parseJSON(xhr.responseText);
        } catch(err) {
        }
        if (responseData) {
            $("[data-field='"+responseData.field+"']").addClass("field-error").attr("aria-invalid", "true");
            $("#feedback_error").html(responseData.error).stop().css("display", "block");
        } else {
            // If no data (or malformed data) is returned, a server error occurred
            htmlStr = gettext("An error has occurred.");
% if settings.FEEDBACK_SUBMISSION_EMAIL:
            htmlStr += " " + _.template(
              gettext("Please {link_start}send us e-mail{link_end}."),
              {link_start: '<a href="#" id="feedback_email">', link_end: '</a>'},
              {interpolate: /\{(.+?)\}/g})
% else:
            // If no email is configured, we can't do much other than
            // ask the user to try again later
            htmlStr += gettext(" Please try again later.");
% endif
            $("#feedback_error").html(htmlStr).stop().css("display", "block");
% if settings.FEEDBACK_SUBMISSION_EMAIL:
            $("#feedback_email").click(function(e) {
                mailto = "mailto:" + "${settings.FEEDBACK_SUBMISSION_EMAIL}" +
                    "?subject=" + $("#feedback_form input[name='subject']").val() +
                    "&body=" + $("#feedback_form textarea[name='details']").val();
                window.open(mailto);
                e.preventDefault();
            });
%endif
        }
        // Make change explicit to assistive technology
        $("#feedback_error").focus();
    });
})(this)
</script>

%endif
