<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#00cbb8">
    <title>Solid Clinic360</title>
    @laravelViewsStyles
    <link href='/css/favicon/favicon.png' rel='icon'>
    <link href='/css/app.css' rel='stylesheet'>
    <script src='/js/app.js'></script>
</head>
<body>
<x-Nav></x-Nav>


<div class="container-fluid">
        <div class="row flex-nowrap">
            <div id="MedContainerSidebar" class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
                @if(Auth::user() !== NULL)
                 <x-Sidebar></x-Sidebar>
                @endif
            </div>
            <div class="col py-3">
                @yield('content')
                <div class="row">
                    <div class="col-12">
                        <div class="text-center">
                            <a href="{{ URL::previous() }}" class="btn btn-success">{{__("dashboard.goBack")}}</a>
                        </div>
                    </div>
                </div>
                <div class="copyright">
                    <x-Copyright></x-Copyright>
                </div>
                
            </div>
        </div>
    </div>
@laravelViewsScripts

@yield('javascript')
<x-UtilsForm></x-UtilsForm>
<x-Translation></x-Translation>
<script defer src="https://app.fastbots.ai/embed.js" data-bot-id="cm8jesa0g08kgs5k5a6pf67x5"></script>

<!-- Modal de Alerta de Conexión -->
<div class="modal fade" id="connectionAlertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="connectionAlertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="connectionAlertModalLabel">
                    <i class="fas fa-wifi-slash me-2"></i>Sin conexión a Internet
                </h5>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <i class="fas fa-globe-americas fs-1 text-secondary mb-3"></i>
                    <p class="lead">Se ha perdido la conexión a Internet.</p>
                    <p>El sistema requiere una conexión activa para funcionar correctamente. Por favor verifique su conexión a Internet e intente nuevamente.</p>
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border text-primary me-2" role="status">
                        <span class="visually-hidden">Verificando...</span>
                    </div>
                    <span>Verificando conexión...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script para detectar la conexión a Internet -->
<script>
    // Variables para el manejo del modal y temporizadores
    let connectionModal;
    let connectionTimeout;
    let pingInterval;
    
    // Inicializar modal cuando el DOM esté listo
    document.addEventListener('DOMContentLoaded', function() {
        connectionModal = new bootstrap.Modal(document.getElementById('connectionAlertModal'), {
            backdrop: 'static',
            keyboard: false
        });
    });
    
    // Función para verificar la conexión haciendo una petición mínima
    function checkConnection() {
        return fetch('/favicon.ico', { 
            method: 'HEAD',
            cache: 'no-store',
            mode: 'no-cors',
            timeout: 5000 
        })
        .then(() => true)
        .catch(() => false);
    }
    
    // Manejador cuando se detecta pérdida de conexión
    async function handleOffline() {
        // Limpiar temporizadores existentes
        clearTimeout(connectionTimeout);
        clearInterval(pingInterval);
        
        // Mostrar modal
        if (connectionModal) connectionModal.show();
        
        // Iniciar verificación periódica de conexión
        pingInterval = setInterval(async () => {
            const isConnected = await checkConnection();
            if (isConnected) {
                handleOnline();
            }
        }, 5000); // Verificar cada 5 segundos
    }
    
    // Manejador cuando se restaura la conexión
    function handleOnline() {
        // Limpiar verificación periódica
        clearInterval(pingInterval);
        
        // Cerrar modal
        if (connectionModal) connectionModal.hide();
        
        // Mostrar notificación de reconexión
        const toast = document.createElement('div');
        toast.className = 'position-fixed bottom-0 end-0 p-3';
        toast.style.zIndex = '9999';
        toast.innerHTML = `
            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header bg-success text-white">
                    <i class="fas fa-wifi me-2"></i>
                    <strong class="me-auto">Conexión restaurada</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    La conexión a Internet ha sido restablecida.
                </div>
            </div>
        `;
        document.body.appendChild(toast);
        
        // Eliminar toast después de 3 segundos
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    // Verificación proactiva al cargar la página
    window.addEventListener('load', async () => {
        const isConnected = await checkConnection();
        if (!isConnected) {
            handleOffline();
        }
    });
    
    // Escuchar eventos nativos de conexión/desconexión
    window.addEventListener('offline', () => {
        // Esperar un momento para confirmar que realmente se perdió la conexión
        connectionTimeout = setTimeout(async () => {
            const isConnected = await checkConnection();
            if (!isConnected) {
                handleOffline();
            }
        }, 1500);
    });
    
    window.addEventListener('online', async () => {
        clearTimeout(connectionTimeout);
        // Verificar que realmente hay conexión
        const isConnected = await checkConnection();
        if (isConnected) {
            handleOnline();
        }
    });
    
    // Verificación periódica adicional (cada 30 segundos)
    setInterval(async () => {
        const isConnected = await checkConnection();
        if (!isConnected) {
            handleOffline();
        }
    }, 30000);
</script>
</body>
</html>