EVOLUTION-NINJA

Edit File: add_topics.php

<?php echo view('includes/admin_header.php') ?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/jqgrid/css/ui.jqgrid.css'); ?>" />

<script type="text/ecmascript" src="<?php echo base_url('public/assets/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script>
<script type="text/ecmascript" src="<?php echo base_url('public/assets/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script>
<script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script>

<div class="content-wrapper">
  
  <section class="content-header">
    <h1 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">
      ADD TOPICS
      <small></small>
    </h1>
 <a href="javascript:history.back()" class="btn btn-primary" style="float: right;">Back</a>
  </section>
  
  <section class="content">

<button type="button" class="btn btn-primary btn-sm access_add_btn" data-toggle="modal" data-target="#myModal1">
			Add Topics
		</button>

<div id="jaytab" style="margin-top:3%; margin-left: 15%;" class="col-md-offset-1 grid">
      <table id="list2"></table>
      <div id="pager2"></div>
      <div id="dialogSelectRow" title="Warning" style="display:none">
        <p>Please select row</p>
      </div>
    </div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Add Topics</h4>
					</div>

<input type="hidden" class="form-control col-sm-8" name="login_id" value="<?php echo session()->get('login_id'); ?>">
        <input type="hidden" class="form-control col-sm-8" name="user_type_id" value="<?php echo session()->get('user_type_id'); ?>">
        <input type="hidden" name="login_id" value="<?php echo session()->get('login_id'); ?>">

<div class="form-group">
          <label class="control-label col-sm-4">Select Category Name</label>
          <div class="col-sm-6" name="subject">
            <select class="form-control" name="domain_id" id="category_list" required>
              <option value="">Select Category</option>
              <?php if ($domain) {
                foreach ($domain as $val) { ?>
                  <option value="<?php echo $val->domain_id ?>"><?php echo $val->domain_name; ?></option>
              <?php }
              } ?>
            </select>
          </div>
        </div>

<div class="form-group">
          <label class="control-label col-sm-4">Select Subject Name</label>
          <div class="col-sm-6" name="subject">
            <select class="form-control" name="sub_domain_id" id="sub_domains" required>
              <option value="">Select Subject</option>
            </select>
          </div>
        </div>

<div class="form-group">
          <label class="control-label col-sm-4">Select Chapter</label>
          <div class="col-sm-6">
            <select class="form-control chapter_list" name="chapter" required>
              <option value="">Select Chapter</option>
            </select>
          </div>
        </div>

<div class="form-group">
          <label class="control-label col-sm-4 col-xs-12">Topic Name</label>
          <div class="col-sm-6 col-xs-9">
            <input name="topic_name[]" type="text" class="form-control topic_name" pattern="^[^\s]+.*$" required="" />
          </div>
          <div class="form-group col-xs-3 col-sm-2 col-md-2 add_field">
            <button type="button" class="btn btn-default center-block add_fields">Add</button>
          </div>
        </div>

<div class="form-group" style="padding-top:10px;">
          <div class="col-sm-offset-4 col-sm-8 col-xs-offset-4 col-xs-4">
            <button type="submit" class="btn btn-primary submit">Submit</button>
          </div>
          
        </div>
      </form>
    </div>

</section>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Update Topic</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="update_topics">
            <input type="hidden" class="form-control col-sm-8" name="login_id" value="<?php echo session()->get('login_id'); ?>">
            <input type="hidden" class="form-control col-sm-8" name="user_type_id" value="<?php echo session()->get('user_type_id'); ?>">
            <input type="hidden" class="topic_id" name="topic_id" value="" />
            <input type="hidden" class="chapter_id" name="chapter_id" value="" />

<div class="form-group">
              <label class="control-label col-sm-4">Select Category Name</label>
              <div class="col-sm-8" name="subject">
                <select class="form-control modal_category_list" name="domain_id" id="edit_category_list" required>
                  <option value="">Select Category</option>
                  <?php if ($domain) {
                    foreach ($domain as $val) { ?>
                      <option value="<?php echo $val->domain_id ?>"><?php echo $val->domain_name; ?></option>
                  <?php }
                  } ?>
                </select>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Select Subject Name</label>
              <div class="col-sm-8" name="subject">
                <select class="form-control sub_domain_list" id="sub_domain_list" name="sub_domain_id" required>
                  <option value="">Select Subject</option>

</select>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Select Chapter</label>
              <div class="col-sm-8">
                <select class="form-control chapter_list" id="edit_chapter_list" name="chapter" required>
                  <option value="">Select Chapter</option>
                </select>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Topic Name</label>
              <div class="col-sm-6">
                <input name="topic_name[]" type="text" pattern="^[^\s]+.*$" class="form-control edit_topic_name" required="" />
              </div>

<div class="form-group" style="padding-top:10px;">
              <div class="col-sm-offset-4 col-sm-8">
                <button type="submit" class="btn btn-primary submit update_submit">Update</button>
              </div>
              
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

.row {
    margin: 0 !important;
  }

.ui-timepicker-wrapper {
    width: 128px !important;
  }
</style>

$('.add_fields').click(function(e) {

$('#multiple_topics_div').append('<div class="form-group row"><label class="control-label col-sm-4">Topic Name</label><div class="col-sm-6"><input name="topic_name[]" type="text" class="form-control topic_name" required="" /></div><div class="form-group col-xs-2 col-sm-2 col-md-2 remove_field"><a href="javascript:void(0);" class="remove_fields"><span class="glyphicon glyphicon-remove"></span></a></div></div>');

$(".remove_fields").click(function() {
        $(this).closest('.row').remove();
      });
    });

$('.add_edit_fields').click(function(e) {

$('#multiple_edit_topics_div').append('<div class="form-group row"><label class="control-label col-sm-4">Topic Name</label><div class="col-sm-6"><input name="topic_name[]" type="text" class="form-control topic_name" required="" /></div><div class="form-group col-xs-2 col-sm-2 col-md-2 remove_field"><a href="javascript:void(0);" class="remove_fields"><span class="glyphicon glyphicon-remove"></span></a></div></div>');

$(".remove_fields").click(function() {
        $(this).closest('.row').remove();
      });
    });

$('#add_training_plan').submit(function(e) {
      e.preventDefault();

formdata = new FormData($(this)[0]);

//$(".submit").attr('disabled', 'disabled');
      $(".submit").text("Submitting...");

$.ajax({
        type: 'post',
        url: '<?php echo site_url('add_chapter_topics') ?>',
        data: formdata,
        contentType: false,
        processData: false,
        success: function(response) {
          // response=jQuery.parseJSON(response);
          console.log(response);
          if (response.result == 1) {
            $(".submit").text("Submit");
            $("#myModal1").modal("hide");
						$(".multiple_fields").empty();
            // $(".submit").removeAttr('disabled');
            toastr["success"](response.message);
            $("#list2").setGridParam({
              datatype: 'json',
              page: 1
            }).trigger('reloadGrid');
            $('#add_training_plan')[0].reset();
            $("#multiple_topics_div").empty();
            // swal(response.message);
          } else {
            toastr["error"](response.message);
            //$('#add_training_plan')[0].reset();
            $(".submit").text("Submit");
          }
        }
      });
    });

//grid

CallGrid();

function CallGrid(access_rights_global, access_result_global) {
      jQuery("#list2").jqGrid({
        url: "<?php echo site_url('get_topics_list_admin') ?>",
        mtype: "get",
        datatype: "json",
        colNames: ['Chapter id', 'Category', 'Subject', 'Chapter'],
        colModel: [{
            name: 'chapter_id',
            index: 'chapter_id',
            width: 40,
            hidden: true,
            editable: false,
            key: true
          },
          {
            name: 'domain_name',
            index: 'domain_name',
            editable: false,
            width: 300
          },
          {
            name: 'sub_domain',
            index: 'sub_domain',
            editable: false,
            width: 250
          },
          {
            name: 'chapter_name',
            index: 'chapter_name',
            editable: false,
            width: 250
          },
        ],
        rowNum: 20,
        rowTotal: 2000,
        rowList: [20, 30],
        rownumbers: true,
        //rownumWidth: 60,
        pager: "#pager2",
        sortname: 'id',
        viewrecords: true,
        gridview: true,
        //autowidth: true,
        sortorder: "asc",
        shrinkToFit: true,
        loadonce: true,
        caption: "Topic List",
        subGrid: true,

subGridRowExpanded: function(subgrid_id, row_id) {
          var chapter_id = $('#list2').jqGrid('getCell', row_id, 'chapter_id');
          var subgrid_table_id;
          subgrid_table_id = subgrid_id + "_t";
          jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
          
          // CallQuestionGrid(row_id);
          jQuery("#" + subgrid_table_id).jqGrid({
            url: "<?php echo site_url('get_admin_chapter_wise_topics'); ?>/" + chapter_id,
            datatype: "json",
            colNames: ['SI', 'Action', 'Topic Name', 'Added Date'],
            colModel: [{
                name: 'topic_id',
                index: 'topic_id',
                width: 50,
                hidden: true,
                editable: false,
                key: true
              },
              {
                name: '',
                index: '',
                search: false,
                width: 40,
                editable: false,
                formatter: function(cellvalue, options, rowObject) {
                  var retVal = "";
                  var retVal = '<a data-toggle="tooltip" title="Edit" class="edit" onclick="edit(' + rowObject.topic_id + ',' + rowObject.chapter_id + ')" href="javascript:void(0);"><span class="glyphicon glyphicon-edit"></span></a> <a data-toggle="tooltip" title="Delete" class="delete' + rowObject.topic_id + '" onclick="Delete(' + rowObject.topic_id + ')"; class="delete" href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>';
                  return retVal;
                }
              },
              {
                name: "topic_name",
                index: "topic_name",
                align: 'center',
                width: 65
              },
              {
                name: "created_at",
                index: "created_at",
                align: 'center',
                width: 40
              },
            ],
            height: 'auto',
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            sortname: 'num',
            sortorder: "asc",
            loadonce: true,
            autoencode: true,

}).navGrid('#' + subgrid_table_id + '', {
            edit: false,
            add: false,
            del: false,
            search: false
          });
        }

});
      $("#list2").jqGrid("setLabel", "rn", "SL");
      $("#list2").jqGrid('filterToolbar', {
        searchOperators: false,
        stringResult: true,
        searchOnEnter: false,
        defaultSearch: "cn"
      }); //for multisearch code,remove if not required

$("#list2").jqGrid('navGrid', '#pager2', {
        edit: false,
        add: false,
        del: false,
        search: false,
        refreshstate: "current"
      }, {}, {}, {}, {
        sopt: ['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
        closeOnEscape: true,
        multipleSearch: true,
        closeAfterSearch: true,
        closeAfterDelete: true,
        closeAfterEdit: true
      }, );
    }
  });

}
          });

} else {

$(".sweet-alert").hide();
          $(".sweet-overlay").hide();
        }

});
  }

// function edit(id, chapter_id) {
  //   var options = '';
  //   options += '<option value="">Select Category</option>';
  //   options += '<?php //if ($domain) {
                    //                 foreach ($domain as $val) { 
                    ?>';
  //   options += '<option value="<?php //echo $val->domain_id 
                                  ?>"><?php //echo $val->domain_name; 
                                                                    ?></option>';
  //   options += '<?php //}
                    //               } 
                    ?>';
  //   $('.modal_category_list').html(options);

//   var type = "post";
  //   $(".topic_id").val(id);
  //   $(".chapter_id").val(chapter_id);
  //   $.ajax({
  //     type: type,
  //     url: "<?php //echo site_url('edit_topics'); 
                ?>",
  //     data: {
  //       'topic_id': id
  //     },
  //     success: function(response) {
  //       response = jQuery.parseJSON(response);
  //       console.log(response);
  //       if (response.result == 1) {
  //         $("#myModal").modal('show');
  //         $("#edit_category_list").val(response.message.domain_id);
  //         $('.modal_category_list option[value!="' + response.message.domain_id + '"]').remove();
  //         //$('#edit_category_list option[value!="'+response.message.domain_id+'"]').remove();
  //         subjects(response.message.domain_id);
  //         $('.sub_domain_list option[value!="' + response.message.sub_domain_id + '"]').remove();
  //         chapter(response.message.sub_domain_id);
  //         $('#edit_chapter_list option[value!="' + response.message.chapter_id + '"]').remove();
  //         $(".edit_topic_name").val(response.message.topic_name);
  //       }
  //     }
  //   });

// }

$('#update_topics').submit(function(e) {
    e.preventDefault();
    formdata = new FormData($(this)[0]);
    $(".update_submit").attr('disabled', 'disabled');
    $(".update_submit").text("Updating...");

$.ajax({
      type: 'post',
      url: '<?php echo site_url('update_topics') ?>',
      data: formdata,
      contentType: false,
      processData: false,
      success: function(response) {
        // response = jQuery.parseJSON(response);
        console.log(response);
        if (response.result == 1) {
          $(".update_submit").text("Submit");
          $(".update_submit").removeAttr('disabled');
          toastr["success"](response.message);
          $("#list2").setGridParam({
            datatype: 'json',
            page: 1
          }).trigger('reloadGrid');
          $('#update_topics')[0].reset();
          $("#myModal").modal('hide');
          $('#multiple_edit_topics_div').empty();
        } else {
          toastr["error"](response.message);
          $(".update_submit").text("Submit");
          $(".update_submit").removeAttr('disabled');
          $('#multiple_edit_topics_div').empty();    
        }
      }
    });
  });

$("#sub_domains").change(function() {
    var sub_domain_id = $("#sub_domains").val();
    $.ajax({
      url: "<?php echo site_url('get_topics_chapters') ?>",
      type: "POST",
      data: {
        'sub_domain_id': sub_domain_id
      },
      async: false,
      success: function(response) {
        // response=jQuery.parseJSON(response);
        console.log(response);
        if (response.result == 1) {
          var options = '';
          options += '<option value="">Select Chapter</option>';
          $.each(response.message, function(idx, vx) {
            options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
          });
          $('.chapter_list').html(options);
          //$('.chapter_list').SumoSelect({ selectAll: true });
        } else {
          var options = '';
          options += '<label class="control-label col-sm-4">Select Chapter</label>';
          options += '<div class="col-sm-8">';
          options += '<select class="form-control chapter_list" name="chapter[]">';
          options += '<option value="">Select Chapter</option>';
          options += '</select>';
          options += '</div>';
          $('#chapter').html(options);
        }
      }
    });
  });

$("#sub_domain_list").change(function() {
    var sub_domain_id = $("#sub_domain_list").val();
    chapter(sub_domain_id);
  });
  function chapter(sub_domain_id, id) {
    $.ajax({
      url: "<?php echo site_url('get_topics_chapters') ?>",
      type: "POST",
      data: {
        'sub_domain_id': sub_domain_id,
        'training_plan_id': id
      },
      async: false,
      success: function(response) {
        // response=jQuery.parseJSON(response);
        console.log(response);
        if (response.result == 1) {
          var options = '';
          options += '<option value="">Select Category</option>';
          $.each(response.message, function(idx, vx) {
            options += '<option value="' + vx.chapter_id + '">' + vx.chapter_name + '</option>';
          });
          $('.chapter_list').html(options);
        }
      }
    });
  }

$("#category_list").change(function() {

$("#edit_category_list").change(function() {
    var domain_id = $("#edit_category_list").val();
    subjects(domain_id);
  });
  function subjects(domain_id) {
    $.ajax({
      url: "<?php echo site_url('get_domain_subdomain_admin') ?>",
      type: "POST",
      data: {
        'domain_id': domain_id
      },
      async: false,
      success: function(response) {
        // response = jQuery.parseJSON(response);
        console.log(response);
        if (response.result == 1) {
          var options = '';
          options += '<option value="">Select Category</option>';
          $.each(response.message, function(idx, vx) {
            options += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
          });
          $('#sub_domain_list').html(options);
        } else {
          var options = '';
          options += '<option value="">Select Category</option>';

$('#sub_domain_list').html(options);
        }
      }
    });
  }

const cancelButton = document.getElementById("cancel");

// Add a click event listener to the cancel button
cancelButton.addEventListener("click", function() {
  // Clear the form data
  document.forms[0].reset();
});
</script>

<?php echo view('includes/admin_footer.php') ?>

.content-wrapper{
		background-image: url(public/assets/website_assets/images/banner.png);
		background-size:cover;
	}

.ui-jqdialog .ui-jqdialog-titlebar {
    height: 29px !important;
    background-color: #001a00;
    color: white;
    padding-left: 10px;
  }

.fm-button {
    height: 21px !important;
    padding: 1px;
    margin-right: 10px !important;
    height: 21px !important;
    width: 43%;
    margin-top: -7px !important;
  }

.ui-jqdialog-content td.navButton {
    padding-top: 12px !important;
  }

.ui-jqgrid .ui-jqgrid-titlebar {
    height: 27px !important;
    color: white !important;
  }

.ui-jqgrid-bdiv {
    height: auto !important;

}

.ui-widget-overlay {
    z-index: 0 !important;
  }

.ui-jqgrid-hdiv ui-state-default {
    cursor: default !important
  }

ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
    border: 1px solid #fed22f;
    background: #ffe45c;
  }

.ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default {
    font-weight: bold;
    color: black;
  }

@media only screen and (min-width:320px) and (max-width:640px) {
    #jaytab {
      width: auto !important;
      overflow-x: scroll !important;
    }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
      width: 900px !important;
    }

.ui-jqgrid-view {
      width: 900px !important;
    }

.ui-jqgrid-hdiv {
      width: 900px !important;
    }

.ui-jqgrid-htable {
      width: 900px !important;
    }

.ui-jqgrid-bdiv {
      width: 900px !important;
    }

#list2 {
      width: 900px !important;
    }

#pager2 {
      width: 900px !important;
    }
  }

@media only screen and (min-width:641px) and (max-width:991px) {
    #jaytab {
      width: auto !important;
      overflow-x: scroll !important;
    }