@extends('layouts.app')

@section('content')
<style>
    .main{
        padding-block: 0px;
    }
    th{
        font-size:10px;
        text-align:center;
     /*  writing-mode: vertical-lr; */
    }
    td{
        text-align:center;
        
    }
    table, th {
        border: 1px ;
        border-collapse: collapse;
    }
    .textoSkills{
        display:block;
    }

    .btn_editar{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 1px solid gray;
        font-size: 20px;
        background-color: white;
        transition: all 0.3s;
    }

    .btn_editar:hover{
        box-shadow: gray 0px 0px 1px 1px;
        background: lightgray;
    }

    .bt-edit-cont{
        display: flex;
        flex-direction: row;

    }
    .botones{
        border: 1px solid var(--verde-logika);
        border-radius: 5px;
        transition: all 0.3s;
    }
    .botones:hover {
        background-color: #90b15656;
    }
    .botonselec{
        background-color: #90b156;
        border: 1px solid var(--verde-logika);
        color: white;
        border: 0px;
        border-radius: 5px;
    }

    .botonesGest{
        border: 1px solid dark;
        border-radius: 5px;
    }
    .botonesGest:hover {
        font-weight: bold;
    }
    .botonGestselec{
        background-color: #292b2c;
        color: white;

        border: 1px solid #292b2c;
        border-radius: 5px;
    }
    .table-scroll {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    max-height: 700px;
    }
    .table-scroll table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
    }
    .table-wrap {
    position: relative;
    }
    .table-scroll th,
    .table-scroll td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
    }
    .table-scroll thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }

    .table-scroll tfoot,
    .table-scroll tfoot th,
    .table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index:4;
    }

    th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
    }
    thead th:first-child,
    tfoot th:first-child {
    z-index: 5;
    }
    </style>
    
<div class="container-fluid">
    <br/>
    <div id ="botonesCambio" >
        <button onclick="filtrarTabla('Todos'); cambiarGrupoSkills('Todos')" id="Todos" class = "botonselec">Todos</button>
        @foreach($listaBotones as $botones)
        <button onclick="filtrarTabla('{{$botones->Grupo}}'); cambiarGrupoSkills('{{$botones->Grupo}}')" id="{{$botones->Grupo}}" class = "botones">{{$botones->Grupo}}</button>
        @endforeach
    </div>
    <div id='ContenedorFecha' style ='display:none'>
    <span><b>Fecha para la programacion de Skill:</b> </span>
    <input type="datetime-local" id="fechaProgramacionSkills" >
    </div>
    <br/>
    <div id ="contenedorTabla"  class="table-scroll" style="overflow-x: scroll" >
       <table class="table main-table" >
            <thead class="thead-dark" >
                <tr style = " border: 1px solid white;text-align: ">
                    <th>
                     <span>Agente </span>   
                    </th>
                    @for($i = 0;$i<count($ListaSkills);$i++)
                    <th>
                        <span  id = "{{'$ListaSkills[$i]'}}">{{"$ListaSkills[$i]"}}</span>  
                    </th>
                    @endfor
                </tr>
            </thead>
            <tbody>
                @foreach($listaUsuariosSkills as $usuario)
                <tr>
                <th style="font-size:15px; text-align:left;">
                    @if($usuario[1] == true)
                        <span style="text-align:left;"><i style="color: var(--verde-logika); font-size: 10px;" class="bi bi-circle-fill"></i> {{$usuario[0]}}</span>  
                    @else
                        <span  style="text-align:left;"><i style="color: #eb4034; font-size: 10px;" class="bi bi-circle-fill"></i> {{$usuario[0]}}</span>  
                    @endif
                </th>
                @for($i=2;$i<count($usuario);$i++)
                    <td>
                        <span class="textoSkills" style="text-justify:left">{{$usuario[$i]}}</span>  
                        @if($usuario[$i] !='')
                        <input type="number" max="10" min = "1" onchange="cambiarValorCambiado(this)" id="{{$usuario[0].'&'.$i}}"style ='display:none;text-align:center'class = 'form-control p-0' value='{{$usuario[$i]}}'cambiado ='0'> </input>
                    @endif
                    </td>
                   
                    
                @endfor
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <br/>
    <div class="bt-edit-cont">
        <button onclick="editar()" class="btn_editar" id="btn_editar"><i class="bi bi-pencil"></i></button>
        <button onclick="cancelar()" id="btn_cancelar" class="btn_editar" style ="display:none"><i class="bi bi-x-circle"></i></button>
        <button onclick="GuardarSegunGestion()" id="btn_guardar" class="btn_editar" style ="display:none"><i class="bi bi-check-circle"></i></button>
    </div>
<br/>
<br/>
    <div id ="botonesTipoGestion">
        <button onclick="filtrarTabla(document.getElementsByClassName('botonselec')[0].id); cambiarTipoGestion(this.id)" id="GestionSkills" class = "botonGestselec">Gestionar skills</button>
        <button onclick="ActualizarTablaReinicioDiario();cambiarTipoGestion(this.id)" id="ReiniciSkillsDiarios" class = "botonesGest">Programacion diaria</button>
        <button onclick="ActualizarTablaProgramacionSkills();cambiarTipoGestion(this.id)" id="ProgramarSkillFecha" class = "botonesGest" disabled>Programacion Fecha</button>
    </div>
</div>

<script>
    var editarActivo 
    setInterval(actualizarTablaIntervalo,10000)
  window.onload = async function(){
    vectorSkills = {!! json_encode($ListaSkills) !!}
   respuesta = await obtenerDatosFiltrados()
   editarActivo =0
  }
function ocultar(){
    var allElements = document.querySelectorAll('.textoSkills');
    for(i=0;i<allElements.length;i++){
        allElements[i].style.display='none';
    }
}
function mostrarSpan(){
    var allElements = document.querySelectorAll('.textoSkills');
    for(i=0;i<allElements.length;i++){
        allElements[i].style.display='block';
    }
}
function mostrarInputs(){
 
    var allElements = document.querySelectorAll('.form-control');
    for(i=0;i<allElements.length;i++){
        allElements[i].style.display='block';
    }
}
function ocultarInputs(){
    var allElements = document.querySelectorAll('.form-control');
    for(i=0;i<allElements.length;i++){
        allElements[i].style.display='none';
    }
}
function actualizarTablaIntervalo(){
    var botones = document.getElementsByClassName('botonselec')
    if(document.getElementById("btn_editar").style.display !='none' && document.getElementById("GestionSkills").getAttribute('class') =='botonGestselec'){
        filtrarTabla(botones[0].id)
    } 
}
function editar(){
    editarActivo = 1
    ocultar()
    mostrarInputs()
    document.getElementById("btn_editar").style.display='none'
    document.getElementById("btn_cancelar").style.display='flex'
    document.getElementById("btn_guardar").style.display='flex'
    document.getElementById("botonesCambio").style.display='none'
    document.getElementById('botonesTipoGestion').style.display = 'none'
}

function cancelar(){
    editarActivo = 0
    ocultarInputs()
    mostrarSpan()
    document.getElementById("btn_editar").style.display='flex'
document.getElementById("btn_cancelar").style.display='none'
document.getElementById("btn_guardar").style.display='none'
if(document.getElementById("GestionSkills").getAttribute('class') =='botonGestselec')
document.getElementById("botonesCambio").style.display='inline'
document.getElementById('botonesTipoGestion').style.display = 'inline'

}
function listaDeCambios(){
    var elementosEditados = document.querySelectorAll('.form-control');
    let vectorUsuarios = []
    for(i=0;i<elementosEditados.length;i++){
       cambiado = elementosEditados[i].getAttribute('cambiado');
      
       if(cambiado !== "0"){
        var valores = elementosEditados[i].id.split("&")
        //if(valores[0]!="titulo" || valores[0]!="limite" || valores[0]!="archivo_nec")
        var usuario = {
                        nombre: "",
                        nombreSkill: "",
                        valor:""
                      }
        usuario.nombre = valores[0]
        usuario.nombreSkill = vectorSkills[valores[1]-2]
        usuario.valor = elementosEditados[i].value
        vectorUsuarios.push(usuario)
       }
    }
    return vectorUsuarios
}
function listaDeSkillsReinicioDiario(){
    var elementosEditados = document.querySelectorAll('.form-control');
    let vectorUsuarios = []
    for(i=0;i<elementosEditados.length;i++){
       cambiado = elementosEditados[i].getAttribute('cambiado');
      

        var valores = elementosEditados[i].id.split("&")
        var usuario = {
                        nombre: "",
                        nombreSkill: "",
                        valor:""
                      }
        usuario.nombre = valores[0]
       usuario.nombreSkill = vectorSkills[valores[1]-2]
        usuario.valor = elementosEditados[i].value
        vectorUsuarios.push(usuario)
       
    }
    return vectorUsuarios
}
function listaProgramacionSkill(){
    var fecha = document.getElementById('fechaProgramacionSkills').value
    var elementosEditados = document.querySelectorAll('.form-control');
    let vectorUsuarios = []
    for(i=0;i<elementosEditados.length;i++){
       cambiado = elementosEditados[i].getAttribute('cambiado');
      
if(cambiado!=='0'){
    var valores = elementosEditados[i].id.split("&")
        var usuario = {
                        nombre: "",
                        nombreSkill: "",
                        valor:"",
                        fecha:""
                      }
        usuario.nombre = valores[0]
       usuario.nombreSkill = vectorSkills[valores[1]-2]
        usuario.valor = elementosEditados[i].value
        usuario.fecha = fecha
        vectorUsuarios.push(usuario)
}         
    }
    return vectorUsuarios
}
function cambiarValorCambiado(elemento){
    elemento.setAttribute("cambiado",1)
}
async function guardar(){
    showLoader()
    document.getElementById('btn_guardar').disabled = true;
    cambios =listaDeCambios()
    
    let data={
        listaCambios: cambios
    }
     await fetch("{{route('GuardarCambiosSkills')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(function(result){
    alert("Los cambios se han guardado correctamente.")
    document.getElementById('btn_guardar').disabled = false;
    var botones = document.getElementsByClassName('botonselec')
    filtrarTabla(botones[0].id)
    cancelar()
    hideLoader()
  })
  .catch(function (error) {
    document.getElementById('btn_guardar').disabled = false;
    var botones = document.getElementsByClassName('botonselec')
    filtrarTabla(botones[0].id)
    cancelar()
    hideLoader()
  });
  
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function filtrarTabla(filtro){
    showLoader()
resultado = await obtenerDatosFiltrados(filtro)
vectorSkills = resultado.listaSkills
listaUsuarios = resultado.listaUsuariosSkills
if(document.getElementById("btn_editar").style.display !='none'){
cuerpo = ``
encabezado = `<th>
                     <span>Agente</span>   
                </th>`
for(i = 0; i<vectorSkills.length;i++){
    encabezado += `<th>
                        <span  id = "${vectorSkills[i]}">${vectorSkills[i]}</span>  
                    </th>`
}
for(i = 0; i<listaUsuarios.length;i++){
    console.log(listaUsuarios[i][1])
    if(listaUsuarios[i][1]==1){
        filas=`<th style="font-size:15px; text-align:left;">
                <span style="text-justify:left;"><i style="color: var(--verde-logika); font-size: 10px;" class="bi bi-circle-fill"></i> ${listaUsuarios[i][0]}</span>  
            </th>`
    }else{
        filas=`<th style="font-size:15px; text-align:left;">
                <span style="text-justify:left;"><i style="color: #eb4034; font-size: 10px;" class="bi bi-circle-fill"></i> ${listaUsuarios[i][0]}</span>  
            </th>`
    }

for(j=2;j<listaUsuarios[i].length;j++){
    if(listaUsuarios[i][j]!='')
    inputValor = `<input type="number" max="10" min = "1" onchange="cambiarValorCambiado(this)" id="${listaUsuarios[i][0]}&${j}"style ='display:none;text-align:center'class = 'form-control p-0' value='${listaUsuarios[i][j]}'cambiado ='0'> </input>`
  else{
    inputValor =``
  }
    filas += `<td>
                <span  class="textoSkills" style="text-justify:center">${listaUsuarios[i][j]}</span>  
                ${inputValor}
            </td>`
  
}
cuerpo +=`<tr>
            ${filas}
        </tr>`
}
document.getElementById('contenedorTabla').innerHTML=`<table class="table table-bordered" >
            <thead class="thead-dark" >
                <tr style = " border: 1px solid white;text-align: center">
                ${encabezado}
                </tr>
            </thead>
            <tbody>
            ${cuerpo}
            </tbody>
        </table>`
        hideLoader()
}
}
 async function obtenerDatosFiltrados(filtro){
    let data={
        grupo: filtro
    }
    response = await fetch("{{route('ListaUsuarioSkillsFiltrados')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(function(result){
    return result
  })
  .catch(function (error) {
    //en este caso no poner mensage, al actualizar la pagina si le pilla en mitad de un request da error.
   // alert("ha habido un error");
  });
  return response
}
async function ActualizarTablaReinicioDiario(){
    showLoader()
resultado = await obtenerDatosReinicioDiario()
vectorSkills = resultado.listaSkills
listaUsuarios = resultado.listaUsuariosSkills
cuerpo = ``
encabezado = `<th>
                     <span>Agente</span>   
                </th>`
for(i = 0; i<vectorSkills.length;i++){
    encabezado += `<th>
                        <span  id = "${vectorSkills[i]}">${vectorSkills[i]}</span>  
                    </th>`
}
for(i = 0; i<listaUsuarios.length;i++){
    if(listaUsuarios[i][1]==1){
        filas=`<th style="font-size:15px">
                <span style="text-justify:center;background:green;color:white">${listaUsuarios[i][0]}</span>  
            </th>`
    }else{
        filas=`<th style="font-size:15px">
                <span style="text-justify:center;">${listaUsuarios[i][0]}</span>  
            </th>`
    }

for(j=2;j<listaUsuarios[i].length;j++){
    if(listaUsuarios[i][j]!=='')
    inputValor = `<input type="number" max="10" min = "1" onchange="cambiarValorCambiado(this)" id="${listaUsuarios[i][0]}&${j}"style ='display:none;text-align:center'class = 'form-control p-0' value='${listaUsuarios[i][j]}'cambiado ='0'> </input>`
  else{
    inputValor =``
  }
    filas += `<th style="font-size:15px">
                <span  class="textoSkills" style="text-justify:center">${listaUsuarios[i][j]}</span>  
                ${inputValor}
            </th>`
  
}
cuerpo +=`<tr>
            ${filas}
        </tr>`
}
document.getElementById('contenedorTabla').innerHTML=`<table class="table table-bordered" >
            <thead class="thead-light" >
                <tr style = " border: 1px solid white;text-align: center">
                ${encabezado}
                </tr>
            </thead>
            <tbody>
            ${cuerpo}
            </tbody>
        </table>`
        hideLoader()
}
async function ActualizarTablaProgramacionSkills(){
resultado = await obtenerProgramacionSkills()
vectorSkills = resultado.listaSkills
listaUsuarios = resultado.listaUsuariosSkills
cuerpo = ``
encabezado = `<th>
                     <span>Agente</span>   
                </th>`
for(i = 0; i<vectorSkills.length;i++){
    encabezado += `<th>
                        <span  id = "${vectorSkills[i]}">${vectorSkills[i]}</span>  
                    </th>`
}
for(i = 0; i<listaUsuarios.length;i++){
    if(listaUsuarios[i][1]==1){
        filas=`<th style="font-size:15px">
                <span style="text-justify:center;background:green;color:white">${listaUsuarios[i][0]}</span>  
            </th>`
    }else{
        filas=`<th style="font-size:15px">
                <span style="text-justify:center;">${listaUsuarios[i][0]}</span>  
            </th>`
    }

for(j=2;j<listaUsuarios[i].length;j++){
    if(listaUsuarios[i][j]!=='')
    inputValor = `<input type="number" max="10" min = "1" onchange="cambiarValorCambiado(this)" id="${listaUsuarios[i][0]}&${j}"style ='display:none;text-align:center'class = 'form-control p-0' value='${listaUsuarios[i][j]}'cambiado ='0'> </input>`
  else{
    inputValor =``
  }
    filas += `<td>
                <span  class="textoSkills" style="text-justify:center">${listaUsuarios[i][j]}</span>  
                ${inputValor}
            </td>`
  
}
cuerpo +=`<tr>
            ${filas}
        </tr>`
}
document.getElementById('contenedorTabla').innerHTML=`<table class="table table-bordered" >
            <thead class="thead-light" >
                <tr style = " border: 1px solid white;text-align: center">
                ${encabezado}
                </tr>
            </thead>
            <tbody>
            ${cuerpo}
            </tbody>
        </table>`
}
async function obtenerDatosReinicioDiario(){
    response = await fetch("{{route('ListaUsuarioSkillsReinicioDiario')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
  })
  .then(response => response.json())
  .then(function(result){
    return result
    
  })
  .catch(function (error) {
    //en este caso no poner mensage, al actualizar la pagina si le pilla en mitad de un request da error.
   // alert("ha habido un error");
  });
  return response
  
}
async function obtenerProgramacionSkills(){
    response = await fetch("{{route('ListaUsuarioProgramacionSkills')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
  })
  .then(response => response.json())
  .then(function(result){
    return result
    
  })
  .catch(function (error) {
    //en este caso no poner mensage, al actualizar la pagina si le pilla en mitad de un request da error.
   // alert("ha habido un error");
  });
  return response
}

function cambiarGrupoSkills(id){
botones = document.getElementById('botonesCambio').getElementsByTagName('*')
for(i = 0; i< botones.length; i++){
    if(botones[i].getAttribute('id') == id){
        if(botones[i].getAttribute('class') !='botonselec' ){
            botones[i].setAttribute('class','botonselec')
            botonSelecionado = id
        }
    }else{
        if(botones[i].getAttribute('class') =='botonselec'){
            botones[i].setAttribute('class','botones')
        }
    }
}
}
function cambiarTipoGestion(id){

botones = document.getElementById('botonesTipoGestion').getElementsByTagName('*')
for(i = 0; i< botones.length; i++){
    if(botones[i].getAttribute('id') == id){
        if(botones[i].getAttribute('class') !='botonGestselec' ){
            botones[i].setAttribute('class','botonGestselec')
            botonSelecionado = id
        }
    }else{
        if(botones[i].getAttribute('class') =='botonGestselec'){
            botones[i].setAttribute('class','botonesGest')
        }
    }
}
ocultarMostrarInfotmacionTipoGestion()
}
function delay(milliseconds){
return new Promise(resolve =>{
setTimeout (resolve, milliseconds);
});
}
async function GuardarReinicioSkillDiario(){
    document.getElementById('btn_guardar').disabled = true;
    Lista =listaDeSkillsReinicioDiario()
    
    let data={
        listaCambios: Lista
    }
     await fetch("{{route('GuardarReinicioSkillDiario')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(function(result){
    alert("Los cambios se han guardado correctamente.")
    document.getElementById('btn_guardar').disabled = false;
  })
  .catch(function (error) {
    alert("ha habido un error");
  });
  var botones = document.getElementsByClassName('botonselec')
  await ActualizarTablaReinicioDiario()
  cancelar()
}

async function GuardarProgramacionSkill(){
    document.getElementById('btn_guardar').disabled = true;
    Lista =listaProgramacionSkill()
    
    let data={
        listaProgramaciones: Lista
    }
    console.log(data)
     await fetch("{{route('GuardarProgramacionSkill')}}", {
      headers:{
        "Content-Type": "application/json",
        "Accept": "application/json, text-plain, */*",
        "X-Requested-With": "XMLHttpRequest",
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(function(result){
    console.log(result)
    alert("Los cambios se han guardado correctamente.")
    document.getElementById('btn_guardar').disabled = false;
  })
  .catch(function (error) {
    alert("ha habido un error");
  });
  var botones = document.getElementsByClassName('botonselec')
  cancelar()
}

function GuardarSegunGestion(){
    
if(document.getElementById("GestionSkills").getAttribute('class') =='botonGestselec'){
guardar();
}
else if(document.getElementById("ReiniciSkillsDiarios").getAttribute('class') =='botonGestselec')
GuardarReinicioSkillDiario();
else if(document.getElementById("ProgramarSkillFecha").getAttribute('class') =='botonGestselec')
GuardarProgramacionSkill()

hideLoader()
}
function ocultarMostrarInfotmacionTipoGestion(){
    if(document.getElementById("GestionSkills").getAttribute('class') =='botonGestselec'){
document.getElementById("botonesCambio").style.display='inline';
document.getElementById("ContenedorFecha").style.display='none';
}
else if(document.getElementById("ReiniciSkillsDiarios").getAttribute('class') =='botonGestselec'){
document.getElementById("botonesCambio").style.display='none';
document.getElementById("ContenedorFecha").style.display='none';
}else if(document.getElementById("ProgramarSkillFecha").getAttribute('class') =='botonGestselec'){
document.getElementById("botonesCambio").style.display='none';
document.getElementById("ContenedorFecha").style.display='inline';
document.getElementById("fechaProgramacionSkills").value='';
}
}

</script>
@endsection