{#
 * Copyright (C) 2014, Champs Libres Cooperative SCRLFS, <http://www.champs-libres.coop>
 * * This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 *  License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}
{% extends "@ChillMain/layout.html.twig" %}

{% block title %}{{ 'Add a person'|trans }}{% endblock title %}

{% block content %}
<div class="col-md-10 col-xxl person-new">

    <h1>{{ 'Add a person'|trans }}</h1>

    {% if alternatePersons is not empty %}
        <div class="alert alert-warning flash_message">
            <span>
            {% transchoice alternatePersons|length with { '%nb%': alternatePersons|length } %}
                %nb% person with similar name. Please verify that this is a new person
            {% endtranschoice %}
            </span>
        </div>

        <table class="table table-bordered border-dark">
            <thead>
            <tr>
                <th class="chill-red">{{ 'Name'|trans }}</th>
                <th class="chill-green">{{ 'Date of birth'|trans }}</th>
                <th class="chill-orange">{{ 'Nationality'|trans }}</th>
            </tr>
            </thead>
            <tbody>
            {% for person in alternatePersons %}
                <tr>
                    <td>
                        <a href="{{ path('chill_person_view', {'person_id': person.id } ) }}">
                            {{ person|chill_entity_render_string }}{% apply spaceless %}
                                {% if person.isOpen == false %}
                                    <i class="icon-lock"></i>
                                {% endif %}
                            {% endapply %}
                        </a>
                    </td>
                    <td>{% if person.birthdate is not null %}{{ person.birthdate|format_date('long') }}{% else %}&nbsp;{% endif %}</td>
                    <td>
                        {% if person.nationality is not null %}{{ person.nationality.name|localize_translatable_string }}{%  else  %}{{ 'Without nationality'|trans }}{% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}

    {{ form_start(form, {'attr' : {'id' : 'create-form'}}) }}

    <div class="row mb-1" style="display:flex;">
        {{ form_label(form.lastName, 'Last name'|trans) }}
        <div class="col-sm-8">
        {{ form_widget(form.lastName, { 'id' : 'lastname-field'}) }}
        </div>
    </div>
    <div id="suggest-lastname" class="col-sm-8" style="margin-left: auto;"></div>

    <div class="row mb-1" style="display:flex;">
        {{ form_label(form.firstName, 'First name'|trans) }}
        <div class="col-sm-8">
        {{ form_widget(form.firstName, { 'id' : 'firstname-field' }) }}
        </div>
    </div>
    <div id="suggest-firstname" class="col-sm-8" style="margin-left: auto;"></div>

    {% if form.altNames is defined %}
        {{ form_widget(form.altNames) }}
    {% endif %}

    {{ form_row(form.gender, { 'label' : 'Gender'|trans }) }}

    {{ form_row(form.birthdate, { 'label' : 'Date of birth'|trans }) }}

    {{ form_row(form.phonenumber, { 'label' : 'Phonenumber'|trans }) }}

    {{ form_row(form.mobilenumber, { 'label' : 'Mobilenumber'|trans }) }}

    {{ form_row(form.email, { 'label' : 'Email'|trans }) }}

    {% if form.center is defined %}
        {{ form_row(form.center) }}
    {% endif %}

    <ul class="record_actions sticky-form-buttons">
        <li class="dropdown">
            <a class="btn btn-create dropdown-toggle"
            href="#" role="button" id="newPersonMore" data-bs-toggle="dropdown" aria-expanded="false">
                {{ 'Add the person'|trans }}
            </a>
            <ul class="dropdown-menu" aria-labelledby="newPersonMore">
                <li>
                    {{ form_widget(form.editPerson, { 'attr': { 'class': 'dropdown-item' }}) }}
                </li>
                <li>
                    {{ form_widget(form.createPeriod, { 'attr': { 'class': 'dropdown-item' }}) }}
                </li>
            </ul>
        </li>
    </ul>

    {{ form_end(form) }}

</div>
{% endblock content %}

{% block js %}
    {# {{ encore_entry_script_tags('mod_disablebuttons') }} #}
    <script>
        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        const searchFragments = location.hash.substring(1).split('%20')

        if (searchFragments) {
            const suggestions = searchFragments.map((el) => `<p class="name badge bg-person" style="cursor: pointer; margin-right: 5px;">${capitalizeFirstLetter(el)}</p>`)
            const suggestFirstName = document.getElementById("suggest-firstname")
            const suggestLastname = document.getElementById("suggest-lastname")

            suggestFirstName.innerHTML = suggestions.join(' ');
            suggestLastname.innerHTML = suggestions.join(' ');
        }

        const tags = document.getElementsByClassName('name')

        for (let i=0; i < tags.length; i++) {
                const tag = tags[i]
                tag.onclick = function(e) {
                    const field = e.target.parentElement.id === 'suggest-lastname' ? document.getElementById('lastname-field') : document.getElementById('firstname-field')
                    const suggestion = e.target.parentElement.id === 'suggest-lastname' ? e.target.textContent.toUpperCase() : e.target.textContent

                    if (field.value === '') {
                        field.value = suggestion;
                    } else {
                        field.value = `${field.value} ${suggestion}`
                    }
                    e.target.style.display = "none";

                    [...document.querySelectorAll("p")]
                        .filter(p => p.textContent.includes(e.target.textContent))
                        .forEach(p => p.style.display = "none")
                }
            }
    </script>

{% endblock js %}