@extends('layouts.app')

@section('content')
    <div class="flex h-screen bg-cyan-100 dark:bg-gray-900 justify-center items-center">
        <div class="w-full max-w-4xl p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
            <div class="flex justify-center mb-0">
                <img src="{{ asset('images/logo.ico') }}" alt="Logo Hospital" class="w-24">
            </div>

            <h1 class="text-xl font-bold text-cyan-700 dark:text-white text-center">Validación</h1>
            <h4 class="text-l font-bold text-cyan-700 dark:text-white text-center">PortalPaciente HRA</h4>
<!-- Formulario de Logout -->
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
    @csrf
</form>

<!-- Contenedor de botones -->
<div class="flex justify-between items-center mb-6">
    <!-- Botón Salir -->
    <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
        class="inline-flex items-center px-3 py-1 bg-gray-200 text-gray-500 dark:bg-gray-600 dark:text-gray-300 text-sm font-semibold rounded-md shadow-sm hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300 ease-in-out">
        <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7">
            </path>
        </svg>
        Salir
    </a>

    <!-- Botón para cambiar el tema -->
    <button id="themeToggle"
        class="w-auto text-xl py-2 px-4 bg-cyan-700 dark:bg-gray-700 text-white rounded hover:bg-cyan-800 dark:hover:bg-gray-600">
        🌙 Modo Oscuro
    </button>
</div>
        <!-- Barra de Progreso -->
        <div class="flex justify-between items-center mb-6">
            <div class="w-1/3 text-center">
                <div
                    class="w-10 h-10 mx-auto rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-white font-bold">
                    1</div>
                <p class="text-sm font-semibold text-cyan-700 dark:text-white">Registrarse</p>
            </div>
            <div class="flex-1 h-1 bg-cyan-300 dark:bg-gray-600 mx-2"></div>
            <div class="w-1/3 text-center">
                <div
                    class="w-10 h-10 mx-auto rounded-full flex items-center  justify-center bg-cyan-700 text-white font-bold">
                    2</div>
                <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Verificar Identidad</p>
            </div>
            <div class="flex-1 h-1 bg-cyan-300 dark:bg-gray-600 mx-2"></div>
            <div class="w-1/3 text-center">
                <div
                    class="w-10 h-10 mx-auto rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-white font-bold">
                    3</div>
                <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Ver Resultados</p>
            </div>
        </div>
        <br>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <div class="bg-cyan-50 dark:bg-gray-700 p-4 rounded-lg">
                <h1 class="text-lg font-semibold text-cyan-700 dark:text-white">Necesitamos validar sus datos</h1>
                <h3 class="text-md text-cyan-600 dark:text-gray-300 mt-2">¿Cómo desea validar?</h3>
                <div class="mt-4 space-y-2">
                    <label class="flex items-center">
                        <input type="radio" name="validacion" value="telefono" class="mr-2"> Validar con número de
                        teléfono
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="validacion" value="email" class="mr-2"> Validar con correo
                        electrónico
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="validacion" value="examen" class="mr-2"> Validar con un examen
                        realizado
                    </label>
                </div>
            </div>

            <div class="p-4 rounded-lg">

                <form id="validacionForm" method="POST" action="{{ route('verificar-usuario') }}" class="space-y-4">
                    @csrf

                    <!-- Campo oculto para enviar el tipo de validación -->
                    <input type="hidden" id="tipo_validacion" name="tipo_validacion">

                    <!-- Campo oculto para enviar el valor (telefono/email) -->
                    <input type="hidden" id="valor" name="valor">

                    <!-- Teléfono -->
                    <div id="telefonoSection" class="hidden">
                        @if ($telefono_valido)
                            <label class="text-cyan-700 dark:text-white">Número de Teléfono</label>
                            <input type="text" id="telefono" value="{{ $telefono_enmascarado }}"
                                class="w-full p-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-md transition-all"
                                required />
                        @else
                            <p class="text-red-500 text-sm mt-2">
                                No podemos validar su identidad con el número de teléfono registrado en el HRA.
                            </p>
                        @endif
                    </div>

                    <!-- Email -->
                    <div id="emailSection" class="hidden">
                        @if ($email)
                            <label class="text-cyan-700 dark:text-white">Correo Electrónico</label>
                            <input type="email" id="email" value="{{ $email_enmascarado }}"
                                class="w-full p-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-md transition-all"
                                required />
                        @else
                            <p class="text-red-500 text-sm mt-2">
                                No podemos validar su identidad con el email registrado en el HRA.
                            </p>
                        @endif
                    </div>

                    <!-- Examen -->
                    <div id="examenSection" class="hidden">
                        <label class="text-cyan-700 dark:text-white">Seleccione un Examen</label>
                        <select id="examen" name="examen_id"
                            class="w-full p-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-md transition-all select2"
                            required>
                            <option value="">Seleccione...</option>
                            @foreach ($prestaciones as $prestacion)
                                <option value="{{ $prestacion->codigo }}">{{ $prestacion->nombre }}</option>
                            @endforeach
                        </select>

                    </div>
                    @error('validacion')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <button type="submit" id="btnValidar" disabled
                        class="w-auto text-xl py-3 px-6 bg-gray-100 text-gray-500 rounded cursor-not-alloed transition">
                        Validar
                    </button>
                </form>
                <!-- Botón para abrir el modal -->
                <button id="openModal" class="text-blue-600 underline text-sm hover:text-blue-800 mt-2">
                    ¿Necesitas ayuda?
                </button>
                <!-- Modal -->
                <div id="helpModal"
                    class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center hidden">
                    <div class="bg-white p-4 rounded-lg shadow-lg w-96 relative">
                        <h2 class="text-xl font-semibold mb-2">¿Cómo Iniciar Sesion y Obtener tus Credenciales</h2>

                        <!-- Contenedor de video -->
                        <video id="onboardingVideo" class="w-full rounded-lg" controls>
                            <source src="{{ asset('onboarding/quiero.registrarme.mp4') }}" type="video/mp4">
                            Tu navegador no soporta el video.
                        </video>

                        <!-- Botones -->
                        <div class="flex justify-between mt-4">
                            <!-- Botón para cerrar -->
                            <button id="closeModal" class="bg-red-500 text-white px-4 py-2 rounded-lg">
                                Cerrar
                            </button>

                            <!-- Botón para agrandar -->
                            <button id="fullscreenBtn" class="bg-cyan-700 text-white px-4 py-2 rounded-lg">
                                Agrandar
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const btnValidar = document.getElementById("btnValidar");
            const radios = document.querySelectorAll("input[name='validacion']");
            const telefonoInput = document.getElementById("telefono");
            const emailInput = document.getElementById("email");
            const examenInput = document.getElementById("examen");
            const tipoValidacionInput = document.getElementById("tipo_validacion"); // CAMPO OCULTO
            const valorInput = document.getElementById("valor"); // CAMPO OCULTO PARA EL VALOR

            function checkInputs() {
                const telefonoActivo = telefonoInput && !telefonoInput.closest(".hidden") && telefonoInput.value
                    .trim() !== "";
                const emailActivo = emailInput && !emailInput.closest(".hidden") && emailInput.value.trim() !== "";
                const examenActivo = examenInput && !examenInput.closest(".hidden") && examenInput.value.trim() !==
                    "";

                if (telefonoActivo || emailActivo || !examenActivo) {
                    btnValidar.disabled = false;
                    btnValidar.classList.remove("bg-gray-100", "text-gray-500", "cursor-not-allowed",
                        "dark:bg-gray-700", "dark:text-gray-400");
                    btnValidar.classList.add("bg-cyan-700", "text-white", "hover:bg-cyan-800", "dark:bg-gray-700",
                        "dark:hover:bg-gray-600");
                } else {
                    btnValidar.disabled = true;
                    btnValidar.classList.add("bg-gray-100", "text-gray-500", "cursor-not-allowed",
                        "dark:bg-gray-700", "dark:text-gray-400");
                    btnValidar.classList.remove("bg-cyan-700", "text-white", "hover:bg-cyan-800",
                        "dark:bg-gray-700", "dark:hover:bg-gray-600");
                }
            }

            radios.forEach(radio => {
                radio.addEventListener("change", function() {
                    document.getElementById("telefonoSection").classList.add("hidden");
                    document.getElementById("emailSection").classList.add("hidden");
                    document.getElementById("examenSection").classList.add("hidden");

                    document.getElementById(this.value + "Section").classList.remove("hidden");

                    // Asignar el tipo de validación correctamente
                    tipoValidacionInput.value = this.value;

                    if (this.value === "examen") {
                        examenInput.removeAttribute("disabled");
                        valorInput.value = examenInput.value; // Actualizar valor
                    } else {
                        examenInput.setAttribute("disabled", "disabled");
                    }

                    checkInputs();
                });
            });

            // Evento para actualizar el valor antes de enviar
            document.getElementById("validacionForm").addEventListener("submit", function() {
                if (tipoValidacionInput.value === "telefono") {
                    valorInput.value = telefonoInput.value;
                } else if (tipoValidacionInput.value === "email") {
                    valorInput.value = emailInput.value;
                } else if (tipoValidacionInput.value === "examen") {
                    valorInput.value = examenInput.value; // Asegurar que se envía el examen
                }
            });

            // Evento para actualizar valor de examen si cambia
            examenInput.addEventListener("change", function() {
                if (tipoValidacionInput.value === "examen") {
                    valorInput.value = examenInput.value;
                }
                checkInputs();
            });

            // Deshabilitar examen al inicio
            examenInput.setAttribute("disabled", "disabled");
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const themeToggle = document.getElementById("themeToggle");
            const html = document.documentElement;

            if (localStorage.getItem("theme") === "dark") {
                html.classList.add("dark");
                themeToggle.innerText = "☀️ Modo Claro";
            }

            themeToggle.addEventListener("click", function() {
                const isDark = html.classList.toggle("dark");
                localStorage.setItem("theme", isDark ? "dark" : "light");
                themeToggle.innerText = isDark ? "☀️ Modo Claro" : "🌙 Modo Oscuro";
            });
        });
    </script>
    <!-- Script para manejar la apertura, cierre y pantalla completa -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const openModal = document.getElementById("openModal");
            const closeModal = document.getElementById("closeModal");
            const modal = document.getElementById("helpModal");
            const video = document.getElementById("onboardingVideo");
            const fullscreenBtn = document.getElementById("fullscreenBtn");

            openModal.addEventListener("click", function() {
                modal.classList.remove("hidden");
            });

            closeModal.addEventListener("click", function() {
                modal.classList.add("hidden");
                video.pause(); // Pausar el video cuando se cierre el modal
            });

            fullscreenBtn.addEventListener("click", function() {
                if (video.requestFullscreen) {
                    video.requestFullscreen();
                } else if (video.mozRequestFullScreen) {
                    video.mozRequestFullScreen(); // Firefox
                } else if (video.webkitRequestFullscreen) {
                    video.webkitRequestFullscreen(); // Chrome, Safari y Opera
                } else if (video.msRequestFullscreen) {
                    video.msRequestFullscreen(); // IE/Edge
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Seleccione...",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection