<?php use_helper( 'UrlFunctions' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>
<?php use_helper( 'IncludePartial' ); ?>

<link rel="stylesheet" type="text/css" href="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/css/bootstrap.min.4.2.1.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/css/floating-labels.css">
<link rel="stylesheet" type="text/css" href="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/font-awesome/css/font-awesome.min.css" >
<link rel="stylesheet" type="text/css" href="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/css/style3.css">
<link rel="stylesheet" type="text/css" href="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/css/jquery.mCustomScrollbar.min.css">


<script type="text/javascript" src="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/js/bootstrap.min.4.2.1.js"></script>
<script type="text/javascript" src="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/font-awesome/js/all.js" integrity="" crossorigin="anonymous"></script>
<script src="<?php echo Constantes::ROOT_DIR_APP ?>web/lib/bootstrap/js/jquery.mCustomScrollbar.concat.min.js"></script>

<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
        <div id="dismiss" style="padding-top: 8px;">
            <i class="fas fa-arrow-left"></i>
        </div>

        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
        </div>

        <ul class="list-unstyled components">
            <p>Dummy Heading</p>
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                    <li class="">
                        <a href="#level_dos" data-toggle="collapse" aria-expanded="false">
                            <i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i>
                        </a>
                        <ul class="collapse list-unstyled treeview-menu" style="padding-left: 20px;" id="level_dos">
                            <li>
                                <a href="#"><i class="fa fa-circle-o"></i> Level Two</a>
                            </li>
                            <!--<li>
                                <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                                </ul>
                            </li>-->
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">Page 1</a>
                    </li>
                    <li>
                        <a href="#">Page 2</a>
                    </li>
                    <li>
                        <a href="#">Page 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>

        <ul class="list-unstyled CTAs">
            <li>
                <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
            </li>
            <li>
                <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
            </li>
        </ul>
    </nav>

    <nav class="navbar fixed-top navbar-default navbar-expand-lg navbar-light">
        <div class="navbar-header d-flex col">
            <button type="button" id="sidebarCollapse" class="btn btn-info">
                <i class="fas fa-align-left"></i>
                <span>MENU</span>
            </button>

            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
                <span class="navbar-toggler-icon"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collection of nav links, forms, and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
            <ul class="nav navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">Inicio</a></li>
                
                <li class="nav-item dropdown">
                    <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Agregar<b class="caret"></b></a>
                    <ul class="dropdown-menu">                  
                        <li><a href="#" class="dropdown-item">Web Design</a></li>
                        <li><a href="#" class="dropdown-item">Web Development</a></li>
                        <li><a href="#" class="dropdown-item">Graphic Design</a></li>
                        <li><a href="#" class="dropdown-item">Digital Marketing</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form form-inline">
                <div class="input-group search-box">                                
                    <input type="text" id="search" class="form-control" placeholder="Buscar...">
                    <span class="input-group-addon"><i class="material-icons glyphicon glyphicon-search"></i></span>
                </div>
            </form>

            <ul class="nav navbar-nav navbar-right ml-auto">
                
                <li class="nav-item dropdown">
                    <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Perfil<b class="caret"></b></a>
                    <ul class="dropdown-menu">                  
                        <li><a class="dropdown-item" href="#">My account</a></li>
                        <li><a class="dropdown-item" href="#">Log out</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle get-started-btn mt-1 mb-1">
                        <i class="fas fa-user"></i>&nbsp;
                        Perfil
                    </a>

                    <!--<div class="overflow-auto">-->
                    <ul class="dropdown-menu scrollable-menu form-wrapper" role=""> <!--  -->
                        <li style="text-align: center;">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35">
                        </li>
                        <li>
                            <form action="" method="post">
                                <p class="hint-text">Fill in this form to create your account!</p>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Username" required="required">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" placeholder="Password" required="required">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" placeholder="Confirm Password" required="required">
                                </div>
                                <div class="form-group">
                                    <label class="checkbox-inline"><input type="checkbox" required="required"> I accept the <a href="#">Terms &amp; Conditions</a></label>
                                </div>
                                <input type="submit" class="btn btn-primary btn-block" value="Sign up">
                            </form>
                        </li>
                    </ul>
                    <!--</div>-->
                </li>
            </ul>
        </div>
    </nav>

    <div id="content" class="row" style="margin-right: 0; margin-left: 0;">

        <!--<iframe id="contentResultxx" class="col-lg-12 col-md-12 col-sm-12" src="/gestioncomercial/ini.php/user/login" name="contentResultxx"></iframe>-->
        
        <h2>Collapsible Sidebar Using Bootstrap 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <div class="line"></div>

        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <div class="line"></div>

        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <div class="line"></div>

        <h3>Lorem Ipsum Dolor</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
    </div>

</div>

<div class="overlay"></div>

<script type="text/javascript">
$( document ).ready
(
    function () 
    {
        /*
        $( "#sidebar" ).mCustomScrollbar
        (
            {
                theme: "minimal"
            }
        );
        */

        $( '#dismiss, .overlay' ).on
        (
            'click', 
            function () 
            {
                pr( "ingresa 2" );
                $( '#sidebar' ).removeClass( 'active' );
                $( '.overlay' ).removeClass( 'active' );
            }
        );

        $( '#sidebarCollapse' ).on
        (
            'click', function () 
            {
                pr( "ingresa 2" );
                $( '#sidebar' ).addClass( 'active' );
                $( '.overlay' ).addClass( 'active' );
                $( '.collapse.in' ).toggleClass( 'in' );
                $( 'a[aria-expanded=true]' ).attr( 'aria-expanded', 'false' );
            }
        );
    }
);
// Prevent dropdown menu from closing when click inside the form
$( document ).on
(
    "click", 
    ".navbar-right .dropdown-menu", 
    function( e )
    {
        e.stopPropagation();
    }
);
</script>