{% extends is_granted('ROLE_ADMIN') or is_granted('ROLE_EMPLOYEE') ? "baseAdmin.html.twig" : is_granted('ROLE_CUSTOMER') ? "baseCustomer.html.twig" : "base.html.twig" %}

{% block body %}
    <div class="container">

        <!--First row-->
        <div class="row">
            <!--First column-->
            <div class="col-lg-7">
                <!--Featured image -->
                <div class="view overlay hm-white-light z-depth-1-half">
                    <img src="/img/other/account-banner.jpg" class="img-fluid " alt="Bild: Account Banner">
                    <div class="mask">
                    </div>
                </div>
                <br>
            </div>
            <!--./First column-->

            <!--Main information-->
            <!--Second column-->
            <div class="col-lg-5">
                <h2 class="h2-responsive font-bold">Kontoeinstellungen</h2>
                <hr>
                <p>Hier haben Sie die Möglichkeit, die hinterlegten Kontaktdaten zu ändern sowie Ihre Kontoeinstellungen
                    anzupassen.
                </p>
            </div>
            <!--./Second column-->
        </div>
        <!--/.First row-->

        <!--Second row-->
        <div class="row">
            <!--First column-->
            <div class="col-lg-12">
                <!-- Mögliche Hinweismeldungen anzeigen -->
                {% if app.session.flashbag.peekAll|length > 0 %}
                    {% for type, messages in app.session.flashbag.all %}
                        {% for message in messages %}
                            <div class="alert alert-{{ type ? type : '' }}">
                                <p>{{ message|trans({}, domain|default('messages')) }}</p>
                            </div>
                        {% endfor %}
                    {% endfor %}
                {% endif %}
            </div>
            <!--./First column-->
        </div>
        <!--/.Second row-->

        <!--Third row-->
        <div class="row pt-4">
            <!--First column: Space-->
            <div class="col-lg-2">
            </div>
            <!--./First column-->

            <!--Main information-->
            <!--Second column-->
            <div class="col-lg-8">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Allgemein</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">E-Mail Benachrichtigungen</a>
                    </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content card">
                    <!--Panel 1: Allgemein-->
                    <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
                        <br>
                        <!--First column-->
                        <div class="col-lg-12">
                            <!-- Form: Edit account -->
                            <form method="POST" action="{{ path('accountSettings') }}">
                                <div class="form-group">
                                    <i class="fa fa-child prefix grey-text"></i>
                                    <label for="selectGender">Anrede *</label>
                                    <select class="form-control" name="gender" id="selectGender">
                                        <option value="e" {% if userSettings.gender == 'e' %}selected{% endif %}>
                                        </option>
                                        <option value="m" {% if userSettings.gender == 'm' %}selected{% endif %}>Herr
                                        </option>
                                        <option value="w" {% if userSettings.gender == 'w' %}selected{% endif %}>Frau
                                        </option>
                                        <option value="d" {% if userSettings.gender == 'd' %}selected{% endif %}>divers
                                        </option>
                                    </select>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-user prefix grey-text"></i>
                                    <input type="text" id="inputUserFirstName" class="form-control" name="firstname"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.firstname }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Vornamen ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserFirstName">Vorname *</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-user prefix grey-text"></i>
                                    <input type="text" id="inputUserLastName" class="form-control" name="lastname"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.lastname }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Nachnamen ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserLastName">Nachname *</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-envelope prefix grey-text"></i>
                                    <input type="email" id="inputUserMail" class="form-control" name="email" required
                                           value="{{ userSettings.email }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie eine gültige E-Mail Adresse ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserMail">E-Mail Adresse *</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-industry prefix grey-text"></i>
                                    <input type="text" id="inputCompanyName" class="form-control" name="company"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.company }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie den Namen des Unternehmens, bei ' +
                                'dem Sie arbeiten, ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputCompanyName">Unternehmen *</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-lock prefix grey-text"></i>
                                    <input type="password" id="inputPassword" class="form-control" name="password"
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                           oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer)')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputPassword">Passwort *</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-lock prefix grey-text"></i>
                                    <input type="password" id="inputPassword2" class="form-control" name="password2"
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                           oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputPassword2">Passwort wiederholen *</label>
                                </div>

                                <!-- Diese Elemente müssen auch in diesem Formular sein, damit
                                die Daten korrekt gespeichert werden (nur versteckt).
                                -->
                                <div class="form-group" hidden>
                                    <i class="fa fa-exchange prefix grey-text"></i>
                                    <label for="checkboxMailNotifications">E-Mail Benachrichtigungen bei...</label><br>
                                    <input type="checkbox" name="notificationStatusChanged"
                                           value="1" {% if  userSettings.notificationStatusChanged %}
                                        checked="checked"{% endif %}> Statusänderungen
                                    <br/>
                                    <input type="checkbox" name="notificationShippingDateChanged"
                                           value="1" {% if  userSettings.notificationShippingDateChanged %}
                                        checked="checked"{% endif %}> Lieferterminänderungen
                                    <br/>
                                    <input type="checkbox" name="notificationOrderShipment"
                                           value="1" {% if  userSettings.notificationOrderShipment %}
                                        checked="checked"{% endif %}> Versand von Produkten
                                    <br/>
                                    <input type="checkbox" name="notificationOrderFinished"
                                           value="1" {% if  userSettings.notificationOrderFinished %}
                                        checked="checked"{% endif %}> Auftragsabschluss
                                    <br/>
                                    <input type="checkbox" name="notificationSurvey"
                                           value="1" {% if  userSettings.notificationSurvey %}
                                        checked="checked"{% endif %}> Kundenumfragen
                                    <br/>
                                </div>

                                <div class="text-center">
                                    <button href="" class="btn btn-primary" type="submit">Änderungen speichern <i
                                                class="fa fa-check-square ml-1"></i>
                                    </button>
                                </div>
                            </form>
                            <!-- Form: Edit account -->

                        </div>
                        <!--./First column-->
                    </div>
                    <!--/.Panel 1-->
                    <!--Panel 2: Benachrichtigungen-->
                    <div class="tab-pane fade" id="panel2" role="tabpanel">
                        <br>
                        <!--First column-->
                        <div class="col-lg-12">
                            <!-- Form: Edit account -->
                            <form method="POST" action="{{ path('accountSettings') }}">
                                <!-- Diese Elemente müssen auch in diesem Formular sein, damit
                                die Daten korrekt gespeichert werden (nur versteckt).
                                -->
                                <div class="form-group" hidden>
                                    <i class="fa fa-child prefix grey-text"></i>
                                    <label for="selectGender">Anrede *</label>
                                    <select class="form-control" name="gender" id="selectGender">
                                        <option value="m" {% if userSettings.gender == 'm' %}selected{% endif %}>Herr
                                        </option>
                                        <option value="w" {% if userSettings.gender == 'w' %}selected{% endif %}>Frau
                                        </option>
                                    </select>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-user prefix grey-text"></i>
                                    <input type="text" id="inputUserFirstName" class="form-control" name="firstname"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.firstname }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Vornamen ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserFirstName">Vorname *</label>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-user prefix grey-text"></i>
                                    <input type="text" id="inputUserLastName" class="form-control" name="lastname"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.lastname }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie Ihren Nachnamen ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserLastName">Nachname *</label>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-envelope prefix grey-text"></i>
                                    <input type="email" id="inputUserMail" class="form-control" name="email" required
                                           value="{{ userSettings.email }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie eine gültige E-Mail Adresse ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputUserMail">E-Mail Adresse *</label>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-industry prefix grey-text"></i>
                                    <input type="text" id="inputCompanyName" class="form-control" name="company"
                                           required
                                           pattern=".{1,}" value="{{ userSettings.company }}"
                                           oninvalid="this.setCustomValidity('Bitte geben Sie den Namen des Unternehmens, bei ' +
                                'dem Sie arbeiten, ein!')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputCompanyName">Unternehmen *</label>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-lock prefix grey-text"></i>
                                    <input type="password" id="inputPassword" class="form-control" name="password"
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                           oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer)')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputPassword">Passwort *</label>
                                </div>

                                <div class="md-form" hidden>
                                    <i class="fa fa-lock prefix grey-text"></i>
                                    <input type="password" id="inputPassword2" class="form-control" name="password2"
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                           oninvalid="this.setCustomValidity('Das Passwort entspricht nicht dem geforderten Format! ' +
                                '(8 oder mehr Zeichen, mindestens ein Groß- und ein Kleinbuchstabe sowie eine Ziffer')"
                                           oninput="setCustomValidity('')">
                                    <label for="inputPassword2">Passwort wiederholen *</label>
                                </div>


                                <div class="form-group">
                                    <i class="fa fa-exchange prefix grey-text"></i>
                                    <label for="checkboxMailNotifications">E-Mail Benachrichtigungen bei...</label><br>
                                    <input type="checkbox" name="notificationStatusChanged"
                                           value="1" {% if  userSettings.notificationStatusChanged %}
                                        checked="checked"{% endif %}> Statusänderungen
                                    <br/>
                                    <input type="checkbox" name="notificationShippingDateChanged"
                                           value="1" {% if  userSettings.notificationShippingDateChanged %}
                                        checked="checked"{% endif %}> Lieferterminänderung
                                    <br/>
                                    <input type="checkbox" name="notificationOrderShipment"
                                           value="1" {% if  userSettings.notificationOrderShipment %}
                                        checked="checked"{% endif %}> Versand von Produkten
                                    <br/>
                                    <input type="checkbox" name="notificationOrderFinished"
                                           value="1" {% if  userSettings.notificationOrderFinished %}
                                        checked="checked"{% endif %}> Auftragsabschluss
                                    <br/>
                                    <input type="checkbox" name="notificationSurvey"
                                           value="1" {% if  userSettings.notificationSurvey %}
                                        checked="checked"{% endif %}> Kundenumfragen
                                    <br/>
                                </div>

                                <div class="text-center">
                                    <button href="" class="btn btn-primary" type="submit">Änderungen speichern <i
                                                class="fa fa-check-square ml-1"></i>
                                    </button>
                                </div>
                            </form>
                            <!-- Form: Edit account -->
                        </div>
                        <!--./First column-->
                    </div>
                    <!--/.Panel 2-->
                </div>
            </div>
            <!--./Second column-->

            <!--Third column: Space-->
            <div class="col-lg-2">
            </div>
            <!--./Third column-->
        </div>
        <!--/.Third row-->

        <!--Fourth row-->
        <div class="row pt-4">
            <!--First column: Space-->
            <div class="col-lg-3">
            </div>
            <!--./First column-->

            <!--Second column-->
            <div class="col-lg-6">
                <a onclick="if(!confirm('Möchten Sie Ihr Benutzerkonto wirklich unwiderruflich löschen?')){ return false;}"
                   href="{{ path('_user_delete') }}" class="btn btn-danger">Benutzerkonto löschen<i
                            class="fa fa-trash ml-1"></i>

                    <a href="{{ path('accountSettings') }}" class="btn btn-grey">Änderungen
                        verwerfen <i
                                class="fa fa-remove ml-1"></i>
                    </a>
            </div>
            <!--/.Second column-->

            <!--Third column: Space-->
            <div class="col-lg-3">
            </div>
            <!--./Thirds column-->
        </div>
        <!--/.Fourth row-->

        <!--Fith row-->
        <div class="row">
            <!--First column: Space-->
            <div class="col-lg-3">
            </div>
            <!--./First column-->

            <!--Second column-->
            <div class="col-lg-6">
                <br>
                <p><strong>Hinweis:</strong> Alle mit Stern (<strong>*</strong>) gekennzeichneten Felder sind
                    Pflichtfelder.</p>
            </div>
            <!--./Second column-->

            <!--Third column: Space-->
            <div class="col-lg-3">
            </div>
            <!--./Thirds column-->
        </div>
        <!--/.Fith row-->
    </div>
{% endblock %}