<div id="display_comment"></div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="box-shadow:-1px 2px 9px 4px #ccc;padding: 20px;margin-top: 20px;">
<div>
	<div class="alert alert-success alert-dismissible" id="success" style="display:none;">
	  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
	</div>
    <h2>Leave a Reply</h2><br>
	<form id="fupForm" name="form1" method="POST">
		<div class="form-group">
			<label for="name">Name:</label>
			<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
		</div>
		<div class="form-group">
			<label for="email">Email:</label>
			<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email id" required>
		</div>
		<div class="form-group">
			<label for="phone">Phone:</label>
			<input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your contact number"  required>
		</div>
		<div class="form-group" >
			<label for="comment">Comment:</label>
			 <textarea rows="4" class="form-control"  name="comment" id="comment" placeholder="Type your comment here..."  required></textarea>         
		</div>
        <input type="hidden" name="comment_id" id="comment_id" value="0" />
        <input type="hidden" value="<?php echo $blog_id;?>" id="blogid" name="blogid">
		<input type="button" name="save" class="btn btn-primary" value="POST YOUR COMMENT" id="butsave">
	</form>
</div>
</div>

<script>
$(document).ready(function() {
	$('#butsave').on('click', function() {
		$("#butsave").attr("disabled", "disabled");
		var name = $('#name').val();
		var email = $('#email').val();
		var phone = $('#phone').val();
		var comment = $('#comment').val();
		var blogid = $('#blogid').val();
		var comment_id = $('#comment_id').val();
		
		if(name!="" && email!="" && phone!=""  && comment!=""){
			$.ajax({
				url: "common/save.php",
				type: "POST",
				data: {
					name: name,
					email: email,
					phone: phone,
					comment: comment,
					blogid: blogid,
					comment_id: comment_id
									
				},
				cache: false,
				success: function(result){
				//alert(result);
				$("#butsave").removeAttr("disabled");
				$('#fupForm').find('input:text').val('');
				$('#email').val('');
				$('#comment').val('');
				$("#success").show();
				$('#success').html('Comment added successfully !'); 
				$('#comment_id').val('0');
				load_comment();	
				}
				
			});
		}
		else{
			alert('Please fill all the field !');
			$("#butsave").removeAttr("disabled");
		}
	});
	
	
	load_comment();

	 function load_comment()
	 {
	  var blogid = $('#blogid').val();
	  
	   $.ajax({
	   url:"common/fetch_comment.php",
	   method:"POST",
	   data: {			
				blogid: $('#blogid').val()
	   		 },
	   success:function(data)
	   {
		$('#display_comment').html(data);
	   }
	  })
	 }
	
	 $(document).on('click', '.reply', function(){
	  var comment_id = $(this).attr("id");
	  $('#comment_id').val(comment_id);
	  $('#name').focus();
	 });
});
</script>
<script>
$(document).ready(function(){

    // Load more data
    $('#load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 1;
        row = row + rowperpage;

        if(row <= allcount){
            $("#row").val(row);

            $.ajax({
                url: 'common/fetch_comment.php',
                type: 'post',
                data: {row:row},
             
                success: function(response){

                    // Setting little delay while displaying new content
                    setTimeout(function() {
                        // appending posts after last post with class="post"
                        $(".post:last").after(response).show().fadeIn("slow");

                        var rowno = row + rowperpage;

                        // checking row value is greater than allcount or not
                        if(rowno > allcount){

                            // Change the text and background
                            $('#load-more').text("Hide");
                            $('#load-more').css("background","darkorchid");
                        }else{
                            $("#load-more").text("Load more");
                        }
                    }, 2000);

                }
            });
        }else{
            $('#load-more').text("Loading...");

            // Setting little delay while removing contents
            setTimeout(function() {

                // When row is greater than allcount then remove all class='post' element after 3 element
                $('.post:nth-child(3)').nextAll('.post').remove();

                // Reset the value of row
                $("#row").val(0);

                // Change the text and background
                $('#load-more').text("Load more");
                $('#load-more').css("background","#15a9ce");
                
            }, 2000);


        }

    });

});
</script>
