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

{% set politicsLang = getPoliticsLang({'politics':politics}) %}
{% set politics_title = "İçerik Detay" %}
{% set langs = getLangs() %}

{% block metaTitle %}{{ politics_title }}{% endblock %}

{% block stylesheets %}
    <style>
        .tox-target + .tox.tox-tinymce {
            margin-bottom: 1.25rem;
        }

        .dropzone-item.dz-error {
            background-color: var(--bs-danger-light);
        }

        .tox-target + .tox.tox-tinymce {
            margin-bottom: 1.25rem;
        }
    </style>
{% endblock %}

{% block breadcrumb %}
    {{ include('admin/Common/_breadcrumb.html.twig', {
        title: section.alias|default ~ ' ' ~ 'İçerikleri',
        indexPath: path('admin_politics_index'),
        paths: [
            {title: 'İçerikler', path: path('admin_politics_index')},
            {title: politics.alias|default, path: path('admin_politics_index')},
            {title: section.alias|default},
            {title: section.alias|default ~ ' ' ~ 'İçerikleri' }
        ]
    }) }}
    {% block politics_buttons %}
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <a href="{{ path('admin_politics_index') }}" class="btn btn-sm fw-bold btn-secondary">Listeye Dön</a>
        </div>
    {% endblock %}
{% 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="{{ section.id }}"
                           href="#politics_tab_bilgi">İçerikler</a>
                    </li>

                    {% for section in sections %}
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" data-id="{{ section.id }}"
                               href="#politics_tab_{{ section.id }}">{{ section.alias }}</a>
                        </li>
                    {% endfor %}
                    {#                    <li class="nav-item"> #}
                    {#                        <a class="nav-link" data-bs-toggle="tab" href="#politics_tab_medya">Medya</a> #}
                    {#                    </li> #}
                </ul>
            </div>

        </div>
        <div class="card-content">
            <div class="card-body">
                <form method="post" id="entityForm">
                    {#                    <div class="row"> #}
                    {#                        <div class="col-lg-6"> #}
                    {#                            <label class="form-label" for="section_section">Alan</label> #}
                    {#                            <select id="section_section" class="form-select form-select-solid" data-control="select2" disabled> #}
                    {#                                {% for alan in alanlar %} #}
                    {#                                    <option value="{{ alan.id }}" {{ section.id == alan.id ? 'selected' }}>{{ alan.alias }}</option> #}
                    {#                                {% endfor %} #}
                    {#                            </select> #}
                    {#                        </div> #}
                    {#                    </div> #}
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="politics_tab_bilgi" role="tabpanel">
                            <div class="kt_docs_repeater_basic">
                                <div class="form-group mb-5">
                                    <div id="kt_docs_repeater_wrapper"
                                         data-repeater-list="childs{{ section.id|default }}">
                                        <input type="hidden" name="childs{{ section.id|default }}[sectionId]"
                                               value="{{ section.id|default }}">
                                        <input type="hidden"
                                               name="childs{{ section.id|default }}[isThereSectionCategory]"
                                               value="{{ section.isCategory ? 1 : 0 }}">
                                        {% for child in section.sections|filter(e => (e.isCategory == false or e.isCategory == null) and e.del == 0 ) %}
                                            {{ include('admin/Main/Politics/_form_section.html.twig', {category: false, section: section, child: child, idx: loop.index0}) }}
                                        {% else %}
                                            {{ include('admin/Main/Politics/_form_section.html.twig', {category: false, idx: 0}) }}
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="button-group p-0" id="interactiveButtonGroup">
                                    {{ include('admin/Common/_button_group.html.twig', {section: section}) }}
                                </div>
                            </div>
                        </div>
                        {% for section in sections %}
                            <div class="tab-pane fade" id="politics_tab_{{ section.id }}" role="tabpanel">
                                <div class="kt_docs_repeater_basic">
                                    <div class="form-group mb-5">
                                        <div id="kt_docs_repeater_wrapper"
                                             data-repeater-list="childs{{ section.id|default }}">
                                            <input type="hidden" name="childs{{ section.id|default }}[sectionId]"
                                                   value="{{ section.id|default }}">
                                            <input type="hidden"
                                                   name="childs{{ section.id|default }}[isThereSectionCategory]"
                                                   value="{{ section.isCategory ? 1 : 0 }}">

                                            {% for child in section.sectionSections|filter(e => e.del == 0) %}
                                                {{ include('admin/Main/Politics/_form_section.html.twig', {category: true, section: section, child: child, idx: loop.index0}) }}
                                            {% else %}
                                                {{ include('admin/Main/Politics/_form_section.html.twig', {category: true, idx: 0}) }}
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="button-group p-0" id="interactiveButtonGroup">
                                        {{ include('admin/Common/_button_group.html.twig', {section: section}) }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    {#                    <input type="hidden" name="redirect_url" value="{{ path('admin_politics_index') }}"> #}
                </form>
            </div>
        </div>
    </div>
    <template id="dropzoneItem">
        <div class="row align-items-center border-bottom-1 border-bottom-dashed border-gray-300 mx-0 py-3 dropzone-item">
            <div class="col-auto">
                <img src="" alt="" data-dz-thumbnail>
            </div>
            <div class="col">
                <div class="row align-items-center">
                    <div class="col-5">
                        <small class="text-muted">(<span data-dz-size>340kb</span>)</small>
                        <p class="text-truncate fw-medium mb-0" data-dz-name>no-image.png</p>
                    </div>
                    <div class="col-auto">
                        <i class="ki-duotone ki-cross-square align-middle fs-1 cursor-pointer" data-dz-remove>
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </div>
                    <div class="col-12">
                        <small class="d-block mt-3 text-danger" data-dz-errormessage></small>
                    </div>
                </div>
            </div>
        </div>
    </template>
{% endblock %}

{% block javascripts %}
    {#    <script src="{{ asset('assets/theme/plugins/custom/tinymce/tinymce.bundle.js') }}"></script> #}
    {#    <script src="{{ asset('assets/theme/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script> #}
    <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';

                let pattern = /_\d+_/;
                let allPatterns = /_\d+_/g; // <-- all matches
                let namePattern = /\[\d+\]/;

                parent.children('div[data-repeater-item], .dropzone-item').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 () {
                            console.log('this', $(this));

                            let index = $(this).parent().children('div[data-repeater-item]').index(this);
                            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]"]`);

                            console.log('imageIdInput', repeaterName, index);
                            // Ö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();
                            tinymce.init(options);
                            if ($lastDropzone.get(0) != null) {
                                dropzoneInitrz($lastDropzone);
                            }

                            // Changing the values of the sub-inputs of the photos when the image is added so that they do not overlap
                            if ($lastDropzone.get(0) != null) {
                                let dropzoneInput = $lastDropzone.get(0).dropzone;
                                // When photo is added
                                dropzoneInput.on("addedfile", function () {
                                    indexSorter($(dropzoneInput.element).find(".dropzone-items"), 'dropzoneContainer', false, true);
                                    // 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, true);

                                });
                            }

                        },
                        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
                            if (dropzoneElement) {
                                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 %}