{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}

{% block breadcrumb %}
    Profil bearbeiten: <b class="d-md-down-none">{{ app.user.username }}</b>
{% endblock %}

{% block body %}
    <div class="edit_profile">
        <form action="{{ path("profile_save",{'redirect': app.request.attributes.get('_route'),'params': app.request.attributes.get('_route_params')}) }}" method="POST">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-12">
                            <label class="m-0 pt-2">Vorname</label>
                            <input class="form-control" value="{{ app.user.firstname }}" name="firstname">
                        </div>
                        <div class="col-12">
                            <label class="m-0 pt-2">Nachname</label>
                            <input class="form-control" value="{{ app.user.lastname }}" name="lastname">
                        </div>
                        <div class="col-12">
                            <label class="m-0 pt-2">E-Mail</label>
                            <input class="form-control" value="{{ app.user.email }}" name="email">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="m-0 pt-2">
                        Passwort ändern
                    </label>
                    <div class="card">
                        <div class="card-body p-2">
                            <div class="row">
                                {% if app.user.forcepasswordreset == true %}
                                <div class="col-12">
                                    <div class="alert alert-danger">
                                        <b>Achtung!</b> <br/> Aus Sicherheitsgründen müssen Sie regelmässig ihr Passwort ändern. Um das System weiter benutzen zu können richten Sie bitte ein neues Passwort ein.
                                    </div>
                                </div>
                                {% endif %}
                                <div class="col-12">
                                    <label class="m-0 pt-2">Altes Passwort</label>
                                    <input type="password" class="form-control" name="oldpassword">
                                </div>
                                <div class="col-12">
                                    <label class="m-0 pt-2">Neues Passwort</label>
                                    <input type="password" class="form-control" name="newpassword">
                                </div>
                                <div class="col-12">
                                    <label class="m-0 pt-2">Passwort wiederholen</label>
                                    <input type="password" class="form-control" name="newpassword2">
                                </div>
                                <div class="col-12">
                                    <div class="alert alert-danger passwordEqualAlert d-none mt-2">
                                        Die eingegeben Passwörter sind nicht identisch!
                                    </div>
                                    <div class="alert alert-danger passwordDifferentAlert d-none mt-2">
                                        Ihr neues Passwort muss sich von Ihrem alten Passwort unterscheiden!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <label class="m-0 pt-2">Einstellungen</label>
                    <div class="card">
                        <div class="card-body p-2">
                            <div class="row">
                                <div class="col-md-6">
                                    {% for setting, data in settings.option %}
                                        <div class="form-row">
                                            <div class="col d-flex align-items-center">
                                                <label class="m-0">{{ data.description }}</label>
                                            </div>
                                            <div class="col">
                                                <select class="form-control d-block" name="settingsOption[{{ setting }}]" autocomplete="off">
                                                    {% for value, option in data.options %}
                                                        <option value="{{ value }}"
                                                                {% if app.user.settings[setting] is defined %}
                                                                    {% if app.user.settings[setting] == value %}
                                                                        selected
                                                                    {% endif %}
                                                                {% endif %}
                                                        >{{ option }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>

                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    {% for setting, description in settings.bool %}
                                        <div class=" mb-2 d-flex align-items-center justify-content-between">
                                            {{ description|raw }}
                                            <div class="form-check form-switch">
                                                <input type="hidden" name="settingsBool[{{ setting }}]" value="off">
                                                <input class="form-check-input" type="checkbox" name="settingsBool[{{ setting }}]"
                                                        {% if app.user.settings[setting] is defined %}
                                                    {% if app.user.settings[setting] == true %}
                                                        checked
                                                    {% endif %}
                                                        {% endif %}>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-4">
                    <input type="hidden" value="{{ app.user.id }}" name="id">
                    <a href="{{ path('index') }}" class="btn btn-secondary">Abbrechen</a>
                    <button class="btn btn-primary noload" type="submit">Profil speichern</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
            $('[name=oldpassword], [name=newpassword], [name=newpassword2]').on('keyup', function () {
                let passwordInputSet = $('[name=oldpassword]').val().trim() != '' || $('[name=newpassword]').val().trim() != '' || $('[name=newpassword2]').val().trim() != ''
                $('[name=oldpassword], [name=newpassword], [name=newpassword2]').prop('required', passwordInputSet)
                if (passwordInputSet == true) {
                    checkPasswordEqual()
                }
            })
            $('form').on('submit', function (event) {
                if (event.originalEvent != undefined) {
                    event.preventDefault()
                    let passwordInputSet = $('[name=oldpassword]').val().trim() != '' || $('[name=newpassword]').val().trim() != '' || $('[name=newpassword2]').val().trim() != ''
                    if (passwordInputSet == true) {
                        if (!checkPasswordEqual()) {
                            return
                        }
                    }
                    showLoading()
                    $(this).submit()
                }
            })
        })

        function checkPasswordEqual() {
            let equal = $('[name=newpassword]').val() == $('[name=newpassword2]').val()
            $('.passwordEqualAlert').toggleClass('d-none', equal)

            let different = ($('[name=oldpassword]').val() != $('[name=newpassword]').val())
            $('.passwordDifferentAlert').toggleClass('d-none', different)

            return equal && different
        }
    </script>
{% endblock %}