{% extends 'public_template.html' %}

{% block titulo %}Makarios | Bem Aventurados em Cristo{% endblock %}

{% block header %}
    {% include 'public_header.html' with is_login_page=False %}
{% 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">Cadastro de Membros</h2> 

                {% for field in form %}
                    {% if field.errors %}
                        <div class="alert alert-danger">
                            {{ field.label }}: {{ field.errors|striptags }}
                        </div>
                    {% endif %}
                {% endfor %}

                <form method="post" action="{% url 'account_signup' %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ next }}">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <input class="form-control" type="text" name="first_name" placeholder="Nome" maxlength="30" required value="{{ request.POST.first_name }}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-user"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <input class="form-control" type="text" name="last_name" placeholder="Sobrenome" maxlength="30" required value="{{ request.POST.last_name }}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-user"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <input class="form-control" type="password" name="password1" placeholder="Senha" autocomplete="new-password" maxlength="128" required id="password1">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-key"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">                    
                            <div class="input-group mb-3">
                                <input class="form-control" type="password" name="password2" placeholder="Confirmar Senha" autocomplete="new-password" maxlength="128" required id="password2">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-lock"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <input class="form-control" type="email" name="email" placeholder="Email" autocomplete="email" maxlength="320" required id="email" value="{{ request.POST.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-6">
                            <div class="input-group mb-3">
                                <input class="form-control" type="text" id="celular" name="celular" placeholder="Celular" required value="{{ request.POST.celular }}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-phone"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <select class="form-control" name="genero" required id="genero">
                                    <option value="False" {% if request.POST.genero == 'False' %}selected{% endif %}>Feminino</option>
                                    <option value="True" {% if request.POST.genero == 'True' %}selected{% endif %}>Masculino</option>
                                </select>
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-venus-mars"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <input class="form-control" type="date" name="nascimento" required id="nascimento" value="{{ request.POST.nascimento }}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-birthday-cake"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <select class="form-control" name="batizado" required id="batizado">
                                    <option value="" disabled {% if not request.POST.batizado %}selected{% endif %}>Batizado?</option>
                                    <option value="0" {% if request.POST.batizado == '0' %}selected{% endif %}>Não</option>
                                    <option value="1" {% if request.POST.batizado == '1' %}selected{% endif %}>Sim</option>
                                </select>
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-cross"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="username" id="username">
                    <input type="hidden" name="role" value="client">

                    <div class="row justify-content-between mt-3 p-2">
                        <div class="col-md">
                            <button type="submit" class="btn btn-block bg-warning">Registrar Usuário</button>
                        </div>
                    </div>
                </form>     
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('celular').addEventListener('input', function (e) {
        let input = e.target;
        let value = input.value.replace(/\D/g, '');

        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;
    });

    document.querySelector('form').addEventListener('submit', function () {
        const email = document.getElementById('email').value;
        document.getElementById('username').value = email;
    });
</script>
{% endblock %}