<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.master" CodeBehind="intIncidenciaPers.aspx.vb" Inherits="WebIntranet.intIncidenciaPers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">

    <asp:HiddenField ID="listIncNoReloj" runat="server" Value="" />
    <div id="divConfirmacion" style="position: fixed; z-index: 10; top: 0; height: 100vh; width: 100%; background-color: #000000cc; display: none; justify-content: center; align-items: center;">
    </div>
    <div class="row pag">

       <%-- <div id="navLateral" runat="server" class="col-3">
        </div>--%>

        <div id="intPermisoIncidencia" class="col" style="">
            <p class="tituloMobile" id="tituloPI" runat="server"></p>
            <div class="migasDePan" id="migasDePanPI" runat="server">
            </div>
            
            <div id="mensajePermisosIncidencias" style="text-align: center; font-weight: bold; margin-block: 30px"></div>
            <div style="max-width: 600px; margin-inline: auto">   
                
                <%--<div id="selPersonasDiv" style="display:flex; margin-inline:0" class="justify-content-between mb-3 selectInHora" runat="server"></div>--%>
                <div id="selPersonasDiv" style="display:flex; margin-inline:0" class="justify-content-between mb-3 selectInHora" runat="server">
                     <p style='width: 160px; margin-bottom:0px'>PERSONA: </p>
                    <%--<dx:ASPxComboBox ID="selPersonas" runat="server" CssClass="selectIn w-100"></dx:ASPxComboBox>--%>
                    <div id="selPerDiv" runat="server" class="selectIn w-100"></div>

                </div>

                <div id="selInciDiv" style="display: flex; margin-inline: 0" class="justify-content-between mb-3 selectInHora mb-5" runat="server">
                    <p style='width: 160px; margin-bottom: 0px'>INCIDENCIA: </p>
                    <div id="selInDiv" runat="server" class="selectIn w-100"></div>
                    <%--<dx:ASPxComboBox ID="selInci" ValueType="System.String" runat="server" AllowNull="true" CssClass="selectIn w-100" ClientSideEvents-LostFocus="selecCambiado()"></dx:ASPxComboBox>--%>
                </div>
                <div id="seccionInci" runat="server" style="display:none">
                    <div id="btnPlusTramo" style="display: flex; align-items: center;" runat="server" class="col btnAzul mb-4" onclick="anadirfecha()">
                    <p style="margin: 0">Añadir nuevo tramo</p>
                </div>

                <div id="inputfechaGeneralPI" class="mb-3 columna selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0">
                    <p style="width: 160px">FECHA<span style="color: red">*</span>:</p>
                    <div class="divInpHora row" style="margin-inline: 0; width: calc(100% - 160px)">
                        <div id="inputfechainiPI" class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content: end">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Inicio</span>
                            </div>
                            <input id="dateIniPI" runat="server" class="inFecha" runat="server" type="date" max="9999-12-31" />
                        </div>
                        <div id="inputfechafinPI" class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content: end">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Final</span>
                            </div>
                            <input id="dateFinPI" class="inFecha" runat="server" type="date" max="9999-12-31" />
                        </div>

                    </div>
                </div>
                <div id="horariomananaPI" class="mb-3 selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0">
                    <p style="width: 160px" id="textoHorario" runat="server">HORARIO MAÑANA</p>
                    <div class="row divInpHora" style="margin-inline: 0; width: calc(100% - 160px)">
                        <div class="col p-0 input-group flex-lg-nowrap">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Inicio</span>
                            </div>
                            <input onchange="totalHorasPI(1)" id="horaIniPI1" ident="horaIniPI1" type="time" runat="server" class="inHora" />
                        </div>
                        <div class="col p-0 input-group flex-lg-nowrap" id="inputMananaDiv2" runat="server">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Final</span>
                            </div>
                            <input onchange="totalHorasPI(1)" id="horaFinPI1" ident="horaFinPI1" type="time" runat="server" class="inHora" />
                        </div>
                        <div class="col p-0 input-group flex-lg-nowrap" id="inputMananaDiv3" runat="server">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Total</span>
                            </div>
                            <input id="horaTotPI1" onchange="inpTotalPI(1)" ident="horaTotPI1" type="time" runat="server" class="inHora" style="color: grey !important" />
                        </div>
                    </div>
                </div>
                <div id="horariotardePI" class="mb-3 selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0">
                    <p style="width: 160px">HORARIO TARDE</p>
                    <div class="row divInpHora" style="margin-inline: 0; width: calc(100% - 160px)">
                        <div class="col p-0 input-group flex-lg-nowrap">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Inicio</span>
                            </div>
                            <input onchange="totalHorasPI(2)" id="horaIniPI2" ident="horaIniPI2" type="time" runat="server" class="inHora" />
                        </div>
                        <div class="col p-0 input-group flex-lg-nowrap">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Final</span>
                            </div>
                            <input onchange="totalHorasPI(2)" id="horaFinPI2" ident="horaFinPI2" type="time" runat="server" class="inHora" />
                        </div>
                        <div class="col p-0 input-group flex-lg-nowrap">
                            <div class="input-group-prepend">
                                <span class="input-group-text txtInputPrepend">Total</span>
                            </div>
                            <input id="horaTotPI2" onchange="inpTotalPI(2)" ident="horaTotPI2" type="time" runat="server" class="inHora" style="color: grey !important" />
                        </div>
                    </div>
                </div>
                <div id="inputarchivoadjuntoPI" class="mb-3 row justify-content-between incidenciasInt" runat="server" style="display: flex; margin-inline: 0">
                    <p class="txtSobreInput" id="labelArchivo">ARCHIVO ADJUNTO</p>
                    <div class="inpArchivoDiv" style="display:flex; gap: 5px">
                        <label style="padding-inline: 10px; line-height: 40px; min-width: 206px" for="ArchivoSubirIntPI0" class="btnAzul">Seleccionar archivo</label>
                        <p id="txtArchivo0" style="margin-bottom: 0!important">Ningún archivo seleccionado</p>
                        <input type="file" id="ArchivoSubirIntPI0" onchange="archivo(0)" class="subirArchivo my-3 selectIn wideInput" style="min-width: 0; width: 0; visibility: hidden" />
                    </div>
                </div>
                <div id="tramosDeFechas" class="mb-3 row columna selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0"></div>
                <div id="inputobservacionesPI" class="mb-3 row justify-content-between incidenciasInt" runat="server" style="display: flex; resize: none; margin-inline: 0">
                    <p class="txtSobreInput">OBSERVACIONES</p>
                    <textarea cols="30" rows="5" class="selectIn wideInput" style="font-size: 18px; resize: none; margin-bottom: 0px;" id="txtobservacionesPI" type="text" runat="server" />
                </div>
                <div id="seccionbotonesPI" class="row justify-content-center" style="width: 100%; margin-top: 2rem; margin-inline: 0 !important;">
                    <input class="btnGris" style="width: 100%; margin-bottom: 10px;" type="button" value="Vaciar" onclick="vaciarPI()" />
                    <%--<input type="button" style="width: 100%; margin-bottom: 10px;" class="btnAzul" onclick="introducirPI(true)" value="Guardar como borrador" />--%>
                    <input type="button" style="width: 100%; margin-bottom: 10px;" class="btnAzul" value="Enviar" onclick="confirmacionEnviar('Enviar',true)" />
                    <%--<input type="button" style="width: 100%;" class="btnGris" value="Ver borradores" onclick="window.location.href='/listSolicitudesComunicaciones.aspx?pnd=borr'" />--%>
                </div>
                <p style="margin-top: 15px; font-size: 12px"><span style="color: red">*</span> Campos necesarios</p>
                    </div>
            </div>
        </div>
    </div>
    <script>


        
      

        var contFecha = 2
        var incidenciaActual
        var TotalHorasInt = false
        function ResetInci() {
            incidenciaActual = ""
            $("#inputfechafinPI").show()
            $("#inputfechainiPI")[0].classList.remove("fechainiciosolo")
            $("#dateIniPI")[0].classList.remove("fechainiciosolo")
            $("#textoHorario").text("HORARIO MAÑANA")
            $("#horariotardePI").show()
            $("#inputMananaDiv2").show()
            $("#inputMananaDiv3").show()
            $("horariomananaPI").show()
            $("horariotardePI").show()
            $("#inputarchivoadjuntoPI").show()
            $("#btnPlusTramo").show()
            vaciarPI()
        }
        function cargarInci() {
            $("#divLoading").css("display", "flex")
            ResetInci()
            var idInci = $("#selInci").val()
            $.ajax({
                type: "post",
                url: "/intIncidenciaPers.aspx/CargarInci",
                data: '{"idInci":"'+idInci.toString()+'"}',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (result) {
                    if (result.d.Result != "") {
                        var incidencia = JSON.parse(result.d.Result)
                        incidenciaActual = incidencia
                        if(incidencia.AdmiteIntervaloDias == false){
                            $("#inputfechafinPI").hide()
                            $("#inputfechainiPI")[0].classList.add("fechainiciosolo")
                            $("#dateIniPI")[0].classList.add("fechainiciosolo")
                        }
                        if(incidencia.AdmiteIntervaloHoras == false){
                            if(incidencia.AdmiteInstanteTemporal != false){
                            $("#textoHorario").text("HORA")
                                $("#horariotardePI").hide()
                                $("#inputMananaDiv2").hide()
                                $("#inputMananaDiv3").hide()
                        } else{
                                $("#horariomananaPI").hide()
                                $("#horariotardePI").hide()
                        }
                    }
                        if (incidencia.Adjunto == "NO") {
                            $("#inputarchivoadjuntoPI").hide()
                        }
                        if (incidencia.AdmiteRangosFechas == false) {
                            $("#btnPlusTramo").hide()
                        }
                        //if (result.d.includes("ERROR--")) {
                        //    compEr(result.d)
                        //    return
                        //}

                        /*  $("#mensajePermisosIncidencias").html(result.d)*/
                        $("#seccionInci").css("display", "block")
                        $("#divLoading").css("display", "none")
/*                        cancelarEnviar()*/
                    }
                },
                error: function (result) {
                    cancelarEnviar()
                    alert('error occured');                 
                    $("#divLoading").css("display", "none")
                    //alert(result.responseText);

                },
            });


        }
        window.addEventListener('load', function () {
            //cargarInci()
            //incidenciaActual = JSON.parse($("#listIncNoReloj").val())
        })
        function introducirPI(Propuesta) {
            $("#divLoading").css("display", "flex")
            var valorIncidencia = incidenciaActual.idIncidencias
            var DiasCompletos = false
            var IntervaloDias = false
            var IntervaloHoras = false
            var rangoDeFechas = false
            var InstanteTemporal = false
            var Adjunto = ""
            var cadenaFechas = ""
            var cadenaHoras = ""
            var idPers = $("#selPer").val()
            DiasCompletos = incidenciaActual.AdmiteDiasCompletos
            IntervaloDias = incidenciaActual.AdmiteIntervaloDias
            IntervaloHoras = incidenciaActual.AdmiteIntervaloHoras
            InstanteTemporal = incidenciaActual.AdmiteInstanteTemporal
            rangoDeFechas = incidenciaActual.AdmiteRangosFechas
            Adjunto = incidenciaActual.Adjunto

            var rangos = $(".inFechaAdicional")
            var rangosHoras = $(".rangoHora")
            var contieneRangos = false
            var contieneRangosHoras = false
            if (rangos.length > 0) {
                contieneRangos = true
            }
            if (rangosHoras.length > 0) {
                contieneRangosHoras = true
            }
            var inicioTick = $('#dateIniPI').val()
            var FinalTick = $('#dateFinPI').val()
            var HoraIniManana = $('#horaIniPI1').val()
            var HoraFinManana = $('#horaFinPI1').val()
            var HoraIniTarde = $('#horaIniPI2').val()
            var HoraFinTarde = $('#horaFinPI2').val()
            var Observacion = $('#txtobservacionesPI').val().replaceAll("\"", "'")
            var totalHoraManana = $('#horaTotPI1').val()
            var totalHoraTarde = $('#horaTotPI2').val()
            var fechasRellenas = true

            if (HoraIniManana == "" || HoraIniManana == undefined) {
                HoraIniManana = "00:00"
            }
            if (HoraFinManana == "" || HoraFinManana == undefined) {
                HoraFinManana = "00:00"
            }
            if (HoraIniTarde == "" || HoraIniTarde == undefined) {
                HoraIniTarde = "00:00"
            }
            if (HoraFinTarde == "" || HoraFinTarde == undefined) {
                HoraFinTarde = "00:00"
            }
            if (totalHoraManana == "" || totalHoraManana == undefined) {
                totalHoraManana = "00:00"
            }
            if (totalHoraTarde == "" || totalHoraTarde == undefined) {
                totalHoraTarde = "00:00"
            }

            //Comprobacion inicio o final vacio en intervalo dias
            if ((inicioTick == undefined || inicioTick == "") || (FinalTick == undefined || FinalTick == "") && IntervaloDias == true) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>Debe introducir una fecha de inicio y otra de final</p>")
                cancelarEnviar()
                return
            }
            //Comprobacion inicio vacio sin intervalo de dias
            if (inicioTick == undefined || inicioTick == "") {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>Debe introducir fecha de inicio</p>")
                cancelarEnviar()
                return
            }
            //Comprobacion inputs de hora relleno por la mañana
            if (CompTramoHorario(HoraIniManana, HoraFinManana) == true && IntervaloHoras == true && InstanteTemporal == false && TotalHorasInt == false) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>En el caso de introducir horas de mañana se deben introducir horas de inicio y de final</p>")
                cancelarEnviar()
                return
            }
                //Comprobacion inputs de hora relleno por la tarde
            else if (CompTramoHorario(HoraIniTarde, HoraFinTarde) == true && IntervaloHoras == true && InstanteTemporal == false && TotalHorasInt == false) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>En el caso de introducir horas de tarde se deben introducir horas de inicio y de final</p>")
                cancelarEnviar()
                return
            }
            //Comprobacion fechas anteriores a la actual
            if (compFechaIniAnterior(tramo1, tramo2) == false) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>La fecha de inicio no debe ser posterior a la fecha final.</p>")
                cancelarEnviar()
                return
            }
            //Comprobacion fechas vacias en rangos si hay intervalo de dias
            if (contieneRangos == true && incidenciaActual.AdmiteIntervaloDias == true) {
                for (var i = 0; i < rangos.length; i++) {
                    if (rangos[i].value == "") { fechaRellenas = false }
                }
                if (fechasRellenas == false) {
                    $("#divLoading").css("display", "none")
                    $('#mensajePermisosIncidencias').css('color', 'red')
                    $('#mensajePermisosIncidencias').html("<p>Debe introducir una fecha de inicio y otra de final para cada uno de los tramos de fechas</p>")
                    cancelarEnviar()
                    return
                }
            }
            //comprobacion rangos de horas
            for (var x = 0; x < rangosHoras.length; x += 3) {
                if (rangosHoras[x].value > rangosHoras[x + 1].value) {
                    $("#divLoading").css("display", "none")
                    $('#mensajePermisosIncidencias').html("<p style='color:red'>En el caso de añadir rangos de horas la hora de inicio siempre ha de ser anterior a la de final.</p>")
                    return
                }
            }
            //Comprobacion primera fecha introducida 
            if ($('#dateIniPI').val() == "" || ($('#dateFinPI').val() == "" && IntervaloDias == true)) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html(((IntervaloDias == true) ? "<p>Debe introducir una fecha de inicio y otra de final.</p>" : "<p>Debe introducir una fecha.</p>"))
                cancelarEnviar()
                return
            }
            //comprobaciones fecha final anterior a la de inicio
            var inicio = $('#dateIniPI').val()
            var Final = $('#dateFinPI').val()
            if (inicio > Final && IntervaloDias == true) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>La fecha de inicio no debe ser posterior a la fecha final.</p>")
                cancelarEnviar()
                return
            }
            if (rangos.length > 0 && incidenciaActual.AdmiteIntervaloDias == true) {
                for (var i = 1; i <= (rangos.length / 2); i++) {
                    var tramo1 = Date.parse($("#dateIniPI" + (i+1).toString()).val())
                    var tramo2 = Date.parse($("#dateFinPI" + (i+1).toString()).val())
                    var resultado = compFechaIniAnterior(tramo1, tramo2)
                    if (resultado == false) {
                        $("#divLoading").css("display", "none")
                        $('#mensajePermisosIncidencias').css('color', 'red')
                        $('#mensajePermisosIncidencias').html("<p>La fecha de inicio no debe ser posterior a la fecha final en todos los tramos.</p>")
                        cancelarEnviar()
                        return
                    }
                }
            }
            //confirmacion fecha anterior
            if (rangos.length < 0) {
                for (var i = 0; i < rangos.length; i++) {
                    if (Date.parse(rangos[i].value) < Date.now() && sessionStorage.getItem("confirmacionFechaAnterior") != 'true') {
                        sessionStorage.setItem("confirmacionFechaAnterior", true)
                        confirmacionEnviar("fechaAnterior", Propuesta)
                        $("#divLoading").css("display", "none")
                        return
                    }
                }
            }
            //POPUP fecha anterior
            if (Date.parse(inicioTick) < Date.now() && sessionStorage.getItem("confirmacionFechaAnterior") != 'true') {
                sessionStorage.setItem("confirmacionFechaAnterior", true)
                confirmacionEnviar("fechaAnterior", Propuesta)
                $("#divLoading").css("display", "none")
                return
            }
            sessionStorage.removeItem("confirmacionFechaAnterior")
            //comprobacion de fichero
            var numFichReq = incidenciaActual.AdmiteIntervaloDias == true ? (rangos.length / 2) + 1 : rangos.length + 1
            if (incidenciaActual.Adjunto == "SI" && listadoFicheros.length != numFichReq) {
                $("#divLoading").css("display", "none")
                $('#mensajePermisosIncidencias').css('color', 'red')
                $('#mensajePermisosIncidencias').html("<p>Es necesario añadir archivo adjunto.</p>")
                cancelarEnviar()
                return
            }
            //creacion cadena de fechas
            if (contieneRangos == true) {
                for (var i = 0; i < rangos.length; i++) {
                    cadenaFechas += ((i == 0) ? "" : ",") + rangos[i].value.toString()
                }
            }
            //creacion cadena de horas
            if (contieneRangosHoras == true) {
                for (var i = 0; i < rangosHoras.length; i++) {
                    if (rangosHoras[i].value == "") {
                        rangosHoras[i].value = "00:00"
                    }
                    else { cadenaHoras += ((i == 0) ? "" : ",") + rangosHoras[i].value.toString() }
                }
            }               
            if (IntervaloDias == false) {
                Final = inicio
            }
            if (incidenciaActual.Adjunto != "NO") {
                cadenaFicheros = JSON.stringify(listadoFicheros)
            }
            else {
                cadenaFicheros = JSON.stringify([{ id: "0", fichero: "0" }])
            }
            $.ajax({
                type: "post",
                url: "/intIncidenciaPers.aspx/inpIncidencia",
                data: '{"idPers":"'+idPers+'","FechaInicio":"' + inicio + '","FechaFin":"' + Final + '","cadenaFechas":"' + cadenaFechas + '","cadenaHoras":"' + cadenaHoras + '","inicio":"' + inicioTick + '","final":"' + FinalTick + '","incidencia":"' + valorIncidencia + '","horaIniManana":"' + HoraIniManana + '","horaFinManana":"' + HoraFinManana + '","totalHoraManana":"' + totalHoraManana + '","horaIniTarde":"' + HoraIniTarde + '","horaFinTarde":"' + HoraFinTarde + '","totalHoraTarde":"' + totalHoraTarde + '","inpObservaciones":"' + Observacion + '","fichero":' + cadenaFicheros + ',"EsPropuesta":"' + Propuesta + '"}',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (result) {
                    if (result.d != "") {

                        if (result.d.includes("ERROR--")) {
                            compEr(result.d)
                            return
                        }

                        $("#mensajePermisosIncidencias").html(result.d)
                        $("#divLoading").css("display", "none")
                        cancelarEnviar()
                    }
                },
                error: function (result) {
                    cancelarEnviar()
                    alert('error occured');
                    $("#divLoading").css("display", "none")
                    //alert(result.responseText);

                },
            });
        }
        function CompTramoHorario(tramo1, tramo2) {
            if ((ComprobarHoraVacia(tramo1) == true && ComprobarHoraVacia(tramo2) == false) || (ComprobarHoraVacia(tramo1) == false && ComprobarHoraVacia(tramo2) == true)) {
                return true
            }
            else {
                return false
            }
        }
        function compFechaIniAnterior(tramo1, tramo2) {
            if (tramo1 > tramo2) {
                return false
            }
            else {
                return true
            }
        }
        function ComprobarHoraVacia(inp) {
            if (inp == "") {
                return true
            }
            else if (inp == "00:00") {
                return true
            }
            else {
                return false
            }
        }
        function totalHorasPI(input) {
            var inp = input.toString()
            //var inp2 = (input % 2 != 0) ? (input + 1).toString() : (input - 1).toString()
            if ($("[ident='horaIniPI" + inp + "']").val() != "00:00") {
                var ini = $("[ident = 'horaIniPI" + inp + "']").val()
                var iniHoras = (ini.substring(0, 2) * 60) * 60
                var iniMins = ini.slice(-2) * 60
                ini = iniHoras + iniMins

                var end = $("[ident = 'horaFinPI" + inp + "']").val()
                var endHoras = (end.substring(0, 2) * 60) * 60
                var endMins = end.slice(-2) * 60
                end = endHoras + endMins

                var total = end - ini
                var h = Math.floor(total / 3600).toString()
                var m = Math.floor(total % 3600 / 60).toString()

                total = h.padStart(2, "0") + ":" + m.padStart(2, "0")
                $("[ident = 'horaTotPI" + inp + "']").val(total)
                $("[ident = 'horaTotPI" + inp + "']").css("background-color", "lightgray")
                $("[ident = 'horaTotPI" + inp + "']").attr("readonly", "readonly")
            }
            else if (($("[ident='horaIniPI" + inp + "']").val() == "00:00" || $("[ident='horaIniPI" + inp + "']").val() == "") && ($("[ident='horaFinPI" + inp + "']").val() == "00:00" || $("[ident='horaFinPI" + inp + "']").val() == "")) {
                $("[ident = 'horaTotPI" + inp + "']").removeAttr("readonly")
                $("[ident = 'horaTotPI" + inp + "']").val("00:00")
                $("[ident = 'horaTotPI" + inp + "']").css("background-color", "white")
            }

        }
        function inpTotalPI(input) {
            var inp = input.toString()
            var inpTotal = $("[ident = 'horaTotPI" + input.toString() + "']")
            if (inpTotal.val() == "00:00" || inpTotal.val() == "") {
                TotalHorasInt = false
                $("[ident='horaIniPI" + inp + "']").removeAttr("readonly")
                $("[ident='horaIniPI" + inp + "']").css("background-color", "white")
                $("[ident='horaIniPI" + inp + "']").val("00:00")
                $("[ident='horaFinPI" + inp + "']").removeAttr("readonly")
                $("[ident='horaFinPI" + inp + "']").css("background-color", "white")
                $("[ident='horaFinPI" + inp + "']").val("00:00")
            }
            else {
                TotalHorasInt = true
                $("[ident='horaIniPI" + inp + "']").attr("readonly", "readonly")
                $("[ident='horaIniPI" + inp + "']").css("background-color", "lightgray")
                $("[ident='horaIniPI" + inp + "']").val("00:00")
                $("[ident='horaFinPI" + inp + "']").attr("readonly", "readonly")
                $("[ident='horaFinPI" + inp + "']").css("background-color", "lightgray")
                $("[ident='horaFinPI" + inp + "']").val("00:00")
            }
        }
        function vaciarPI() {
            $('#dateIniPI').val("")
            $('#dateFinPI').val("")
            $('#horaMIniPI').val("00:00")
            $('#horaMFinPI').val("00:00")
            $('#horaMTotPI').val("00:00")
            $('#horaTIniPI').val("00:00")
            $('#horaTFinPI').val("00:00")
            $('#horaTTotPI').val("00:00")
            $('#txtobservacionesPI').val("")
            $('#ArchivoSubirIntPI').val("")
            $("#txtArchivo").text("Ningún archivo seleccionado")
            var fechasAnadidas = $(".divFechaAnadida")
            for (var i = 0; i < fechasAnadidas.length; i++) {                
                var idTramo = parseInt(fechasAnadidas[i].id.replaceAll("divFecha", ""))
                eliminarFechas(idTramo)
            }
        }
        function vaciarIncidencia() {
            $('#selIncidenciaNoReloj_I').val("")
            $('#inpFechaInicioIncidencia').val("")
            $('#inpFechaFinIncidencia').val("")
            $('#inpIniManana').val("00:00")
            $('#inpFinManana').val("00:00")
            $('#inpTotalManana').val("00:00")
            $('#inpIniTarde').val("00:00")
            $('#inpFinTarde').val("00:00")
            $('#inpTotalTarde').val("00:00")
            $('#inpObservaciones').val("")
            $('#ArchivoSubirIntInc').val("")
        }
        var fichero = ""
        var listadoFicheros = []
        function archivo(id) {
            var origen = "ArchivoSubirIntPI" + id
            var file = $('#' + origen)[0].files[0];
            getBase64(file);
            function getBase64(file) {
                var reader = new FileReader();
                if (file) {
                    reader.readAsDataURL(file);
                }
                reader.onload = function () {
                    //console.log(reader.result);

                    var newFichero = {}
                    newFichero.id = id + "file";
                    newFichero.fichero = reader.result.substr(reader.result.indexOf(',') + 1);
                    listadoFicheros.push(newFichero)

                    fichero = reader.result.substr(reader.result.indexOf(',') + 1);
                    $("#txtArchivo" + id).text(file.name)
                };
                reader.onerror = function (error) {
                    //console.log('Error: ', error);
                };
            }

        }
        function confirmacionEnviar(modo, propuesta) {
            //if (incidenciaActual.Adjunto == "SI" && listadoFicheros.length == 0) {
            //    $('#divConfirmacion').html(' <div class="d-flex flex-column" style="justify-content: center; width: 400px; height: 200px; display: flex; background-color: white; padding: 15px;">' +
            //        '<p style="font-size: 15px; text-align: center;">' +
            //        'Es necesario añadir un archivo adjunto</p>' +
            //        '<center><input type="button" style="width: 100px; height: 30px" value="Aceptar" onclick="cancelarEnviar()" /></center>' +
            //        '</div >')
            //    $('#divConfirmacion').css('display', 'flex')
            //} else {
            switch (modo) {
                case "Enviar":
                    $('#divConfirmacion').html(' <div class="d-flex flex-column" style="justify-content: center; width: 400px; height: 200px; display: flex; background-color: white; padding: 15px;">' +
                        '<p style="font-size: 15px; text-align: center;">¿Está seguro de que desea enviar esta incidencia?</p>' +
                        '<input type="button" style="min-width: 100px; margin-bottom: 10px; height: 30px" value="Enviar" onclick="cancelarEnviar();introducirPI(' + propuesta + '); " />' +
                        ' <input type="button" style="min-width: 100px; height: 30px" value="Cancelar" onclick="cancelarEnviar()" />' +
                        '</div >')
                    break;
                case "fechaAnterior":
                    $('#divConfirmacion').html(' <div class="d-flex flex-column" style="justify-content: center; width: 400px; height: 200px; display: flex; background-color: white; padding: 15px;">' +
                        '<p style="font-size: 15px; text-align: center;">Alguna de las fechas introducidas es anterior a la actual ¿Está seguro de que desea enviar esta incidencia?</p>' +
                        '<input type="button" style="min-width: 100px; margin-bottom: 10px; height: 30px" value="Continuar" onclick="introducirPI(' + propuesta + '); cancelarEnviar()" />' +
                        ' <input type="button" style="min-width: 100px; height: 30px" value="Cancelar" onclick="cancelarEnviar(); sessionStorage.removeItem(\'confirmacionFechaAnterior\')" />' +
                        '</div >')
                    break;
                default:
            }

            $('#divConfirmacion').css('display', 'flex')
        }
        function cancelarEnviar() {
            fichero = ""
            $('#divConfirmacion').html('')
            $('#divConfirmacion').css('display', 'none')
        }
        function anadirfecha() {
            var html = ""
            if (incidenciaActual.AdmiteIntervaloDias == true) {
                html +=
                    '<div id="divFecha' + contFecha.toString() + '" class="divFechaAnadida"  style="display:flex; width:100%" > <p style="width:130px">FECHA:</p>' +
                    '<div style="width:30px; height:30px !important; display:flex; align-items:center; justify-content:center" onclick="eliminarFechas(' + contFecha + ')" class="btnAzul"><p style="text-align:center; margin:0">X</p></div>' +
                    '<div class="divInpHora d-flex" style="margin-inline: 0; width:calc(100% - 160px)">' +
                    '<div class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content:end">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Inicio</span>' +
                    '</div>' +
                    '<input id="dateIniPI' + contFecha.toString() + '" class="inFecha inFechaAdicional" type="date" max="9999-12-31" />' +
                    '</div>' +
                    '<div class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content:end">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Final</span>' +
                    '</div>' +
                    '<input id="dateFinPI' + contFecha.toString() + '" class="inFecha inFechaAdicional" type="date" max="9999-12-31" />' +
                    '</div>' +
                    '</div>' +
                    "</div>"
            }
            else {
                html +=
                    '<div id="divFecha' + contFecha.toString() + '" style = "display:flex; width:100%" > <p style="width:130px">FECHA:</p>' +
                    '<div style="width:30px; height:30px !important; display:flex; align-items:center; justify-content:center" onclick="eliminarFechas(' + contFecha + ')" class="btnAzul"><p style="text-align:center; margin:0">X</p></div>' +
                    '<div class="divInpHora row" style="margin-inline: 0; width:calc(100% - 160px)">' +
                    '<div class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content:end">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Inicio</span>' +
                    '</div>' +
                    '<input id="dateIniPI' + contFecha.toString() + '" class="inFecha inFechaAdicional fechainiciosolo" type="date" max="9999-12-31" />' +
                    '</div>' +
                    //'<div class="col p-0 input-group flex-lg-nowrap" runat="server" style="display: flex; margin-inline: 0; justify-content:end">' +
                    //'<div class="input-group-prepend">' +
                    //'<span class="input-group-text txtInputPrepend">Final</span>' +
                    //'</div>' +
                    //'<input id="dateFinPI' + contFecha.toString() + '" class="inFecha inFechaAdicional" type="date" max="9999-12-31" />' +
                    //'</div>' +
                    '</div>' +
                    "</div>"
            } if (incidenciaActual.AdmiteIntervaloHoras == true) {
                var contFecha1 = contFecha + 1
                var contFecha2 = contFecha + 2
                html += '<div id="divHoras' + contFecha.toString() + '" style="width:100%">' +
                    '<div class="mb-3 selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0">' +
                    '<p style="width:160px">HORARIO MAÑANA</p>' +
                    '<div class="row divInpHora" style="margin-inline: 0; width:calc(100% - 160px)">' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Inicio</span>' +
                    '</div>' +
                    `<input onchange="totalHorasPI(${contFecha1})" value="00:00" ident="horaIniPI${contFecha1.toString()}" type="time" runat="server" class="inHora rangoHora" />` +
                    '</div>' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Final</span>' +
                    '</div>' +
                    `<input onchange="totalHorasPI(${contFecha1})"  value="00:00" ident="horaFinPI${contFecha1.toString()}" type="time" runat="server" class="inHora rangoHora" />` +
                    '</div>' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Total</span>' +
                    '</div>' +
                    `<input ident="horaTotPI${contFecha1.toString()}"  value="00:00" type="time" runat="server" class="inHora rangoHora" style="color: grey !important" readonly="true" />` +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div  class="mb-3 selectInHora justify-content-between" runat="server" style="display: flex; margin-inline: 0">' +
                    '<p style="width:160px">HORARIO TARDE</p>' +
                    '<div class="row divInpHora" style="margin-inline: 0;  width:calc(100% - 160px)">' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Inicio</span>' +
                    '</div>' +
                    `<input onchange="totalHorasPI(${contFecha2})"  value="00:00" ident="horaIniPI${contFecha2.toString()}" type="time" runat="server" class="inHora rangoHora" />` +
                    '</div>' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Final</span>' +
                    '</div>' +
                    `<input onchange="totalHorasPI(${contFecha2})"  value="00:00" ident="horaFinPI${contFecha2.toString()}" type="time" runat="server" class="inHora rangoHora" />` +
                    '</div>' +
                    '<div class="col p-0 input-group flex-lg-nowrap">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text txtInputPrepend">Total</span>' +
                    '</div>' +
                    `<input ident="horaTotPI${contFecha2.toString()}"  value="00:00" type="time" runat="server" class="inHora rangoHora" style="color: grey !important" readonly="true" />` +
                    '</div>' +
                    '</div>' +
                    '</div>'

            }
            if (incidenciaActual.Adjunto != "NO") {
                //var id= "inputarchivoAdjuntoPI" + contFecha.toString()
                html += `<div id='DivinputarchivoAdjuntoPI${contFecha.toString()}' class='mb-3 row justify-content-between incidenciasInt' style='display:flex; margin-inline:0'>` +
                    '<p class="txtSobreInput" id="labelArchivo">ARCHIVO ADJUNTO</p>' +
                    '<div class="inpArchivoDiv" style="display:flex;gap:5px">' +
                    `<label style="padding-inline:10px; line-height:40px;min-width:206px" for="ArchivoSubirIntPI${contFecha.toString()}" class="btnAzul">Seleccionar archivo</label>` +
                    `<p id="txtArchivo${contFecha.toString()}" style="margin-bottom:0!important;">Ningún archivo seleccionado</p>` +
                    `<input type="file" id="ArchivoSubirIntPI${contFecha.toString()}" onchange="archivo(${contFecha})" class="subirArchivo my-3 selectIn wideInput" style=" min-width:0; width:0; visibility:hidden" />` +
                    '</div>' +
                    '</div>'
            }

            contFecha += 2
            $("#tramosDeFechas").append(html)
        }
        function eliminarFechas(id) {
            $("#divFecha" + id.toString()).remove()
            if (incidenciaActual.AdmiteIntervaloHoras == true) {
                $("#divHoras" + id.toString()).remove()
            }
            if (incidenciaActual.Adjunto != "NO") {
                $("#DivinputarchivoAdjuntoPI" + id.toString()).remove()
            }
            listadoFicheros = listadoFicheros.filter(item => item.id !== "ArchivoSubirIntPI" + id + "file")
        }
        var removeByAttr = function (arr, attr, value) {
            var i = arr.length;
            while (i--) {
                if (arr[i]
                    && arr[i].hasOwnProperty(attr)
                    && (arguments.length > 2 && arr[i][attr] === value)) {

                    arr.splice(i, 1);

                }
            }
            return arr;
        }
    </script>


</asp:Content>