{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Makarios | Forja{% endblock %}

{% block header %}
    {% include 'public_header.html' %}
{% endblock %}

{% block content %}
<div id="formulario-externo" class="central_pane p-0 pt-5">
    <div class="card col-md-8 mx-auto mt-5 p-0">
        <div id="card-panel" class="card col-md card-main mb-0">
            <div class="card-body col-md mt-3">  
                <h2 class="mb-4">INSCRIÇÃO - 4⁰ EDIÇÃO "A FORJA"</h2>

                <form method="post">
                    {% csrf_token %}
                    <p>VALOR DA INSCRIÇÃO: <b>R$150,00 (Cento e cinquenta reais).</b> Está incluso neste valor: O discipulado; jantar de encerramento e lembrança.</p>

                    <p>O valor deve ser pago até 1 semana antes do término do Discipulado. Formas de pagamento: À vista ou no cartão de crédito (até 2x).</p>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="id_nome" class="form-label">Seu Nome:</label>
                            <div class="input-group mb-3">
                                {{ form.nome }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-user"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="id_email" class="form-label">Seu e-mail</label>
                            <div class="input-group mb-3">
                                {{ form.email }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-envelope"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="id_whatsapp" class="form-label">WhatsApp</label>
                            <div class="input-group mb-3">
                                {{ form.whatsapp }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fab fa-whatsapp"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="id_membro" class="form-label">É membro da Makarios Church?</label>
                            <div class="input-group">
                                {{ form.membro }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-church"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3" id="campo-outro" style="display:none;">
                            <label for="id_membro_outro" class="form-label">Outro:</label>
                            <div class="input-group">
                                {{ form.membro_outro }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-pen"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="id_assistiu_filme" class="form-label">Você já assistiu o filme "A Forja"?</label>
                            <div class="input-group">
                                {{ form.assistiu_filme }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-film"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="id_como_conheceu" class="form-label">Como você conheceu "A Forja"?</label>
                            <div class="input-group">
                                {{ form.como_conheceu }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-question-circle"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label d-block">Já participou da forja?</label>
                            <div class="row mt-1">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <label class="form-check-label" for="id_forja_nao">Não</label>
                                        <input class="form-check-input" type="checkbox" name="participou_forja" value="nao" id="id_forja_nao">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <label class="form-check-label" for="id_forja_1">1ª edição</label>
                                        <input class="form-check-input" type="checkbox" name="participou_forja" value="primeira" id="id_forja_1">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <label class="form-check-label" for="id_forja_2">2ª edição</label>
                                        <input class="form-check-input" type="checkbox" name="participou_forja" value="segunda" id="id_forja_2">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <label class="form-check-label" for="id_forja_3">3ª edição</label>
                                        <input class="form-check-input" type="checkbox" name="participou_forja" value="terceira" id="id_forja_3">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p>Se casado, informar nome e telefone da esposa. Se solteiro, nome e telefone da mãe:</p>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="id_nome_contato" class="form-label">Nome do Contato:</label>
                            <div class="input-group">
                                {{ form.nome_contato }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-user-friends"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="id_telefone_contato" class="form-label">Telefone do Contato</label>
                            <div class="input-group">
                                {{ form.telefone_contato }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-phone-alt"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-block bg-warning">Enviar Inscrição</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const membroField = document.getElementById('id_membro');
    const outroField = document.getElementById('campo-outro');

    function toggleOutro() {
        if (membroField.value === 'Outro') {
            outroField.style.display = 'block';
        } else {
            outroField.style.display = 'none';
        }
    }

    membroField.addEventListener('change', toggleOutro);
    toggleOutro(); // Estado inicial
});
</script>

<script>
    document.getElementById('id_whatsapp').addEventListener('input', function (e) {
        let input = e.target;
        let value = input.value.replace(/\D/g, ''); // remove tudo que não for número

        // Aplica a máscara (99) 99999-9999
        if (value.length > 0) {
            value = '(' + value;
        }
        if (value.length > 3) {
            value = value.slice(0, 3) + ') ' + value.slice(3);
        }
        if (value.length > 10) {
            value = value.slice(0, 10) + '-' + value.slice(10);
        }
        if (value.length > 15) {
            value = value.slice(0, 15);
        }

        input.value = value;
    });
</script>

<script>
    document.getElementById('id_telefone_contato').addEventListener('input', function (e) {
        let input = e.target;
        let value = input.value.replace(/\D/g, ''); // remove tudo que não for número

        // Aplica a máscara (99) 99999-9999
        if (value.length > 0) {
            value = '(' + value;
        }
        if (value.length > 3) {
            value = value.slice(0, 3) + ') ' + value.slice(3);
        }
        if (value.length > 10) {
            value = value.slice(0, 10) + '-' + value.slice(10);
        }
        if (value.length > 15) {
            value = value.slice(0, 15);
        }

        input.value = value;
    });
</script>
{% endblock %}