{% extends 'system_base.html.twig' %}
{% block title %}Tedavi Güncelle{% endblock %}

{% block body %}
    {{ form_start(form) }}
    {% set dillerJson = [] %}
    {% for dil in diller|filter(e => e.Enabled == 1) %}
        {% set dillerJson = dillerJson|merge([{'kisaBaslik': dil.kisaBaslik}]) %}
    {% endfor %}
    {% set ozetDilFormContents = [] %}
    {% set soruDilFormContents = [] %}
    {% for dil in form.diller %}
        {% set ozetContent = include('system/tedavi/ozet_dil_repeater.html.twig') %}
        {% set soruContent = include('system/tedavi/soru_dil_repeater.html.twig') %}
        {% set ozetDilFormContents = ozetDilFormContents|merge([{'dil': dil.vars.value.dil.kisaBaslik,'content': ozetContent}]) %}
        {% set soruDilFormContents = soruDilFormContents|merge([{'dil': dil.vars.value.dil.kisaBaslik,'content': soruContent}]) %}
    {% endfor %}
    <input type="hidden" value="{{ dillerJson|json_encode }}" name="diller_json" id="dillerJson">
    <input type="hidden" value="{{ ozetDilFormContents|json_encode }}" name="ozet_dil_form_contents" id="ozetDilFormContents">
    <input type="hidden" value="{{ soruDilFormContents|json_encode }}" name="soru_dil_form_contents" id="soruDilFormContents">
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Tedavi Güncelle</h3>
            <div class="card-toolbar">
                <div class="btn-group">
                    <a href="{{ path('app_tedavi_index') }}" class="btn btn-sm btn-icon btn-light-success" rel="tooltip"
                       title="Listeye Dön">
                        <i class="fa fa-list"></i>
                    </a>
                    <a href="{{ path('app_tedavi_show', {'code': entity.code}) }}"
                       class="btn btn-sm btn-icon btn-light-primary" rel="tooltip" title="Sayfaya Dön">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            {{ include('system/tedavi/_form.html.twig') }}
{#          <div class="mb-5 mt-10">#}
{#        <h3 class="card-title">Özetler</h3>#}
{#        <div class="form-group mt-5">#}
{#            <div class="row">#}
{#      {% if entity.tedaviPivot %}#}
{#        {% set usedOzetIds = [] %}#}
{#        {% for pivot in entity.tedaviPivot %}#}
{#          {% set ozetsDil = pivot.ozet.diller|filter(d => d.dil.kisaBaslik == 'tr')|first %}#}
{#          {% set ozet = pivot.ozet %}#}
{#          {% set ozetId = ozet.id %}#}
{#          {% set usedOzetIds = usedOzetIds|merge([ozetId]) %}#}
{#          <div class="col-md-6 mb-5">#}
{#            <div class="form-group">#}
{#                <div class="input-group mb-3 justify-content-between">#}
{#                    <label class="form-check form-check-inline form-check-solid me-5">#}
{#                        <input type="checkbox" id="ozet{{ loop.index }}" name="ozet[{{ loop.index }}][ozet]" class="form-check-input" value="{{ ozetId }}" checked>#}
{#                        <span class="fw-bold ps-2 fs-6">{{ ozetsDil.baslik[0]|default('Başlık Yok') }}</span>#}
{#                    </label>#}
{#                    <label class="badge badge-success ms-2">Seçilmiş Öge</label>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        {% endfor %}#}

{#    {% for ozet in ozetler %}#}
{#        {% set ozetDil = ozet.diller|filter(d => d.dil.kisaBaslik == 'tr')|first %}#}
{#        {% if ozet.id not in usedOzetIds %}#}
{#          <div class="col-md-6 mb-5">#}
{#                <div class="form-group">#}
{#                    <div class="input-group mb-3 justify-content-between">#}
{#                        <label class="form-check form-check-inline form-check-solid me-5">#}
{#                            <input type="checkbox" id="ozet{{ loop.index }}" name="ozet[{{ loop.index }}][ozet]" class="form-check-input" value="{{ ozet.id }}"  checked>#}
{#                            <span class="fw-bold ps-2 fs-6">{{ ozetDil.baslik[0]|default('Başlık Yok') }}</span>#}
{#                        </label>#}
{#                        <label class="badge badge-light-warning ms-2">Yeni Öge</label>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        {% endif %}#}
{#      {% endfor %}#}
{#{% else %}#}
{#        {% for ozet in ozetler %}#}
{#          {% set ozetDil = ozet.diller|filter(d => d.dil.kisaBaslik == 'tr')|first %}#}
{#          <div class="col-md-6 mb-5">#}
{#            <div class="form-group">#}
{#                <div class="input-group mb-3 justify-content-between">#}
{#                    <label class="form-check form-check-inline form-check-solid me-5">#}
{#                        <input type="checkbox" id="ozet{{ loop.index }}" name="ozet[{{ loop.index }}][ozet]" class="form-check-input" value="{{ ozet.id }}">#}
{#                        <span class="fw-bold ps-2 fs-6">{{ ozetDil.baslik[0]|default('Başlık Yok') }}</span>#}
{#                    </label>#}
{#                    <label class="badge badge-light-warning ms-2">Yeni Öge</label>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        {% endfor %}#}
{#      {% endif %}#}



{#            </div>#}
{#        </div>#}
{#            #}{#        <div class="form-group mt-5">#}
{#            #}{#            <a href="javascript:;" data-repeater-create class="btn btn-sm btn-light-primary">#}
{#            #}{#                <i class="la la-plus"></i> Özet Ekle#}
{#            #}{#            </a>#}
{#            #}{#        </div>#}
{#    </div>#}
        </div>
    </div>
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Diller</h3>
            <div class="card-toolbar me-auto">
                <div class="w-2px h-20px ms-5 bg-primary"></div>
                <ul class="nav">
                    {% for dil in diller|filter(e => e.Enabled == 1) %}
                        <li class="nav-item">
                            <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}"
                               id="nav_dil_{{ loop.index }}" data-bs-toggle="tab" data-bs-target="#tab_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                {% for dil in form.diller %}
                    <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}"
                         id="tab_dil_{{ loop.index }}">
                        {% set locale = dil.vars.name %}
                        {{ include('system/tedavi/dil_form.html.twig', { locale: diller[locale].kisaBaslik }) }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{#    #}{#<div class="card shadow-sm mb-5" id="cardOzetler">#}
{#        <div class="card-header">#}
{#            <h3 class="card-title">Özetler</h3>#}
{#            <div class="card-toolbar">#}
{#                <button type="button" class="btn btn-sm btn-icon btn-light-success" rel="tooltip" title="Yeni Özet" onclick="yeniFormOzet()">#}
{#                    <i class="fa fa-plus"></i>#}
{#                </button>#}
{#            </div>#}
{#        </div>#}
{#        <div class="card-body p-0">#}
{#            {% for ozet in entity.ozetler %}#}
{#                {% set ozetIdx = loop.index0 %}#}
{#                <div class="card rounded-0 shadow-none border-0 bg-lighten card-ozet" data-id="{{ loop.index0 }}">#}
{#                    <div class="card-header-content position-relative">#}
{#                        <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#cardOzetCollapsible_{{ loop.index0 }}">#}
{#                            <div class="card-toolbar rotate-90">#}
{#                                <i class="fa fa-chevron-right"></i>#}
{#                            </div>#}
{#                            <h3 class="ms-3 me-auto card-title">Yeni Özet</h3>#}
{#                        </div>#}
{#                        <div class="d-none h-100 align-items-center position-absolute top-0 card-lang">#}
{#                            <div class="w-2px h-20px bg-primary"></div>#}
{#                            <ul class="nav">#}
{#                                {% for dil in diller|filter(e => e.Enabled == 1) %}#}
{#                                    <li class="nav-item" data-dil="{{ dil.kisaBaslik }}">#}
{#                                        <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}"#}
{#                                        id="nav_ozet_{{ ozetIdx }}_dil_{{ loop.index }}" data-bs-toggle="tab" data-bs-target="#tab_ozet_{{ ozetIdx }}_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>#}
{#                                    </li>#}
{#                                {% endfor %}#}
{#                            </ul>#}
{#                        </div>#}
{#                        <div class="d-none h-100 align-items-center position-absolute top-0 card-delete">#}
{#                            <button type="button" class="btn btn-sm btn-icon btn-light-danger" rel="tooltip" title="Özet Sil" onclick="removeFormOzet(this.closest('.card-ozet').dataset.id)">#}
{#                                <i class="fa fa-trash"></i>#}
{#                            </button>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div id="cardOzetCollapsible_{{ ozetIdx }}" class="collapse show collapsible-card">#}
{#                        <div class="card-body">#}
{#                            <div class="tab-content">#}
{#                                {% for dil in form.diller %}#}
{#                                <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="tab_ozet_{{ ozetIdx }}_dil_{{ loop.index }}" data-dil="{{ dil.vars.value.dil.kisaBaslik }}">#}
{#                                    <div class="kt_repeater_ozet mb-5" id="ozetRepeater_{{ loop.index }}">#}
{#                                        <div class="form-group">#}
{#                                            <div data-repeater-list="ozetler[{{ ozetIdx }}][diller][{{ dil.vars.value.dil.kisaBaslik }}]" class="row">#}
{#                                                {{ include('system/tedavi/ozet_dil_repeater.html.twig') }}#}
{#                                            </div>#}
{#                                        </div>#}
{#                                        <div class="form-group">#}
{#                                            <a href="javascript:void(0);" data-repeater-create class="btn btn-sm btn-light-primary">#}
{#                                                <i class="la la-plus"></i>Özet Ekle#}
{#                                            </a>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </div>#}
{#                                {% endfor %}#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            {% endfor %}#}
{#        </div>#}
{#    </div>#}
{#    <div class="card shadow-sm mb-5" id="cardSorular">#}
{#        <div class="card-header">#}
{#            <h3 class="card-title">Sorular</h3>#}
{#            <div class="card-toolbar">#}
{#                <button type="button" class="btn btn-sm btn-icon btn-light-success" rel="tooltip" title="Yeni Soru" onclick="yeniFormSoru()">#}
{#                    <i class="fa fa-plus"></i>#}
{#                </button>#}
{#            </div>#}
{#        </div>#}
{#        <div class="card-body p-0">#}
{#            {% for soru in entity.sorular %}#}
{#                {% set soruIdx = loop.index0 %}#}
{#                <div class="card rounded-0 shadow-none border-0 bg-lighten card-soru" data-id="{{ soruIdx }}">#}
{#                    <div class="card-header-content position-relative">#}
{#                        <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#cardSoruCollapsible_{{ soruIdx }}">#}
{#                            <div class="card-toolbar rotate-90">#}
{#                                <i class="fa fa-chevron-right"></i>#}
{#                            </div>#}
{#                            <h3 class="ms-3 me-auto card-title">Yeni Soru</h3>#}
{#                        </div>#}
{#                        <div class="d-none h-100 align-items-center position-absolute top-0 card-lang">#}
{#                            <div class="w-2px h-20px bg-primary"></div>#}
{#                            <ul class="nav">#}
{#                                {% for dil in diller|filter(e => e.Enabled == 1) %}#}
{#                                    <li class="nav-item">#}
{#                                        <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}"#}
{#                                           id="nav_soru_{{ soruIdx }}_dil_{{ loop.index }}" data-bs-toggle="tab" data-bs-target="#tab_soru_{{ soruIdx }}_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>#}
{#                                    </li>#}
{#                                {% endfor %}#}
{#                            </ul>#}
{#                        </div>#}
{#                        <div class="d-none h-100 align-items-center position-absolute top-0 card-delete">#}
{#                            <button type="button" class="btn btn-sm btn-icon btn-light-danger" rel="tooltip" title="Soru Sil" onclick="removeFormSoru(this.closest('.card-soru').dataset.id)">#}
{#                                <i class="fa fa-trash"></i>#}
{#                            </button>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div id="cardSoruCollapsible_{{ soruIdx }}" class="collapse show collapsible-card">#}
{#                        <div class="card-body">#}
{#                            <div class="tab-content">#}
{#                                {% for dil in form.diller %}#}
{#                                    <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="tab_soru_{{ soruIdx }}_dil_{{ loop.index }}" data-dil="{{ dil.vars.value.dil.kisaBaslik }}">#}
{#                                        <div class="kt_repeater_soru mb-5" id="soruRepeater_{{ loop.index }}">#}
{#                                            <div class="form-group">#}
{#                                                <div data-repeater-list="sorular[{{ soruIdx }}][diller][{{ dil.vars.value.dil.kisaBaslik }}]" class="row">#}
{#                                                    {{ include('system/tedavi/soru_dil_repeater.html.twig') }}#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <div class="form-group">#}
{#                                                <a href="javascript:void(0);" data-repeater-create class="btn btn-sm btn-light-primary">#}
{#                                                    <i class="la la-plus"></i>Soru Ekle#}
{#                                                </a>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                {% endfor %}#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            {% endfor %}#}
{#        </div>#}
{#    </div>#}
    <div class="d-flex justify-content-between py-5">
        <a href="{{ path('app_tedavi_index') }}" class="btn btn-sm btn-secondary" rel="tooltip" title="Listeye Dön">
            <i class="fa fa-chevron-left"></i> Geri
        </a>
        <button type="button" class="btn btn-sm btn-success" onclick="formValidation(this.closest('form'))">
            <i class="fa fa-check"></i> Kaydet
        </button>
    </div>
    {{ form_end(form) }}
{% endblock %}

{% block js %}
    <script src="{{ asset('assets/system/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script>
        let newCardLength = {{ entity.ozetler|length }} - 1;
        let newSoruCardLength = {{ entity.sorular|length }} - 1;
        $(document).ready(function () {
            ozetRepeaterInit();
            soruRepeaterInit();
            cardLangPosition();
            triggerCollapsibleEvent();
        });

        function formValidation(form) {
            let formSubmit = true;
            for (const field of form.elements) {
                if (field.checkValidity() === false) {
                    console.log(field);
                    formSubmit = false;
                    let targetTab = field.closest(".tab-pane:not(.show)");
                    let targetCollapsibleCard = field.closest(".collapsible-card:not(.show)");
                    console.log(targetTab);
                    console.log(targetCollapsibleCard);
                    if (targetCollapsibleCard) {
                        $(targetCollapsibleCard).collapse("show");
                    }
                    if (targetTab) {
                        console.log(targetTab.id);
                        //let targetTabIdx = targetTab.id.split("_").pop();
                        //let $targetBtn = $("#nav_dil_"+targetTabIdx);
                        let $targetBtn = $('.nav-link[data-bs-target="#'+targetTab.id+'"]');
                        elementReportValidity($targetBtn, field);
                        $targetBtn.get(0).click();

                    } else {
                        field.reportValidity();
                    }
                    break
                }
            }
            if (formSubmit === true) {form.submit()}
        }

        function yeniFormOzet() {
            newCardLength++;
            console.log("Yeni", newCardLength);
            let dillerJsonVal = JSON.parse($("#dillerJson").val());
            let langNode = ``;
            for (const [key, val] of dillerJsonVal.entries()) {
                langNode += `<li class="nav-item" data-dil="${val.kisaBaslik}">
                            <a class="nav-link text-uppercase text-muted text-active-primary ${key === 0 ? "active" : ""}"
                               id="nav_ozet_${newCardLength}_dil_${key+1}" data-bs-toggle="tab" data-bs-target="#tab_ozet_${newCardLength}_dil_${key+1}">${val.kisaBaslik}</a>
                        </li>`;
            }

            let ozetDilFormNode = ``;
            let ozetDilFormContentsVal = JSON.parse($("#ozetDilFormContents").val());
            for (const [key, val] of ozetDilFormContentsVal.entries()) {
                ozetDilFormNode += `<div class="tab-pane fade ${key === 0 ? "show active" : ""}" id="tab_ozet_${newCardLength}_dil_${key+1}" data-dil="${val.dil}">
                <div class="kt_repeater_ozet mb-5" id="ozetRepeater_${key+1}">
                    <div class="form-group">
                        <div data-repeater-list="ozetler[${newCardLength}][diller][${val.dil}]" class="row">${val.content}</div>
                    </div>
                    <div class="form-group">
                        <a href="javascript:void(0);" data-repeater-create class="btn btn-sm btn-light-primary">
                            <i class="la la-plus"></i>Özet Ekle
                        </a>
                    </div>
                </div>
            </div>`;
            }

            const cardNode = `<div class="card rounded-0 shadow-none border-0 bg-lighten card-ozet" data-id="${newCardLength}">
            <div class="card-header-content position-relative">
                <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#cardOzetCollapsible_${newCardLength}">
                    <div class="card-toolbar rotate-90">
                        <i class="fa fa-chevron-right"></i>
                    </div>
                    <h3 class="ms-3 me-auto card-title">Yeni Özet</h3>
                </div>
                <div class="d-none h-100 align-items-center position-absolute top-0 card-lang">
                    <div class="w-2px h-20px bg-primary"></div>
                    <ul class="nav">${langNode}</ul>
                </div>
                <div class="d-none h-100 align-items-center position-absolute top-0 card-delete">
                    <button type="button" class="btn btn-sm btn-icon btn-light-danger" rel="tooltip" title="Özet Sil" onclick="removeFormOzet(this.closest('.card-ozet').dataset.id)">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
            <div id="cardOzetCollapsible_${newCardLength}" class="collapse show collapsible-card">
                <div class="card-body">
                    <div class="tab-content">${ozetDilFormNode}</div>
                </div>
            </div>
        </div>`;

            $("#cardOzetler > .card-body").append(cardNode);

            ozetRepeaterInit();
            cardLangPosition();
            triggerCollapsibleEvent();
            ozetCardsAutoCollapse();
        }

        function removeFormOzet(id) {
            let $card = $(".card-ozet[data-id="+id+"]");
            $card.remove();
            newCardLength--;
            console.log("Sil", newCardLength);
            ozetCardsKeyResorter();
        }

        function yeniFormSoru() {
            newSoruCardLength++;
            console.log(newSoruCardLength);
            let dillerJsonVal = JSON.parse($("#dillerJson").val());
            let langNode = ``;
            for (const [key, val] of dillerJsonVal.entries()) {
                langNode += `<li class="nav-item">
                            <a class="nav-link text-uppercase text-muted text-active-primary ${key === 0 ? "active" : ""}"
                               id="nav_soru_${newSoruCardLength}_dil_${key+1}" data-bs-toggle="tab" data-bs-target="#tab_soru_${newSoruCardLength}_dil_${key+1}">${val.kisaBaslik}</a>
                        </li>`;
            }

            let soruDilFormNode = ``;
            let soruDilFormContentsVal = JSON.parse($("#soruDilFormContents").val());
            for (const [key, val] of soruDilFormContentsVal.entries()) {
                soruDilFormNode += `<div class="tab-pane fade ${key === 0 ? "show active" : ""}" id="tab_soru_${newSoruCardLength}_dil_${key+1}" data-dil="${val.dil}">
                <div class="kt_repeater_soru mb-5" id="soruRepeater_${key+1}">
                    <div class="form-group">
                        <div data-repeater-list="sorular[${newSoruCardLength}][diller][${val.dil}]" class="row">${val.content}</div>
                    </div>
                    <div class="form-group">
                        <a href="javascript:void(0);" data-repeater-create class="btn btn-sm btn-light-primary">
                            <i class="la la-plus"></i>Soru Ekle
                        </a>
                    </div>
                </div>
            </div>`;
            }

            const cardNode = `<div class="card rounded-0 shadow-none border-0 bg-lighten card-soru" data-id="${newSoruCardLength}">
            <div class="card-header-content position-relative">
                <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#cardSoruCollapsible_${newSoruCardLength}">
                    <div class="card-toolbar rotate-90">
                        <i class="fa fa-chevron-right"></i>
                    </div>
                    <h3 class="ms-3 me-auto card-title">Yeni Soru</h3>
                </div>
                <div class="d-none h-100 align-items-center position-absolute top-0 card-lang">
                    <div class="w-2px h-20px bg-primary"></div>
                    <ul class="nav">${langNode}</ul>
                </div>
                <div class="d-none h-100 align-items-center position-absolute top-0 card-delete">
                    <button type="button" class="btn btn-sm btn-icon btn-light-danger" rel="tooltip" title="Soru Sil" onclick="removeFormSoru(this.closest('.card-soru').dataset.id)">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
            <div id="cardSoruCollapsible_${newSoruCardLength}" class="collapse show collapsible-card">
                <div class="card-body">
                    <div class="tab-content">${soruDilFormNode}</div>
                </div>
            </div>
        </div>`;

            $("#cardSorular > .card-body").append(cardNode);

            soruRepeaterInit();
            cardLangPosition();
            triggerCollapsibleEvent();
            ozetCardsAutoCollapse();
        }

        function removeFormSoru(id) {
            let $card = $(".card-soru[data-id="+id+"]");
            $card.remove();
            newSoruCardLength--;
            ozetCardsKeyResorter();
        }

        function cardLangPosition() {
            $("#cardOzetler .card-ozet").each(function () {
                let $cardHeader = $(this).find(".card-header");
                let $cardTitle = $(this).find(".card-title");
                let headerBound = $cardHeader.get(0).getBoundingClientRect();
                let titleBound = $cardTitle.get(0).getBoundingClientRect();
                let titleOuterWidthMr = $cardTitle.outerWidth();
                let boundDiff = titleBound.left - headerBound.left;
                let leftMargin = 15;
                let leftValue = Math.round(boundDiff + titleOuterWidthMr + leftMargin);
                let btnDelrightValue = $cardHeader.css("padding-right");
                $(this).find(".card-lang").css("left", leftValue).removeClass("d-none").addClass("d-flex");
                $(this).find(".card-delete").css("right", btnDelrightValue).removeClass("d-none").addClass("d-flex");
            });
            $("#cardSorular .card-soru").each(function () {
                let $cardHeader = $(this).find(".card-header");
                let $cardTitle = $(this).find(".card-title");
                let headerBound = $cardHeader.get(0).getBoundingClientRect();
                let titleBound = $cardTitle.get(0).getBoundingClientRect();
                let titleOuterWidthMr = $cardTitle.outerWidth();
                let boundDiff = titleBound.left - headerBound.left;
                let leftMargin = 15;
                let leftValue = Math.round(boundDiff + titleOuterWidthMr + leftMargin);
                let btnDelrightValue = $cardHeader.css("padding-right");
                $(this).find(".card-lang").css("left", leftValue).removeClass("d-none").addClass("d-flex");
                $(this).find(".card-delete").css("right", btnDelrightValue).removeClass("d-none").addClass("d-flex");
            });
        }

        function ozetRepeaterInit() {
            $('.kt_repeater_ozet').repeater({
                initEmpty: false,
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        }

        function soruRepeaterInit() {
            $('.kt_repeater_soru').repeater({
                initEmpty: false,
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        }

        function triggerCollapsibleEvent() {
            $(".collapsible-card").on({
                "hide.bs.collapse": event => {
                    let target = event.delegateTarget;
                    $(target).parent(".card").removeClass("bg-lighten");
                },
                "show.bs.collapse": event => {
                    let target = event.delegateTarget;
                    $(target).parent(".card").addClass("bg-lighten");
                }
            })
        }

        function ozetCardsKeyResorter() {
            $("#cardOzetler .card-ozet").each(function (key) {
                $(this).attr("data-id", key);
                $(this).find('[data-bs-toggle="collapse"]').attr("data-bs-target", "#cardOzetCollapsible_"+key);
                $(this).find('.nav-link').each(function (key) {
                    $(this).attr({
                        "id": "nav_ozet_"+key+"_dil_"+(key+1),
                        "data-bs-target": "#tab_ozet_"+key+"_dil_"+(key+1)
                    });
                });
                $(this).find('.collapsible-card').attr("id", "cardOzetCollapsible_"+key);
                $(this).find(".tab-pane").attr("id", "tab_ozet_"+key+"_dil_1").each(function () {
                    $(this).find(".row[data-repeater-list]").attr("data-repeater-list", "ozetler["+key+"][diller]["+$(this).data("dil")+"]");
                });
                console.log($(this).find(".kt_repeater_ozet"), key);
                $(this).find(".kt_repeater_ozet").attr("id", "ozetRepeater_"+key);
                $(this).find(".card-footer input").attr("name", function (i, val) {
                    return val.replace(/\[\d+]/, "["+key+"]");
                });
            });
            $("#cardSorular .card-soru").each(function (key) {
                $(this).find(".tab-pane").each(function () {
                    $(this).find(".row[data-repeater-list]").attr("data-repeater-list", "ozetler["+key+"][diller]["+$(this).data("dil")+"]");
                });
            });
        }

        function ozetCardsAutoCollapse() {
            $("#cardOzetler .card-ozet").each(function (key) {
                $(this).find(".nav-link[data-bs-toggle='tab']").on('show.bs.tab', () => {
                    let $collapsibleCard = $("#cardOzetCollapsible_"+key);
                    if (!$collapsibleCard.hasClass("show")) {
                        $collapsibleCard.collapse("show");
                    }
                });
            });
            $("#cardSorular .card-soru").each(function (key) {
                $(this).find(".nav-link[data-bs-toggle='tab']").on('show.bs.tab', () => {
                    let $collapsibleCard = $("#cardSoruCollapsible_"+key);
                    if (!$collapsibleCard.hasClass("show")) {
                        $collapsibleCard.collapse("show");
                    }
                });
            });
        }

        function elementReportValidity(targetlink, targetField) {
            targetlink.on('shown.bs.tab', () => {
                targetField.reportValidity()
            });
        }
    </script>
{% endblock %}