//templates/pac_recepx.jinja2   # arquivo principal de consulta

{% extends "basefull.jinja2" %}

{% block container %}
<hr />
<div class="container">
    <div class="text-center">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">UF: Maranhão</button>
            <button type="button" class="btn btn-primary">REG_SAUDE: São Luis</button>
            <button type="button" class="btn btn-primary">MUN: São Luis</button>
            <button type="button" class="btn btn-primary">UBS: São Francisco</button>
            <div id="current_date">
            <script>
                date = new Date();
                year = date.getFullYear();
                month = date.getMonth() + 1;
                day = date.getDate();
                document.getElementById("current_date").innerHTML = day + "/" + month + "/" + year;
            </script>
            </div>
        </div>
    </div>

<hr />

    <div class="form">
        <div class="row g-2 mt-3">
            <h3><span class="font-semi-bold">Consultar cadastro do paciente</span></h3>
        </div>
        <form class="form-inline my-2 my-lg-0" action="http://localhost:6543/queryx" method="GET" id="consultaForm">
            <label for="cpf">Digite o CPF (11 números)</label>
            <input class="form-control mr-sm-2" type="text" id="cpf" name="cpf" require maxlength="11" value=''>
            <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="consultarCPF()">Consultar</button>
        </form>
    </div>

    <!-- Tabela de pacientes -->
    <div id="tabelaPacientes">
        <table border=1 id="pacientesTable">
            <tbody>
                {% for Paciente in pacientes %}
                    <tr>
                    <td>{{ Paciente.id }}</td> <td>{{ Paciente.name }}</td> <td>{{ Paciente.idade }}</td> <td>{{ Paciente.data_nascimento }}</td> <td>{{ Paciente.sexo }}</td>    
                    <td>{{ Paciente.raca }}</td> <td>{{ Paciente.fone }}</td> <td>{{ Paciente.endereco }}</td> <td>{{ Paciente.cpf }}</td> <td>{{ Paciente.cns }}</td>
                    <td><a href="/show/{{ Paciente.id }}">edit</a></td>
                    <td><a href="/delete/{{ Paciente.id }}">delete</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <script>
        function consultarCPF() {
            var cpf = document.getElementById("cpf").value;
            if (cpf !== "") {
                // Realizar a requisição para buscar os pacientes com o CPF
                $.ajax({
                    type: "GET",
                    url: "http://localhost:6543/queryx", // Sua URL de consulta
                    data: { cpf: cpf },
                    success: function (data) {
                        // Atualizar a tabela de pacientes com o resultado da consulta
                        $('#pacientesTable tbody').empty(); // Limpar tabela
                        if (data.pacientes.length > 0) {
                            data.pacientes.forEach(function (paciente) {
                                $('#pacientesTable tbody').append(
                                    '<tr>' +
                                    '<td>' + paciente.id + '</td>' +
                                    '<td>' + paciente.name + '</td>' +
                                    '<td>' + paciente.idade + '</td>' +
                                    '<td>' + paciente.data_nascimento + '</td>' +
                                    '<th>' + paciente.sexo + '</th>' +
                                    '<th>' + paciente.raca + '</th>' +
                                    '<th>' + paciente.fone + '</th>' +
                                    '<th>' + paciente.endereco + '</th>' +
                                    '<th>' + paciente.cpf + '</th>' +
                                    '<th>' + paciente.cns + '</th>' +
                                    '<th>' + paciente.Edit + '</th>' +
                                    '<th>' + paciente.Delete + '</th>' +
                                    '</tr>'+
                                );
                            });
                        } else {
                            $('#pacientesTable tbody').append('<tr><td colspan="12">Nenhum paciente encontrado.</td></tr>');
                        }
                    },
                    error: function () {
                        alert("Ocorreu um erro ao consultar o CPF.");
                    }
                });
            } else {
                alert("Por favor, insira um CPF válido.");
            }
        }
    </script>
</div>
{% endblock container %}