<?php include('config.php');
include('checksession.php');

include('include/header.php');
$query=mysqli_query($conn,"select * from tbl_about_marks_of_success where id='".$_GET['id']."'");
$row=mysqli_fetch_object($query);
?>

         <!-- Content Wrapper. Contains page content -->
         <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
               <div class="container-fluid">
                  <div class="row mb-2">
                     <div class="col-sm-6">
                        <h1>Add News</h1>
                     </div>
                     <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                           <li class="breadcrumb-item"><a href="#">Home</a></li>
                           <li class="breadcrumb-item active">Edit News</li>
                        </ol>
                     </div>
                  </div>
               </div>
               <!-- /.container-fluid -->
            </section>
            <!-- Main content -->
            <section class="content">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-12">
                       
                         <form id="add_news_form" enctype="multipart/form-data">
                         <!--<form action="" method="post" enctype="multipart/form-data">-->
                        <div class="card card-primary">
                           <div class="card-header">
                              <h4 class="card-title">Add Item</h4>
                           </div>
                           
                           <div class="card-body">
                            
                            
                              
                              
                               <div class="form-group">
                                 <label>Title *</label>
                                 <div class="col-md-12">
                                    <div class="card card-outline card-info">
                                 
                                       <!-- /.card-header -->
                                       <div class="card-body">
                                         <input class="form-control" type="text" id="title" name="title" placeholder="Title" value="<?=$row->title;?>" >
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              
                              
                              
                              
                              
                                     
                                  
                                   <div class="col-6 lefts">
                              <div class="form-group">
                                 <label for="exampleInputFile1">Image * <br><span style="color:red;">(For better view please upload 500 x 500 size images.)</span></label>
                                 <div class="input-group">
                                    <div class="custom-file">
                                       <input type="file" class="custom-file-input" name="pro_img1"  id="exampleInputFile1">
                                       <label class="custom-file-label" for="exampleInputFile1">Choose file</label>
                                    </div>
                                    <div class="input-group-append">
                                       <span class="input-group-text">Upload</span>
                                    </div>
                                 </div>
                              </div>
                             
                              </div>
                               <div class="col-6" style="float:left">
                                   <div style="width: 151px;  height: 121px;  position: relative;  z-index: 100;  opacity: 1;  margin: 0 0 -120px 0px;  border: 3px solid #fff;"></div>
                                  <img id="image1" / src="upload_image/<?=$row->image;?>" width="150px;" height="120px;" border="0">
                                  </div>
                              
                             
                              <!--<div class="col-6 lefts">-->
                             
                              <!--</div>-->
                      
                              <!--<div class="col-6 lefts" >-->
                              <!--<span class="add_images" onclick="add_more_images();">+ </span>-->
                           
                              <!--</div>-->
           
                              <div class="col-6 rights">
                                  <p id="err_msg" style="text-align:right"></p>
                              <div class="form-group">
                                  <input type="hidden" name="id" value="<?=$row->id;?>">
                                  <button class="btn btn-warning addpro" type="submit"  class="">Submit <span class="spinner-border text-secondary" role="status" style="display:none;"></span></button>
                                  </div>
                                  </div>
                                  
                                  <div id="dvPreview">
</div>
                           </div>
                        </div>
        

                        </form>
                       
                     </div>
                  </div>
               
               <!-- /.container-fluid -->
            </section>
         </div>
         <!-- /.content-wrapper -->
        <?php include('include/footer.php'); ?>
        
 <script>     
document.getElementById('exampleInputFile1').onchange = function () {
  var src = URL.createObjectURL(this.files[0])
  document.getElementById('image1').src = src
}

///////////////// Multiple Image Preview //////////////

jQuery(document).ready(function () {
  ImgUpload();
});

function ImgUpload() {
  var imgWrap = "";
  var imgArray = [];

  $('.upload__inputfile').each(function () {
    $(this).on('change', function (e) {
      imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
      var maxLength = $(this).attr('data-max_length');

      var files = e.target.files;
      var filesArr = Array.prototype.slice.call(files);
      var iterator = 0;
      filesArr.forEach(function (f, index) {

        if (!f.type.match('image.*')) {
          return;
        }

        if (imgArray.length > maxLength) {
          return false
        } else {
          var len = 0;
          for (var i = 0; i < imgArray.length; i++) {
            if (imgArray[i] !== undefined) {
              len++;
            }
          }
          if (len > maxLength) {
            return false;
          } else {
            imgArray.push(f);

            var reader = new FileReader();
            reader.onload = function (e) {
              var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
              imgWrap.append(html);
              iterator++;
            }
            reader.readAsDataURL(f);
          }
        }
      });
    });
  });

  $('body').on('click', ".upload__img-close", function (e) {
    var file = $(this).parent().data("file");
    for (var i = 0; i < imgArray.length; i++) {
      if (imgArray[i].name === file) {
        imgArray.splice(i, 1);
        break;
      }
    }
    $(this).parent().parent().remove();
  });
}

///////////////////////// End ////////////////////////////



         $(function () {
           // Summernote
           $('#summernote').summernote()
         
           // CodeMirror
           CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
             mode: "htmlmixed",
             theme: "monokai"
           });
         })
           $(function () {
           // Summernote
           $('#summernote2').summernote()
         
           // CodeMirror
           CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
             mode: "htmlmixed",
             theme: "monokai"
           });
         })
         
         $(document).ready(function(){
          $("#add_news_form").submit(function(e){

         e.preventDefault();
         
         
         var firstcontent=$("#summernote2").val();
         



        // alert(firstcontent);
         var newdata = new FormData(this);
    
         newdata.append( "action", 'updatemarksofsuccess');
        

    
   
 
    
          if($("#title").val()=='')
    {
      $("#err_msg").show().html('<span style="color:red;"> Please enter news title.</span>').delay(4000)
    .fadeOut(100);
  return false;  
    }
    
   
  else{
      $(".spinner-border").show();
     $.ajax({

                            url: 'allajax.php',
                            type:'POST',
                            data: newdata,
                            contentType: false,
                            cache: false,
                            processData:false,
                          success:function(result2){
                            console.log(result2);
                            if(result2==1){
                           $(".spinner-border").hide();   
                           $("#err_msg").show().html('<span style="color:green;">Content updated successfully.</span>').delay(5000)
    .fadeOut(100);
                          
                           //$("#edit_news_form")[0].reset();
                            }else{
                             $("#err_msg").show().html('<span style="color:red;">Something wrong. Try after sometimes.</span>');   
                            }
                               }
                             });  
    }
         
  
          });    
         });
         
       
         
      </script>
   </body>
</html>