<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Registro de ventas</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

  <!-- Estilos personalizados -->
  <style>
    /* Configuración de imagen de fondo en el sidebar izquierdo */
    .main-sidebar {
        background-image: url('desk.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
    }

    /* Fondo semitransparente sobre la imagen del sidebar izquierdo */
    .main-sidebar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    /* Personalización del sidebar izquierdo */
    .main-sidebar .sidebar {
        position: relative;
        z-index: 2;
    }
    .main-sidebar .brand-link,
    .main-sidebar .user-panel,
    .main-sidebar .nav-link {
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 5px;
        color: #fff !important;
    }
    .main-sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        color: #000 !important;
    }

    /* Fondo de pantalla completo */
    body {
        background-image: url('desk.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
    }

    /* Ajuste para el contenido principal */
    .content-wrapper {
        background: transparent;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 250px; /* Espacio para el sidebar izquierdo */
        transition: margin-left 0.3s ease; /* Transición suave para el desplazamiento */
    }

    /* Contenedor para centrar el formulario */
    .form-container {
        width: 90%;
        max-width: 600px;
        background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Sidebar derecho personalizado */
    .main-sidebar-right {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 250px;
        z-index: 1030;
        background-image: url('desk.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Fondo semitransparente en el sidebar derecho */
    .main-sidebar-right::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    /* Personalización de enlaces en el sidebar derecho */
    .sidebar-right .nav-link {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 5px;
        z-index: 2;
    }

    .sidebar-right .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        color: #000 !important;
    }
  </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Barra de navegación -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>
  </nav>

  <!-- Sidebar Izquierdo -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Logo -->
    <a href="index3.html" class="brand-link">
      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">Mini sistema</span>
    </a>

    <!-- Menú lateral -->
    <div class="sidebar">
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Usuario</a>
        </div>
      </div>
      <nav class="mt-2">
        <!-- Estructura de navegación -->
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <img src="Img/venta.png" alt="Icono 2" width="28" height="28">
              <p>Venta nueva <i class="fas fa-angle-left right"></i><span class="badge badge-info right">6</span></p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item"><a href="formulario1/indexfact.php" class="nav-link"><i class="far fa-circle nav-icon"></i> Factura</a></li>
              <li class="nav-item"><a href="formulario1/indexbo.php" class="nav-link"><i class="far fa-circle nav-icon"></i> Boleta</a></li>
              <li class="nav-item"><a href="formulario1/indexticket.php" class="nav-link"><i class="far fa-circle nav-icon"></i> Ticket</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </aside>

  <!-- Sidebar Derecho -->
  <aside class="main-sidebar-right sidebar-dark-primary elevation-4">
    <div class="sidebar sidebar-right">
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
          <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-info-circle"></i> Información</a></li>
          <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-cog"></i> Configuración</a></li>
          <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-users"></i> Usuarios</a></li>
          <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-sign-out-alt"></i> Salir</a></li>
        </ul>
      </nav>
    </div>
  </aside>

  <!-- Contenido principal -->
  <div class="content-wrapper">
    <div class="form-container">
      <!-- Formulario de Factura -->
      <?php include_once "indexfact2.php"; ?>
    </div>
  </div>

  <!-- Scripts -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
  <script>$.widget.bridge('uibutton', $.ui.button)</script>
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="plugins/chart.js/Chart.min.js"></script>
  <script src="plugins/sparklines/sparkline.js"></script>
  <script src="plugins/jqvmap/jquery.vmap.min.js"></script>
  <script src="plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
  <script src="plugins/jquery-knob/jquery.knob.min.js"></script>
  <script src="plugins/moment/moment.min.js"></script>
  <script src="plugins/daterangepicker/daterangepicker.js"></script>
  <script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
  <script src="plugins/summernote/summernote-bs4.min.js"></script>
  <script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
  <script src="dist/js/adminlte.js"></script>
  <script src="dist/js/pages/dashboard.js"></script>
  <script src="dist/js/demo.js"></script>
</div>
</body>
</html>