{% extends 'admin/admin_base.html.twig' %}
{% set page_title = "Produkte" %}
{% block title %}{{ page_title }}{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block breadcrumb %}
    {% set fields = [ { 'name': page_title }] %}
    {#{% include 'admin/Common/_breadcrumb.html.twig' %}#}
{% endblock %}
{% block page_buttons %}
    <button class="btn btn-warning my-2" id="btn-rightdescmenu">
        <i class="feather icon-chevrons-right fw-bolder"></i>
    </button>
{% endblock %}
{% block body %}
    <div class="bg-rightdescmenu"></div>
    <div class="rightdescmenu" tabindex="-1">
        <div class="rightdescmenu-header">
            <h4 class="mb-0">Product</h4>
            <button type="button" class="rightdescmenu-close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <hr>
        <div class="rightdescmenu-body mt-10">
            <div class="section">
                <label for="a" class="fw-bolder mb-2">Aktionsbutton</label>
                <textarea name="a"
                          data-link="{{ path('admin_ajax_aktion_buttons_edit',{'id':aktionsButton[0].id}) }}"
                          id="actionsButton" class="form-control actionsButton"
                          rows="4">{{ aktionsButton[0].text }}</textarea>
            </div>
        </div>
    </div>

    <div class="card border-0">
        <div class="card-content">
            <div class="card-body">
                <form action="{{ path('admin_product_new',{'site':siteName[0].alias}) }}" method="post"
                      class="form-validate"
                      enctype="multipart/form-data">
                </form>
                {% include "admin/Main/Product/_form.html.twig" %}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/admin/app-assets/vendors/js/forms/ckeditor/ckeditor.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#btn-rightdescmenu').click(function () {
                $('.rightdescmenu').addClass('show');
                $('.bg-rightdescmenu').addClass('show');
                $('body').css("overflow", "hidden");
            });
            $('.rightdescmenu-close, .bg-rightdescmenu').click(function () {
                $('.rightdescmenu').removeClass('show');
                $('.bg-rightdescmenu').removeClass('show');
                $('body').css("overflow", "unset");
            });
            $('.actionsButton').on('change', function () {
                Panel.contentLoader_start();
                let ab = $(this).val();
                let url = $(this).data('link');
                $.ajax({
                    url: url,
                    data: {'ab': ab},
                    method: 'POST',
                    type: 'POST',
                    success: function (data) {
                        $('.actionsButton').html(data.text);
                        Panel.contentLoader_close();
                    }
                });
            });
        });

        $('.examSelect').change(function () {
            Panel.contentLoader_start();
            $('.lessonSelect').attr('disabled', true);
            let exam = $(this).find(':selected').val();
            let url = $(this).data('url');
            $.ajax({
                type: 'POST',
                url: url,
                data: {'exam': exam},
                success: function (data) {
                    Panel.contentLoader_close();
                    let option = '';
                    $.each(data, function (i) {
                        option += '<option value="' + data[i].lessonId + '">' + data[i].lessonName + '</option>';
                    });
                    $('.lessonSelect').removeAttr('disabled').html(option).trigger('change');
                    ajaxModulcontrol();
                    ajaxExtracontrol();
                    $('.examSelect, .lessonSelect').prop('disabled', false);
                }
            });
        });

        $('#productSave').click(function () {
            Panel.contentLoader_start();
            ajaxLesson();
        });

        const ajaxLessonObject = ajaxLesson();

        function ajaxLesson() {
            let url2 = '{{ path('admin_ajax_product_new',{'site':siteName[0].alias}) }}';
            let site = '{{ siteName[0].alias }}';
            let lesson = $('.lessonSelect option:selected').val();
            let exam = $('.examSelect option:selected').val();
            let form = $("#bildPrivaty")[0];
            let fd = new FormData(form);
            fd.append('site', site);
            fd.append('lesson', lesson);
            fd.append('exam', exam);

            return $.ajax({
                url: url2,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    Panel.contentLoader_close();
                    if (Object.keys(data).length === 0) {
                        $('#bildPrivaty').css('display', 'block');
                        $('#productSave').css('display', 'block');
                        $('#product').css('display', 'none');

                    } else {
                        $('#bildPrivaty').css('display', 'none');
                        $('#productSave').css('display', 'none');
                        $('#product').css('display', 'flex');


                        $('.saveNext').show();
                        let img = '{{ asset(getProductImageDir()) }}' + data.product.imageFile;
                        let title = data.product.title;
                        let text = data.product.text;
                        let id = data.product.id;
                        let price = data.product.price;
                        let hohe = data.product.hohe;
                        let alias = data.product.alias;

                        $("[data-ajax-modal]").off('click');

                        $('#duzenle').attr('data-type', alias);
                        $('#img').attr('src', img);
                        $('#title').html(title);
                        $('#text').html(text);
                        $('#hohe').html(hohe);
                        $('#price').html(price);
                        $('#revize').attr('data-id', id);

                        let data_url = "{{ path('admin_product_edit',{'site':siteName[0].alias,'id':'renameId'}) }}";
                        $('#revize').attr('data-href', data_url.replace('renameId', id));
                        /*$('#product').removeAttr('disabled').html(elem).trigger('change');*/
                    }
                }
            });
        }

        function modalEdit(id) {
            if (id) {

                let data_url = "{{ path('admin_ajax_product_modul_modal_edit',{'id':'renameId'}) }}";

                let forms2 = $("#exampleModal.show .productModulEdit");
                let fd2 = new FormData(forms2.get(0));
                fd2.append('id', id);

                $.ajax({
                    url: data_url.replace('renameId', id),
                    data: fd2,
                    method: 'POST',
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function (data) {
                        $('#exampleModal form').html(data.html);
                        $('#exampleModal').modal('hide');
                        ajaxModulcontrol();
                        Panel.contentLoader_close();
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                    }
                });
            }
        }

        function ajaxModul() {
            let url3 = '{{ path('admin_ajax_product_modul',{'site':siteName[0].alias}) }}';
            let site = '{{ siteName[0].alias }}';

            let lesson = $('.lessonSelect option:selected').val();
            let exam = $('.examSelect option:selected').val();


            let forms = $(".productModul")[0];
            let fd = new FormData(forms);
            fd.append('site', site);
            fd.append('lesson', lesson);
            fd.append('exam', exam);

            return $.ajax({
                url: url3,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    Panel.contentLoader_close();
                    if (data.html == '') {
                        $('.productModul').css('display', 'block');
                    } else {
                        $('.modal').modal('hide');
                        $('.productModul').css('display', 'none');

                        $('.saveNext').show();
                    }
                    $('#productModulObject').html(data.html);
                }
            });
        }

        function ajaxModulcontrol() {
            let url3 = '{{ path('admin_ajax_product_modul_control',{'site':siteName[0].alias}) }}';

            let lesson = $('.lessonSelect option:selected').val();
            let exam = $('.examSelect option:selected').val();
            let fd = new FormData();

            fd.append('lesson', lesson);
            fd.append('exam', exam);

            return $.ajax({
                url: url3,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    Panel.contentLoader_close();
                    if (data.html == '') {
                        $('.productModul').css('display', 'block');
                    } else {
                        $('.productModul').css('display', 'none');
                    }
                    $('#productModulObject').html(data.html)
                }

            });
        }

        function extraEdit(id) {
            if (id) {
                let data_url = "{{ path('admin_ajax_product_extra_modal_edit',{'id':'renameId'}) }}";

                let forms2 = $("#exampleModal2.show .productExtraEdit");
                let fd2 = new FormData(forms2.get(0));
                fd2.append('id', id);

                $.ajax({
                    url: data_url.replace('renameId', id),
                    data: fd2,
                    method: 'POST',
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function (data) {
                        Panel.contentLoader_close();
                        $('#exampleModal2 form').html(data.html);
                        $('#exampleModal2').modal('hide');
                        ajaxExtracontrol();
                        Panel.contentLoader_close();
                    }
                });
            }
        }

        function ajaxExtra() {
            let url3 = '{{ path('admin_ajax_product_extra',{'site':siteName[0].alias}) }}';
            let site = '{{ siteName[0].alias }}';

            let lesson = $('.lessonSelect option:selected').val();
            let exam = $('.examSelect option:selected').val();


            let forms = $(".productExtra")[0];
            let fd = new FormData(forms);
            fd.append('site', site);
            fd.append('lesson', lesson);
            fd.append('exam', exam);

            return $.ajax({
                url: url3,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    Panel.contentLoader_close();

                    if (data.html == '') {
                        $('.productExtra').css('display', 'block');
                    } else {
                        $('.modal').modal('hide');
                        $('.productExtra').css('display', 'none');

                        $('.saveNext').show();
                    }
                    $('#productExtraObject').html(data.html)
                }
            });
        }

        function ajaxExtracontrol() {
            let url4 = '{{ path('admin_ajax_product_extra_control',{'site':siteName[0].alias}) }}';

            let lesson = $('.lessonSelect option:selected').val();
            let exam = $('.examSelect option:selected').val();
            let fd = new FormData();

            fd.append('lesson', lesson);
            fd.append('exam', exam);

            return $.ajax({
                url: url4,
                data: fd,
                contentType: false,
                processData: false,
                cache: false,
                method: 'POST',
                type: 'POST',
                success: function (data) {
                    if (data.html == '') {
                        $('.productExtra').css('display', 'block');
                    } else {
                        $('.productExtra').css('display', 'none');
                    }
                    $('#productExtraObject').html(data.html)
                }
            });
        }

        $('#formSubmitajaxExtra').click(function () {
            ajaxExtra();
        });

        let lesAjax = null;
        $('.lessonSelect').change(function () {
            Panel.contentLoader_start();
            let lesson = $(this).find(':selected').val();
            let exam = $('.examSelect option:selected').val();
            let url = '{{ path('admin_ajax_exam_lesson_control') }}';
            lesAjax = $.ajax({
                type: 'POST',
                url: url,
                dataType: "JSON",
                data: {'lesson': lesson, 'exam': exam},
                success: function (data) {
                    Panel.contentLoader_close();
                    document.getElementById("bildPrivaty").reset();

                    if (Object.keys(data).length === 0) {
                        $('#bildPrivaty').css('display', 'block');
                        $('#product').css('display', 'none');
                        $('#productSave').css('display', 'block');
                    } else {
                        $('#bildPrivaty').css('display', 'none');
                        $('#productSave').css('display', 'none');
                        $('#product').css('display', 'flex');

                        $(".saveNext").prop("disabled", false);

                        let img = '{{ asset(getProductImageDir()) }}' + data.imageFile;
                        let text = data.text;
                        let id = data.id;
                        let title = data.title;
                        let price = data.price;
                        let hohe = data.hohe;
                        let alias = data.alias;

                        $('#duzenle').attr('data-type', alias);
                        $('#img').attr('src', img);
                        $('#text').html(text);
                        $('#title').html(title);
                        $('#price').html(price);
                        $('#hohe').html(hohe);
                        $('#revize').attr('data-id', id);


                        let data_url = "{{ path('admin_product_edit',{'site':siteName[0].alias,'id':'renameId'}) }}";
                        $('#revize').attr('data-href', data_url.replace('renameId', id));
                        $('#revize').attr('onclick', "getProductEditModal('" + data_url.replace('renameId', id) + "')");

                        /*$('#product').removeAttr('disabled').html(elem).trigger('change');*/
                    }
                    ajaxModulcontrol();
                    ajaxExtracontrol();
                }
            });
        });

        $('.saveNext').click(function () {
            if (lesAjax != null) {
                lesAjax.done(function (data) {
                    if (Object.keys(data).length === 0) {
                        $('.saveNext').hide();
                    } else {
                        $('.saveNext').show();
                    }
                });
            }
        });

        $('.savePrev').click(function () {
            if ($('#kt_create_account_stepper .bg-body > .current').index() == 1) {
                $('.saveNext').show();
            }
        });

        $('.lessonLage').click(function () {

            $('.examSelect, .lessonSelect').prop('disabled', true);

            Panel.contentLoader_start();
            let lage = 0;
            let id = $(this).data('id');
            if ($(this).is(':checked')) {
                lage = 1;
            }
            $.ajax({
                type: 'POST',
                url: '{{ path('admin_ajax_exam_lesson_lage') }}',
                data: {'enabled': lage, 'id': id},
                success: function () {

                    setTimeout(function () {
                        $('.examSelect, .lessonSelect').prop('disabled', false);
                    }, 1000);

                    if ($('.examSelect').val()) {
                        $('.examSelect').trigger('change');
                    }
                    Panel.contentLoader_close();

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