<!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.ico' rel='icon'>
    <link href='/css/app.css' rel='stylesheet'>
    <script src='/js/app.js'></script>
</head>
<body>
<style>
        .container-login{
            top:0;
            left:0;
            position: absolute;
            width: 100vw;
            height: 100vh;
            background-image:url('../img/background.png');
            background-size:100%;
        }
    </style>
    <style>
  /* Se usan variables para que puedas cambiar los colores fácilmente si lo necesitas */
  :root {
    --popup-dark-blue: #4A90E2; /* Azul oscuro para el encabezado y pie */
    --popup-light-blue: #eaf3ff; /* Azul claro para el fondo del contenido */
    --popup-text-color: #ffffff; /* Color del texto para el encabezado y pie */
    --popup-body-text:rgb(49, 89, 136); /* Color del texto para el cuerpo */
  }

  /* Estilos para el contenido del modal */
  #avisoPagoModal .modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen a los hijos */
  }

  #avisoPagoModal .modal-header {
    background-color: var(--popup-dark-blue);
    color: var(--popup-text-color);
    border-bottom: none;
  }
  
  #avisoPagoModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Hace la 'X' de cierre blanca */
  }

  #avisoPagoModal .modal-body {
    background-color: var(--popup-light-blue);
    color: var(--popup-body-text);
    font-size: 1.1rem;
    text-align: center;
  }

  #avisoPagoModal .modal-footer {
    background-color: var(--popup-dark-blue);
    border-top: none;
    justify-content: center; /* Centra el botón */
  }
  
  #avisoPagoModal .modal-footer .btn-primary {
    background-color: var(--popup-dark-blue);
    border: 1px solid var(--popup-light-blue);
    padding: 10px 30px;
    font-weight: bold;
  }

  #avisoPagoModal .modal-footer .btn-primary:hover {
    background-color: #ffffff;
    color: var(--popup-dark-blue);
    border-color: #ffffff;
  }
</style>
    <div  class="container-fluid container-login">
        <div class="row">
            <div class="col-12">
                @yield('content')
                <div class="copyright">
                    <x-Copyright/>
                </div>
            </div>
        </div>
    </div>
<x-LoadingModal></x-LoadingModal>



@laravelViewsScripts
<x-UtilsForm></x-UtilsForm>
<x-Translation></x-Translation>
<script src="{{ asset('js/login.js') }}"></script>
<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="bi bi-wifi-off me-2"></i>Sin conexión a Internet
                </h5>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <i class="bi bi-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>

@php
  $paymentMandatory = App\Models\Settings::findConfigValue(App\Models\Settings::PAYMENT_MANDATORY);
  $paymentMandatoryCanContinue = App\Models\Settings::findConfigValue(App\Models\Settings::PAYMENT_MANDATORY_CAN_CONTINUE);
@endphp
@if(isset($paymentMandatory)  &&  strtolower($paymentMandatory) === "true") 
<div class="modal fade" id="avisoPagoModal" tabindex="-1" aria-labelledby="avisoPagoModalLabel" aria-hidden="true"  data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="avisoPagoModalLabel">ℹ️ Recordatorio Importante de Pago</h5>
        @if(isset($paymentMandatoryCanContinue)  &&  strtolower($paymentMandatoryCanContinue) === "true") 
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         @endif
      </div>
      <div class="modal-body">
        <p class="lead" style="font-weight: 500;">Mantén tu servicio siempre activo.</p>
        <p>Te recordamos que la <strong>fecha máxima para realizar tu pago</strong> es el <strong>día 5 de cada mes</strong>. Cumplir con esta fecha límite es esencial para garantizar la continuidad de tu servicio.</p>
      </div>
      @if(isset($paymentMandatoryCanContinue)  &&  strtolower($paymentMandatoryCanContinue) === "true") 
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Entendido</button>
      </div>
      @endif
    </div>
  </div>
</div>
@endif

<!-- Script para detectar la conexión a Internet -->
@if(isset($paymentMandatory)  &&  strtolower($paymentMandatory) === "true") 
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const avisoPagoModal = new bootstrap.Modal(document.getElementById('avisoPagoModal'));
        avisoPagoModal.show();
    });
</script>
@endif
<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="bi bi-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>
