{% extends 'main_base.html.twig' %}
{% block title %}Profile{% endblock %}
{% block description %}Profile{% endblock %}
{% block content %}
    {% set kurses = getKurse() %}
    <div class="profile__section__wrapper">
        <div class="profile__section accordion" id="accordionExample">
            <h1 class="profile__section-title">
                Benutzerkonto
            </h1>
            <div class="profile__section-accordions accordion-item">
                <h2 class="accordion-header profile__section-accordions-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Benutzerdaten
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                    <form action="{{ path('main_profile_edit') }}" id="profileEdit" method="POST"
                          enctype="multipart/form-data">
                        <div class="accordion-body">
                            <div class="profile__section-profile__informations input__sections primary__input__section"
                                 id="profile-info">
                                <div class="input">
                                    <label for="" class="black">Benutzername *</label>
                                    <input type="text" id="user_benutzername" disabled name="user[benutzername]"
                                           required="required"
                                           data-type="{{ user.username }}" value="{{ user.username }}">
                                </div>
                                <div id="CheckBenutzerMatch"></div>
                                <div class="input">
                                    <label for="" class="black">Email *</label>
                                    <input type="email" id="user_email" disabled name="user[email]"
                                           required="required"
                                           data-value="{{ user.email }}"
                                           value="{{ user.email }}">
                                </div>
                                <div id="CheckMailMatch"></div>
                                <div class="input select">
                                    <label for="" class="black">Typ *</label>
                                    <select id="profile_typ" disabled name="profile[typ]">
                                        <option value="0" {% if user.profile.typ|default == '0' %} selected="selected"{% endif %}>
                                            Privatkunde
                                        </option>
                                        <option value="1" {% if user.profile.typ|default == '1' %} selected="selected"{% endif %}>
                                            Geschäftskunde
                                        </option>
                                    </select>
                                </div>
                                <div class="input {% if user.profile.typ|default == '0' %} d-none {% endif %}">
                                    <label for="" class="black">Firma*</label>
                                    <input type="text" id="profile_firma" disabled name="profile[firma]"
                                           maxlength="255"
                                           value="{{ user.profile.firma|default('') }}"
                                           required="required">
                                </div>
                                <div class="input select">
                                    <label for="" class="black">Anrede *</label>
                                    <select id="profile_anrede" disabled name="profile[anrede]">
                                        <option value="0"{% if user.profile.anrede|default == '0' %} selected="selected"{% endif %}>
                                            Herr
                                        </option>
                                        <option value="1"{% if user.profile.anrede|default == '1' %} selected="selected"{% endif %}>
                                            Frau
                                        </option>
                                    </select>
                                </div>
                                <div class="input">
                                    <label for="" class="black">Vorname *</label>
                                    <input type="text" id="profile_name" disabled name="profile[name]"
                                           maxlength="255"
                                           value="{{ user.profile.name|default }}" required>
                                </div>
                                <div class="input">
                                    <label for="" class="black">Nachname *</label>
                                    <input type="text" id="profile_vorname" disabled name="profile[vorname]"
                                           maxlength="255"
                                           value="{{ user.profile.vorname|default }}" required>
                                </div>
                                <div class="input">
                                    <label for="" class="black">Strasse / Nr *</label>
                                    <div class="d-flex">
                                        <input type="text" id="profile_strasse" disabled name="profile[strasse]"
                                               required="required" maxlength="255" class="sm__input"
                                               value="{{ user.profile.strasse|default }}"
                                               style="width: 219px; margin-right: 10px">
                                        <input type="number" id="profile_strasse_nr" disabled
                                               name="profile[strasseNr]"
                                               required="required" class="md__input"
                                               value="{{ user.profile.strasseNr|default }}" style="width: 81px">
                                    </div>
                                </div>
                                <div class="input">
                                    <label for="" class="black">PLZ * / Ort *</label>
                                    <div class="d-flex">
                                        <input type="text" id="profile_lage" disabled name="profile[ort]"
                                               required="required" class="ort sm__input"
                                               value="{{ user.profile.ort|default }}"
                                               style="width: 81px; margin-right: 10px">
                                        <input type="number" id="profile_postcode" disabled name="profile[plz]"
                                               required="required" class="plz md__input"
                                               value="{{ user.profile.plz|default }}"
                                               style="width: 219px;">
                                    </div>
                                </div>
                                <div class=" input select">
                                    <label for="" class="black">Land *</label>
                                    <select id="profile_land" disabled name="profile[land]">
                                        <option value="1"{% if user.profile.land|default == '1' %} selected="selected"{% endif %}>
                                            Schweiz
                                        </option>
                                        <option value="2"{% if user.profile.land|default == '2' %} selected="selected"{% endif %}>
                                            Deutschland
                                        </option>
                                        <option value="3"{% if user.profile.land|default == '3' %} selected="selected"{% endif %}>
                                            Österreich
                                        </option>
                                    </select>
                                </div>
                                <div class="input">
                                    <label for="" class="black">Telefonnummer</label>
                                    <input type="text" disabled id="profile_tel" name="profile[telefonnummer]"
                                           maxlength="255" value="{{ user.profile.telefonnummer|default }}">
                                </div>
                                <div class="input">
                                    <label for="" class="black">Geburtsdatum</label>
                                    <input type="date" disabled id="profile_birthdate" name="profile[birthdate]"
                                           value="{{ user.profile.birthdate|default is not null ? user.profile.birthdate|default|date('Y-m-d') : '' }}">
                                </div>
                            </div>
                            <div class="profile__section-radio__sections">
                                <div class="profile__section-radio__btn">
                                    <input type="radio" class="radio__button__input" id="choice1-1" name="choice1">
                                    <span class="radio__button__control"></span>
                                    <label for="choice1-1">Lieferadresse gleich wie Rechnungsadresse</label>
                                </div>
                                <div class="profile__section-radio__btn">
                                    <input type="radio" class="radio__button__input" id="choice1-2" name="choice1">
                                    <span class="radio__button__control"></span>
                                    <label for="choice1-2">andere Lieferadresse</label>
                                </div>
                            </div>
                            <input type="hidden" id="fos_user_profile_form__token"
                                   name="fos_user_profile_form[_token]"
                                   value="{{ csrf_token('authenticate') }}">

                            <div class="">
                                <div class="f-left border-grey flex-center padding-5" id="edit">
                                    <a href="javascript:void(0)" class="fs-16px btn08em">ändern</a>
                                </div>
                                <div class="f-left border-grey flex-center padding-5 profile-abberden"
                                     style="display: none">
                                    <a href="javascript:void(0)" class="fs-16px">abbrechen</a>
                                </div>
                                <div class="f-right">
                                    <button type="submit" class="btn none" style="display: none">
                                        <div class="basket-finish basket-login flex-center">
                                            <div class="disabled"></div>
                                            <p class="disabled fs-16px btn08em">Speichern</p>
                                        </div>
                                    </button>
                                </div>
                                <div class="temizle"></div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="profile__section-accordions accordion-item">
                <h2 class="accordion-header profile__section-accordions-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                        Passwort ändern
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <form action="{{ path('main_profile_change_password') }}" name="change_password" method="POST"
                              enctype="multipart/form-data">
                            <div class="profile__section-profile__informations input__sections primary__input__section">
                                <div class="input">
                                    <label for="" class="altes_passwort">Altes Passwort *</label>
                                    <input type="password" class="altes_passwort"
                                           id="altes_passwort"
                                           name="altes_passwort"
                                           required="required" autocomplete="off">
                                </div>
                                <div class="input">
                                    <label for="" class="black">Neues Passwort *</label>
                                    <input type="password" class="valid-password"
                                           id="fos_user_change_password_form_current_password"
                                           name="fos_user_change_password_form[current_password]"
                                           required="required" autocomplete="current-password">
                                </div>
                                <div class="input">
                                    <label for="" class="black">Neues Passwort wiederholen *</label>
                                    <input type="password" class="valid-password"
                                           id="fos_user_change_password_form_plainPassword_first"
                                           name="fos_user_change_password_form[plainPassword][first]"
                                           required="required" autocomplete="new-password" disabled>
                                </div>
                                <input type="hidden" id="fos_user_change_password_form__token"
                                       name="fos_user_change_password_form[_token]"
                                       value="{{ csrf_token('authenticate') }}">
                                <div class="passwort-alert warning__messages">
                                    <div class="line-height-1 password-change-grid">
                                        <span></span>
                                        <div class="d-flex alert-line password-valid-step-5">
                                            <img src="{{ asset('media/site/red.svg') }}"
                                                 class="alert-icon alert-icon-red mr-2" alt="">
                                            <img src="{{ asset('media/site/green.svg') }}"
                                                 class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                            <span class="alert-label small">Bestätigen Sie Ihr altes Passwort</span>
                                        </div>
                                    </div>
                                    <div class="line-height-1 password-change-grid">
                                        <span></span>
                                        <div class="d-flex alert-line password-valid-step-1">
                                            <img src="{{ asset('media/site/red.svg') }}"
                                                 class="alert-icon alert-icon-red mr-2" alt="">
                                            <img src="{{ asset('media/site/green.svg') }}"
                                                 class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                            <span class="alert-label small">Ihr Passwort muss mindestens 8 Charakter beinhalten</span>
                                        </div>
                                    </div>
                                    <div class="line-height-1 password-change-grid">
                                        <span></span>
                                        <div class="d-flex alert-line password-valid-step-2">
                                            <img src="{{ asset('media/site/red.svg') }}"
                                                 class="alert-icon alert-icon-red mr-2" alt="">
                                            <img src="{{ asset('media/site/green.svg') }}"
                                                 class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                            <span class="alert-label small">Ihr Passwort muss eine Ziffer oder Zahl beinhalten</span>
                                        </div>
                                    </div>
                                    <div class="line-height-1 password-change-grid">
                                        <span></span>
                                        <div class="d-flex alert-line password-valid-step-3">
                                            <img src="{{ asset('media/site/red.svg') }}"
                                                 class="alert-icon alert-icon-red mr-2" alt="">
                                            <img src="{{ asset('media/site/green.svg') }}"
                                                 class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                            <span class="alert-label small">Ihr Passwort muss Klein- und Grossbuchstaben beinhalten</span>
                                        </div>
                                    </div>
                                    <div class="line-height-1 password-change-grid">
                                        <span></span>
                                        <div class="d-flex alert-line password-valid-step-4">
                                            <img src="{{ asset('media/site/red.svg') }}"
                                                 class="alert-icon alert-icon-red mr-2" alt="">
                                            <img src="{{ asset('media/site/green.svg') }}"
                                                 class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                            <span class="alert-label small">Sie müssen Ihr Passwort bestätigen</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="registrationFormAlert" id="CheckPasswordMatch"></div>
                                <div class="margint-35" id="">
                                    <div class="margint-35">
                                        <div class="f-right">
                                            <div class="product__information-products__completed__btns d-flex align-items-center basket-finish basket-login">
                                                <button id="addProduct" disabled class="non ms-3" type="submit">
                                                    Speichern <span></span></button>
                                            </div>
                                        </div>
                                        <div class="temizle"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="profile__section-accordions accordion-item ">
                <h2 class="accordion-header profile__section-accordions-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                        Bestellungen
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        {% for item in bestellungen %}
                            {% if item.befored == '' %}
                                {% if item.createdAt|date('U') >= '06.08.2022'|date('U') %}
                                    {% set site_dir = getSiteDir() %}
                                    {% set md5_file_name = 'rechnung_'~item.bestellenNumber|default %}

                                    {% if item.zahlung.id != 4 %}
                                        {% set site_dir = getSiteDir() %}
                                        {% set md5_file_name = 'kaufbeleg_'~item.bestellenNumber~'-bl' %}
                                        {% set fileDir = 'rechnung_'~item.befored~'-'~md5_file_name|md5~'.pdf' %}
                                        {% set pdf_yolu = site_dir~'public/media/pdf/kaufbeleg_'~item.bestellenNumber~'-'~md5_file_name|md5~'.pdf' %}
                                    {% else %}
                                        {% set site_dir = getSiteDir() %}
                                        {% set md5_file_name = 'rechnung_'~item.bestellenNumber~'-rc' %}
                                        {% set pdf_yolu = site_dir~'public/media/pdf/rechnung_'~item.bestellenNumber~'-'~md5_file_name|md5~'.pdf' %}
                                    {% endif %}
                                {% else %}
                                    {% set site_dir = getSiteDir() %}
                                    {% set md5_file_name = 'rechnung_'~item.bestellenNumber|default %}

                                    {% if item.zahlung.id != 4 %}
                                        {% set site_dir = getSiteDir() %}
                                        {% set md5_file_name = 'kaufbeleg_'~item.bestellenNumber %}
                                        {% set fileDir = 'rechnung_'~item.befored~'-'~md5_file_name|md5~'.pdf' %}
                                        {% set pdf_yolu = site_dir~'public/media/pdf/kaufbeleg_'~item.bestellenNumber~'-'~md5_file_name|md5~'.pdf' %}
                                    {% else %}
                                        {% set site_dir = getSiteDir() %}
                                        {% set md5_file_name = 'rechnung_'~item.bestellenNumber %}
                                        {% set pdf_yolu = site_dir~'public/media/pdf/rechnung_'~item.bestellenNumber~'-'~md5_file_name|md5~'.pdf' %}
                                    {% endif %}
                                {% endif %}
                            {% else %}
                                {% set site_dir = 'https://test.technoone.net/modular-site/' %}
                                {% set md5_file_name = 'rechnung_'~item.befored %}
                                {% set fileDir = 'rechnung_'~item.befored~'-'~md5_file_name|md5~'.pdf' %}
                                {% set PdfControl = getPdfControl(fileDir) %}
                                {% if PdfControl == 1 %}
                                    {% set pdf_yolu = site_dir~'public/media/pdf/rechnung_'~item.befored~'-'~md5_file_name|md5~'.pdf' %}
                                {% else %}
                                    {% set md5_file_name2 = 'kaufbeleg_'~item.befored %}
                                    {% set pdf_yolu2 = site_dir~'public/media/pdf/kaufbeleg_'~item.befored~'-'~md5_file_name|md5~'.pdf' %}
                                {% endif %}
                            {% endif %}
                            <div class="previous__purchases d-flex"
                                 style="padding: 10px 0;{% if not loop.last %}border-bottom: thin solid #00000052;{% endif %}">
                                <div class="left__wrapper" style="align-items: center;">
                                    <div class="previous__purchases-name">
                                        {#Bestellung vom #}{{ item.createdAt|date('d.m.Y') }}
                                    </div>
                                    <div class="previous__purchases-price mx-2 b-bottom">
                                        CHF {{ item.allgemeinerBetrag|number_format(2) }}
                                    </div>
                                    <div class="previous__purchases-price mx-2 b-bottom">
                                        <div style="width: 200px; margin: 0 20px; padding: 0 20px;">
                                            {% set zg = getBestellZahlungseingang(item.id) %}
                                            {% for zahlung in zg %}
                                                <div data-zh="{{ zahlung.price|number_format(2) }}"
                                                     style="align-items: center; justify-content: space-between; display: flex; {% if not loop.last %}border-bottom: thin solid #00000052;{% endif %}">
                                                    CHF {{ zahlung.price|number_format(2) }}
                                                    <br>
                                                    {% set day1 = item.createdAt|date('d.m.y') %}
                                                    <span style="font-size: 13px;">({{ day1 }})</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="previous__purchases-price mx-2">
                                        <p class="fs-16px mb-0" style="width: 100px; display: grid;">
                                            {% for barcode in item.versandetikette %}
                                                <span>{{ barcode.nummer }}</span>
                                            {% endfor %}
                                        </p>
                                    </div>
                                </div>
                                <div class="previous__purchases-download">
                                    <a href="{{ pdf_yolu|default }}" download>Download PDF</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% if bewertungen %}
                <div class="profile__section-accordions accordion-item ">
                    <h2 class="accordion-header profile__section-accordions-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
                            Bewertungen
                        </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <div class="acordions acordion-bewertungen">
                                <div class="acordion-inner">
                                    {% for bewer in bewertungen %}
                                        <div class="profile-grid marginb-5 margint-15" id="bewer_{{ bewer.id }}">
                                            <p class="fs-16px">Bewertungen vom</p>
                                            <p class="fs-16px">{{ bewer.createdAt|date('d.m.Y') }}</p>
                                            <p></p>
                                            <div class="d-flex justify-content-end">
                                                <div onclick="removeBewer({{ bewer.id }})" class="basket-remove-area">
                                                    <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg">
                                                </div>
                                                <div class="flex-center">
                                                    <a class="px-2 modal-btn border-grey" href="javascript:"
                                                       data-ajax-modal
                                                       data-href="{{ path('main_ajax_bewer_edit',{'id':bewer.id}) }}">bearbeiten</a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            {% if user.userTyped.id|default == 3 %}
                <div class="profile__section-accordions accordion-item ">
                    <h2 class="accordion-header profile__section-accordions-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
                            Meine Statistik
                        </button>
                    </h2>
                    <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                        <div class="acordions acordion-bewertungen">
                            <div class="acordion-body">
                                <div class="acordion-inner my-3 d-flex align-items-center justify-content-center">
                                    <div class="w-50">
                                        <div class="d-flex align-items-center mb-5 justify-content-between">
                                            <select name="years" class="form-control w-50 mr-2" id="years">
                                                <option {% if (year == '2021') %}selected{% endif %}
                                                        value="2021">2021
                                                </option>
                                                <option {% if (year == '2022') %}selected{% endif %}
                                                        value="2022">2022
                                                </option>
                                                <option {% if (year == '2023') %}selected{% endif %}
                                                        value="2023">2023
                                                </option>
                                            </select>
                                            <select name="months" class="form-control w-50 mml-2" id="months">
                                                <option {% if (month == '01') %}selected{% endif %} value="01">
                                                    Januar
                                                </option>
                                                <option {% if (month == '02') %}selected{% endif %} value="02">
                                                    Februar
                                                </option>
                                                <option {% if (month == '03') %}selected{% endif %} value="03">
                                                    März
                                                </option>
                                                <option {% if (month == '04') %}selected{% endif %} value="04">
                                                    April
                                                </option>
                                                <option {% if (month == '05') %}selected{% endif %} value="05">
                                                    Mai
                                                </option>
                                                <option {% if (month == '06') %}selected{% endif %} value="06">
                                                    Juni
                                                </option>
                                                <option {% if (month == '07') %}selected{% endif %} value="07">
                                                    Juli
                                                </option>
                                                <option {% if (month == '08') %}selected{% endif %} value="08">
                                                    August
                                                </option>
                                                <option {% if (month == '09') %}selected{% endif %} value="09">
                                                    September
                                                </option>
                                                <option {% if (month == '10') %}selected{% endif %} value="10">
                                                    Oktober
                                                </option>
                                                <option {% if (month == '11') %}selected{% endif %} value="11">
                                                    November
                                                </option>
                                                <option {% if (month == '12') %}selected{% endif %} value="12">
                                                    Dezember
                                                </option>
                                            </select>
                                        </div>
                                        <div class="border-bottom d-flex font-weight-bolder mb-3 w-100">Anzahl
                                            Klicks
                                        </div>
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="w-75 font-weight-bolder">Nummer anzeigen:</div>
                                            <div class="bold nummerCount">{{ phoneClick|default(0) }}</div>
                                        </div>
                                        <div class="d-flex w-100 align-items-center justify-content-between">
                                            <div class="w-75 font-weight-bolder">Mehr erfahren:</div>
                                            <div class="bold mehrCount">{{ mehrClick|default(0) }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="profile__section-accordions accordion-item ">
                    <h2 class="accordion-header profile__section-accordions-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
                            Meine Kurse
                        </button>
                    </h2>
                    <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                        <div class="acordion-body">
                            <div class="acordion-inner">
                                <div id="kurses">
                                    {% for kursesx in kurses %}
                                        {% set kurse = kursesx %}
                                        {% if kursesx.kurseId|length > 0 %}
                                            {% set kurse = kursesx.kurseId[0] %}
                                        {% endif %}
                                        <div class="border-grey py-3 row mx-0 {% if kurses|length > 1 %}mb-4{% endif %}"
                                             id="kurse_{{ kurse.id }}">
                                            <div class="col-12 d-flex justify-content-between align-items-center mb-3">
                                                <p>
                                                    <b class="fs-18px">Standort {{ loop.index }} {# {{ kurses|length - loop.index + 1 }} #}</b>
                                                </p>
                                                <div class="d-flex" onclick="kurseDelete({{ kurse.id }})">
                                                    <div class="basket-remove-area p-0">
                                                        <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg"
                                                             alt="">
                                                    </div>
                                                    <div class="ml-2"><a href="javascript:void(0)">löschen</a></div>
                                                </div>
                                            </div>
                                            <form enctype="multipart/form-data" id="newKurse" name="newKurse"
                                                  class="row mx-0">
                                                <input type="hidden" name="kurse_id" id="kurse_id"
                                                       value="{{ kurse.id|default('') }}">
                                                <div class="col-md-6">
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Kontakt</label>
                                                        <input type="text" id="kurse_firma"
                                                               name="kurse[firma]"
                                                               required="required"
                                                               value="{{ kurse.firma|default }}">
                                                    </div>
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Telefon</label>
                                                        <input type="email" id="kurse_telefon"
                                                               name="kurse[telefon]"
                                                               required="required"
                                                               value="{{ kurse.telefon|default }}">
                                                    </div>
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Link</label>
                                                        <input type="url" id="kurse_link"
                                                               name="kurse[link]"
                                                               required="required"
                                                               value="{{ kurse.link|default }}">
                                                    </div>


                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Kursort</label>
                                                        <input type="email" id="kurse_name"
                                                               name="kurse[name]"
                                                               required="required"
                                                               value="{{ kurse.name|default }}">
                                                    </div>
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black"></label>
                                                        <input type="text" id="kurse_name2"
                                                               name="kurse[name2]"
                                                               required="required" value="{{ kurse.name2|default }}">
                                                    </div>


                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">x-coord</label>
                                                        <div class="d-flex justify-content-between">
                                                            <input type="text" class="w-80px mr-2 xyCord"
                                                                   id="kurse_xcoord"
                                                                   name="kurse[xcoord]" required="required"
                                                                   value="{{ kurse.xcoord|default }}">
                                                            <label for="" class="black mr-2">y-coord</label>
                                                            <input type="text" class="w-80px xyCord"
                                                                   id="kurse_ycoord"
                                                                   name="kurse[ycoord]" required="required"
                                                                   value="{{ kurse.ycoord|default }}">
                                                        </div>
                                                    </div>
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Zustand</label>
                                                        {% if kurse.isenabled == '1' %}
                                                            <span>
                                                                <img src="{{ asset('assets/main/img/tik.svg') }}"
                                                                     alt="aktiv" width="20"> aktiv
                                                            </span>
                                                        {% else %}
                                                            <span>
                                                                <img src="{{ asset('assets/main/img/red-tik.svg') }}"
                                                                     alt="passiv" width="20"> passiv
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                    <div class="profile-kurse-grid mt-3">
                                                        <label for="" class="black"></label>
                                                        <div class="f-left border-grey flex-center padding-5 w-fit-content"
                                                             onclick="NewKurse(this.closest('form'))"><a
                                                                    href="javascript:void(0)"
                                                                    class="fs-15px btn08em">speichern</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Logo</label>
                                                        <div class="border overflow-hidden d-flex align-items-center text-center"
                                                             style="height: 150px;">
                                                            <label for="kurse_logo" class="k_label mb-0">
                                                                {% if kurse.logo != '' %}
                                                                    <input type="file"
                                                                           style="opacity: 0;position: absolute;"
                                                                           name="kurse_logo" id="kurse_logo"
                                                                           class="w-100">
                                                                    <img src="{{ asset('media/kurse/logo/'~kurse.logo) }}"
                                                                         alt="{{ kurse.name }}" class="kurse_img">
                                                                {% else %}
                                                                    <input type="file" name="kurse_logo" id="kurse_logo"
                                                                           class="w-100 kurse_input">
                                                                {% endif %}
                                                                <div class="l_hvr">
                                                                    <svg viewBox="0 0 24 24"
                                                                         xmlns="http://www.w3.org/2000/svg">
                                                                        <path d="M19,13a1,1,0,0,0-1,1v.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.7L9.41,11.12a2.85,2.85,0,0,0-3.93,0L4,12.6V7A1,1,0,0,1,5,6h7a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13ZM5,20a1,1,0,0,1-1-1V15.43l2.9-2.9a.79.79,0,0,1,1.09,0l3.17,3.17,0,0L15.46,20Zm13-1a.89.89,0,0,1-.18.53L13.31,15l.7-.7a.77.77,0,0,1,1.1,0L18,17.21ZM22.71,4.29l-3-3a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-3,3a1,1,0,0,0,1.42,1.42L18,4.41V10a1,1,0,0,0,2,0V4.41l1.29,1.3a1,1,0,0,0,1.42,0A1,1,0,0,0,22.71,4.29Z"/>
                                                                    </svg>
                                                                </div>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="profile-kurse-grid">
                                                        <label for="" class="black">Foto</label>
                                                        <div class="border overflow-hidden d-flex align-items-center text-center"
                                                             style="height: 150px;">
                                                            <label for="kurse_foto" class="k_label mb-0">
                                                                {% if kurse.photo != '' %}
                                                                    <input type="file"
                                                                           style="opacity: 0;position: absolute;"
                                                                           name="kurse_foto" id="kurse_foto"
                                                                           class="w-100">
                                                                    <img src="{{ asset('media/kurse/'~kurse.photo) }}"
                                                                         class="kurse_img" alt="{{ kurse.photo }}">
                                                                {% else %}
                                                                    <input type="file" name="kurse_foto" id="kurse_foto"
                                                                           class="w-100 kurse_input">
                                                                {% endif %}
                                                                <div class="l_hvr">
                                                                    <svg viewBox="0 0 24 24"
                                                                         xmlns="http://www.w3.org/2000/svg">
                                                                        <path d="M19,13a1,1,0,0,0-1,1v.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.7L9.41,11.12a2.85,2.85,0,0,0-3.93,0L4,12.6V7A1,1,0,0,1,5,6h7a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13ZM5,20a1,1,0,0,1-1-1V15.43l2.9-2.9a.79.79,0,0,1,1.09,0l3.17,3.17,0,0L15.46,20Zm13-1a.89.89,0,0,1-.18.53L13.31,15l.7-.7a.77.77,0,0,1,1.1,0L18,17.21ZM22.71,4.29l-3-3a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-3,3a1,1,0,0,0,1.42,1.42L18,4.41V10a1,1,0,0,0,2,0V4.41l1.29,1.3a1,1,0,0,0,1.42,0A1,1,0,0,0,22.71,4.29Z"/>
                                                                    </svg>
                                                                </div>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <div class="col-12 mt-5" id="kurses_lesson_{{ kurse.id }}">
                                                {% if kurse.editId == null %}
                                                    {% set kurseLesson = getKurseLesson(kurse.id) %}
                                                {% else %}
                                                    {% set kurseLesson = getKurseLesson(kurse.editId.id) %}
                                                {% endif %}

                                                {% if kurseLesson|length > 0 %}
                                                    {% for klessona in kurseLesson %}

                                                        {% set klesson = klessona %}
                                                        {% set aktivId = klessona.id %}

                                                        {% if klessona.kurseId|length > 0 %}
                                                            {% set klesson = klessona.kurseId[0] %}
                                                            {% set aktivId = klessona.kurseId[0].editId.id %}
                                                        {% endif %}

                                                        <div class="profile-kurses-grid"
                                                             id="kursess_lesson_{{ klesson.id }}">
                                                            <label for="" class="black"></label>
                                                            <div class="border-grey py-3">
                                                                <div class="col-12 d-flex justify-content-between mb-3">
                                                                    <p><b>Kurs {{ loop.index }}</b></p>
                                                                    <div class="d-flex"
                                                                         onclick="kurseLessonDelete({{ klesson.id }})">
                                                                        <div class="basket-remove-area">
                                                                            <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg"
                                                                                 alt="">
                                                                        </div>
                                                                        <div class="f-left flex-center padding-5"><a
                                                                                    href="javascript:void(0)">löschen</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <form enctype="multipart/form-data" id="newKurseLesson"
                                                                      name="newKurseLesson1">

                                                                    {% if kurse.editId == null %}
                                                                        {% set kurseIds =  kurse.id %}
                                                                    {% else %}
                                                                        {% set kurseIds =  kurse.editId.id %}
                                                                    {% endif %}

                                                                    <input type="hidden" name="kurse_idx"
                                                                           value="{{ kurseIds }}">

                                                                    <input type="hidden" name="kurse_lesson_id"
                                                                           value="{{ aktivId }}">
                                                                    <table class="table table-borderless mb-0">
                                                                        <tbody>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Titel</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_kurs"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[kurs]"
                                                                                       required="required"
                                                                                       value="{{ klesson.kurs }}">
                                                                            </td>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Fächer</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_facher"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[facher]"
                                                                                       required="required"
                                                                                       value="{{ klesson.facher }}">
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Dauer</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_dauer"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[dauer]"
                                                                                       required="required"
                                                                                       value="{{ klesson.dauer }}">
                                                                            </td>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Preis</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_preis"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[price]"
                                                                                       required="required"
                                                                                       value="{{ klesson.price }}">
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black"></label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_dauer2"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[dauer2]"
                                                                                       required="required"
                                                                                       value="{{ klesson.dauer2 }}">
                                                                            </td>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black"></label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_preis2"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[price2]"
                                                                                       required="required"
                                                                                       value="{{ klesson.preis2 }}">
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Start</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="date" id="kurs_startdatum"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[startdatum]"
                                                                                       required="required"
                                                                                       value="{{ klesson.startDatum|date('Y-m-d') }}">
                                                                            </td>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Extras</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_extras"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[extras]"
                                                                                       required="required"
                                                                                       value="{{ klesson.extras }}">
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Platze</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" id="kurs_platze"
                                                                                       class="w-100"
                                                                                       name="kurseLesson[platze]"
                                                                                       required="required"
                                                                                       value="{{ klesson.platze }}">
                                                                            </td>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Frei</label>
                                                                            </td>
                                                                            <td>
                                                                                <input type="number" id="kurs_frei"
                                                                                       class="w-100 inpCntrl"
                                                                                       name="kurseLesson[frei]"
                                                                                       required="required"
                                                                                       data-id="{{ klesson.id }}"
                                                                                       value="{{ klesson.frei }}">
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <label for=""
                                                                                       class="black">Zustand</label>
                                                                            </td>
                                                                            <td>
                                                                                {% if klesson.isenabled == '1' %}
                                                                                    <span>
                                                                <img src="{{ asset('assets/main/img/tik.svg') }}"
                                                                     alt="aktiv" width="20"> aktiv
                                                            </span>
                                                                                {% else %}
                                                                                    <span>
                                                                <img src="{{ asset('assets/main/img/red-tik.svg') }}"
                                                                     alt="passiv" width="20"> passiv
                                                            </span>
                                                                                {% endif %}
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="py-0">
                                                                                <div class="f-left border-grey flex-center padding-5 w-fit-content kurse-speichern"
                                                                                     onclick="NewKurseLesson(this.closest('form'))">
                                                                                    <a href="javascript:void(0)"
                                                                                       class="fs-15px btn08em">speichern</a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                {% else %}
                                                    <div class="profile-kurses-grid">
                                                        <label for="" class="black"></label>
                                                        <div class="border-grey py-3">
                                                            <div class="col-12 d-flex justify-content-between mb-3">
                                                                <p><b>Kurs 1</b></p>
                                                                <div class="d-flex">
                                                                    <div class="basket-remove-area">
                                                                        <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg"
                                                                             alt="">
                                                                    </div>
                                                                    <div class="f-left flex-center padding-5"><a
                                                                                href="javascript:void(0)">löschen</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <form enctype="multipart/form-data" id="newKurseLesson"
                                                                  name="newKurseLesson2">
                                                                <input type="hidden" name="kurse_idx"
                                                                       value="{{ kurse.id }}">

                                                                <input type="hidden" name="kurse_lesson_id" value="">
                                                                <table class="table table-borderless mb-0">
                                                                    <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Titel</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_kurs"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[kurs]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                        <td>
                                                                            <label for="" class="black">Fächer</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_facher"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[facher]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Dauer</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_dauer"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[dauer]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                        <td>
                                                                            <label for="" class="black">Preis</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_preis"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[price]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black"></label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_dauer2"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[dauer2]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                        <td>
                                                                            <label for="" class="black"></label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_preis2"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[price2]"
                                                                                   required="required" value="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Start</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="date" id="kurs_startdatum"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[startdatum]"
                                                                                   required="required"
                                                                                   value="">
                                                                        </td>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Extras</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_extras"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[extras]"
                                                                                   required="required"
                                                                                   value="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Platze</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" id="kurs_platze"
                                                                                   class="w-100"
                                                                                   name="kurseLesson[platze]"
                                                                                   required="required"
                                                                                   value="">
                                                                        </td>
                                                                        <td>
                                                                            <label for=""
                                                                                   class="black">Frei</label>
                                                                        </td>
                                                                        <td>
                                                                            <input type="number" id="kurs_frei"
                                                                                   class="w-100 inpCntrl"
                                                                                   name="kurseLesson[frei]"
                                                                                   required="required"
                                                                                   value="">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label for="" class="black">Zustand</label>
                                                                        </td>
                                                                        <td>
                                                                        <span class="d-flex"><img
                                                                                    src="{{ asset('assets/main/img/orange-tik.svg') }}"
                                                                                    alt="in Bearbeitung" width="20">in Bearbeitung</span>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="py-0">
                                                                            <div class="f-left border-grey flex-center padding-5 w-fit-content kurse-speichern"
                                                                                 onclick="NewKurseLesson(this.closest('form'))">
                                                                                <a href="javascript:void(0)"
                                                                                   class="fs-15px btn08em">speichern</a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </form>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="profile-kurses-grid">
                                                <label for=""></label>
                                                <a href="javascript:" class="w-fit-content kurseLessonArea"
                                                   onclick="kurseLessonArea({{ kurse.id }})">+ neuen Kurs erfassen</a>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                                <a href="#" class="w-fit-content mt-2 adKurse" id="add_kurse">+ neuen Standort
                                    erfassen</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="profile__section-accordions accordion-item ">
                <h2 class="accordion-header profile__section-accordions-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
                        Meine Klassen
                    </button>
                </h2>
                <div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="acordion-body">
                        <div class="acordion-inner">
                            <div class="klassen">
                                {% for klas in klassen %}
                                <div class="d-flex" id="klassen_{{ klas.id }}">
                                    <div class="col-12 d-flex border-grey mb-2 py-1">
                                        <div class="col-auto d-flex justify-content-center">
                                            <div class="mx-2 align-items-center d-flex klassenEditButton"
                                                 onclick="klassenEditButton({{ klas.id }})"><i
                                                        class="fa fa-pencil-square-o"></i></div>

                                            <div class="klassenDeleteButton"
                                                 onclick="klassenDeleteButton({{ klas.id }})"><i
                                                        class="fa fa-trash-o"></i></div>
                                        </div>
                                        <div class="col-10 klassName">{{ klas.name }}</div>
                                        <div class="col-auto">
                                            <img class="klassgreen" src="{{ asset('media/site/green.svg') }}"
                                                 width="15"
                                                 height="15">
                                            <img class="klassred" src="{{ asset('media/site/red.svg') }}"
                                                 width="15"
                                                 height="15">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 klassenEditArea p-0">
                                    <div class="klasArea my-3 d-none" id="klasArea_{{ klas.id }}">
                                        <div class="profile-klassen-grid newCls p-3"
                                             style="border: thin solid;">
                                            <div class="row">
                                                <div class="col-3">
                                                    <span class="d-flex">Name Der Klasse</span>
                                                </div>
                                                <div class="col-8">
                                                    <input type="text" name="klassenName"
                                                           placeholder="Klassenname eingeben"
                                                           data-id="{{ klas.id }}"
                                                           onchange="editKlassen(this)" value="{{ klas.name }}"
                                                           class="form-control col-12 klassenc">
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-3">
                                                    <span class="d-flex">Name Der Schüler/in</span>
                                                </div>
                                                <div class="col-8 cloneAppend">
                                                    <div class="studentclone" data-id=""
                                                         id="klas_{{ klas.id }}">
                                                        <div class="justify-content-between row  col-12">
                                                            <input style="border-radius: 0;"
                                                                   class="form-control mt-1 col-5 studentName"
                                                                   maxlength="16"
                                                                   placeholder="Name" name="studentName"
                                                                   type="text">
                                                            <input style="border-radius: 0;"
                                                                   class="form-control mt-1 col-5 mx-2 studentVorname"
                                                                   maxlength="16"
                                                                   placeholder="Vorname" name="studentVorname"
                                                                   type="text">

                                                            <input type="button" class="col-1 form-control mt-1"
                                                                   value="+"
                                                                   onclick="newStudentChange(this,null)">
                                                        </div>
                                                        {% for st in klas.student %}
                                                            <div class="col-12 mt-3 p-0 stlenght"
                                                                 id="student_{{ st.id }}">
                                                                <div class="col-12 d-flex border-grey mb-2 py-1">
                                                                    <div class="col-10 klassName">{{ st.name|default }} {{ st.nachname|default }}</div>
                                                                    <div class="col-2 d-flex justify-content-center">

                                                                        <div class="klassenDeleteButton"
                                                                             onclick="studentDeleteButton({{ st.id }})">
                                                                            <i class="fa fa-trash-o"></i></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                                {% if user.userTyped.id|default != 3 %}
                                                <div class="col-12 mt-3">* Bestellung nur für Klassen ab <span
                                                            class="studentCount">8</span> Schüler/in möglich!
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                <label for=""></label>
                                <a href="javascript:" class="w-fit-content kurseLessonArea" onclick="klassenArea()">+
                                    Klasse
                                    hinzufügen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        input:disabled {
            opacity: 0.5;
            background: transparent;
        }

        .klassenEditButton {
            cursor: pointer;
        }

        .klassenDeleteButton {
            cursor: pointer;
        }

        .klassenc::placeholder {
            opacity: 1;
            font-weight: 300;
            color: #212529;
            font-size: 0.9rem;
        }

        .studentName::placeholder {
            opacity: 1;
            font-weight: 300;
            color: #212529;
            font-size: 0.9rem;
        }

        .studentVorname::placeholder {
            opacity: 1;
            font-weight: 300;
            color: #212529;
            font-size: 0.9rem;
        }

        .newStudent {
            cursor: pointer;
        }
    </style>
{% endblock %}
{% block footer %}
    <div class="modal fade role-alert" id="alertModal" tabindex="-1" role="alert" aria-hidden="false">
        <div class="modal-top">
            <a href="{{ path('main_homepage') }}" class="site-logo">
                <img src="{{ asset('media/logo/logo.svg') }}" alt="modular lernen">
                <span>modular<br> lernen</span>
            </a>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <img src="{{ asset('assets/main/images/close.png') }}" width="30" height="30" alt="close">
            </button>
        </div>
        <div class="modal-dialog modal-dialog-centered h-100" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer justify-content-end">
                    {# <button type="button" class="btn md-btn md-btn-dismiss" data-dismiss="modal">
                        <span>weiter einkaufen</span>
                    </button> #}
                    <button type="button" class="btn md-btn" data-dismiss="modal" aria-label="Close">
                        <img src="{{ asset('assets/main/new/images/icon/green-tick.svg') }}" width="33" height="33"
                             alt="ok">
                        <span>Ok</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block pageScript %}
    <script>
        $(".studentName").keyup(function () {
            if (this.value.match(/[^a-zA-Z\séóëşüç]/g)) {
                this.value = this.value.replace(/[^a-zA-Z\séóëşüç]/g, '');
            }
        });
        $(".studentVorname").keyup(function () {
            if (this.value.match(/[^a-zA-Z\séóëşüç]/g)) {
                this.value = this.value.replace(/[^a-zA-Z\séóëşüç]/g, '');
            }
        });

        $('#kurs_frei').change(function () {
            let id = $(this).data('id');
            let val = $(this).val();
            let inp = $(this);

            if (id) {
                /*Panel.contentLoader_start();*/
                $.ajax({
                    type: 'POST',
                    url: '{{ path('main_frei_edit') }}',
                    data: {id: id, val: val},
                    success: function (data) {
                        /*Panel.contentLoader_close();*/
                        if (data.status == 'error') {
                            $("#alertModal").find('.modal-title').text(data.message).closest('.modal').modal('show');
                            $(inp).val(data.frei);
                        }
                    }
                });
            }

        });

        function klassenEditButton(id) {
            $('.klassenEditArea .klasArea').addClass('d-none');

            if (id) {
                /*Panel.contentLoader_start();*/
                $('#klasArea_' + id).removeClass('d-none');

                $('.studentclone').attr('data-id', id);
            }
        }

        function klassenDeleteButton(id) {
            if (id) {
                /*Panel.contentLoader_start();*/
                $.ajax({
                    type: 'POST',
                    url: '{{ path('main_klassen_delete') }}',
                    data: {id: id},
                    success: function () {
                        /*Panel.contentLoader_close();*/
                        $('#klassen_' + id).remove();
                        location.reload();
                    }
                });
            }
        }

        $('#years,#months').change(function () {
            let years = $('#years').val();
            let months = $('#months').val();
            /*Panel.contentLoader_start();*/
            $.ajax({
                type: 'POST',
                url: '{{ path('main_statistik_count') }}',
                data: {years: years, months: months},
                success: function (data) {
                    $('.nummerCount').html(data.nummerCount);
                    $('.mehrCount').html(data.mehrCount);
                    /*Panel.contentLoader_close();*/
                }
            });
        });


        let qtyTriggerTime = null;
        let altesPasswordStepStatus = 0;
        $('.altes_passwort').on("input", function () {
            if (qtyTriggerTime != null) {
                clearTimeout(qtyTriggerTime);
            }
            let old_passwort = $(this).val();
            let passwordForm = $(this).closest("form");

            qtyTriggerTime = setTimeout(function () {
                $.ajax({
                    url: '{{ path('main_ajax_old_passwort_control') }}',
                    data: {'old_passwort': old_passwort},
                    method: 'POST',
                    type: 'POST',
                    success: function (data) {
                        let $passwordAlert = $(".passwort-alert");
                        let $passwordValidStep5 = $passwordAlert.find(".password-valid-step-5");
                        if (data === true) {
                            altesPasswordStepStatus = 1;
                            $passwordValidStep5.find(".alert-icon-red").addClass("d-none");
                            $passwordValidStep5.find(".alert-icon-green").removeClass("d-none");
                            $("#fos_user_change_password_form_plainPassword_first").prop("disabled", false);
                        } else {
                            altesPasswordStepStatus = 0;
                            $passwordValidStep5.find(".alert-icon-green").addClass("d-none");
                            $passwordValidStep5.find(".alert-icon-red").removeClass("d-none");
                            $("#fos_user_change_password_form_plainPassword_first").prop("disabled", true);
                        }
                        validFields(passwordForm.get(0));
                    }
                });
            }, 500);
        });

        $(document).ready(function () {
            $('#kurses').on('keyup', '.inpCntrl', function () {
                var value = $(this).val();
                if ((value !== '') && (value.indexOf('.') === -1)) {
                    $(this).val(Math.max(Math.min(value, 20), -20));
                }
                /*if (!parseInt(value)) {
                    $(this).val('');
                }*/
            });
        });

        $(".acordion-header").on("click", function () {
            let $acordion = $(this).parent();
            if ($acordion.hasClass("active")) {
                $acordion.removeClass("active");
                $(this).find(".acordion-icon").text("+");
                $(this).next().slideUp(500);

            } else {
                $(".acordions").removeClass("active");
                $(".acordions .acordion-icon").text("+");
                $(".acordions .acordion-body").slideUp(500);
                $acordion.addClass("active");
                $(this).find(".acordion-icon").text("-");
                $(this).next().slideDown(500);
            }
        });

        $('#edit').on('click', function () {
            $(this).addClass("open-form").hide();
            let $submitBtn = $(this).closest(".acordions").find("button[type='submit']");
            $submitBtn.removeClass("none").show().find(".disabled").removeClass("disabled");
            $('#profile-info input, #profile-info select').prop('disabled', false);
            $('.profile-abberden').show();


            if ($("#profile_typ").val() !== "0") {
                $("#profile_firma").prop("disabled", false).closest(".address-grid").removeClass("d-none");
                $('#profile_name').prop("required", false).prev().html('Vorname');
                $('#profile_vorname').prop("required", false).prev().html('Nachname');
            } else {
                $("#profile_firma").prop("disabled", true).closest(".address-grid").addClass("d-none");
            }
        });

        if ($('#profile_typ').val() === "0") {
            $('#profile_name').prop("required", true).prev().html('Vorname *');
            $('#profile_vorname').prop("required", true).prev().html('Nachname *');
        } else {
            $('#profile_name').prop("required", false).prev().html('Vorname');
            $('#profile_vorname').prop("required", false).prev().html('Nachname');
        }

        $('#profile_typ').on('change', function () {
            if ($(this).val() === "0") {
                $('#profile_firma').addClass("d-none").children("input").prop("disabled", true);
                $('#profile_name').prop("required", true).prev().html('Vorname *');
                $('#profile_vorname').prop("required", true).prev().html('Nachname *');
            } else {
                $('#profile_firma').removeClass("d-none").children("input").prop("disabled", false);
                $('#profile_name').prop("required", false).prev().html('Vorname');
                $('#profile_vorname').prop("required", false).prev().html('Nachname');
            }
        });

        $('.profile-abberden').on('click', function () {
            $(this).addClass("close-form").hide();
            let $submitBtn = $(this).closest(".acordions").find("button[type='submit']");
            $submitBtn.addClass("none").hide().find(".disabled").addClass("disabled");
            $('#profile-info input, #profile-info select').prop('disabled', true);
            $('#edit').show();

            $("#profileEdit").get(0).reset();


            if ($("#profile_typ").val() !== "0") {
                $("#profile_firma").removeClass("d-none").closest(".address-grid").removeClass("d-none");
            } else {
                $("#profile_firma").addClass("d-none").closest(".address-grid").addClass("d-none");
            }
        });

        $('select[name="profile[typ]"]').on('change', function () {
            if ($(this).val() === "0") {
                $("#profile_firma").prop("disabled", true).closest(".address-grid").addClass("d-none");
            } else {
                $("#profile_firma").prop("disabled", false).closest(".address-grid").removeClass("d-none");
            }
        });

        function NewKurse(form) {
            let data_url = "{{ path('main_ajax_new_kurse') }}";
            let fd = new FormData(form);
            if ($(form).find('input[name="kurse_logo"]').val() === '' && $(form).find("label[for='kurse_logo'] .kurse_img").length === 0) {
                $("#alertModal").find('.modal-title').text('Wählen Sie Ihr Logo').closest('.modal').modal('show');
            } else if (($(form).find('input[name="kurse_foto"]').val() === '') && $(form).find("label[for='kurse_foto'] .kurse_img").length === 0) {
                $("#alertModal").find('.modal-title').text('Wählen Sie Ihr Foto').closest('.modal').modal('show');
            } else {
                /*Panel.contentLoader_start();*/
                $.ajax({
                    url: data_url,
                    data: fd,
                    contentType: false,
                    processData: false,
                    cache: false,
                    method: 'POST',
                    type: 'POST',
                    success: function (data) {
                        $(form).find('#kurse_id').val(data);
                        $(form).parent('.border-grey').find('#kurse_idx').val(data);
                        $(form).parent('.kurseLessonArea').attr('onclick', 'kurseLessonArea(' + data + ')');
                        /*Panel.contentLoader_close();*/
                        location.reload();
                    }
                });
            }
        }

        function kurseDelete(id) {
            let data_url = "{{ path('main_ajax_kurse_delete',{'id':'renameId'}) }}";
            $.ajax({
                url: data_url.replace('renameId', id),
                data: {'kurseId': id},
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    if (data) {
                        $("#alertModal").find('.modal-title').text('Erfolgreich gelöscht.').closest('.modal').modal('show');
                        $('#kurse_' + id).remove();
                        window.location.reload();
                    }
                }
            });
        }

        function kurseLessonDelete(id) {
            let data_url = "{{ path('main_ajax_kurse_lesson_delete',{'id':'renameId'}) }}";
            $.ajax({
                url: data_url.replace('renameId', id),
                data: {'kurseId': id},
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    if (data) {
                        $("#alertModal").find('.modal-title').text('Erfolgreich gelöscht.').closest('.modal').modal('show');
                        $('#kursess_lesson_' + id).remove();
                        window.location.reload();
                    }
                }
            });
        }

        function removeBewer(id) {
            let data_url = "{{ path('main_ajax_bewer_delete',{'id':'renameId'}) }}";
            $.ajax({
                url: data_url.replace('renameId', id),
                data: {'bewerId': id},
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    if (data) {
                        $("#alertModal").find('.modal-title').text('Ihr Kommentar wurde gelöscht').closest('.modal').modal('show');
                        $('#bewer_' + id).remove();
                    }
                }
            });
        }

        function checkPasswordMatch() {
            $('#CheckPasswordMatch').removeClass('in-valid valid');
            var password = $("#fos_user_change_password_form_current_password").val();
            var confirmPassword = $("#fos_user_change_password_form_plainPassword_first").val();
            let $submitBtn = $("#passwordAcordion button[type='submit']");
            if (password != confirmPassword) {
                $submitBtn.prop("disabled", true).addClass("none").find(".enabled").removeClass("enabled").addClass("disabled");
                $("#CheckPasswordMatch").html("Passwort ist falsch!").removeClass('valid').addClass('in-valid');
            } else {
                $submitBtn.prop("disabled", false).removeClass("none").find(".disabled").removeClass("disabled").addClass("enabled");
                $("#CheckPasswordMatch").html("Passwörter stimmen überein.").removeClass('in-valid').addClass('valid');
            }
        }

        $(".valid-password").on("input", function () {
            validPassWord(this);
        });

        function validPassWord(e) {
            //En az 8 karakter
            //Rakam veya sayi
            //Kucuk ve Buyuk harfler
            //Sifre eslesme

            let validStep = 0;
            let totalStep = 3;
            let isValid = false;
            let value = e.value;
            let targetField = document.getElementsByClassName("passwort-alert")[0];
            let passwordForm = document.querySelector("form[name='change_password']");

            let otherPasswordValue = document.getElementById("fos_user_change_password_form_plainPassword_first").value;
            if (e.id === "fos_user_change_password_form_current_password") {
                if (value.length >= 8) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (/\d+/.test(value)) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (/[a-z]/g.test(value) && /[A-Z]/g.test(value)) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (validStep === 3) {
                    document.getElementById("fos_user_change_password_form_plainPassword_first").disabled = false
                } else {
                    document.getElementById("fos_user_change_password_form_plainPassword_first").disabled = true
                }
            } else {
                otherPasswordValue = document.getElementById("fos_user_change_password_form_current_password").value;
            }

            if (value !== '' && value === otherPasswordValue) {
                validStep++;
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
            } else {
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
            }

            if (validStep === totalStep) {
                isValid = true;
            }

            validFields(passwordForm);
            return isValid;
        }

        function validFields(form) {
            let validStep = 0;
            for (let element of form.elements) {
                let value = element.value;
                if (element.id === "fos_user_change_password_form_current_password") {
                    if (value.length >= 8) {
                        validStep++;
                    }

                    if (/\d+/.test(value)) {
                        validStep++;
                    }

                    if (/[a-z]/g.test(value) && /[A-Z]/g.test(value)) {
                        validStep++;
                    }
                } else if (element.id === "fos_user_change_password_form_plainPassword_first") {
                    let firstPassword = document.getElementById("fos_user_change_password_form_current_password").value;
                    if ((firstPassword !== "" || value !== "") && value === firstPassword) {
                        validStep++;
                    }
                }
            }

            let submitBtn = form.querySelector("button[type='submit']");
            let basketFinish = submitBtn.querySelector(".basket-finish");
            submitBtn.disabled = true;
            basketFinish.querySelectorAll("*").forEach(function (e) {
                e.classList.add("disabled")
            });
            if (validStep === 4 && altesPasswordStepStatus === 1) {
                submitBtn.disabled = false;
                basketFinish.querySelectorAll("*").forEach(function (e) {
                    e.classList.remove("disabled")
                });
            }
        }

        var kurse_sayi = $("#kurses").children(".border-grey").length;
        $('#add_kurse').click(function () {
            kurse_sayi++;
            let imgYol = '{{ asset('assets/main/img/orange-tik.svg') }}';
            var yeni_td2 = '<div class="border-grey py-3 row mx-0 mb-4 kurseNew">' +
                '    <div class="col-12 d-flex justify-content-between align-items-center mb-3">' +
                '        <p><b class="fs-18px">Standort ' + kurse_sayi + '</b></p>' +
                '        <div class="d-flex">' +
                '            <div class="basket-remove-area p-0">' +
                '                <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg" alt="">' +
                '            </div>' +
                '            <div class="ml-2"><a href="javascript:void(0)">löschen</a></div>' +
                '        </div>' +
                '    </div>' +
                '    <form enctype="multipart/form-data" id="newKurse" name="newKurse" class="row mx-0">' +
                '       <input type="hidden" name="kurse_id" id="kurse_id" value="">' +
                '        <div class="col-md-6">' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Kontakt</label>' +
                '                <input type="text" id="kurse_firma" name="kurse[firma]" required="required" value="">' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Telefon</label>' +
                '                <input type="email" id="kurse_telefon" name="kurse[telefon]" required="required" value="">' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Link</label>' +
                '                <input type="url" id="kurse_link" name="kurse[link]" required="required" value="">' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Kursort</label>' +
                '                <input type="text" id="kurse_name" name="kurse[name]" required="required" value="">' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black"></label>' +
                '                <input type="text" id="kurse_name2" name="kurse[name2]" required="required" value="">' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">x-coord</label>' +
                '                <div class="d-flex justify-content-between">' +
                '                    <input type="text" class="w-80px mr-2 xyCord" id="kurse_xcoord" name="kurse[xcoord]" required="required" value="">' +
                '                    <label for="" class="black mr-2">y-coord</label>' +
                '                    <input type="text" class="w-80px xyCord" id="kurse_ycoord" name="kurse[ycoord]" required="required" value="">' +
                '                </div>' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Zustand</label>' +
                '                    <span><img src="{{ asset('assets/main/img/red-tik.svg') }}" alt="passiv" width="20"> passiv</span>' +
                '            </div>' +
                '            <div class="profile-kurse-grid mt-3">' +
                '                <label for="" class="black"></label>' +
                '                <div class="f-left border-grey flex-center padding-5 w-fit-content" onclick="NewKurse(this.closest(\'form\'))"><a href="javascript:void(0)" class="fs-15px btn08em">speichern</a></div>' +
                '            </div>' +
                '        </div>' +
                '        <div class="col-md-6">' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Logo</label>' +
                '                <div class="border overflow-hidden">' +
                '                        <input type="file" name="kurse_logo" id="kurse_logo" class="w-100">' +
                '                </div>' +
                '            </div>' +
                '            <div class="profile-kurse-grid">' +
                '                <label for="" class="black">Foto</label>' +
                '                <div class="border overflow-hidden">' +
                '                        <input type="file" name="kurse_foto" id="kurse_foto" class="w-100">' +
                '                </div>' +
                '            </div>' +
                '        </div>' +
                '    </form>' +
                '    <div class="col-12 mt-5">' +
                '<div class="profile-kurses-grid">' +
                '                                                    <label for="" class="black"></label>' +
                '                                                    <div class="border-grey py-3">' +
                '                                                        <div class="col-12 d-flex justify-content-between mb-3">' +
                '                                                            <p><b>Kurs</b></p>' +
                '                                                            <div class="d-flex">' +
                '                                                                <div class="basket-remove-area">' +
                '                                                                    <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg" alt="">' +
                '                                                                </div>' +
                '                                                                <div class="f-left flex-center padding-5"><a href="javascript:void(0)">löschen</a></div>' +
                '                                                            </div>' +
                '                                                        </div>' +
                '                                                        <form enctype="multipart/form-data" id="newKurseLesson" name="newKurseLesson">' +
                '                                                            <input type="hidden" name="kurse_idx" id="kurse_idx" value="">' +
                '                                                            <input type="hidden" name="kurse_lesson_id" value="">' +
                '                                                            <table class="table table-borderless mb-0">' +
                '                                                                <tbody>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Titel</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_kurs" class="w-100" name="kurseLesson[kurs]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Fächer</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_facher" class="w-100" name="kurseLesson[facher]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Dauer</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_dauer" class="w-100" name="kurseLesson[dauer]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                     <td>' +
                '                                                                        <label for="" class="black">Preis</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_preis" class="w-100" name="kurseLesson[price]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black"></label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_dauer2" class="w-100" name="kurseLesson[dauer2]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black"></label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_preis2" class="w-100" name="kurseLesson[price2]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="Start">Start</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="date" id="kurs_start" class="w-100" name="kurseLesson[startdatum]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Extras</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_extras" class="w-100" name="kurseLesson[extras]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Platze</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_platze" class="w-100" name="kurseLesson[platze]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Frei</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="number" id="kurs_frei" class="w-100 inpCntrl" name="kurseLesson[frei]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Zustand</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <span><img src="{{ asset('assets/main/img/red-tik.svg') }}" alt="passiv" width="20"> Passiv</span>' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td class="py-0">' +
                '                                                                        <div class="f-left border-grey flex-center padding-5 w-fit-content kurse-speichern" onclick="NewKurseLesson(this.closest(\'form\'))"><a href="javascript:void(0)" class="fs-15px btn08em">speichern</a></div>' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                </tbody>' +
                '                                                            </table>' +
                '                                                        </form>' +
                '                                                    </div>' +
                '                                                </div>' +
                '        <div class="profile-kurses-grid">' +
                '            <label for=""></label>' +
                '            <a href="#" class="w-fit-content kurseLessonArea" onclick="kurseLessonArea()">+ neuen Kurs erfassen</a>' +
                '        </div>' +
                '    </div>' +
                '</div>';
            $('#kurses').append(yeni_td2);

            let StandortKurse = $('#kurses').children();
            let kurseHeight = 0;
            StandortKurse.each(function () {
                kurseHeight += $(this).outerHeight();
            });


            let pageArea = document.getElementsByClassName('page-area')[0];
            pageArea.scrollTo({
                top: (kurseHeight - 550),
                behavior: 'smooth',
            });

        });

        function NewKurseLesson(form) {
            /*Panel.contentLoader_start();*/
            let data_url = "{{ path('main_ajax_new_kurse_lesson') }}";

            //let form = $("#newKurseLesson")[0];
            let fd = new FormData(form);

            $.ajax({
                url: data_url,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    /*Panel.contentLoader_close();*/
                    location.reload();
                }
            });
        }

        function kurseLessonArea(id) {
            let kurselesson_sayi = $("#kurses_lesson_" + id).children(".profile-kurses-grid").length;
            //let imgYol = '{{ asset('assets/main/img/orange-tik.svg') }}';

            var yeni_td2 = '<div class="profile-kurses-grid">' +
                '                                                    <label for="" class="black"></label>' +
                '                                                    <div class="border-grey py-3">' +
                '                                                        <div class="col-12 d-flex justify-content-between mb-3">' +
                '                                                            <p><b>Kurs ' + (kurselesson_sayi + 1) + '</b></p>' +
                '                                                            <div class="d-flex">' +
                '                                                                <div class="basket-remove-area">' +
                '                                                                    <img src="https://technoone.net/modular-lernen/web/assets/new/images/icon/delete.svg" alt="">' +
                '                                                                </div>' +
                '                                                                <div class="f-left flex-center padding-5"><a href="javascript:void(0)">löschen</a></div>' +
                '                                                            </div>' +
                '                                                        </div>' +
                '                                                        <form enctype="multipart/form-data" id="newKurseLesson" name="newKurseLesson">' +
                '                                                            <input type="hidden" name="kurse_idx" value="' + id + '">' +
                '                                                            <input type="hidden" name="kurse_lesson_id" value="">' +
                '                                                            <table class="table table-borderless mb-0">' +
                '                                                                <tbody>' +
                '                                                                 <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Titel</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_kurs" class="w-100" name="kurseLesson[kurs]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Fächer</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_facher" class="w-100" name="kurseLesson[facher]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Dauer</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_dauer" class="w-100" name="kurseLesson[dauer]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                     <td>' +
                '                                                                        <label for="" class="black">Preis</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_preis" class="w-100" name="kurseLesson[price]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black"></label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_dauer2" class="w-100" name="kurseLesson[dauer2]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black"></label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_preis2" class="w-100" name="kurseLesson[price2]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="Start">Start</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="date" id="kurs_start" class="w-100" name="kurseLesson[startdatum]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Extras</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_extras" class="w-100" name="kurseLesson[extras]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Platze</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="text" id="kurs_platze" class="w-100" name="kurseLesson[platze]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Frei</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <input type="number" id="kurs_frei" class="w-100 inpCntrl" name="kurseLesson[frei]" required="required" value="">' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td>' +
                '                                                                        <label for="" class="black">Zustand</label>' +
                '                                                                    </td>' +
                '                                                                    <td>' +
                '                                                                        <span><img src="{{ asset('assets/main/img/red-tik.svg') }}" alt="passiv" width="20"> Passiv</span>' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                <tr>' +
                '                                                                    <td class="py-0">' +
                '                                                                        <div class="f-left border-grey flex-center padding-5 w-fit-content kurse-speichern" onclick="NewKurseLesson(this.closest(\'form\'))"><a href="javascript:void(0)" class="fs-15px btn08em">speichern</a></div>' +
                '                                                                    </td>' +
                '                                                                </tr>' +
                '                                                                </tbody>' +
                '                                                            </table>' +
                '                                                        </form>' +
                '                                                    </div>' +
                '                                                </div>';
            $('#kurses_lesson_' + id + '').append(yeni_td2);
        }

        function klassenArea(id) {

            var html = '' +
                '<div class="profile-klassen-grid newCls my-2 p-3" style="border: thin solid;">' +
                '<div class="row">' +
                '<div class="col-3">' +
                '<span class="d-flex">Name Der Klasse</span>' +
                '</div>' +
                '<div class="col-4">' +
                '<input type="text" name="klassenName" placeholder="Klassenname eingeben" data-id="" onchange="newKlassen(this)" class="form-control col-12 klassenc">' +
                '</div>' +
                '</div>' +
                '</div>';
            $('.klassen').append(html);
        }

        function newKlassen(el = null, id = null) {
            /*Panel.contentLoader_start();*/

            if (el != null) {
                var klassenName = $(el).val();
                var id = $(el).data('id');
            } else {
                var klassenName = $('.klassenc[data-id="' + id + '"]').val();
            }

            $.ajax({
                type: 'POST',
                url: '{{ path('main_klassen_edit') }}',
                data: {id: id, studentName: '', studentVorname: '', klassenName: klassenName},
                success: function (data) {
                    $('#klassen_' + id).find('.klassName').html(klassenName);
                    $('#klasArea_' + id).find('.klassenc').html(klassenName);
                    $(el).closest('.profile-klassen-grid').find('.cloneAppend').addClass('kstId_' + data.id);

                    if (data.response == true) {
                        $('.klassen').append('' +
                            '<div class="d-flex" id="klassen_' + data.klassen[0].id + '">' +
                            '<div class="col-12 d-flex border-grey mb-2 py-1">' +
                            '<div class="col-auto d-flex justify-content-center">' +
                            '<div class="mx-2 align-items-center d-flex klassenEditButton" onclick="klassenEditButton(' + data.klassen[0].id + ')"><i class="fa fa-pencil-square-o"></i></div>' +
                            '<div class="klassenDeleteButton" onclick="klassenDeleteButton(' + data.klassen[0].id + ')"><i class="fa fa-trash-o"></i></div>' +
                            '</div>' +
                            '<div class="col-10 klassName">' + data.klassen[0].name + '</div>' +
                            '<div class="col-auto">' +
                            '<img class="klassred" src="{{ asset('media/site/red.svg') }}" width="15" height="15">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="col-12 klassenEditArea p-0">' +
                            '<div class="klasArea my-3 d-none" id="klasArea_' + data.klassen[0].id + '">' +
                            '<div class="profile-klassen-grid p-3" style="border: thin solid;">' +
                            '<div class="row">' +
                            '<div class="col-3">' +
                            '<span class="d-flex">Name Der Klasse</span>' +
                            '</div>' +
                            '<div class="col-8">' +
                            '<input type="text" name="klassenName" placeholder="Klassenname eingeben" data-id="' + data.klassen[0].id + '" onchange="editKlassen(null,' + data.klassen[0].id + ')" value="' + data.klassen[0].name + '" class="form-control col-12 klassenc">' +
                            '</div>' +
                            '</div>' +
                            '<div class="row mt-2">' +
                            '<div class="col-3">' +
                            '<span class="d-flex">Name Der Schüler/in</span>' +
                            '</div>' +
                            '<div class="col-8 cloneAppend" id="st_' + data.klassen[0].id + '">' +
                            '<div class="studentclone col-12" data-id="' + data.klassen[0].id + '">' +

                            '<div class="justify-content-between row">' +
                            '<input style="border-radius: 0;" class="form-control mt-1 col-5 studentName" maxlength="16" placeholder="Name" name="studentName" type="text">' +
                            '<input style="border-radius: 0;" class="form-control mt-1 col-5 studentVorname" maxlength="16" placeholder="Vorname" name="studentVorname" type="text">' +
                            '<input type="button" class="col-1 form-control mt-1" value="+" onclick="newStudentChange(null,' + data.klassen[0].id + ')">' +
                            '</div>' +

                            '</div>' +
                            '</div>' +
                            '<div class="col-12 mt-3">* Bestellung nur für Klassen ab <span class="studentCount">8</span> Schüler/in möglich!' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>');

                        $('.newCls').css('display', 'none');
                    }

                    $('.studentName').val('');
                    $('.studentVorname').val('');

                    /*Panel.contentLoader_close();*/
                }
            });
        }

        function editKlassen(el = null, id = null) {
            if (el != null) {
                var klassenName = $(el).val();
                var id = $(el).data('id');
            } else {
                var klassenName = $('.klassenc[data-id="' + id + '"]').val();
            }

            $.ajax({
                type: 'POST',
                url: '{{ path('main_klassen_edit') }}',
                data: {id: id, studentName: '', klassenName: klassenName},
                success: function (data) {

                    $('#klassen_' + id).find('.klassName').html(klassenName);
                    $('#klasArea_' + id).find('.klassenc').html(klassenName);
                    $('.klassenc[data-id="' + id + '"]').closest('.profile-klassen-grid').find('.cloneAppend').addClass('kstId_' + data.id);

                    /*Panel.contentLoader_close();*/
                }
            });
        }

        function newStudentChange(el = null, id = null) {
            /*Panel.contentLoader_start();*/
            var studentName, studentVorname;
            if (el) {
                id = $(el).closest('.studentclone').data('id');
                studentName = $('#klas_' + id).find('.studentName').val();
                studentVorname = $('#klas_' + id).find('.studentVorname').val();
            } else {
                studentName = $('#st_' + id).find('input[name="studentName"]').val();
                studentVorname = $('#st_' + id).find('input[name="studentVorname"]').val();
            }

            var bosluk = ' ';

            $.ajax({
                type: 'POST',
                url: '{{ path('main_klassen_edit') }}',
                data: {id: id, klassenName: '', studentName: studentName, studentVorname: studentVorname},
                success: function (data) {
                    if (data.response == true) {
                        var html = '<div class="col-12 mt-3 p-0 stlenght" id="student_' + data.studentId + '">' +
                            '<div class="col-12 d-flex border-grey mb-2 py-1">' +
                            '<div class="col-10 klassName">' + data.studentName + ' ' + data.studentVorname + '</div>' +
                            '<div class="col-2 d-flex justify-content-center">' +
                            '<div class="klassenDeleteButton" onclick="studentDeleteButton(' + data.studentId + ',this)">' +
                            '<i class="fa fa-trash-o"></i></div></div></div></div>';
                        if ($('#st_' + id).length > 0) {
                            $('.studentclone').closest('#st_' + id).append(html);
                        } else {
                            $(el).closest('.cloneAppend').append(html);
                        }
                    }

                    $('.studentName').val('');
                    $('.studentVorname').val('');

                    studentLenght();
                    /*Panel.contentLoader_close();*/
                }
            });
        }

        studentLenght();

        function studentDeleteButton(id, el = null) {
            if (id) {
                /*Panel.contentLoader_start();*/
                $.ajax({
                    type: 'POST',
                    url: '{{ path('main_student_delete') }}',
                    data: {id: id},
                    success: function (data) {
                        /*Panel.contentLoader_close();*/

                        if (el) {
                            $(el).closest('#student_' + id).remove();
                        } else {
                            $('#student_' + id).remove();
                        }
                        studentLenght();
                    }
                });
            }
        }

        function studentLenght() {
            var studentLenght = $('.stlenght').length;
            if (studentLenght > 7) {
                $('.klassgreen').show();
                $('.klassred').hide();
            } else {
                $('.klassgreen').hide();
                $('.klassred').show();
            }


            if (studentLenght == 8 || studentLenght > 7) {
                $('.studentCount').html(0);
            } else if (studentLenght == 0) {
                $('.studentCount').html(8);
            } else {
                $('.studentCount').html(8 - studentLenght);
            }


        }

        function newStudentClick(el) {
            /*let $clone = $(el).next().clone();
            $clone.find('.studentclone').val('');
            $(el).after($clone);*/
        }

        $(".xyCord").on("keypress keyup blur", function (event) {
            $(this).val($(this).val().replace(/[^0-9\.|\,]/g, ''));
            debugger;
            if (event.which == 44) {
                return true;
            }
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });
    </script>
    <script>
        const classGroupsEdit = document.querySelectorAll(".my__work__groups");

        classGroupsEdit.forEach(item => {
            const editBtn = item.querySelector(".work__groups__btns-edit");
            editBtn.addEventListener("click", () => {
                const formSec = item.querySelector(".my__work__groups-edit__section__form");
                formSec.classList.toggle("open");

                classGroupsEdit.forEach(group => {
                    if (item !== group) {
                        const groupFormSec = group.querySelector(".my__work__groups-edit__section__form");
                        groupFormSec.classList.remove("open")
                    }
                })
            })


        })
    </script>
{% endblock %}