{% extends "base.html" %}

{% block titulo %}
<title>Redes de Apoio</title>
{% endblock %}

{% block conteudo %}

<div class="max-w-7xl mx-auto px-4 py-8">

    <h2 class="text-3xl font-bold text-gray-800 mb-6">Redes de Apoio</h2>

    <!-- ALERTA -->
    <div class="bg-red-100 border border-red-300 text-red-800 p-4 rounded-xl mb-6">
        <strong class="block mb-2">🚨 Precisa de ajuda imediata?</strong>
        <p>📞 Ligue <strong>180</strong> – Central de Atendimento à Mulher</p>
        <p>🚓 Emergência: <strong>190</strong></p>
        <p>🚑 SAMU: <strong>192</strong></p>
        <p>🚒 Bombeiros: <strong>193</strong></p>
    </div>

    <!-- BUSCA -->
    <form method="GET" action="/buscar_apoio" class="bg-white p-4 rounded-2xl shadow mb-8">

        <div class="grid md:grid-cols-4 gap-4">

            <!-- CIDADE -->
            <div class="col-span-2 flex">
                <input
                    type="text"
                    name="cidade"
                    id="campoCidade"
                    class="w-full px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="Digite sua cidade"
                    value="{{ cidade if cidade else '' }}"
                    required>

                <button
                    type="button"
                    onclick="limparCampo()"
                    class="px-3 bg-gray-200 rounded-r-lg hover:bg-gray-300">
                    ✕
                </button>
            </div>

            <!-- PAÍS -->
            <input
                type="text"
                name="pais"
                class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
                placeholder="País"
                value="{{ pais if pais else 'Brasil' }}">

            <!-- FILTRO -->
            <select name="categoria" onchange="this.form.submit()"
                class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">

                <option value="todos" {% if categoria == "todos" %}selected{% endif %}>Todos</option>
                <option value="seguranca" {% if categoria == "seguranca" %}selected{% endif %}>Segurança</option>
                <option value="saude" {% if categoria == "saude" %}selected{% endif %}>Saúde</option>
                <option value="assistencia" {% if categoria == "assistencia" %}selected{% endif %}>Assistência social</option>
                <option value="juridico" {% if categoria == "juridico" %}selected{% endif %}>Jurídico</option>
            </select>

            <!-- BOTÃO -->
            <button class="md:col-span-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-900 transition">
                Buscar
            </button>

        </div>

    </form>

    <!-- RESULTADOS -->
    {% if servicos %}

    <h4 class="text-xl font-semibold text-gray-800 mb-4">Serviços encontrados</h4>

    <div class="grid md:grid-cols-2 gap-6">

        {% for s in servicos %}

        <div class="bg-white p-5 rounded-2xl shadow hover:shadow-lg transition">

            <div class="flex justify-between items-start mb-2">
                <h5 class="text-lg font-semibold text-gray-800">{{ s.nome }}</h5>
                <span class="text-xs px-3 py-1 rounded-full bg-gray-200 text-gray-700">
                    {{ s.tipo }}
                </span>
            </div>

            <p class="text-gray-600 text-sm mb-1">📍 {{ s.endereco }}</p>
            <p class="text-gray-600 text-sm">📞 {{ s.telefone }}</p>

        </div>

        {% endfor %}

    </div>

    {% elif cidade %}

    <div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded-xl">
        Nenhum serviço encontrado para <strong>{{ cidade }}</strong>.
        Tente buscar outra cidade próxima.
    </div>

    {% endif %}

</div>

<script>
function limparCampo() {
    document.getElementById('campoCidade').value = '';
}
</script>

<script id="dados-servicos" type="application/json">
{{ servicos | default([]) | tojson }}
</script>

{% endblock %}