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

    <span style="color: #292b2c;
    font-family: 'Rubik', sans-serif;     font-size: 26px;
    font-weight: 500;">Leave a Reply</span><br><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="2" 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>

