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

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

   
    <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: 300px;
        border-radius: 50px;
        position: fixed;
        bottom: 150px;
        right: 20px;
        display: none;
        z-index: 1000;
}

#live-btn{
    position: fixed;
    bottom: 60px;
    right: 10px; 
    background-color: #128c7e;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    width: 150px;
    font-size: small;
    text-align: center;
    cursor: pointer;
}

#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: 260px;
    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%;
    margin-bottom: 10px;
}

.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;
    
  
}



#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;
}

.comment-form input, .comment-form textarea {
    margin-bottom: 20px;
    padding: 24px 30px;
    line-height: 1;
    font-size: 14px;
    width: 100%;
  }
  @media (max-width: 585px) {
    .comment-form input, .comment-form textarea, .select  {
      padding: 15px;
    }
  }
  .comment-form textarea {
    height: 200px;
  }
  @media (max-width: 767px) {
    .comment-form textarea {
      height: 120px;
    }
  }

    </style>


</head>

<body> 

  

    <main>
        <div class="container ">
            <div class="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 id="greet">Good Morning !</span> <br>
                        <span >Esteemed Visitor</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/+2349090909979"><i class="fab fa-whatsapp"> </i> Front Desk Officer </a>
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2348038271865"><i class="fab fa-whatsapp"> </i> Coordinator</a>
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2349090909979"><i class="fab fa-whatsapp"> </i>  Admission Office </a>
                        <a class="chat-btn uniqueShadows" href="https://wa.me/+2349090909979"><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:+2349135721794" >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="uniqueShadows" onclick="live()"> <i class="fab fa-whatsapp"></i>  We Are Live!</p>
                       
            </div> 

        </div>
    </main>

    <!-- /back to top -->


<!-- COMMON SCRIPTS -->
<script>
    let chatBox = document.getElementsByClassName("chatContainer")[0];
    let triggerBtn = document.getElementById("live-btn");

    function live() {
        chatBox.style.display = "block";
        triggerBtn.style.display = "none";
    }

    function closechat() {
        chatBox.style.display = "none";
        triggerBtn.style.display = "block";
    }

    let greet = document.getElementById("greet");
    let hour = new Date().getHours();

    if (hour < 12) {
        greet.innerHTML = "Good Morning!"
    }
    else if(hour < 17){
        greet.innerHTML = "Good Afternoon!"
    }else{
        greet.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";
    };
</script>


</body>
</html>