<header id="page-topbar">
    <div class="navbar-header">
        <div class="d-flex">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <a href="index.php" class="logo logo-dark">
                    <span class="logo-sm">
                        <img src="../images/logo-sm.png" alt="" height="24">
                    </span>
                    <span class="logo-lg">
                        <img src="../images/logo-sm.png" alt="" height="24"> <span class="logo-txt">Admin</span>
                    </span>
                </a>

                <a href="index.php" class="logo logo-light">
                    <span class="logo-sm">
                        <img src="../images/logo-sm.png" alt="" height="24">
                    </span>
                    <span class="logo-lg">
                        <img src="../images/logo-sm.png" alt="" height="24"> <span class="logo-txt">Admin</span>
                    </span>
                </a>
            </div>

            <button type="button" class="btn btn-sm px-3 font-size-16 header-item" id="vertical-menu-btn">
                <i class="fa fa-fw fa-bars"></i>
            </button>

            <!-- App Search-->
            <form class="app-search d-none d-lg-block">
                <div class="position-relative">
                    <img src="../images/logo-bk.png" alt="" height="44">
                </div>
            </form>
        </div>

        <div class="d-flex">



            <div class="dropdown d-sm-inline-block">
                <button type="button" class="btn header-item" id="mode-setting-btn">
                    <i data-feather="moon" class="icon-lg layout-mode-dark"></i>
                    <i data-feather="sun" class="icon-lg layout-mode-light"></i>
                </button>
            </div>





            <div class="dropdown d-inline-block">
                <button type="button" class="btn header-item bg-soft-light border-start border-end" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img class="rounded-circle header-profile-user" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&w=0&k=20&c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=" alt="Header Avatar">
                    <span class="d-none d-xl-inline-block ms-1 fw-medium">Admin.</span>
                    <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <!-- item-->
                    <a class="dropdown-item" href="index.php"><i class="mdi mdi-face-profile font-size-16 align-middle me-1"></i> Clients</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="javascript:void(0)" id="logout"><i class="mdi mdi-logout font-size-16 align-middle me-1"></i> Logout</a>
                </div>
            </div>

        </div>
    </div>
</header>


<script type="text/javascript">
    $(document).ready(function() {



        // this is the script that authorize the logout script 
        $("#logout").click(function() {

            Swal.fire({
                icon: 'warning',
                title: 'Are you sure you want to logout?',
                showDenyButton: true,
                confirmButtonText: 'Logout',
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: "../include/logout.php",
                        success: function(data, request, setting) {
                            // reload the windows
                            location.reload();

                        }
                    });
                }
            })




        });




    });
</script>