<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.master" CodeBehind="intIncidencia.aspx.vb" Inherits="WebIntranet.intIncidencia" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server" ClientIDMode="Static">

      <div id="intIncidencia">
                <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="btnOAAFAzul">
                                </dx:BootstrapButton>
                            </div>
                        </div>
                        <p style="margin-top: 15px; font-size: 10px"><span style="color: red">*</span> Campos necesarios</p>

                    </div>


                </div>
            </div>

    <script>

        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
            }
        };

    </script>
</asp:Content>
