<% if(it.layout_clean_mode) {%>
<% layout("../layouts/admin/Clean") %>
<% } else {%>
<% layout("../layouts/admin/Main") %>
<%}%>



<%~ includeFile("../partials/admin/Breadcrumb", it)%>


<div class="tab-content m-xl-4 m-2">
  <div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
      <%~ includeFile("../partials/admin/GlobalResponse.eta", it) %>
      <div class="form-container card py-3">
        <h5 class="primaryHeading2 mb-4 text-md-left pl-3">
          <%= it.heading %>
        </h5>

        <form action="/admin/questions-add" method="POST" id="add-question-form">


          <div class="form-group required col-xl-6 col-12 ">
            <label for="quiz_id" class="control-label">Quiz</label>

            <small class="text-muted">Can select one</small>
            <select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select-quiz_id" name="quiz_id" required onchange="questionSelectionChanged(this, event)">
              <% it.quizzes.forEach(function(quiz) { %>
              <option class="select_mapping_status_option" value="<%= quiz.id %>" data-last-order="<%= quiz.lastOrder ?? 1 %>">
                <%= quiz.name %>
              </option>
              <% }) %>
            </select>

          </div>

          <div class="form-group required col-xl-6 col-12">
            <label for="order" class="control-label">Order</label>

            <input type="number" class="form-control data-input disabled" disabled id="shown_number_order" value="<%= it.quizzes[0].lastOrder ? parseInt(it.quizzes[0].lastOrder) + 1 : 1 %>" step="1" min="1" />
            <input type="number" required hidden class="form-control data-input disabled" id="number_order" name="order" value="<%= it.quizzes[0].lastOrder ? parseInt(it.quizzes[0].lastOrder) + 1 : 1  %>" step="1" min="1" />

          </div>

          <div class="form-group required col-xl-6 col-12 ">
            <label for="type" class="control-label">Type</label>


            <small class="text-muted">Can select one</small>
            <select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select_mapping_type" name="type" required>
              <% Object.keys(it.type_mapping()).forEach(function(prop) { %>
              <% const same = it.form_fields["type"] == prop ? 'selected' : false %>
              <option class="select_mapping_type_option<%= same ? '_' + same : '' %>" value="<%= prop %>" <%= same %>>
                <%= it.type_mapping()[prop] %>
              </option>
              <% }) %>
            </select>


          </div>

          <div class="form-group required col-xl-6 col-12 ">
            <label for="question" class="control-label">Question</label>


            <input type="text" required class="form-control data-input" id="text_question" name="question" value="<%= it.form_fields['question'] %>" />


          </div>

          <div class="form-group col-xl-6 col-12" hidden id="image-dimensions">
            <label for="image_dimensions" class="control-label">Image dimensions</label></br>

            <div id="image-dimensions" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
              <div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
                <label for="image-width">Width</label>
                <input type="number" oninput="changeDimension('width',this)" class="form-control data-input" id="image-width" name="image_width" step="any" value="<%= it.form_fields['image_width'] %>" />

              </div>
              <div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
                <label for="image-height">Height</label>
                <input type="number" oninput="changeDimension('height',this)" class="form-control data-input" id="image-height" name="image_width" step="any" value="<%= it.form_fields['image_height'] %>" />
              </div>
            </div>
            <div class="mt-3">Demo box</div>
            <div id="demo-box" style="width: <%= it.form_fields['image_width'] ? it.form_fields['image_width'] : 0 %>px; height: <%= it.form_fields['image_height'] ? it.form_fields['image_height'] : 0 %>px; border: 1px solid black;" class="mt-3 d-flex align-items-center justify-content-center text-center">
            </div>
          </div>

          <div class="form-group col-xl-6 col-12">
            <label for="note" class="control-label">Note</label>



            <textarea class="form-control data-input" id="text_note" name="note" rows="3"><%= it.form_fields['note'] %></textarea>


          </div>

          <div class="form-group col-xl-6 col-12">
            <label for="note_type" class="control-label">Note type</label>


            <small class="text-muted">Can select one</small>
            <select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select_mapping_note_type" name="note_type">
              <option class="select_mapping_note_type_option"></option>

              <% Object.keys(it.note_type_mapping()).forEach(function(prop) { %>
              <% const same = it.form_fields["note_type"] == prop ? 'selected' : false %>
              <option class="select_mapping_note_type_option<%= same ? '_' + same : '' %>" value="<%= prop %>" <%= same %>>
                <%= it.note_type_mapping()[prop] %>
              </option>
              <% }) %>
            </select>


          </div>

          <div class="form-group col-xl-6 col-12 ">
            <label for="depends_on" class="control-label">Depends on question</label></br>
            <small class="text-muted">If you want this question to depend on another question answer fill these.</small>

            <input type="text" hidden class="form-control data-input" id="text_depends_on" name="depends_on" />

            <div id="depends-container" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
              <div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
                <label for="depended_question_id">Question</label>
                <select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="depended_question_id">
                  <option class="select_mapping_status_option" value=""></option>
                  <% it.questions.forEach(function(ques) { %>
                  <option class="select_mapping_status_option" value="<%= ques.id %>">
                    <%= ques.question %>
                  </option>
                  <% }) %>
                </select>
              </div>
              <div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
                <label for="depended_answer">Answer</label>
                <input type="text" class="form-control data-input" id="depended_answer" />
              </div>
            </div>
          </div>

          <div class="form-group col-xl-6 col-12" hidden id="slider-select">
            <label for="slider_range" class="control-label">Slider range</label>
            <input type="text" hidden class="form-control data-input" id="text_slider_range" name="slider_range" value="<%= it.form_fields['slider_range'] %>" />
            <div id="slider-range-container" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
              <div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
                <label for="min-slide-range">Min</label>
                <input type="number" class="form-control data-input" id="min-slide-range" />
              </div>
              <div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
                <label for="max-slide-range">Max</label>
                <input type="text" class="form-control data-input" id="max-slide-range" />
              </div>
            </div>

          </div>

          <div class="form-group col-xl-6 col-12 ">
            <label for="output_variable_name" class="control-label">Main output variable</label>
            <small class="text-muted">Can select one</small>
            <select class="selectpicker extra-output-var custom-picker d-block w-100" data-style="btn-light" data-live-search="true" name="output_variable_name" id="text_output_variable_name">
              <option class="select_main_output_variable_option" value=""></option>
              <% it.outputVariables.forEach(function(oVar) { %>
              <option class="select_main_output_variable_option" value="<%= oVar.name %>">
                <%= oVar.name %>
              </option>
              <% }) %>
            </select>

          </div>

          <div class="form-group col-xl-6 col-12 ">
            <label for="weight" class="control-label">Weight</label>


            <input id="number_weight" name="weight" value="<%= it.form_fields['weight'] %>" class="form-control" type="number" min="0" />


          </div>

          <div class="form-group col-xl-6 col-12" id="extra-outputs">
            <label for="extra_output_variable" class="control-label">Extra output variables</label>

            <input type="text" class="form-control data-input" hidden id="text_extra_output_variable" name="extra_output_variable" value="<%= it.form_fields['extra_output_variable'] %>" />

            <div class="output-variable-container mb-2 d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
              <div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
                <label for="extra-output-var">Output variable</label>
                <select class="selectpicker custom-picker d-block w-100 extra-output-var" id="extra-output-var" data-style="btn-light" data-live-search="true">
                  <option class="select_mapping_status_option" value=""></option>
                  <% it.outputVariables.forEach(function(oVar) { %>
                  <option class="select_mapping_status_option" value="<%= oVar.name %>">
                    <%= oVar.name %>
                  </option>
                  <% }) %>
                </select>
              </div>
              <div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
                <label for="extra-output-weight">Weight</label>
                <input type="number" class="form-control data-input extra-output-weight" />
              </div>
            </div>

            <button type="button" class="add-another-extra btn btn-success my-3" onclick="addExtraOutputVariable()">Add another extra</button>
          </div>

          <div class="form-group pl-3">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>
<script>
  const outputVariables = [<% it.outputVariables.forEach(function(oVar) { %><%~ `'${oVar.name}',` %> <% }) %>];
</script>
<script src="/js/main.js?v=1.2"></script>