<!doctypehtml><html lang=es><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Vety OnLine</title><link href=styles.css rel=stylesheet><style>*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}h1{color:#4caf50;font-size:3rem;font-weight:800}#diagnosis-text{color:#333}</style><div class=container style=margin-top:0><div class=phone-screen><header><h1>Vety OnLine</h1></header><main><div id=chat-container><div id=animal-selection><label for=animal-type style=font-weight:600>Seleccione el tipo de animal:</label> <select id=animal-type name=animal><option value=gato>Gato<option value=perro>Perro<option value=otro>Otro</select></div><div id=user-input><label for=user-message style=font-weight:600>Síntomas:</label> <textarea id=user-message style=font-family:Arial,sans-serif;font-size:1rem;color:#333;background-color:#fff name=symptoms></textarea></div><button id=send-button>Enviar</button><div id=diagnosis><label for=diagnosis-text style=font-weight:600>Análisis del caso:</label> <textarea id=diagnosis-text style=cursor:default;height:150px;background-color:#fff;font-family:Arial,sans-serif;font-size:1rem;color:#333 readonly></textarea></div><p id=consultas-restantes style=font-weight:600>Consultas restantes:</p><button id=new-consultation-button class=green-button>Nueva consulta</button></div></main></div><footer><p>© 2024 Vety Online - IAxTodos. Todos los derechos reservados.</footer></div><script>// Solicitar las consultas restantes al cargar la página
        document.addEventListener('DOMContentLoaded', function () {
            fetch('api_chat.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ check_session: true })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.consultas_restantes !== undefined) {
                        document.getElementById('consultas-restantes').textContent = "Consultas restantes: " + data.consultas_restantes;
                    } else if (data.error) {
                        document.getElementById('consultas-restantes').textContent = data.error;
                    }
                })
                .catch(error => {
                    console.error('Error al obtener las consultas restantes:', error);
                    document.getElementById('consultas-restantes').textContent = "Error al obtener las consultas restantes";
                });
        });

        document.getElementById('send-button').addEventListener('click', function (event) {
            event.preventDefault();
            const animal = document.getElementById('animal-type').value;
            const symptoms = document.getElementById('user-message').value.trim();

            // Validar si los síntomas no son claros (menos de 3 caracteres)
            if (symptoms.length < 3) {
                document.getElementById('diagnosis-text').value = 'No hay síntomas claros que analizar. Intente nuevamente';
                return;
            }

            // Cambiar el texto del botón a 'Enviando...' y deshabilitarlo
            const sendButton = document.getElementById('send-button');
            sendButton.disabled = true;
            sendButton.textContent = 'Enviando...';

            // Enviar la solicitud al servidor
            fetch('api_chat.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ animal: animal, symptoms: symptoms })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error en la solicitud al servidor: ' + response.status + ' ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    // Restablecer el texto del botón a 'Enviar' y habilitarlo
                    sendButton.disabled = false;
                    sendButton.textContent = 'Enviar';

                    if (data.diagnosis) {
                        document.getElementById('diagnosis-text').value = data.diagnosis;
                        if (data.consultas_restantes !== undefined) {
                            document.getElementById('consultas-restantes').textContent = "Consultas restantes: " + data.consultas_restantes;
                        }
                    } else if (data.error) {
                        document.getElementById('diagnosis-text').value = data.error;
                    } else {
                        document.getElementById('diagnosis-text').value = 'Hubo un error al obtener el diagnóstico. Por favor intenta de nuevo.';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('diagnosis-text').value = 'Hubo un error al procesar la solicitud: ' + error.message;
                    // Restablecer el texto del botón a 'Enviar' y habilitarlo
                    sendButton.disabled = false;
                    sendButton.textContent = 'Enviar';
                });
        });

        document.getElementById('new-consultation-button').addEventListener('click', function () {
            document.getElementById('animal-type').selectedIndex = 0;
            document.getElementById('user-message').value = '';
            document.getElementById('diagnosis-text').value = '';
        });</script>