<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>

<%!
from datetime import datetime
import pytz
from django.conf import settings
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
from openedx.core.djangolib.js_utils import js_escaped_string
from openedx.core.djangolib.markup import HTML, Text
from xmodule.tabs import CourseTabList
%>

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

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

<section id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-label="${_("{platform_name} Help").format(platform_name=static.get_platform_name())}">
  <div class="inner-wrapper" id="help_wrapper">
    ## TODO: find a way to refactor this
    <button class="close-modal "tabindex="0">
      <span class="icon fa fa-remove" aria-hidden="true"></span>
      <span class="sr">
        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
        ${_('Close')}
      </span>
    </button>

    <header>
      <h2>
	${Text(_('{platform_name} Help')).format(
	    platform_name=HTML(u'<span class="edx">{}</span>').format(static.get_platform_name())
	)}
      </h2>
      <hr>
    </header>

<%
  discussion_tab = CourseTabList.get_discussion(course) if course else None
  discussion_link = discussion_tab.link_func(course, reverse) if (discussion_tab and discussion_tab.is_enabled(course, user=user)) else None
%>

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

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

    <p>${Text(_('Have a {strong_start}question about something specific{strong_end}? You can contact the {platform_name} general support team directly:')).format(
        strong_start=HTML('<strong>'),
        strong_end=HTML('</strong>'),
        platform_name=static.get_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>

    <p class="note">${_('Please note: The {platform_name} support team is English speaking. While we will do our best to address your inquiry in any language, our responses will be in English.').format(
        platform_name=static.get_platform_name()
      )}</p>

  </div>

  <div class="inner-wrapper" id="feedback_form_wrapper">
    <button class="close-modal">
      <span class="icon fa fa-remove" aria-hidden="true"></span>
      <span class="sr">
        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
        ${_('Close')}
      </span>
    </button>

    <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" for="feedback_form_name">${_('Name')}*</label>
      <input name="name" type="text" id="feedback_form_name" aria-required="true">
      <label data-field="email" for="feedback_form_email">${_('E-mail')}*</label>
      <input name="email" type="text" id="feedback_form_email" aria-required="true">
% endif
      <label data-field="subject" for="feedback_form_subject">${_('Briefly describe your issue')}*</label>
      <input name="subject" type="text" id="feedback_form_subject" aria-required="true">
      <label data-field="details" for="feedback_form_details">${_('Tell us the details')}*
<span class="tip">${_('Include error messages, steps which lead to the issue, etc')}</span></label>
      <textarea name="details" id="feedback_form_details" aria-required="true"></textarea>
      <input name="issue_type" type="hidden">
% if course:
      <input name="course_id" type="hidden" value="${unicode(course.id)}">
% 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="0">
    <button class="close-modal" tabindex="0">
      <span class="icon fa fa-remove" aria-hidden="true"></span>
      <span class="sr">
        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
        ${_('Close')}
      </span>
    </button>

    <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>
    ${Text(_(
        '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=HTML('<a href="{}" target="_blank" id="feedback-faq-link" tabindex="0">').format(marketing_link('FAQ')),
        link_end=HTML('</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");
            $('area,input,select,textarea,button').removeAttr('tabindex');
            $(".help-tab a").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,
            "${_('problem') | n, js_escaped_string}",
            "${_('Report a Problem') | n, js_escaped_string}",
            "${_('Brief description of the problem') + '*' | n, js_escaped_string}" ,
            "${Text(_('Details of the problem you are encountering{asterisk}{begin_span}Include error messages, steps which lead to the issue, etc.{end_span}')).format(
                asterisk='*',
                begin_span=HTML('<span class=tip>'),
                end_span=HTML('</span>'),
            ) | n, js_escaped_string}"
        );
    });
    $("#feedback_link_suggestion").click(function(event) {
        showFeedback(
            event,
            "${_('suggestion') | n, js_escaped_string}",
            "${_('Make a Suggestion') | n, js_escaped_string}",
            "${_('Brief description of your suggestion') + '*' | n, js_escaped_string}",
            "${_('Details') + '*' | n, js_escaped_string}"
        );
    });
    $("#feedback_link_question").click(function(event) {
        showFeedback(
            event,
            "${_('question') | n, js_escaped_string}",
            "${_('Ask a Question') | n, js_escaped_string}",
            "${_('Brief summary of your question') + '*' | n, js_escaped_string}",
            "${_('Details') + '*' | n, js_escaped_string}"
        );
    });
    $("#feedback_form").submit(function() {
        $("input[type='submit']", this).attr("disabled", "disabled");
        $('area,input,select,textarea,button').attr('tabindex', -1);
        $("#feedback_form_wrapper .close-modal").focus();
    });
    $("#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 = "${_('An error has occurred.') | n, js_escaped_string}";
% if settings.FEEDBACK_SUBMISSION_EMAIL:
            htmlStr += " " + "${Text(_('Please {link_start}send us e-mail{link_end}.')).format(
              link_start=HTML('<a href="#" id="feedback_email">'),
              link_end=HTML('</a>'),
            ) | n, js_escaped_string}";
% else:
            // If no email is configured, we can't do much other than
            // ask the user to try again later
            htmlStr += " " + "${_('Please try again later.') | n, js_escaped_string}";
% 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 | n, js_escaped_string}" +
                    "?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