@extends('layouts.app')

@section('content')
<div class="ind">
<div class="loader-back" id="loader-back">
  <div class="loader" id="loader"></div>
</div>
        <article>
            <div class="titlepag">
              <h2>Mis incidencias</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_limite">Fecha limite</option>
                <option value="fecha_solicitud">Fecha de solicitud</option>
                <option value="id">Nombre</option>
              </select>
              <label for="filtrarEstado" class="filter-cont-label"><i class="bi bi-filter"></i></label>
              <select class="filter-cont-select" onchange="obtenerNecesidades()" name="" id="filtrarEstado">
                <option selected value="todos">Todos</option>
                <option value="1">Abiertas</option>
                <option value="2">Pendiente</option>
                <option value="3">Resuelta</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-label"><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>
            <div id="cont-necesidades">
            @if (count($nec)==0)
              <div class="mensaje-no-nec"><i class="bi bi-info-circle"></i> No tienes ninguna necesidad @if (Auth::user()->rol=="admin")asignada, mira las necesidades<a href="{{route('abiertas')}}" style="margin-left:8px;"> abiertas</a>@endif</div>
            @else
            @endif
            </div>
        </article>
    </div>
    <script>
    
      function redirigirNecesidad(id){
        window.location.href="necesidad?id="+id
      }

      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"
      }

      function cambiarEstado(id_nec, estado){
        document.getElementById("loader-back").style.display="block"
        let data={
            'id': id_nec,
            'estado': estado,
        }

        if(estado==2){
        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){

        })
        }
      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){
          location.reload()
        })
      }
      
    obtenerNecesidades()

    function obtenerNecesidades(){
        document.getElementById('cont-necesidades').innerHTML ='<div class="d-flex justify-content-center" style="margin-top: 50px;"><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;
        filtrarEstado=document.getElementById("filtrarEstado").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,
            'filtrarEstado': filtrarEstado,
            'filtrarNivel': filtrarNivel,
            'tipo': tipo,
            'urgencia': urgencia
        }
        fetch("{{route('obtenerNecesidades')}}", {
                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 = ``
                console.log(result.nec.length)
                rol="{{Auth::user()->rol}}"
                if(result.nec.length<1){
                    document.getElementById('cont-necesidades').innerHTML =  `<div class="mensaje-no-nec"><i class="bi bi-info-circle"></i> No tienes ninguna necesidad </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