<!-- WhatsApp Chat Button -->
			<div class="whatsapp-button" id="toggleButton" onclick="toggleChat()">
				<svg id="whatsappIcon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
				    <path d="M19.05 4.91a9.91 9.91 0 0 0-14.04 0 9.9 9.9 0 0 0-2.9 7.04c0 1.74.45 3.44 1.31 4.94l-1.36 4.97 5.03-1.32a9.87 9.87 0 0 0 4.92 1.32c2.65 0 5.16-1.04 7.04-2.9a9.89 9.89 0 0 0 0-14.05zm-2.18 11.86c-.8.8-2.37 1.74-4.14 1.74-1.77 0-3.26-.67-4.42-1.83a6.28 6.28 0 0 1-1.83-4.42c0-1.77.94-3.34 1.74-4.14.45-.44.9-.52 1.35-.26.45.26 1.13 1.57 1.26 1.8.13.23.13.45 0 .7-.13.26-.2.45-.39.64-.2.19-.39.45-.58.58-.19.13-.26.32-.13.58.13.26.58.9 1.22 1.35s1.09.77 1.39.9c.26.13.45.13.58-.13.13-.26.64-.77.9-1.09.26-.32.45-.26.7-.13.26.13 1.55.83 1.8 1.03.26.13.26.39.26.64s-.58 1.48-.84 1.74z"/>
				</svg>
			</div>

			<!-- Chat Box -->
			<div class="chat-box" id="chatBox">
				<div class="chat-header">
				    <?php echo $school_initial;?> ADMIN
				    <button class="close-btn" onclick="toggleChat()">✖</button>
				</div>
				<div class="chat-body">
				    <div class="chat-message">How can I assist you?</div>
				</div>
				<div class="chat-footer">
				    <input type="text" id="chatInput" placeholder="Type a message...">
				    <button onclick="sendMessage()">➤</button>
				</div>
			</div>
        </div>
    </div>
    <script>
        let chatOpen = false;

        function toggleChat() {
            const chatBox = document.getElementById("chatBox");
            const whatsappIcon = document.getElementById("whatsappIcon");

            if (!chatOpen) {
                chatBox.style.display = "flex";
                whatsappIcon.innerHTML = '<path d="M6 19l12-12M6 7l12 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>';
            } else {
                chatBox.style.display = "none";
                whatsappIcon.innerHTML = '<path d="M19.05 4.91a9.91 9.91 0 0 0-14.04 0 9.9 9.9 0 0 0-2.9 7.04c0 1.74.45 3.44 1.31 4.94l-1.36 4.97 5.03-1.32a9.87 9.87 0 0 0 4.92 1.32c2.65 0 5.16-1.04 7.04-2.9a9.89 9.89 0 0 0 0-14.05z"/>';
            }
            chatOpen = !chatOpen;
        }

        function sendMessage() {
            const inputField = document.getElementById("chatInput");
            const message = encodeURIComponent(inputField.value.trim());
            if (message) {
                window.open(`https://wa.me/<?php echo $school_whatsapp; ?>?text=${message}`, "_blank");
                inputField.value = "";
            }
        }

        document.getElementById("chatInput").addEventListener("keypress", function (event) {
            if (event.key === "Enter") sendMessage();
        });
    </script>
    <!-- Javascripts-->
    <script src="../assets/lga/js/lga.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../assets/js/jquery-2.1.4.min.js"></script>
    <script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
    <script src="../assets/js/plugins/pace.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script type="text/javascript" src="../assets/js/plugins/moment.min.js"></script>
    <script type="text/javascript" src="../assets/js/plugins/jquery-ui.custom.min.js"></script>
<!-- Jquery Datatables JS -->
<script src="../assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../assets/vendor/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.bootstrap.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.html5.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.print.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.colVis.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/JSZip-2.5.0/jszip.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/pdfmake.min.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/vfs_fonts.js"></script>
<script src="../assets/vendor/datatables/extras/TableTools/RowGroup-1.0.2/js/dataTables.rowGroup.min.js"></script>
    <script src="../assets/SweetAlerts/sweetalert.js"></script>
<script src="../assets/nanoscroller/nanoscroller.js"></script>
<script src="../assets/vendor/fuelux/js/spinner.js"></script>
<script src="../assets/vendor/loader/loader.js"></script>
<script src="../assets/Datepicker/bootstrap-datepicker.min.js"></script>
    <script src="../assets/lga/js/lga.js"></script>
    <!-- SweetAlert Trigger -->
    <?php
    require_once("pages/all_scripts.php");
    ?>
</body>

</html>
