<?php //echo $website_url; ?><!-- CHAT APPLICATION CODE START -->

<button class="btn btn-danger open-button" style="background-color: #ff0b03;border-color: #ec120a;padding: 5px 20px;font-weight:bold;font-size:13px;"" onclick="openchatbox();" >Chat With Us&nbsp;&nbsp;<i class="fa fa-comment"></i></button>

<div class="chatbox" id="chatbox" style="display:none">

   

            <div class="modal-header" id="chatheader" style="height:40px !important;">

              <center><h4 style="padding: 10px;margin: 0px;color:#fff;float:left;"> Live Chat </h4></center>

                 <div class="pull-right">  

           		<button type="button" class="btn" style="color: #fff;font-weight: bold;font-size: 16px;background-color: #0000;" onclick="minimizechatbox();">

                   &#8722;

                </button>

                 <button type="button" onclick="customerLogout()" class="btn" style="color: #fff;font-weight: bold;font-size: 16px;background-color: #0000;">

                   &times;

                </button>

            	

               </div>                         

             

            </div>

            

            <!-- Modal Body -->

            <div class="modal-body">

         <p class="statusMsg"></p>

         <div id="user_details" style="display:none"></div>

        <div id="user_model_details" class="user_model_details" style="display:none"></div>

 		<div id="loginform">

        <h5 class="modal-title" id="myModalLabel"><strong>Welcome to Asian College of Teachers</strong></h5>

        <br />

        <h5 class="modal-title" id="myModalLabel">How may I assist you today?</h5> 

        <br />

        

        <div id="sound"></div>

       <form method="post" name="customer_chat">     

      <div class="form-group">

       <label class="t1"><strong>Please enter your email</strong></label>

       <input type="email" name="username" id="username" class="form-control"  />

        <p id="statusMsgUsername"></p>

      </div>

      <!--<div class="form-group">

       <label>Password</label>

       <input type="password" name="password" id="password" class="form-control"  />

       <p id="statusMsgPassword"></p>

      </div>-->

      <div class="form-group">

       

       <button type="button" name="signin"  class="btn btn-primary submitBtn" onclick="submitSignInForm()" style="padding:4px 6px;">Next</button>

      </div>

    

                </form>

         </div>

                <div id="registrationform" style="display:none;">

                 <h5 class="modal-title" id="myModalLabel"><strong>Welcome to Asian College of Teachers</strong></h5>

                 <br />

              <h4 class="modal-title" id="myModalLabel">Introduce Yourself </h4> 

              <br>

       <form method="post" name="customer_chat">     

      <p class="statusMsg1"></p>

     <!-- <div class="form-group">

      

       <input type="text" name="username1" id="username1" placeholder="Enter Username" class="form-control" />

      </div>

      <p id="statusMsgUsername1"></p>

      <div class="form-group">

      <input type="password" name="password1" id="password1" placeholder="Enter Password" class="form-control" />

      </div>

       <p id="statusMsgPassword1"></p> -->

       

        <div class="form-group">

      

       <input type="text" name="user_name" id="chat_user_name" placeholder="Enter Name" class="form-control" />

      </div>

       <p id="statusMsgName"></p>

     

      <div class="form-group">

      

       <input type="email" name="email" id="chat_email" placeholder="Enter Email" class="form-control" />

      </div>

       <p id="statusMsgEmail"></p>

       

        <div class="form-group">

      <input type="number" name="contact_no" id="chat_contact_no" placeholder="Enter Contact No" class="form-control" />

      </div>

       <p id="statusMsgContactno"></p>

 <div class="form-group">

     <input type="text" name="curr_loc" id="chat_curr_loc" placeholder="Enter Current Location" class="form-control" />  </div>

       <p id="statusMsgLocation"></p>

 <div class="form-group">

 <label><strong>Your Query</strong></label>

	<textarea name="chatquery" id="chatquery" class="form-control" ></textarea>  </div>  

       <p id="statusMsgChatquery"></p>

      <div class="form-group">

       

       <button type="button" name="signup"  class="btn btn-primary submitBtn" onclick="submitSignUpForm()" style="padding:4px 6px;">Next</button>

      </div>

    

                </form>

      

                  </div>

      </div>

</div>

<?php $page_url = $_SERVER['PHP_SELF']; ?>
 

<script>

function closechatbox(){

	 $('#chatbox').css("display","none");

	

}

function minimizechatbox(){

	 $('#chatbox').css("display","none");

	

}

function openchatbox(){

	 $('#chatbox').css("display","none");

	 $('#chatbox').css("display","block");

}

function openSignUpForm(){

	

	$('#loginform').css("display","none");

	$('#registrationform').css("display","block");

}

function openSignInForm(){

	

	$('#loginform').css("display","block");

	$('#registrationform').css("display","none");

}

function submitSignInForm(){

    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

    var username = $('#username').val();

    //var password = $('#password').val();

	$('#statusMsgUsername').html('');

	//$('#statusMsgPassword').html('');

    

    if(username.trim() == '' ){

        //alert('Please enter your username.');

		$('#statusMsgUsername').html('<span style="color:red;">Please Enter Your Email</span>');

        $('#username').focus();

        return false;

    }else if(username.trim() != '' && !reg.test(username)){

        

		$('#statusMsgUsername').html('<span style="color:red;">Please enter valid email.</span>');

        $('#username').focus();

        return false;

    }/*else if(password.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgPassword').html('<span style="color:red;">Please Enter Your Password</span>');

        $('#password').focus();

        return false;

    }*/else{

        $.ajax({

            type:'POST',

            url:'../chat_tefl/customer_login_chat.php',

            data:'signinFrmSubmit=1&username='+username,

            beforeSend: function () {

                $('.submitBtn').attr("disabled","disabled");

                $('.modal-body').css('opacity', '.5');

            },

            success:function(msg){

						

				//console.log(msg);

                if(msg == 'ok'){

					$('#statusMsgUsername').html('');

					//$('#statusMsgPassword').html('');

    

                    $('#username').val('');

                    //$('#password').val('');

					$('#loginform').css("display","none");

					$('#user_details').css("display","block");

					//$('#user_model_details').css("display","block");

                    $('.statusMsg').html('<span style="color:green;"></p>');

                }else if(msg == 'register'){

					

					$('#loginform').css("display","none");					

					$('#registrationform').css("display","block");								

					$('#chat_email').val(username);

					

					$("#chat_email").prop("readonly", true);

					

                    $('.statusMsg').html('<span style="color:green;"></p>');

                }else{

					$('#statusMsgUsername').html('');

					//$('#statusMsgPassword').html('');

    

                    $('.statusMsg').html('<span style="color:red;">'+msg+'</span>');

                }

				

                $('.submitBtn').removeAttr("disabled");

                $('.modal-body').css('opacity', '');

            }

        });

    }

}

function submitSignUpForm(){

    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

	

	var website_url = <?php echo json_encode($website_url); ?>;

	

	var campaign_id = <?php echo json_encode($campaign_id); ?>;

    //var username = $('#username1').val();

    //var password = $('#password1').val();

	

	var user_name = $('#chat_user_name').val();

	var email = $('#chat_email').val();

	

	var contact_no = $('#chat_contact_no').val();

	

	var curr_loc = $('#chat_curr_loc').val();

	

	var chatquery = $('#chatquery').val();

	

	//$('#statusMsgUsername1').html('');

	//$('#statusMsgPassword1').html('');

	

	$('#statusMsgName').html('');

	$('#statusMsgEmail').html('');

    $('#statusMsgContactno').html('');	

	

	$('#statusMsgLocation').html('');

	

	

   /* if(username.trim() == '' ){

        //alert('Please enter your username.');

		$('#statusMsgUsername1').html('<span style="color:red;">Please Enter Your Username</span>');

        $('#username1').focus();

        return false;

    }else if(password.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgPassword1').html('<span style="color:red;">Please Enter Your Password</span>');

        $('#password1').focus();

        return false;

    }else*/ if(user_name.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgName').html('<span style="color:red;">Please Enter Name</span>');

        $('#chat_user_name').focus();

        return false;

    }else if(email.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgEmail').html('<span style="color:red;">Please Enter Your Email</span>');

        $('#chat_email').focus();

        return false;

    }else if(contact_no.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgContactno').html('<span style="color:red;">Please Enter Contact No</span>');

        $('#chat_contact_no').focus();

        return false;

    }else if(curr_loc.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgLocation').html('<span style="color:red;">Please Enter Your Current Location</span>');

        $('#chat_curr_loc').focus();

        return false;

    }else if(chatquery.trim() == '' ){

        //alert('Please enter your password.');

		$('#statusMsgChatquery').html('<span style="color:red;">Please Enter Your Query</span>');

        $('#chatquery').focus();

        return false;

    }else{

        $.ajax({

            type:'POST',

            url:'../chat_tefl/customer_registration_chat.php',

            data:'signupFrmSubmit=1&user_name='+user_name+'&email='+email+'&contact_no='+contact_no+'&curr_loc='+curr_loc+'&chatquery='+chatquery+'&website_url='+website_url+'&campaign_id='+campaign_id,

            beforeSend: function () {

                $('.submitBtn').attr("disabled","disabled");

                $('.modal-body').css('opacity', '.5');

            },

            success:function(msg){

				console.log(msg);

                if(msg == 'ok'){

					//$('#statusMsgUsername1').html('');

					//$('#statusMsgPassword1').html('');

					

					$('#statusMsgName').html('');

					$('#statusMsgEmail').html('');

					

					$('#statusMsgContactno').html('');

					

					$('#statusMsgLocation').html('');

					

					$('#statusMsgChatquery').html('');

					

    

                   // $('#username1').val('');

                   // $('#password1').val('');

					

					$('#chat_user_name').val('');

					$('#chat_email').val('');

					

					$('#chat_contact_no').val('');

					

					$('#chat_curr_loc').val('');

					$('#chatquery').val('');

					

					$('#registrationform').css("display","none");

					$('#user_details').css("display","block");

					//$('#user_model_details').css("display","block");

					 $('.statusMsg').html('<span style="color:green;"></p>');

                }else{

					//$('#statusMsgUsername1').html('');

					//$('#statusMsgPassword1').html('');

					

					$('#statusMsgName').html('');

					$('#statusMsgEmail').html('');

   					$('#statusMsgContactno').html('');

					

					$('#statusMsgLocation').html('');					

					$('#statusMsgChatquery').html('');					

					

                    $('.statusMsg1').html('<span style="color:red;">'+msg+'</span>');

                }

				

                $('.submitBtn').removeAttr("disabled");

                $('.modal-body').css('opacity', '');

            }

        });

    }

}

function customerLogout(){

        $.ajax({

            type:'POST',

            url:'../chat_tefl/customer_logout.php',

            data:'customer_logout=1',

            beforeSend: function () {

               // $('.submitBtn').attr("disabled","disabled");

               // $('.modal-body').css('opacity', '.5');

            },

            success:function(msg){

				console.log(msg);

                if(msg == 'ok'){

					 $('#chatbox').css("display","none");

					 $('#loginform').css("display","block");

					 $('#user_details').css("display","none");

					 $('#user_model_details').css("display","none");

               		 $('#registrationform').css("display","none");										

					 

                }else{

					

 					 $('#chatbox').css("display","none");

					 $('#loginform').css("display","block");

					 $('#user_details').css("display","none");

					 $('#user_model_details').css("display","none");

               		 $('#registrationform').css("display","none");										

                 }

				

                $('.submitBtn').removeAttr("disabled");

                $('.modal-body').css('opacity', '');

            }

        });

   

}

</script>

<script> 

function playSound(filename){

        var mp3Source = '<source src="../chat_tefl/' + filename + '.mp3" type="audio/mpeg">';

        var oggSource = '<source src="../chat_tefl/' + filename + '.ogg" type="audio/ogg">';

		var m4rSource = '<source src="../chat_tefl/' + filename + '.ogg" type="audio/m4r">';

        var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';

        document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + m4rSource + embedSource + '</audio>';

      } 

 

$(document).ready(function(){

 fetch_user();

 setInterval(function(){

  update_last_activity();

  fetch_user();

  update_chat_history_data();
  
  fetch_invitation();
  
  visitor_refresh(); 


 }, 5000);
 
 function visitor_refresh()

 { 
//var page_url = <?php echo $page_url; ?>;
  $.ajax({

   url:"<?php echo $page_url; ?>",

   method:"POST",

   success:function(data){
   //alert('visitorvnew');
  // alert(data);

   }

  })

 }

 function fetch_invitation()

 { 

  $.ajax({

   url:"../chat_tefl/fetch_invitation.php",

   method:"POST",

   success:function(data){
	  

    if(data > 0){	

	$('#chatbox').css("display","block");

	playSound('bing');

	}

   }

  })

 }


 function fetch_user()

 {

  $.ajax({

   url:"../chat_tefl/fetch_admin.php",

   method:"POST",

   success:function(data){

    $('#user_details').html(data);

   }

  })

 }

 function update_last_activity()

 {

  $.ajax({

   url:"../chat_tefl/update_last_activity.php",

   success:function()

   {

   }

  })

 }

//var to_user_id = 1;

//var to_user_name = 'admin';

 function make_chat_dialog_box(to_user_id, to_user_name)

 {

  var modal_content = '<img src="../images/logo_chat.png" style="width:54px;position: relative;top: -15px;float:left;margin-right:5px;"><h5 style="color:#f1592a;margin-bottom:2px;font-size:16px;"><b>Teacher Training Courses</b></h5><h5 style="margin-top:2px;font-size:14px; color:#2e3192;">Teach & Touch Lives</h5> <div class="clearfix"></div>';

  modal_content += '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="You have chat with '+to_user_name+'">';

  modal_content += '<div style="height:280px;width: 303px;border:1px solid #ccc; background-color:#fff;overflow: auto;display:flex; flex-direction:column-reverse; margin-bottom:24px; padding:5px 16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">';

  modal_content += fetch_user_chat_history(to_user_id);

  modal_content += '</div>';

  modal_content += '<div id="sound"></div><div class="form-group" style="float:left;">';

  modal_content += '<textarea name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message chat_text" style="width: 245px;height: 47px;" placeholder="Type your message here"></textarea>';

  modal_content += '</div><div class="form-group" align="right">';

  modal_content+= '<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-lg btn-info send_chat" style="background-color:#2e3192"><i class="fa fa-paper-plane" aria-hidden="true"></i></button></div></div>';

  $('#user_model_details').html(modal_content);

 }

 $(document).on('click', '.start_chat', function(){

  var to_user_id = $(this).data('touserid');

  var to_user_name = $(this).data('tousername');

 

$(document).keypress(function(e) {

    if(e.which == 13) {

       // alert('You pressed enter!');

		document.getElementById(to_user_id).click();

    }

});

  $('#user_details').css("display","none");

  

  $('#user_model_details').css("display","block");

  $('.statusMsg').html('');

               

	

  

  make_chat_dialog_box(to_user_id, to_user_name);

  $("#user_dialog_"+to_user_id).dialog({

   autoOpen:false,

   width:400

  });

  $('#user_dialog_'+to_user_id).dialog('open');

  });

 $(document).on('click', '.send_chat', function(){

   var website_url = <?php echo json_encode($website_url); ?>;	
   
   var to_user_id = $(this).attr('id');

  var chat_message = $('#chat_message_'+to_user_id).val();

  if($.trim(chat_message) != ''){

  $.ajax({

   url:"../chat_tefl/insert_chat.php",

   method:"POST",

   data:{to_user_id:to_user_id, chat_message:chat_message, website_url:website_url},

   success:function(data)

   {

	//playSound('bing');

    $('#chat_message_'+to_user_id).val('');

	$('#chat_message_'+to_user_id).focus();

    $('#chat_history_'+to_user_id).html(data);

	

   }

  })

  }

 });

 function fetch_user_chat_history(to_user_id)

 {

  $.ajax({

   url:"../chat_tefl/fetch_user_chat_history.php",

   method:"POST",

   data:{to_user_id:to_user_id},

   success:function(data){

	 var message_arr = data.split('::=::');

	 var data1 = message_arr[0];

	 var data2 = message_arr[1];  

	 if(data2 == 1){

		 playSound('bing');

	 }

	 //alert(data2);

    $('#chat_history_'+to_user_id).html(data1);

   }

  })

 }

 function update_chat_history_data()

 {

  $('.chat_history').each(function(){

   var to_user_id = $(this).data('touserid');

   fetch_user_chat_history(to_user_id);

  });

 }

 $(document).on('click', '.ui-button-icon', function(){

  $('.user_dialog').dialog('destroy').remove();

 });

 $(document).on('focus', '.chat_message', function(){

  var is_type = 'yes';

  $.ajax({

   url:"../chat_tefl/update_is_type_status.php",

   method:"POST",

   data:{is_type:is_type},

   success:function()

   {

   }

  })

 });

 $(document).on('blur', '.chat_message', function(){

  var is_type = 'no';

  $.ajax({

   url:"../chat_tefl/update_is_type_status.php",

   method:"POST",

   data:{is_type:is_type},

   success:function()

   {

    

   }

  })

 });

 

 

});  

</script>

<!-- CHAT APPLICATION CODE END -->

