@include('header')

    <script src="https://cdn.tailwindcss.com"></script>
	
	<section class="content">
		@if (!session('autorizado_privado'))
            <h1 class="text-3xl font-bold mb-2 text-gray-700">Panel de administración</h1>
            <p class="text-gray-500 italic text-[12px] mb-12">Para acceder es necesario ingresar la contraseña.</p>
            <div class="flex flex-col w-fit gap-4 my-8 flex-wrap justify-center m-auto">
                <form method="POST" action="verificar-password" class="flex gap-4">
                    @csrf
                    <input type="password" name="password" placeholder="Contraseña" class="p-2 rounded w-full focus:outline-none" required>
                    <button type="submit" class="bg-blue-200 hover:bg-blue-300 text-gray-700 hover:text-gray-800 p-2 border-2 border-blue-500 rounded-md hover:no-underline">Entrar</button>
                </form>
                @if($errors->any())
                    <div class="text-red-500 text-sm italic">{{ $errors->first('password') }}</div>
                @endif
            </div>
        @else
            <div>
                <h1 class="text-3xl font-bold mb-4 text-gray-700">Panel de administración</h1>
                <div class="flex gap-4 my-8 flex-wrap justify-center">
                    <a href="administracion/caja-interna" class="bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 p-12 border-2 border-gray-500 rounded-md hover:no-underline">Caja Interna / Rendiciones</a>
                    <a href="administracion/coordinadores" class="bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 p-12 border-2 border-gray-500 rounded-md hover:no-underline">Coordinadores</a>
                    <a href="administracion/gastos-reales" class="bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 p-12 border-2 border-gray-500 rounded-md hover:no-underline">Gastos Reales</a>
                </div>
            </div>
        @endif
	</section>

@include('footer')

<script>
    function keepAlive() {
        fetch('../keep-alive', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Respuesta del keep-alive:', data);
        })
        .catch(error => {
            console.error('Error en keep-alive:', error);
        });
    }

    // Ping automático cada 5 minutos solo si la pestaña está visible
    setInterval(() => {
        if (document.visibilityState === 'visible') {
            keepAlive();
        }
    }, 10000);
    //}, 300000); // 5 minutos

    // Ping cuando se vuelve a la pestaña
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
            keepAlive();
        }
    });

    // Ping al hacer clic en cualquier parte de la página
    document.addEventListener('click', () => {
        keepAlive();
    });
</script>