@using System.Data
@model DataSet
@{
    Layout = "_Layout"; 
    ViewData["Title"] = "Ecaptura - Móvil";
    string usuarioCorreo = ViewBag.UsuarioCorreo ?? "Usuario";
}
 
<form id="formMarcaje" method="post" asp-controller="Home">
    <input type="hidden" name="geoLoc" id="geoLoc" value="No disponible" />
 
    <div class="container mt-3" style="background-color: #d4d0c8; border: 2px solid #808080; padding: 20px; sans-serif;">
        
        <div class="text-center mb-3">
            <h5 class="fw-bold">MODO MÓVIL</h5>
            <span class="badge bg-primary">@usuarioCorreo</span>
        </div>
 
        
        <div class="mb-4 ps-2" style="border-left: 5px solid #f07839; background: #e9ecef; padding: 10px;">
            <div class="mb-1">
                <small class="fw-bold">HORA:</small>
                <span id="txtHoraActual" class="fw-bold"></span>
            </div>
            <div class="text-danger">
                <small class="fw-bold">TIEMPO TOTAL:</small>
                <span id="txtCronometro" class="fw-bold fs-3">00:00:00</span>
            </div>
        </div>
 
       
        <div class="d-grid gap-3">
            <button type="submit" asp-action="Entrada" class="btn btn-success py-4 fw-bold fs-5">ENTRADA</button>
            
            <div class="border p-2 bg-light">
                <select name="tipoPausa" id="tipoPausa" class="form-select form-select-lg mb-2">
                    <option value="" disabled selected>Seleccionar Pausa</option>
                    @if (Model != null && Model.Tables.Contains("Pausa"))
                    {
                        foreach (DataRow dr in Model.Tables["Pausa"].Rows)
                        {
                            <option value="@dr["Descrip"]">@dr["Descrip"]</option>
                        }
                    }
                </select>
                <button type="submit" asp-action="Pausa" onclick="return validarPausa();" class="btn btn-warning w-100 py-3 fw-bold">PAUSA</button>
            </div>
 
            <button type="submit" asp-action="Salida" class="btn btn-danger py-4 fw-bold fs-5">SALIDA</button>
            
            <a href=''Index", "Login")" class="btn btn-outline-secondary mt-3">Cerrar Sesión</a>
        </div>
    </div>
</form>
 
<script>
    let segundosTotales = parseInt('@ViewBag.SegundosAcumulados') || 0;
    let cronometroActivo = '@ViewBag.CronometroActivo'.toLowerCase() === 'true';

    function actualizarReloj(){
        const ahora = new Date();
        document.getElementById('txtFechaActual').innerText = ahora.toLocaleDateString();
        document.getElementById('txtHoraActual').innerText = ahora.toLocaleTimeString();

        if(cronometroActivo){
            segundosTotales++;
            document.getElementById('txtCronometro').innerText = formatearSegundos(segundosTotales);
        }
    }

    function formatearSegundos(s){
        const h = Math.floor(s / 3600).toString().padStart(2, '0');
        const m = Math.floor((s % 3600) / 60).toString().padStart(2, '0');
        const sec = (s % 60).toString().padStart(2, '0');
        return `${h}:${m}:${sec}`;
    }

    actualizarReloj();
    document.getElementById('txtCronometro').innerText = formatearSegundos(segundosTotales);
    setInterval(actualizarReloj, 1000);

    function validarPausa(){
        if(!document.getElementById("tipoPausa").value){alert("Selecciona un tipo de pausa"); return false;}
        return true;
    }

    document.addEventListener("DOMContentLoaded", function(){
        if("geolocation" in navigator){
            navigator.geolocation.getCurrentPosition(p => {
                document.getElementById('geoLoc').value = p.coords.latitude + ", " + p.coords.longitude;
            });
        }
    });
</script>