@extends('layouts.app')

@section('content')
@if($necesidad=="No existe")
<div class="alert alert-danger" style="margin:30px;" role="alert">
    No existe tal necesidad
</div>
@else


<div class="back-media" id="back-media">
    <div class="media-cont">
        <div class="media-cont-header">
            <span class="media-cont-header-left" id="media-cont-header-left"></span>
            <div class="media-cont-header-right"><button onclick="cerrarMedia()" class="media-close-bt"><i
                        class="bi bi-x-lg"></i></button>
            </div>
        </div>
        <div class="media-cont-body" id="media-cont-body">
            <div class="text-center">
                <div class="spinner-border" style="z-index: 11; color:white;" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>
<button class="opciones-nec-bt" id="opciones-nec-bt" onclick="showOpciones()"><i class="bi bi-three-dots-vertical"></i></button>
<div class="opciones-nec-cont" id="opciones-nec-cont">
    <button style="margin-left: 60px;" class="opciones-nec-cont-bt" onclick="exportIncidencia()"><i class="bi bi-download"></i> Exportar</button>
    @if(Auth::user()->rol=="admin")<button class="opciones-nec-cont-bt" id="bt-nivel"><i class="bi bi-layers"></i>Cambiar nivel</button>@endif
    @if($necesidad->estado!=5 && $necesidad->solicitante_username==Auth::user()->username)<button class="opciones-nec-cont-bt" id="cancel-bt" onclick="cancelarNec(); disableButton('cancel-bt')"><i class="bi bi-x-octagon"></i> Cancelar</button>@endif
</div>
<div class="cambiar-nivel-cont" id="cambiar-nivel-cont">
    @if($necesidad->nivel!=1)<buttton onclick="escalarNec(1)" class="cambiar-nivel-bt">Nivel 1</buttton>@endif
    @if($necesidad->nivel!=2)<buttton onclick="escalarNec(2)" class="cambiar-nivel-bt">Nivel 2</buttton>@endif
    @if($necesidad->nivel!=3)<buttton onclick="escalarNec(3)" class="cambiar-nivel-bt">Nivel 3</buttton>@endif
    @if($necesidad->nivel!=4)<buttton onclick="escalarNec(4)" class="cambiar-nivel-bt">Nivel 4</buttton>@endif
    <button class="cambiar-nivel-bt cancelar" onclick="closeCambiarNivel()">Cancelar</button>
    <script>
        document.getElementById("bt-nivel").addEventListener("click", function() {
            var divEmergente = document.getElementById("cambiar-nivel-cont");
            divEmergente.style.display = "flex";

            // Obtener la posición del click
            var clickX = event.clientX;
            var clickY = event.clientY;

            // Establecer la posición del div emergente encima del click
            divEmergente.style.left = (clickX) + "px"; // Ajustar el valor según sea necesario
            divEmergente.style.top = (clickY - divEmergente.offsetHeight) + "px"; // Ajustar el valor según sea necesario

            console.log(divEmergente.offsetHeight)
            console.log(clickY - divEmergente.offsetHeight)
        });

        function closeCambiarNivel(){
            var divEmergente = document.getElementById("cambiar-nivel-cont");
            divEmergente.style.display = "none";
        }
    </script>
</div>
<div class="ind">
    <article>
        @if (empty($necesidad))
            <div class="alert alert-danger" role="alert">
                No existe tal necesidad
            </div>
        @elseif (0==1)
            <div class="alert alert-danger" role="alert">
                No tienes acceso a esta necesidad
            </div>
        @else
        <div class="titlepag">
            <h2 style="display: flex; flex-direction: row; align-items: center;"><button class="bt-arrow" type="button" onclick="volverAtras()"><i class="bi bi-arrow-left"></i></button>NEC_{{$necesidad -> id}} - {{$necesidad -> titulo}}<div id="estado_bt" class="estado-{{$necesidad -> estado_name}}">{{$necesidad -> estado_name}}</div>
                <div id="estados" class="cambiar-estado">
                    <button class="estado-Abierta" type="button" onclick="cambiarEstado(1)">Abierta</button>
                    <button class="estado-Pendiente" type="button" onclick="cambiarEstado(2)">Pendiente</button>
                    <button class="estado-Resuelta" type="button" onclick="cambiarEstado(3)">Resuelta</button>
                    <button class="estado-Cerrada" type="button" onclick="cambiarEstado(4)">Cerrada</button>
                </div>
            </h2>
            <hr>
        </div>
        <div class="nec-ind-cont">
            <div class="mens-cont">
                <form class="respuesta-cont" onsubmit="disableButton('enviar-interaccion')" id="respuesta-cont" action="{{route('insertInteraccion')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="respuesta-cont-header" id="tools">
                        <div class="respuesta-cont-header-title">
                            Respuesta
                        </div>
                        <div class="respuesta-cont-header-bt-cont">
                            <button onclick="cancelar()" type="reset" class="tool-cancelar">Cancelar</button>
                            <button type="submit" id="enviar-interaccion" class="tool-guardar"><i class="bi bi-send-fill"></i></button>
                        </div>
                    </div>
                    <div class="respuesta-cont-body">
                        <textarea onclick="editar()" ondragover="editar()" class="respuesta form-control" style="border: none; border-bottom: 1px solid #bdc0c2;" placeholder="Escribe aqui para responder..." id="respuestatxt" name="respuestatxt"></textarea>
                    </div>
                    <div class="respuesta-cont-footer" id="archivo-chooser">
                        <label for="formFileMultiple" class="form-label"></label>
                        <input class="form-control desc-archivo" type="file" id="archivo" multiple name="archivo[]" onchange="showSelectedFiles()">
                        <span id="adj_archivo"></span>
                    </div>

                    <input type="text" name="id_inc" value="{{$necesidad -> id}}" style="display:none" />
                                        
                </form>
                <div id="menss">
                @foreach ($interaccion as $int)
                <script>
                    obtenerAdjuntos({{$int -> id}})

                    function obtenerAdjuntos(id_int) {
                        elemento_adj = null

                        let data = {
                            'id_int': id_int
                        }
                        fetch("{{route('obtenerAdjuntos')}}", {
                                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) {
                                elemento_adj = ``;
                                if (result.count == 0) {
                                    elemento_adj = ``;
                                } else {
                                    elemento_adj += `<div class='card-footer row-direction'>`;
                                    result.archivo_interaccion.forEach(archivo => {
                                        filename_moztuta = archivo.filename.slice(0, 10) + "...";
                                        extension = getFileExtension(archivo.filename);
                                        ver_bt = ``
                                        if (img_extensions.includes(extension.toLowerCase())) {
                                            ver_bt = `verMedia(${archivo.id}, 'interaccion')`
                                        } else if (video_extensions.includes(extension.toLowerCase())) {
                                            ver_bt = `verMedia(${archivo.id}, 'interaccion')`
                                        } else if (audio_extensions.includes(extension.toLowerCase())) {
                                            ver_bt = `verMedia(${archivo.id}, 'interaccion')`
                                        } else if (extension == "pdf") {
                                            ver_bt = `verMedia(${archivo.id}, 'interaccion')`
                                        } else {
                                            ver_bt = `abrirArchivo(${archivo.id})`
                                        }
                                        tamaño = bytesToSize(archivo.size)
                                        console.log(archivo.size)
                                        elemento_adj += `
                                            <div onclick="${ver_bt}" class="archivo-cont">
                                            <i class="bi bi-filetype-${extension} icon"></i>
                                            <div class="archivo-cont-body">
                                                <span title="${archivo.filename}">
                                                ${filename_moztuta}
                                                </span>
                                                <span style="font-size: 12px; color: #adadad;">
                                                ${tamaño}
                                                </span>
                                            </div>
                                                <button onclick="descargar(${archivo.id});event.stopPropagation()">
                                                <i class="bi bi-download"></i>
                                                </button>
                                            </div>`;
                                    })
                                    elemento_adj += `</div>`;
                                    document.getElementById('card-' + id_int).innerHTML += elemento_adj;
                                }
                            })

                    }
                </script>
                @if ($int->mensaje == "El estado cambio a resuelta")
                <div class='card-cambio' style="background-color: #c08e6b2c;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #62502f; font-size: 16px;">{{$int->momento}} | {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @elseif ($int->mensaje == "El estado cambio a abierta")
                <div class='card-cambio' style="background-color: #6bbac02b;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #2f6062; font-size: 16px;">{{$int->momento}} | {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @elseif ($int->mensaje == "El estado cambio a pendiente")
                <div class='card-cambio' style="background-color: #c06b6b35;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #622f2f; font-size: 16px;">{{$int->momento}} | {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @elseif ($int->mensaje == "El estado cambio a cerrada")
                <div class='card-cambio' style="background-color: #8cc06b31;">
                    <div class='interaccion-cont'>
                        <span class="interac-time"
                            style="color: #44622f; font-size: 16px;">{{substr($int->momento, 0, -4)}} |
                            {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @elseif ($int->tipo == 6)
                <div class='card'>
                    <div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                            <span class="interac-time" style="color: #44622f; font-size: 16px;"><i
                                    class="bi bi-node-plus"></i> {{substr($int->momento, 0, -4)}} | {!!nl2br($int->mensaje)!!}</span>
                        </div>
                    </div>
                </div>
                @elseif ($int->tipo == 7)
                <div class='card'>
                    <div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                            <span class="interac-time" style="color: #5c0000; font-size: 16px;"><i
                                    class="bi bi-node-minus"></i> {{substr($int->momento, 0, -4)}} | {!!nl2br($int->mensaje)!!}</span>
                        </div>
                    </div>
                </div>
                @elseif ($int->tipo == 8)
                <div class='card'>
                    <div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                            <span class="interac-time" style="color: #5c0000; font-size: 16px;"><i
                                    class="bi bi-x-octagon"></i> {{substr($int->momento, 0, -4)}} | {!!nl2br($int->mensaje)!!}</span>
                        </div>
                    </div>
                </div>
                @elseif($int->tipo == 9)
                <div class='card-cambio' style="background-color: rgba(0, 183, 255, 0.123);">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: rgb(0, 118, 187); font-size: 16px;">{{substr($int->momento, 0, -4)}} | {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @elseif($int->tipo == 10)
                <div class='card-cambio' style="background-color: #e3edda;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #698a4c; font-size: 16px;">{{substr($int->momento, 0, -4)}} | {!!nl2br($int->mensaje)!!}</span>
                    </div>
                </div>
                @else
                <div class="loader-bg" id="loader-bg">
                    <div class="loader" id="loader"></div>
                </div>

                <div class='card' id="card-{{$int->id}}">
                    <div class="card-header">
                        <h4 title="{{$int->creador_name}} {{$int->creador_apellido}}">{{$int->creador_name}}
                            {{$int->creador_apellido}}</h4>
                        <span class="interac-time">{{substr($int->momento, 0, -4)}}</span>
                    </div>
                    @if($int->mensaje!="")
                    <div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                            <span>{!!nl2br($int->mensaje)!!}</span>
                        </div>
                    </div>
                    @endif
                </div>
                @endif

                @endforeach
                </div>
                <div class='card' id="desc-nec">
                    <div class="card-header">
                        <h4 title="">{{$necesidad -> solicitante_name}} {{$necesidad -> solicitante_lastname}}</h4>
                        <span class="interac-time">{{substr($necesidad->fecha_solicitud, 0, -4)}}</span>
                    </div>
                    <div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                            <span>{!!nl2br($necesidad -> descripcion)!!}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nec-detalles-cont">
                <div class="nec-detalles">
                    <div class="det-header">
                        <h3>Detalles </h3><span id="etiqueta-nivel" class="etiqueta-nivel-{{$necesidad->nivel}}">Nivel {{$necesidad->nivel}}</span>
                    </div>
                    <hr>
                    <b>Responsable:</b>
                    <div class="participantes-div">
                        @if (isset($necesidad -> responsable_name))
                        <div class="responsable-cont" style="padding-right: 10px;">
                            <i class="bi bi-person-circle icono"></i>
                            <span>{{$necesidad -> responsable_name}} {{$necesidad -> responsable_lastname}}</span>
                        </div>
                        @else
                            No hay responsable
                        @endif
                    </div>
                    <b>Fecha de creacion:</b> {{substr($necesidad->fecha_solicitud, 0, -7)}}<br>
                    <b>Fecha de limite:</b> @if($necesidad->fecha_limite<date("Y-m-d")) <span style="margin-left: 0px; align-self: flex-start;" 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
                        <b>Solicitante:</b>
                        <div class="participantes-div">
                            @if (isset($necesidad -> solicitante_name))
                                <div class="responsable-cont" style="padding-right: 10px;">
                                    <i class="bi bi-person-circle icono"></i>
                                    <span>{{$necesidad -> solicitante_name}} {{$necesidad -> solicitante_lastname}}</span>
                                </div>
                            @else
                                No hay responsable
                            @endif
                        </div>
                        <b>Urgencia:</b> @if($necesidad->name=="URGENTE")<span style="margin-left: 0px;" class="etiqueta-urgente">URGENTE</span> @else {{$necesidad -> name}}<br> @endif
                        <b>Proyecto:</b>
                        <div class="participantes-div">
                            <div class="responsable-cont" style="padding-right: 10px;">
                                <i class="bi bi-bezier2 icono"></i>
                                <span>{{$necesidad -> proyecto_name}} </span>
                            </div>
                        </div>
                        <b>Tipo de necesidad:</b> {{$necesidad -> tipo_name}}<br>
                        <b>Participantes:</b>
                        <div class="participantes-div">
                            @foreach($participantes as $participante)
                                <div class="responsable-cont" style="margin-bottom: 10px">
                                    <i class="bi bi-person-circle icono"></i>
                                    <span>{{$participante -> name}} {{$participante -> lastname}}</span>
                                    <button id="elimPart{{$participante -> id}}" onclick="eliminarParticipantes('{{$participante -> id}}')"><i class="bi bi-x"></i></button>
                                </div>
                            @endforeach
                            <button onclick="showPersonas()" class="añadir-participante"><i class="bi bi-person-fill-add"></i></button>
                        </div>

                        <div class="add-part-cont" id="add-part-cont">
                            <div class="add-part-contheader" id="add-part-contheader">
                                <h2>Añadir participantes</h2>
                                <button onclick="closePersonas()"><i class="bi bi-x-lg"></i></button>
                            </div>
                            <div class="add-part-contbody">
                                <h2>Usuarios disponibles:</h2>
                                <hr>
                                <div class="participantes-disponibles" id="participantes-disponibles">
                                    @if(isset($users_disponibles))
                                    @foreach($users_disponibles as $user)

                                    <div id="{{$user->id}}" value="{{$user->id}}" draggable="true" class="responsable-cont" ondragstart="drag(event)">
                                        <i class="bi bi-person-circle icono"></i>
                                        <span>{{$user -> name}} {{$user -> lastname}}</span>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                                <h2>Usuarios añadidos:</h2>
                                <hr>
                                <div class="participantes-añadidos" id="participantes-añadidos" ondrop="drop(event)" ondragover="allowDrop(event)">

                                </div>
                            </div>
                            <div class="add-part-contfooter">
                                <button class="add-part-bt" id="add-part-bt" onclick="añadirPersonas(), disableButton('add-part-bt')">Añadir</button>
                            </div>
                        </div>
                </div>
                @if (Auth::user()->username==$necesidad->responsable_username)
                    @if ($necesidad -> estado_name=="Pendiente")
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(3); disableButton('bt-cambiarEstado')" class="cambiar-a-resuelta">Marcar como resuelta</button>
                    @elseif ($necesidad -> estado_name=="Resuelta")
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(4); disableButton('bt-cambiarEstado')" class="cambiar-a-cerrada">Marcar como cerrada</button>
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(1); disableButton('bt-cambiarEstado')" class="cambiar-a-abierta">Reabrir incidencia</button>
                    @endif
                    @if(Auth::user()->username==$necesidad->solicitante_username)
                        @if($necesidad -> estado_name=="Cerrada")
                            <button id="bt-cambiarEstado" onclick="cambiarEstado(1); disableButton('bt-cambiarEstado')" class="cambiar-a-abierta">Reabrir incidencia</button>
                        @endif
                    @endif
                @elseif(Auth::user()->username==$necesidad->solicitante_username)
                    @if ($necesidad -> estado_name=="Resuelta")
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(4); disableButton('bt-cambiarEstado')" class="cambiar-a-cerrada">Marcar como cerrada</button>
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(1); disableButton('bt-cambiarEstado')" class="cambiar-a-abierta">Reabrir incidencia</button>
                    @elseif($necesidad -> estado_name=="Cerrada")
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(1); disableButton('bt-cambiarEstado')" class="cambiar-a-abierta">Reabrir incidencia</button>
                    @endif
                @endif
                @if(Auth::user()->rol=="admin")
                    @if($necesidad -> estado_name=="Abierta")
                        <button id="bt-cambiarEstado" onclick="cambiarEstado(2); disableButton('bt-cambiarEstado')" class="cambiar-a-pendiente">Marcar como pendiente</button>
                    @endif
                @endif
            </div>
        </div>
        <div class="loader-back" id="loader-back">
            <div class="loader" id="loader"></div>
        </div>
        @endif
    </article>
    <div class="error-window" id="error-text">
        <div class="error-window-head">
            <div class="error-window-head-title">
                <span style="color: white;">Error</span>
            </div>
            <div class="error-window-head-bt">
                <button onclick="errorWindowHide('error-text')"><i class="bi bi-x-lg"></i></button>
            </div>
        </div>
        <div class="error-window-body">
            <div class="error-window-body-alert">
                <i class="bi bi-exclamation-diamond"></i>
                <span>Escribe algun mensaje</span>
            </div>
        </div>
    </div>
</div>
@endif

<script>

    let plant_c = 0
    var id_nec
    window.onload = function() {
        const UrlParam = new URLSearchParams(window.location.search);
        id_nec = UrlParam.get('id');
        obtenerAdjuntosNec(id_nec)
    }

    function obtenerAdjuntosNec(id_nec) {
        elemento_adj = null

        let data = {
            'id_nec': id_nec
        }
        fetch("{{route('obtenerAdjuntosNec')}}", {
                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) {
                elemento_adj = ``;
                if (result.count == 0) {
                    elemento_adj = ``;
                } else {


                    elemento_adj += `<div class='card-footer row-direction'>`;
                    result.archivo_necesidad.forEach(archivo => {
                        filename_moztuta = archivo.filename.slice(0, 10) + "...";
                        extension = getFileExtension(archivo.filename);
                        ver_bt = ``
                        if (img_extensions.includes(extension)) {
                            ver_bt = `verMedia(${archivo.id}, 'necesidad')`
                        } else if (video_extensions.includes(extension)) {
                            ver_bt = `verMedia(${archivo.id}, 'necesidad')`
                        } else if (audio_extensions.includes(extension)) {
                            ver_bt = `verMedia(${archivo.id}, 'necesidad')`
                        } else if (extension == "pdf") {
                            ver_bt = `verMedia(${archivo.id}, 'necesidad')`
                        } else {
                            ver_bt = `abrirArchivo_nec(${archivo.id})`
                        }
                        tamaño = bytesToSize(archivo.size)
                        elemento_adj += `
                    <div onclick="${ver_bt}" class="archivo-cont">
                    <i class="bi bi-filetype-${extension} icon"></i>
                    <div class="archivo-cont-body">
                    <span title="${archivo.filename}">
                    ${filename_moztuta}
                    </span>
                    <span style="font-size: 12px; color: #adadad;">
                        ${tamaño}
                    </span>
                    </div>
                    <button onclick="descargar_nec(${archivo.id});event.stopPropagation()">
                        <i class="bi bi-download"></i>
                    </button>
                    </div>`;
                    })
                    elemento_adj += `</div>`;
                    document.getElementById('desc-nec').innerHTML += elemento_adj;
                }
            })
    }

    function getFileExtension(filename) {
        const extension = filename.split('.').pop();
        return extension;
    }

    function editar() {
        document.getElementById("tools").style.display = "flex";
        document.getElementById("archivo-chooser").style.display = "flex";
        document.getElementById("respuesta-cont").style.border = "rgba(0, 0, 0, 0.175) solid 1px";
        document.getElementById("respuesta-cont").style.padding = "10px";
        document.getElementById("respuesta-cont").style.marginBottom = "10px";
        document.getElementById("respuesta-cont").style.backgroundColor = "white";
        document.getElementById("respuestatxt").style.height = "200px";

        tinymce.init({
            selector: '#respuestatxt',
                plugins: ['advlist','autolink',
                'lists','link','image','charmap','searchreplace','visualblocks','fullscreen','insertdatetime','media','table','help','wordcount', 'emoticons'
                ],
                toolbar: 'undo redo | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify |' +
                'bullist numlist checklist outdent indent | removeformat | code table help',
                promotion: false,
                branding: false,
                statusbar: false,
                language: 'es',
        })

    }

    function cancelar() {
        tinymce.remove("#respuestatxt")
        document.getElementById("tools").style.display = "none";
        document.getElementById("respuesta-cont").style.background = "none";
        document.getElementById("archivo-chooser").style.display = "none";
        document.getElementById("respuesta-cont").style.border = "none";
        document.getElementById("respuesta-cont").style.padding = "0px";
        document.getElementById("respuesta-cont").style.marginBottom = "0px";
        document.getElementById("respuestatxt").style.height = "auto";
        document.getElementById("adj_archivo").innerHTML = "";
        document.getElementById("archivo").setAttribute("onclick", "adjuntar_archivo()");
    }

    function plantilla_credenciales() {
        document.getElementById("plantilla_c").innerHTML =
            "<table id='tabla-credenciales' class='table table-striped'><thead><th>Agente</th><th>Windows</th><th>Altitude</th><th>Email</th><th>Contraseña</th></thead><tbody><tr><td><input type='text' id='nombre'></td><td><input type='text' id='usr_windows'></td><td><input type='text' id='usr_altitude'></td><td><input type='email' id='usr_correo'></td><td><input type='text' id='pass'></td></tr></tbody></table>";
        document.getElementById("cred_bt").setAttribute("onclick", "eliminarPlantilla_c()");
        document.getElementById("cred_bt").style.backgroundColor = "#3233322e";
        plant_c = 1
    }

    function eliminarPlantilla_c() {
        document.getElementById("plantilla_c").innerHTML = "";
        document.getElementById("cred_bt").setAttribute("onclick", "plantilla_credenciales()");
        document.getElementById("cred_bt").style.backgroundColor = "#32333200";
        plant_c = 0
    }

    function adjuntar_archivo() {
        document.getElementById("adj_archivo").innerHTML = "<input type='file' name='archivo' id=''>";
        document.getElementById("arch_bt").setAttribute("onclick", "eliminar_archivo()");
        document.getElementById("arch_bt").style.backgroundColor = "#3233322e";
    }

    function eliminar_archivo() {
        document.getElementById("adj_archivo").innerHTML = "";
        document.getElementById("arch_bt").setAttribute("onclick", "adjuntar_archivo()");
        document.getElementById("arch_bt").style.backgroundColor = "#32333200";
    }

    function copiar(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
        }
    }

    function insertInteraccion() {
        if (document.getElementById('respuestatxt').value == "") {
            errorWindowShow("error-text");
        } else {
            if (plant_c == 1) {
                let nombre = document.getElementById('nombre').value;
                let usr_windows = document.getElementById('usr_windows').value;
                let usr_altitude = document.getElementById('usr_altitude').value;
                let usr_correo = document.getElementById('usr_correo').value;
                let pass = document.getElementById('pass').value;
                let data = {
                    'id_inc': id_nec,
                    'mensaje': document.getElementById('respuestatxt').value +
                        "\n <table id='tabla-credenciales' class='table table-striped'><thead><th>Agente</th><th>Windows</th><th>Altitude</th><th>Email</th><th>Contraseña</th></thead><tbody><tr><td>" +
                        nombre + "</td><td>" + usr_windows + "</td><td>" + usr_altitude + "</td><td>" + usr_correo +
                        "</td><td>" + pass + "</td></tr></tbody></table><button class=" + '"' + "bt-copy" + '"' +
                        " onclick=" + '"' + "copiar('tabla-credenciales')" + '"' + "><i class=" + '"' +
                        "bi bi-clipboard" + '"' + "></i></button>"
                }
                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) {

                    })
                    .catch(function(error) {
                        alert("ha habido un error");
                    });
            } 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) {})
            }
            document.getElementById("tools").style.display = "none";
            document.getElementById("respuesta-cont").style.border = "none";
            document.getElementById("respuesta-cont").style.padding = "0px";
            document.getElementById("respuesta-cont").style.marginBottom = "0px";
            document.getElementById("respuestatxt").style.height = "auto";
            document.getElementById("adj_archivo").innerHTML = "";
            document.getElementById("adj_archivo").style.display = "none"
            document.getElementById("plantilla_c").innerHTML = "";
            document.getElementById("respuestatxt").value = "";
            document.getElementById("arch_bt").setAttribute("onclick", "adjuntar_archivo()");
            document.getElementById("arch_bt").style.backgroundColor = "#32333200";
            document.getElementById("cred_bt").setAttribute("onclick", "plantilla_credenciales()");
            document.getElementById("cred_bt").style.backgroundColor = "#32333200";
            document.getElementById("respuesta-cont").style.background = "none";
            

        }




    }

    function cambiarEstadoBt_ver() {
        document.getElementById("estados").style.display = "flex";
        document.getElementById("estado_bt").setAttribute('onclick', 'cambiarEstadoBt_ocultar()');
    }

    function cambiarEstadoBt_ocultar() {
        document.getElementById("estados").style.display = "none";
        document.getElementById("estado_bt").setAttribute('onclick', 'cambiarEstadoBt_ver()');
    }

    function cambiarEstado(estado) {
        disableButton("bt-cambiarEstado")
        document.getElementById("loader-back").style.display = "block"
        if (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()
                })
        } else {
            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) {
                    location.reload()
                })
        }


    }

    function descargar(id_arch) {
        window.open("{{route('descargarArchivo')}}?id_arch=" + id_arch);
    }

    function abrirArchivo(id_arch) {
        window.open("{{route('abrirArchivo')}}?id_arch=" + id_arch);
    }

    function descargar_nec(id_arch) {
        window.open("{{route('descargarArchivoNec')}}?id_arch=" + id_arch);
    }

    function abrirArchivo_nec(id_arch) {
        window.open("{{route('abrirArchivoNec')}}?id_arch=" + id_arch);
    }

    function exportIncidencia() {
        window.open("{{route('exportNecesidad')}}?id={{$necesidad -> id}}");
    }

    function showSelectedFiles() {
        x = document.getElementById('archivo')
        document.getElementById('adj_archivo').innerHTML = ""
        for (var i = 0; i < x.files.length; i++) {
            var file = x.files[i];

            elemento_adj = "";
            filename_moztuta = file.name.slice(0, 10) + "...";
            extension = getFileExtension(file.name);
            tamaño = bytesToSize(file.size)
            elemento_adj += `
                <div class="archivo-cont">
                    <i class="bi bi-filetype-${extension} icon"></i>
                    <div class="archivo-cont-body">
                    <span title="${file.name}">
                    ${filename_moztuta}<br>
                    </span>
                    <span style="font-size: 12px; color: #adadad;">
                        ${tamaño}
                    </span>
                    </div>
                    <button onclick="eliminarArchivo(${i})">
                    <i class="bi bi-x"></i>
                    </button>
                </div>`;
            document.getElementById('adj_archivo').innerHTML += elemento_adj;
        }

        function getFileExtension(filename) {
            const extension = filename.split('.').pop();
            return extension;
        }
    }

    function eliminarArchivo(pos) {
        const input = document.getElementById('archivo');

        const files = Array.from(input.files);

        // Eliminar el archivo en la posición 0 (primer archivo)
        files.splice(pos, 1);

        // Crear una nueva lista de archivos sin el archivo eliminado
        const newFileList = new DataTransfer();
        files.forEach(file => newFileList.items.add(file));

        // Asignar la nueva lista de archivos al input file
        input.files = newFileList.files;
        showSelectedFiles()
    }



    img_extensions = ["ase", "art", "bmp", "blp", "cd5", "cit", "cpt", "cr2", "cut", "dds", "dib", "djvu", "egt", "exif",
        "gif", "gpl", "grf", "icns", "ico", "iff", "jng", "jpeg", "jpg", "jfif", "jp2", "jps", "lbm", "max", "miff",
        "mng", "msp", "nef", "nitf", "ota", "pbm", "pc1", "pc2", "pc3", "pcf", "pcx", "pdn", "pgm", "PI1", "PI2", "PI3",
        "pict", "pct", "pnm", "pns", "ppm", "psb", "psd", "pdd", "psp", "px", "pxm", "pxr", "qfx", "raw", "rle", "sct",
        "sgi", "rgb", "int", "bw", "tga", "tiff", "tif", "vtf", "xbm", "xcf", "xpm", "3dv", "amf", "ai", "awg", "cgm",
        "cdr", "cmx", "dxf", "e2d", "egt", "eps", "fs", "gbr", "odg", "svg", "stl", "vrml", "x3d", "sxd", "v2d", "vnd",
        "wmf", "emf", "art", "xar", "png", "webp", "jxr", "hdp", "wdp", "cur", "ecw", "iff", "lbm", "liff", "nrrd",
        "pam", "pcx", "pgf", "sgi", "rgb", "rgba", "bw", "int", "inta", "sid", "ras", "sun", "tga", "heic", "heif"
    ]
    audio_extensions = ["wav", "mp3", "gsm"]
    video_extensions = ["mp4", "mov", "avi"]
    embed_extensions = ["pdf"]

    function showOpciones() {
        document.getElementById("opciones-nec-cont").style.maxWidth = "1000px"
        document.getElementById("opciones-nec-bt").setAttribute("onclick", "hideOpciones(); closeCambiarNivel()")
        document.getElementById("opciones-nec-bt").style.transform = "rotate(450deg)"
    }

    function hideOpciones() {
        document.getElementById("opciones-nec-cont").style.maxWidth = "50px"
        document.getElementById("opciones-nec-bt").setAttribute("onclick", "showOpciones()")
        document.getElementById("opciones-nec-bt").style.transform = "rotate(0deg)"
    }

    function cancelarNec() {
        let data = {
            'id': {{$necesidad -> id}}
        }
        fetch("{{route('cancelarNec')}}", {
                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 escalarNec(nivel) {
        disableButton('bt-nivel')
        let data = {
            'id': {{$necesidad -> id}},
            'nivel': nivel
        }
        fetch("{{route('escalarNec')}}", {
                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 escalarHover() {
        document.getElementById("etiqueta-nivel").innerHTML = '<i class="bi bi-chevron-double-up"></i>'
    }

    function escalarNotHover() {
        document.getElementById("etiqueta-nivel").innerHTML = 'Nivel {{$necesidad->nivel}}'
    }

    function verMedia(id_archivo, tipo) {
        document.getElementById("media-cont-body").innerHTML = `
        <div class="text-center">
        <div class="spinner-border" style="z-index: 11; color:white;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        </div>
        `
        document.getElementById("media-cont-header-left").innerHTML = ``
        document.getElementById("back-media").style.display = "flex"
        let data = {
            'id_archivo': id_archivo,
            'tipo': tipo
        }
        fetch("{{route('obtenerArchivo')}}", {
                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) {
                if (result.filename) {
                    document.getElementById("media-cont-header-left").innerHTML = result.filename
                    extension = getFileExtension(result.filename)
                    if (img_extensions.includes(extension.toLowerCase())) {
                        txt = `<img src="/archivos/${result.filename}"/>`
                    } else if (video_extensions.includes(extension.toLowerCase())) {
                        txt = `<video src="archivos/${result.filename}" controls />`
                    } else if (audio_extensions.includes(extension.toLowerCase())) {
                        txt = `<audio controls src="archivos/${result.filename}"/>`
                    } else if (embed_extensions.includes(extension.toLowerCase())) {
                        txt =
                            `<iframe style="width: 100%; height: 100%;" src="/archivos/${result.filename}"></iframe>`
                    } else {
                        txt = `<span style="color: whitesmoke;">No se puede abrir este tipo de archivos</span>`
                    }

                } else {
                    txt = `<span style="color: whitesmoke;">No se pudo abrir este archivo</span>`
                }
                document.getElementById("media-cont-body").innerHTML = txt
            })
    }

    function cerrarMedia() {
        document.getElementById("back-media").style.display = "none"
        document.getElementById("media-cont-body").innerHTML = `
            <div class="text-center">
                <div class="spinner-border" style="z-index: 11; color:white;" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            `
        document.getElementById("media-cont-header-left").innerHTML = ``
    }
    

    function getFileExtension(filename) {
        const extension = filename.split('.').pop();
        return extension;
    }

    


    dragElement(document.getElementById("add-part-cont")); //elementua arrastratu

    function showPersonas() {
        document.getElementById("add-part-cont").style.display = "flex"; //lehiatila ageri
    }

    function closePersonas() {
        document.getElementById("add-part-cont").style.display = "none"; //lehiatila izkutatu
    }

    function allowDrop(ev) {
        ev.preventDefault(); //elementuak askatzeko gaitu
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id); //elementua mugitu eta datuak eskuratu
    }
    var personas = [] //hautatutako erabiltzaileak zehazteko array-a deklaratu
    function drop(ev) {
        ev.preventDefault();

        var data = ev.dataTransfer.getData("text");
        if (ev.target.id == "participantes-añadidos") { //erabiltzailea hautatutakoen karratura pasa
            clon = document.getElementById(data).cloneNode(true)
            element = document.getElementById(data) //erabiltzaile eskuragarrien karratura bueltatu
            document.getElementById("participantes-disponibles").removeChild(element)
            document.getElementById("participantes-añadidos").appendChild(clon)
            // document.getElementById("participantes-añadidos").innerHTML+=`<div id="cont_">` + document.getElementById("cont_"+data).innerHTML + `</div>`;
            // document.getElementById("cont_"+data).innerHTML=null
            document.getElementById(data).innerHTML += `<button id="bt_${data}"><i class="bi bi-x"></i></button>`
            personas.push(data) //array-era erabiltzailearen id-a gehitu
            posicion = personas.length - 1 //array-eko erabiltzailearen posizioa
            console.log(personas)
            document.getElementById("bt_" + data).setAttribute('onclick', 'eliminarPersona(' + posicion + ', ' + data +
                '); console.log(personas)') //x botoiaren onclick balioa zehaztu, behar diren parametroak adieraziz
        }
    }

    function eliminarPersona(pos, id) {
        eliminarValorArray(personas, id) //posizioa jakinik erabiltzailea ezabatu array-etik
        element = document.getElementById(id) //erabiltzaile eskuragarrien karratura bueltatu
        element_bt = document.getElementById('bt_' + id)
        document.getElementById(id).removeChild(element_bt)
        clon = document.getElementById(id).cloneNode(true)
        document.getElementById("participantes-añadidos").removeChild(element)
        document.getElementById("participantes-disponibles").appendChild(clon)
    }

    function añadirPersonas() { //datuak datu basera sartu PHP-ko funtzioari deituz
        let data = {
            'personas': personas,
            'id_nec': id_nec
        }
        fetch("{{route('añadirPersonas')}}", {
                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 eliminarParticipantes(id_part) {
        disableButton("elimPart" + id_part)
        let data = {
            'id_part': id_part,
            'id_nec': id_nec
        }
        fetch("{{route('eliminarParticipantes')}}", {
                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()
            })
            .catch(function(error) {});

    }

    

    window.onload = function (){
        const UrlParam = new URLSearchParams(window.location.search);
        id_nec = UrlParam.get('id');
        obtenerAdjuntosNec(id_nec)
        setInterval(comprobarInteracciones,5000);
    }

    int_numero_inicial={{count($interaccion)}}

    function comprobarInteracciones(){
        let data={
        'id_inc': id_nec
        }
        fetch("{{route('comprobarInteracciones')}}", {
        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.num_inter)
        if(result.num_inter > int_numero_inicial){
            obtenerInteracciones()
            int_numero_inicial=result.num_inter
        }
        })
    }

    function obtenerInteracciones(){
    let data={
      'id_inc': id_nec
    }
    fetch("{{route('obtenerInteracciones')}}", {
    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){
      txt=``
      result.interacciones.forEach(interaccion=>{
        if(interaccion.mensaje == "El estado cambio a resuelta"){
            txt+=`<div class='card-cambio' style="background-color: #c08e6b2c;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #62502f; font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                    </div>
                </div>`
        }
        else if(interaccion.mensaje == "El estado cambio a abierta"){
          txt+=`<div class='card-cambio' style="background-color: #6bbac02b;">
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #2f6062; font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
              </div>`
        }
        else if(interaccion.mensaje == "El estado cambio a pendiente"){
          txt+=`<div class='card-cambio' style="background-color: #c06b6b35;">
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #622f2f; font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
              </div>`
        }
        else if(interaccion.mensaje == "El estado cambio a cerrada"){
          txt+=`<div class='card-cambio' style="background-color: #8cc06b31;">
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #44622f; font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
              </div>`
        }
        else if(interaccion.tipo == 6){
          txt+=`<div class='card'>
                <div class='card-body'>
                  <h4></h4>
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #44622f; font-size: 16px;"><i class="bi bi-node-plus"></i> ${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
                </div>
              </div>`
        }
        else if(interaccion.tipo == 7){
          txt+=`<div class='card'>
                <div class='card-body'>
                  <h4></h4>
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #5c0000; font-size: 16px;"><i class="bi bi-node-minus"></i> ${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
                </div>
              </div>`
        }
        else if(interaccion.tipo == 8){
          txt+=`<div class='card'>
                <div class='card-body'>
                  <h4></h4>
                  <div class='interaccion-cont'>
                    <span class="interac-time" style="color: #5c0000; font-size: 16px;"><i class="bi bi-x-octagon"></i> ${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                  </div>
                </div>
              </div>`
        }
        else if(interaccion.tipo == 9){
          txt+=`<div class='card-cambio' style="background-color: rgba(0, 183, 255, 0.123);">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: rgb(0, 118, 187); font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                    </div>
                </div>`
        }
        else if(interaccion.tipo == 10){
          txt+=`<div class='card-cambio' style="background-color: #e3edda;">
                    <div class='interaccion-cont'>
                        <span class="interac-time" style="color: #698a4c; font-size: 16px;">${interaccion.momento.slice(0,19)} | ${interaccion.mensaje}</span>
                    </div>
                </div>`
        }
        else{
          txt+=`<div class='card' id="card-${interaccion.id}">
                <div class="card-header">
                  <h4 title="">${interaccion.creador_name} ${interaccion.creador_apellido}</h4>
                  <span class="interac-time">${interaccion.momento.slice(0,19)}</span>
                </div>`
                if(interaccion.mensaje != ""){
                  txt+=`<div class='card-body'>
                        <h4></h4>
                        <div class='interaccion-cont'>
                          <span>${interaccion.mensaje}</span>
                        </div>
                      </div>`
                }
                txt+=`</div>`
                
        }

      console.log(interaccion)
      })
      document.getElementById('menss').innerHTML=txt
      result.interacciones.forEach(interaccion=>{obtenerAdjuntos(interaccion.id)})
    })
  }

</script>

@endsection