<?php
$strNombres = App::obtenerNombresUsuario();
$strApellidos = App::obtenerApellidosUsuario();
$arrNombres = explode(' ', $strNombres);
$arrApellidos = explode(' ', $strApellidos);
$primerNombre = $arrNombres[0];
$primerApellido = $arrApellidos[0];
$nombreUsuario = $strNombres . ' ' . $strApellidos;

$modulo = isset($_GET['mod']) ? base64_decode(urldecode($_GET['mod'])) . '/' : '';
$paginaSolicitada = isset($_GET['page']) ? $_GET['page'] . 'Page' : 'welcomePage';
$urlVistaSolicitada = 'main/' . $modulo . 'views/' . $paginaSolicitada . '.php';
$pageId = isset($_GET['aid']) ? base64_decode(urldecode($_GET['aid'])) : 0;

$usuarioActual = App::obtenerIdUsuario();

$tipoPermiso = Permiso::validarTipoAcceso($usuarioActual, $pageId);

$objErrores = (object)[];

$esRoot = isset($tipoPermiso->esRoot) ? $tipoPermiso->esRoot : false;

if ($paginaSolicitada != 'welcomePage' && $paginaSolicitada != 'perfilPage') {
    if ($tipoPermiso->status == 200) {
        if ($tipoPermiso->mantenimiento == 0) {
            $autorizado = true;
            if (empty($modulo)) {
                $autorizado = $tipoPermiso->esRoot;
            } else {
                $autorizado = $tipoPermiso->permitirVisualizacion;
            }

            !$autorizado &&  $urlVistaSolicitada = 'main/views/accesoDenegadoPage.php';
        } else {
            $urlVistaSolicitada = 'main/views/mantenimientoPage.php';
        }
    } else {
        $objErrores = $tipoPermiso;
        $urlVistaSolicitada = 'main/views/accesoDenegadoPage.php';
    }
}
?>
<!DOCTYPE html>
<html lang="en" data-layout="vertical" data-topbar="light" data-layout-mode="light" data-sidebar="dark" data-sidebar-size="sm-hover" data-sidebar-image="none">

<head>

    <meta charset="utf-8" />
    <title>SEAC - Main</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- App favicon -->
    <link rel="shortcut icon" href="main/assets/images/favicon.ico">

    <!-- Sweetalert 2 -->
    <link rel="stylesheet" href="main/assets/libs/sweetalert2/css/sweetalert2.min.css">

    <link rel="stylesheet" href="main/assets/libs/bootstrap-select/css/bootstrap-select.min.css">

    <link rel="stylesheet" href="main/assets/libs/@simonwep/pickr/themes/classic.min.css" /> <!-- 'classic' theme -->
    <link rel="stylesheet" href="main/assets/libs/@simonwep/pickr/themes/monolith.min.css" /> <!-- 'monolith' theme -->
    <link rel="stylesheet" href="main/assets/libs/@simonwep/pickr/themes/nano.min.css" /> <!-- 'nano' theme -->

    <link rel="stylesheet" href="main/assets/libs/toastify-js/toastify.css">

    <link rel="stylesheet" href="main/assets/libs/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" href="main/assets/libs/flatpickr/plugins/monthSelect/style.css">

    <!-- Bootstrap Css -->
    <link href="main/assets/css/bootstrap.min.css?v=2" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="main/assets/libs/datatable/datatables.min.css" />
    <!-- Icons Css -->
    <link href="main/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link rel="stylesheet" href="main/assets/fonts/poppins.css">
    <link href="main/assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="main/assets/css/custom.min.css" rel="stylesheet" type="text/css" />

    <link href="main/assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="main/assets/libs/font-awesome/css/all.css">

    <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />

    <link rel="stylesheet" href="main/assets/css/main.css?v=1.0.0">


    <!-- loader -->
    <link rel="stylesheet" href="main/assets/css/loader.css?v=1.0.0">
    <link rel="stylesheet" href="main/assets/css/litle-loader.css?v=1.0.0" type="text/css" />

</head>

<body>

    <div class="loader">
        <div class="loader-container">
            <div class="lds-ellipsis">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            Procesando...
        </div>
    </div>

    <div id="layout-wrapper">

        <header id="page-topbar">
            <div class="layout-width">
                <div class="navbar-header">
                    <div class="d-flex">
                        <!-- LOGO -->
                        <div class="navbar-brand-box horizontal-logo">
                            <a href="./" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="main/assets/images/logo-sm.png" alt="" height="22">
                                </span>
                                <span class="logo-lg">
                                    <img src="main/assets/images/logo-dark.png" alt="" height="17">
                                </span>
                            </a>

                            <a href="./" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="main/assets/images/logo-sm.png" alt="" height="22">
                                </span>
                                <span class="logo-lg">
                                    <img src="main/assets/images/logo-light.png" alt="" height="17">
                                </span>
                            </a>
                        </div>

                        <button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger" id="topnav-hamburger-icon">
                            <span class="hamburger-icon open">
                                <span></span>
                                <span></span>
                                <span></span>
                            </span>
                        </button>
                    </div>

                    <div class="d-flex align-items-center">

                        <div class="ms-1 header-item d-none d-sm-flex">
                            <button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle light-dark-mode">
                                <i class='bx bx-moon fs-22'></i>
                            </button>
                        </div>

                        <div class="dropdown ms-sm-3 header-item topbar-user">
                            <button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="d-flex align-items-center">
                                    <img class="rounded-circle header-profile-user" src="main/assets/images/users/<?= App::obtenerFotoUsuario() ?>?v=<?= rand(); ?>" alt="Header Avatar" id="main-user-img">
                                    <span class="text-start ms-xl-2">
                                        <span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text" id="spnNombreUsuarioApp"><?php echo $primerNombre . ' ' . $primerApellido; ?></span>
                                    </span>
                                </span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <h6 class="dropdown-header">!Bienvenid@ <?php echo $primerNombre; ?>!</h6>
                                <a class="dropdown-item" href="./?page=perfil"><i class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Perfil</span></a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" id="logout-link"><i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Cerrar sesión</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- ========== App Menu ========== -->
        <div class="app-menu navbar-menu">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <!-- Dark Logo-->
                <a href="./" class="logo logo-dark">
                    <span class="logo-sm">
                        <img src="main/assets/images/logo-sm.png" alt="" height="22">
                    </span>
                    <span class="logo-lg">
                        <img src="main/assets/images/logo-dark.png" alt="" height="17">
                    </span>
                </a>
                <!-- Light Logo-->
                <a href="./" class="logo logo-light">
                    <span class="logo-sm">
                        <img src="main/assets/images/logo-sm.png" alt="" height="22">
                    </span>
                    <span class="logo-lg">
                        <img src="main/assets/images/logo-light.png" alt="" height="17">
                    </span>
                </a>
                <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover" id="vertical-hover">
                    <i class="ri-record-circle-line"></i>
                </button>
            </div>

            <div id="scrollbar">
                <div class="container-fluid">

                    <div id="two-column-menu">
                    </div>
                    <ul class="navbar-nav" id="navbar-nav">
                        <li class="menu-title" id="li-menu-title"><span data-key="t-menu">Menú</span></li>

                        <?php
                        if ($esRoot) {
                        ?>
                            <li class="menu-title"><span>Sistema</span></li>

                            <li class="nav-item">
                                <a class="nav-link menu-link" href="#usuarios-menu-option" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="usuarios-menu-option">
                                    <i class="fa-solid fa-users"></i> <span>Usuarios</span>
                                </a>
                                <div class="collapse menu-dropdown" id="usuarios-menu-option">
                                    <ul class="nav nav-sm flex-column">
                                        <li class="nav-item">
                                            <a href="./?page=usuarios" class="nav-link">Gestionar usuarios</a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="./?page=sesiones" class="nav-link">Gestionar sesiones</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link menu-link" href="#configuracion-menu-option" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="configuracion-menu-option">
                                    <i class="fa-solid fa-cog"></i> <span>Configuración</span>
                                </a>
                                <div class="collapse menu-dropdown" id="configuracion-menu-option">
                                    <ul class="nav nav-sm flex-column">
                                        <li class="nav-item">
                                            <a href="./?page=empresas" class="nav-link">Gestionar empresas</a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="./?page=modulos" class="nav-link">Gestionar módulos</a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="./?page=permisos" class="nav-link">Configurar permisos</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        <?php
                        }
                        ?>
                    </ul>
                </div>
                <!-- Sidebar -->
            </div>

            <div class="sidebar-background"></div>
        </div>
        <!-- Left Sidebar End -->
        <!-- Vertical Overlay-->
        <div class="vertical-overlay"></div>

        <!-- ============================================================== -->
        <!-- Contenedor de páginas -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    <?php
                    !file_exists($urlVistaSolicitada) && $urlVistaSolicitada = 'main/views/404-not-found.php';
                    if (!empty(get_object_vars($objErrores))) {
                        echo json_encode($objErrores);
                    }
                    include $urlVistaSolicitada;
                    ?>

                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <script>
                                document.write(new Date().getFullYear())
                            </script> © Sistema web principal.
                        </div>
                        <div class="col-sm-6">
                            <div class="text-sm-end d-none d-sm-block">
                                Design & Develop by Seguridad Activa S.A. de C.V.
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->



    <!--start back-to-top-->
    <button onclick="topFunction()" class="btn btn-danger btn-icon" id="back-to-top">
        <i class="ri-arrow-up-line"></i>
    </button>
    <!--end back-to-top-->

    <div class="customizer-setting d-none d-md-block">
        <div class="btn-info btn-rounded shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
            <i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
        </div>
    </div>

    <!-- Theme Settings -->
    <div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
        <div class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header">
            <h5 class="m-0 me-2 text-white">Personalizar apariencia</h5>

            <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-0">
            <div data-simplebar class="h-100">
                <div class="p-4">

                    <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Tipo de tema</h6>
                    <p class="text-muted">Elige entre tema claro o tema oscuro.</p>

                    <div class="colorscheme-cardradio">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-check card-radio">
                                    <input class="form-check-input" type="radio" name="data-layout-mode" id="layout-mode-light" value="light">
                                    <label class="form-check-label p-0 avatar-md w-100" for="layout-mode-light">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Claro</h5>
                            </div>

                            <div class="col-4">
                                <div class="form-check card-radio dark">
                                    <input class="form-check-input" type="radio" name="data-layout-mode" id="layout-mode-dark" value="dark">
                                    <label class="form-check-label p-0 avatar-md w-100 bg-dark" for="layout-mode-dark">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-soft-light d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-soft-light d-block p-1"></span>
                                                    <span class="bg-soft-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Oscuro</h5>
                            </div>
                        </div>
                    </div>

                    <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color de barra superior</h6>
                    <p class="text-muted">Elige entre barra clara o barra oscura.</p>

                    <div class="row">
                        <div class="col-4">
                            <div class="form-check card-radio">
                                <input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-light" value="light">
                                <label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
                                    <span class="d-flex gap-1 h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
                                                <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-light d-block p-1"></span>
                                                <span class="bg-light d-block p-1 mt-auto"></span>
                                            </span>
                                        </span>
                                    </span>
                                </label>
                            </div>
                            <h5 class="fs-13 text-center mt-2">Claro</h5>
                        </div>
                        <div class="col-4">
                            <div class="form-check card-radio">
                                <input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-dark" value="dark">
                                <label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
                                    <span class="d-flex gap-1 h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
                                                <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-primary d-block p-1"></span>
                                                <span class="bg-light d-block p-1 mt-auto"></span>
                                            </span>
                                        </span>
                                    </span>
                                </label>
                            </div>
                            <h5 class="fs-13 text-center mt-2">Oscuro</h5>
                        </div>
                    </div>

                    <div id="sidebar-size" class="d-none">
                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Tamaño de barra lateral</h6>
                        <p class="text-muted">Choose a size of Sidebar.</p>

                        <div class="row">
                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-default" value="lg">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Default</h5>
                            </div>

                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-compact" value="md">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 bg-soft-primary rounded mb-2"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Compact</h5>
                            </div>

                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small" value="sm">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-light d-flex h-100 flex-column gap-1">
                                                    <span class="d-block p-1 bg-soft-primary mb-2"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
                            </div>

                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small-hover" value="sm-hover">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small-hover">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-light d-flex h-100 flex-column gap-1">
                                                    <span class="d-block p-1 bg-soft-primary mb-2"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Small Hover View</h5>
                            </div>
                        </div>
                    </div>

                    <div id="sidebar-color">
                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color de barra lateral</h6>
                        <p class="text-muted">Elige un color para la barra lateral.</p>

                        <div class="row">
                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-light" value="light">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Claro</h5>
                            </div>
                            <div class="col-4">
                                <div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-dark" value="dark">
                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
                                        <span class="d-flex gap-1 h-100">
                                            <span class="flex-shrink-0">
                                                <span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
                                                    <span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                </span>
                                            </span>
                                            <span class="flex-grow-1">
                                                <span class="d-flex h-100 flex-column">
                                                    <span class="bg-light d-block p-1"></span>
                                                    <span class="bg-light d-block p-1 mt-auto"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                                <h5 class="fs-13 text-center mt-2">Oscuro</h5>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient" aria-expanded="false" aria-controls="collapseBgGradient">
                                    <span class="d-flex gap-1 h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
                                                <span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                                <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-light d-block p-1"></span>
                                                <span class="bg-light d-block p-1 mt-auto"></span>
                                            </span>
                                        </span>
                                    </span>
                                </button>
                                <h5 class="fs-13 text-center mt-2">Degradado</h5>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="collapse" id="collapseBgGradient">
                            <div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">

                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient" value="gradient">
                                    <label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient">
                                        <span class="avatar-title rounded-circle bg-vertical-gradient"></span>
                                    </label>
                                </div>
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-2" value="gradient-2">
                                    <label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-2">
                                        <span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
                                    </label>
                                </div>
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-3" value="gradient-3">
                                    <label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-3">
                                        <span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
                                    </label>
                                </div>
                                <div class="form-check sidebar-setting card-radio">
                                    <input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-4" value="gradient-4">
                                    <label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-4">
                                        <span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="sidebar-img">
                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Imagen para parra lateral</h6>
                        <p class="text-muted">Elige una imagen para la barra lateral.</p>

                        <div class="d-flex gap-2 flex-wrap img-switch">
                            <div class="form-check sidebar-setting card-radio">
                                <input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-none" value="none">
                                <label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
                                    <span class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
                                        <i class="ri-close-fill fs-20"></i>
                                    </span>
                                </label>
                            </div>

                            <div class="form-check sidebar-setting card-radio">
                                <input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-01" value="img-1">
                                <label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
                                    <img src="main/assets/images/sidebar/img-1.jpg" alt="" class="avatar-md w-auto object-cover">
                                </label>
                            </div>

                            <div class="form-check sidebar-setting card-radio">
                                <input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-02" value="img-2">
                                <label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
                                    <img src="main/assets/images/sidebar/img-2.jpg" alt="" class="avatar-md w-auto object-cover">
                                </label>
                            </div>
                            <div class="form-check sidebar-setting card-radio">
                                <input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-03" value="img-3">
                                <label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
                                    <img src="main/assets/images/sidebar/img-3.jpg" alt="" class="avatar-md w-auto object-cover">
                                </label>
                            </div>
                            <div class="form-check sidebar-setting card-radio">
                                <input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-04" value="img-4">
                                <label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
                                    <img src="main/assets/images/sidebar/img-4.jpg" alt="" class="avatar-md w-auto object-cover">
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <div class="offcanvas-footer border-top p-3 text-center">
            <div class="row">
                <div class="col-6">
                    <button type="button" class="btn btn-light w-100" id="reset-layout">Restablecer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Layout config Js -->
    <script src="main/assets/js/app/layout.js"></script>

    <!-- jQuery -->
    <script type="text/javascript" src="main/assets/libs/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="main/assets/libs/sortablejs/Sortable.min.js"></script>
    <script type="text/javascript" src="main/assets/libs/sortablejs/jquery-sortable.js"></script>

    <!-- JAVASCRIPT -->
    <script src="main/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="main/assets/libs/simplebar/simplebar.min.js"></script>
    <script src="main/assets/libs/node-waves/waves.min.js"></script>
    <script src="main/assets/libs/feather-icons/feather.min.js"></script>
    <script src="main/assets/libs/jQuery-mask/jquery.mask.min.js"></script>
    <script src="main/assets/plugins/lord-icon-2.1.0.js"></script>

    <script src="main/assets/js/app/plugins.js"></script>

    <!-- Sweetalert2 -->
    <script type="text/javascript" src="main/assets/libs/sweetalert2/js/sweetalert2.min.js"></script>

    <!-- particles js -->
    <script src="main/assets/libs/particles.js/particles.js"></script>

    <script src="main/assets/libs/toastify-js/toastify.js"></script>

    <script src="main/assets/js/app/password-addon.init.js"></script>
    <script src="main/assets/js/app/bootstrap-validation.init.js"></script>

    <!-- nouisliderribute js -->
    <script src="main/assets/libs/nouislider/nouislider.min.js"></script>
    <script src="main/assets/libs/wnumb/wNumb.min.js"></script>

    <!-- gridjs js -->
    <script src="main/assets/libs/gridjs/gridjs.umd.js"></script>

    <script type="text/javascript" src="main/assets/libs/bootstrap-select/js/bootstrap-select.js"></script>
    <!-- ckeditor -->
    <script src="main/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
    <script src="main/assets/libs/@ckeditor/ckeditor5-build-classic/build/translations/es.js"></script>

    <script src="main/assets/libs/moment/moment.js"></script>
    <!-- dropzone js -->
    <script src="main/assets/libs/dropzone/dropzone-min.js"></script>

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

    <script src="main/assets/libs/flatpickr/plugins/monthSelect/index.js"></script>
    <script src="main/assets/libs/flatpickr/flatpickr.min.js"></script>
    <script src="main/assets/libs/flatpickr/l10n/es.js"></script>

    <script type="text/javascript" src="main/assets/libs/datatable/datatables.min.js"></script>

    <script src="main/assets/libs/jszip/jszip.js"></script>
    <script src="main/assets/libs/jszip/jszip-utils.js"></script>

    <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>

    <script type="text/javascript" src="main/assets/js/app/app.js?v=1.0.0"></script>
    <script src="main/assets/js/app/settings.js?v=1.0.0"></script>
    <script type="module" src="main/assets/js/app/Custom-app.js?v=1.0.0"></script>

    <?php
    if (isset($jsModules)) {
        $modulo = isset($_GET['mod']) ? base64_decode(urldecode($_GET['mod'])) . '/' : '';
        foreach ($jsModules as $file) {
            $urlArchivoJS = 'main/' . $modulo . 'assets/js/modules/' . $file . '.js';
            !file_exists($urlArchivoJS) && $urlArchivoJS = 'main/assets/js/modules/404-not-found.js';
    ?>
            <script type="module" src="<?= $urlArchivoJS ?>?v=1.0.0"></script>
    <?php
        }
    }
    ?>


</body>

</html>