EVOLUTION-NINJA

Edit File: course_form.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 href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/sumoselect/sumoselect.css'); ?>" />

<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 COURSE
      <small></small>
    </h1>

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

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

<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) {
                  ?>
                      <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" 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/*" />
                    <br />
                    <div id="uploaded_image"></div>
                    <input type="hidden" name="course_cropped_image" id="crop_image_name">

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

<div class="form-group duration_div">
              
            </div>

<div class="form-group timings_div" style="margin-bottom: -15px !important;">
              
            </div>

</div>

<div class="col-sm-5">

<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>
            </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<br class="hidden-xs hidden-sm hidden-lg"> 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">CURRICULAM</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">Submit</button>
        </div>
      </form>
    </div>
  </section>

<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>
  
</div>

</div>

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

.row {
    margin: 0 !important;
  }

.ui-timepicker-wrapper {
    width: 128px !important;
  }

.form-control {
		border-radius: 5px;
	}
</style>

$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);

}

}
        });
      })
    });

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

var available_type_state = $('input[type=radio]:checked').val();

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

$(".duration_div").html(available_type);
        $('input[value="' + available_type_state + '"]').prop("checked", true);
      } else {
        $(".timings_div").empty();
        $(".multiple_fields").empty();
        $(".duration_div").empty();
      }

$('.available_type').click(function() {

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

console.log(sel);

if (jQuery.inArray("timings", sel) !== -1) {
          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-5 col-xs-5 space">';
          available_timings += '<input id="onselectExample" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />';
          available_timings += '</div>';
          available_timings += '<div class="col-sm-5 col-xs-5 space2 check">';
          available_timings += '<input id="timepicker2" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
          available_timings += '</div>';
          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>';
          available_timings += '</div>';
          available_timings += '</div>';

$(".timings_div").html(available_timings);

$('#onselectExample').timepicker({
            'timeFormat': 'h:i A',
            minuteStepping: 15
          });
          $('#timepicker2').timepicker({
            'timeFormat': 'h:i A',
            minuteStepping: 15
          });
          $('#onselectExample').on('changeTime', function() {
            var value = $(this).val();
            var field = '';
            field += '<input id="onselectExampless" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
            $('.check').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];
            $('#onselectExampless').val(newTime);

$('#onselectExampless').timepicker({
              interval: 60,
              minTime: newTime,
              maxTime: max_time,
              'timeFormat': 'h:i A'
            });

if (max_time == "NaN:undefined") {
              $("#onselectExampless").val(' ');
              //$("#onselectExampless").attr("placeholder", "To Time");

var input = '';
              input += '<input id="onselectExampless" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />';
              $(".space2").html(input);
            }
          });

} else {
          $(".timings_div").empty();
        }

var i = 0;
        $('.add_fields').click(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' + i + '" onchange="change_from_time(' + i + ');" 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' + i + '" style="padding-left: 18px !important;padding-right: 4px !important;">';
          fields += '<input id="timepicker2' + i + '" 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' + i).timepicker({
            'timeFormat': 'h:i A',
            minuteStepping: 15
          });
          $('#timepicker2' + i).timepicker({
            'timeFormat': 'h:i A',
            minuteStepping: 15
          });

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

i = i + 1;

});

$("#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 <span style="color:red;"> *</span></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 <span style="color:red;"> *</span></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 (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 {

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("Submitting...");

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

$.ajax({

type: 'post',
          url: '<?php echo site_url("add_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);
              $('.sub_cate_div').html('<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" name="sub_domain_id[]" required></select></div>');
              $('.course_form')[0].reset();
              CKEDITOR.instances['content'].setData('');
              CKEDITOR.instances['content1'].setData('');
              //   CKEDITOR.instances['content2'].setData('');
              $(".submit").text("Submit");
              $(".submit").removeAttr('disabled');
              $('.multiple_fields').empty();
              $('.timings_div').empty();
              $('.duration_div').empty();
              $('#uploaded_image').empty();
              $('#crop_image_name').val('');

} else {
              toastr["error"](response.message);
              $(".submit").text("Submit");
              $(".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'
    });
  }
</script>

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