<style>
	#chat_convo{
		max-height: 100vh;
	}
	#chat_convo .direct-chat-messages{
		min-height: 250px;
		height: inherit;
	}
	#chat_convo .card-body {
		overflow: auto;
		min-height:480px;
		background: #fff;
	}

	.cm-radio
	{
		margin:10px;
	}

	#uploadthum
	{
		width: 100px;
		height: 100px;
	}

	/* .direct-chat-primary .right>.direct-chat-text {
    background-color: #f0522a;
    border-color: #f0522a;
    color: #fff;
     
    float: right;
} */

.direct-chat-primary .right>.direct-chat-text {
    background-color: #ffc5b7;
    border-color: #f0522a;
    color: #000;
    /* width: 50%; */
    float: right;
}



.right .direct-chat-text {
    margin-left: 0;
    margin-right: 15px;
}

/* .direct-chat-text {
    border-radius: 0.3rem;
    background-color: #d2d6de;
    border: 1px solid #d2d6de;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
    
} */

.direct-chat-text {
    border-radius: 0.3rem;
    background-color: #eef3fd;
    border: 1px solid #d2d6de;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}


.btn-outline-secondary:hover {
    color: #000;
    background-color: #ffc5b7;
    border-color: #f0522a;
}

 
.disabled {
  pointer-events: none !important;
  cursor: default !important;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 20px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-top: 10px;
}

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #28a745;
    transition: width .6s ease;
    font-size: 16px;
    text-align: center;
}

</style>

<!-- Select2 CSS --> 
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> 

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- Select2 JS --> 
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div class="container-fluid">
	<div class="row">

 


		<div class="col-lg-8 <?php echo isMobileDevice() == false ?  "offset-2" : '' ?>">
			<div class="card direct-chat direct-chat-primary" id="chat_convo">
              <div class="card-header ui-sortable-handle" style="cursor: move;">
                <h3 class="card-title">Ask Me</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg mr-4">
                    <img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('bot_avatar')) ?>" alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      <?php echo $_settings->info('intro') ?>
					   

                    </div>
                    <!-- /.direct-chat-text -->
                  </div>
                  <!-- /.direct-chat-msg -->

                  
                  <!-- /.contacts-list -->
                </div>
                <div class="end-convo"></div>
                <!-- /.direct-chat-pane -->
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                <form id="send_chat" method="post">
                  <div class="input-group">
                    <textarea type="text" name="message" placeholder="Type Message ..." class="form-control" required=""></textarea>
                    <span class="input-group-append">
                      <button type="submit" id="submit_send" class="btn btn-primary">Send</button>
                    </span>
                  </div>
                </form>
              </div>
              <!-- /.card-footer-->
            </div>
		</div>
	</div>
</div>
<div class="d-none" id="user_chat">
	<div class="direct-chat-msg right  ml-4">
        <img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('user_avatar')) ?>" alt="message user image">
        <!-- /.direct-chat-img -->
        <div class="direct-chat-text"></div>
        <!-- /.direct-chat-text -->
    </div>
</div>
<div class="d-none" id="bot_chat">
	<div class="direct-chat-msg mr-4">
        <img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('bot_avatar')) ?>" alt="message user image">
        <!-- /.direct-chat-img -->
        <div class="direct-chat-text"></div>
		<input type="hidden" value="" id="pre_question_id" />
		<input type="hidden" value="" id="chatId" />

		
        <!-- /.direct-chat-text -->
  </div>
</div>

<!-- <input list="animals" name="animal" id="someid">
    <datalist id="animals">
      <option label="Alaskan Malamute" data-id="d8c" value="Dog">
      <option label="Siberian Husky" data-id="w30" value="Dog">
      <option label="Aegean" data-id="rxx" value="Cat">
    </datalist>
    <span id="p">Click</span> -->


<script type="text/javascript">
	$(document).ready(function(){

		localStorage.removeItem("s3url");

		$('.4000').on('change', function() {
			alert( $(this).find(":selected").val() );
		});

		$(".selUser").select2();

		$('[name="message"]').keypress(function(e){
			console.log()
			if(e.which === 13 && e.originalEvent.shiftKey == false){
				$('#send_chat').submit()
				return false;
			}
		})

		

		$('#send_chat').submit(function(e){
			e.preventDefault();
			$("#selUser").select2();
			var chatId = "<?php echo time(); ?>";
			$('#chatId').val(chatId);			
		//	localStorage.setItem("chatId", chatId);
			var message = $('[name="message"]').val();
			if(message == '' || message == null) return false;

			var preQuestionId = $('#pre_question_id').val();

			if(preQuestionId == '2000' && message != '' )
			{
				if(message.trim() == "")
				{
					message = "Please enter valid number";					 
					var bot_chat = $('#bot_chat').clone();
					bot_chat.find('.direct-chat-text').html(message);
					$('#chat_convo .direct-chat-messages').append(bot_chat.html());
					$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
					return false;
				}
				else if(isNaN(message))
				{
					message = "Please enter valid number";					 
					var bot_chat = $('#bot_chat').clone();
					bot_chat.find('.direct-chat-text').html(message);
					$('#chat_convo .direct-chat-messages').append(bot_chat.html());
					$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
					return false;
				}
				else if(message.length!=10){
					message = "Please enter 10 digit mobile number";									 
					var bot_chat = $('#bot_chat').clone();
					bot_chat.find('.direct-chat-text').html(message);
					$('#chat_convo .direct-chat-messages').append(bot_chat.html());
					$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
					return false;
 
            	} 
				 
				
			}

			if(preQuestionId == '9000')
			{
				localStorage.removeItem("s3url");
			}

			var s3url = '';
			var s3urllocal = localStorage.getItem("s3url");
			var finalMessage = '';
			if(s3urllocal)
			{
				var img = "<img id='uploadthum' src=\"" + s3urllocal + "\"> <br/><br/>";
				finalMessage += img;
			}
			
			finalMessage += message;


			var uchat = $('#user_chat').clone();
			uchat.find('.direct-chat-text').html(finalMessage);
			$('#chat_convo .direct-chat-messages').append(uchat.html());
			$('[name="message"]').val('')
			$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
			$('[name="message"]').attr('readonly', false);
			

			

			if(preQuestionId == '9000' && message != '' )
			{
				$('[name="message"]').attr('readonly', true);
				$('#submit_send').attr('disabled', 'disabled');	
				$('.'+preQuestionId).addClass('disabled');	
			}


			//get images
			
			 
			 
			 
			// form_data.append('message', message);
			// form_data.append('chatId', chatId);
			// form_data.append('option_value', '');
			// form_data.append('preQuestionId', preQuestionId);



			 

			

			$.ajax({
				url:_base_url_+"classes/Master.php?f=get_response",
				method:'POST',
				//data: form_data, //{message:message, chatId:chatId, option_value:'', preQuestionId:preQuestionId},
				data: {message:message, chatId:chatId, option_value:'', preQuestionId:preQuestionId, s3url:s3urllocal},
				error: err=>{
					console.log(err)
					alert_toast("An error occured.",'error');
					end_loader();
				},
				success:function(resp){
					if(resp){
						resp = JSON.parse(resp)
						if(resp.status == 'success'){
							var questionId = resp.questionId;
							
							$('#pre_question_id').val(questionId);
							if(resp.questiontype == "textbox")
							{
								//$('[name="message"]').attr('readonly', 'true');
								$('[name="message"]').attr('readonly', false);
								$('#submit_send').removeAttr('disabled');								 
							}
							else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');	
							}
							
						 
							
							var bot_chat = $('#bot_chat').clone();
							bot_chat.find('.direct-chat-text').html(resp.message);
							$('#chat_convo .direct-chat-messages').append(bot_chat.html());
							$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
						}
					}
				}
			})
		})

	})

	function selectAnsRadio(str='',chatId='')
	{
		 
		//var sff = localStorage.getItem("chatId");

		 
		var message = str;
			if(message == '' || message == null) return false;

			var preQuestionId = $('#pre_question_id').val();
			 
			var uchat = $('#user_chat').clone();
			uchat.find('.direct-chat-text').html(message);
			$('#chat_convo .direct-chat-messages').append(uchat.html());
			$('[name="message"]').val('')
			$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
			$('[name="message"]').attr('readonly', false);
			

			if(preQuestionId == '9000' && str == 'Yes')
			                {
				              //$('[name="message"]').attr('readonly', 'true');
				              $('[name="message"]').attr('readonly', false);
				              $('#submit_send').removeAttr('disabled');
							
							  return false;
			                }
			
				$('.'+preQuestionId).removeClass('disabled');
				

				 
				if(preQuestionId == '4000')
				{
					$('.4000').attr('disabled', 'disabled');	
				}

				if(preQuestionId == '5000' && str == 'Yes')
				{
					$('.4000').attr('disabled', 'disabled');	
				}

				$.ajax({
				url:_base_url_+"classes/Master.php?f=get_response",
				method:'POST',
				data:{message:message, chatId:chatId,  option_value:str, preQuestionId: preQuestionId},
				error: err=>{
					console.log(err)
					alert_toast("An error occured.",'error');
					end_loader();
				},
				success:function(resp){
					if(resp){
						resp = JSON.parse(resp)
						if(resp.status == 'success'){

							var questionId = resp.questionId;
							var end = resp.end;

							
							$('#pre_question_id').val(questionId);

							$('.'+preQuestionId).addClass('disabled');		

							 if(resp.questiontype == "textbox")
							{
								//$('[name="message"]').attr('readonly', 'true');
								$('[name="message"]').attr('readonly', false);
								$('#submit_send').removeAttr('disabled');
							}
							else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');	
							}
							
							if(preQuestionId == '7000')
							{
								$('[name="message"]').attr('readonly', false);
								$('#submit_send').removeAttr('disabled');
							}

							if(end == 'yes')
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');								
							}


							var bot_chat = $('#bot_chat').clone();
							bot_chat.find('.direct-chat-text').html(resp.message);
							$('#chat_convo .direct-chat-messages').append(bot_chat.html());
							$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
						}
					}
				}
			})
			  
			
	}


	getFactoryList();
function getFactoryList()
{
    let dropdown = $('#locality-dropdown');
    dropdown.append('<option selected="true" disabled>Please wait...</option>');
    dropdown.prop('selectedIndex', 0);
    $.get('ajax_factory_list.php',  // url
      function (data, textStatus, jqXHR) {  // success callback
          //alert('status: ' + textStatus + ', data:' + data);
          var response = JSON.parse(data);
          var lengthJson = response.length;
          if(lengthJson > 0){
            dropdown.html("");
            dropdown.append('<option selected="true" disabled>Choose Factory</option>');
            dropdown.prop('selectedIndex', 0);
                $.each(response, function(i, option) {
                    $('#locality-dropdown').append($('<option/>').attr("value", option.Id).attr("data-id", option.BillingStreet).text(option.Name+" ("+option.BillingCity+") "));
                });
            }         
    });
}


$(function() {
  $('#browser').on('input',function() {
    var opt = $('option[value="'+$(this).val()+'"]');
    alert(opt.length ? opt.attr('value') : 'NO OPTION');
  });
});

 

 

function selectFactoryName(str='')
{
	var factoryId = $("#browsers option[value='" + $('#browser').val() + "']").attr('data-id');
	var factoryName = $("#browsers option[value='" + $('#browser').val() + "']").attr('value');
 
	var strvalue = str.value;
	var option = Array.prototype.find.call(str.list.options, function(option) {
        return option.value === strvalue;
    });
    var factoryAddress = "";
    if(option.getAttribute("data-id"))
	{
		factoryId = option.getAttribute("data-id");
		factoryAddress = option.getAttribute("data-address");
		factoryName = str.value;
		
	}


 
 
		factoryId = factoryId ? factoryId : '';

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

		if(factoryId)
		{
		 
			$('.4000').attr('disabled', 'disabled');	
				 
		}

		var message = factoryName;
		var messageTemp = message;
		if(factoryAddress)
		{
			var messageTemp = factoryName+" <br/> (Address: "+factoryAddress+")";
		}
		
			if(message == '' || message == null) return false;
			var uchat = $('#user_chat').clone();
			uchat.find('.direct-chat-text').html(messageTemp);
			$('#chat_convo .direct-chat-messages').append(uchat.html());
			$('[name="message"]').val('')
			$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
			$('[name="message"]').attr('readonly', false);
			var preQuestionId = $('#pre_question_id').val();
			$.ajax({
				url:_base_url_+"classes/Master.php?f=get_response",
				method:'POST',
				data:{message:message, chatId:chatId,  option_value:factoryId, preQuestionId: preQuestionId, factoryId:factoryId, factoryAddress:factoryAddress},
				error: err=>{
					console.log(err)
					alert_toast("An error occured.",'error');
					end_loader();
				},
				success:function(resp){
					if(resp){
						resp = JSON.parse(resp)
						if(resp.status == 'success'){

							var questionId = resp.questionId;
							var end = resp.end;

							
							$('#pre_question_id').val(questionId);

							if(resp.questiontype == "textbox")
							{
								//$('[name="message"]').attr('readonly', 'true');
								$('[name="message"]').attr('readonly', false);
								$('#submit_send').removeAttr('disabled');
							}
							else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');	
							}
							


							 
							if(end == 'yes')
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');								
							}
							var bot_chat = $('#bot_chat').clone();
							bot_chat.find('.direct-chat-text').html(resp.message);
							$('#chat_convo .direct-chat-messages').append(bot_chat.html());
							$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
						}
					}
				}
			})
		}



function uploadS3file()
{
	var file_data = $('#fileToUpload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    //alert(form_data);                             
    $.ajax({
		xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
        url: 's3.php', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
		beforeSend: function(){
                $(".progress-bar").width('0%');
                 
            },
        success: function(response){
            //alert(response); // <-- display response from the PHP script, if any

			var json_response = JSON.parse(response);
			var s3url = json_response.ObjectURL;
			localStorage.setItem("s3url", s3url);
			return s3url;
		//	var img = "<img id='uploadthum' src=\"" + s3url + "\">";
		}
     });
}


function fileUploadSubmit()
{
	var file_data = $('#fileToUpload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    //alert(form_data);                             
    $.ajax({
		xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
        url: 's3.php', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
		beforeSend: function(){
                $(".progress-bar").width('0%');
                 
            },
        success: function(response){
            //alert(response); // <-- display response from the PHP script, if any

			var json_response = JSON.parse(response);
			var s3url = json_response.ObjectURL;
			var img = "<img id='uploadthum' src=\"" + s3url + "\">";

			if(s3url)
			{
				$('#fileToUpload').attr('disabled', 'disabled');
				$('.8000').attr('disabled', 'disabled');
			}

			//$("#imageBox").html("<img id='uploadthum' src=\"" + s3url + "\">");


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

		    var message = s3url;
			if(message == '' || message == null) return false;
			var uchat = $('#user_chat').clone();
			uchat.find('.direct-chat-text').html(img);
			$('#chat_convo .direct-chat-messages').append(uchat.html());
			$('[name="message"]').val('')
			$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
			$('[name="message"]').attr('readonly', false);
			var preQuestionId = $('#pre_question_id').val();
			$.ajax({
				url:_base_url_+"classes/Master.php?f=get_response",
				method:'POST',
				data:{message:message, chatId:chatId,  option_value:s3url, preQuestionId: preQuestionId},
				error: err=>{
					console.log(err)
					alert_toast("An error occured.",'error');
					end_loader();
				},
				success:function(resp){
					if(resp){
						resp = JSON.parse(resp)
						if(resp.status == 'success'){

							var questionId = resp.questionId;
							var end = resp.end;

							

							
							$('#pre_question_id').val(questionId);
							if(resp.questiontype == "textbox")
							{
								//$('[name="message"]').attr('readonly', 'true');
								$('[name="message"]').attr('readonly', false);
							}
							else if(resp.questiontype == "radio")
							{
								$('[name="message"]').attr('readonly', true);
							}

							if(end == 'yes')
							{
								$('[name="message"]').attr('readonly', true);
								$('#submit_send').attr('disabled', 'disabled');								
							}
							var bot_chat = $('#bot_chat').clone();
							bot_chat.find('.direct-chat-text').html(resp.message);
							$('#chat_convo .direct-chat-messages').append(bot_chat.html());
							$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
						}
					}
				}
			})


 
        }
     });
}
</script>

<script type="text/javascript">
// var userLang = navigator.language || navigator.userLanguage; 
// alert ("The language is: " + userLang);
</script>