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

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
    <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="pag">
        <div class="row">
            <div class="col">
                <p class="tituloMobile">Introducir picada a personal</p>
                <div class="migasDePan">
                    <ul>
                        <li class="migaActiva">/ Control Horario</li>
                        <li class="migaActiva">/ Introducir picada a personal</li>
                    </ul>
                </div>

                <div class="secPicada d-flex justify-content-center align-items-center">

                    <div class="d-flex flex-column justify-content-between mt-3 cajaIntPicada" style="gap: 20px">
              <%--          <div class="incidencias">
                            <p style="margin-right: 15px; font-family: 'Satoshi';">Persona:</p>
                            <dx:ASPxComboBox CssClass="selectIn" Width="100%" TextField="Nombre" ValueField="Dni" ID="cbPersonas" runat="server">
                            </dx:ASPxComboBox>
                        </div>--%>
                        <div id="selPersonasDiv" style="display: flex; margin-inline: 0" class="justify-content-between selectInHora" runat="server">
                            
                            <%--<dx:ASPxComboBox ID="selPersonas" runat="server" CssClass="selectIn w-100"></dx:ASPxComboBox>--%>
                            <div id="selPerDiv" runat="server" class="selectIn w-100"></div>

                        </div>

                        <div class="d-flex" style="gap: 15px">
                            <p style="margin: 0; font-size: 19px;">Mostrar teletrabajo ya disfrutado</p>
                            <input type="checkbox" id="chbYaDisfrutado" onchange="obtenerTT()" /></div>
                        <div style="display: flex; gap: 15px">
                            <%--<div>
                                <input type="button" value="Buscar" class="btnAzul" id="btnBuscar" onclick="obtenerTT()" /></div>--%>
                            
                                <input type="button" value="Añadir nueva excepción" class="btnAzul" id="btnNuevaExcepcion" style="width:100%" onclick="abrirPopUpAnadirEditar(0)" />
                        </div>
                    </div>

                </div>
                <p id="mensaje"></p>
                <div id="tablaTT">
                </div>

            </div>
        </div>
    </div>
    <script>
        window.addEventListener('load', function () {
            obtenerTT()
        })
        function eliminarExcepcion(idTT) {
            $.ajax({
                type: "post",
                url: "/gestionTeletrabajoPers.aspx/EliminarTT",
                data: '{"idTT":"' + idTT + '"}',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (result) {
                    var TT = JSON.parse(result.d.Result)
                    var htmlResult = "<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + TT.mensaje + "</p>"
                    obtenerTT()
                    CerrarPopUpAnadir()
                    //vaciarDespTeletrabajo()
                    $("#mensaje").html(htmlResult)
                },
                error: function (result) {
                    obtenerTT()
                    CerrarPopUpAnadir()
                    $("#mensaje").html("<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + TT.mensaje.toString() + "</p>")
                    alert('error occured');
                },
            });
        }
        function confirmarEliminar(idTT) {
            var html = "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                "<div class='row'>" +
                "<div class='col-12 d-flex' style='gap:15px'>" +
                "<p style='margin:0'>¿Esta seguro/a de eliminar este tramo de teletrabajo? Los picadas ya creadas en este tramo se mantendrán</p>" +
                "</div>" +
                "<div class='col-12' style='display:flex; gap:15px'>" +
                "<input type='button' class='btnAzul' value='Confirmar' onclick='eliminarExcepcion(" + idTT + ")' />" +
                "<input type='button' class='btnGris' value='Cancelar' onclick='CerrarPopUpAnadir()' />" +
                "</div></div></div>"
            $("#desplegableAnadirTeletrabajo").html(html)
            $("#desplegableAnadirTeletrabajo").css("display", "flex")
            $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
            $("#desplegableAnadirTeletrabajo").css("align-items", "center")
        }
        function CerrarPopUpAnadir() {
            $("#desplegableAnadirTeletrabajo").html("")
            $("#desplegableAnadirTeletrabajo").css("display", "none")

        }
        function abrirPopUpAnadirEditar(idTT) {
            var html = ""
            if (idTT == 0) {
                html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                    "<div style='display:flex; gap:30px'>" +
                    "<div class='d-flex' style='gap:15px'>" +
                    "<p style='margin:0'>Fecha inicio</p><input type='date' id='inpFeIn' />" +
                    "</div>" +
                    "<div class='d-flex' style='gap:15px'>" +
                    "<p style='margin:0'>Fecha fin</p><input type='date' id='inpFefi' />" +
                    "</div>" +
                    "<div class='d-flex' style='gap:15px'>" +
                    "<p style='margin:0'>motivo</p><input type='text' id='txtMotivo' />" +
                    "</div></div>" +
                    "<div style='width:100%; justify-content:end; display:flex; gap:15px'>" +
                    "<input type='button' class='btnAzul' value='Confirmar' onclick='AnadirEditarExcepcionTT(0)' />" +
                    "<input type='button' class='btnGris' value='Cancelar' onclick='CerrarPopUpAnadir()' />" +
                    "</div>" +
                    "<div id='mensajePopup' style='width:100%'></div>"
                "</div>"
                $("#desplegableAnadirTeletrabajo").html(html)
                $("#desplegableAnadirTeletrabajo").css("display", "flex")
                $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
                $("#desplegableAnadirTeletrabajo").css("align-items", "center")
            }
            else {
                var idPer = $("#selPer").val()
                $.ajax({
                    type: "post",
                    url: "/gestionTeletrabajoPers.aspx/TTbyId",
                    data: '{"idTT":"' + idTT + '", "idPer":"' + idPer + '"}',
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (result) {
                        var resultado = JSON.parse(result.d.Result)
                        var TT = resultado.listado[0]
                        if (resultado.listado.length > 0) {
                            html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                                "<div style='display:flex; gap:30px'>" +
                                "<div class='d-flex' style='gap:15px'>" +
                                "<p style='margin:0'>Fecha inicio</p><input type='date' id='inpFeIn' value='" + TT.fechaInicio.toString().substring(0, 10) + "' />" +
                                "</div>" +
                                "<div class='d-flex' style='gap:15px'>" +
                                "<p style='margin:0'>Fecha fin</p><input type='date' id='inpFefi' value='" + TT.fechaFin.toString().substring(0, 10) + "' />" +
                                "</div>" +
                                "<div class='d-flex' style='gap:15px'>" +
                                "<p style='margin:0'>motivo</p><input type='text' id='txtMotivo' value='" + TT.motivo + "'/>" +
                                "</div></div>" +
                                "<div style='width:100%; justify-content:end; display:flex; gap:15px'>" +
                                "<input type='button' class='btnAzul' value='Confirmar' onclick='AnadirEditarExcepcionTT(" + TT.idExcepTel.toString() + ")' />" +
                                "<input type='button' class='btnGris' value='Cancelar' onclick='CerrarPopUpAnadir()' />" +
                                "</div></div>"
                            $("#desplegableAnadirTeletrabajo").html(html)
                            $("#desplegableAnadirTeletrabajo").css("display", "flex")
                            $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
                            $("#desplegableAnadirTeletrabajo").css("align-items", "center")

                        }
                        else {
                            $("#mensaje").html("<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje.toString() + "</p>")
                            alert('error occured');
                        }


                    },
                    error: function (result) {
                        $("#mensaje").html("<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + result.toString() + "</p>")
                        alert('error occured');
                    },
                });

                //html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
                //    "<div style='display:flex; gap:30px'>" +
                //    "<div class='d-flex' style='gap:15px'>" +
                //    "<p style='margin:0'>Fecha inicio</p><input type='date' id='inpFeIn' />" +
                //    "</div>" +
                //    "<div class='d-flex' style='gap:15px'>" +
                //    "<p style='margin:0'>Fecha fin</p><input type='date' id='inpFefi' />" +
                //    "</div>" +
                //    "<div class='d-flex' style='gap:15px'>" +
                //    "<p style='margin:0'>motivo</p><input type='text' id='txtMotivo' />" +
                //    "</div></div>" +
                //    "<div style='width:100%; justify-content:end; display:flex; gap:15px'>" +
                //    "<input type='button' class='btnAzul' value='Confirmar' onclick='AnadirEditarExcepcionTT(0)' />" +
                //    "<input type='button' class='btnGris' value='Cancelar' onclick='CerrarPopUpAnadir()' />" +
                //    "</div></div></div>"
                $("#desplegableAnadirTeletrabajo").html(html)
                $("#desplegableAnadirTeletrabajo").css("display", "flex")
                $("#desplegableAnadirTeletrabajo").css("justify-content", "center")
                $("#desplegableAnadirTeletrabajo").css("align-items", "center")
            }
        }
        function AnadirEditarExcepcionTT(idTT) {
            $("#mensaje").html("")
            var Fei = new Date($('#inpFeIn').val())
            Fei = ((Fei.getTime() * 10000) + 621355968000000000);
            var Fef = new Date($('#inpFefi').val())
            Fef = ((Fef.getTime() * 10000) + 621355968000000000);
            var motivo = $("#txtMotivo").val()
            var idPers = $("#selPer").val()
            if (Fei > Fef) {
                htmlRespuesta = "<p style='color:red;font-weight:bold'>La fecha de inicio del tramo debe ser anterior a la de final</p>"
                $("#mensajePopup").html(htmlRespuesta)
                return
            }

            $.ajax({
                type: "post",
                url: "/gestionTeletrabajoPers.aspx/AnadirEditarTT",
                data: '{"idTT":"' + idTT.toString() + '","Fei":"' + Fei.toString() + '","Fef":"' + Fef.toString() + '","motivo":"' + motivo + '", "idPers":"' + idPers + '"}',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (result) {
                    var TT = JSON.parse(result.d.Result)
                    if (TT.resultado == 0) {
                        $("#mensaje").html("<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + TT.mensaje + "</p>")
                        obtenerTT()
                        CerrarPopUpAnadir()
                    }
                    else {
                        $("#mensaje").html("<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + TT.mensaje + "</p>")
                        obtenerTT()
                        CerrarPopUpAnadir()
                    }
                },
                error: function (result) {
                    $("#mensaje").html("<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + result.toString() + "</p>")
                    alert('error occured');
                },
            });

        }
        function obtenerTT() {
            $("#mensaje").html("")
            $("#tablaTT").html("")
            var chbTodas = false
            if ($("#chbYaDisfrutado")[0].checked == true) { chbTodas = true }
            var idPer = $("#selPer").val()
            $.ajax({
                type: "post",
                url: "/gestionTeletrabajoPers.aspx/ObtTT",
                data: '{"idPer":"' + idPer.toString() + '","todas":"' + chbTodas.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                async: true,
                success: function (result) {
                    if (result.d != "") {
                        var resultado = JSON.parse(result.d.Result)
                        if (resultado.listado != null && resultado.listado.length > 0) {

                            var htmlResult = "<div class='tablaPicadas'><table>" +
                                "<tr>" +
                                "<th>Fecha inicio</th>" +
                                "<th>Fecha final</th>" +
                                "<th>Motivo</th>" +
                                "<th></th>" +
                                "<th></th>" +
                                "</tr>"

                            for (var i = 0; i < resultado.listado.length; i++) {
                                var tt = resultado.listado[i]
                                htmlResult += "<tr>" +
                                    "<td>" + fechaString(tt.fechaInicio.toString()) + "</td>" +
                                    "<td>" + fechaString(tt.fechaFin.toString()) + "</td>" +
                                    "<td>" + tt.motivo + "</td>" +
                                    "<td class='celdaBoton' onclick='abrirPopUpAnadirEditar(\"" + tt.idExcepTel.toString() + "\")'>Editar</td>" +
                                    "<td class='celdaBoton' onclick='confirmarEliminar(\"" + tt.idExcepTel.toString() + "\")'>Eliminar</td>" +
                                    "</tr>"
                            }
                            htmlResult += "</table></div>"
                            $("#tablaTT").html(htmlResult)
                        }
                        else {
                            var htmlResult = "<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
                            $("#mensaje").html(htmlResult)
                        }
                    }
                },
                error: function (result) {
                    CerrarDespConfirmar()
                    cerrarDespTeletrabajo()
                    alert('error occured');
                },

            });

        }
        function fechaString(fecha) {
            var str = fecha.substring(8, 10) + "/" + fecha.substring(5, 7) + "/" + fecha.substring(0, 4)
            return str
        }
    </script>

</asp:Content>
