<?php
require_once("../../config/conexion.php");
if (isset($_SESSION["usuariodbk"])) {
    ?>
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <?php
            require_once '../html/MainHead.php';
            ?>
            <title>SIED | PERFIL</title>
            <style>
                .color-palette {
                    height: 35px;
                    line-height: 35px;
                    text-align: right;
                    padding-right: .75rem;
                }

                .color-palette.disabled {
                    text-align: center;
                    padding-right: 0;
                    display: block;
                }

                .color-palette-set {
                    margin-bottom: 15px;
                }

                .color-palette span {
                    display: none;
                    font-size: 12px;
                }

                .color-palette:hover span {
                    display: block;
                }

                .color-palette.disabled span {
                    display: block;
                    text-align: left;
                    padding-left: .75rem;
                }

                .color-palette-box h4 {
                    position: absolute;
                    left: 1.25rem;
                    margin-top: .75rem;
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 12px;
                    display: block;
                    z-index: 7;
                }
            </style>
        </head>
        <body class="hold-transition sidebar-mini layout-fixed">           
            <?php require_once '../html/MainMenu.php'; ?> 
            <?php require_once '../html/MainHeader.php'; ?>             
            <div class="content-wrapper">
                <div class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1 class="m-0">Personalizar</h1>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right">
                                    <li class="breadcrumb-item"><a href="../UsuHome/">Inicio</a></li>
                                    <li class="breadcrumb-item active">Personalizar</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="card col-sm-12">
                                <div class="row">
                                    <div class="col-sm-12 card card-default color-palette-box" >
                                        <div class="card-header">
                                            <h3 class="card-title">
                                                <i class="fas fa-tag"></i>
                                                Paleta de Colores
                                            </h3>
                                        </div>
                                        <div class="card-body">
                                            <!-- /.col-12 -->
                                            <div class="row">
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Primary</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-primary color-palette"><span>#007bff</span></div>
                                                        <div class="bg-primary disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Secondary</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-secondary color-palette"><span>#6c757d</span></div>
                                                        <div class="bg-secondary disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Info</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-info color-palette"><span>#17a2b8</span></div>
                                                        <div class="bg-info disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Success</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-success color-palette"><span>#28a745</span></div>
                                                        <div class="bg-success disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-warning">Warning</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-warning color-palette"><span>#ffc107</span></div>
                                                        <div class="bg-warning disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Danger</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-danger color-palette"><span>#dc3545</span></div>
                                                        <div class="bg-danger disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Black</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-black color-palette"><span>#000000</span></div>
                                                        <div class="bg-black disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Gray Dark</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-gray-dark color-palette"><span>#343a40</span></div>
                                                        <div class="bg-gray-dark disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center">Gray</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-gray color-palette"><span>#adb5bd</span></div>
                                                        <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-light">Light</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-light color-palette"><span>#1f2d3d</span></div>
                                                        <div class="bg-light disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-indigo">Indigo</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-indigo color-palette"><span>#6610f2</span></div>
                                                        <div class="bg-indigo disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-lightblue">Lightblue</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-lightblue color-palette"><span>#3c8dbc</span></div>
                                                        <div class="bg-lightblue disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-navy">Navy</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-navy color-palette"><span>#001f3f</span></div>
                                                        <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-purple">Purple</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-purple color-palette"><span>#605ca8</span></div>
                                                        <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-fuchsia">Fuchsia</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-fuchsia color-palette"><span>#f012be</span></div>
                                                        <div class="bg-fuchsia disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-pink">Pink</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-pink color-palette"><span>#e83e8c</span></div>
                                                        <div class="bg-pink disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-maroon">Maroon</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-maroon color-palette"><span>#d81b60</span></div>
                                                        <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-orange">Orange</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-orange color-palette"><span>#ff851b</span></div>
                                                        <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-lime">Lime</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-lime color-palette"><span>#01ff70</span></div>
                                                        <div class="bg-lime disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-teal">Teal</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-teal color-palette"><span>#39cccc</span></div>
                                                        <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-sm-4 col-md-2">
                                                    <h4 class="text-center bg-olive">Olive</h4>

                                                    <div class="color-palette-set">
                                                        <div class="bg-olive color-palette"><span>#3d9970</span></div>
                                                        <div class="bg-olive disabled color-palette"><span>Disabled</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-layout form-layout-1">
                                            <div class="row mg-b-25">
                                                <div class="col-lg-3">
                                                    <div class="form-group">                                                                
                                                        <label class="form-label">Menú Principal:</label>
                                                        <select class="form-control select2" name="per_menu" id="per_menu" data-placeholder="Seleccione" required>
                                                        </select>                                                        
                                                    </div>
                                                </div>  
                                                <div class="col-lg-3">
                                                    <div class="form-group">
                                                        <label class="form-label">Menú Superior:</label>
                                                        <select class="form-control select2" name="per_accesos" id="per_accesos" data-placeholder="Seleccione" required>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="form-group">
                                                        <label class="form-label">Pie de Página:</label>
                                                        <select class="form-control select2" name="per_pie" id="per_pie" data-placeholder="Seleccione" required>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="form-group">
                                                        <label  class="form-label">Ícono:</label>
                                                        <select class="form-control select2" name="per_icono" id="per_icono" data-placeholder="Seleccione" required>
                                                        </select>
                                                    </div>
                                                </div>    
                                                <div class="col-lg-3">
                                                    <div class="form-group">
                                                        <label  class="form-label">Texto Menús:</label>
                                                        <select class="form-control select2" name="per_texto" id="per_texto" data-placeholder="Seleccione" required>
                                                        </select>
                                                    </div>
                                                </div> 
                                            </div>
                                            <div class="form-layout-footer">
                                                <button class="btn btn-success" id="btnGuardarPersonalizar">Actualizar</button>
                                                <button class="btn btn-success bg-primary" id="btnRestablecerPersonalizar">Restablecer</button>
                                                <button class="btn btn-success bg-dark" id="btnDark">Dark</button>
                                                <button class="btn btn-success bg-light" id="btnLight">Light</button>
                                            </div>                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                 
                </div>
            </div>
            <?php require_once '../html/MainFooter.php'; ?> 
            <!-- Control Sidebar -->
            <aside class="control-sidebar control-sidebar-dark">
                <!-- Control sidebar content goes here -->
            </aside>
            <!-- /.control-sidebar -->

            <?php require_once '../html/MainJS.php'; ?>
            <script type="text/javascript" src="usupersonalizar.js"></script>
        </body>
    </html>
    <?php
} else {
    header("Location:" . Conexion::ruta() . "view/404/");
}
?>