@extends('layouts.app')

@section('content')
<div class="ind">
        <article>
            <div class="titlepag">
              <h2>Incidencias del departamento</h2>
              <hr>
            </div>
            <div dragable class="filter-cont">
              <button id="order" value="desc" 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-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>
            <div id="cont-necesidades">

            </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="asc"
      }

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

      function cambiarEstado(id_nec, estado){
        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('obtenerNecesidadesDepart')}}", {
                    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