<style>
    .glow{
        background-color: #d3d3d352 !important;
        border-radius: 5px !important;
        cursor: pointer !important;
    }
</style>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" style="width: 500px;">
    <div class="offcanvas-header" style="background: #f1f4ff;padding: 1.6rem 1.4rem;">
        <div class="profile-details d-flex justify-content-between w-100">
            <div class="d-flex gap-2">
                <img src="https://app.watify.io/assets/watify-images/user-profile.png" width="60" height="60" alt="user profile">
                <div class="profile-info">
                    <div class="user-name fw-bold text-dark mb-1"><?php echo $_SESSION['name']; ?></div>
                    <div class="user-email"><?php echo $_SESSION['email']; ?></div>
                    <div class="user-email">Client ID: <?php echo $_SESSION['client_id']; ?></div>
                    <div class="click-to-chat mt-3">
                        <button class="btn btn-outline-success">Copy click-to-chat link</button>
                        <a href="javascript:;" class="btn btn-outline-danger ms-2" id="logoutBtn">Sign out</a>
                    </div>
                    <div class="change-info mt-3">
                        <p class="fw-bold text-dark mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #287F71;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path><path d="M11 11h2v6h-2zm0-4h2v2h-2z"></path></svg> Change info</p>
                    </div>
                </div>
            </div>
            <div>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
        </div>
    </div> <!-- end offcanvas-header-->

    <div class="offcanvas-body">
        <div class="p-2 fw-bold text-center" style="background: #f1f4ff;">
            <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;transform: ;msFilter:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263"></path></svg> Add WhatsApp Chat Button to your Website</a>
        </div>
        <hr />
        <div>
            <p>Language</p>
            <select class="form-select" name="" id="">
                <option value="">Default</option>
                <option value="english">English</option>
                <option value="english">English</option>
                <option value="english">English</option>
                <option value="english">English</option>
                <option value="english">English</option>
                <option value="english">English</option>
                <option value="english">English</option>
            </select>
        </div>
        <hr />
        <div style="display: grid;grid-template-columns: auto auto;gap: 0.7rem;">
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 0 0-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0 0 12 6zm-1 10h2v2h-2z"></path><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path></svg> Help center
            </a>
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M21 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-8 2h2v2h-2V7zm0 4h2v2h-2v-2zM9 7h2v2H9V7zm0 4h2v2H9v-2zM5 7h2v2H5V7zm0 4h2v2H5v-2zm12 6H7v-2h10v2zm2-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path></svg>Keyboard shortcuts
            </a>
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z"></path><path d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z"></path></svg> Join our community
            </a>
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.13-4.08-.2-6 1.74a1 1 0 0 0 0 1.41l11.3 11.32a1 1 0 0 0 1.41 0c1.95-2 1.89-4.82 1.77-6l3.21-3.2c3.19-3.19 1.74-9.18 1.68-9.43a1 1 0 0 0-.76-.73zm-2.36 8.75L15 14.67a1 1 0 0 0-.27.9 6.81 6.81 0 0 1-.54 3.94L4.52 9.82a6.67 6.67 0 0 1 4-.5A1 1 0 0 0 9.39 9s1.4-1.45 3.51-3.56A6.61 6.61 0 0 1 17.5 4a14.51 14.51 0 0 1 2.33.2c.24 1.43.62 5.04-1.27 6.93z"></path><circle cx="15.73" cy="8.3" r="2"></circle><path d="M5 16c-2 1-2 5-2 5a7.81 7.81 0 0 0 5-2z"></path></svg> What's new
            </a>
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M4 8H2v12a2 2 0 0 0 2 2h12v-2H4z"></path><path d="M20 2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-9 12V6l7 4z"></path></svg> Watch tutorials
            </a>
            <a class="" style="background: #f1f4ff;display: flex;align-items: center;padding: 1rem;color: #4a5a6b;border-radius: 5px;gap: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: #002da1;background: #fff;border-radius: 50%;padding: 2px;"><path d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"></path></svg> Email us
            </a>
        </div>
    </div> <!-- end offcanvas-body-->
</div> <!-- end offcanvas-->
    </div>
        <!-- END wrapper -->

        <!-- Vendor -->

        <script src="assets/libs/jquery/jquery.min.js"></script>

        <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

        <script src="assets/libs/simplebar/simplebar.min.js"></script>

        <script src="assets/libs/node-waves/waves.min.js"></script>

        <script src="assets/libs/waypoints/lib/jquery.waypoints.min.js"></script>

        <script src="assets/libs/jquery.counterup/jquery.counterup.min.js"></script>

        <script src="assets/libs/feather-icons/feather.min.js"></script>

        <!-- Datatables js -->
        <script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>

        <!-- dataTables.bootstrap5 -->
        <script src="assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
        <script src="assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>

        
        <!-- buttons.colVis -->
        <script src="assets/libs/datatables.net-buttons/js/buttons.colVis.min.js"></script>
        <script src="assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
        <script src="assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
        <script src="assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>

        <!-- buttons.bootstrap5 -->
        <script src="assets/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>

        <!-- dataTables.keyTable -->
        <script src="assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
        <script src="assets/libs/datatables.net-keytable-bs5/js/keyTable.bootstrap5.min.js"></script>

        <!-- dataTable.responsive -->
        <script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

        <!-- dataTables.select -->
        <script src="assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
        <script src="assets/libs/datatables.net-select-bs5/js/select.bootstrap5.min.js"></script>

        <!-- Apexcharts JS -->
        <script src="assets/libs/apexcharts/apexcharts.min.js"></script>

        <!-- Widgets Init Js -->
        <script src="assets/js/pages/crm-dashboard.init.js"></script>

        <!-- Quill Editor Js -->
        <script src="assets/libs/quill/quill.core.js"></script>
        <script src="assets/libs/quill/quill.min.js"></script>

        <!-- Quill Demo Js -->
        <script src="assets/js/pages/quilljs.init.js"></script>

        <!-- Datatable Demo App Js -->
        <script src="assets/js/pages/datatable.init.js"></script>

        <!--notification js -->
        <script src="assets/plugins/notifications/js/lobibox.min.js"></script>
        <script src="assets/plugins/notifications/js/notifications.min.js"></script>
        <script src="assets/plugins/notifications/js/notification-custom-script.js"></script>

        <!-- App js-->
        <script src="assets/js/app.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


        <script>
            document.getElementById("logoutBtn").addEventListener("click", function() {
                fetch('https://app.watify.io/server/logout', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === "success") {
                        console.log("Logout successful");
                        window.location.href = "/auth-login"; // Redirect to login page
                    } else {
                        console.error("Logout failed:", data.message);
                    }
                })
                .catch(error => console.error("Error:", error));
            });

        </script>

        <script src="./JS/accountDetails.js"></script>
    </body>

</html>

<!-- javascript for sidebar -->

<script>
$(document).ready(function () {
    let sidebarLoaded = false;
    let navbarLoaded = false;

    function checkAndShowContent() {
        if (sidebarLoaded && navbarLoaded) {
            $("#loader").fadeOut(200, function () {
                $(".content").fadeIn(); // Show content smoothly after hiding the spinner
                $(this).remove(); // Remove the loader from the DOM
            });
        }
    }

    // Fetch Sidebar
    let currentPage = "<?php echo isset($currentPage) ? $currentPage : ''; ?>";

    $.ajax({
        url: "https://app.watify.io/server/fetch_all_sidebar_pages?",
        type: "GET",
        data: { page: currentPage },
        dataType: "json",
        success: function (response) {

            if (!response.sidebar || response.sidebar.length === 0) {
                $("body").attr("data-sidebar", "hidden");
                $("#menuBtn").addClass("d-none");
                $("#sidebar-container, .app-sidebar-menu").hide();
                $(".content-page").css("margin-left","0");
                $(".topbar-custom").css("left","0"); 
            } else {
                buildSidebar(response.sidebar);
            }
            sidebarLoaded = true;
            checkAndShowContent();
        },
        error: function () {
            console.error("Error fetching sidebar.");
            sidebarLoaded = true;
            checkAndShowContent();
        }
    });

    function buildSidebar(menuItems) {
        let dropdowns = "";
        let links = "";
        let side_bar_tab = '';

        const pageToTabMapping = {
            // page name: sidebar tab
            'billing-details': 'billing details',
            'switch-plan':'switch plan',
            'your-plan':'your plan',
            'my-templates': 'your templates'
        }
        side_bar_tab = pageToTabMapping[currentPage];

        menuItems.forEach(item => {
            const iconClass = item.icons ? `mdi ${item.icons}` : "mdi mdi-circle";

            if (item.children.length > 0) {
                dropdowns += `
                <li>
                    <a href="#menu-${item.id}" data-bs-toggle="collapse">
                        <i class="${iconClass}"></i>
                        <span>${item.page_name}</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menu-${item.id}">
                        <ul class="nav-second-level">
                            ${item.children.map(child => `
                                <li class="${side_bar_tab == child.page_name.toLowerCase()?'glow':''}">
                                    <a href="${child.page_link}" class="tp-link">
                                        <i class="${child.icons ? `mdi ${child.icons}` : 'mdi mdi-circle'}"></i>
                                        ${child.page_name}
                                    </a>
                                </li>
                            `).join('')}
                        </ul>
                    </div>
                </li>`;
            } else {
                links += `
                <li>
                    <a href="${item.page_link}" class="tp-link">
                        <i class="${iconClass}"></i>
                        <span>${item.page_name}</span>
                    </a>
                </li>`;
            }
        });

        $('#side-menu').html(dropdowns + links);
    }

    // Fetch Navbar
    $.ajax({
        url: "https://app.watify.io/server/fetch_all_pages",
        type: "GET",
        dataType: "json",
        success: function (response) {
            let menuList = $(".topnav-menu").first();
            menuList.find("li:not(:first-child)").remove(); // Remove everything except the toggle button

            if (response.pages && response.pages.length > 0) {
                let visiblePages = response.pages.slice(0, 6);
                let hiddenPages = response.pages.slice(6);

                visiblePages.forEach(page => {
                    let menuItem = `
                        <li class="ps-2 pe-2">
                            <a href="https://app.watify.io/${page.page}" class="text-decoration-none text-dark">
                                <h6 class="mb-0">
                                    <span class="mdi ${page.icon}"></span> ${page.page_name}
                                </h6>
                            </a>
                        </li>
                    `;
                    menuList.append(menuItem);
                });

                if (hiddenPages.length > 0) {
                    let moreDropdown = `
                        <li class="ps-2 pe-2 dropdown">
                            <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="moreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="mdi mdi-dots-horizontal"></span> More
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="moreDropdown">
                                ${hiddenPages.map(page => `
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center" href="https://app.watify.io/${page.page}">
                                            <span class="mdi ${page.icon} me-2"></span> ${page.page_name}
                                        </a>
                                    </li>
                                `).join("")}
                            </ul>
                        </li>
                    `;
                    menuList.append(moreDropdown);
                }
            }
            navbarLoaded = true;
            checkAndShowContent();
        },
        error: function () {
            console.error("Error fetching navbar.");
            navbarLoaded = true;
            checkAndShowContent();
        }
    });
});
 </script>