@php
    $paciente = session('paciente', []);
@endphp
@extends('layouts.app')


@section('content')
    <div class="container mx-auto">
        <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">Ver Mis Resultados</h1>
        <h4 class="text-l font-bold text-cyan-700 dark:text-white text-center">PortalPaciente HRA</h4>
        <!-- Botón para cambiar el tema -->
        <div class="flex justify-end mb-2 mr-4">
            <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-4">
            <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-gray-300 dark:bg-gray-600 text-gray-600 dark: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-cyan-700 text-white font-bold">
                    3</div>
                <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Ver Resultados</p>
            </div>
        </div>

        <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-4 p-4">

            <!-- Card de Datos del Paciente (Izquierda) -->
            <div
                class="bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 shadow-lg rounded-lg p-3 flex flex-col items-center transition-transform transform hover:scale-105 hover:shadow-2xl">
                <div id="editAvatarBtn"
                    class="w-24 h-24 rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600 relative group cursor-pointer">
                    <img src="{{ Auth::user()->avatar ? asset(Auth::user()->avatar) : asset('avatar/avatar1.jpg') }}"
                        alt="Avatar" class="w-full h-full object-cover">

                    <!-- Tooltip -->
                    <span
                        class="absolute top-16 left-1/2 transform -translate-x-1/2  text-gray-500 text-xs px-0 py-0 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-pencil-alt"></i> </span>
                </div>

                <!-- Separador -->
                <div class="w-full border-b border-gray-300 dark:border-gray-600 my-2"></div>

                <!-- Datos del paciente -->
                <div class="text-center">
                    <h3 class="text-lg font-semibold text-cyan-700 dark:text-white">{{ Auth::user()->name }}</h3>
                    <p class="text-gray-500 dark:text-gray-400">{{ Auth::user()->username }}</p>
                </div>
                <!-- Botón "Ver Más..." -->
                <button id="openModal"
                    class="w-auto text-xs py-1 px-2 bg-cyan-700 dark:bg-gray-700 text-white rounded hover:bg-cyan-800 dark:hover:bg-gray-600">
                    Ver Registro
                </button>
                <!-- Separador -->
                <div class="w-full border-b border-gray-300 dark:border-gray-600 my-2"></div>

                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>

                <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                    class="mt-3 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>

            </div>

            <!-- Grid de Resultados (Derecha) -->
            <div class="col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                @foreach ($resultados as $resultado)
                    <div
                        class="bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 shadow-lg rounded-lg p-3 flex flex-col justify-between min-h-64">
                        <!-- Contenido Principal -->
                        <div>
                            <h3 class="text-lg font-semibold">{{ $resultado->prestacion }}</h3>
                            <p class="text-gray-500 dark:text-gray-400">Fecha del Examen: {{ $resultado->fecha_examen }}</p>
                        </div>

                        <!-- Botón Ver Resultados -->
                        <a href="http://10.67.84.97:8085/?accnum={{ $resultado->accession_no }}" target="_blank"
                            class="flex items-center justify-center text-cyan-700 hover:text-cyan-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3 3h18M9 3v18m6-18v18M5 21h14M7 17h10" />
                            </svg>
                            <span class="ml-2">Ver mis resultados</span>
                        </a>

                        <!-- Separador -->
                        <div class="w-full border-t border-gray-300 dark:border-gray-600 my-2"></div>

                        <!-- Botón para ver más información -->
                        <button onclick="toggleDetails(this)"
                            class="text-sm text-cyan-600 dark:text-blue-200 hover:underline focus:outline-none flex items-center">
                            <svg class="w-5 h-5 mr-1 transition-transform duration-300 transform rotate-0" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                            Ver más información
                        </button>

                        <!-- Información oculta -->
                        <div
                            class="hidden mt-2 text-gray-600 dark:text-gray-400 border-t border-gray-300 dark:border-gray-600 ">
                            <p>Anamnesis: {{ $resultado->anamnesis }}</p>
                            <p>Diagnostico Presunto: {{ $resultado->diagnostico_presunto }}</p>
                            <p>Medico Solicitante: {{ $resultado->medico_solicitante }}</p>
                            <p>Fecha de Solicitud: {{ $resultado->recepcion }}</p>
                            @if ($resultado->namef)
                                <hr class="my-2 border-t border-gray-400 dark:border-gray-500">
                                <!-- Enlace que abre el modal -->
                                <a href="#" onclick="verInforme('{{ $resultado->namef }}')"
                                    class="text-green-600 font-semibold hover:underline">
                                    🟢 Informe disponible
                                </a>

                                <!-- Modal con iframe oculto por defecto -->
                                <div id="modalInforme"
                                    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
                                    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-3xl w-full">
                                        <div class="flex justify-between items-center border-b pb-2">
                                            <h2 class="text-lg font-semibold">Informe</h2>
                                            <button onclick="cerrarModal()"
                                                class="text-gray-500 hover:text-gray-700">&times;</button>
                                        </div>
                                        <iframe id="iframeInforme" class="w-full h-[80vh]" frameborder="0"></iframe>
                                    </div>
                                </div>
                                {{-- <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Fecha del informe:
                                    {{ $resultado->informe_fecha }}</p> --}}
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

        </div>

        <!-- Paginación -->
        <div class="mt-6">
            {{ $resultados->links() }}
        </div>
    </div>

    <!-- MODAL XL -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 w-full max-w-4xl p-6 rounded-lg shadow-lg">

            <!-- Título del Modal -->
            <div class="flex justify-between items-center border-b pb-3">
                <h2 class="text-xl font-bold text-cyan-700 dark:text-white">Datos del Usuario</h2>
                <button id="closeModal"
                    class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">&times;</button>
            </div>

            <!-- Contenido -->
            <div class="mt-4">
                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Nombre:</strong>
                    <span class="text-gray-700 dark:text-gray-300">{{ Auth::user()->name }}</span>
                </p>

                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Usuario:</strong>
                    <span class="text-gray-700 dark:text-gray-300">{{ Auth::user()->username }}</span>
                </p>

                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Edad:</strong>
                    <span class="text-gray-700 dark:text-gray-300">
                        @php
                            use Carbon\Carbon;

                            $fechaNacimiento = isset(Auth::user()->fecha_nacimiento)
                                ? Carbon::parse(Auth::user()->fecha_nacimiento)
                                : null;

                            $edad = $fechaNacimiento ? $fechaNacimiento->diff(Carbon::now()) : null;
                        @endphp
                        {{ $edad ? "{$edad->y} años, {$edad->m} meses y {$edad->d} días" : 'Fecha no disponible' }}
                    </span>
                </p>

                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Celular:</strong>
                    <span class="text-gray-700 dark:text-gray-300">{{ Auth::user()->celular }}</span>
                </p>

                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Email:</strong>
                    <span class="text-gray-700 dark:text-gray-300">{{ Auth::user()->email }}</span>
                </p>

                <p class="mb-2">
                    <strong class="text-cyan-700 dark:text-cyan-300">Sexo:</strong>
                    @if (Auth::user()->sexo == 'M')
                        <i class="fas fa-mars mr-2 text-cyan-700"></i>
                        <span class="text-gray-700 dark:text-gray-300">Masculino</span>
                    @elseif (Auth::user()->sexo == 'F')
                        <i class="fas fa-venus mr-2 text-pink-700"></i>
                        <span class="text-gray-700 dark:text-gray-300">Femenino</span>
                    @elseif (Auth::user()->sexo == 'U')
                        <i class="fas fa-genderless mr-2 text-gray-500"></i>
                        <span class="text-gray-700 dark:text-gray-300">Indefinido</span>
                    @else
                        <i class="fas fa-question-circle mr-2 text-gray-500"></i>
                        <span class="text-gray-700 dark:text-gray-300">Desconocido</span>
                    @endif
                </p>
            </div>

            <!-- Botón para cambiar contraseña -->
            <div class="mt-4 flex justify-end">
                <!-- Botón para abrir el modal de cambio de contraseña -->
                <button id="openPasswordModal"
                    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">
                    <i class="fas fa-key mr-2"></i> Cambiar Contraseña
                </button>

            </div>
        </div>
    </div>
    <!-- MODAL PARA CAMBIO DE CONTRASEÑA -->
    <div id="modalPassword" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 w-full max-w-md p-6 rounded-lg shadow-lg">

            <!-- Título del Modal -->
            <div class="flex justify-between items-center border-b pb-3">
                <h2 class="text-xl font-bold text-cyan-700 dark:text-white">Cambiar Contraseña</h2>
                <button id="closePasswordModal"
                    class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">&times;</button>
            </div>

            <!-- Formulario de Cambio de Contraseña -->
            <form id="passwordChangeForm" action="{{ route('password.update') }}" method="POST">
                @csrf
                <div class="mt-4">
                    <label class="block text-sm font-medium text-cyan-700 dark:text-gray-300">Contraseña Actual</label>
                    <div class="relative">
                        <input type="password" id="current_password" name="current_password" required
                            class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <button type="button" id="togglePassword"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2">
                            <i class="fas fa-eye text-gray-500"></i>
                        </button>
                    </div>
                </div>

                <div class="mt-4">
                    <label class="block text-sm font-medium text-cyan-700 dark:text-gray-300">Nueva Contraseña</label>
                    <div class="relative">
                        <input type="password" id="new_password" name="new_password" required
                            class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <button type="button" id="togglePasswordNew"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2">
                            <i class="fas fa-eye text-gray-500"></i>
                        </button>
                    </div>
                </div>

                <div class="mt-4">
                    <label class="block text-sm font-medium text-cyan-700 dark:text-gray-300">Confirmar Nueva
                        Contraseña</label>
                    <div class="relative">
                        <input type="password" id="new_password_confirmation" name="new_password_confirmation" required
                            class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <button type="button" id="togglePasswordConfirm"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2">
                            <i class="fas fa-eye text-gray-500"></i>
                        </button>
                    </div>
                </div>

                <!-- Checkboxes de Validación -->
                <div class="mt-4">
                    <label class="block text-sm font-medium text-cyan-700 dark:text-gray-300">Requisitos de la
                        contraseña</label>
                    <ul class="list-none pl-4 mt-2 text-sm text-gray-600 dark:text-gray-400">
                        <li>
                            <input type="checkbox" id="check-length" disabled> Al menos 8 caracteres
                        </li>
                        <li>
                            <input type="checkbox" id="check-uppercase" disabled> Al menos una letra mayúscula
                        </li>
                        <li>
                            <input type="checkbox" id="check-number" disabled> Al menos un número
                        </li>
                    </ul>
                </div>

                <!-- Mensaje de Error si las contraseñas no coinciden -->
                <p id="password-error-message" class="text-red-500 hidden">Las contraseñas no coinciden o no son válidas.
                </p>

                <div class="mt-4 flex justify-end">
                    <button type="submit"
                        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">
                        <i class="fas fa-save mr-2"></i>
                        Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- Modal para editar avatar-->
    <div id="avatarModal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden z-50 ">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-96">
            <div class="flex justify-between items-center border-b pb-3">

                <h2 class="text-xl font-bold text-cyan-700 dark:text-white">Actualizar Avatar</h2>
                <button id="closeModal"
                    class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">&times;</button>
            </div>
            <input type="file" id="avatarInput" accept="image/*"
                class="w-full p-2 mt-3 dark:bg-gray-700 dark:text-white border rounded">
            <p id="avatar-error-message" class="text-red-500 text-sm mt-2 hidden"></p>

            <div class="flex justify-between mt-4">
                <button onclick="subirAvatar()"
                    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">Actualizar
                    Avatar</button>
                {{-- <button onclick="cerrarModal()" class="bg-gray-400 text-white px-4 py-2 rounded">Cancelar</button> --}}
            </div>
        </div>
    </div>
@endsection
<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>
    document.addEventListener("DOMContentLoaded", function() {
        const openModal = document.getElementById("openModal");
        const closeModal = document.getElementById("closeModal");
        const modal = document.getElementById("modal");

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

        closeModal.addEventListener("click", function() {
            modal.classList.add("hidden");
        });

        // Cerrar modal si se hace clic fuera
        window.addEventListener("click", function(e) {
            if (e.target === modal) {
                modal.classList.add("hidden");
            }
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const openPasswordModal = document.getElementById("openPasswordModal");
        const closePasswordModal = document.getElementById("closePasswordModal");
        const passwordModal = document.getElementById("modalPassword");
        const modal = document.getElementById("modal");

        openPasswordModal.addEventListener("click", function() {
            passwordModal.classList.remove("hidden");
            modal.classList.add("hidden");
        });

        closePasswordModal.addEventListener("click", function() {
            passwordModal.classList.add("hidden");
        });

        window.addEventListener("click", function(e) {
            if (e.target === passwordModal) {
                passwordModal.classList.add("hidden");
            }
        });
    });
</script>


<script>
document.addEventListener("DOMContentLoaded", function() {
    function togglePasswordVisibility(buttonId, inputId) {
        const button = document.getElementById(buttonId);
        const input = document.getElementById(inputId);

        if (button && input) {
            button.addEventListener("click", function() {
                if (input.type === "password") {
                    input.type = "text";
                    button.textContent = "🙈"; // Cambia el icono
                    setTimeout(() => {
                        input.type = "password";
                        button.textContent = "👁️"; // Restaurar icono
                    }, 3000);
                }
            });
        }
    }

    togglePasswordVisibility("togglePassword", "password");
    togglePasswordVisibility("togglePasswordConfirm", "password_confirmation");
});

    // 📌 Script: Validación de contraseñas y activación del botón
    document.addEventListener("DOMContentLoaded", function() {
        const password = document.getElementById("new_password");
        const confirmPassword = document.getElementById("new_password_confirmation");
        const errorMessage = document.getElementById("password-error-message");
        const saveButton = document.getElementById("saveButton");

        const checkLength = document.getElementById("check-length");
        const checkUppercase = document.getElementById("check-uppercase");
        const checkNumber = document.getElementById("check-number");

        function validatePassword() {
            const hasLength = password.value.length >= 8;
            const hasUppercase = /[A-Z]/.test(password.value);
            const hasNumber = /[0-9]/.test(password.value);

            checkLength.checked = hasLength;
            checkUppercase.checked = hasUppercase;
            checkNumber.checked = hasNumber;

            return hasLength && hasUppercase && hasNumber;
        }

        function validateConfirmPassword() {
            if (confirmPassword.value === password.value && validatePassword()) {
                errorMessage.classList.add("hidden");
                saveButton.disabled = false;
                saveButton.classList.remove("cursor-not-allowed", "bg-gray-100", "text-gray-500");
                saveButton.classList.add("bg-cyan-700", "text-white");
            } else {
                errorMessage.classList.remove("hidden");
                saveButton.disabled = true;
                saveButton.classList.add("cursor-not-allowed", "bg-gray-100", "text-gray-500");
                saveButton.classList.remove("bg-cyan-700", "text-white");
            }
        }

        password.addEventListener("input", function() {
            validatePassword();
            validateConfirmPassword();
        });

        confirmPassword.addEventListener("input", validateConfirmPassword);
    });
</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>
    document.addEventListener("DOMContentLoaded", function() {

        const openModal = document.getElementById("openModal");
        const closeModal = document.getElementById("closeModal");
        const modal = document.getElementById("modal");

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

        closeModal.addEventListener("click", function() {
            modal.classList.add("hidden");
        });

        window.addEventListener("click", function(e) {
            if (e.target === modal) {
                modal.classList.add("hidden");
            }
        });

        const openPasswordModal = document.getElementById("openPasswordModal");
        const closePasswordModal = document.getElementById("closePasswordModal");
        const passwordModal = document.getElementById("modalPassword");

        openPasswordModal.addEventListener("click", function() {
            passwordModal.classList.remove("hidden");
            modal.classList.add("hidden");
        });

        closePasswordModal.addEventListener("click", function() {
            passwordModal.classList.add("hidden");
        });

        window.addEventListener("click", function(e) {
            if (e.target === passwordModal) {
                passwordModal.classList.add("hidden");
            }
        });

        function togglePasswordVisibility(buttonId, inputId) {
            const button = document.getElementById(buttonId);
            const input = document.getElementById(inputId);

            if (button && input) {
                button.addEventListener("click", function() {
                    if (input.type === "password") {
                        input.type = "text";
                        setTimeout(() => {
                            input.type = "password";
                        }, 3000);
                    } else {
                        input.type = "password";
                    }
                });
            }
        }

togglePasswordVisibility("togglePassword", "current_password");
togglePasswordVisibility("togglePasswordNew", "new_password");
togglePasswordVisibility("togglePasswordConfirm", "new_password_confirmation"); // ¡Este ID ahora sí existe!

        const password = document.getElementById("new_password");
        const confirmPassword = document.getElementById("new_password_confirmation");
        const errorMessage = document.getElementById("password-error-message");
        const saveButton = document.getElementById("saveButton");

        const checkLength = document.getElementById("check-length");
        const checkUppercase = document.getElementById("check-uppercase");
        const checkNumber = document.getElementById("check-number");

        function validatePassword() {
            const hasLength = password.value.length >= 8;
            const hasUppercase = /[A-Z]/.test(password.value);
            const hasNumber = /[0-9]/.test(password.value);

            checkLength.checked = hasLength;
            checkUppercase.checked = hasUppercase;
            checkNumber.checked = hasNumber;

            return hasLength && hasUppercase && hasNumber;
        }

        function validateConfirmPassword() {
            if (confirmPassword.value === password.value && validatePassword()) {
                errorMessage.classList.add("hidden");
                if (saveButton) { // Asegúrate de que saveButton existe
                    saveButton.disabled = false;
                    saveButton.classList.remove("cursor-not-allowed", "bg-gray-100", "text-gray-500");
                    saveButton.classList.add("bg-cyan-700", "text-white");
                }
            } else {
                errorMessage.classList.remove("hidden");
                if (saveButton) { // Asegúrate de que saveButton existe
                    saveButton.disabled = true;
                    saveButton.classList.add("cursor-not-allowed", "bg-gray-100", "text-gray-500");
                    saveButton.classList.remove("bg-cyan-700", "text-white");
                }
            }
        }

        if (password) {
            password.addEventListener("input", function() {
                validatePassword();
                validateConfirmPassword();
            });
        }

        if (confirmPassword) {
            confirmPassword.addEventListener("input", validateConfirmPassword);
        }

        const editAvatarBtn = document.getElementById("editAvatarBtn");
        if (editAvatarBtn) {
            const avatarImage = editAvatarBtn.querySelector('img');
            if (avatarImage) {
                avatarImage.addEventListener("click", function() {
                    document.getElementById("avatarModal").classList.remove("hidden");
                });
            }
        }
    });

    function cerrarModal() {
        document.getElementById("avatarModal").classList.add("hidden");
    }
    // ✅ Función para mostrar mensajes flash
    function mostrarMensajeFlash(mensaje, tipo = "success") {
        let flashMessage = document.createElement("div");
        flashMessage.id = "toast-message";
        flashMessage.className = `fixed top-5 left-5 px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 animate-slide-in 
        ${tipo === "success" ? "bg-green-200 text-green-500" : "bg-red-200 text-red-500"}`;

        flashMessage.innerHTML = `
        <svg class="w-6 h-6 text-white" 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="M9 12l2 2 4-4m0 5V7" />
        </svg>
        <span>${mensaje}</span>
    `;

        document.body.appendChild(flashMessage);

        // Ocultar con animación después de 3 segundos
        setTimeout(() => {
            flashMessage.classList.add('opacity-0', 'transition-opacity', 'duration-500');
            setTimeout(() => flashMessage.remove(), 500);
        }, 3000);
    }

    function subirAvatar() {
        let inputFile = document.getElementById("avatarInput");
        let errorMessage = document.getElementById("avatar-error-message");

        errorMessage.textContent = "";
        errorMessage.classList.add("hidden");

        if (!inputFile.files.length) {
            errorMessage.textContent = "Debes seleccionar una imagen.";
            errorMessage.classList.remove("hidden");
            return;
        }

        let file = inputFile.files[0];
        let reader = new FileReader();

        reader.onload = function(event) {
            let base64Image = event.target.result;

            fetch("{{ route('update-avatar') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        avatar: base64Image
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        cerrarModal();
                        mostrarMensajeFlash("Avatar actualizado correctamente", "success");
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    } else {
                        errorMessage.textContent = "Error al subir avatar";
                        errorMessage.classList.remove("hidden");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    errorMessage.textContent = "Ocurrió un error. Intente de nuevo.";
                    errorMessage.classList.remove("hidden");
                });
        };

        reader.readAsDataURL(file);
    }
</script>
<script>
    function toggleDetails(button) {
        const infoDiv = button.nextElementSibling;
        const icon = button.querySelector("svg");

        if (infoDiv.classList.contains("hidden")) {
            infoDiv.classList.remove("hidden");
            icon.classList.add("rotate-180");
        } else {
            infoDiv.classList.add("hidden");
            icon.classList.remove("rotate-180");
        }
    }
</script>
<script>
    function verInforme(nombreArchivo) {
        let url = `http://10.67.84.98/ris/images/empresas/emp620003808/informes/${nombreArchivo}.pdf`;
        document.getElementById("iframeInforme").src = url;
        document.getElementById("modalInforme").classList.remove("hidden");
    }

    function cerrarModal() {
        document.getElementById("modalInforme").classList.add("hidden");
        document.getElementById("iframeInforme").src = ""; // Limpia el iframe para evitar problemas
    }
</script>