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

<div class="row">
    <div class="form-group col-12">
        <label>Titel </label>
        <input type="text" name="product_name" class="form-control" value="{{ product.title|default }}">
    </div>


    <div class="form-group col-3">
        <label>Preis A</label>
        <input type="number" name="product_prices" class="form-control"
               value="{{ product.price|default|number_format(2) }}">
    </div>
    <div class="form-group col-3">
        <label>Preis A2</label>
        <input type="number" name="product_pricesA2" class="form-control"
               value="{{ product.priceA2|default|number_format(2) }}">
    </div>
    <div class="form-group col-3">
        <label>Preis B</label>
        <input type="number" name="product_pricesB" class="form-control"
               value="{{ product.priceB|default|number_format(2) }}">
    </div>
    <div class="form-group col-3">
        <label>Preis C</label>
        <input type="number" name="product_pricesC" class="form-control"
               value="{{ product.priceC|default|number_format(2) }}">
    </div>


    <div class="form-group col-12">
        <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="product_pricesD[]" type="number">


                    <select class="form-control col-md-2 mx-1" name="product_pricesDname[]" id="product_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">
        <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 prcDlt" style="cursor: pointer"
                                       data-id="{{ item.id }}"></i>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-4">
        <label>Höhe </label>
        <input type="number" name="product_hohe" class="form-control" value="{{ product.hohe|default }}">
    </div>
    <div class="form-group col-12">
        <label>Seitentitel </label>
        <textarea id="product_text" name="product_text"
                  class="form-control text-editor">{{ product.text|default }}</textarea>
    </div>
    <div class="form-group col-4">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" name="enabled" class="custom-control-input" id="is-enabled" value="1"
                    {% if product.isEnabled|default == 1 %}
                        {{ product.isEnabled|default ? 'checked' : '' }}
                    {% endif %}>
            <label class="custom-control-label" for="is-enabled">Aktiv ?</label>
        </div>
    </div>

    <div class="form-group col-4">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" name="double_latex" class="custom-control-input" id="doubleLatex" value="1"
                    {% if product.doubleLatex|default == 1 %}
                        {{ product.doubleLatex|default ? 'checked' : '' }}
                    {% endif %}>
            <label class="custom-control-label" for="doubleLatex">Double Latex</label>
        </div>
    </div>


    <div class="form-group col-6">
        <label>Bild </label>
        <input style="padding: 6px;" name="product_bild" id="image_modul" type="file" class="form-control"
               accept="image/*"/>
    </div>
    <div class="form-group col-6">
        {% set dir = getProductImageDir() %}
        {% set imageFullPath=  dir|default~product.imageFile|default %}
        <img style="max-width: 50%; margin: 20px;" src="{{ asset(imageFullPath) }}">
    </div>
    <div class="col-12 border-top pt-7">
        <div id="formSubmitajax" class="btn btn-lg btn-primary  float-right me-3 form-submit">
            <span class="indicator-label">
                 Speichern
            </span>
        </div>
    </div>
</div>
<script type="text/javascript">
    var editor = CKEDITOR.replace('product_text');
    editor.on("change", function (evt) {
        $('#product_text').html(evt.editor.getData());
    });

    $(".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();
        }
    });

    /*Panel.textEditor();*/
    $('#formSubmitajax').click(function () {


        //let url_edit = $('#productFormDetails').data('href');
        let forms2 = $("#productFormDetails")[0];
        let url_edit = $('#productFormDetails').attr('action');

        let fds = new FormData(forms2);
        let ids = $('#revize').data('id');
        fds.append('id', ids);

        var ajax = $.ajax({
            url: url_edit,
            data: fds,
            contentType: false,
            processData: false,
            cache: false,
            method: 'POST',
            type: 'POST',
            success: function (data) {
                $('#title').html(data.product.title);
                $('#text').html(data.product.text);
                $('#price').html(data.product.price);
                $('#hohe').html(data.product.hohe);
                $('#duzenle').attr('data-type', data.product.alias);
                let img = '{{ asset(getProductImageDir()) }}' + data.product.imageFile;
                $('#img').attr('src', img);
                $('.modal').modal('hide');
            }
        });
    });

    $(".prcDlt").click(function (event) {
        Panel.contentLoader_start();
        let id = $(this).data("id");
        let url = "{{ path('admin_ajax_product_price_delete',{'id':'_id'}) }}".replace("_id", id);

        console.log(id);

        let el = event.currentTarget;

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

    });


</script>
{#{{ button.button_submit() }}#}