<?php
// Asegurar que la sesión está iniciada
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Función para obtener el nombre completo del usuario
function getFullName()
{
    if (isset($_SESSION['user']) && isset($_SESSION['user']['nombre']) && isset($_SESSION['user']['apellido'])) {
        return htmlspecialchars($_SESSION['user']['nombre'] . ' ' . $_SESSION['user']['apellido']);
    } else {
        return 'No User Logged In';
    }
}

function getUserNombre()
{
    return isset($_SESSION['user']['nombre']) ? htmlspecialchars((string)$_SESSION['user']['nombre']) : '';
}

function getUserApellido()
{
    return isset($_SESSION['user']['apellido']) ? htmlspecialchars((string)$_SESSION['user']['apellido']) : '';
}
?>

<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
    <!-- Sidebar Toggle (Topbar) -->
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
        <i class="fa fa-bars"></i>
    </button>

    <!-- Centro del Topbar -->
    <div class="mx-auto d-flex align-items-center justify-content-center text-center">
        <div class="topbar-title mr-3">
            SISTEMA DE ADMINISTRACIÓN COMPRANET COMERCIO ELECTRÓNICO SAS
        </div>
        <div id="fechaHora" class="topbar-datetime"></div>
    </div>

    <!-- Topbar Navbar (derecha) -->
    <ul class="navbar-nav ml-auto">

        <!-- BOTÓN VOLVER -->
        <li class="nav-item d-none d-sm-inline-block">
            <a href="javascript:history.back()" class="btn btn-sm btn-secondary mr-2">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </li>

        <!-- Nav Item - User Information -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span id="cpnUserFullName" class="mr-2 d-none d-lg-inline text-gray-600 small">
                    <?php echo getFullName(); ?>
                </span>
                <img class="img-profile rounded-circle" src="/img/undraw_profile.svg">
            </a>

            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalUserProfile">
                    <i class="fas fa-user-cog fa-sm fa-fw mr-2 text-gray-400"></i>
                    Cambiar nombre y contraseña
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/logout.php">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                    Cerrar sesión
                </a>
            </div>
        </li>
    </ul>
</nav>
<!-- End of Topbar -->

<!-- Modal: Cambiar nombre y contraseña -->
<div class="modal fade" id="modalUserProfile" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="formUserProfile" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mi perfil</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Nombre</label>
                    <input name="nombre" class="form-control" value="<?php echo getUserNombre(); ?>" required>
                </div>
                <div class="form-group">
                    <label>Apellido</label>
                    <input name="apellido" class="form-control" value="<?php echo getUserApellido(); ?>" required>
                </div>

                <hr>

                <div class="form-group">
                    <label>Contraseña actual (solo si vas a cambiarla)</label>
                    <input name="currentPassword" type="password" class="form-control" autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label>Nueva contraseña (opcional)</label>
                    <input name="newPassword" type="password" class="form-control" autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label>Confirmar nueva contraseña</label>
                    <input name="confirmNewPassword" type="password" class="form-control" autocomplete="new-password">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </form>
    </div>
</div>


<!-- Script para mostrar la fecha y hora -->
<script>
    function actualizarFechaHora() {
        const now = new Date();
        const meses = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
        const dia = now.getDate().toString().padStart(2, '0');
        const mes = meses[now.getMonth()];
        const año = now.getFullYear().toString().slice(-2);

        let horas = now.getHours();
        const minutos = now.getMinutes().toString().padStart(2, '0');
        const ampm = horas >= 12 ? 'pm' : 'am';
        horas = horas % 12;
        horas = horas ? horas : 12; // El '0' se convierte en '12'

        document.getElementById('fechaHora').innerText = `${dia}-${mes}-${año} ${horas}:${minutos} ${ampm}`;
    }

    // Actualizar cada 30 segundos
    actualizarFechaHora();
    setInterval(actualizarFechaHora, 30000);

    // AJAX: actualizar perfil
    (function() {
        const form = document.getElementById('formUserProfile');
        if (!form) return;

        form.addEventListener('submit', async function(e) {
            e.preventDefault();

            const fd = new FormData(form);
            const nombre = String(fd.get('nombre') || '').trim();
            const apellido = String(fd.get('apellido') || '').trim();
            const currentPassword = String(fd.get('currentPassword') || '');
            const newPassword = String(fd.get('newPassword') || '');
            const confirmNewPassword = String(fd.get('confirmNewPassword') || '');

            if (!nombre || !apellido) {
                alert('Nombre y apellido son obligatorios.');
                return;
            }

            if (newPassword || confirmNewPassword || currentPassword) {
                if (!newPassword) {
                    alert('Debes indicar la nueva contraseña.');
                    return;
                }
                if (newPassword !== confirmNewPassword) {
                    alert('La confirmación de contraseña no coincide.');
                    return;
                }
                if (!currentPassword) {
                    alert('Debes indicar la contraseña actual.');
                    return;
                }
                if (newPassword.length < 8) {
                    alert('La nueva contraseña debe tener mínimo 8 caracteres.');
                    return;
                }
            }

            const body = new URLSearchParams();
            body.set('nombre', nombre);
            body.set('apellido', apellido);
            if (currentPassword || newPassword) {
                body.set('currentPassword', currentPassword);
                body.set('newPassword', newPassword);
            }

            try {
                const resp = await fetch('/usuarios/api/me.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    body: body.toString(),
                });
                const json = await resp.json().catch(() => ({}));
                if (json.error) {
                    const extra = json.http ? `\nHTTP: ${json.http}` : '';
                    const det = json.details ? `\nDetalles: ${typeof json.details === 'string' ? json.details : JSON.stringify(json.details)}` : '';
                    alert(json.error + extra + det);
                    return;
                }

                const full = document.getElementById('cpnUserFullName');
                if (full) {
                    full.textContent = `${nombre} ${apellido}`;
                }

                // Cerrar modal (Bootstrap 4)
                if (window.jQuery) {
                    window.jQuery('#modalUserProfile').modal('hide');
                }

                // Limpia passwords
                form.querySelector('[name="currentPassword"]').value = '';
                form.querySelector('[name="newPassword"]').value = '';
                form.querySelector('[name="confirmNewPassword"]').value = '';

                alert('Perfil actualizado.');
            } catch (err) {
                alert('Error en comunicación al actualizar perfil.');
            }
        });
    })();
</script>