<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.master" CodeBehind="gestionTeletrabajo.aspx.vb" Inherits="WebIntranet.gestionTeletrabajo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
    <div class="pag">

        <div id="desplegableAnadirTeletrabajo" style="display: none; position: fixed; background-color: #000000bf; height: 100vh; width: 100%; top: 0; left: 0; z-index: 100;"></div>
        <div id="desplegableConfirmarTeletrabajo" style="display: none; position: fixed; background-color: #000000bf; height: 100vh; width: 100%; top: 0; left: 0; z-index: 101;"></div>

        <div class="d-flex row justify-content-center mt-3">
            <div class="col-md-12 mb-4" style="display:flex;justify-content:center"><input type="button" value="Agregar nuevo tramo de teletrabajo" class="btnAzul" onclick="anadirTeletrabajoDesp(0)" /></div>
            <div class="col-md-12 mb-4" style="display:flex;justify-content:center" id="mensajeTeletrabajo2"></div>
            <div class="divListadoTeletrabajo col-md-7" style="" id="divListTeletrabajo"></div>

            <div id="areaAgenda" class="agenda col-md-5 text-right pt-2">

                <div class="row" id="divContenidoAgenda" style="height: 100%">

                    <div class="col-md-12" id="tituloAgenda">

                        <p><b>AGENDA</b></p>

                    </div>

                    <div class="col-md-12" id="mesAnno" style="margin-bottom: 10px;">

                        <div class="d-flex justify-content-center position-relative" style="align-items: center;">

                            <a class="icoNavCalendario" onclick="CambiarMes(-1)">

                                <i class="fas fa-caret-left"></i>

                            </a>

                            <p style="width: 180px; text-align: center; margin-left: 10px; margin-right: 10px; margin-bottom: 0px; line-height: 20px;" id="txtAgendaMesAnyo"></p>

                            <a class="icoNavCalendario" onclick="CambiarMes(1)">

                                <i class="fas fa-caret-right"></i>

                            </a>

                            <div id="popupFiltros" class="row"></div>

                        </div>

                    </div>

                    <div class="row nombreDiaSemana col-md-12 d-flex justify-content-center">

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Lunes</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Martes</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Miercoles</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Jueves</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Viernes</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Sábado</div>

                        <div style="font-size: 12px; margin-bottom: 10px;" class="col">Domingo</div>

                    </div>
                    <div class="col-md-12 row" id="calendario"></div>
                    <div class="d-flex justify-content-around" style="gap:30px; padding:15px">
                        <div class="d-flex align-items-center" style="gap: 15px">
                            <p style="font-weight:bold" class="m-0">1 DÍA</p>
                            <div style="width: 20px; height: 20px; background-color: var(--TT1)"></div>
                        </div>
                        <div class="d-flex align-items-center" style="gap: 15px">
                            <p style="font-weight:bold" class="m-0">2 DÍAS</p>
                            <div style="width: 20px; height: 20px; background-color: var(--TT2)"></div>
                        </div>
                        <div class="d-flex align-items-center" style="gap: 15px">
                            <p style="font-weight:bold" class="m-0">3 DÍAS</p>
                            <div style="width: 20px; height: 20px; background-color: var(--TT3)"></div>
                        </div>
                        <div class="d-flex align-items-center" style="gap: 15px">
                            <p style="font-weight:bold" class="m-0">EXCEPCIÓN</p>
                            <div style="width: 20px; height: 20px; background-color: var(--TTEx)"></div>
                        </div>
                    </div>
                    <%--<div class="col-md-12" id="btnVerMasAgenda"></div>--%>
                </div>
            </div>
        </div>
    </div>
    <script>
        const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",

            "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

        var fechaIniMes
        var fechaFinMes
        var diaHoy
        var listaAgenda

        $(document).ready(function () {

            var fechahoy = new Date()
            fechahoyDia = fechahoy.getDate()
            fechahoyMes = fechahoy.getMonth() + 1
            fechahoyAnno = fechahoy.getFullYear()
           
            fechaIniMes = new Date(Date.now())
            diaHoy = fechaIniMes.getDate()
            fechaIniMes.setDate(1)
            fechaFinMes = new Date(Date.now())
            fechaFinMes.setMonth(fechaFinMes.getMonth() + 1)
            fechaFinMes.setDate(0)

            var fechaString = fechaIniMes.getFullYear() + "-" + (fechaIniMes.getMonth() + 1) + "-1"
            $("#txtAgendaMesAnyo").text(monthNames[fechaIniMes.getMonth()] + " " + fechaIniMes.getFullYear())
            ObtenerFechaAgenda(fechaString)
            CambiarMes(+0)

        });



        function CambiarMes(numero) {
            $("#divLoading").css("display", "flex")
            $("#divListTeletrabajo").css("display", "none")
            $("#divContenidoAgenda").css("display", "none")
            fechaIniMes.setMonth(fechaIniMes.getMonth() + numero)
            fechaFinMes.setDate(1)
            fechaFinMes.setMonth(fechaIniMes.getMonth() + 1)
            fechaFinMes.setDate(0)
            fechaFinMes.setYear(fechaIniMes.getFullYear())

            var fechaString = fechaIniMes.getFullYear() + "-" + (fechaIniMes.getMonth() + 1) + "-01"           
            $("#txtAgendaMesAnyo").text(monthNames[fechaIniMes.getMonth()] + " " + fechaIniMes.getFullYear())
          
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "/gestionTeletrabajo.aspx/cargarListaTeletrabajo",
                data: '{"fechaInicio":"' + fechaString + '"}',
                dataType: "json",
                success: function (result) {

                    var lTeletrabajo = JSON.parse(result.d.Result)
                    var listadoTeletrabajo = lTeletrabajo.ListadoEF
                    var html = ""
                    var contadorPersona = 0

                    if (listadoTeletrabajo.length > 0) {
                    //for (var i = 0; i < listadoTeletrabajo.length; i++) {
                        html += "<div><table class='table table-striped'><tr>" +
                            "<th style='width:20%'>Fecha</th>" +
                            "<th style='width:20%'>Días posibles</th>" +
                            "<th style='width:45%'>Motivo</th>" +
                            "<th style='width:5%'>Excepción</th>" +
                            "<th style='width:5%'>Días</th>" +
                            "<th style='width:5%'></th>" +
                            "</tr>"

                            listadoTeletrabajo.sort

                        for (var x = 0; x < listadoTeletrabajo.length; x++) {

                            var diasActivos = []
                            if (listadoTeletrabajo[x].lunes == true) { diasActivos.push(1) }
                            if (listadoTeletrabajo[x].martes == true) { diasActivos.push(2) }
                            if (listadoTeletrabajo[x].miercoles == true) { diasActivos.push(3) }
                            if (listadoTeletrabajo[x].jueves == true) { diasActivos.push(4) }
                            if (listadoTeletrabajo[x].viernes == true) { diasActivos.push(5) }

                            

                            var fecha = new Date(listadoTeletrabajo[x].Fei)
                            var fechaForm = fecha.getDate().toString().padStart("2", 0) + "/" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "/" + fecha.getFullYear().toString()
                            var fechaFin = new Date(listadoTeletrabajo[x].Fef)
                            var fechaFinForm = fechaFin.getDate().toString().padStart("2", 0) + "/" + (fechaFin.getMonth() + 1).toString().padStart("2", 0) + "/" + fechaFin.getFullYear().toString()
                            var idTT = listadoTeletrabajo[x].id.toString()
                            html += ""
                            if (fechaFin < new Date()) { html += "<tr id='" + idTT + "-tr' class='op05' >" } else { html += "<tr id='" + idTT + "-tr' >" }                                
                               html+= "<td style='width:20%'  class='listaTeletrabajo' onclick='anadirTeletrabajoDesp(" + idTT + ")'  id='" + idTT + "-fecha'>" + fechaForm + " - " + fechaFinForm + "</td>" +
                                "<td style='width:20%'>"
                            if (listadoTeletrabajo[x].lunes == true) { html += "L " }
                            if (listadoTeletrabajo[x].lunes == true && diasActivos.length > 1) { html += "/ " }
                            if (listadoTeletrabajo[x].martes == true) { html += "M " }
                            if (listadoTeletrabajo[x].martes == true && diasActivos.length > 1) { html += "/ " }
                            if (listadoTeletrabajo[x].miercoles == true) { html += "X " }
                            if (listadoTeletrabajo[x].miercoles == true && diasActivos.length > 1) { html += "/ " }
                            if (listadoTeletrabajo[x].jueves == true) { html += "J " }
                            if (listadoTeletrabajo[x].jueves == true && diasActivos.length > 1) { html += "/ " }
                            if (listadoTeletrabajo[x].viernes == true) { html += "V" }
                            html += "</td>"
                            var motivo = ""
                            if (listadoTeletrabajo[x].motivo != null) {
                                motivo = listadoTeletrabajo[x].motivo
                            }
                            html += "<td style='width:45%'>" + motivo + "</td>"
                            var excepcion = ""
                            if (listadoTeletrabajo[x].excepcion == true) {
                                excepcion = "<i class='fa fa-check'></i>"
                            }

                            var colorNum = ""
                            if (listadoTeletrabajo[x].nuDias == 1) {
                                colorNum = "var(--TT1)"
                            }
                            else if (listadoTeletrabajo[x].nuDias == 2) {
                                colorNum = "var(--TT2)"
                            }
                            else if (listadoTeletrabajo[x].nuDias >= 3) {
                                colorNum = "var(--TT3)"
                            }
                            if (listadoTeletrabajo[x].excepcion == true) {
                                colorNum = "var(--TTEx)"
                            }
                            html += "<td style='width:5%; text-align:center'>" + excepcion + "</td>"
                            html += "<td style='width:5%; text-align:center'><p style='margin:0; background-color:" + colorNum +"; color:white; height:30px; widht:30px;line-height: 30px;border-radius: 5px;'>" + listadoTeletrabajo[x].nuDias.toString() + "</p></td>"
                            html += "<td class='listaTeletrabajoCheck' style='text-align: center; width:5%' onclick='anularTeletrabajo(" + idTT + ")'><i style='min-height:30px' class='fa-solid fa-xmark'></i></td></tr>"



                            var FI = new Date(listadoTeletrabajo[x].Fei)
                            var FF = new Date(listadoTeletrabajo[x].Fef)
                            if ((FI >= fechaIniMes && FI <= fechaFinMes) || (FF >= fechaIniMes && FF <= fechaFinMes) || (FI <= fechaIniMes && FF >= fechaFinMes)) {


                                var diaInicio = 0
                                var diaFin = 0
                                if (fecha < fechaIniMes) {
                                    diaInicio = 1
                                }
                                else {
                                    diaInicio = fecha.getDate()
                                }
                                if (fechaFin > fechaFinMes) {
                                    diaFin = fechaFinMes.getDate()
                                }
                                else {
                                    diaFin = fechaFin.getDate()
                                }

                                for (var i = diaInicio; i <= diaFin; i++) {
                                    var casilla = $("#" + i.toString() + "-calDay")[0]
                                    if (casilla.classList.contains("finSemana") == false) {

                                        var diaRef = new Date(fechaIniMes)
                                        diaRef.setDate(i)
                                        if (diasActivos.includes(diaRef.getDay()) || listadoTeletrabajo[x].excepcion == true) {
                                            var tipoTT = ""
                                            if (listadoTeletrabajo[x].nuDias == 1 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo1" }
                                            if (listadoTeletrabajo[x].nuDias == 2 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo2" }
                                            if (listadoTeletrabajo[x].nuDias >= 3 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo3" }
                                            if (listadoTeletrabajo[x].excepcion == true) { tipoTT = "diaConTeletrabajoEx" }
                                            $("#" + i.toString() + "-calDay").addClass(tipoTT)
                                            if (fechaFin < new Date()) { $("#" + i.toString() + "-calDay").addClass("op05") }
                                            $("#" + i.toString() + "-calDay").attr("idAsis", listadoTeletrabajo[x].id.toString())
                                        }
                                    }
                                }

                            }
                            //}
                           
                        }
                        html += "</table></div>"
                    }
                    else {
                        html += "<div> <table class='table table-striped'><tr>" +
                            "<th>Fecha</th>" +
                            /*  "<th>Anular</th>"*/
                            "</tr>"
                        html += "<tr><td class='listaTeletrabajo' colspan='3' style='color:red; font-weight:bold;text-align:center'>No hay teletrabajos proximamente</td>"
                        html += "</table></div>"
                    }
                    $("#divListTeletrabajo").html(html)
                    //$("#divLoading").css("display", "none")
                },
                error: function (result) {
                    alert('error occured');
                    //$("#divLoading").css("display", "none")
                    //alert(result.responseText);
                },
            });
            //$("#divLoading").css("display", "none")
            ObtenerFechaAgenda(fechaString)
            $("#divListTeletrabajo").css("display", "")
            $("#divContenidoAgenda").css("display", "")
           
        }
        function marcarFiestas(fechaInicio, fechaFinal) {
            $("#divLoading").css("display", "flex")
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "/gestionTeletrabajo.aspx/comprobarFiestas",
                data: '{"fechaInicio":"' + fechaInicio + '","fechaFinal":"' + fechaFinal + '"}',
                dataType: "json",
                success: function (result) {
                    let respuesta = JSON.parse(result.d.Result)
                    let listadoFiestas = respuesta.ListadoFiestas

                    for (let i = 0; i < listadoFiestas.length; i++) {
                        $("#" + new Date(listadoFiestas[i].Fecha).getDate().toString() + "-calDay").addClass("finSemana")
                        $("#" + new Date(listadoFiestas[i].Fecha).getDate().toString() + "-calDay").attr("onclick", null);
                    }

                    $("#divLoading").css("display", "none")
                },
                error: function (result) {
                    alert('error occured');
                    //alert(result.responseText);
                    $("#divLoading").css("display", "none")
                },
            });
        }
        function ObtenerFechaAgenda(fecha) {
            $("#divLoading").css("display", "flex")
            fecha = new Date(fecha);
            $("#calendario").empty()
            $("#proximosEventos").empty()
            fechaFinal = new Date(fecha)
            fechaFinal.setMonth(fechaFinal.getMonth() + 1)
            fechaFinal.setDate(0)


            let fechaString = fecha.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-01"
            let fechaStringFinal = fechaFinal.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-" + fechaFinal.getDate()

            //calendario
            var diaInicio = fecha.getDay() - 1
            if (diaInicio == -1) {
                diaInicio = 6
            }
            var htmlCalendario = ""
            for (var i = 0; i < diaInicio; i++) {//cuadros blancos inicio
                htmlCalendario += '<div class=" diaDeLaSemana diaVacio"></div>'
            }



            for (var i = 1; i <= fechaFinal.getDate(); i++) {//calendario
                var numCuadro = fecha.getDay() + i

                var finSemana = ""
                if ((numCuadro - 1) % 7 == 0 || numCuadro % 7 == 0) {
                    finSemana = "finSemana"
                }

                let fechaDia = fecha.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-0" + i


                if (finSemana == "") {
                    htmlCalendario += '<div class=" diaDeLaSemana diaDeLaSemanaActivo ' + '" id="' + i + '-calDay" ><b class="numeroCalendario">' + i + '</b><div id="' + i + '-cuadrito" class="d-flex" style="min-height:10px;" ></div></div>'
                    //onclick="anadirTeletrabajoDesp(' + i + ', ' + (fecha.getMonth() + 1).toString() + ', ' + fecha.getFullYear().toString() + ')"

                } else if (finSemana == "finSemana") {
                    htmlCalendario += '<div class=" diaDeLaSemana diaDeLaSemanaActivo ' + finSemana + '" id="' + i + '-calDay"><b class="numeroCalendario">' + i + '</b><div id="' + i + '-cuadrito" class="d-flex" style="min-height:10px;" ></div></div>'

                }



            }

            var huecosRestantes = 35 - (fecha.getDay() + fechaFinal.getDate())
            for (var i = 0; i < huecosRestantes; i++) {//cuadros blancos fin
                htmlCalendario += '<div class=" diaDeLaSemana diaVacio"></div>'
            }
            $("#calendario").html(htmlCalendario)
            marcarFiestas(fechaString, fechaStringFinal)
          /*  $("#divLoading").css("display", "none")*/
        }
        function anadirTeletrabajoDesp(idTele) {
            var html = ""
            if (idTele != 0) {

                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "/gestionTeletrabajo.aspx/cargarTeletrabajo",
                    data: '{"idTele":"' + idTele + '"}',
                    dataType: "json",
                    success: function (result) {
                        
                        var lTeletrabajo = JSON.parse(result.d.Result)
                        var tl = lTeletrabajo.ListadoEF[0]

                       html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                            "<p style='font-weight:bold'>Editar tramo de teletrabajo</p>" +
                            "<div style='display:flex; gap:10px; align-items:center'>" +
                            "<p style='margin:0'>Fecha de inicio: </p><input type='date' id='fechaAnadirTeletrabajoIni' value='"+tl.Fei.toString().substring(0,10)+"'/>" +
                           "<p style='margin:0'>Fecha de fin: </p><input type='date' id='fechaAnadirTeletrabajoFin' value='" + tl.Fef.toString().substring(0, 10) +"'/>" +
                            "<p style='margin:0'>Número de días: </p><input type='number' id='nuDiasAnadir' max='5' step='0' style='width: 60px;' min='1' value='"+tl.nuDias+"'/>" +
                            "</div>" +
                            "<div style='display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:20px'>" +
                           "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Lunes: </p><input type='checkbox' id='LuAn'" 
                            if(tl.lunes == true) {html+= " checked " }
                            html+= "/></div>" +
                            "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Martes: </p><input type='checkbox' id='MaAn'"
                        if (tl.martes == true) { html += " checked " }
                        html += "/></div>" +
                            "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Miercoles: </p><input type='checkbox' id='MiAn'"
                        if (tl.miercoles == true) { html += " checked " }
                        html+="/></div>" +
                            "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Jueves: </p><input type='checkbox' id='JuAn' "
                        if (tl.jueves == true) { html += " checked " }
                        html += "/></div>" +
                            "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Viernes: </p><input type='checkbox' id='ViAn' "
                        if (tl.viernes == true) { html += " checked " }
                        html+="/></div>" +
                            "</div>" +
                            "<div style='display:flex; gap:10px; align-items:center; margin-top:20px'>"
                        var excepcion = ""
                        if (tl.excepcion == true) {excepcion = " checked " }
                            html+="<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Excepción: </p> </p><input type='checkbox' id='ExAnadir' " + excepcion +"/></div>"
                            var motivo = ""
                        if (tl.motivo != null) {motivo=tl.motivo }
                            html+="<p style='margin:0'>Motivo: </p><input type='text' id='MotivoAnadir' value='" + motivo + "'/>" +
                            "</div>" +
                            "<div id='mensajeTeletrabajo' style='display:flex;justify-content:center'></div>"


                        html += "<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='PopupConfirmarEdicion("+idTele+")'>Confirmar</button>" +
                            "<button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'> Cancelar</button></div></div></div>"

                        $("#desplegableAnadirTeletrabajo").html(html)
                        $("#desplegableAnadirTeletrabajo").css("display", "flex")
                        $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
                        $("#desplegableAnadirTeletrabajo").css("align-items", "center")

                     },
                    error: function (result) {
                        alert('error occured');                      
                    },
                });

                //obtener el teletrabajo
            }
            else {
               html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                    "<p style='font-weight:bold'>Nuevo tramo de teletrabajo</p>" +
                    "<div style='display:flex; gap:10px; align-items:center'>" +
                    "<p style='margin:0'>Fecha de inicio: </p><input type='date' id='fechaAnadirTeletrabajoIni' value=''/>" +
                    "<p style='margin:0'>Fecha de fin: </p><input type='date' id='fechaAnadirTeletrabajoFin' value=''/>" +
                    "<p style='margin:0'>Número de días: </p><input type='number' id='nuDiasAnadir' max='5' step='0' style='width: 60px;' min='1' value='1'/>" +
                    "</div>" +
                    "<div style='display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:20px'>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Lunes: </p><input type='checkbox' id='LuAn' value=''/></div>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Martes: </p><input type='checkbox' id='MaAn' value=''/></div>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Miercoles: </p><input type='checkbox' id='MiAn' value=''/></div>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Jueves: </p><input type='checkbox' id='JuAn' value=''/></div>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Viernes: </p><input type='checkbox' id='ViAn' value=''/></div>" +
                    "</div>" +
                    "<div style='display:flex; gap:10px; align-items:center; margin-top:20px'>" +
                    "<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Excepción: </p> </p><input type='checkbox' id='ExAnadir' value=''/></div>" +
                    "<p style='margin:0'>Motivo: </p><input type='text' id='MotivoAnadir' value=''/>" +
                    "</div>" +
                    "<div id='mensajeTeletrabajo' style='display:flex;justify-content:center'></div>"

              
                html += "<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"CREAR/EDICION\",0)'>Confirmar</button>" +
                    "<button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'> Cancelar</button></div></div></div>"

                $("#desplegableAnadirTeletrabajo").html(html)
                $("#desplegableAnadirTeletrabajo").css("display", "flex")
                $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
                $("#desplegableAnadirTeletrabajo").css("align-items", "center")

            }  
           

        }
        function anularTeletrabajo(idTele) {
            var html = "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:210px;height: 150px;'><div><p>¿Desea anular este teletrabajo? Las picadas ya efectuadas en este tramo de teletrabajo seguirán en vigor.</p></div>" +
                "<div style='display:flex;padding-top: 20px;gap:10px;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"ELIMINAR\", " + idTele + ")'>Confirmar</button><button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'>Cancelar</button></div></div>"
            $("#desplegableAnadirTeletrabajo").html(html)
            $("#desplegableAnadirTeletrabajo").css("display", "flex")
            $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
            $("#desplegableAnadirTeletrabajo").css("align-items", "center")

        }
        function cerrarDespTeletrabajo() {
            $("#desplegableAnadirTeletrabajo").html("")
            $("#desplegableAnadirTeletrabajo").css("display", "none")
        }
        function vaciarDespTeletrabajo() {
            $("#ExAnadir")[0].checked = false
            $("#nuDiasAnadir").val(1)
            $("#LuAn")[0].checked = false
            $("#MaAn")[0].checked = false
            $("#MiAn")[0].checked = false
            $("#JuAn")[0].checked = false
            $("#ViAn")[0].checked = false
            $("#MotivoAnadir").val("")
            $("#fechaAnadirTeletrabajoIni").val("")
            $("#fechaAnadirTeletrabajoFin").val("")
        }
        function ConfirmarTeletrabajo(modo, id) {
            var idtt = id
            if (modo == "CREAR/EDICION") {             
                var excepcion = $("#ExAnadir")[0].checked
                var nuDias = $("#nuDiasAnadir").val()
                var lun = $("#LuAn")[0].checked
                var Mar = $("#MaAn")[0].checked
                var Mie = $("#MiAn")[0].checked
                var Jue = $("#JuAn")[0].checked
                var Vie = $("#ViAn")[0].checked
                var motivo = $("#MotivoAnadir").val()
                var Fei = $("#fechaAnadirTeletrabajoIni").val()
                var Fef = $("#fechaAnadirTeletrabajoFin").val()

                var htmlRespuesta = ""
                var fechaInicio = new Date($('#fechaAnadirTeletrabajoIni').val())
                fechaInicio = ((fechaInicio.getTime() * 10000) + 621355968000000000);
                var fechaFinal = new Date($('#fechaAnadirTeletrabajoFin').val())
                fechaFinal = ((fechaFinal.getTime() * 10000) + 621355968000000000);

                if (fechaInicio > fechaFinal) {
                    htmlRespuesta = "<p style='color:red;font-weight:bold'>La fecha de inicio del tramo debe ser anterior a la de final</p>"
                    $("#mesajeTeletrabajo").val(htmlRespuesta)
                    return
                }
                $.ajax({
                    type: "post",
                    url: "/gestionTeletrabajo.aspx/ModTele",
                    data: '{"id":"' + idtt + '","excepcion":"' + excepcion + '","nuDias":"' + nuDias + '","lunes":"' + lun + '","martes":"' + Mar + '","miercoles":"' + Mie + '", "jueves": "' + Jue + '","viernes":"' + Vie + '","motivo":"' + motivo + '","Fei":"' + Fei + '","Fef":"' + Fef + '"}',
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (result) {
                        if (result.d != "") {
                            var resultado = JSON.parse(result.d.Result)
                            if (resultado.resultado == "0") {
                                CambiarMes(+0)
                                var htmlResult = "<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
                                cerrarDespTeletrabajo()
                                CerrarDespConfirmar()
                                //vaciarDespTeletrabajo()
                                $("#mensajeTeletrabajo2").html(htmlResult)
                            }
                            else {
                                var htmlResult = "<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
                                $("#mensajeTeletrabajo").html(htmlResult)
                            }
                        }
                    },
                    error: function (result) {
                        CerrarDespConfirmar()
                        cerrarDespTeletrabajo()
                        alert('error occured');
                    },

                });
            }
            else if (modo == "ELIMINAR") {
                $.ajax({
                    type: "post",
                    url: "/gestionTeletrabajo.aspx/DelTele",
                    data: '{"id":"' + idtt + '"}',
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (result) {
                        if (result.d != "") {
                            var resultado = JSON.parse(result.d.Result)
                            if (resultado.resultado == "0") {
                                CambiarMes(+0)
                                var htmlResult = "<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
                                cerrarDespTeletrabajo()
                                //vaciarDespTeletrabajo()
                                $("#mensajeTeletrabajo2").html(htmlResult)
                            }
                            else {
                                var htmlResult = "<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
                                $("#mensajeTeletrabajo").html(htmlResult)
                            }
                        }
                    },
                    error: function (result) {
                        cerrarDespTeletrabajo()
                        alert('error occured');
                    },

                });
            }
        }
        function PopupConfirmarEdicion(id) {
            var html = ""
            html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                "<p style=' text-align:center'>¿Esta seguro/a de editar este tramo de teletrabajo? las picadas ya efectuadas en este tramo se mantendrán</p>" +
            "<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"CREAR/EDICION\","+id+")'>Confirmar</button>" +
                "<button type='button' class='btnGris' onclick='CerrarDespConfirmar()'> Cancelar</button></div></div></div>"
            $("#desplegableConfirmarTeletrabajo").html(html)
            $("#desplegableConfirmarTeletrabajo").css("display", "flex")
            $("#desplegableConfirmarTeletrabajo").css("justify-content", "center")
            $("#desplegableConfirmarTeletrabajo").css("align-items", "center")
        }
        function CerrarDespConfirmar() {
            $("#desplegableConfirmarTeletrabajo").html("")
            $("#desplegableConfirmarTeletrabajo").css("display", "none")
        }
    </script>

</asp:Content>
