<?php
session_start();
require("clases/Beneficiario.class.php");
$obj = new Beneficiario();

$accion = "R";  // Registrar por defecto
$titulo = "Registrar Colaborador";

// Si viene desde editar
if(isset($_GET["id"])){
    if($obj->BuscarPorCodigo($_GET["id"])){
        $accion = "M";
        $titulo = "Modificar Colaborador";

        $idbeneficiario = $obj->getId();
        $nombre         = $obj->getNombre();
        $documento      = $obj->getDocumento();
        $telefono       = $obj->getTelefono();
        $email          = $obj->getEmail();
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mantenimiento de Colaboradores</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; }
    </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 Colaboradores </h2>
            <hr>
        </div>
    </div>

    <div class="row">      

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

            <div class="panel panel-default">
                <div class="panel-heading">Listado de Colaboradores 
					<button class="btn btn-success pull-right" data-toggle="modal" data-target="#modalBeneficiario">
						<i class="glyphicon glyphicon-plus"></i> Agregar Colaborador
					</button>
				</div>

                <div class="panel-body">

<!-- Tabla Normal (PC) -->
<style>
.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>


<div class="table-responsive hidden-xs">
    <table class="table table-modern table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Documento</th>
                <th>Teléfono</th>
                <th>Email</th>
                <th>Opciones</th>
            </tr>
        </thead>
        <tbody>
        <?php
        $lista = $obj->Listar("");
        if($lista){
            foreach($lista as $d){
                echo "<tr>";
                echo "<td>".$d['id']."</td>";
                echo "<td><strong>".$d['nombre']."</strong></td>";
                echo "<td>".$d['documento']."</td>";
                echo "<td>".$d['telefono']."</td>";
                echo "<td>".$d['email']."</td>";

                echo "<td>
                        <button class='btn btn-warning btn-xs btnEditar'
                                data-id='".$d['id']."'
                                data-nombre='".$d['nombre']."'
                                data-documento='".$d['documento']."'
                                data-telefono='".$d['telefono']."'
                                data-email='".$d['email']."'>
                            <i class='glyphicon glyphicon-pencil'></i>
                        </button>

                        <a href='controladores/BeneficiarioController.php?id=".$d['id']."&text=E'
                           class='btn btn-danger btn-xs'
                           onclick=\"return confirm('¿Eliminar este beneficiario?');\">
                           <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 != null){
            foreach($lista as $d){
                $idAcc = "bene".$d['id'];
                echo "
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse'
                               data-parent='#accordionMobile'
                               href='#$idAcc'>
                               ".$d['nombre']."
                            </a>
                        </h4>
                    </div>

                    <div id='$idAcc' class='panel-collapse collapse'>
                        <div class='panel-body'>
                            <p><strong>ID:</strong> ".$d['id']."</p>
                            <p><strong>Documento:</strong> ".$d['documento']."</p>
                            <p><strong>Telefono:</strong> ".$d['telefono']."</p>
                            <p><strong>Email:</strong> ".$d['email']."</p>

                            <div class='text-center'>
                               <button class='btn btn-warning btn-sm btnEditar'
                                data-id='".$d['id']."'
                                data-nombre='".$d['nombre']."'
                                data-documento='".$d['documento']."'
                                data-telefono='".$d['telefono']."'
                                data-email='".$d['email']."'>
                            <i class='glyphicon glyphicon-pencil'></i> Editar
                        </button>

                                <a href='controladores/BeneficiarioController.php?id=".$d['id']."&text=E'
                                   class='btn btn-danger btn-sm'
                                   onclick=\"return confirm('�Eliminar este beneficiario?');\">
                                   Eliminar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>";
            }
        }
        ?>
    </div>
</div>

                </div>
            </div>

        </div>

    </div> <!-- row -->

</div> <!-- container -->


<!-- MODAL BENEFICIARIO -->
<div id="modalBeneficiario" class="modal fade" role="dialog">
  <div class="modal-dialog">

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

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

          <input type="hidden" name="id" id="id">
          <input type="hidden" name="text" id="text" value="R">

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

          <div class="form-group">
            <label>Documento</label>
            <input type="text" class="form-control" name="documento" id="documento">
          </div>

          <div class="form-group">
            <label>Teléfono</label>
            <input type="text" class="form-control" name="telefono" id="telefono">
          </div>

          <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="email" id="email">
          </div>

          <button class="btn btn-success btn-block" id="btnGuardar">
            Registrar Colaborador
          </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>
$(".btnEditar").click(function(){
    $("#tituloModal").text("Editar Beneficiario");
    $("#btnGuardar").text("Actualizar Beneficiario");

    $("#id").val($(this).data("id"));
    $("#nombre").val($(this).data("nombre"));
    $("#documento").val($(this).data("documento"));
    $("#telefono").val($(this).data("telefono"));
    $("#email").val($(this).data("email"));

    $("#text").val("M");

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

// Cuando se presiona Agregar Beneficiario
$("[data-target='#modalBeneficiario']").click(function(){
    $("#tituloModal").text("Registrar Beneficiario");
    $("#btnGuardar").text("Registrar Beneficiario");

    $("#formBeneficiario")[0].reset();
    $("#id").val("");
    $("#text").val("R");
});
</script>

</body>
</html>
