@extends('layouts.app')

@section('content')
<div class="ind">
        <article>
            <div class="titlepag">
              <h2>Historico</h2>
              <hr>
            </div>
            <div dragable class="filter-cont">
              <button id="order" value="desc" onclick="ordenarArriba(); obtenerHistorico()" class="filter-cont-bt"><i class="bi bi-sort-alpha-down"></i></button>
              <select class="filter-cont-select" onchange="obtenerHistorico()" 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="obtenerHistorico()" name="" id="filtrarEstado">
                <option selected value="todos">Todos</option>
                <option value="4">Cerrada</option>
                <option value="5">Cancelada</option>
              </select>
              <label for="buscar" class="filter-cont-label"><i class="bi bi-search"></i></label>
              <input type="text" onkeyup="obtenerHistorico()" id="buscar" class="filter-cont-select" placeholder="Escribe aqui para buscar...">
            </div>
            <table class="main_table">
                <thead>
                    <tr>
                        <th>Necesidad</th>
                        <th>Fecha petición</th>
                        <th>Fecha limite</th>
                        <th>Responsable petición</th>
                        <th>Responsable cambio</th>
                    </tr>
                </thead>
                <tbody id="cont-necesidades">
                    @foreach ($nec as $necesidad)
                        <tr style="cursor: pointer; @if($necesidad->estado==5)text-decoration: line-through;@endif" onclick="window.location.href='necesidad?id={{$necesidad->id}}'">
                            <td>NEC_{{$necesidad->id}} | {{$necesidad->titulo}}</td>
                            <td>{{$necesidad->fecha_solicitud}}</td>
                            <td>{{$necesidad->fecha_limite}}</td>
                            <td>{{$necesidad->user_solicitante_name}} {{$necesidad->user_solicitante_lastname}}</td>
                            <td>{{$necesidad->user_responsable_name}} {{$necesidad->user_responsable_lastname}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </article>
    </div>
    <script>

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

        function obtenerHistorico(){
        document.getElementById('cont-necesidades').innerHTML ='<div class="d-flex justify-content-center" style="margin-top: 100px;"><div class="loader-dark" id="loader"></div></div>'

        busqueda=document.getElementById("buscar").value;
        orderby=document.getElementById("filter-orderby").value;
        order=document.getElementById("order").value;
        filtrarEstado=document.getElementById("filtrarEstado").value;
        let data={
        'busqueda': busqueda,
        'orderby': orderby,
        'order': order,
        'filtrarEstado': filtrarEstado,
        }
        fetch("{{route('obtenerHistorico')}}", {
                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){
                texto = ``
                rol="{{Auth::user()->rol}}"
                
                result.nec.forEach(necesidad=>{
                    estilo="cursor: pointer; "
                    if(necesidad.estado==5){
                        estilo+="text-decoration: line-through; "
                    }

                    if(necesidad.user_solicitante_name===null){
                        solicitante=""
                    }
                    else{
                        solicitante=necesidad.user_solicitante_name + " " + necesidad.user_solicitante_lastname
                    }

                    if(necesidad.user_responsable_name===null){
                        responsable=""
                    }
                    else{
                        responsable=necesidad.user_responsable_name + " " + necesidad.user_responsable_lastname
                    }

                    texto+=`
                    <tr style="${estilo}" onclick="window.location.href='necesidad?id=${necesidad.id}'">
                        <td>NEC_${necesidad.id} | ${necesidad.titulo}</td>
                        <td>${necesidad.fecha_solicitud.slice(0,19)}</td>
                        <td>${necesidad.fecha_limite}</td>
                        <td>${solicitante}</td>
                        <td>${responsable}</td>
                    </tr>`
                })
            
            document.getElementById('cont-necesidades').innerHTML =  texto;
            })
            .catch(function (error) {
              console.log(error)
            });
      }
    </script>
@endsection