<?php

if($_SESSION["tipo_usuario"] == "Inventario" || $_SESSION["tipo_usuario"] == "Vendedor"){

  echo '<script>

    window.location = "inicio";

  </script>';

  return;

}

?>
<style>

    /* Estilo para la tabla 
     */
.tablas thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 700;
    border: none;
}

.tablas tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f4f6f9;
}

.tablas tbody tr:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.002);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    z-index: 10;
}

.badge {
    font-weight: 600;
    font-size: 0.75rem;
}
</style>

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark"><i class="fas fa-users-cog mr-2"></i> Administrar Roles</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="inicio">Inicio</a></li>
              <li class="breadcrumb-item active">Roles</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="card card-outline card-primary shadow">

      <!-- Default box -->
          <div class="card">
            <div class="card-header">
              <button class="btn btn-primary rounded-pill px-4 shadow-sm" data-toggle="modal" data-target="#modalAgregarRol">
              <i class="fas fa-plus-circle mr-1"></i>  
              Agregar
              </button>

              
            </div>

        <div class="card-body">
          <table class="table table-hover table-borderless dt-responsive tablas" >
          <thead class="bg-dark text-white">
                <tr>
                  <th style="width: 10px">#</th>
                  <th>Nombre</th>
                  <th>Descripcion</th>
                  <th>Estado</th>
                  <th>Acciones</th>
                </tr>
                </thead>
                <tbody>

                <?php 

                $item = null;
                $valor = null;
                
                $modulos = ControladorRol:: ctrMostrarRol($item, $valor);

                foreach($modulos as $key => $value){

                  echo '<tr>
                          <td class="align-middle">'.($key+1).'</td>
                          <td class="align-middle text-bold text-primary">'.$value["nombre"].'</td>
                           <td class="align-middle" >'.$value["descripcion"].'</td>';
                              if($value["activo"] != 0){
                            echo '<td><button class="btn btn-success btn-xs btnActivar" idRol="'.$value["id"].'" estadoRol="0">Activado</button></td>';
                          }else {
                            echo '<td><button class="btn btn-danger btn-xs btnActivar" idRol="'.$value["id"].'" estadoRol="1">Desactivado</button></td>';
                          }
                          echo'<td>
                            <div class="btn-group">
                              <button class="btn btn-sm btn-outline-warning btnEditarRol" idrol="'.$value["id"].'" data-toggle="modal" data-target="#modalEditarRol"><i class="fas fa-pencil-alt"></i></button>
                              
                            </div>


                          </td>

                        </tr>';
                }
                ?>
                </tbody>


          </table>
          </div>
        </div>
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>

   <!-- MODAL AGREGAR ROL-->

<div class="modal fade" id="modalAgregarRol">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-lg border-0">
      
      <form role="form" method="post" enctype="multipart/form-data">

        <div class="modal-header bg-primary text-white border-0">
          <h5 class="modal-title font-weight-bold">
            <i class="fas fa-plus-circle mr-2"></i> Nuevo Rol de Usuario
          </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 p-4">
          <div class="container-fluid">
            
            <div class="form-group">
              <label class="text-muted font-weight-bold small">NOMBRE DEL ROL (*)</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text bg-light text-primary"><i class="fas fa-user-tag"></i></span>
                </div>
                <input type="text" class="form-control" name="nuevoNombre" placeholder="Ej: Administrador, Vendedor..." pattern="[a-zA-Z ]+" required>
              </div>
            </div>

            <div class="form-group mt-3">
              <label class="text-muted font-weight-bold small">DESCRIPCIÓN (*)</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text bg-light text-primary"><i class="fas fa-file-alt"></i></span>
                </div>
                <textarea class="form-control" name="nuevoDescripcion" placeholder="Defina brevemente las funciones de este rol" rows="3" required></textarea>
              </div>
            </div>

          </div>
        </div>

        <div class="modal-footer bg-light border-0">
          <button type="button" class="btn btn-link text-muted font-weight-bold" data-dismiss="modal">CANCELAR</button>
          <button type="submit" class="btn btn-primary px-4 shadow-sm rounded-pill">
            <i class="fas fa-save mr-2"></i> GUARDAR ROL
          </button>
        </div>

        <?php 
          $crearRol = new ControladorRol();
          $crearRol -> ctrCrearRol();
        ?>

      </form>
    </div>
  </div>
</div>

       <!-- MODAL EDITAR ROL-->

   <div class="modal fade" id="modalEditarRol">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-lg border-0">
      
      <form role="form" method="post" enctype="multipart/form-data">

        <div class="modal-header bg-info text-white border-0">
          <h5 class="modal-title font-weight-bold">
            <i class="fas fa-edit mr-2"></i> Modificar Rol
          </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 p-4">
          <div class="container-fluid">
            
            <div class="form-group">
              <label class="text-muted font-weight-bold small">NOMBRE DEL ROL</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text bg-light"><i class="fas fa-user-tag"></i></span>
                </div>
                <input type="text" class="form-control" name="editarNombre" id="editarNombre" placeholder="Ingresar Rol" required>
                <input type="hidden" name="idRol" id="idRol">
              </div>
            </div>

            <div class="form-group mt-3">
              <label class="text-muted font-weight-bold small">DESCRIPCIÓN</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text bg-light"><i class="fas fa-file-alt"></i></span>
                </div>
                <textarea class="form-control" name="editarDescripcion" id="editarDescripcion" rows="3" required></textarea>
              </div>
            </div>

          </div>
        </div>

        <div class="modal-footer bg-light border-0">
          <button type="button" class="btn btn-link text-muted font-weight-bold" data-dismiss="modal">CANCELAR</button>
          <button type="submit" class="btn btn-info px-4 shadow-sm text-white rounded-pill">
            <i class="fas fa-sync-alt mr-2"></i> ACTUALIZAR ROL
          </button>
        </div>

        <?php 
          $editarRol = new ControladorRol();
          $editarRol-> ctrEditarRol();
        ?>

      </form>
    </div>
  </div>
</div>

<script>
        $(function () {
          $("#example1").DataTable();
          $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
          });
        });
</script>
<script src="./vistas/js/plantilla.js"></script>
<script src="./vistas/js/rol.js"></script>

<script>
      
      var elemento = document.getElementById("mantenimiento");
      elemento.className += " active";

      var elemento = document.getElementById("mante");
      elemento.className += " menu-open";

      var elemento = document.getElementById("rol");
      elemento.className += " active";
</script>
