<?php

namespace bin\php\Classes;

if (!defined('APP_INIT')) {
    exit;
}

use api\classes\API;

session_start();

require_once($_SERVER['DOCUMENT_ROOT'] . '/api/classes/API.php');

class pageBuilder extends API
{

    private $jsScriptLoadData;

    public function __construct()
    {
        # retrieve all the pages from the database
        $pages = [];
        $query = "SELECT page_name, page_icon, page_description, page_location, page_url, page_color, module_name, module_slugify  FROM system_pages 
                INNER JOIN system_modules ON system_pages.module_uuid = system_modules.module_uuid
                WHERE system_modules.module_enabled = 1 ";
        if ($stmt = $GLOBALS['conn']->prepare($query)) {
            $stmt->execute();
            $result = $stmt->get_result();

            while ($row = $result->fetch_assoc()) {
                $module = $row['module_slugify'];
                $pages[$module][$row['page_name']] = $row;
            }
            $stmt->close();
        }

        $GLOBALS['pages'] = $pages;

        $this->figureOutContent();
    }

    private function figureOutContent()
    {
        $requestUri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

        // Remove trailing slash, but only if it’s not the root "/"
        if ($requestUri !== '/' && substr($requestUri, -1) === '/') {
            $requestUri = rtrim($requestUri, '/');
        }

        $GLOBALS['breadCrumbArray'] = array(array('display' => '<i class="fas fa-home"></i>', 'href' => '/'));

        $GLOBALS['pageContentToShow']['pageName'] = '404';
        $GLOBALS['pageContentToShow']['pageFile'] = 'pageNotFound.php';
        $GLOBALS['pageContentToShow']['pageIcon'] = '<i class="fa-solid fa-ban"></i>';
        $GLOBALS['pageContentToShow']['noUsersAllowed'] = false;

        foreach ($GLOBALS['pages'] as $module) {
            foreach ($module as $page) {
                if ($requestUri == $page['page_url']) {
                    $GLOBALS['pageContentToShow']['pageName'] = $page['page_name'];
                    $GLOBALS['pageContentToShow']['pageFile'] = $page['page_location'];
                    $GLOBALS['pageContentToShow']['pageIcon'] = '<i class="' . $page['page_icon'] . '"></i>';
                    $GLOBALS['pageContentToShow']['noUsersAllowed'] = false;
                }
            }
        }
    }

    public function buildPage()
    { ?>
        <!DOCTYPE html>
        <html lang="en">
        <?php $this->pageHeadContent(); ?>
        <body data-background-color="dark">
        <div class="wrapper<?= (($_COOKIE['sidebarMinimized'] ?? '') === 'true' ? ' sidebar_minimize' : '') . (($_COOKIE['sidebarHovered'] ?? '') === 'true' ? ' sidebar_minimize_hover' : '') ?>">
            <?php $this->pageSidebarContent(); ?>
            <div class="main-panel">
                <?php $this->pageNavbarContent() ?>
                <div class="container">
                    <div class="page-inner">
                        <?php
                        include_once './bin/pages/' . $GLOBALS['pageContentToShow']['pageFile'];
                        if (isset($jsScriptLoadData)) {
                            $this->jsScriptLoadData = $jsScriptLoadData;
                        }

                        ?>
                    </div>
                </div>
                <?php $this->pageFooterContent() ?>
            </div>
        </div>
        <?php $this->pageScriptContents(); ?>
        </body>
        </html>
    <?php }

    private
    function pageHeadContent()
    { ?>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport"/>
            <title>
                <?php echo __($GLOBALS['pageContentToShow']['pageName']) ?>
            </title>

            <!-- Fonts and icons -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
            <link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,500,600,700|Quicksand:300,400,500,600,700&display=swap" rel="stylesheet">

            <style>
                body {
                    min-height: 100vh;
                }

                .custom-avatar {
                    width: 50px; /* Desired width */
                    height: 50px; /* Desired height */
                    display: inline-block; /* Ensure it behaves like an inline block */
                    background-size: cover; /* Stretch to cover the element */
                    background-position: center; /* Center the background image */
                    background-repeat: no-repeat; /* Prevent repetition */
                    border-radius: 50%; /* Circular shape */
                    overflow: hidden; /* Ensure no overflow for a clean circular look */
                }

                .flag-bg[data-flag="gb"] {
                    background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flags/4x3/gb.svg'); /* Greece */
                }

                .flag-bg[data-flag="nl"] {
                    background-image: url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/flags/4x3/nl.svg'); /* Greece */
                }

                .dataTables_filter {
                    width: 100%;
                    text-align: left;
                    position: relative;
                }

                .dataTables_filter label {
                    width: 100%;
                    height: 40px;
                    display: flex;
                }

                .dataTables_filter input {
                    height: 40px;
                    width: 100% !important; /* Make the input field full width */
                    box-sizing: border-box; /* Ensure padding doesn't exceed the width */
                }

                .dataTables_filter .fa-search {
                    position: absolute;
                    top: 12px;
                    left: auto;
                    right: 10px;
                }

                .dataTables_length label {
                    display: flex;
                    align-items: center;
                    height: 40px;
                }

                .dataTables_length label::before {
                    display: inline-block;
                    height: 40px;
                    padding-top: 10px; /* Move "Entries" down */
                }

                .dataTables_length select {
                    flex: 1; /* Allow the select field to take the remaining space */
                    max-width: 100%; /* Ensure it doesn't exceed the container */
                    margin-left: 10px; /* Optional spacing between "Entries" and the select */
                }

                /* Change the border color of the entire dropdown options container */
                .select2-container--bootstrap .select2-dropdown {
                    border: 0 solid rgba(80, 80, 80, 0.19) !important; /* Light gray border */
                    border-radius: 0.25rem; /* Optional: Add a border radius to match Bootstrap styles */
                }

                /* Optional: Remove white edges inside the dropdown */
                .select2-container--bootstrap .select2-results {
                    padding: 0; /* Remove any extra padding inside the dropdown */
                }

                /* Change background color of selected items in the dropdown */
                .select2-container--bootstrap .select2-results__option {
                    background-color: #282828 !important; /* Light green background */
                    color: #d5c4a1 !important; /* Dark green text */
                }

                /* Optional: Change border color on hover */
                .select2-container--bootstrap .select2-results__option:hover {
                    background-color: #346b42 !important; /* Light blue background */
                    color: #d5c4a1 !important; /* Dark green text */
                }

                /* Change background color of selected items in the dropdown */
                .select2-container--bootstrap .select2-results__option[aria-selected="true"] {
                    background-color: #1a3522 !important; /* Light green background */
                    color: #d5c4a1 !important; /* Dark green text */
                }

                /* Optional: Change the background color when hovering over selected items */
                .select2-container--bootstrap .select2-results__option[aria-selected="true"]:hover {
                    background-color: #346b42 !important; /* Slightly darker green */
                    color: #d5c4a1 !important;
                }


                /* Custom Slider switch (on/off button) */


            </style>
            <!-- CSS Files -->
            <link rel="stylesheet" href="/src/css/bootstrap.gruvbox.min.css"/>
            <link rel="stylesheet" href="/src/css/plugins.min.css"/>
            <link rel="stylesheet" href="/src/css/kaiadmin.gruvbox.dark.css"/>

            <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"/> -->

            <!-- favicon -->
            <link rel="icon" type="image/png" href="/src/images/favicon/favicon-96x96.png" sizes="96x96"/>
            <link rel="icon" type="image/svg+xml" href="/src/images/favicon/favicon-96x96.png"/>
            <link rel="shortcut icon" href="/src/images/favicon/favicon.ico"/>
            <link rel="apple-touch-icon" sizes="180x180" href="/src/images/favicon/apple-touch-icon.png"/>
            <link rel="manifest" href="/src/images/favicon/site.webmanifest"/>

            <style>
                .fade-in {
                    opacity: 0;
                    transition: opacity 0.3s ease, transform 0.3s ease;
                }

                .fade-in.show {
                    opacity: 1;
                    transform: scale(1);
                }

                .transition-opacity {
                    transition: opacity 0.3s ease;
                }
            </style>
        </head>
    <?php }

    private function pageSidebarContent()
    {


        $API = new API();
        function showSpan($module_name)
        {
            ?>
            <li class="nav-section">
                <h4 class="text-section"><?php echo $module_name ?></h4>
            </li>
        <?php }

        function showPage($module_name, $page_name)
        {
            $page = $GLOBALS['pages'][$module_name][$page_name];
            ?>
            <li class="nav-item <?php echo($_SERVER['REQUEST_URI'] == $page['page_url'] ? 'active' : '') ?>">
                <a href="<?php echo $page['page_url'] ?>">
                    <i class="<?php echo $page['page_icon'] ?>"></i> <?php echo __($page['page_name']) ?>
                </a>
            </li>
        <?php } ?>

        <div class="sidebar" data-background-color="dark">
            <div class="sidebar-logo">
                <div class="logo-header" data-background-color="dark2">
                    <a href="/" class="logo">
                        <img src="/src/images/logo-sidebar-dark.webp" alt="navbar brand" class="navbar-brand" height="50"/>
                    </a>
                    <div class="nav-toggle">
                        <button class="btn btn-toggle toggle-sidebar">
                            <i class="gg-menu-right"></i>
                        </button>
                        <button class="btn btn-toggle sidenav-toggler">
                            <i class="gg-menu-left"></i>
                        </button>
                    </div>
                    <button class="topbar-toggler more">
                        <i class="gg-more-vertical-alt"></i>
                    </button>
                </div>
            </div>
            <div class="sidebar-wrapper scrollbar scrollbar-inner">
                <div class="sidebar-content">
                    <ul class="nav nav-secondary">

                        <?php
                        showPage('system', 'dashboard');

                        if ($GLOBALS['modules_enabled']['office'] && $API->checkPermissions('ofice-stompjes', 'RO', true)) {
                            showSpan('office');
                            showPage('office', 'stompjeslist');
                        }

                        if ($GLOBALS['modules_enabled']['servers'] && $API->checkPermissions('servers', 'RO', true)) {
                            showSpan('servers');
                            showPage('servers', 'server_overview');
                        }

                        if ($GLOBALS['modules_enabled']['customers'] && $API->checkPermissions('customer-companies', 'RO', true)) {
                            showSpan('customers');
                            showPage('customers', 'companies');
                        }

                        if ($GLOBALS['modules_enabled']['autop']) {
                            showSpan('autop');
                            showPage('autop', 'platforms');
                            showPage('autop', 'vendors');
                            showPage('autop', 'devices');
                            showPage('autop', 'provisioning');
                            showPage('autop', 'phonebooks');
                            showPage('autop', 'device_settings');
                        }

                        showSpan('system');
                        showPage('system', 'access_control');
                        showPage('system', 'systemconfig');
                        ?>
                    </ul>
                </div>
            </div>
        </div>
        <?php
    }

    private
    function pageNavbarContent()
    {
        ?>
        <div class="main-header">
            <div class="main-header-logo">
                <!-- Logo Header -->
                <div class="logo-header" data-background-color="dark2">
                    <a href="/" class="logo">
                        <img src="/src/images/logo-sidebar-dark.webp" alt="navbar brand" class="navbar-brand" height="50"/>
                    </a>
                    <div class="nav-toggle">
                        <button class="btn btn-toggle toggle-sidebar">
                            <i class="gg-menu-right"></i>
                        </button>
                        <button class="btn btn-toggle sidenav-toggler">
                            <i class="gg-menu-left"></i>
                        </button>
                    </div>
                    <button class="topbar-toggler more">
                        <i class="gg-more-vertical-alt"></i>
                    </button>
                </div>
                <!-- End Logo Header -->
            </div>
            <!-- Navbar Header -->
            <nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom" data-background-color="dark2">
                <div class="container-fluid">
                    <ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
                        <li class="nav-item topbar-icon dropdown hidden-caret d-flex d-lg-none"></li>

                        <li class="nav-item topbar-user dropdown hidden-caret">
                            <a class="dropdown-toggle profile-pic" data-bs-toggle="dropdown" href="#" aria-expanded="false">
                                <div class="avatar-sm">
                                    <img src="<?php echo(($_SESSION['user']['user_profile_picture_thumbnail'] != null) ? 'data:image/png;base64, ' . $_SESSION['user']['user_profile_picture_thumbnail'] : '/src/images/user-avatar-default-small.png') ?>" alt="..." class="avatar-img rounded-circle">
                                </div> &nbsp;
                                <span class="op-7"> <?php echo __('hi') ?>,&nbsp;</span>
                                <span class="fw-bold"><?php echo $_SESSION['user']['user_first_name'] ?></span>
                            </a>

                            <ul class="dropdown-menu dropdown-user animated fadeIn">
                                <div class="dropdown-user-scroll scrollbar-outer">
                                    <li>
                                        <div class="user-box">
                                            <div class="avatar-lg">
                                                <img src="<?php echo(($_SESSION['user']['user_profile_picture_thumbnail'] != null) ? 'data:image/png;base64, ' . $_SESSION['user']['user_profile_picture_thumbnail'] : '/src/images/user-avatar-default-small.png') ?>" alt="image profile" class="avatar-img rounded">
                                            </div>
                                            <div class="u-text">
                                                <h4><?php echo $_SESSION['user']['user_email'] ?></h4>
                                                <p class="text-muted"><?php echo $_SESSION['user']['user_email'] ?></p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <?php
                                        if ($_SESSION['user']['user_group_type'] == 'user' || $_SESSION['user']['user_group_type'] == 'admin') { ?>
                                            <a class="dropdown-item" href="/userprofile/"><i class="fa-solid fa-address-card"></i> <?php echo __('user_profile') ?>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                        <?php } else { ?>
                                            <div class="dropdown-divider"></div>
                                        <?php } ?>
                                        <form id="logoutform" class="form-inline logoutform" action="/login/logout.php" method="POST">
                                            <input type="hidden" name="logout">
                                            <a class="dropdown-item" href="#" onclick="document.getElementById('logoutform').submit()">
                                                <i class="fas fa-sign-out-alt"></i> <?php echo __('logout') ?>
                                            </a>
                                        </form>
                                    </li>
                                </div>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- End Navbar -->
        </div>
    <?php }

    private
    function pageFooterContent()
    { ?>
        <footer class="footer py-2">
            <div class="container-fluid d-flex justify-content-between">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="https://docs.sentri.mooij.me" target="_blank"><i class="far fa-question-circle"></i> Help</a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright">
                    <?php echo __('version') ?>
                    <a href="/changelog/">1.2</a>
                </div>
                <div>
                    <span class="navbar-text">Sentri</span>
                </div>
            </div>
        </footer>
    <?php }

    private
    function pageScriptContents()
    { ?>
        <!-- always load these -->
        <script src="/src/js/core/jquery-3.7.1.min.js"></script>
        <script src="/src/js/core/popper.min.js"></script>
        <script src="/src/js/core/bootstrap.min.js"></script>

        <!-- Bootstrap Notify -->
        <script src="/src/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>

        <!-- Sweet Alert -->
        <script src="/src/js/plugin/sweetalert2/sweetalert2.min.js"></script>

        <!-- Kaiadmin JS -->
        <script src="/src/js/kaiadmin.dark.min.js"></script>

        <!-- jQuery Scrollbar -->
        <script src="/src/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>


        <!-- Chart JS
        <script src="/src/js/plugin/chart.js/chart.min.js"></script>
        -->

        <!-- jQuery Sparkline
        <script src="/src/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>
        -->

        <!-- Chart Circle
        <script src="/src/js/plugin/chart-circle/circles.min.js"></script>
        -->

        <!-- jQuery Vector Maps
        <script src="/src/js/plugin/jsvectormap/jsvectormap.min.js"></script>
        <script src="/src/js/plugin/jsvectormap/world.js"></script>
        -->

        <?php
        # keeps refreshing the timeZoneCookie
        setTimeZoneCookie();

        if (isset($this->jsScriptLoadData)) {
            include_once $_SERVER['DOCUMENT_ROOT'] . '/bin/php/jsScripts.php';
        }
        # process response from actions
        if (isset($_SESSION['response'])) {
            $ar = json_decode($_SESSION['response']);
            $type = key($ar);
            $text = reset($ar);
            $title = $type;
            if ($type == 'error') {
                $type = 'danger';
            }
            unset($_SESSION['response']) ?>
            <script>
                var content = {};
                content.message = '<?php echo __($text) ?>';
                content.title = '<?php echo ucfirst($title) ?>';
                content.icon = "fa fa-bell";

                $.notify(content, {
                    type: '<?php echo $type ?>',
                    placement: {
                        from: 'top',
                        align: 'right',
                    },
                    time: 10,
                    delay: 3,
                });
                $('#multiple').select2({
                    theme: "bootstrap"
                });
            </script>
        <?php }
    }
}
