<?php
include "root.class.php";
new root_styles();
$roots = new root();
$roots->OnPageScripts();
new login_system();
new online_check();

// $navbar = new navbar();


function add_mobile_icon($name, $icon)
{
    ?>
    <img src="icons/<?php echo $icon; ?>.svg" alt="<?php echo $name; ?>" onclick="dropdown('<?php echo $name; ?>')"
        class="mobile_icon">
    <div class="dropdown" id="<?php echo $name; ?>">
        <?php
}

function open_group($name)
{
    ?>
        <button onclick="dropdown('<?php echo $name; ?>')"><?php echo $name; ?></button>
        <div class="dropdown" id="<?php echo $name; ?>">
            <?php
}

function add_heading($name)
{

    ?>
            <h2 class="sub_2"><?php echo $name; ?>
            </h2>
            <?php
}

?>

        <style>
            body {
                margin: 0;
                padding-bottom: 60px;
                /* enough space for the navbar */
                font-family: sans-serif;
            }

            .bottom-navbar {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30vw;
                background-color: black;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                overflow: auto;
                color: white;
                z-index: 1000;
            }

            .bottom-navbar a {
                color: white;
                text-decoration: none;
                font-size: 14px;
                text-align: center;
            }

            .bottom-navbar a:hover {
                color: #f0a500;
            }

            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .nav-item i {
                font-size: 20px;
            }

            .mini_logo {
                margin: 1vw;
                width: 50vw;
                cursor: pointer;
            }

            .side_icons {
                margin: 1vw;
                width: 20vw;
                cursor: pointer;
            }

            .dropdown_content {
                display: none;
                position: absolute;
                top: 45px;
                right: 0;
                background-color: white;
                min-width: 150px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                z-index: 998;
            }

            .dropdown_1 {
                display: none;
                flex-direction: column;
                background-color: darkgrey;
                border: 3px solid white;
                border-bottom: none;
                width: 19vw;
                height: 40vw;
                top: 25vw;
                bottom: -26vw;
                left: -68vw;
                overflow: scroll;
                margin-top: -2vw;
                position: relative;
                z-index: 1;
                padding: 0.5vw 0vw;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                animation: dropdown 0.8s ease-in-out;
            }

            .dropdown_2 {
                display: none;
                flex-direction: column;
                background-color: darkgrey;
                border: 3px solid white;
                border-bottom: none;
                width: 19vw;
                height: 11vw;
                top: 46vw;
                bottom: -16vw;
                left: -47vw;
                overflow: scroll;
                margin-top: -2vw;
                position: relative;
                z-index: 1;
                padding: 0.5vw 0vw;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                animation: dropdown 0.8s ease-in-out;
            }

            .dropdown_3 {
                display: none;
                flex-direction: column;
                background-color: darkgrey;
                border: 3px solid white;
                border-bottom: none;
                width: 19vw;
                height: 40vw;
                top: 25vw;
                bottom: -26vw;
                left: -68vw;
                overflow: scroll;
                margin-top: -2vw;
                position: relative;
                z-index: 1;
                padding: 0.5vw 0vw;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                animation: dropdown 0.8s ease-in-out;
            }

            .dropdown_4 {
                display: none;
                flex-direction: column;
                background-color: darkgrey;
                border: 3px solid white;
                border-bottom: none;
                width: 19vw;
                height: 40vw;
                top: 25vw;
                bottom: -26vw;
                left: -68vw;
                overflow: scroll;
                margin-top: -2vw;
                position: relative;
                z-index: 1;
                padding: 0.5vw 0vw;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                animation: dropdown 0.8s ease-in-out;
            }

            .dropdown_5 {
                display: none;
                flex-direction: column;
                background-color: darkgrey;
                border: 3px solid white;
                border-bottom: none;
                width: 19vw;
                height: 40vw;
                top: 25vw;
                bottom: -26vw;
                left: -68vw;
                overflow: scroll;
                margin-top: -2vw;
                position: relative;
                z-index: 1;
                padding: 0.5vw 0vw;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                animation: dropdown 0.8s ease-in-out;
            }

            .popup-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /* background: rgba(0, 0, 0, 0.5); */
                /* z-index: 2000; */
                justify-content: center;
                align-items: center;
            }

            .popup_content {
                background: white;
                padding: 20px;
                border-radius: 8px;
                min-width: 250px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                position: relative;
            }
        </style>

        <body>
            <div class="content">
                <h1>Welcome!</h1>
                <p>This is your main content area. Scroll to see the sticky bottom navbar stay in place.</p>
            </div>

            <div id="dropdown" style="bottom: -42vw;left: -98vw;">
                <div class="dropdown_1" id="popup" style="transition: 0.5s ease-in-out; display: none;">
                    <h2 class="sub_2">WORD ORDERS</h2>
                    <button onclick="change_to('work_orders/active_work_orders.php')" class="mini_btn"></button>
                    <button onclick="change_to('work_orders/home.php')"></button>
                    <h2 class="sub_2">REVIEW</h2>
                    <button onclick="change_to('work_orders/active_reviews.php')"></button>
                    <h2 class="sub_2">SERVICE TICKETS</h2>
                    <button onclick="change_to('service_tickets/home.php')">SERVICE TICKETS</button>
                    <button onclick="change_to('service_tickets/active_tickets.php')"></button>
                    <h2 class="sub_2">MEETINGS</h2>
                    <button onclick="change_to('meetings/home.php')">VIEW</button>
                    <h2 class="sub_2">CLIENTS</h2>
                    <button onclick="change_to('clients/home.php')">CLIENTS</button>
                    <h2 class="sub_2">NOTES</h2>
                    <button onclick="change_to('notes/add_notes.php')">ADD</button>
                    <button onclick="change_to('notes/search_notes.php')">FIND</button>
                    <h2 class="sub_2">CALENDER & REMINDERS</h2>
                    <button onclick="change_to('calendar/home.php')"></button>
                    <h2 class="sub_2">MY ACCOUNT</h2>
                    <button onclick="change_to('users/this_user.php')"></button>
                </div>
            </div>

            <div id="dropdown" style="bottom: -42vw;left: -98vw;">
                <div class="dropdown_2" id="USERS" style="transition: 0.5s ease-in-out; display: none;">
                    <button onclick="change_to('users/home.php')" class="mini_btn">USERS</button>
                </div>
            </div>
            <div id="dropdown" style="bottom: -42vw;left: -98vw;">
                <div class="dropdown_3" id="ADMIN">
                    <button onclick="change_to('invoices/home.php')" class="mini_btn">INVOICES</button>
                    <button onclick="change_to('expences/home.php')" class="mini_btn">EXPENCES</button>
                    <button onclick="change_to('suppliers/home.php')" class="mini_btn">SUPPLIERS</button>
                </div>
            </div>
            <div id="dropdown" style="bottom: -42vw;left: -98vw;">
                <div class="dropdown_4" id="REPORTS" style="transition: 0.5s ease-in-out; display: none;">
                    <button onclick="change_to('reports/work_orders.php')" class="mini_btn">WORK ORDERS</button>
                    <button onclick="change_to('reports/service_tickets.php')" class="mini_btn">TICKETS</button>
                    <button onclick="change_to('reports/projects.php')" class="mini_btn">PROJECTS</button>
                    <button onclick="change_to('reports/assets.php')" class="mini_btn">ASSETS</button>
                    <button onclick="change_to('reports/passwords.php')" class="mini_btn">PASSWORDS</button>
                </div>
            </div>
            <div id="dropdown" style="bottom: -42vw;left: -98vw;">
                <div class="dropdown_5" id="TOOLS" style="transition: 0.5s ease-in-out; display: none;">
                    <button onclick="change_to('tools/iplookup.php')" class="mini_btn">IP LOOKUP</button>
                    <button onclick="change_to('tools/mobile_dev.php')" class="mini_btn">MOBILE DEV</button>
                </div>
            </div>

            <div class="bottom-navbar">
                <div>
                    <img src="icons/lighting.svg" alt="action_icon" onclick="openPopup()" class="side_icons">
                </div>

                <div>
                    <img src="icons/users.svg" alt="users_icon" onclick="dropdown('USERS')" class="side_icons">
                </div>

                <div>
                    <img src="icons/shield.svg" alt="admin_icon" onclick="dropdown('ADMIN')" class="side_icons">
                </div>
                <div>
                    <img src="icons/logo.svg" alt="Logo" onclick="change_to('home.php')" class="mini_logo">
                </div>

                <div>
                    <img src="icons/bar_graph.svg" alt="reports_icon" onclick="dropdown('REPORTS')" class="side_icons">
                </div>

                <div>
                    <img src="icons/toolbox.svg" alt="tools_icon" onclick="dropdown('TOOLS')" class="side_icons">

                </div>
                <div>
                    <img src="icons/open_lock.svg" alt="logout_icon" onclick="logout()" class="side_icons">
                </div>

            </div>

            <script>

                function openPopup() {
                    document.getElementById("popup").style.display = "flex";
                }

                // Close popup when clicking outside the content box
                window.onclick = function (event) {
                    const popup = document.getElementById("popup");
                    if (event.target === popup) {
                        closePopup();
                    }
                };

                function logout() {
                    window.location.href = 'logout.php';
                }

                function dropdown(id) {
                    var dropdowns = document.querySelectorAll(".dropdown");
                    dropdowns.forEach(function (el) {
                        if (el.id != id) {
                            el.style.transition = "all 0.5s ease-in-out";
                            setTimeout(function () {
                                el.style.display = "none";
                            }, 500);
                        }
                    });
                    document.getElementById(id).style.display = document.getElementById(id).style.display == "flex" ? "none" : "flex";
                }

                function change_to(url) {
                    if (url.includes('/')) {
                        document.getElementById("app_frame").src = 'app/' + url;
                        return;
                    }
                    document.getElementById("app_frame").src = 'app/' + url + '/home.php';
                }
                var set = 0;
                var input_n = document.getElementById("username");
                var input_p = document.getElementById("password");

                function dropdown(id) {
                    var dropdowns = document.querySelectorAll(".dropdown");
                    dropdowns.forEach(function (el) {
                        if (el.id != id) {
                            el.style.transition = "all 0.5s ease-in-out";
                            setTimeout(function () {
                                el.style.display = "none";
                            }, 500);
                        }
                    });
                    document.getElementById(id).style.display = document.getElementById(id).style.display == "flex" ? "none" : "flex";
                }


                setInterval(get_dev_console, 1000);
                function get_dev_console() {
                    console.log("get_dev_console");
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "root.class.php", true);
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            document.getElementById('dev_mode').innerHTML = xhr.responseText;
                            console.log(xhr.responseText);

                        } else {
                            console.error("Error:", xhr.statusText);
                        }
                    };
                    xhr.send("ajax_type=dev_mode_check");
                }
                function toggle_dev_mode() {
                    document.getElementById('dev_mode').style.display = document.getElementById('dev_mode').style.display == "none" ? "block" : "none";
                }
            </script>