<?php
session_start();
require("clases/Usuario.class.php");
require("clases/Beneficiario.class.php");

$objUser = new Usuario();
$objBen  = new Beneficiario();

// LISTA DE USUARIOS
$lista = $objUser->ListaTotal();

// LISTA DE BENEFICIARIOS
$beneficiarios = $objBen->Listar("");
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gestión de Usuarios</title>

    <!-- BOOTSTRAP 3 -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" 
          href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css">

    <style>
        body { background: #f5f5f5; }
        .panel { border-radius: 10px; }
        .panel-heading { font-size: 18px; font-weight: bold; }
        .table th { background: #000000; color: #fff; }
        .btn { border-radius: 20px; }

        .table-modern {
            background:#fff;
            border-radius:8px;
            overflow:hidden;
            box-shadow:0 2px 6px rgba(0,0,0,0.15);
        }
        .table-modern thead {
            background:#2c3e50;
            color:white;
            text-transform:uppercase;
        }
        .table-modern tbody tr:hover {
            background:#f4f7f9;
        }
        .btn-xs {
            border-radius:20px;
        }
    </style>

</head>
<body>

<div class="container">

    <!-- TÍTULO -->
    <div class="row">
        <div class="col-md-12 text-center">
            <h2 style="margin-top:20px;">Gesti&oacute;n de Usuarios</h2>
            <hr>
        </div>
    </div>

    <div class="row">      

        <!-- LISTADO -->
        <div class="col-md-12">

            <div class="panel panel-default">
                <div class="panel-heading">
                    Listado de Usuarios 

                    <button class="btn btn-success pull-right" 
                            data-toggle="modal" 
                            data-target="#modalUsuario">
                        <i class="glyphicon glyphicon-plus"></i> Agregar Usuario
                    </button>
                </div>

                <div class="panel-body">

<!-- Tabla Normal (PC) -->
<div class="table-responsive hidden-xs">
    <table class="table table-modern table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Beneficiario</th>
                <th>Usuario</th>
                <th>Tipo</th>
                <th>Estado</th>
                <th colspan="3">Opciones</th>
            </tr>
        </thead>
        <tbody>
        <?php
        if($lista){
            foreach($lista as $d){

                // Buscar nombre del beneficiario
                $objBen->BuscarPorCodigo($d["idbeneficiario"]);
                $nombreBen = $objBen->getNombre();

                echo "<tr>";
                echo "<td>".$d['idusuario']."</td>";
                echo "<td><strong>".$nombreBen."</strong></td>";
                echo "<td>".$d['usuario']."</td>";
                echo "<td>".$d['tipo']."</td>";
                echo "<td>".$d['estado']."</td>";

                echo "<td>
                        <button class='btn btn-warning btn-xs btnEditar'
                                data-id='".$d['idusuario']."'
                                data-idbeneficiario='".$d['idbeneficiario']."'
                                data-usuario='".$d['usuario']."'
                                data-tipo='".$d['tipo']."'
                                data-estado='".$d['estado']."'>
                            <i class='glyphicon glyphicon-pencil'></i>
                        </button>
						</td>";
					echo "<td>
						<a href='controladores/UsuarioController.php?idusuario=".$d['idusuario']."&txtpara=RE'
						   class='btn btn-info btn-xs'
						   onclick=\"return confirm('¿Seguro que deseas resetear la clave de este usuario?');\">
							<i class='glyphicon glyphicon-refresh'></i>
						</a>
					</td>";
					echo "<td>
                        <a href='controladores/UsuarioController.php?idusuario=".$d['idusuario']."&txtpara=E'
                           class='btn btn-danger btn-xs'
                           onclick=\"return confirm('¿Eliminar este usuario?');\">
                           <i class='glyphicon glyphicon-trash'></i>
                        </a>
                      </td>";
                echo "</tr>";
            }
        }
        ?>
        </tbody>
    </table>
</div>


<!-- Móvil (Acordeones) -->
<div class="visible-xs">
    <div class="panel-group" id="accordionMobile">
        <?php
        if($lista){
            foreach($lista as $d){

                $objBen->BuscarPorCodigo($d["idbeneficiario"]);
                $nombreBen = $objBen->getNombre();
                $idAcc = "u".$d['idusuario'];

                echo "
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse'
                               data-parent='#accordionMobile'
                               href='#$idAcc'>
                               ".$nombreBen."
                            </a>
                        </h4>
                    </div>

                    <div id='$idAcc' class='panel-collapse collapse'>
                        <div class='panel-body'>
                            <p><strong>ID:</strong> ".$d['idusuario']."</p>
                            <p><strong>Usuario:</strong> ".$d['usuario']."</p>
                            <p><strong>Tipo:</strong> ".$d['tipo']."</p>
                            <p><strong>Estado:</strong> ".$d['estado']."</p>

                            <div class='text-center'>
                                <button class='btn btn-warning btn-sm btnEditar'
                                    data-id='".$d['idusuario']."'
                                    data-idbeneficiario='".$d['idbeneficiario']."'
                                    data-usuario='".$d['usuario']."'
                                    data-tipo='".$d['tipo']."'
                                    data-estado='".$d['estado']."'>
                                    <i class='glyphicon glyphicon-pencil'></i> Editar
                                </button>
								
								<a href='controladores/UsuarioController.php?idusuario=".$d['idusuario']."&txtpara=RE'
								   class='btn btn-info btn-sm'
								   onclick=\"return confirm('¿Seguro que deseas resetear la clave de este usuario?');\">
									<i class='glyphicon glyphicon-refresh'></i>Resetear clave
								</a>

                                <a href='controladores/UsuarioController.php?id=".$d['idusuario']."&txtpara=E'
                                   class='btn btn-danger btn-sm'
                                   onclick=\"return confirm('¿Eliminar este usuario?');\">
                                   Eliminar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>";
            }
        }
        ?>
    </div>
</div>

                </div>
            </div>

        </div>
    </div>

</div>


<!-- MODAL USUARIO -->
<div id="modalUsuario" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header" style="background::#009999; color:black;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="tituloModal">Registrar Usuario</h4>
      </div>

      <div class="modal-body">
        <form id="formUsuario" method="POST" action="controladores/UsuarioController.php">

          <input type="hidden" name="idusuario" id="idusuario">
          <input type="hidden" name="txtpara" id="txtpara" value="R">

          <div class="form-group" id="div_beneficiario">
            <label>Beneficiario</label>
            <select class="form-control" id="idbeneficiario" name="idbeneficiario">
                <option value="">Seleccione...</option>
                <?php
                if($beneficiarios){
                    foreach($beneficiarios as $b){
                        echo "<option value='".$b['documento']."'>".$b['nombre']." - ".$b['documento']."</option>";
                    }
                }
                ?>
            </select>
          </div>

          <div class="form-group">
            <label>Usuario</label>
            <input type="text" class="form-control" name="usuario" id="usuario" required>
          </div>

          <div class="form-group" id="div_clave">
			<label>Clave</label>
			<input type="password" class="form-control" name="clave" id="clave">
		</div>

          <div class="form-group">
            <label>Tipo</label>
            <select class="form-control" name="tipo" id="tipo" required>
                <option value="ADMIN">ADMIN</option>
                <option value="OPERADOR">OPERADOR</option>
            </select>
          </div>

          <div class="form-group">
            <label>Estado</label>
            <select class="form-control" name="estado" id="estado" required>
                <option value="ACTIVO">ACTIVO</option>
                <option value="BAJA">BAJA</option>
            </select>
          </div>

          <button type="submit" class="btn btn-success btn-block" id="btnGuardar">
    Registrar Usuario
</button>

        </form>
      </div>

    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script>
// EDITAR
$(".btnEditar").click(function(){

    $("#tituloModal").text("Editar Usuario");
    $("#btnGuardar").text("Actualizar Usuario");
    $("#txtpara").val("M");

    $("#idusuario").val($(this).data("id"));
    $("#usuario").val($(this).data("usuario"));
    $("#tipo").val($(this).data("tipo"));
    $("#estado").val($(this).data("estado"));

    // Ocultar campos que no deben editarse
    $("#div_beneficiario").hide();
    $("#div_clave").hide();

    // Quitar required (evita que el form se bloquee)
    $("#idbeneficiario").prop("required", false);
    $("#clave").prop("required", false);

    $("#modalUsuario").modal("show");
});

// NUEVO
$("[data-target='#modalUsuario']").click(function(){

    $("#tituloModal").text("Registrar Usuario");
    $("#btnGuardar").text("Registrar Usuario");

    $("#formUsuario")[0].reset();
    $("#txtpara").val("R");

    $("#div_beneficiario").show();
    $("#div_clave").show();

    // Restaurar required
    $("#idbeneficiario").prop("required", true);
    $("#clave").prop("required", true);
});

</script>

</body>
</html>
