{% extends "base.html" %}

{% block titulo %}
<title>Perfil</title>
{% endblock %}

{% block conteudo %}
<div class="flex min-h-screen bg-gray-100">

  
  <!-- CONTEUDO -->
  <main class="flex-1 p-6 overflow-y-auto">

    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-semibold" text-[#142026]>Perfil</h1>
    </div>

    <!-- DADOS PESSOAIS -->
    <section class="bg-white p-6 rounded-2xl shadow mb-6">
      <h2 class="text-xl font-semibold mb-4 text-[#142026]">Dados pessoais</h2>

      <div class="space-y-4">
        <div>
          <label class="block text-sm mb-1 text-[#142026]">Nome</label>
          <input type="text" value="{{ user.usuario }}" class="w-full p-3 rounded-lg border bg-gray-50" />
        </div>

        <div>
          <label class="block text-sm mb-1 text-[#142026]">Email</label>
          <input type="email" value="{{ user.email }}" class="w-full p-3 rounded-lg border bg-gray-50" />
        </div>
      </div>
    </section>

    <!-- CONTATOS DE EMERGÊNCIA -->
    <section class="bg-white p-6 rounded-2xl shadow">
      <h2 class="text-xl font-semibold mb-4 text-[#142026]">Contatos de Emergência</h2>

      <div class="overflow-x-auto">
        <table id="contatos_table" class="w-full border rounded-lg overflow-hidden">
          <thead class="bg-purple-200">
            <tr>
              <th class="p-3 text-left text-[#142026]" >Nome</th>
              <th class="p-3 text-left text-[#142026]">Número</th>
              <th class="p-3 text-left text-[#142026]">Ação</th>
            </tr>
          </thead>
          <tbody>
            {% for contato in contatos %}
            <tr class="border-t">
              <td class="p-2">
                <input type="text" value="{{ contato.nome }}" class="nome w-full p-2 border rounded" />
              </td>
              <td class="p-2 flex items-center gap-2">
                <input type="password" value="{{ contato.numero }}" class="numero w-full p-2 border rounded" />
                <button type="button" onclick="toggleNumero(this)">👁️</button>
              </td>
              <td class="p-2">
                <a href="tel:{{ contato.numero }}">
                  <button class="bg-purple-600 text-white px-3 py-1 rounded">Ligar</button>
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="mt-4 flex gap-2">
        <button type="button" onclick="adicionarContato()" class="bg-purple-200 px-4 py-2 rounded">Adicionar</button>
      </div>

      <form id="contatos_form" method="post" class="mt-4">
        <input type="hidden" id="emergency_contacts_json" name="emergency_contacts_json">
        <button type="button" onclick="salvarContatos()" class="bg-purple-600 text-white px-4 py-2 rounded">Salvar Contatos</button>
      </form>
    </section>

  </main>
</div>

<script>
function toggleNumero(button) {
    const input = button.previousElementSibling;
    if (input.type === "password") {
        input.type = "text";
        button.textContent = "🙈";
    } else {
        input.type = "password";
        button.textContent = "👁️";
    }
}

function adicionarContato() {
    const table = document.getElementById('contatos_table').getElementsByTagName('tbody')[0];
    const row = table.insertRow();
    row.classList.add("border-t");
    row.innerHTML = `
        <td class="p-2"><input type="text" class="nome w-full p-2 border rounded"></td>
        <td class="p-2 flex items-center gap-2">
            <input type="password" class="numero w-full p-2 border rounded">
            <button type="button" onclick="toggleNumero(this)">👁️</button>
        </td>
        <td class="p-2">
            <button type="button" onclick="removerLinha(this)" class="bg-red-500 text-white px-2 py-1 rounded">Remover</button>
        </td>
    `;
}

function removerLinha(button) {
    const row = button.closest('tr');
    row.remove();
}

function salvarContatos() {
    const nomes = document.querySelectorAll('.nome');
    const numeros = document.querySelectorAll('.numero');
    const lista = [];

    for(let i = 0; i < nomes.length; i++){
        if(nomes[i].value && numeros[i].value){
            lista.push({nome: nomes[i].value, numero: numeros[i].value});
        }
    }

    document.getElementById('emergency_contacts_json').value = JSON.stringify(lista);
    document.getElementById('contatos_form').submit();
}
</script>

{% endblock %}