EVOLUTION-NINJA

Edit File: edit_course.php

<?php echo  view('includes/admin_header.php') ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/website_assets/css/timepicki.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/sumoselect/sumoselect.css'); ?>" />
<script type="text/javascript" src="<?php echo base_url('public/assets/sumoselect/jquery.sumoselect.min.js'); ?>"></script>

<div class="content-wrapper">
  
  <section class="content-header">
    <h1 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px;">
      Update Course
      <small></small>
    </h1>

</section>
  
  	<a href="javascript:history.back()" class="btn btn-primary" style="float: right; margin-right: 30px;">Back</a>

<div class="middle_work">
        
      <form class="form-horizontal course_form">
        <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 course_id" name="course_id" required>

<div class="row">
          <div class="col-sm-7">
            <div class="form-group">
              <label class="control-label col-sm-4">Select Category <span style="color:red;"> *</span></label>
              <div class="col-sm-8">
                <select class="form-control" id="catagory" name="domain_id" required>
                  <option value="">Select Category</option>
                  <?php
                  if ($domain) {
                    foreach ($domain as $val) {
                      if (is_object($val)) {
                  ?>
                        <option value="<?php echo $val->domain_id; ?>"><?php echo $val->domain_name; ?></option>
                  <?php
                      }
                    }
                  }

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

<div class="form-group sub_cate_div">
              <label class="control-label col-sm-4">Select Sub Category <span style="color:red;"> *</span></label>
              <div class="col-sm-8 ">
                <select class="form-control sub_category_list test" name="sub_domain_id[]" required>

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

<div class="form-group">
              <label class="control-label col-sm-4">Course Title <span style="color:red;"> *</span></label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="course_title" pattern="^[^\s]+(\s+[^\s]+)*" required>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Image</label>
              
              <div class="col-sm-8">
                <div class="panel panel-default">
                  <div class="panel-heading">Select Profile Image</div>
                  <div class="panel-body" align="center">
                    <input type="file" name="course_image" id="upload_image" accept="image/*" />
                    <div id="image_div"></div>
                    <br />
                    <div id="uploaded_image"></div>
                    <input type="hidden" name="course_cropped_image" id="crop_image_name">
                  </div>
                </div>
              </div>
            </div>

</div>

</div>

</div>

<div class="form-group">
              <label class="control-label col-sm-4">Video</label>
              <div class="col-sm-8">
                <input type="file" class="form-control" name="course_demo_video" accept="video/*">
                <div id="video_div"></div>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Languages <span style="color:red;"> *</span></label>
              <div class="col-sm-8">
                <select class="form-control" id="language" name="language" required>
                  <option value="">Select Language</option>
                  <option value="English">English</option>
                </select>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Price <span style="color:red;"> *</span></label>
              <div class="col-sm-8">
                <input type="text" class="form-control" pattern="[0-9]+" minlength="2" maxlength="6" name="course_price" required>
              </div>
            </div>

<div class="form-group">
              <label class="control-label col-sm-4">Course Type <span style="color:red;"> *</span></label>
              <div class="col-sm-8">
                <input class="course_type" style="width: 21% !important;margin-top: 10px;" type="checkbox" value="live" name="course_type[]">Live</label>
                <br class="hidden-xs hidden-md hidden-lg">
                <input class="course_type" style="width: 21% !important;margin-top: 10px;" type="checkbox" value="recorded" name="course_type[]">Recorded</label>
              </div>
            </div>

</div>

</div>

<div class="row" style="padding:20px; background: #fdfdfd; border-radius:5px;">
          <span style="color:red;"> *</span>
          <ul class="nav nav-pills" style="background: #ecebeb;">
            <li class="active"><a data-toggle="pill" href="#home">DESCRIPTION</a></li>
            <li><a data-toggle="pill" href="#menu1">CURRICULUM</a></li>
            
            
          </ul>

</div>
            <div id="menu1" class="tab-pane fade">

</div>
            <div id="menu2" class="tab-pane fade">

</div>
            <div id="menu3" class="tab-pane fade">
              <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
          </div>
        </div>

<div class="form-group" style="text-align:center;padding-top:30px;">
          <button type="submit" class="btn btn-primary submit">Update</button>
        </div>
      </form>
    </div>

<div id="uploadimageModal" class="modal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Upload & Crop Image</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-8 text-center">
                <div id="image_demo" style="width:350px; margin-top:30px"></div>
              </div>
              <div class="col-md-4" style="padding-top:30px;">
                <br />
                <br />
                <br />
                <button class="btn btn-success crop_image">Crop & Upload Image</button>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

</section>
  
</div>

<style>

.middle_work {
    padding-bottom: 30px;
    padding-top: 30px;
  }

.content-wrapper{
		background-image: url('http://localhost/amcad/public/assets/website_assets/images/banner.png');
	}

.form-control{
    border-radius: 5px;
  }

.row {
    margin: 0 !important;
  }

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

$(document).ready(function() {

$image_crop = $('#image_demo').croppie({
      enableExif: true,
      viewport: {
        width: 182,
        height: 166,
        type: 'square' //circle
      },
      boundary: {
        width: 300,
        height: 300
      }
    });

$('#upload_image').on('change', function() {
      var reader = new FileReader();
      reader.onload = function(event) {
        $image_crop.croppie('bind', {
          url: event.target.result
        }).then(function() {
          console.log('jQuery bind complete');
        });
      }
      reader.readAsDataURL(this.files[0]);
      $('#uploadimageModal').modal('show');
    });

$('.crop_image').click(function(event) {
      $image_crop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(response) {
        $.ajax({
          url: '<?php echo site_url("course_image_crop") ?>',
          type: "POST",
          data: {
            "image": response
          },
          success: function(data) {
            response = jQuery.parseJSON(data);
            console.log(response);
            if (response.result == 1) {
              $('#uploadimageModal').modal('hide');
              $("#uploaded_image").html('<img src ="<?php echo base_url("public/course_images"); ?>/' + response.message + '" style="width:182px;height:166px"/>');
              $('#crop_image_name').val(response.message);

}

}
        });
      });
    });

var course_id = '<?php echo current_url(true)->getSegment(4); ?>';

$(".course_id").val(course_id);

$.ajax({
      url: "<?php echo site_url('single_course_details') ?>",
      type: "POST",
      data: {
        'course_id': course_id
      },
      async: false,
      success: function(response) {
        // response = jQuery.parseJSON(response);

timings_global = response.timings;
        coursetype_global = response.course_details.available_type;

console.log(response);
        if (response.result == 1) {
          $('#catagory option[value="' + response.course_details.domain_id + '"').attr('selected', 'selected');

$("input[name=course_title]").val(response.course_details.course_title);
          if (response.course_details.course_image != "") {
            var image_name = response.course_details.course_image;
            $("#image_div").html('<a target="_blank" href="<?php echo base_url('public/course_images') ?>/' + response.course_details.course_image + '">' + image_name.slice(10) + '</a>');
          }
          if (response.course_details.course_demo_video != "") {
            var video_name = response.course_details.course_demo_video;
            $("#video_div").html('<a target="_blank" href="<?php echo base_url('public/course_videos') ?>/' + response.course_details.course_demo_video + '">' + video_name.slice(10) + '</a>');
          }

$("select[name=language]").val(response.course_details.language);
          $("input[name=course_price]").val(response.course_details.course_price);

if (CKEDITOR.instances['content']) {
            try {
              CKEDITOR.instances['content'].destroy(true);
            } catch (e) {}
          }
          CKEDITOR.replace('content');
          CKEDITOR.instances['content'].setData(response.course_details.description);

if (CKEDITOR.instances['content1']) {
            try {
              CKEDITOR.instances['content1'].destroy(true);
            } catch (e) {}
          }
          CKEDITOR.replace('content1');
          CKEDITOR.instances['content1'].setData(response.course_details.curriculam);

if (CKEDITOR.instances['content2']) {
            try {
              CKEDITOR.instances['content2'].destroy(true);
            } catch (e) {}
          }
          CKEDITOR.replace('content2');
          CKEDITOR.instances['content2'].setData(response.course_details.instructor);

SubCategory(response.course_details.domain_id, response.course_details.sub_domain_id);

var course_type = jQuery.parseJSON(response.course_details.c_type);

$.each(course_type, function(key, val) {

$('input[value="' + val + '"]').prop("checked", true);
          });

var sel = $('input[type=checkbox]:checked').map(function(_, el) {
            return $(el).val();
          }).get();
          console.log(sel);

CallCourseType(sel, response.course_details.available_type);

}

}
    });

function CallCourseType(sel, coursetype_global) {

if (jQuery.inArray("live", sel) !== -1) {
        var available_type_fields = '';
        available_type_fields += '<div class="form-group">';
        available_type_fields += '<label class="control-label col-sm-4">Available Type</label>';
        available_type_fields += '<div class="col-sm-8">';
        available_type_fields += '<input class="available_type" id= "full_day" style="width: 21% !important;margin-top: 10px;" type="radio" value="full_day" name="available_type">Full Day</label>';
        available_type_fields += '<input class="available_type" id = "timings" style="width: 21% !important;margin-top: 10px;" type="radio" value="timings" name="available_type">Timings</label>';
        available_type_fields += '</div>';
        available_type_fields += '</div>';

$(".duration_div").html(available_type_fields);
        $("#" + coursetype_global).prop("checked", true);
        var sel = $('input[type=radio]:checked').map(function(_, el) {
          return $(el).val();
        }).get();

if (coursetype_global == "timings") {
          CallTimings(timings_global);
        }
      }
    }

function CallTimings(timings_global) {
      console.log(timings_global);
      var timings = timings_global;

var available_timings = '';
      available_timings += '<div class="form-group">';
      available_timings += '<label class="control-label col-sm-4 col-xs-12">Available Timings</label>';
      available_timings += '<div class="col-sm-8">';
      available_timings += '<div class="row">';
      available_timings += '<div class="col-sm-2 col-xs-2">';
      available_timings += '<button type="button" class="btn btn-default center-block add_fields">Add</button>';
      available_timings += '</div>';
      available_timings += '</div>';

var i = 0;
      $.each(timings, function(key, val) {
        available_timings += '<input type="hidden" value="' + i + '" class="ids' + i + '">';
        available_timings += '<div class="row added_timings">';
        available_timings += '<div class="col-sm-5 col-xs-5 space">';
        available_timings += '<input id="onselectExampleexist' + i + '" onchange="change_existing_time(' + i + ');" type="text" class="form-control" name="from_time[]" placeholder="From Time" required value="' + val.from_time + '" />';
        available_timings += '</div>';
        available_timings += '<div class="col-sm-5 col-xs-5 space2 to_time_field' + i + '">';
        available_timings += '<input id="timepicker2exist' + i + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" value="' + val.to_time + '" required />';
        available_timings += '</div>';
        available_timings += '<div class="col-sm-2 col-xs-1" style="padding: 2% 4% !important;"><a href="javascript:void(0);" id="' + val.available_time_id + '" class="remove_fields">';
        available_timings += '<span class="glyphicon glyphicon-remove"></span>';
        available_timings += '</a>';
        available_timings += '</div>';
        available_timings += '</div>';
        i = i + 1;
      })

available_timings += '</div>';
      available_timings += '</div>';
      $(".timings_div").html(available_timings);

var j = 0;
      $.each(timings, function(key, val) {

$('#onselectExampleexist' + j + '').timepicker({
          'timeFormat': 'h:i A',
          minuteStepping: 15
        });
        $('#timepicker2exist' + j + '').timepicker({
          'timeFormat': 'h:i A',
          minuteStepping: 15
        });
        // $('#onselectExampleexist'+j+'').on('changeTime', function() {
        //   var id = $('.ids'+j+'').val();
        //   //alert(id);

// });
        j = j + 1;
      })

$(".remove_fields").click(function() {

var id = $(this).attr('id')
        $(this).closest('.added_timings').remove();

$.ajax({
          url: "<?php echo site_url("delete_course_timings") ?>",
          type: "POST",
          data: {
            'id': id
          },
          success: function(data) {
            // response = jQuery.parseJSON(data);
            console.log(response);

}
        });

});

}

//------------------------------------------------------------------------------------------------//

$(document).on('click', '.course_type', function(e) {

var sel = $('input[type=checkbox]:checked').map(function(_, el) {
        return $(el).val();
      }).get();

console.log(sel);

if (jQuery.inArray("live", sel) !== -1) {
        CallCourseType(sel, coursetype_global);
      } else {
        $(".duration_div").empty();
        $(".timings_div").empty();
      }
    });

//----------------------------------------------------------------------------------------------//

$(document).on('click', '.available_type', function(e) {

var available_type = $('input[type=radio]:checked').map(function(_, el) {
        return $(el).val();
      }).get();

if (available_type == 'full_day') {
        $(".timings_div").empty();
      } else {
        CallTimings(timings_global);
      }
    });

//----------------------------------------------------------------------------------------------//

var k = 0;
    $(document).on('click', '.add_fields', function(e) {
      var fields = '';

fields += '<div class="additonal_field">';
      fields += '<label class="control-label col-sm-4 col-xs-12"></label>';
      fields += '<div class="col-sm-8 append_time">';
      fields += '<div class="row"><div class="col-sm-5 col-xs-5 space" style="padding-left: 10px !important;padding-right: 12px !important;">';
      fields += '<input id="onselectExample' + k + '" onchange="change_from_time(' + k + ');" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />';
      fields += '</div>';
      fields += '<div class="col-sm-5 col-xs-5 space2 to_time' + k + '" style="padding-left: 18px !important;padding-right: 4px !important;">';
      fields += '<input id="timepicker2' + k + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
      fields += '</div>';
      fields += '<div class="col-sm-2 col-xs-1" style="padding: 2% 8% !important;"><a href="javascript:void(0);" class="remove_fields">';
      fields += '<span class="glyphicon glyphicon-remove"></span>';
      fields += '</a>';

fields += '</div>';
      fields += '</div>';
      fields += '</div>';
      fields += '</div>';

$('.multiple_fields').append(fields);

$('#onselectExample' + k).timepicker({
        'timeFormat': 'h:i A',
        minuteStepping: 15
      });
      $('#timepicker2' + k).timepicker({
        'timeFormat': 'h:i A',
        minuteStepping: 15
      });

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

k = k + 1;
    });
    //----------------------------------------------------------------------------------------------//

function SubCategory(domain_id, sub_domain_id) {
      $.ajax({
        url: "<?php echo site_url('get_sub_domain') ?>",
        type: "POST",
        data: {
          'domain_id': domain_id
        },
        async: false,
        success: function(response) {
          // response = jQuery.parseJSON(response);
          console.log(response);
          if (response.result == 1) {
            var content = '';
            content += '<label class="control-label col-sm-4">Select Sub Category</label>';
            content += '<div class="col-sm-8">';
            content += '<select class="form-control sub_category_list" name="sub_domain_id[]" multiple>';
            $.each(response.message, function(idx, vx) {
              content += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
            });

content += '</select>';
            content += '</div>';

$('.sub_cate_div').html(content);
            $('.sub_category_list').SumoSelect({
              selectAll: true
            });

var sub_domains = jQuery.parseJSON(sub_domain_id);

$.each(sub_domains, function(index, value) {

$('.sub_category_list')[0].sumo.selectItem($('.sub_category_list').find('option[value="' + value + '"]').index());

});
          } else {
            $('.sub_category_list').empty();
          }
        }
      });
    }

//----------------------------------------------------------------------------------------------//

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

var domain_id = $("#catagory").val();

$.ajax({
        url: "<?php echo site_url('get_sub_domain') ?>",
        type: "POST",
        data: {
          'domain_id': domain_id
        },
        async: false,
        success: function(response) {
          // response = jQuery.parseJSON(response);
          console.log(response);
          if (response.result == 1) {
            var content = '';
            content += '<label class="control-label col-sm-4">Select Sub Category</label>';
            content += '<div class="col-sm-8">';
            content += '<select class="form-control sub_category_list" name="sub_domain_id[]" multiple>';
            $.each(response.message, function(idx, vx) {
              content += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>';
            });

content += '</select>';
            content += '</div>';

$('.sub_cate_div').html(content);
            $('.sub_category_list').SumoSelect({
              selectAll: true
            });
          } else {
            $('.sub_cate_div').html('<label class="control-label col-sm-4">Select Sub Category</label><div class="col-sm-8 "><select class="form-control sub_category_list" name="sub_domain_id[]" required></select></div>');
            $('.sub_category_list').empty();
          }
        }
      });
    });

//----------------------------------------------------------------------------------------------//
    $('.course_form').submit(function(e) {
      e.preventDefault();

$("#loading").show();

var count_checked = $("[name='course_type[]']:checked").length;
      var sub_category_list = $(".sub_category_list").val();
      var content = CKEDITOR.instances.content.getData();
      var content1 = CKEDITOR.instances.content1.getData();
      // var content2 = CKEDITOR.instances.content2.getData();

var contentlen = CKEDITOR.instances.content.document.getBody().getText();
      var contentlen1 = CKEDITOR.instances.content1.document.getBody().getText();
      // var contentlen2 = CKEDITOR.instances.content2.document.getBody().getText();

if (sub_category_list == null) {
        toastr["error"]("Select sub category");
      } else if (count_checked == 0) {
        toastr["error"]("Select course type");
      } else if (content === '') {
        toastr["error"]("Description field cannot be blank");
      } else if (content1 === '') {
        toastr["error"]("Curriculam field cannot be blank");
      }
      // else if(content2 ==='')
      // {
      //   toastr["error"]("Instructor content field cannot be blank");    
      // }
      else if (contentlen.length > 1000) {
        toastr["error"]("Description field cannot be greater than 1000 characters");
      } else if (contentlen1.length > 1000) {
        toastr["error"]("Curriculam field cannot be greater than 1000 characters");
      }
      // else if(contentlen2.length > 1000)
      // {
      //   toastr["error"]("Instructor content field cannot be greater than 1000 characters");    
      // }
      else {
        formdata = new FormData($(this)[0]);
        formdata.append('content', CKEDITOR.instances['content'].getData());
        formdata.append('content1', CKEDITOR.instances['content1'].getData());
        //   formdata.append('content2', CKEDITOR.instances['content2'].getData());

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

for (instance in CKEDITOR.instances)
          CKEDITOR.instances[instance].updateElement();

$.ajax({

type: 'post',
          url: '<?php echo site_url("update_course") ?>',
          data: formdata,
          contentType: false,
          processData: false,

success: function(response) {
            response = jQuery.parseJSON(response);
            console.log(response);

if (response.result == 1) {
              toastr["success"](response.message);
              $(".submit").text("Update");
              $(".submit").removeAttr('disabled');
              window.location = '<?php echo site_url('course-list'); ?>';
            } else {
              toastr["error"](response.message);
              $(".submit").text("Update");
              $(".submit").removeAttr('disabled');
            }

}

});
      }

});

function change_from_time(id) {
    var values = $('#onselectExample' + id).val();
    var fieldss = '';
    fieldss += '<input id="onselect' + id + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
    $('.to_time' + id).html(fieldss);

if (values == '11:00 PM') {
      var getTimes = values.split(":");
      var newTimes = '12:00 AM';
      $('#onselect' + id).val(newTimes);
    } else if (values == '11:30 PM') {
      var getTimes = values.split(":");
      var newTimes = '12:30 AM';
      $('#onselect' + id).val(newTimes);
    } else {
      var getTimes = values.split(":"); //split time by colon
      var hourss = parseInt(getTimes[0]) + 1; //add two hours
      if (hourss == 13) {
        hourss = 1;
      }
      var newTimes = hourss + ":" + getTimes[1];
      $('#onselect' + id).val(newTimes);
    }

var max_hours = parseInt(getTimes[0]) + 11;
    var max_time = max_hours + ":" + getTimes[1];

$('#onselect' + id).timepicker({
      interval: 60,
      minTime: newTimes,
      maxTime: max_time,
      'timeFormat': 'h:i A'
    });
  }

function change_existing_time(id) {
    var value = $('#onselectExampleexist' + id + '').val();
    var field = '';
    field += '<input id="exist_to_time' + id + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
    $('.to_time_field' + id + '').html(field);

if (value == '11:00 PM') {
      var getTime = value.split(":");
      var newTime = '12:00 AM';

} else if (value == '11:30 PM') {
      var getTime = value.split(":");
      var newTime = '12:30 AM';
    } else {
      var getTime = value.split(":"); //split time by colon
      var hours = parseInt(getTime[0]) + 1; //add two hours
      if (hours == 13) {
        hours = 1;
      }
      var newTime = hours + ":" + getTime[1];
    }

var max_hours = parseInt(getTime[0]) + 11;
    var max_time = max_hours + ":" + getTime[1];
    $('#exist_to_time' + id + '').val(newTime);
    $('#exist_to_time' + id + '').timepicker({

interval: 60,
      minTime: newTime,
      maxTime: max_time,
      'timeFormat': 'h:i A'
    });
  }
</script>

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