
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<?php
	include("../../../dbconnection/dbconnection.php");
	include("../../../steam_functions/steam_functions.php");
?>
<script>
 $(document).ready(function(){
	  $("#compose-form")[0].reset();
 })
</script>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <form class="col-md-8"  style='padding:5px;padding-top:0px' method='POST' id='compose-form'>
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Compose New Notes</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
			  <div class="form-group">
			  <label>Topic</label>
                <input class="form-control" placeholder="Topic:" id='topic' name='topic' style='height:45px' required>
              </div>
              <div class="form-group">
                <label>Services</label>
                <select class="form-control select2" id='service' name='service' style="width: 100%;"required >
                  <option  value="">Select Service</option>
				  <?php
					foreach(services($connect) as $row){
				  ?>
                  <option value='<?php echo $row["id"];?>'><?php echo ucwords($row["service"]);?></option>
					<?php }?>
                </select>
				
              </div>
              <!-- /.form-group -->
              
              <div class="form-group">
					<label>Notes</label>
                    <textarea id="compose-textarea" name='notes' class="form-control" style="height:520px"  required>
					
                    </textarea>
              </div>
              <div class="form-group">
                <div class="btn btn-default btn-file">
                  <i class="fa fa-photo"></i> Cover Photo
                  <input type="file" name="photo" id='file'>
                </div>
                <p class="help-block">Max. 32MB</p>
              </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
              <div class="pull-right">
				 <input type="hidden" name="btn-action" value='compose-notes'>
                <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button>
                <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
              </div>
              <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
            </div>
            <!-- /.box-footer -->
          </div>
          <!-- /. box -->
        </form>
        <!-- /.col -->
		<input type='hidden' id='sbcp'>
		<input type='hidden' id='tbcp'>
		<div class="callout callout-info" style='margin-bottom:0px'>
          <h4>Latest Posts</h4>

        </div>	
		
		<div class="col-md-4" style='padding:4px;padding-top:0px' id='latest-posts'>
			
		
<?php
foreach(few_latest_notes($connect) AS $row){
	$id=$row["id"];
	$tp=$row["topic"];
	$notes=$row["notes"];
	$img=$row["cover_sm"];
	// $strlength=strlen($notes);
	$strlength=strlen(trim($notes));
	if($strlength>225){
		$n="<img src='pages/notes/".$img."' style='max-width:80px;margin-right:5px' class='pull-left'> ".substr($notes,0,225)."<span style='font-size:20px'>.... </span> <label class='btn btn-sm bg-blue pull-right' >Open</label>";
		
		
	}else{
		$n="<img src='pages/notes/".$img."' style='max-width:80px;margin-right:5px' class='pull-left'> ".$notes."<label class='btn btn-sm bg-blue pull-right' >Open</label>";
	}
	
	
?>
			<div class="box box-default " id="<?php echo $id;?>" style='margin:0px'>
			  <div class="box-header with-border">
				<h3 class="box-title text-blue"><b><?php echo ucwords(strtolower($tp));?></b></h3>
			  </div>
			  <div class="box-body">
				<?php echo $n;?>
			  </div>
			  <!-- /.box-body -->
			</div>
			
			<?php }?>
			<center style='margin-top:5px'><button class='btn  btn-block bg-navy '>More Posts</button></center>
		</div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
	
	

<!-- jQuery 2.2.3 -->
<script src="././plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="././bootstrap/js/bootstrap.min.js"></script>

<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

<script src="plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<!-- Page Script -->
<script>
	function _(elem){
		return document.getElementById(elem);
	}

  $(function () {
    //Add text editor
    $("#compose-textarea").wysihtml5();
	//Initialize Select2 Elements
    $(".select2").select2();
	 
  });
  
   $(document).ready(function(){
	 
	   
		$(document).on('submit', '#compose-form', function(event){
			event.preventDefault();

				create_notes();
		});
		
   })
  
  
  function latest(){

	  $.ajax({
				url:"pages/notes/last_post.php",
				method:"POST",
				success:function(data){
					$("#latest-posts").prepend(data);
				}
			});
  }
  
  function create_notes(){
	  
			var topic=_("topic").value;
			var notes=_("compose-textarea").value;
			var service=_("service").value;
			var sbcp=_("sbcp").value=service;
			var tbcp=_("tbcp").value=topic;
			
			var form = document.getElementById("compose-form");
			var photo=document.getElementById('file').files[0];
			var form_data =new FormData(form);
				form_data.append("file",photo);

			
			var ajax=new XMLHttpRequest();
			ajax.onreadystatechange=function(){
				if(ajax.status==200 && ajax.readyState==4){
					var feedback=ajax.responseText;
					if(feedback==="Notes Updated"){
						form.reset();
						  $(".select2").select2();
						  $("#latest-posts").append();
						  latest();
						}
					
				}
				
			}
			ajax.open("POST","pages/notes/notes_action.php",true);
			ajax.send(form_data);
	  
  }
</script>
