<!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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'SolidClinic360') }}</title>
    @laravelViewsStyles
    <link href='/css/favicon/favicon.png' rel='icon'>
    <link href='/css/app.css' rel='stylesheet'>
    <link rel="stylesheet" href="{{ asset('css/sidebar.css') }}">
    @if(request()->is('*inventory*'))
    <link rel="stylesheet" href="{{ asset('css/inventory.css') }}">
    @endif
    <script src='/js/app.js'></script>
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <!-- Estilos personalizados -->
    <style>
        .min-w-full thead{
background: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%) !important;
    color: #fff;
    }
        .badge-primary {
            color: #fff;
            background-color: #007bff;
        }
        .badge-secondary {
            color: #fff;
            background-color: #6c757d;
        }
        .badge-success {
            color: #fff;
            background-color: #28a745;
        }
        .badge-danger {
            color: #fff;
            background-color: #dc3545;
        }
        .badge-warning {
            color: #212529;
            background-color: #ffc107;
        }
        .badge-info {
            color: #fff;
            background-color: #17a2b8;
        }
        .badge-light {
            color: #212529;
            background-color: #f8f9fa;
        }
        .badge-dark {
            color: #fff;
            background-color: #343a40;
        }
        .badge {
            display: inline-block;
            padding: 0.25em 0.4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
        }
    </style>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    @stack('styles')
</head>
<body>

    
        <x-Nav></x-Nav>

    <x-ModalDeleteMessage></x-ModalDeleteMessage>
    <x-ModalLogoutMessage></x-ModalLogoutMessage>
    <x-ModalEndAppointment></x-ModalEndAppointment>
    <x-ToastSuccessOperation></x-ToastSuccessOperation>
    <x-ToastFailedOperation></x-ToastFailedOperation>
    <x-LoadingModal></x-LoadingModal>


    <div id="container-all" 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">
            @if(Auth::user() !== NULL)
                 <x-Sidebar></x-Sidebar>
                @endif
            </div>
            <div class="col py-3">
                @yield('content')
                <div class="copyright">
                    <x-Copyright></x-Copyright>
                </div>
            </div>
        </div>
    </div>

<!-- Scripts de Bootstrap para modales y otros componentes -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    
@laravelViewsScripts

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

<!-- Widgets Flotantes - Disponibles en todas las páginas -->
<x-dashboard-widgets />

<!-- Contenedor global para modales de inventario -->
<div id="inventory-modals-container"></div>

<!-- Script para los widgets flotantes -->
<script src="{{ asset('js/widgets.js') }}"></script>

<!-- Script para las notificaciones -->
<script src="{{ asset('js/notifications.js') }}"></script>

@stack('scripts')

<!-- 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" id="btn-close-aviso-pago-modal" 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" id="btn-aviso-pago-modal" 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();
        const btnAvisoPagoModal = document.getElementById('btn-aviso-pago-modal');
        const btnCloseAvisoPagoModal = document.getElementById('btn-close-aviso-pago-modal');
        btnCloseAvisoPagoModal.addEventListener('click', function() {
            avisoPagoModal.hide();
        });
        btnAvisoPagoModal.addEventListener('click', function() {
            avisoPagoModal.hide();
        });
    });
</script>
@endif

<!-- Script para detectar la conexión a Internet -->
<script>
    // Variables para el manejo del modal y temporizadores
    const connectionModal = new bootstrap.Modal(document.getElementById('connectionAlertModal'), {
        backdrop: 'static',
        keyboard: false
    });
    let connectionTimeout;
    let pingInterval;
    
    // 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
        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
        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>
<x-ai-chat-widget />
</body>
</html>