@extends('layouts.app')

@section('content')
<div class="ind">
        <article>
            <div class="titlepag">
              <h2>Incidencias abiertas <div class="contador-inc" id="contador-inc"></div></h2>
              <hr>
            </div>
            <div dragable class="filter-cont">
              <button id="order" value="asc" onclick="ordenarArriba(); obtenerNecesidades()" class="filter-cont-bt"><i class="bi bi-sort-alpha-down"></i></button>
              <select class="filter-cont-select" onchange="obtenerNecesidades()" name="" id="filter-orderby">
                <option selected value="fecha_solicitud">Fecha de solicitud</option>
                <option value="id">Nombre</option>
                <option value="fecha_limite">Fecha limite</option>
              </select>
              <label for="filtrarNivel" class="filter-cont-label"><i class="bi bi-stack"></i></label>
              <select class="filter-cont-select" onchange="obtenerNecesidades()" name="" id="filtrarNivel">
                <option selected value="todos">Todos</option>
                <option value="1">Nivel 1</option>
                <option value="2">Nivel 2</option>
                <option value="3">Nivel 3</option>
                <option value="4">Nivel 4</option>
              </select>
              <label for="buscar" class="filter-cont-bt"><i class="bi bi-search"></i></label>
              <input type="text" onkeyup="obtenerNecesidades()" id="buscar" class="filter-cont-select" placeholder="Escribe aqui para buscar...">
              
              <!-- <button id="filtrar" onclick="verFiltros()" class="filter-cont-bt"><i class="bi bi-funnel"></i>  Filtrar</button> -->
              <div id="filtros" class="filtros">
                <label for="tipo-filter">Tipo:</label>
                <select name="tipo-filter" onchange="obtenerNecesidades()" id="tipo-filter">
                  <option value="" selected disabled>Elige una opción...</option>
                  @foreach ($tipo as $ti)
                    <option value="{{$ti->id}}">{{$ti->name}}</option>
                  @endforeach
                </select>
                <label for="urgencia-filter">Urgencia:</label>
                <select name="urgencia-filter" id="urgencia-filter">
                  <option value="" selected disabled>Elige una opción...</option>
                </select>
                <label for="solicitante-filter">Solicitante:</label>
                <select name="solicitante-filter" id="solicitante-filter">
                  <option value="" selected disabled>Elige una opción...</option>
                </select>             
              </div>
            </div>
            <span id="respuestatxt" style="display: none;"></span>
            <div id="cont-necesidades">
            @if (count($nec)==0)
              <div class="mensaje-no-nec"><i class="bi bi-info-circle"></i> No hay necesidades abiertas</div>
            @else
            @foreach ($nec as $necesidad)
              <div class='card' onclick="redirigirNecesidad({{$necesidad->id}})" id='incidencia-abierta' >
                  <div class='card-body'>
                      <h4> NEC_{{$necesidad->id}} | {{$necesidad->titulo}} <span class="etiqueta-nivel-{{$necesidad->nivel}}">Nivel {{$necesidad->nivel}}</span> @if($necesidad -> urgencia==4) <span class="etiqueta-urgente">URGENTE</span> @endif</h4>
                      <div class='nec-cont'>
                        <span>{!!nl2br($necesidad->descripcion)!!}</span>
                        <div class='fechacont'>
                          <h5>Fecha petición</h5>
                          <p>{{$necesidad->fecha_solicitud}}</p>
                        </div>
                        <div class='fechacont'>
                          <h5>Fecha limite</h5>
                          <p>@if($necesidad->fecha_limite<date("Y-m-d")) <span style="margin-left: 0px;" title="A superado su fecha limite" class="etiqueta-urgente"><i style="color:#eb4034;" class="bi bi-alarm"></i> {{$necesidad->fecha_limite}}</span> @elseif($necesidad->fecha_limite==date("Y-m-d")) <span style="margin-left: 0px;" title="El limite acaba hoy" class="etiqueta-urgente-amarillo"><i style="" class="bi bi-alarm"></i> {{$necesidad->fecha_limite}}</span> @else {{$necesidad->fecha_limite}} @endif</p>
                        </div>
                        <div class='nec-bt-cont'>
                          <button class='bt-resolver' onclick="resolver({{$necesidad->id}});event.stopPropagation(); disableButton('resolver')" id="resolver"><i title="Pendiente" style="margin-right: 5px;" class="bi bi-hourglass"></i> Marcar como pendiente</button>
                        </div>
                      </div>
                  </div>
              </div>
            @endforeach
            @endif
            </div>
        </article>
    </div>
    <script>
    
      function redirigirNecesidad(id){
        window.location.href="necesidad?id="+id
      }

      function insertInteraccion(id_nec){
        if (document.getElementById('respuestatxt').value==""){
          errorWindowShow("error-text");
        }
        else{
            let data={
              'id_inc': id_nec,
              'mensaje': document.getElementById('respuestatxt').value
            }
            fetch("{{route('insertInteraccion')}}", {
              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){
          })
          }
          
        }

      function resolver(id_nec){

        var estado = 2;
        let data={
        'id': id_nec,
        'estado': estado,
        }

        fetch("{{route('cambiarEstado')}}", {
            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){
        
        })
        
        fetch("{{route('cambiarResponsable')}}", {
            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){
          location.reload() 
        })
      }

      function verFiltros(){
        document.getElementById("filtros").style.display="flex";
        document.getElementById("filtrar").innerHTML='<i class="bi bi-funnel-fill"></i>  Filtrar';
        document.getElementById("filtrar").style.fontWeight="bold";
        document.getElementById("filtrar").setAttribute("onclick", "ocultarFiltros(); obtenerNecesidades()");
        document.getElementById("filtrar").value=1;
      }

      function ocultarFiltros(){
        document.getElementById("filtros").style.display="none";
        document.getElementById("filtrar").innerHTML='<i class="bi bi-funnel"></i>  Filtrar';
        document.getElementById("filtrar").style.fontWeight="normal";
        document.getElementById("filtrar").setAttribute("onclick", "verFiltros()");
        document.getElementById("filtrar").value=0;
        document.getElementById("tipo-filter").value="";
      }

      function ordenarArriba(){
        document.getElementById("order").innerHTML='<i class="bi bi-sort-alpha-up"></i>';
        document.getElementById("order").setAttribute("onclick", "ordenarAbajo(); obtenerNecesidades()");
        document.getElementById("order").value="desc"
      }

      function ordenarAbajo(){
        document.getElementById("order").innerHTML='<i class="bi bi-sort-alpha-down"></i>';
        document.getElementById("order").setAttribute("onclick", "ordenarArriba(); obtenerNecesidades()");
        document.getElementById("order").value="asc"
      }

      obtenerNecesidades()
      function obtenerNecesidades(){
        document.getElementById("contador-inc").innerHTML = document.getElementById('cont-necesidades').innerHTML ='<div class="d-flex justify-content-center" style="margin-top: 50px; font-size: 12px;"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>'

        busqueda=document.getElementById("buscar").value;
        orderby=document.getElementById("filter-orderby").value;
        order=document.getElementById("order").value;
        filtrarNivel=document.getElementById("filtrarNivel").value;
        tipo=document.getElementById("tipo-filter").value;
        urgencia=document.getElementById("urgencia-filter").value;
        let data={
        'busqueda': busqueda,
        'orderby': orderby,
        'order': order,
        'filtrarNivel': filtrarNivel,
        'tipo': tipo,
        'urgencia': urgencia
        }
        fetch("{{route('obtenerNecesidadesAbiertas')}}", {
                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){
                contenidoNecesidades = ``
                rol="{{Auth::user()->rol}}"
                document.getElementById("contador-inc").innerHTML=result.nec.length;
                if(result.nec.length<1){
                    document.getElementById('cont-necesidades').innerHTML =  `<div class="mensaje-no-nec"><i class="bi bi-info-circle"></i> No hay resultados </div>`;
                }
                else{
                    result.nec.forEach(necesidad=>{
                        if(necesidad.estado=="1"){
                            icon=`<i title="Abierta" style="color: #6bbac0bb;" class="bi bi-ticket"></i>`
                        }
                        else if(necesidad.estado=="2"){
                            icon=`<i title="Pendiente" style="color: #c06b6bbb;" class="bi bi-hourglass"></i>`
                        }
                        else if(necesidad.estado=="3"){
                            icon=`<i title="Resuelta" style="color: #c08e6bbb;" class="bi bi-check"></i>`
                        }
                        else{
                            icon=`<i title="Cerrada" style="color: #8bc06bbb;" class="bi bi-check2"></i>`
                        }
                        boton=""
                        if(rol=="admin"){
                            if(necesidad.estado_name=="Pendiente"){
                            boton=`<button onclick="cambiarEstado(${necesidad.id}, 3)" class="cambiar-a-resuelta">Marcar como resuelta</button>`
                            }
                        }
                        else{
                            if(necesidad.estado_name=="Resuelta"){
                            boton=`<button onclick="cambiarEstado(${necesidad.id}, 4)" class="cambiar-a-cerrada">Marcar como cerrada</button>`
                            }
                        }
                        f_limite=""
                        if(necesidad.fecha_limite<'{{date("Y-m-d")}}'){
                            f_limite=`<span style="margin-left: 0px;" title="A superado su fecha limite" class="etiqueta-urgente"><i style="color:#eb4034;" class="bi bi-alarm"></i> ${necesidad.fecha_limite}</span>`
                        }
                        else if(necesidad.fecha_limite=='{{date("Y-m-d")}}'){
                            f_limite=`<span style="margin-left: 0px;" title="El limite acaba hoy" class="etiqueta-urgente-amarillo"><i style="" class="bi bi-alarm"></i> ${necesidad.fecha_limite}</span>`
                        }
                        else{
                            f_limite=necesidad.fecha_limite
                        }

                        etiquetas=`<span class="etiqueta-nivel-${necesidad.nivel}">Nivel ${necesidad.nivel}</span> `

                        if(necesidad.urgencia==4){
                            etiquetas+=` <span class="etiqueta-urgente">URGENTE</span>`
                        }
                        
                        contenidoNecesidades += `<div class='incidencia-card' onclick='redirigirNecesidad(${necesidad.id})'>
                        <div class="incidencia-card-header">
                            <div class="incidencia-card-header-icon">
                                ${icon}
                            </div>
                            <div class="incidencia-card-header-title">
                                NEC_${necesidad.id} | ${necesidad.titulo}
                            </div>
                            <div class="incidencia-card-header-right">
                                ${etiquetas}
                            </div>
                        </div>
                        <div class='incidencia-card-body'>
                            <div class="incidencia-card-body-left">

                            </div>
                            <div class="incidencia-card-body-center">
                                ${necesidad.descripcion.replaceAll("\n","</br>")}
                            </div>
                            <div class="incidencia-card-body-right">
                                <span><b>Solicitante: </b>${necesidad.solicitante_name} ${necesidad.solicitante_lastname}</span>
                                <br>
                                <span><b>Fecha peticion: </b>${necesidad.fecha_solicitud.slice(0,16)}</span>
                                <br>
                                <span><b>Fecha Limite: </b>${f_limite}</span>
                                <br>
                                <span><b>Tipo: </b>${necesidad.tipo_name}</span>
                                <br>
                                <span><b>Proyecto: </b>${necesidad.proyecto_name}</span>
                                <div class='incidencia-card-body-right-bt-cont'>
                                ${boton}
                                </div>
                            </div>
                        </div>
                    </div>`

                    })
            
            
                    document.getElementById('cont-necesidades').innerHTML =  contenidoNecesidades;
                }
            })
            .catch(function (error) {
              console.log(error)
            });
      }
    </script>
@endsection