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

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
    <div id="intTeleTrabajo" class="row pag">
        <div id="navLateral" class="col-3">
            <ul>
                <li id='intPicadaBL' runat="server" class='obtListLat'><a onclick="redirigir()" href="intPicada.aspx">Introducir picada</a></li>
                <li id='intTeletrabajoBL' runat="server" class='obtListLat  listActivo'><a onclick="redirigir()" href="intTeletrabajo.aspx">Introducir teletrabajo</a></li>
                <li id='listTeletrabajoBL' class='obtListLat'><a onclick="redirigir()" href="listTeletrabajo.aspx">Listado teletrabajo</a></li>
            </ul>

        </div>
        <div class="col">
            <p class="tituloMobile">Introducir teletrabajo</p>
            <div class="migasDePan">
                <ul>
                    <li class="migaActiva">/ Teletrabajo</li>
                    <li class="migaActiva">/ Introducir teletrabajo</li>
                </ul>
            </div>

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

            <%-- <div class="DesgIncAtras" style="position: fixed; top: 125px; z-index: 10">
        <input type='button' value='Atrás' style='width: 100%;' onclick="history.back()" class='btnAtras' />
    </div>--%>

            <%--<h2 class="titularOpcControlHorario">Teletrabajo</h2>--%>
            <div class="secPicada d-flex">

                <div class="d-flex row justify-content-center mt-3">

                    <div class="divListadoTeletrabajo col-md-6" id="divListTeletrabajo"></div>

                    <div id="areaAgenda" class="agenda col-md-6 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="col-md-12" id="btnVerMasAgenda"></div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- <div class="d-flex justify-content-center">
                    <input type="button" style="width: 50%;margin-top: 50px;" class="btnOAAFAzul" onclick="Picar()" value="Enviar" />
                </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 (f) {

            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) {
            $("#divListTeletrabajo").css("display", "none")
            $("#divContenidoAgenda").css("display", "none")
            fechaIniMes.setMonth(fechaIniMes.getMonth() + numero)
            fechaFinMes.setMonth(fechaIniMes.getMonth() + 1)
            fechaFinMes.setDate(0)

            var fechaString = fechaIniMes.getFullYear() + "-" + (fechaIniMes.getMonth() + 1) + "-01"
            var fechaStringFinal = fechaFinMes.getFullYear() + "-" + (fechaFinMes.getMonth() + 1) + "-" + fechaFinMes.getDate()
            $("#txtAgendaMesAnyo").text(monthNames[fechaIniMes.getMonth()] + " " + fechaIniMes.getFullYear())

            //$.ajax({
            //    type: "post",
            //    contentType: "application/json",
            //    url: "../ParlamentoIntranet.aspx/cargarListaTeletrabajo",
            //    data: '{"fechaInicio":"' + fechaString + '","fechaFinal":"' + fechaStringFinal + '"}',
            //    dataType: "json",
            //    success: function (result) {

            //        var listadoTeletrabajo = JSON.parse(result.d.Result)
            //        //sessionStorage.setItem("listUsuarios", usuarios)
            //        var html = ""
            //        var contadorPersona = 0

            //        var listUsuarios = listadoTeletrabajo.ListadoEF.ListaPersonas
            //        if (listUsuarios.length > 0) {
            //            for (var i = 0; i < listUsuarios.length; i++) {
            //                html += "<div class=''><table class='table table-striped'><tr>" +
            //                    "<th>Fecha</th>" +
            //                    "<th>Tarea</th>" +
            //                    "<th>Anular</th>"
            //                "</tr>"
            //                var lisTeletrabajos = listUsuarios[i].LisAsistencias

            //                if (lisTeletrabajos.length != 0) {
            //                    for (var x = 0; x < lisTeletrabajos.length; x++) {
            //                        var fecha = new Date(lisTeletrabajos[x].FechaInicio)

            //                        html += "<tr id='" + lisTeletrabajos[x].idAsistencia.toString() + "' >" +
            //                            "<td class='listaTeletrabajo' onclick='anadirTeletrabajoDesp(" + fecha.getDate().toString() + ", " + (fecha.getMonth() + 1).toString() + ", " + fecha.getFullYear().toString() + ")' id='" + fecha.getDate().toString() + "-fecha'>" + fecha.getDate().toString().padStart("2", 0) + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-" + fecha.getFullYear().toString() + "</td>"
            //                        if (lisTeletrabajos[x].Observaciones == null) {
            //                            html += "<td class='listaTeletrabajo' onclick='anadirTeletrabajoDesp(" + fecha.getDate().toString() + ", " + (fecha.getMonth() + 1).toString() + ", " + fecha.getFullYear().toString() + ")' id='" + fecha.getDate().toString() + "-desc'></td>"
            //                        }
            //                        else {
            //                            html += "<td class='listaTeletrabajo' onclick='anadirTeletrabajoDesp(" + fecha.getDate().toString() + ", " + (fecha.getMonth() + 1).toString() + ", " + fecha.getFullYear().toString() + ")' id='" + fecha.getDate().toString() + "-desc'>" + lisTeletrabajos[x].Observaciones + "</td>"
            //                        }
            //                        html += "<td class='listaTeletrabajoCheck' style='text-align: center;' onclick='anularTeletrabajo(" + fecha.getDate().toString().padStart("2", 0) + ", " + (fecha.getMonth() + 1).toString() + ", " + fecha.getFullYear().toString() + ", " + lisTeletrabajos[x].idAsistencia.toString() + ")'><i style='min-height:30px' class='fa-solid fa-xmark'></i></td></tr>"

            //                        $("#" + fecha.getDate() + "-calDay").addClass("diaConTeletrabajo")
            //                        $("#" + fecha.getDate() + "-calDay").attr("idAsis", lisTeletrabajos[x].idAsistencia.toString())
            //                    }
            //                }
            //                html += "</table></div>"
            //            }
            //        }
            //        else {
            //            html += "<div class=''><table class='table table-striped'><tr>" +
            //                "<th>Fecha</th>" +
            //                "<th>Tarea</th>" +
            //                "<th>Anular</th>"
            //            "</tr>"
            //            html += "<tr><td class='listaTeletrabajo' colspan='3' style='color:red; font-weight:bold;text-align:center'>No hay teletrabajos este mes</td>"
            //            html += "</table></div>"
            //        }
            //        $("#divListTeletrabajo").html(html)
            //    },
            //    error: function (result) {
            //        alert('error occured');
            //        alert(result.responseText);
            //    },
            //});
            ObtenerFechaAgenda(fechaString)
            $("#divListTeletrabajo").css("display", "")
            $("#divContenidoAgenda").css("display", "")
        }

        function marcarFiestas(fechaInicio, fechaFinal) {

            //let fechaFormato = fecha + "T00:00:00"
            //let dia = parseInt(fecha.split("-")[2], 10)

            //    $.ajax({
            //        type: "post",
            //        contentType: "application/json",
            //        url: "../ParlamentoIntranet.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);
            //            }
            //        },
            //        error: function (result) {
            //            alert('error occured');
            //            alert(result.responseText);
            //        },
            //    });
        }

        function ObtenerFechaAgenda(fecha) {
            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" onclick="anadirTeletrabajoDesp(' + i + ', ' + (fecha.getMonth() + 1).toString() + ', ' + fecha.getFullYear().toString() + ')"><b class="numeroCalendario">' + i + '</b></div>'
                    //< div id = "' + i + '-cuadrito" class="d-flex" style = "min-height:10px;" ></div >

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

        }


    </script>
</asp:Content>
