{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% set langs = getLangs() %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/app-assets/css/style.bundle.css') }}">
    <style>
        .form-select.no-border + .select2-container .select2-selection--single {
            border-width: 0 0 1px 0;
            border-radius: 0;
        }

        .form-select.no-border + .select2-container .select2-selection--single:focus {
            box-shadow: none !important;
        }
    </style>
{% endblock %}

<input type="hidden" name="site" value="{{ siteName[0].id }}">
<div class="row">
    <div class="col-md-12">
        <div class="tab-content">
            <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid first"
                 id="kt_create_account_stepper" data-kt-stepper="true">
                <div class="d-flex justify-content-center col-2 py-10 bg-body rounded-05 justify-content-xl-start flex-row-auto me-9">
                    <div class="stepper-nav d-flex flex-column my-auto mt-10 px-8 px-lg-10 px-xxl-15">
                        <div class="stepper-item current" data-kt-stepper-element="nav">
                            <div class="stepper-line w-40px"></div>
                            <div class="stepper-icon w-40px h-40px">
                                <i class="stepper-check fas fa-check"></i>
                                <span class="stepper-number">1</span>
                            </div>
                            <div class="stepper-label">
                                <h3 class="stepper-title">Prüfungsstunde</h3>
                                <div class="stepper-desc">Prüfungskursauswahl</div>
                            </div>
                        </div>
                        <div class="stepper-item pending" data-kt-stepper-element="nav">
                            <div class="stepper-line w-40px"></div>
                            <div class="stepper-icon w-40px h-40px">
                                <span class="stepper-number">2</span>
                            </div>
                            <div class="stepper-label">
                                <h3 class="stepper-title">Inhalt</h3>
                                <div class="stepper-desc">Prüfungsinhalt</div>
                            </div>
                        </div>
                        <div class="stepper-item pending" data-kt-stepper-element="nav">
                            <div class="stepper-line w-40px"></div>
                            <div class="stepper-icon w-40px h-40px">
                                <span class="stepper-number">3</span>
                            </div>
                            <div class="stepper-label">
                                <h3 class="stepper-title">Modul</h3>
                                <div class="stepper-desc">Modul hinzufügen</div>
                            </div>
                        </div>
                        <div class="stepper-item pending" data-kt-stepper-element="nav">
                            <div class="stepper-line w-40px"></div>
                            <div class="stepper-icon w-40px h-40px">
                                <span class="stepper-number">4</span>
                            </div>
                            <div class="stepper-label">
                                <h3 class="stepper-title">Extra</h3>
                                <div class="stepper-desc">Extra hinzufügen</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row w-100 border-1 border-dashed bg-body rounded-05 p-10 shadow-sm">
                    <div data-kt-stepper-element="content" class="current col-12">
                        <div class="w-100">
                            <div class="pb-10 pb-lg-15 d-flex justify-content-between">
                                <div>
                                    <h2 class="fw-bolder text-dark">Prüfung - Kursbeziehung</h2>
                                    <div class="text-gray-400 fw-bold fs-5">Prüfung - Kursbeziehung</div>
                                </div>
                                <span class="ml-2 h2 fw-bolder">Prüfungsjahr - {{ yearsSelect.year }}</span>
                            </div>
                            <div class="fv-row fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">

                                {#<div class="col-12 mb-10 d-flex justify-content-center align-items-center">
                                    <div class="fv-row mb-5 col-5 fv-plugins-icon-container">
                                        <label class="fs-7 fw-bold form-label required">Prüfungsjahr</label>
                                        <select name="business_type"
                                                class="form-select rounded-05-pill yearsSelect form-select-lg form-select-solid select2-hidden-accessible"
                                                data-control="select2" data-placeholder="Select..."
                                                data-allow-clear="true" data-hide-search="true"
                                                data-select2-id="select2-data-10-wrh3w" tabindex="-1"
                                                aria-hidden="true">
                                            <option data-select2-id="select2-data-12-u2o4"></option>
                                            {% for yearsItem in years %}
                                                <option {% if yearsItem.isActive == 1 %} selected {% endif %}
                                                        value="{{ yearsItem.id }}">{{ yearsItem.year }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>#}

                                <div class="mb-10 row w-100 align-items-baseline fv-row fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                    <div class="col-3">
                                        <div class="card bg-success mb-2 shadow-sm rounded" data-kt-buttons="true">
                                            <div class="card-body">
                                                <p class="text-white fw-bolder h4">Prüfungstyp</p>
                                                {% for examItem in exam %}
                                                    <input type="hidden" name="exam" value="{{ examItem.id }}">
                                                    <div class="w-100 my-1">
                                                            <span class="fw-bold fs-6 text-white">{{ examItem.name }} <span
                                                                        class="yearName">{{ yearsSelect.year }}</span> </span>
                                                    </div>
                                                    {% if loop.index == 1 %}
                                                        <hr class="my-1 border-white border-top-0 border-right-0 border-left-0">
                                                    {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="card bg-white mb-2 shadow-sm rounded" data-kt-buttons="true">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between">
                                                    <p class="fw-bolder h4">Fach</p>
                                                    <small class="text-muted">aktiv/passiv</small>
                                                </div>
                                                {% for lessonItem in lesson %}
                                                    <input type="hidden" name="lesson" value="{{ lessonItem.id }}">
                                                    <div class="d-flex justify-content-between align-items-center text-gray-2">
                                                            <span class="fs-6">{{ lessonItem.exam.name }}
                                                                <span class="yearName">{{ yearsSelect.year }}</span> - {{ lessonItem.name }}
                                                            </span>
                                                        <fieldset class="me-3">
                                                            <div class="custom-control custom-checkbox vs-checkbox-warning">
                                                                <input type="checkbox"
                                                                       class="custom-control-input vs-checkbox-warning lessonLage"
                                                                       name="customCheck"
                                                                       data-id="{{ lessonItem.id }}"
                                                                        {% if lessonItem.isEnabled|default == 1 %}
                                                                            {{ lessonItem.isEnabled|default ? 'checked' : '' }}
                                                                        {% endif %}
                                                                       id="customCheck{{ loop.index }}">
                                                                <label class="custom-control-label"
                                                                       for="customCheck{{ loop.index }}"></label>
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                    <hr class="my-2">
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-3 pe-0 d-flex flex-column align-items-center">
                                        <div class="card rounded w-100">
                                            <div class="card-body">
                                                <div class="fv-row fv-plugins-icon-container">
                                                    <label class="fs-7 fw-bold form-label required">Prüfung
                                                        auswählen
                                                    </label>
                                                    <select name="exam_type"
                                                            class="form-select no-border examSelect rounded-05-pill form-select-lg form-select-solid select2-hidden-accessible"
                                                            data-url="{{ path('admin_ajax_exam_lesson') }}"
                                                            data-control="select2" data-placeholder="Select..."
                                                            data-allow-clear="true" data-hide-search="true"
                                                            data-select2-id="select2-data-10-wrh3" tabindex="-1"
                                                            aria-hidden="true">
                                                        <option data-select2-id="select2-data-12-u2o4"></option>
                                                        {% for examItem in exam %}
                                                            <option value="{{ examItem.id }}">{{ examItem.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                                 </div>
                                            </div>
                                        </div>

                                        <div class="card rounded w-100">
                                            <div class="card-body">
                                                <div class="fv-row fv-plugins-icon-container">
                                                    <label class="fs-7 fw-bold form-label required">Kurs auswählen
                                                    </label>
                                                    <select name="lesson_type" disabled
                                                            class="form-select no-border lessonSelect rounded-05-pill form-select-lg form-select-solid select2-hidden-accessible"
                                                            data-control="select2" data-placeholder="Select..."
                                                            data-allow-clear="true" data-hide-search="true"
                                                            data-select2-id="select2-data-10-wrh4" tabindex="-1"
                                                            aria-hidden="true">
                                                        <option data-select2-id="select2-data-12-u2o3"></option>
                                                    </select>
                                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-kt-stepper-element="content" class="pending col-12">
                        <div class="w-100">
                            <div class="pb-10 row pb-lg-12">
                                <div class="col-10">
                                    <h2 class="fw-bolder text-dark">Inhalt</h2>
                                    <div class="text-gray-400 fw-bold fs-5">Prüfung - Kursinhalt</div>
                                </div>

                                <div class="col-2 m-0 d-flex justify-content-end align-items-center">
                                    <div class="btn btn-warning p-3 w-fit-content" id="productSave">Speichern</div>
                                </div>
                            </div>
                            <form enctype="multipart/form-data" id="bildPrivaty" name="bildPrivaty">
                                <div class="row align-items-center" id="nonProduct">
                                    <div class="fv-row mb-10 fv-plugins-icon-container col-5">
                                        <label class="fs-7 fw-bold form-label required">Titel</label>
                                        <input name="product_name" id="product_name" class="form-control">
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                    <div class="fv-row mb-10 fv-plugins-icon-container col-4">
                                        <label class="fs-7 fw-bold form-label required">Preis</label>
                                        <input name="product_prices" type="number" id="product_prices"
                                               class="form-control">
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                    <div class="fv-row mb-10 fv-plugins-icon-container col-3">
                                        <label class="fs-7 fw-bold form-label required">Höhe</label>
                                        <input name="product_hohe" type="number" id="product_hohe" class="form-control">
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                    <div class="fv-row mb-10 fv-plugins-icon-container col-12">
                                        <label class="fs-7 fw-bold form-label">Text</label>
                                        <textarea name="product_text" id="product_text"
                                                  class="form-control text-editor" rows="3"></textarea>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                    <div class="fv-row mb-10 fv-plugins-icon-container col-4">
                                        <label class="fs-7 fw-bold form-label">Bild</label>
                                        <input style="padding: 6px;" id="product_bild" type="file"
                                               class="form-control" name="product_bild" accept="image/*"/>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                            </form>
                            <div id="product"
                                 class="row w-100 justify-content-center align-items-center border-2 m-0">
                                <div class="w-100 border border-2 border-gray-200 rounded">
                                    <div class="row align-items-center p-5">
                                        <div class="col-md-2 h-120px d-flex flex-column">
                                            <p class="h6 text-muted mb-3">Bild</p>
                                            <img style="max-width: 62%; backface-visibility: hidden" src="" id="img"
                                                 alt="">
                                        </div>
                                        <div class="col-md-3 h-120px d-flex flex-column justify-content-between">
                                            <p class="h6 text-muted mb-3">Titel</p>
                                            <div id="title" class="fw-bolder"></div>
                                            <p></p>
                                        </div>
                                        <div class="col-md-3 overflow-auto h-120px d-flex flex-column justify-content-between">
                                            <p class="h6 text-muted mb-3">Text</p>
                                            <div id="text" class="fw-bolder"></div>
                                            <p></p>
                                        </div>
                                        <div class="col-md-1 h-120px d-flex flex-column justify-content-between">
                                            <p class="h6 text-muted mb-3">Höhe</p>
                                            <div id="hohe" class="fw-bolder"></div>
                                            <p></p>
                                        </div>
                                        <div class="col-md-2 h-120px d-flex flex-column justify-content-between">
                                            <p class="h6 text-muted mb-3">Prices (CHF)</p>
                                            <div id="price" class="fw-bolder"></div>
                                            <p></p>
                                        </div>
                                        <div class="col-md-1 pl-0 h-120px d-flex flex-column justify-content-between">
                                            <p class="h6 text-muted mb-3 text-center">Bearbeiten</p>
                                            <div id="duzenle" class="text-center">
                                                <a data-id="" id="revize" onclick="" data-href="" class=""
                                                   href="javascript:" title="bearbeiten">
                                                    <i class="feather icon-edit fs-22px text-warning"></i>
                                                </a>
                                            </div>
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-kt-stepper-element="content" class="pending col-12">
                        <div class="w-100">

                            <div class="row">
                                <div class="pb-10 pb-lg-15 col-11">
                                    <h2 class="fw-bolder text-dark">Modul</h2>
                                    <div class="text-gray-400 fw-bold fs-5">Modul hinzufügen</div>
                                </div>
                                <div id="newModul" class="col-1 align-items-end justify-content-end">
                                    <a data-ajax-modal
                                       data-href="{{ path('admin_ajax_product_modul_new') }}"
                                       class="btn btn-sm btn-warning revizeModulNew"
                                       href="javascript:"
                                       title="Düzenle">
                                        <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;"
                                             version="1.1" viewBox="0 0 32 32" width="32px"
                                             xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink"><path
                                                    d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
                                    </a>
                                </div>
                            </div>


                            <div id="modul_div">
                                {# <form enctype="multipart/form-data" id="productModul" class="productModul"
                                       name="productModul">
                                     {% include "admin/Main/Product/_modul_form.html.twig" %}
                                 </form>#}
                                <div id="productModulObject"></div>
                            </div>


                        </div>
                    </div>
                    <div data-kt-stepper-element="content" class="pending row col-12">
                        <div class="w-100">
                            <div class="row">
                                <div class="pb-10 pb-lg-15 col-11">
                                    <h2 class="fw-bolder text-dark">Extra</h2>
                                    <div class="text-gray-400 fw-bold fs-5">Extra hinzufügen</div>
                                </div>
                                <div id="newExtra" class="col-1 align-items-end justify-content-end">
                                    <a data-ajax-modal
                                       data-href="{{ path('admin_ajax_product_extra_new') }}"
                                       class="btn btn-sm btn-warning revizeExtraNew"
                                       href="javascript:"
                                       title="Düzenle">
                                        <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;"
                                             version="1.1" viewBox="0 0 32 32" width="32px"
                                             xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink"><path
                                                    d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
                                    </a>
                                </div>
                            </div>


                            <div id="extra_div">
                                <form enctype="multipart/form-data" id="productExtra" class="productExtra"
                                      name="productExtra">
                                    {% include "admin/Main/Product/_extra_form.html.twig" %}
                                </form>
                                <div id="productExtraObject"></div>
                            </div>


                        </div>
                    </div>
                    <div class="d-flex justify-content-end col-12 pt-6">
                        <div class="mr-2">
                            <button type="button" class="savePrev btn btn-lg btn-success py-3 px-10 me-3"
                                    data-kt-stepper-action="previous">
                                <i class="feather icon-arrow-left text-white fs-3"></i>
                                Zurück
                            </button>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary me-3 form-submit"
                                    style="display: none!important;"
                                    data-kt-stepper-action="submit">
													<span class="indicator-label">
                                                        Weiter
													<span class="svg-icon svg-icon-3 ms-2 me-0">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                             viewBox="0 0 24 24" fill="none">
															<rect opacity="0.5" x="18" y="13" width="13" height="2"
                                                                  rx="1" transform="rotate(-180 18 13)"
                                                                  fill="black"></rect>
															<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z"
                                                                  fill="black"></path>
														</svg>
													</span>
                                                    </span>
                                <span class="indicator-progress">Warten Sie mal...
													<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <button type="button"
                                    class="saveNext btn btn-lg btn-warning py-3 px-10 d-flex flex-center"
                                    data-kt-stepper-action="next" disabled>
                                Nächste<i class="feather icon-arrow-right fs-3 text-white"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{#{{ button.button_submit() }}#}

{% block javascripts %}

    <script src="{{ asset('assets/admin/app-assets/js/scripts/scripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/admin/app-assets/js/scripts/create-account.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            var editor = CKEDITOR.replace('product_text');
            editor.on("change", function (evt) {
                $('#product_text').html(evt.editor.getData());
            });

            $('.yearsSelect').change(function () {
                var deger = $(this).find(':selected').text();
                $('.yearName').text(deger);
            });

            $('.form-submit').click(function () {
                $('#kt_create_account_form').submit();
            });
        });

        function getProductEditModal(url) {
            var element = "#ajax-form";

            $.ajax({
                type: 'GET',
                url: url,
                beforeSend: function () {
                    $(element).remove()
                },
                data: null,
                success: function (data) {
                    $("body").prepend(data);
                    $(element).modal("show");

                    _validation.handleValidation();
                    Panel.priceFormat();

                }
            });
        }
    </script>
{% endblock %}