<?php
 session_start();
 include '../config.php';
 require '../include/aws-sdk/aws-autoloader.php';
 use Aws\CloudFront\CloudFrontClient;
 $IAM_KEY = $aws_access_key_id_privado;
 $IAM_SECRET = $aws_secret_access_key_privado;

 if(strlen($_COOKIE['persistPrivado'])<5){
    header('Location: /en/#login');
    exit();
    //echo "SIN COOKIE" . $_COOKIE['persistuser'];
 }
 else{
    $correo = $_COOKIE['persistPrivado'];

    //echo $correo;
    if(strlen($correo) > 5){

        $logeado = true;
        $curluser = curl_init();
        curl_setopt_array($curluser, array(
        CURLOPT_URL => $endpoint_graph_cms,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  usuariosSitioPrivado(where: {email: \\"'.$correo.'\\"}) {\\r\\n    id\\r\\n  resetPass\\r\\n fechaCambioPassword\\r\\n nombre\\r\\n  empresa\\r\\n  permisos\\r\\n  rol\\r\\n  tycAceptados\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
        CURLOPT_HTTPHEADER => array(
          'Content-Type: application/json',
          'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
        ),
      ));

      $responseuser = curl_exec($curluser);
      $_SESSION['requestDataUser'] = $responseuser;
      curl_close($curluser);

      $jsonrespuestauser = json_decode($responseuser, true);
      $idgraph = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['id'];
      $iduser = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['id'];
      $resetPass_privado = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['resetPass'];
      $fechaPass = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['fechaCambioPassword'];
      $rol_user_privado = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['rol'];
      $nombre_user_privado = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['nombre'];
      $tyc = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['tycAceptados'];
      $empresa = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['empresa'];
      $permisos = $jsonrespuestauser['data']['usuariosSitioPrivado'][0]['permisos'];

    }
 }


 $lang = 'en';
 $seccion = $_GET['s'];


 $curl = curl_init();
 curl_setopt_array($curl, array(
     CURLOPT_URL => $endpoint_graph_cms,
     CURLOPT_RETURNTRANSFER => true,
     CURLOPT_ENCODING => '',
     CURLOPT_MAXREDIRS => 10,
     CURLOPT_TIMEOUT => 0,
     CURLOPT_FOLLOWLOCATION => true,
     CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
     CURLOPT_CUSTOMREQUEST => 'POST',
     CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  __typename\\r\\n  generalidadesSitioPrivado(stage: PUBLISHED, where: {id: \\"ckuwqltrkpenm0b788cug2f0d\\"}) {\\r\\n    id\\r\\n    dominiosPermitidos\\r\\n    firmasDigitales\\r\\n    titulo\\r\\n   avisoTexto\\r\\n   avisoImagen\\r\\n   avisoLink\\r\\n  avisoTextoBoton\\r\\n  imagenLateral\\r\\n    terminosYCondiciones\\r\\n  avisoTyC\\r\\n versionTyC\\r\\n    localizations {\\r\\n      archivoIsin\\r\\n      dominiosPermitidos\\r\\n      firmasDigitales\\r\\n      titulo\\r\\n  avisoTexto\\r\\n   avisoImagen\\r\\n   avisoLink\\r\\n  avisoTextoBoton\\r\\n    imagenLateral\\r\\n       terminosYCondiciones\\r\\n avisoTyC\\r\\n  versionTyC\\r\\n      }\\r\\n    archivoIsin\\r\\n  }\\r\\n}","variables":{}}',
     CURLOPT_HTTPHEADER => array(
       'Content-Type: application/json',
       'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
     ),
   ));
   
 $response = curl_exec($curl);
 
 curl_close($curl);
 //echo $response;
 
 
 
 $jsonrespuesta = json_decode($response, true);
 $id = $jsonrespuesta['data']['generalidadesSitioPrivado']['id'];
 
 if($lang == 'es'){
    $titulo_privado = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['titulo'];
    $titulopag =  $titulo_privado;
    $aviso_texto = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['avisoTexto'];
    $aviso_imagen = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['avisoImagen'];
    $aviso_link = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['avisoLink'];
    $aviso_texto_boton = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['avisoTextoBoton'];
    $imagenLateral = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['imagenLateral'];

    $avisoTyC = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['avisoTyC'];
    $versionTyC = $jsonrespuesta['data']['generalidadesSitioPrivado']['localizations'][0]['versionTyC'];
     
    
     
     
 }
 
 if($lang == 'en'){
     $titulo_privado = $jsonrespuesta['data']['generalidadesSitioPrivado']['titulo'];
     $titulopag =  $titulo_privado;
     $aviso_texto = $jsonrespuesta['data']['generalidadesSitioPrivado']['avisoTexto'];
    $aviso_imagen = $jsonrespuesta['data']['generalidadesSitioPrivado']['avisoImagen'];
    $aviso_link = $jsonrespuesta['data']['generalidadesSitioPrivado']['avisoLink'];
    $aviso_texto_boton = $jsonrespuesta['data']['generalidadesSitioPrivado']['avisoTextoBoton'];
    $imagenLateral = $jsonrespuesta['data']['generalidadesSitioPrivado']['imagenLateral'];
    $avisoTyC = $jsonrespuesta['data']['generalidadesSitioPrivado']['avisoTyC'];
    $versionTyC = $jsonrespuesta['data']['generalidadesSitioPrivado']['versionTyC'];

 }
 
$urles = "/usuarios";
$urlen = "/users";

if($resetPass == 1 || $resetPass == "1"){
    $modalpass = "RESETPASS";
}

if(strlen($_COOKIE['userPassUpdated'])>2){
    $modalpass = "RESETPASSNO";   
}


$ruta_imagenaviso = $aviso_imagen;
$ruta_lateral = $imagenLateral;

$cloudfront_url = $cloudfront_privado.$ruta_imagenaviso;
$cloudfront_url_lateral = $cloudfront_privado.$ruta_lateral;

// Crear CF signed URL


$resourceKey = $cloudfront_url;
$resourceKeylateral = $cloudfront_url_lateral;
$expires = time() + 400;


$cfClient = new Aws\CloudFront\CloudFrontClient([
    'version' => 'latest',
    'region' => 'us-east-1',
    'credentials' => array(
        'key' => $IAM_KEY,
        'secret' => $IAM_SECRET
    )
]);

$imagenaviso_signed = $cfClient->getSignedUrl([
    'url' => $resourceKey,
    'expires' => $expires,
    'private_key' => $privateKey,
    'key_pair_id' => $keyPairId
]);

$imagenlateral_signed = $cfClient->getSignedUrl([
    'url' => $resourceKeylateral,
    'expires' => $expires,
    'private_key' => $privateKey,
    'key_pair_id' => $keyPairId
]);

//echo $download_url;

?>

<!DOCTYPE html>
<html lang="es">
    <head>
        
        <?php  $titpag = "User management"; include '../include/generales.php';
        ?>
			
        <style>
            .page-section {
                padding-top: 160px;
                padding-bottom: 30px;
            }
            .caja{
                    /* display: flex; */
                /* flex-flow: column wrap; */
                justify-content: center;
                align-items: center;
                height: 100%;
                overflow: hidden;
            }
            .box{
            /*width: 450px;*/
            /*height: 300px;*/
            overflow: hidden;
            }

            .box img{
            width: 100%;
            height: auto;
            }
            @supports(object-fit: cover){
                .box img{
                /*height: 100%;*/
                object-fit: cover;
                object-position: center center;
                }
            } 

            .padding-0{
                padding-right:0;
                padding-left:0;
            }

            .accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #48aa42;
}

.accordion a:hover::after {
  border: 1px solid #48aa42;
}

.accordion a.active {
  color: #48aa42;
  border-bottom: 1px solid #48aa42;
}

.accordion a::after {
    font-family: 'Ionicons';
    content: '\f218';
    position: absolute;
    float: right;
    right: 1rem;
    font-size: 20px;
    color:#2b4365;
    padding: 0;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #2b4365;
    text-align: center;
}
.accordion a.active::after {
  font-family: 'Ionicons';
  content: '\f209';
  color: #48aa42;
  border: 1px solid #48aa42;
}

.accordion .content {
  display: none;
  padding: 1rem;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}

.accordion .content p {
    font-size: 13px;
    font-weight: 300;
    font-family: 'Noto Sans', sans-serif;
    color: #888;
}
.accordion {
    padding-top: 40px;
    font-family:"Montserrat", sans-serif;
}	
.accordion a {
    color:#2b4365!important;
    font-weight:bold;
    text-decoration:none;
}
.accordion-item {
    padding: 12.5px 0;


}
.accordion a.btndescarga {
    background: #48aa42;
    border-radius: 10px;
    display: inline-block;
    width: auto;
    color: #fff!important;
    transition: .35s all ease;
    font-size: 15px;
    margin-right: 15px;
    padding: 10px;
}
.accordion a.btndescarga:hover {
    background: #2b4365;
}
.accordion a.btndescarga:after {
    display:none;
}
a.btndescarga i {
    padding: 0 10px;
    
}
.comunicado-bg.right {
    background-color: rgba(205,205,212, 0.4);
    padding: 40px 40px 38px 40px;
    margin-bottom: 50px;
    background-repeat: no-repeat;
    padding-left: 5%;
    background-position: right;
    padding-right: 35%;
    background-size: 30% 100%;
}
.comunicado-bg.left {
    background-color: rgba(205,205,212, 0.4);
    padding: 40px 40px 38px 40px;
    margin-bottom: 50px;
    background-repeat: no-repeat;
    padding-left: 35%;
    background-size: 30% 100%;
    padding-right: 5%;
}

.extendido {
    right:0;
    position: absolute;
}
.extendido img {
    height: 300px;
    width: 100%;
}
.title {
    margin: 100px 0;
}
.innerbox {
    background: rgba(205,205,212, 0.4);
    padding: 30px;
    margin-bottom: 30px;
}
.innerbox h5 {
    min-height: 60px;
}
.innerbox .btn.btn-primary, .bannerinferior .btn.btn-primary {
    bottom: 60px!important;
}


#caractform {
        width: 100%;
        margin: 10px auto;
        padding: 3em 2em 2em 2em;
        background: #fafafa;
        /* min-width: 1500px; */
        border-radius: 10px;
        font-size: 12px;
        font-family: "Montserrat";
    }
    #caractform .group {
        position: relative;
        margin-bottom: 35px;
        width: 33.33%;
        float: left;
        padding: 0 10px;
    }

    #caractform input, #caractform textarea  {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        -webkit-appearance: none;
        display: block;
        background: #fafafa;
        color: #636363;
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #757575;
    }

    #caractform input:focus { outline: none; }


    /* Label */

    #caractform label {
        color: #999; 
        font-size: 14px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: all 0.2s ease;
    }

    #caractform label span {
        font-size: 10px;

    }


    /* active */

    #caractform input:focus ~ label, #caractform input.used ~ label, #caractform textarea:focus ~ label, #caractform textarea.used ~ label  {
        top: -20px;
    transform: scale(.75); left: -2px;
        /* font-size: 14px; */
        color: #2b4365;
    }


    /* Underline */

    #caractform .bar {
        position: relative;
        display: block;
        width: 100%;
    }

    #caractform .bar:before, #caractform .bar:after {
        content: '';
        height: 2px; 
        width: 0;
        bottom: 1px; 
        position: absolute;
        background: #2b4365; 
        transition: all 0.2s ease;
    }

    #caractform .bar:before { left: 50%; }

    #caractform .bar:after { right: 50%; }


    /* active */

    #caractform input:focus ~ .bar:before, #caractform input:focus ~ .bar:after { width: 50%; }


    /* Highlight */

    #caractform .highlight {
        position: absolute;
        height: 60%; 
        width: 100px; 
        top: 25%; 
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }


    /* active */

    #caractform input:focus ~ .highlight {
        animation: inputHighlighter 0.3s ease;
    }


    /* Animations */

    @keyframes inputHighlighter {
        from { background: #2b4365; }
        to 	{ width: 0; background: transparent; }
    }


    /* Button */

    #caractform .button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    margin: .3em 0 1em 0;
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #48aa42;
    cursor: pointer;
    transition: all 0.15s ease;
    }
    #caractform .button:focus { outline: 0; }


    /* Button modifiers */

    #caractform .buttonBlue {
    background: #2b4365;
    text-shadow: 1px 1px 0 #48aa42;
    }

    #caractform .buttonBlue:hover { background: #48aa42; }


    /* Ripples container */

    #caractform .ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    }


    /* Ripples circle */

    #caractform .ripplesCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    }

    #caractform .ripples.is-active .ripplesCircle {
    animation: ripples .4s ease-in;
    }

    .btn-primary {
        font-family: "Montserrat", sans-serif;
    }
    /* Ripples animation */

    @keyframes ripples {
    0% { opacity: 0; }

    25% { opacity: 1; }

    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
    }
    }

    .selects select {
    word-wrap: normal;
    font-size: 14px;
    padding: 10px 10px 10px 5px;
    -webkit-appearance: none;
    display: block;
    background: #fafafa;
    color: #636363;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #757575;
}
#caractform .selects label {
    position: relative;
    color: #2b4365;
    font-weight: 600;
}
#caractform .datos .group {
    width: 50%;
}
.infofinal {
    width: 100%;
    padding: 30px 10%;
    color:222;
}
.infofinal b {
    color: #2b4365;
    font-family: "Montserrat";
}
p#c1_text {
    margin-top: 40px;
}
p#nombre_completo_text {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #2b4365;
    padding-top: 10px;
    margin-bottom: 0;
}
p#nombre_completo2_text, #puesto_text, #puesto2_text {
    text-align: center;
}
p#nombre_completo2_text {
    margin-bottom: 0;
}
p#puesto2_text {
    text-align: center;
}

div#resultsForm .btn-primary {
    float: right;
    /* position: absolute; */
}
h5#exampleModalLabel {
    width: 100%;
    float: left;
    padding: 10px 20px 30px;
}

div#usuarios table th {
    background: #f0f0f0;
    color: #2b4365;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif!important;
    padding: 10px!important;
}

#usuarios table thead th {
    background: #2e4365;
    color: #fff;
    font-family: "Montserrat", sans-serif!important;
    font-size: 16px;
}
@media(max-width:1024px){
            #linkdestacado .col-md-3 {
                max-width: 40%;
            }
            #linkdestacado .col-md-9 {
                max-width: 60%;
            }
        }
            
        @media(max-width:768px){
            #linkdestacado .col-md-3 {
                max-width: 100%;
            }
            #linkdestacado .col-md-9 {
                max-width: 100%;
            }
            img.logoevent {
                max-height: 300px;
            }
            .bannerinferior {
                background-size: cover;
                margin-bottom: 70px!important;
                margin-top: 0px;
            }
            #carouselExampleIndicators {
                margin-top: 60px;
                margin-bottom: 30px;
                height: 50vh;
            }
            .carousel-inner, .carousel-item {
                height: 50vh;
            }
            .carousel-item img {
                height: 50vh;
                object-fit: cover;
                object-position: 50%;
            }
            .masthead-heading {
                font-size: 45px;
            }
            .carousel-caption h5 {
                font-size: 15px;
            }
            
            
        }

        
        .avisobox {
            background: #cdcdd4;
            margin-top: 50px;
            float: right;
            margin-right: -12.5px;
            padding: 30px;
            margin-bottom: -50px;
        }

        .bannerinferior{
            background-size: cover;
            margin-bottom: 50px!important;
            margin-top: -30px;
        }
        .col-md-12 .innerbox.bg2 {
            background-color: #cdcdd4;
            float: left;
        }

        img.boximg {
            width: 100%;
            max-height: 180px;
            object-fit: cover;
            min-height: 180px;
            border: 1px solid #ccc;
        }
@media(max-width:700px){
    .extendido {
        transform: none;
        position: relative;
    }
    .estadisticas .title {
        margin: 0;
        text-align: left!important;
    }
    .estadisticas .title h4.text-left {
        text-align: left!important;
        margin-bottom: 20px;
    }
    .extendido img {
        height: 100px;
        width: 100%;
        object-fit: cover;
    }
    h4, .h4 {
        font-size: 2rem;
        color: #2b4365;
    }
}

div#linkdestacado {
    padding: 0;
    background: #cdcdd4!important;
}
img#logolinkdestacado {
    width: 100%;
    object-fit: cover;
}
.innerbox .btn.btn-primary, .bannerinferior .btn.btn-primary {
    float: right;
    right: 40px;
    position: absolute;
    bottom: 30px;
}
.innerbox2 h3.my-3 {
    padding: 30px;
}

#linkdestacado .btndest {
    bottom: 0!important;
}
#userslink{
    background: #2b4365;
    color: #fff;
    /* border-radius: 20px; */
}

#userslink h5 {
    color: #fff!important;
}

div#botones {
    width: 100%;
    display: inline-block;
    text-align: right;
}


div#usuarios {
    text-align: center;
}
div#usuarios table th * {
    background: transparent!important;
}
#usuarios table {
    min-width: 75%;
    text-align: center;
    MARGIN: 0 auto;
}

#addUserForm {
        width: 100%;
        margin: 10px auto;
        padding: 3em 2em 2em 2em;
        background: #fafafa;
        /* min-width: 1500px; */
        border-radius: 10px;
        font-size: 12px;
        font-family: "Montserrat";
    }
    #addUserForm .group {
        position: relative;
        margin-bottom: 35px;
        width: 50%;
        float: left;
        padding: 15PX;
    }

    #addUserForm input, #addUserForm textarea  {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        -webkit-appearance: none;
        display: block;
        background: #fafafa;
        color: #636363;
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #757575;
    }

    #addUserForm input:focus { outline: none; }


    /* Label */

    #addUserForm label {
        color: #999; 
        font-size: 18px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: all 0.2s ease;
    }


    /* active */

    #addUserForm input:focus ~ label, #addUserForm input.used ~ label, #addUserForm textarea:focus ~ label, #addUserForm textarea.used ~ label  {
        top: -20px;
    transform: scale(.75); left: -2px;
        /* font-size: 14px; */
        color: #2b4365;
    }


    /* Underline */

    #addUserForm .bar {
        position: relative;
        display: block;
        width: 100%;
    }

    #addUserForm .bar:before, #addUserForm .bar:after {
        content: '';
        height: 2px; 
        width: 0;
        bottom: 1px; 
        position: absolute;
        background: #2b4365; 
        transition: all 0.2s ease;
    }

    #addUserForm .bar:before { left: 50%; }

    #addUserForm .bar:after { right: 50%; }


    /* active */

    #addUserForm input:focus ~ .bar:before, #addUserForm input:focus ~ .bar:after { width: 50%; }


    /* Highlight */

    #addUserForm .highlight {
        position: absolute;
        height: 60%; 
        width: 100px; 
        top: 25%; 
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }


    /* active */

    #addUserForm input:focus ~ .highlight {
        animation: inputHighlighter 0.3s ease;
    }


    /* Animations */

    @keyframes inputHighlighter {
        from { background: #2b4365; }
        to 	{ width: 0; background: transparent; }
    }


    /* Button */

    #addUserForm .button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    margin: .3em 0 1em 0;
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #48aa42;
    cursor: pointer;
    transition: all 0.15s ease;
    }
    #addUserForm .button:focus { outline: 0; }


    /* Button modifiers */

    #addUserForm .buttonBlue {
    background: #2b4365;
    text-shadow: 1px 1px 0 #48aa42;
    }

    #addUserForm .buttonBlue:hover { background: #48aa42; }


    /* Ripples container */

    #addUserForm .ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    }


    /* Ripples circle */

    #addUserForm .ripplesCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    }

    #addUserForm .ripples.is-active .ripplesCircle {
    animation: ripples .4s ease-in;
    }

    #addUserForm input[type="checkbox"] {
    width: 30px;
    padding: 0;
    border: 1px solid #222;
    -webkit-appearance: auto;
    display: inline-block;
}

#permisoslistnew h4 {
    font-size: 15px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

    @media(max-width:600px){
        #addUserForm .group {
            width: 100%;
            padding: 0;
        }
    }
    </style>
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    </head>
    <body id="page-top" class="estadisticas" data-url = '<?php echo $page_url;?>'>
		
		<?php include '../include/nav2.php'; ?>

                <!-- Services-->
                <section class="page-section" id="services">

                    <div class="container" style="padding-top:0;">
                        <div class="row">

                            <div class="col-lg-5 title" style="vertical-align: center;">
                                <h4 class="text-left">Users <br>Management</h4>
                                <h5>Good day, <b><?php echo $nombre_user_privado;?></b></h5>
                                <a id="logout" href="/logout"><img src="/assets/img/logout.svg" style="width:20px; margin:5px;">Logout</a>
                            </div>	
                            
                            <div class="col-lg-7 padding-0 extendido">

                            <img src="<?php echo $imagenlateral_signed;?>" class="padding-0 img-fluid">
                                
                            </div>	
                                        
                        </div>	  
                    </div>
                    <div class="container" wstyle="padding-top: 0;">
                        <div class="row">
                            <div id="botones">
                                <a data-toggle="modal" data-target="#nuevousuario" class="btn btn-primary btn-xl  js-scroll-trigger btnactioncard" ><i class="fas fa-user-plus"></i> Add new</a>
                            </div>
                        </div>	  
			        </div>
			
							
        </section>

             <div id="usuarios">

                
             <table id="table" class=" publicados">
                <thead>
                <tr>
                    
                    <th >Name</th>
                    <th >Email</th>
                    <th>Edit</th>
                    <th>Delete</th>
                    
                </tr>
                </thead>
                <tbody>
             
              <?php
                
              $curl2 = curl_init();

              curl_setopt_array($curl2, array(
                CURLOPT_URL => $endpoint_graph_cms,
                CURLOPT_RETURNTRANSFER => true,
                CURLOPT_ENCODING => '',
                CURLOPT_MAXREDIRS => 10,
                CURLOPT_TIMEOUT => 0,
                CURLOPT_FOLLOWLOCATION => true,
                CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                CURLOPT_CUSTOMREQUEST => 'POST',
                CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  usuariosSitioPrivado( stage: PUBLISHED, where: {superior: \\"'.$correo.'\\"}) {\\r\\n    enviadoRevision\\r\\n  rol\\r\\n    nombre\\r\\n   email\\r\\n   estatus\\r\\n      localizations {\\r\\n      enviadoRevision\\r\\n  rol\\r\\n      nombre\\r\\n   email\\r\\n   estatus\\r\\n   }\\r\\n     id\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
                CURLOPT_HTTPHEADER => array(
                  'Content-Type: application/json',
                  'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
                ),
              ));
              
              

              $response2 = curl_exec($curl2);
              //print_r($response);

              curl_close($curl2);

              

                $arrayform2 = json_decode($response2, true);
                

                foreach ($arrayform2['data']['usuariosSitioPrivado'] as $item) {

                    foreach ($item['localizations'] as $subitem) {

                      if($subitem['estatus'] == 'oculto' ){
                        $status = '<span class="statusenespera">Oculto</span>';
                      }
                      if($subitem['estatus'] == 'publicado' ){
                          $status = '<span class="statusentregado">Visible</span>'; 
                      }
                        
                        echo '  
                        <tr id="tr'.$item['id'].'" class="'.$item['id'].'">
                            <th>'.urldecode($subitem['nombre']).'</th>
                            <th>'.$subitem['email'].'</th>
                            <th id="edit'.$item['id'].'" onclick="openEditUser(&quot;'.$item['id'].'&quot;)"><div aria-label="Editar" data-balloon-pos="left"><img src="/assets/img/writing.svg" style="width: 35px; cursor: pointer;"></div></th>
                            <th id="delete'.$item['id'].'" onclick="deleteUser(&quot;'.$item['id'].'&quot;)"><div aria-label="Eliminar" data-balloon-pos="left"><img src="/assets/img/trash.svg" style="width: 35px; cursor: pointer;"></div></th>
                    
                  </tr>';

                }
          
            
            }

                  
                echo '
                    </tbody>
                  </table>';

                  
              ?>

            <div id="respuestauser"></div>
             </div>  
             
             

             <!-- Modal Solicitud -->
            <div class="modal fade" id="nuevousuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalContact">
                <hgroup>
                    <h1>Enter the following data to add the user.</h1>
                    </hgroup>
                    <form id="addUserForm">

                    <input type="hidden" id="superior" value="<?php echo $correo;?>">
                    <input type="hidden" id="empresa" value="<?php echo $empresa;?>">
                    <input type="hidden" id="permisos" value="<?php echo $permisos;?>">

                    <div class="group">
                        <input class="forminput" id="usuario_nombre" type="text"><span class="highlight"></span><span class="bar"></span>
                        <label>Full name</label>
                    </div>

                    <div class="group">
                        <input class="forminput" id="usuario_email" type="email"><span class="highlight"></span><span class="bar"></span>
                        <label>Email</label>
                    </div>
                    
                    
                    <div class="group">
                        <input class="forminput" id="usuario_area" type="text"><span class="highlight"></span><span class="bar"></span>
                        <label>Area</label>
                    </div>
                    
                    <div class="group">
                        <input class="forminput" id="usuario_funcion" type="text"><span class="highlight"></span><span class="bar"></span>
                        <label>Role in the company</label>
                    </div>

                    <div class="group desc" data-permisos ="<?php echo $permisos;?>" id="permisoslistnew">
			
			<h4 >Access permissions*</h4>

			<?php

				if(strlen($_SESSION['permisosPriv'])>90 && strlen($_COOKIE['persistID'])<2)
				{
					$responseactionCards = $_SESSION['permisosPriv'];
					//echo $_SESSION['permisosPriv'];
				}
				else{
					$curl = curl_init();
					curl_setopt_array($curl, array(
					CURLOPT_URL => $endpoint_graph_cms,
					CURLOPT_RETURNTRANSFER => true,
					CURLOPT_ENCODING => '',
					CURLOPT_MAXREDIRS => 10,
					CURLOPT_TIMEOUT => 0,
					CURLOPT_FOLLOWLOCATION => true,
					CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
					CURLOPT_CUSTOMREQUEST => 'POST',
					CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  actionCardsCumplimiento( stage: PUBLISHED, where: {estatus_not_contains: \\"eliminado\\"AND: {privado: \\"1\\"}}) {\\r\\n    archivo\\r\\n    enlace\\r\\n   layout\\r\\n   slug\\r\\n  estatus\\r\\n    id\\r\\n    nuevaPestana\\r\\n    texto\\r\\n    textoDelBoton\\r\\n    titulo\\r\\n    localizations {\\r\\n      archivo\\r\\n      enlace\\r\\n      enviadoRevision\\r\\n      layout\\r\\n   slug\\r\\n  estatus\\r\\n      id\\r\\n      nuevaPestana\\r\\n      texto\\r\\n      textoDelBoton\\r\\n      titulo\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
					CURLOPT_HTTPHEADER => array(
						'Content-Type: application/json',
						'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
					),
					));
				$responseactionCards = curl_exec($curl);
				$_SESSION['permisosPriv'] = $responseactionCards;
				curl_close($curl);
				}

				//echo $responseactionCards;
				$arrayactionCards = json_decode($responseactionCards, true);

				foreach ($arrayactionCards['data']['actionCardsCumplimiento'] as $item) {


					$pos_permisos = strpos($permisos, $item['slug']);
                            
                        if ($pos_permisos === false) {}
                        else{
                            echo '<input type="checkbox" name="permisos[]" value="'.$item['slug'].'" checked/>'.urldecode($item['titulo']).'<br>';
                        }
				

				}
				?><br>
		</div>

                    


                    <div class="group">
                            <input class="forminput" type="text" name="captcha3" id="captcha3"/><span class="highlight"></span><span class="bar"></span>
                            <label>Captcha</label>
                            <div id="respuestacaptcha3"></div>
                            
                    </div>
                    
                    <div class="group">
                            
                            <p><img src="/assets/captcha/captcha.php?rand=<?php echo rand(); ?>" id='captcha_image4'></p>
                            <p> <a href='javascript: refreshCaptcha4();'> Reload</a></p>
                    </div>

                    

                    <div id="respuestanewuser" style="float:left;width:100%;"></div>

                    <button id="btnuser" type="button" class="button buttonBlue" onclick="nuevoUsuario();">Save
                        <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
                    </button>



                    
                    </form>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" data-toggle="modal" data-target="#nuevousuario" class="btn btn-primary">Close</button>
                </div>
                </div>
            </div>
            </div>


            <!-- Modal Editar Usuario -->
            <div class="modal fade" id="editausuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit user</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalEdit"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" data-toggle="modal" data-target="#editausuario" class="btn btn-primary">Close</button>
                </div>
                </div>
            </div>
            </div>

		
    		<?php 
            
            include '../include/footer.php'; ?>
		<script>
            $(document).ready(function() {
                $("#formcarac").load('formulario.php');
                $('.accordion a').click(function(){
                    $(this).toggleClass('active');
                    $(this).next('.content').slideToggle(400);
                });
                

                <?php
                if(strlen($seccion)>2){
                    echo' 
                    
                    $("html, body").animate({
                            scrollTop: $("#'.$seccion.'").offset().top - 140
                    }, 1000);

                    setTimeout(() => {
                        $("#'.$seccion.' a").click();
                    }, 750);
                    
                    ';
                }
                ?>
            });



            function deleteUser(id){
                if (confirm('¿Confirm Delte user?')) {
                    $.ajax({
                        url : "/include/deleteuser.php?id="+id+"&lang=en",
                        type: "GET",
                        data : "id="+id,
                        success:function(data){
                            $('#respuestauser').html(data);    
                        }
                    });
                }
            }
            
            function openEditUser(id){
                $("#modalEdit").html("");
                $("#modalEdit").load("/include/edituser.php?id="+id+"&lang=en");
                $('#editausuario').modal('toggle');

            }

            function nuevoUsuario(){

                $('#respuestanewuser').html('');
                $('#nuevousuario input').css("border-color", "none");

                var data=new FormData($("#addUserForm")[0]);

                $("#btnuser").css("pointer-events", "none");
                $("#btnuser").css("opacity", ".5");
                var nombre = encodeURIComponent($("#usuario_nombre").val());
                var emailval = $("#usuario_email").val();
                var email = encodeURIComponent($("#usuario_email").val());
                var superior = encodeURIComponent($("#superior").val());
                var empresa = encodeURIComponent($("#empresa").val());
                var permisos = encodeURIComponent($("#permisos").val());
                var area = encodeURIComponent($("#usuario_area").val());
                var funcion = encodeURIComponent($("#usuario_funcion").val());
                var captcha3 = $("#captcha3").val();

                var permisosnew = new Array();
                $("#permisoslistnew input:checked").each(function() {
                    permisosnew.push($(this).val());
                });

                var errors = false;

                if(nombre.length <4){
                    errors = true;
                    $('#respuestanewuser').append('<p class="errormsg">Enter the full name</p>');
                    $("#usuario_nombre").css("border-color", "#fa5555");
                }
                
                if(captcha3.length <4){
                    errors = true;
                    $('#respuestanewuser').append('<p class="errormsg">Enter the captcha</p>');
                    $("#captcha3").css("border-color", "#fa5555");
                }

                var mailvalid = validateEmail(emailval);
                if(mailvalid == false){
                    $("#respuestanewuser").append("<p class='errormsg'>Invalid email</p>");
                    $("#usuario_email").css("border-color", "#fa5555");
                    
                    errors = true;
                }

                if(errors == true){
                    setTimeout(() => {
                        $("#btnuser").css("pointer-events", "inherit");
                        $("#btnuser").css("opacity", "1");
                    }, 2000);
                }

                else{
                    $.ajax({
                        url: "/include/addUsuario.php?nombre="+nombre+"&empresa="+empresa+"&area="+area+"&funcion="+funcion+"&email="+email+"&superior="+superior+"&permisos="+permisosnew+"&lang=<?php echo $lang;?>",
                        type:"POST",
                        data:data,
                        processData: false,
                        contentType: false,
                        success:function(data){
                            $('#respuestanewuser').html(data);

                            setTimeout(() => {
                                $("#btnuser").css("pointer-events", "inherit");
                                $("#btnuser").css("opacity", "1");
                            }, 2000);
                        }

                    });
                } 
            }

            setTimeout(() => {

                var string = "<?php echo $permisos;?>";
                var array = string.split(",");
                

                $.each( array, function( index, value ){
                    //alert(value);
                    //$("#permisoslistnew").find("input[value='"+value+"']").prop( "checked", true );
                });
                
            }, 600);


		</script>
    </body>
</html>
