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

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server" ClientIDMode="Static">
    <div>
        <input type="submit" onclick="btnNada()" value="piedra" style="position: absolute; top: -8001px;" />
        <%-- TABS --%>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-intPicada-tab" style="color: black; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important;" data-toggle="tab" href="#intPicada" role="tab" aria-controls="intPicada" aria-selected="true">Introducir Picada</a>
                <a class="nav-item nav-link" id="nav-intIncidencia-tab" style="color: black; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important;" data-toggle="tab" href="#intIncidencia" role="tab" aria-controls="intIncidencia" aria-selected="false">Introducir Incidencia</a>
                <a class="nav-item nav-link" id="nav-listPicada-tab" style="color: black; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important;" data-toggle="tab" href="#listPicada" role="tab" aria-controls="listPicada" aria-selected="false">Listado de Picadas</a>
            </div>
        </nav>



        <div class="tab-content" id="nav-tabContent">

            <%-- INTRODUCIR PICADA --%>

            <div class="tab-pane fade active" id="intPicada" role="tabpanel" aria-labelledby="nav-intPicada-tab">
                <div class="secPicada d-flex justify-content-center align-items-center">
                    <div class="d-flex flex-column justify-content-center mt-3">
                        <div id="fechaActual" style="margin: auto" runat="server">
                            <p>Fecha / Hora de Picada: <span id="fechaHoraPicada"></span></p>
                        </div>
                        <div class="incidencias" style="display: block;">
                            <p style="margin-right: 15px;">Incidencia:</p>
                            <select class="selectIn" id="selIncidencia" runat="server">
                            </select>
                        </div>
                        <div class="d-flex justify-content-center">
                            <dx:BootstrapButton runat="server" ID="btnPicar" Text="Picar" AutoPostBack="false" CssClasses-Control="btnVerde btnAlargado">
                            </dx:BootstrapButton>
                        </div>
                        <div id="mensajePicada" runat="server">
                        </div>

                    </div>
                </div>
            </div>

            <%-- INTRODUCIR INCIDENCIA --%>

            <div class="tab-pane fade" id="intIncidencia" role="tabpanel" aria-labelledby="nav-intIncidencia-tab">
                <div class="secPicada d-flex justify-content-center align-items-center">
                    <div class="row flex-column justify-content-center mt-3" style="max-width: 100%;">
                        <div id="listIncidencia" runat="server">
                            <p id="mensajeIncidencia" runat="server"></p>
                            <div class="row columna justify-content-between IntroducirFechas" style="max-width: 100%; margin-top: 0px;">
                                <div class="row columna selectInHora justify-content-between">
                                    <p>Fecha<span style="color: red">*</span></p>
                                    <div class="divInpHora row">
                                        <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 id="inpFechaInicioIncidencia" class="inFecha" runat="server" type="date" />
                                        </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 id="inpFechaFinIncidencia" class="inFecha" runat="server" type="date" />
                                        </div>

                                    </div>
                                </div>
                                <div style="width: 100%">
                                    <hr />
                                </div>
                                <div class="row justify-content-center" style="min-width: 100%;">
                                    <div class="incidencias" style="width: 100%;">
                                        <p style="margin-right: 15px; margin-top: 0px; margin-bottom: 0.5rem !important">Incidencia<span style="color: red;">*</span>:</p>
                                        <dx:ASPxComboBox TextField="Descripcion" ValueField="idIncidencias" runat="server" ID="selIncidenciaNoReloj"></dx:ASPxComboBox>
                                        <%--<select class="selectIn" id="selIncidenciaNoReloj" runat="server"> </select>--%>
                                    </div>
                                </div>
                                <div style="width: 100%">
                                    <hr />
                                </div>
                                <div class="columna selectInHora justify-content-between">
                                    <p>Horario mañana</p>
                                    <div class="row divInpHora">
                                        <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="totalHoras()" id="inpIniManana" 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="totalHoras()" id="inpFinManana" 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="inpTotalManana" type="time" runat="server" class="inHora" style="color: grey !important" readonly="true" />
                                        </div>

                                    </div>

                                </div>
                                <div style="width: 100%">
                                    <hr />
                                </div>
                                <div class="columna selectInHora justify-content-between">
                                    <p>Horario tarde</p>
                                    <div class="row divInpHora">
                                        <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="totalHorasTarde()" id="inpIniTarde" 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="totalHorasTarde()" id="inpFinTarde" 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="inpTotalTarde" type="time" runat="server" class="inHora" style="color: grey !important" readonly="true" />
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div style="width: 100%">
                                <hr />
                            </div>
                            <div class="selectIn">
                                <p class="txtSobreInput">Observaciones</p>
                                <textarea cols="30" rows="5" class="selectIn wideInput" id="inpObservaciones" type="text" runat="server" />
                            </div>
                            <div class="selectIn">
                                <p class="txtSobreInput">Expediente</p>
                                <input class="selectIn" id="inpExpediente" type="text" runat="server" />
                            </div>



                            <div class="row justify-content-center" style="width: 100%; margin-top: 1rem;">
                                <dx:BootstrapButton runat="server" ID="btnIntIncidencia" Text="Introducir Incidencia" AutoPostBack="false" CssClasses-Control=" btnVerde btnAlargado">
                                </dx:BootstrapButton>
                            </div>
                        </div>
                        <p style="margin-top: 15px; font-size: 10px"><span style="color: red">*</span> Campos necesarios</p>

                    </div>


                </div>
            </div>


            <%-- LISTADO DE PICADAS --%>

            <div class="tab-pane fade" id="listPicada" role="tabpanel" aria-labelledby="nav-listPicada-tab">

                <div class="d-flex-column justify-content-center">

                    <div class="row IntroducirFechas align-items-center wrap" style="width: 100%; margin-left: auto !important; margin-right: auto !important; margin-top: 25px !important;">

                        <p style="margin-top: 16px; margin-bottom: 0px; line-height: 35px">Del</p>
                        <input id="inpFechaInicio" class="inputFecha" style="margin-top: 16px;" value="2022-08-13" runat="server" type="date" />


                        <p style="margin-top: 16px; margin-bottom: 0px; line-height: 35px;">al</p>
                        <input id="inpFechaFin" style="margin-top: 16px;" class="inputFecha" runat="server" type="date" />

                        <dx:BootstrapButton runat="server" ID="btnFechas" Text="Buscar" AutoPostBack="false" CssClasses-Control="btnFecha btnVerde btnAlargado">
                        </dx:BootstrapButton>
                    </div>
                    <div class="row">
                        
                    <button id="btnImprimir" class="btn btnVerde" onclick="Imprimir()" runat="server">
                        <img src="Content/images/print.svg" style="height: 15px; width: auto; margin-right: 5px;" />
                        Imprimir</button>

                        <a class='btnVerde btn' id='mostrarGeneral' onclick='botonMostrarTodo("mostrarGeneral")' role='button' style='margin-left:15px;text-align:center !important' runat="server">Mostrar todo</a>

                       </div>
                    <p id="mensaje" runat="server"></p>


                    <div id="tablaPicadas" runat="server">
                    </div>


                </div>
            </div>
        </div>


        <div id="tablaImpresion" class="myDivToPrint" style="display: none" runat="server"></div>

        <script>


            /***MANTENER LA TAB ACTIVA ABIERTA TRAS REFRESCAR***/

            $(document).ready(function () {
                $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
                    localStorage.setItem('activeTab', $(e.target).attr('href'));
                });
                var activeTab = localStorage.getItem('activeTab');
                if (activeTab) {
                    $('#nav-tab a[href="' + activeTab + '"]').tab('show');
                }
            });


            /***RELOJ PICADAS***/

            function clockTick() {
                var currentTime = new Date(),
                    month = (currentTime.getMonth() + 1).toString(),
                    day = currentTime.getDate().toString(),
                    year = currentTime.getFullYear(),
                    hours = currentTime.getHours(),
                    minutes = currentTime.getMinutes().toString(),
                    seconds = currentTime.getSeconds(),


                    text = (day.padStart(2, "0") + "/" + month.padStart(2, "0") + "/" + year + ' ' + hours + ':' + minutes.padStart(2, "0"));


                document.getElementById('fechaHoraPicada').innerHTML = text;
            }

            setInterval(clockTick, 1000);

            /***LISTADO DE PICADAS - NO SE PUEDE INTRODUCIR FECHA DE INICIO > FECHA FINAL***/

            let startInput = document.getElementById('inpFechaInicio');
            let endInput = document.getElementById('inpFechaFin');
            let messageDiv = document.getElementById('mensaje');
            let submitButton = document.getElementById('btnFechas');

            let compare = () => {
                let startValue = (new Date(startInput.value)).getTime();
                let endValue = (new Date(endInput.value)).getTime();

                if (endValue < startValue) {
                    messageDiv.innerHTML = 'Asegurese que la fecha de inicio es anterior a la de final';
                    submitButton.disabled = true;
                } else {
                    messageDiv.innerHTML = '';
                    submitButton.disabled = false;
                }
            };


            /* **CALCULAR TOTAL DE HORAS***/

            function totalHoras() {
                if (document.getElementById('inpIniManana').value != "00:00") {
                    var ini = document.getElementById('inpIniManana').value
                    var iniHoras = (ini.substring(0, 2) * 60) * 60
                    var iniMins = ini.slice(-2) * 60
                    ini = iniHoras + iniMins

                    var end = document.getElementById('inpFinManana').value
                    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")
                    document.getElementById('inpTotalManana').value = total
                }
            }
            function totalHorasTarde() {
                if (document.getElementById('inpIniTarde').value != "00:00") {
                    var ini = document.getElementById('inpIniTarde').value
                    var iniHoras = (ini.substring(0, 2) * 60) * 60
                    var iniMins = ini.slice(-2) * 60
                    ini = iniHoras + iniMins

                    var end = document.getElementById('inpFinTarde').value
                    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")
                    document.getElementById('inpTotalTarde').value = total
                }
            };

           
            /***IMPRIMIR***/

            function Imprimir() {
                var mywindow = window.open('', 'PRINT', 'height=400,width=600');
                mywindow.document.write('<html><head>');
                mywindow.document.write('</head><body >');
                mywindow.document.write(document.getElementById('tablaImpresion').innerHTML);
                mywindow.document.write('</body></html>');

                mywindow.document.close(); // necessary for IE >= 10
                mywindow.focus(); // necessary for IE >= 10*/

                mywindow.print();
                mywindow.close();

                return true;
            };

            /***MOSTRAR***/

            function botonMostrar(id, idClase) {

                var tablas = document.getElementsByClassName("todasTablas");
                tablas = Array.from(tablas);
                var tablasColapsadas = [];
                var estaTabla = document.getElementsByClassName(idClase);
                estaTabla = Array.from(estaTabla);

                for (var i = 0; i < tablas.length; i++) {
                    if (tablas[i].classList.contains('show') == false) {
                        tablasColapsadas.push(tablas[i])
                    }
                }
                if (tablas.length == tablasColapsadas.length) {
                    document.getElementById('mostrarGeneral').innerText = "Ocultar todo"
                }
                else {
                    document.getElementById('mostrarGeneral').innerText = "Mostrar todo"
                }
           
            var link = document.getElementById(id)
            var texto = link.innerText
            switch (texto) {
                case "Mostrar":
                    estaTabla.forEach(element => element.classList.add('show'))
                    //console.log("entra")
                    texto = "Ocultar"
                    break
                case "Ocultar":
                    estaTabla.forEach(element => element.classList.remove('show'))
                    //document.getElementsByClassName(idClase).classList.remove('show')
                    //console.log("entra")
                    texto = "Mostrar"
                    break
               }
            link.innerText = texto
            document.getElementById('mostrarGeneral')
            };


            function botonMostrarTodo(id) {
                var tablas = document.getElementsByClassName("todasTablas")
                tablas = Array.from(tablas)
                var link = document.getElementById(id)
                var linkPersona = document.getElementsByClassName('btnPersona')
                linkPersona = Array.from(linkPersona)
                var texto = link.innerText
                var textoBtnPersona = linkPersona.innerText

                switch (texto) {
                    case "Mostrar todo":
                        texto = "Ocultar todo"
                        textoBtnPersona = "Ocultar"
                        for (var i = 0; i < tablas.length; i++) {
                            if (tablas[i].classList.contains('show') == true) {

                            }
                            else {
                                tablas[i].classList.add('show')
                            }
                        }
                        break
                    case "Ocultar todo":
                        texto = "Mostrar todo"
                        textoBtnPersona = "Mostrar"
                        for (var x = 0; x < tablas.length; x++) {
                            if (tablas[x].classList.contains('show') == true) {
                                tablas[x].classList.remove('show')
                            }
                            
                        }
                        break
                        
                }
                linkPersona.forEach(element => element.innerHTML = textoBtnPersona)
                link.innerText = texto
            };
               


        </script>
</asp:Content>
