<?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">
  <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 Empleados</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">Empleados</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="card card-outline card-primary shadow">
        
        <div class="card-header">
          <button class="btn btn-primary rounded-pill px-4 shadow-sm" data-toggle="modal" data-target="#modalAgregarTrabajador">
            <i class="fas fa-plus-circle mr-1"></i> Agregar Empleado
          </button>
        </div>

        <div class="card-body">
          <table class="table table-hover table-borderless dt-responsive tablas" width="100%">
            <thead class="bg-dark text-white">
              <tr>
                <th style="width: 10px">#</th>
                <th>Identificación</th>
                <th>Nombre Completo</th>
                <th>Contacto</th>
                <th>Ubicación</th>
                <th>Ingreso</th>
                <th style="width: 80px">Acciones</th>
              </tr>
            </thead>
            <tbody>
              <?php 
                $item = null; $valor = null;
                $empleado = ControladorEmpleado::ctrMostrarEmpleado($item, $valor);

                foreach($empleado as $key => $value){
                  echo '<tr>
                          <td class="align-middle">'.($key+1).'</td>
                          <td class="align-middle"><span class="badge badge-light p-2 border">'.$value["dni"].'</span></td>
                          <td class="align-middle text-bold text-primary">'.$value["nombre"].'</td>
                          <td class="align-middle">
                            <i class="fas fa-phone-alt text-muted small mr-1"></i> '.$value["telefono"].'
                          </td>
                          <td class="align-middle text-muted" style="font-size:0.9rem">'.$value["direccion"].'</td>
                          <td class="align-middle">'.date("d/m/Y", strtotime($value["fecha_ingreso"])).'</td>
                          <td class="align-middle text-center">
                            <div class="btn-group shadow-sm">
                              <button class="btn btn-sm btn-outline-warning btnEditarTrabajador" idTrabajador="'.$value["id_empleado"].'" data-toggle="modal" data-target="#modalEditarTrabajador" title="Editar"><i class="fas fa-pencil-alt"></i></button>
                              <button class="btn btn-sm btn-outline-danger btnEliminarTrabajador" idTrabajador="'.$value["id_empleado"].'" title="Eliminar"><i class="fa fa-trash-alt"></i></button>
                            </div>
                          </td>
                        </tr>';
                }
              ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="modal fade" id="modalAgregarTrabajador">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content shadow-lg border-0">
      
      <form role="form" method="post">
        
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="fas fa-user-plus mr-2"></i> Nuevo Registro de Trabajador</h5>
          <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body p-4">
          <div class="row">
            
            <div class="col-md-4">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">TIPO DOC.</label>
                <select class="form-control select2 shadow-sm" name="documento" required>
                  <option value="DNI">DNI</option>
                  <option value="RUC">RUC</option>
                </select>
              </div>
            </div>

            <div class="col-md-8">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">NÚMERO (*)</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-id-card"></i></span>
                  </div>
                  <input type="text" class="form-control" name="nuevoDNI" placeholder="Escriba el número" required>
                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">NOMBRE COMPLETO (*)</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-user"></i></span>
                  </div>
                  <input type="text" class="form-control text-uppercase" name="nuevoNombre" placeholder="Nombre y Apellidos" required>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">TELÉFONO</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-mobile-alt"></i></span>
                  </div>
                  <input type="text" class="form-control" name="nuevoTelefono1" data-inputmask="'mask':'(+51) 999-999-999'" data-mask>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">CORREO ELECTRÓNICO</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-envelope"></i></span>
                  </div>
                  <input type="email" class="form-control" name="nuevoEmail" placeholder="ejemplo@correo.com">
                </div>
              </div>
            </div>

            <div class="col-md-8">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">DIRECCIÓN</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-map-marker-alt"></i></span>
                  </div>
                  <input type="text" class="form-control text-uppercase" name="nuevoDireccion" placeholder="Dirección de residencia">
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group">
                <label class="text-muted small font-weight-bold">FECHA INGRESO</label>
                <input type="date" class="form-control" name="nuevoFecha" value="<?php echo date('Y-m-d'); ?>" required>
              </div>
            </div>

          </div>
        </div>

        <div class="modal-footer bg-light border-0">
          <button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary px-4 shadow-sm">Guardar Empleado</button>
        </div>

        <?php 
          $crearTrabajador = new ControladorEmpleado();
          $crearTrabajador -> ctrCrearEmpleado();
        ?>
      </form>
    </div>
  </div>
</div>

       <!-- MODAL EDITAR Trabajador-->

<div class="modal fade" id="modalEditarTrabajador">
  <div class="modal-dialog modal-lg 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">
            <i class="fas fa-user-edit mr-2"></i> Actualizar Datos del Trabajador
          </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="row">
              <div class="col-md-5">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">DNI / RUC (*)</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-id-card"></i></span>
                    </div>
                    <input type="text" class="form-control" name="editarDNI" id="editarDNI" placeholder="Documento" required>
                    <input type="hidden" name="idTrabajador" id="idTrabajador">
                  </div>
                </div>
              </div>

              <div class="col-md-7">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">NOMBRE Y APELLIDOS (*)</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-user"></i></span>
                    </div>
                    <input type="text" class="form-control text-uppercase" name="editarNombre" id="editarNombre" placeholder="Nombre completo" required>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">DIRECCIÓN DE DOMICILIO</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-map-marker-alt"></i></span>
                    </div>
                    <input type="text" class="form-control text-uppercase" name="editarDireccion" id="editarDireccion" placeholder="Dirección actual" required>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">TELÉFONO / MÓVIL</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-phone"></i></span>
                    </div>
                    <input type="text" class="form-control" name="editarTelefono1" id="editarTelefono1" data-inputmask="'mask':'(+51) 999-999-999'" data-mask>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">CORREO ELECTRÓNICO</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-envelope"></i></span>
                    </div>
                    <input type="email" class="form-control" name="editarCorreo" id="editarCorreo" placeholder="correo@ejemplo.com">
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="text-muted font-weight-bold small">FECHA DE CONTRATACIÓN</label>
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text bg-light"><i class="fas fa-calendar-alt"></i></span>
                    </div>
                    <input type="date" class="form-control" name="editarFecha" id="editarFecha">
                    <input type="hidden" name="estado" id="estado">
                  </div>
                </div>
              </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-5 shadow-sm rounded-pill">
            <i class="fas fa-save mr-2"></i> GUARDAR CAMBIOS
          </button>
        </div>

        <?php 
          $editarTrabajador = new ControladorEmpleado();
          $editarTrabajador->ctrEditarEmpleado();
        ?>

      </form>
    </div>
  </div>
</div>
<?php 

$borrarEmpleado= new ControladorEmpleado();
$borrarEmpleado-> ctrBorrarEmpleado();

?>
<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>
      
      var elemento = document.getElementById("mantenimiento");
      elemento.className += " active";

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

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



