{% extends 'admin/admin_base_new.html.twig' %}

{% set page_title = "Haber Ekle" %}
{% block metaTitle %}{{ page_title }}{% endblock %}

{% block breadcrumb %}
    {{ include('admin/Common/_breadcrumb.html.twig', {
        title: 'Haber Ekle',
        indexPath: path('admin_news_index'),
        paths: [
            {title: 'Haber\'ler', path: path('admin_news_index')},
            {title: 'Haber Ekle'}
        ]
    }) }}
    {% block page_buttons %}
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <a href="{{ path('admin_news_index') }}" class="btn btn-sm fw-bold btn-secondary">Listeye Dön</a>
        </div>
    {% endblock %}
{% endblock %}

{% block stylesheets %}
    <style>
        .btn-save:not(.active) {
            padding-left: 0!important;
        }

        .btn-save:not([data-kt-indicator="on"]) .indicator-label,
        .btn-save:is([data-kt-indicator="on"]) .indicator-progress {
            display: inline-block;
            transition: transform .15s ease-in-out;
        }

        .btn-save:focus .indicator-label,
        .btn-return:focus + .btn-save .indicator-label,
        .btn-group:not(.group-active):hover .indicator-label,
        .btn-group.group-active .indicator-progress {
            transform: translateX(0.75rem);
        }
    </style>
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-header card-header-stretch">
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" data-id="1" href="#page_tab_bilgi">İçerikler</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" data-id="2" href="#page_tab_slider">Kaydırıcı</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <form method="post" id="entityForm">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="page_tab_bilgi" role="tabpanel">
                        <div class="kt_docs_repeater_basic">
                            <div class="form-group mb-5">
                                {{ include('admin/Main/News/_form.html.twig') }}
                            </div>
                            <div class="btn-group pl-0" role="group">
                                <button type="submit" class="btn btn-icon btn-primary btn-return" data-bs-toggle="tooltip" title="Kaydet ve sıfırla">
                                    <i class="ki-solid ki-arrows-circle fs-3"></i>
                                </button>
                                <button type="submit" class="btn btn-primary btn-save">
                                    <span class="indicator-label">Kaydet</span>
                                    <span class="indicator-progress">Kaydediliyor...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="page_tab_slider" role="tabpanel">
                        <div class="kt_docs_repeater_basic">
                            <div class="form-group mb-5">
                                <div id="kt_docs_repeater_wrapper" data-repeater-list="childs">
{#                                    {% for child in section.sectionSections %}#}
{#                                        {{ include('admin/Main/News/_form_slider.html.twig', {section: section, child: child, idx: loop.index0}) }}#}
{#                                    {% else %}#}
                                        {{ include('admin/Main/News/_form_slider.html.twig', {idx: 0}) }}
{#                                    {% endfor %}#}
                                </div>
                            </div>
                            <div class="btn-group pl-0" role="group">
                                <button type="button" class="btn btn-light-success me-5" data-repeater-create>
                                    <i class="ki-duotone ki-plus fs-3"></i> Bölüm
                                </button>
                                <button type="submit" class="btn btn-icon btn-primary btn-return" data-bs-toggle="tooltip" title="Kaydet ve sıfırla">
                                    <i class="ki-solid ki-arrows-circle fs-3"></i>
                                </button>
                                <button type="submit" class="btn btn-primary btn-save">
                                    <span class="indicator-label">Kaydet</span>
                                    <span class="indicator-progress">Kaydediliyor...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        Promise.all([
            new Promise(resolve => {
                const script1 = document.createElement("script");
                script1.src = "{{ asset('assets/theme/plugins/custom/tinymce/tinymce.bundle.js') }}";
                script1.onload = resolve;
                document.body.appendChild(script1);
            }),
            new Promise(resolve => {
                const script2 = document.createElement("script");
                script2.src = "{{ asset('assets/theme/plugins/custom/formrepeater/formrepeater.bundle.js') }}";
                script2.onload = resolve;
                document.body.appendChild(script2);
            })
        ]).then(() => {
            $(document).ready(function () {
                // Dropzone

                let dropzoneItem = document.getElementById("dropzoneItem");



                const options = {
                    selector: ".tox-target",
                    height: "375",
                    setup: (editor) => {
                        editor.on('blur', () => {
                            editor.save();
                        });
                    }
                };

                if (KTThemeMode.getMode() === "dark") {
                    options["skin"] = "oxide-dark";
                    options["content_css"] = "dark";
                }
                tinymce.init(options);

            })



                const dropzoneOptions = function (el) {
                    let options = JSON.parse(el.attr('data-options'));
                    let itemTmp = $(el).find("template").prop("content");

                    let itemTmpHtml = $(itemTmp).find(".dropzone-item").prop('outerHTML');
                    return {
                        url: location.href,
                        autoQueue: false,
                        acceptedFiles: '.jpeg,.jpg,.png,.webp,.gif,.bmp,.svg',
                        maxFiles: options.maxFiles ? options.maxFiles : 1,
                        maxFilesize: 256 / 1024,
                        previewTemplate: itemTmpHtml,
                        previewsContainer: el.find(".dropzone-items").get(0),
                        thumbnailWidth: 75,
                        thumbnailHeight: 75,
                        thumbnailMethod: 'contain',
                        dictFileTooBig: 'Dosya boyutu (fileSizeKb) bu boyuttan fazla: maxFileSizeKb.dictFileTooBig',
                        clickable: $(el).find(".dropzone-select")[0],
                        init: dropzoneInit
                    }
                }

                function dropzoneInitrz(elm) {

                    if (elm.get(0).dropzone) {
                        console.warn("Dropzone already initialized on this element:", elm);
                        return; // Eğer zaten ekliyse tekrar ekleme
                    }
                    elm.dropzone(dropzoneOptions(elm))
                }
                // $(".dropzone").each(function () {
                //     dropzoneInitrz($(this));
                // });

                function dropzoneInit() {

                    let $this = this;
                    let $dropzoneItems = $(this.element).find(".dropzone-items");
                    this.on("addedfile", function () {
                        $dropzoneItems.addClass("mt-3");
                    });
                    this.on("removedfile", function () {
                        $(this.element).prevAll('input[name$="[image_ids]"]').val("[]");
                        if (!this.files.length) {
                            $dropzoneItems.removeClass("mt-3");
                        }
                    });
                    this.on("error", function (file, message) {
                        let fileSize = file.size;
                        let maxFilesize = this.options.maxFilesize;
                        let unit = "Tb";
                        if (maxFilesize < 1) {
                            //Dosya boyutu 1mb altındaysa: kb
                            unit = "Kb";
                        } else if (maxFilesize < 1024) {
                            //Dosya boyutu 1mb altındaysa: mb
                            unit = "Mb";
                        } else if (maxFilesize < 1048576) {
                            //Dosya boyutu 1mb altındaysa: gb
                            unit = "Gb";
                        }

                        if (message.includes("dictFileTooBig")) {
                            let fileSizeKb = Math.round((fileSize / 1024) * 100) / 100;
                            if (maxFilesize < 1) {
                                maxFilesize = Math.round((maxFilesize * 1024) * 100) / 100;
                            }
                            let pattern = /fileSize|maxFileSize|dictFileTooBig/g;
                            let replaces = {fileSize: fileSizeKb, maxFileSize: maxFilesize, dictFileTooBig: ""}
                            message = message.replace(pattern, function (match) {return replaces[match]});
                        }
                        $(file.previewElement).find('[data-dz-errormessage]').each(function () {
                            $(this).text(message);
                        });
                    });
                    /* >>> Events */

                    //yuklenen resimleri ekle

                    let images = JSON.parse($this.element.dataset.images);
                    let files = [];
                    const getFileBlob = async image => {
                        const res = await fetch(image.filepath + image.name);
                        const blob = await res.blob();
                        let file = new File([blob], image.name, blob);
                        files.push(file);
                    }
                    const fetchFiles = async () => {
                        const fetchImages = images.map(async image => await getFileBlob(image));
                        await Promise.all(fetchImages);
                        files.sort((a, b) => a.id - b.id);
                        $.each(files, function (i,e) {
                            e.manually = true;
                            $this.addFile(e);
                        });
                    }
                    fetchFiles();
                }

                // Giving unique id to inputs according to languages to avoid conflicts
                function indexSorter(parent, isContainer = 'repeaterItemsContainer', isNamePattern = false, isDropdowns = false) {
                    const dropzoneContainer = isContainer === 'dropzoneContainer';
                    const repeaterItemsContainer = isContainer === 'repeaterItemsContainer';

                    if (repeaterItemsContainer) {
                    }
                    let pattern = /_\d+_/;
                    let allPatterns = /_\d+_/g; // <-- all matches
                    let namePattern = /\[\d+\]/;
                    parent.children().each(function (i) {

                        //tab index yenile
                        $(this).find(".nav-link").attr("href", function (ix,val) {

                            if (isDropdowns) {
                                // Find to all matches
                                let matches = [...val.matchAll(allPatterns)];

                                if (matches.length >= 2) {
                                    // Find the index of the 2nd match
                                    let secondMatch = matches[1];
                                    let start = secondMatch.index;
                                    let end = start + secondMatch[0].length;

                                    // Split String, replace 2nd match
                                    let result =
                                        val.slice(0, start) +
                                        `_${i}_` +
                                        val.slice(end);

                                    return result;
                                } else {
                                    console.log("2. eşleşme bulunamadı");
                                }
                            }
                            return val.replace(pattern, '_' + i + '_');
                        });
                        $(this).find(".tab-pane").attr("id", function (ix,val) {
                            if (isDropdowns) {
                                // Find to all matches
                                let matches = [...val.matchAll(allPatterns)];

                                if (matches.length >= 2) {
                                    // Find the index of the 2nd match
                                    let secondMatch = matches[1];
                                    let start = secondMatch.index;
                                    let end = start + secondMatch[0].length;

                                    // Split String, replace 2nd match
                                    let result =
                                        val.slice(0, start) +
                                        `_${i}_` +
                                        val.slice(end);

                                   /* console.log('resultStart', val.slice(0, start));
                                    console.log('resultEnd', val.slice(end));
                                    console.log('resultİ', `_${i}_`);
                                    console.log('result', result);*/

                                    return result;
                                } else {
                                    console.log("2. eşleşme bulunamadı");
                                }
                            }

                            return val.replace(pattern, '_' + i + '_');
                        });

                        $(this).find(".reindex-field").each(function () {
                            let inputId = $(this).attr("id").replace(pattern, '_' + i + '_');
                            $(this).attr("id", inputId).prev("label").attr("for", inputId);
                        });

                        if (isNamePattern) {
                                $(this).find(".dropzone .tab-pane input").attr("name", function (ix,val) {
                                    return val.replace(namePattern, '[' + i + ']');
                                });
                        }
                    });
                    console.log("2. eşleşme bulunamadı");

                }

                repeaterLoad();



                function restartRepeater() {
                    repeaterLoad() // Repeater'ı yeniden başlat
                };

                function repeaterLoad() {
                    const options = {
                        selector: ".tox-target",
                        height: "375",
                        setup: (editor) => {
                            editor.on('blur', () => {
                                editor.save();
                            });
                        }
                    };
                    if (KTThemeMode.getMode() === "dark") {
                        options["skin"] = "oxide-dark";
                        options["content_css"] = "dark";
                    }
                    $('.kt_docs_repeater_basic').each(function () {
                        let repeaterList = $(this).find('[data-repeater-list]');
                        let repeaterName = repeaterList.attr('data-repeater-list')

                        $(this).repeater({
                            initEmpty: false,
                            repeaters: [{
                                // (Required)
                                // Specify the jQuery selector for this nested repeater
                                selector: '.lang-repeater'
                            }],
                            show: function () {
                                let index = $(this).index();
                                let prevItem = $(this).prev();
                                let previndex = prevItem.index();
                                let $lastDropzone = $(this).find('.dropzone');

                                let $imageIdInput = $(this).find(`input[name="${repeaterName}[${index}][imageId]"]`);
                                let $sectionIdInput = $(this).find(`input[name="${repeaterName}[${index}][sectionId]"]`);
                                let $isThereSectionCategoryInput = $(this).find(`input[name="${repeaterName}[${index}][isThereSectionCategory]"]`);

                                // Önceden bir ID varsa, sil
                                $lastDropzone.removeAttr("id");

                                // Yeni benzersiz ID oluştur
                                let uniqueId = new Date().getTime();
                                let uniqueIdDropzone = "dz-image" + uniqueId;
                                $imageIdInput.val(uniqueId);
                                $lastDropzone.attr("id", uniqueIdDropzone); // Yeni ID'yi ata
                                $lastDropzone.attr("data-images", "[]");
                                let $tabPane = $(this).find(".tab-pane");
                                $tabPane.each(function (i, value) {
                                    let $value = $(value);
                                    $value.attr("data-id", "");
                                    $value.find('input[name$="[key]"]').val($value.data("shorttitle"));
                                    $value.find('input[name$="[section_lang]"]').val($value.data("id"));
                                });

                                // **Burada: Önceki tekrar edilen elemandan input değerini al**
                                if (prevItem.length > 0) {
                                    const prevItemSectionId = prevItem.find(`input[name="${repeaterName}[${previndex}][sectionId]`).val()
                                    const isThereSectionCategory = prevItem.find(`input[name="${repeaterName}[${previndex}][isThereSectionCategory]`).val()
                                    $sectionIdInput.val(prevItemSectionId);
                                    $isThereSectionCategoryInput.val(isThereSectionCategory);
                                }
                                indexSorter($(this).parent(), 'repeaterItemsContainer', false);
                                $(this).slideDown();
                                console.log('tinymce', tinymce);

                                if ($lastDropzone != null) {
                                    dropzoneInitrz($lastDropzone);
                                }

                                // Changing the values of the sub-inputs of the photos when the image is added so that they do not overlap
                                let dropzoneInput = $lastDropzone.get(0).dropzone;
                                // When photo is added
                                dropzoneInput.on("addedfile", function () {
                                    indexSorter($(dropzoneInput.element).find(".dropzone-items"), 'dropzoneContainer', false);
                                    // birinci indexSorter'dan sonrasında yapılmasının nedeni öncesinde olsaydı klass'lar tekrar değişecekti ve çakışma yaşanacaktı...
                                    indexSorter($(dropzoneInput.element).closest('#kt_docs_repeater_wrapper'), 'repeaterItemsContainer', true, false);

                                });
                                tinymce.init(options);

                            },
                            hide: function (deleteElement) {
                                $(this).find(".fox-target").each(function () {
                                    let editor = tinymce.get(this.id);
                                    if (editor) {
                                        console.log("Siliniyor:", this.id);
                                        editor.remove();
                                    } else {
                                        console.warn("editör bulunamadı:", this.id)
                                    }
                                })
                                let dropzoneElement = $(this).find('.dropzone')[0]; // <- [0] ile native DOM elementi aldık
                                let dzInstance = Dropzone.forElement(dropzoneElement);

                                if (dzInstance) {
                                    dzInstance.destroy();
                                }
                                indexSorter($(this).parent(), 'repeaterItemsContainer');
                                $(this).slideUp(deleteElement);
                            }
                        });
                    })
                };

                $(document).ready(function () {

                    let allDropzones = $('.dropzone');

                    allDropzones.each(function () {
                        let dropzoneInput = $(this).get(0);

                        if (dropzoneInput != null) {
                            dropzoneInitrz($(this));
                        }




                        // Changing the values of the sub-inputs of the photos when the image is added so that they do not overlap
                        // When photo is added
                        let dropzoneInstance = dropzoneInput.dropzone;

                        if (dropzoneInstance) {

                            dropzoneInstance.on('addedfile', function () {

                                // Buradaki `this.element` = o anki dropzone div'i
                                let dropzoneItems = $(dropzoneInstance.element).find(".dropzone-items");

                                indexSorter(dropzoneItems, 'dropzoneContainer', true, true);
                                indexSorter($(this).closest('#kt_docs_repeater_wrapper'), 'repeaterItemsContainer', true, false);
                            })
                        }
                    })
                })
        });


    </script>
{% endblock %}