<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Unique Digitals">

<?php include "process-visitors.php" ?>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<style>
    .uniqueShadows{
  -webkit-box-shadow: 3px 3px 6px #b8b9be, -3px -3px 2px #ece5dd;
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 2px #ece5dd;
}
.uniqueShadowhover:hover{
  cursor: pointer;
  -webkit-box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
        box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
}

#chatContainer{
  width: 300px;
  height: 250px;
  border-radius: 50px;
  position: fixed;
  bottom: 120px;
  right: 20px;
  display: none;
  z-index: 999000;
}

#formContainer{
  width: 300px;
  height: 300px;
  border-radius: 50px;
  position: fixed;
  bottom: 120px;
  right: 20px;
  display: none;
  z-index: 999000;
}

#visitors-form{
  border-radius: 10px;
  width: 100%;
  padding: 20px;
  background-color: #003333;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 8000;
}

input{
  height: 50px;
  background-color: #fff;
  padding-left: 5px;
  border-radius: 5px;
}

#open-chat{
  border-radius: 10px;
  background-color: #ab0909;
  color: #fff;
  border: 2px solid #fff;
  width: 200px;
  padding: 10px;
  align-self: center;
}


#open-chat:hover{

  background-color: #003333;
  color: #fff;
  border: 2px solid #fff;

}

.color-white{
  color: #fff;
}

#close-panel{
  text-align: center;
  color: #fff;
  font-size: smaller;
  line-height: 15px;
  font-weight: 600;
  align-self: center;
  margin-bottom: 5px;
}

.index-up{
  z-index: 9000;
  opacity: 1.8;
}

#live-btn{
  position: fixed;
  bottom: 60px;
  right: 10px;
  background-color: #128c7e;
  color: #fff;
  width: 150px;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  gap: 5px;
  cursor: pointer;
  z-index: 10;
}

#live-btn:hover{
  position: fixed;
  bottom: 65px;
  right: 15px;
  color: #128c7e;
  background-color: #ece5dd;

}


.box{
  width: 100%;
  height: 60px;
  position: relative;
}

.box-1{
  display: flex;
  flex-direction: row;
  background-color: #075e54;
  padding: 5px;
  position: relative;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.box-2{
  display: flex;
  flex-direction: column;
  height: 200px;
  background-color: #ece5dd;
  padding: 10px;
  
 
  
}

.box-2 p{
  color: #272b2e;
  font-size: small;
  line-height: 15px;
  font-weight: 600;

}

#btn-container{
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  bottom: 10px;
  left: 20px;
  height: 100%;

  
}

.chat-btn{
  background-color: #128c7e;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  width: 250px;
  font-size: small;
  text-align: center;
 
}

.chat-btn:hover{
  background-color: #ece5dd;
  color: #128c7e;
  border: 1px solid #e7dfd6;

}

.box-3{
  display: flex;
  flex-direction: column;
  height: 80px;
  background-color: #075e54;
  padding: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#text-box{
  display: flex;
  flex-direction: column;
  gap: 0px;
  position: absolute;
  top: 12px;
  left: 60px;
}


#text-box p{
  color: #e5f2db;
  font-size: smaller;
  line-height: 15px;
  font-weight: 600;
}

#small{
  font-size: smaller;
  font-weight: 400;
}

#close-box{
  position: absolute;
  top: 12px;
  right: 10px;
  border-radius: 100%;

  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  
  
 
}
#close-box p{
  color: white;
  cursor: pointer;
}


#logo-box img{
  width: 40px;
  height: 60px;

}



#call-btn{
  background-color: #075e54;
  color: #dcf8c6; 
  border: 2px solid #dcf8c6;
  padding: 5px;
  gap: 5px;
  border-radius:50px;
  width: 200px;
  text-align: center;
  align-self: center;
  margin-top: 10px;
  text-transform: uppercase;
}

#call-btn:hover{
  background-color: #128c7e;
  color: #f0f5ec;
  border: 2px solid #128c7e;
}

#close-text{
  color: #dcf8c6;
  font-size: smaller;
  line-height: 15px;
  font-weight: 600;
  align-self: center;
  margin-top: 5px;
}
#greet{
  color:#128c7e;
}

.shake-right {
-webkit-animation: shake-right 1.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) 20 both;
        animation: shake-right 1.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) 20 both;
}


/* ----------------------------------------------
* Generated by Animista on 2023-2-27 10:39:5
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation shake-right
* ----------------------------------------
*/
@-webkit-keyframes shake-right {
0%,
100% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
10% {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
20%,
40%,
60% {
  -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
}
30%,
50%,
70% {
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}
80% {
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
}
90% {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
}
@keyframes shake-right {
0%,
100% {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
10% {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
20%,
40%,
60% {
  -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
}
30%,
50%,
70% {
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}
80% {
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
}
90% {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
}


.color-change-5x {
-webkit-animation: color-change-5x 60s linear infinite alternate both;
        animation: color-change-5x 60s linear infinite alternate both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-2-27 10:42:42
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation color-change-5x
* ----------------------------------------
*/
@-webkit-keyframes color-change-5x {
0% {
  background: #19dcea;
}
25% {
  background: #b22cff;
}
50% {
  background: #ea2222;
}
75% {
  background: #f5be10;
}
100% {
  background: #3bd80d;
}
}
@keyframes color-change-5x {
0% {
  background: #19dcea;
}
25% {
  background: #b22cff;
}
50% {
  background: #ea2222;
}
75% {
  background: #f5be10;
}
100% {
  background: #3bd80d;
}
}


</style>

</head>

<body> 
  
    <main>
        <div class="container ">
        <div id="formContainer">

            <form action="includes/process-visitors.php" method="POST" id="visitors-form">
            <p class="index-up color-white">Hello, Let's get to know you</p>            
                 <input type="text" name="fullname" id="fname" placeholder="Full Name"  >
                <input type="email" name="email" id="email" placeholder="Email Address" >
                <input type="tel" name="phone" id="phone" placeholder="Mobile Number"  >

                <button type="submit" name="submit" class="index-up" id="open-chat" >Get Started</button>
                <p id="close-panel" class="index-up " onclick="closechat()" style="cursor:pointer">Close Form</p>
            </form>

        </div>
            <div id="chatContainer">
                <div class="box box-1" id="night-box">
                    <div id="logo-box"><img src="assets/img/alevels/logo.png" alt="Logo"></div>
                    <div id="text-box">
                        <p>St. Catherine's A'Levels School <br> <small id="small"><span id="message">Typically Replies within 5 Minutes</span></small></p></div>
                    <div id="close-box">
                        <p onclick="closechat()">x</p>
                    </div>

                </div>
                <div class="box box-2">
                    <p > <span class="greet">Good Day !</span> <br>
                        <span id="user">Esteemed Customer</span> <br>
                        <small id="small" style="color:#128c7e;font-weight:600">Whom will you Like to Chat With?</small>

                    </p>
                    <div id="btn-container">
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2349067058184"><i class="fab fa-whatsapp"> </i> Front Desk </a>
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2349067058184"><i class="fab fa-whatsapp"> </i>  Admission Office</a>
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2349067058184"><i class="fab fa-whatsapp"> </i>  Help & Support</a>
                        
                    </div>
            

                </div>
                <div class="box box-3" id="night-box2">
                <a id="call-btn" href="tel:+2349067058184" >Call Our Hotline</a>
                <p id="close-text" style="cursor:pointer" onclick="closechat()">Close Chat</p>
                </div>

            </div>
            <div id="btn404">
                <p id="live-btn" class=" btn_1 mt-3  shake-right" onclick="openForm()"> <i class="fab fa-whatsapp"> </i>  We Are Live !</p>
                       
            </div> 

        </div>
        
    </main>

<script>
  let triggerBtn = document.getElementById("live-btn");
  let formBox = document.getElementById("formContainer");
  let chatBox = document.getElementById("chatContainer");
 
     
function openForm() {
    formBox.style.display = "block";
    chatBox.style.display = "none";
    triggerBtn.style.display = "none";
 }
 
 function openForm() {
    formBox.style.display = "block";
    chatBox.style.display = "none";
    triggerBtn.style.display = "none";
 }
 
 
 const form = document.getElementById('visitors-form');
 // Attach an event listener to the form's submit event
 form.addEventListener('submit', (event) => {
   // Prevent the default form submission behavior
   event.preventDefault();
 
   // Call your function here
   myFunction();
 });
 
 // Define your function here
 function myFunction() {
   // Do something
     let name = document.getElementById("fname").value;
     let user = document.getElementById("user");
     user.innerHTML = name;
     chatBox.style.display = "block";
     formBox.style.display = "none";    
     triggerBtn.style.display = "none";
 
 
 }
 
 let hour = new Date().getHours();
 
 let greeting = document.querySelectorAll(".greet");
   for (let i = 0; i < greeting.length; i++) {
        const element = greeting[i];
        if (hour < 12) {
         element.innerHTML = "Good Morning!";
         }else if(hour < 17){
         element.innerHTML = "Good Afternoon!";
     }else{
         element.innerHTML = "Good Evening!";
 };
 
 
 
 let msg = document.getElementById("message");
 
 if (hour > 22 || hour < 5) {
     msg.innerHTML = "Sorry! We are unavailable right now </br> But you can still leave a message!"
     document.getElementById("night-box").style.backgroundColor = "#272b2e";
     document.getElementById("night-box2").style.backgroundColor = "#272b2e";
     greet.style.color = "#272b2e";
 };
        
     }
 
    
 function closechat() {
     chatBox.style.display = "none";
     formBox.style.display = "none";
     triggerBtn.style.display = "block";
 }
     
 let popup = document.getElementById("alert");
 popup.style.display = "none";
 
 
</script>
</body>
</html>