<!DOCTYPE html>
<html>

<head>
  <?php $this->load->view(THEME . 'head') ?>
  <meta property="og:image" content="http://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-300x300.png" />
  <meta property="og:image:secure_url" content="https://wondercool.eu/wp-content/uploads/2019/01/logo-wondercool-redes-sociales-3-lineas-original-300x300.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="300" />
  <meta property="og:image:height" content="300" />
</head>

<head></head>

<body class="hold-transition sidebar-mini layout-fixed">
  <div class="wrapper">
    <!-- Navbar -->
    <?php $this->load->view(THEME . 'topbar') ?>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <?php $this->load->view(THEME . 'sidebar') ?>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Main content -->
      <section class="content">
        <div class="container-fluid pt-3">
          <?php if (isset($this->venta)) { ?>
            <?php $this->load->view($contenido) ?>
          <?php } else { ?>
            <?php $this->load->view(THEME . 'breadcrumb') ?>
            <?php $this->load->view($contenido) ?>
          <?php } ?>
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <?php $this->load->view(THEME . 'footer') ?>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
  </div>
  <!-- ./wrapper -->

  <!-- Modal Mi Perfil -->
  <div class="modal fade" id="modal_mi_perfil" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="fas fa-user-circle mr-2"></i> Mi Perfil</h5>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="form_mi_perfil" autocomplete="off">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nombre</label>
                  <input type="text" name="perfil_nombre" class="form-control" required>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Apellido</label>
                  <input type="text" name="perfil_apellido" class="form-control" required>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Usuario</label>
                  <input type="text" name="perfil_usuario" class="form-control" required>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>DNI / Documento</label>
                  <input type="text" name="perfil_documento" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Teléfono</label>
                  <input type="text" name="perfil_telefono" class="form-control">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Dirección</label>
                  <input type="text" name="perfil_direccion" class="form-control">
                </div>
              </div>
            </div>
            <hr>
            <div class="form-group">
              <label class="text-primary"><i class="fas fa-key mr-1"></i> Cambiar Contraseña (dejar en blanco para no cambiar)</label>
              <input type="password" name="perfil_password" class="form-control" placeholder="Nueva contraseña">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-primary" onclick="guardarPerfil()">Guardar Cambios</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap 4 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
  
  <script>
    function miPerfil() {
      $.ajax({
        url: "<?= base_url() ?>usuario/mi_perfil",
        type: "GET",
        dataType: "JSON",
        success: function(data) {
          $('[name="perfil_nombre"]').val(data.nombre);
          $('[name="perfil_apellido"]').val(data.apellido);
          $('[name="perfil_usuario"]').val(data.usuario);
          $('[name="perfil_documento"]').val(data.documento);
          $('[name="perfil_telefono"]').val(data.telefono);
          $('[name="perfil_direccion"]').val(data.direccion);
          $('[name="perfil_password"]').val("");
          $('#modal_mi_perfil').modal('show');
        },
        error: function() {
          alert('Error al obtener datos del perfil');
        }
      });
    }

    function guardarPerfil() {
      $.ajax({
        url: "<?= base_url() ?>usuario/update_perfil",
        type: "POST",
        data: $('#form_mi_perfil').serialize(),
        dataType: "JSON",
        success: function(data) {
          if(data.status) {
            $('#modal_mi_perfil').modal('hide');
            Lobibox.notify('success', {
              size: 'mini', 
              position: 'top right',
              msg: 'Perfil actualizado correctamente'
            });
          }
        },
        error: function() {
          alert('Error al actualizar el perfil');
        }
      });
    }
  </script>

  <!-- SlimScroll -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
  <!-- Waves -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.6/waves.min.js"></script>
  <script>if(typeof Waves !== 'undefined') Waves.init();</script>
  
  <!-- overlayScrollbars -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.0/js/jquery.overlayScrollbars.min.js"></script>

  <!-- existing scripts adapted or kept -->
  <script src="<?= base_url() . RECURSOS ?>assets/select2/select2.min.js" type="text/javascript"></script>
  <script src="<?= base_url() . RECURSOS ?>js/bootbox.min.js"></script>
  <!-- DataTables -->
  <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
  
  <script src="<?= base_url() . RECURSOS ?>js/summernote.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/Chart.js"></script>
  <script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/moment.min.js"></script>
  <script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/daterangepicker.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/sweetalert.min.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/jquery.form.min.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/app.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/jquery.mayusculassintildes.js"></script>
  <script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/jquery.numeric.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maxlength/1.6.0/jquery.maxlength.min.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/lobibox.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/Impresora.js"></script>
  <script src="<?= base_url() . RECURSOS ?>js/xlsx.js"></script>

  <script>
    $(function () {
      // Initialize any AdminLTE components if needed
    });
    
    var dtlanguage = {
      "decimal": "",
      "emptyTable": "No hay información",
      "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
      "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
      "infoFiltered": "(Filtrado de _MAX_ total entradas)",
      "infoPostFix": "",
      "thousands": ",",
      "lengthMenu": "Mostrar _MENU_ Entradas",
      "loadingRecords": "Cargando...",
      "processing": "Procesando...",
      "search": "Buscar:",
      "zeroRecords": "Sin resultados encontrados",
      "paginate": {
        "first": "Primero",
        "last": "Ultimo",
        "next": "Siguiente",
        "previous": "Anterior"
      }
    };

    jQuery(document).ready(function(e) {
      jQuery(".cont-principal").on("swipe", swipeHandler);
      jQuery(".cont-principal").click(function(e) {
        jQuery("#mySidebar").removeClass("active");
      });
    });

    function swipeHandler(event, phase, direction) {
      jQuery("#mySidebar").addClass("active");

    }
  </script>
</body>

</html>