                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                      Logo
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="<?=base_index();?>"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li><a href="<?=base_index();?>logo">Logo</a></li>
                        <li class="active">Edit Logo</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
<div class="row">
    <div class="col-lg-12">
        <div class="box box-solid box-primary">
                                   <div class="box-header">
                                    <h3 class="box-title">Edit Logo</h3>
                                    <div class="box-tools pull-right">
                                        <button class="btn btn-info btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                        <button class="btn btn-info btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                </div>

                  <div class="box-body">
                     <form id="edit_logo" method="post" class="form-horizontal" action="<?=base_admin();?>modul/logo/logo_action.php?act=up">
                      <div class="form-group">
                        <label for="logo" class="control-label col-lg-2">logo</label>
                        <div class="col-lg-10">
                          <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                             <img src="../../../../upload/logo/<?=$data_edit->logo?>">
                            </div>
                            <div class="fileinput-preview fileinput-exists thumbnail tesd" style="max-width: 200px; max-height: 150px;"></div>
                            <div>
                              <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span> <span class="fileinput-exists">Change</span> 
                                <input type="file" name="logo" id="upload_image" accept="image/*">
                              </span> 
                              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
                            </div>
                          </div>
                        </div>
                      </div><!-- /.form-group -->
<input type="hidden" name="isi_gambar" class="isi_gambar">
                      <input type="hidden" name="id" value="<?=$data_edit->id;?>">
                      <div class="form-group">
                        <label for="tags" class="control-label col-lg-2">&nbsp;</label>
                        <div class="col-lg-10">
                           <a href="<?=base_index();?>logo" class="btn btn-success btn-flat"><i class="fa fa-step-backward"></i> Batal</a>
                          <input type="submit" class="btn btn-primary btn-flat" value="Simpan">
                        </div>
                      </div><!-- /.form-group -->
                    </form>
                   
          
                  </div>
                  </div>
              </div>
</div>
                </section><!-- /.content -->
   <div style="display: none" class="modal" id="uploadimageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"><div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></span></button> <h4 class="modal-title judul">Crop</h4> </div> <div class="modal-body" id="isi_rumpun_dosen">
                <div class="row">
            <div class="col-md-12 text-center">
              <div id="image_demo"></div>
              <p><button class="btn btn-success crop_image">Crop & Upload Image</button></p>
            </div>
          </div>
        </div>
         </div> 
       </div><!-- /.modal-content --> 
       </div><!-- /.modal-dialog --> 
 <script type="text/javascript" src="<?=base_admin();?>assets/plugins/croppie/croppie.js"></script>
<link rel="stylesheet" type="text/css" href="<?=base_admin();?>assets/plugins/croppie/croppie.css">       
 <script type="text/javascript">
 $(document).ready(function(){
  
 
  $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'square' //circle
    },
    boundary:{
      width:200,
      height:200
    }
  });

  $('#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){
      $('.tesd').html('<img src="'+response+'" style="max-height:150px">');
      $('.isi_gambar').val(response);

       $('#uploadimageModal').modal('hide');
/*      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });*/
    })
  });

});     

    $(document).ready(function() {
    

    
    $("#edit_logo").validate({
        errorClass: "help-block",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents(".form-group").removeClass(
                "has-success").addClass("has-error");
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents(".form-group").removeClass(
                "has-error").addClass("has-success");
        },
        errorPlacement: function(error, element) {
            if (element.hasClass("chzn-select")) {
                var id = element.attr("id");
                error.insertAfter("#" + id + "_chosen");
            } else if (element.attr("accept") == "image/*") {
                element.parent().parent().parent().append(error);
            } else if (element.hasClass("tgl_picker_input")) {
               element.parent().parent().append(error);
            } else if (element.hasClass("file-upload-data")) {
               element.parent().parent().parent().append(error);
            } else if (element.attr("type") == "checkbox") {
                element.parent().parent().append(error);
            } else if (element.attr("type") == "radio") {
                element.parent().parent().append(error);
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            $("#loadnya").show();
            $(form).ajaxSubmit({
                url : $(this).attr("action"),
                type : "post",
                error: function(data ) { 
                  $("#loadnya").hide();
                  console.log(data); 
                  $(".isi_warning").html(data.responseText);
                  $(".error_data").focus()
                  $(".error_data").fadeIn();
                },
                success: function(responseText) {
                  $("#loadnya").hide();
                  console.log(responseText);
                  $(".notif_top_up").fadeIn(1000);
                  $(".notif_top_up").fadeOut(1000, function() {
                    window.location='<?=base_index();?>logo';
                  });
                }

            });
        }
    });
});
</script>