<div class="right_col mt-sm-3" role="main">
  <div class="row main_row max-w-1440">
    <a class="back-link" href="/sub-topics"><span class="fa fa-chevron-left mr-2"></span>Back to sub topics</a>
    <div class="x_panel form_panel mt-3">
      <div class="x_title">
        <h2 class="title-text mb-0">Edit Sub Topic</h2>
      </div>
      <div class="x_content">
        <form id="updateSubTopic" action="/sub-topics/update" method="post"
          class="form-horizontal form-label-left">
          <input type="hidden" name="sub_topic_Id" value="<%=data.id %>">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="col-form-label label-align" for="topic_id">Main Topic<span class="required">*</span></label>
                <div class="input-group flex-nowrap">
                  <!-- <span class="input-group-text"><img src="/images/categories.svg" class="mCS_img_loaded"></span> -->
                  <select class="select2_single form-control" name="topic_id" id="topic_id" tabindex="-1" single>
                    <option value="">Select Main Topic</option>
                    <% let i=0; for(topic of allTopic) { %>
                      <option value="<%=topic.id%>" <%=data.topic_id==topic.id ? 'selected' : '' %>>
                        <%=topic.name%>
                      </option>
                      <% } %>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="col-form-label label-align" for="name">Sub Topic Name<span class="required">*</span></label>
                <div class="input-group">
                  <!-- <span class="input-group-text"><img src="/images/subcategory.svg" class="mCS_img_loaded"></span> -->
                  <input type="text" name="name" class="form-control" placeholder="Enter Sub Topic Name.."
                    required="required" id="name" value="<%=data.name %>" maxlength="150">
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="col-form-label label-align" for="status">Status<span class="required">*</span></label>
                <div class="input-group flex-nowrap">
                  <!-- <span class="input-group-text"><img src="/images/status.svg" class="mCS_img_loaded"></span> -->
                  <select class="form-control" name="status" id="status" tabindex="-1" single>
                    <option value="1" <%=data.status=='1' ? 'selected' : '' %>>Active</option>
                    <option value="0" <%=data.status=='0' ? 'selected' : '' %>>Deactive</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="col-form-label label-align" for="note">Note</span></label>
                <textarea name="note" rows="5" class="form-control" placeholder="Enter Note.."
                  id="note"><%=data.note %></textarea>
              </div>
            </div>
          </div>

          <div class="ln_solid"></div>
          <div class="text-right">
            <button type="submit" id="updateSubTopicBtn" class="btn theme-btn form-button">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<%- include('./form_script'); %>

<script type="text/javascript">
  $("#updateSubTopic").submit(function (e) {
    e.preventDefault();
    $(document).find("span.text-danger").remove();
    var formData = $('#updateSubTopic').serialize();
    var url = $('#updateSubTopic').attr('action');
    $("#updateSubTopicBtn").prop('disabled', true);
    $.ajax({
      type: "POST",
      url: url,
      dataType: "json",
      data: formData,
      success: function (response) {
        if (response.success == true) {
          window.location = response.redirectUrl;
        }
      },
      error: function (response) {
        let errorMessages = '';
        $.each(response.responseJSON.errors, function (field_name, error) {
          $(document).find('[id=' + error.param + ']').after('<span class="help-block text-danger">' + error.msg + '</span>');
        })
      },
      complete: function () {
        $("#updateSubTopicBtn").prop('disabled', false);
      },
    })
  });
</script>