<%-- TABS --%>

<%-- INTRODUCIR PICADA --%>

Fecha / Hora de Picada:

Incidencia:

<%-- INTRODUCIR INCIDENCIA --%>

Fecha*

Inicio

Final

Incidencia*:

<%----%>

Horario mañana

Inicio

Final

Total

Horario tarde

Inicio

Final

Total

Observaciones

</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 --%>

<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>
            </div>
        </div>

/***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>