File: /var/www/html/labs/chatbot2/chat-form-step-3.php
<?php header('Access-Control-Allow-Origin: *'); ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="gu">
<head>
<?php require("head.php"); ?>
<style>
.chat-div
{
/* background:#ccc; */
min-height:400px;
border: 1px solid #ccc;
max-width: 400px;
margin: auto;
}
.chat-div p{
padding:10px;
background:#ccc;
}
.chat-div-heading
{
background:#fff;
border: 1px solid #ccc;
padding-left:10px;
margin-bottom:10px;
}
.chat-div-message
{
height:55px;
border: 1px solid #ccc;
max-width: 400px;
margin: auto;
}
.chat-message-botton
{
float:right;
background:#167bc3;
height:55px;
color:#fff;
text-align:center;
padding:15px;
width:15%;
}
.chat-div-message p
{
font-size:10px;
color:#ccc;
float:left;
padding: 10px;
}
#exampleFormControlTextarea1
{
float: left;
width:85%;
/* border: none; */
}
.mans
{
float:right;
width:80%;
color:#fff;
background:#0a71f091 !important;
display:none;
}
.mque
{
float:left;
width:80%;
}
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ .chat-div { min-height:430px; }}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ .chat-div { min-height:430px; } }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ .chat-div { min-height:430px; } }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ .chat-div { height:430px; }}
@media (min-width:1450px) { /* hi-res laptops and desktops */ .chat-div { height:630px; }}
</style>
</head>
<body class="home page-template page-template-template page-template-home-page page-template-templatehome-page-php page page-id-5 wp-embed-responsive group-blog responsive-menu-slide-left">
<?php require("inc/web-header.php"); ?>
<div class="container">
<div class="col-md-12">
<h2>Chat with us</h2>
<div class="chat-div" id="chat-div">
<div class="chat-div-heading"><h4>Ask Me <div id="data"></div>
</h4></div>
<p class="mque">Hi! I'm John, How can I help you?</p>
<p class="mans"></p>
</div>
<div class="chat-div-message" id="chat-div-message">
<!-- <p>Type Message...</p> -->
<textarea class="form-control" id="exampleFormControlTextarea1" rows="2" placeholder="Type Message"></textarea>
<div class="chat-message-botton" onclick="send();"> >> </div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function send()
{
var message = $('#exampleFormControlTextarea1').val();
if(message)
{
$('.mans').show();
$('.mans').html(message);
$('#exampleFormControlTextarea1').val('');
submittocase();
}
}
function submittocase()
{
var caseId = localStorage.getItem("CaseId");
var message = $('#exampleFormControlTextarea1').val();
if(!caseId)
{
return false;
}
else if(!message)
{
return false;
}
else
{
var postdata = {Caseid: caseId, Message: message};
$.ajax({
type: "POST",
url: 'ajax_case_create.php',
data: postdata,
success: function(resdata){
const data = JSON.parse(resdata);
const CaseId = data.CaseId;
if(data.statusCode == 200)
{
if(CaseId)
{
return false;
}
}
else
{
alert(data.message);
return false;
}
},
error: function(xhr, status, error){
console.error(xhr);
}
});
// window.location.href="chat-form-step-2.php";
}
}
</script>