<?php require("config.php"); ?>
<?php require("./server/verify_role.php"); ?>

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

<head>

    <meta charset="utf-8" />

    <title>Dashboard | Watify - WhatsApp Automation</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />

    <meta name="author" content="Zoyothemes" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />


    <!-- App favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="https://watify.io/assets/img/apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="https://watify.io/assets/img/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="https://watify.io/assets/img/favicon-16x16.png">

    <link rel="mask-icon" color="#6366f1" href="https://watify.io/assets/img/favicon.ico">

    <meta name="msapplication-TileColor" content="#080032">

    <meta name="msapplication-config" content="https://watify.io/assets/favicon/browserconfig.xml">

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


    <!-- Datatables css -->
    <link href="assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css" integrity="sha512-z/90a5SWiu4MWVelb5+ny7sAayYUfMmdXKEAbpj27PfdkamNdyI3hcjxPxkOPbrXoKIm7r9V2mElt5f1OtVhqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Quill css -->
    <link href="assets/libs/quill/quill.core.js" rel="stylesheet" type="text/css" />
    <link href="assets/libs/quill/quill.snow.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/quill/quill.bubble.css" rel="stylesheet" type="text/css" />

    <!--plugins-->
    <link rel="stylesheet" href="assets/plugins/notifications/css/lobibox.min.css" />

    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <!-- App css -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-style" />

    <!-- Icons -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />

    <script src="assets/js/head.js"></script>
    <style>
        .content {
            display: none;
        }

        #loader {
            width: 100%;
            height: 100vh;
            
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
    
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.9);
       
            z-index: 9999;
        }
    </style>
    <script>
        $(document).ready(function() {
            // Inject loader inside content-page
            $(".content-page").prepend(`
                <div id="loader">
                    <div class="spinner-grow text-primary m-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <div class="spinner-grow text-success m-2" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                    <div class="spinner-grow text-warning m-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            `);

            // Hide content and show loader
            $(".content").hide();

            // Simulate loading
            setTimeout(() => {
                $("#loader").fadeOut(300, function() {
                    $(".content").fadeIn();
                    $(this).remove();
                });
            }, 1000);
        });
    </script>
</head>

<!-- body start -->

<body data-menu-color="light" data-sidebar="default">

    <!-- Begin page -->
    <div id="app-layout">