{% import "admin/Macros/Buttons/_button.html.twig" as button %}
<div class="form-group col-md-12 p-0">
    <label>Title </label>
    <input type="text" name="thema[name]" class="form-control" value="{{ thema.name|default }}">
</div>
<div class="fv-row mb-10 fv-plugins-icon-container col-12 p-0">
    <label class="fs-7 fw-bold form-label">Text</label>
    <textarea name="thema[text]" id="thema_text{{ thema.id|default() }}"
              class="form-control text-editor" rows="3">{{ thema.text|default() }}</textarea>
    <div class="fv-plugins-message-container invalid-feedback"></div>
</div>
<div class="form-group col-md-6 p-0">
    <label>Lektion </label>
    <select name="thema_bereichId" class="form-control">
        <option value="">Select Lektion</option>
        {% for item in bereich %}
            <option value="{{ item.id }}"
                    {% if item.id == thema.bereich.id|default %}selected{% endif %} >{{ item.lektion.name }} - {{ item.name }}</option>
        {% endfor %}
    </select>
</div>
<div class="fv-row mb-10 fv-plugins-icon-container col-6 p-0">
    <label class="fs-7 fw-bold form-label">PDF</label>
    <input style="padding: 6px;" id="thema_pdf" type="file" class="form-control" name="thema_pdf"
           accept="application/pdf"/>
    <div class="fv-plugins-message-container invalid-feedback"></div>
</div>
{% if thema.pdfFile|default != '' %}
    <div class="fv-row mb-10 fv-plugins-icon-container col-6 p-0">
        {% set dir = getProduct2Dir() %}
        {% set imageFullPath = dir|default~thema.pdfFile|default %}
        <iframe src="{{ asset(imageFullPath) }}" width="180" height="250" style="border: none;"
                allowfullscreen
                webkitallowfullscreen></iframe>
    </div>
{% endif %}
<hr>
<div class="fv-row mb-10 fv-plugins-icon-container col-6 p-0">
    <label class="fs-7 fw-bold form-label">APP PDF</label>
    <input style="padding: 6px;" id="thema_apppdf" type="file" class="form-control" name="thema_apppdf"
           accept="application/pdf"/>
    <div class="fv-plugins-message-container invalid-feedback"></div>
</div>
{% if thema.appPdfFile|default != '' %}
    <div class="fv-row mb-10 fv-plugins-icon-container col-6 p-0">
        {% set dir = getProduct2Dir() %}
        {% set imageFullPath = dir|default~'app/'~thema.appPdfFile|default %}
        <iframe src="{{ asset(imageFullPath) }}" width="180" height="250" style="border: none;"
                allowfullscreen
                webkitallowfullscreen></iframe>
    </div>
{% endif %}
<hr>
<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="is-enabled" name="thema_enabled" value="1"
                {% if thema.isEnabled|default == 1 %}
                    {{ thema.isEnabled|default ? 'checked' : '' }}
                {% endif %}
        >
        <label class="custom-control-label" for="is-enabled">Aktiv ?</label>
    </div>
</div>
<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" name="double_latex" class="custom-control-input" id="doubleLatex" value="1"
                {% if thema.doubleLatex|default == 1 %}
                    {{ thema.doubleLatex|default ? 'checked' : '' }}
                {% endif %}>
        <label class="custom-control-label" for="doubleLatex">Double Latex</label>
    </div>
</div>
<div class="row p-0">

    <div class="fv-row mb-10 fv-plugins-icon-container col-4">
        <label class="fs-7 fw-bold form-label required">Höhe</label>
        <input name="thema_hohe" type="number" id="thema_hohe" class="form-control" value="{{ thema.hohe|default() }}">
        <div class="fv-plugins-message-container invalid-feedback"></div>
    </div>
    <div class="fv-row mb-10 fv-plugins-icon-container col-8">
        <label class="fs-7 fw-bold form-label required">Latex Code</label>
        <input name="thema_latex_code" type="text" id="thema_latex_code" class="form-control"
               value="{{ thema.latexCode|default() }}">
        <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">Preis A (CHF)</label>
        <input name="thema_prices" id="thema_prices" type="number" class="form-control"
               value="{{ thema.price|default()|number_format(2) }}">
        <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">Preis A2 (CHF)</label>
        <input name="thema_pricesA2" id="thema_pricesA2" type="number" class="form-control"
               value="{{ thema.priceA2|default()|number_format(2) }}">
        <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">Preis B (CHF)</label>
        <input name="thema_pricesB" id="thema_pricesB" type="number" class="form-control"
               value="{{ thema.priceB|default()|number_format(2) }}">
        <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">Preis C (CHF)</label>
        <input name="thema_pricesC" id="thema_pricesC" type="number" class="form-control"
               value="{{ thema.priceC|default()|number_format(2) }}">
        <div class="fv-plugins-message-container invalid-feedback"></div>
    </div>
</div>
<div class="form-group col-12 p-0">
    <div class="pricesDrow mb-5">
        <label>Preis D</label>
        <div class="row align-items-center">
            <div class="col d-flex">
                <input class="form-control col-md-10" name="thema_pricesD[]" type="number">
                <select class="form-control col-md-2 mx-1" name="thema_pricesDname[]" id="thema_pricesDname">
                    {% for price in priceGroups %}
                        <option value="{{ price.id }}">{{ price.priceName }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto ps-0">
                <button class="btn btn-success btn-icon add-row" type="button">
                    <i class="fa fa-plus" style="font-size: 10px;"></i>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="mt-5 col-12 p-0">
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="row mb-3 text-center">
                    <div class="col-2 text-muted">Datum</div>
                    <div class="col-4 text-muted">Price</div>
                    <div class="col-4 text-muted">Price Group Name</div>
                    <div class="col-2 text-muted">Transaktionen</div>
                </div>
                <div id="bc">
                    {% for item in priceGroupsEntity %}
                        <div class="row align-items-center text-center py-1">
                            <div class="col-2">{{ item.createdAt|date('d.m.Y') }}</div>
                            <div class="col-4">{{ item.price|number_format(2) }}</div>
                            <div class="col-4">{{ item.pNAme }}</div>
                            <div class="col-2">
                                <i class="feather icon-trash fs-22px text-danger prcDlt2" style="cursor: pointer"
                                   data-id="{{ item.id }}"></i>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-end">
    {{ button.button_submit() }}
</div>
<script>
    $(".prcDlt2").click(function (event) {
        Panel.contentLoader_start();
        let id = $(this).data("id");
        let url = "{{ path('admin_ajax_thema_price_delete',{'id':'_id'}) }}".replace("_id", id);
        let el = event.currentTarget;

        $.ajax({
            type: 'POST',
            url: url,
            data: {id: id},
            success: function () {
                $(el).closest('.row').remove();
                Panel.contentLoader_close();
            }
        });
    });

    $(".add-row").click(function () {
        if ($(this).hasClass("btn-success")) {
            let $clone = $(this).closest('.pricesDrow').clone(true);
            let $label = $clone.children("label");
            /*$label.text('Preis D' + $(this).closest(".form-group").children().length);*/
            $label.remove();
            $clone
                .find(".add-row").removeClass("btn-success").addClass("btn-danger")
                .children(".fa").removeClass("fa-plus").addClass("fa-minus");
            $clone.find(".form-control").val("");
            $(this).closest(".form-group").append($clone);
        } else {
            /*$(this).closest(".form-group").children().each(function (i, e) {
                let $targetLabel = $(e).children('label');
                $targetLabel.text('Preis D' + i);

                if($(e) === $(this)) {
                    $(e).remove();
                }
            });*/
            $(this).closest(".pricesDrow").remove();
        }
    });

    var ckeditorx = CKEDITOR.replace('thema_text' + '{{ thema.id|default() }}');
    ckeditorx.on("change", function (evt) {
        $('#thema_text' + '{{ thema.id|default() }}').html(evt.editor.getData());
    });
</script>