<!--
**Project: DMPRoadmap
**Description: This block displays adding a new question, its guidance, and options when multiple choice is selected
in the admin interface.
**Arguments transferred: an instance of 'section'
**Copyright: Digital Curation Centre and University of California Curation Center
-->

<% @new_question = Question.new %>
<% @new_question.number = section.questions.count + 1 %>


<%= form_for @new_question, url: {action: "admin_createquestion"}, html: {id: "new_question_#{section.id}"} do |f| %>
  <%= f.hidden_field :section_id, value: section.id %>
  <div class="question-div">
    <table class="dmp_details_table phase">
      <!--Question number -->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.question_number_label")%></td>
        <td><%= f.number_field :number, in: 1..50, class: "number_field has-tooltip", "data-toggle" => "tooltip", title: t("org_admin.questions.number_help_text") %>

          <div class="border_bottom"></div>
        </td>
      </tr>

      <!--Question text -->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.question_text_label")%></td>
        <td><%= f.text_area :text, rows: "5", id: "new_question_text_#{section.id}" %>
          <div class="border_bottom"></div>
        </td>
      </tr>

      <!-- Question format -->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.answer_format_label")%></td>
        <td><%= f.hidden_field :section_id, value: section.id, class: "section_id" %>
          <div id="new-ques-format" class="ques_format">
            <div class="div_left_icon">
              <%= f.select :question_format_id,
                options_from_collection_for_select(QuestionFormat.all.order("title"), :id, :title, QuestionFormat.find_by_title(t("helpers.text_area")).id),
                  {}, id: "new-select-format-#{section.id}"%>
            </div>
            <div class="div_right_icon">
              <%= link_to( image_tag("help_button.png"), "#", class: "question_format_popover", rel: "popover", "data-html" => "true",  "data-content" => t("org_admin.questions.question_format_help_text_html"))%>
            </div>

          </div>
          <div class="clearfix"></div>
          <!--display form to enter option from checkbox/radio button/ dropdown/ multi select box-->
          <div id="new-options-<%= section.id%>" style="display:none;" class="ques_format_option">
            <table class="options_table">
              <thead>
                <tr>
                  <th nowrap class="small"><%= t("org_admin.option_order_label")%></th>
                  <th nowrap class="medium"><%= t("org_admin.option_text_label")%></th>
                  <th nowrap class="small"><%= t("org_admin.option_default_label")%></th>
                  <th nowrap class="small"><%= link_to( image_tag("help_button.png"), "#", class: "question_options_popover", rel: "popover", "data-html" => "true", "data-content" => t("org_admin.questions.question_options_help_text_html"))%></th>
                </tr>
              </thead>
              <tbody class="options_tbody">
                <% i = 0 %>

                <% 2.times {@new_question.question_options.build } %>
                  <% @new_question.question_options.each do |options_q|%>
                    <%= f.fields_for :question_options, options_q do |op|%>
                      <% i = i + 1%>
                      <% options_q.number = i %>
                      <%= render "option_fields", f: op %>
                    <% end %>

                  <% end %>

              </tbody>

            </table>

            <a href="#" class="add-option"><%= t("org_admin.add_option_label") %></a>


            <div class="clearfix"></div>
            <!--display for selecting comment box when multiple choice is being used-->
            <%= f.check_box :option_comment_display, as: :check_boxes%><%= f.label t("org_admin.questions.option_comment_display_checkbox"), class: "checkbox inline"%>
          </div>
          <div class="clearfix"></div>
          <!--display for default value for text field label-->
          <div id="new-default-text-field-<%= section.id%>" style="display:none;" class="ques_format">
            <div>
              <%= t("org_admin.questions.default_answer_label")%>
            </div>
          </div>
          <div class="clearfix"></div>
          <!--display for default value for text area label -->
          <div id="new-default-text-area-<%= section.id%>" style="display:none;" class="ques_format">
            <div>
              <%= t("org_admin.questions.default_answer_label")%>
            </div>
          </div>
          <div class="clearfix"></div>
          <div id="new-default-value-field-<%= section.id%>" style="display:none;" class="ques_format">
            <div class="div_left_icon">
              <%= text_area_tag("new-question-default-value", "", class: "tinymce") %>
            </div>
            <div class="div_right_icon">
              <%= link_to( image_tag("help_button.png"), "#", class: "default_answer_popover", rel: "popover", "data-html" => "true", "data-content" => t("org_admin.questions.default_answer_help_text_html"))%>
            </div>

          </div>
          <div class="add_space"></div>
          <div class="clearfix"></div>
          <div class="border_bottom"></div>
        </td>
      </tr>

        <!-- Suggested answer or Example-->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.suggested_or_example_answer_label")%></td>
        <td>
          <div class="div_left_icon">
            <% suggested_answer = @new_question.suggested_answers.build %>
            <%= f.fields_for :suggested_answers, suggested_answer do |s|%>
              <%= s.hidden_field :org_id, value: current_user.org_id %>
              <ul>
                <li><%= s.select :is_example, {t("org_admin.questions.example_answer_label") => true, t("org_admin.questions.suggested_answer_label") => false} %></li>
                <li><%= s.text_area :text, rows: 5 %></li>
              </ul>
            <% end %>
          </div>
          <div class="div_right_icon">
            <%= link_to( image_tag("help_button.png"), "#", class: "suggested_answer_popover", rel: "popover", "data-html" => "true", "data-content" => t("org_admin.questions.suggested_answer_help_text_html"))%>
          </div>
          <div class="clearfix"></div>
          <div class="border_bottom"></div>

        </td>
      </tr>

      <!-- Guidance for Question -->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.guidance_label")%></td>
        <td>
          <div class="div_left_icon">
            <%= text_area_tag("new-question-guidance", "", class: "tinymce") %>
          </div>
          <div class="div_right_icon">
            <%= link_to( image_tag("help_button.png"), "#", class: "question_guidance_popover", rel: "popover", "data-html" => "true", "data-content" => t("org_admin.questions.question_guidance_help_text_html"))%>
          </div>
          <div class="clearfix"></div>
          <div class="border_bottom"></div>
        </td>
      </tr>

      <!-- Themes -->
      <tr>
        <td class="first_template"><%= t("org_admin.questions.themes_label")%></td>
        <td>
          <div class="div_left_icon">
            <%= f.collection_select(:theme_ids,
                Theme.all.order("title"),
                :id, :title, {prompt: false, include_blank: t('helpers.none')}, {multiple: true})%>
          </div>
          <div class="div_right_icon">
            <%= link_to( image_tag("help_button.png"), "#", class: "question_themes_popover", rel: "popover", "data-html" => "true", "data-content" => t("org_admin.questions.question_themes_help_text_html"))%>
          </div>


        </td>
      </tr>
    </table>
    <br />

    <!-- submit buttons -->
    <div class="move_2_right">
      <%= hidden_field_tag :section_id, section.id, class: "section_id" %>
      <%= f.submit t("helpers.submit.save"), class: "btn btn-primary new_question_save_button" %>
      <%= hidden_field_tag :section_id, section.id, class: "section_id_new" %>
      <%= link_to t("helpers.submit.cancel"), '#', class: "btn cancel cancel_add_new_question" %>
    </div>
  </div>

<% end %>