{% extends 'system_base.html.twig' %}
{% block title %}Yeni Tedavi{% endblock %}

{% block body %}
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
    {% 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">Yeni Tedavi</h3>
            <div class="card-toolbar">
                <div class="btn-group">
                    <a href="{{ path('app_tedavi_index', {'code': entity.code}) }}" class="btn btn-sm btn-icon btn-light-success" rel="tooltip" title="Listeye Dön">
                        <i class="fa fa-list"></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 >#}
{#            {% for ozet in ozetler %}#}
{#            {% set ozetDil = ozet.diller|filter(d => d.dil.kisaBaslik == 'tr')|first %}#}
{#                <div  class="col-md-3 mb-5">#}
{#                    <div class="form-group">#}

{#                        <div class="input-group mb-3">#}
{#                        <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>#}

{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                {% endfor %}#}
{#            </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">#}
{#    #}{##}{#{{ form_widget(form.ozetler.vars.prototype.icon)|e }}#}{##}{##}
{#</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"></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 = -1;
        let newSoruCardLength = -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()
            });
        }

        const addFormToCollection = (e) => {
            const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
            const item = document.createElement('li');
            item.dataset.index = collectionHolder.dataset.index;

            let iconHtml = collectionHolder
                .dataset
                .prototypeIcon
                .replace(
                    /__name__/g,
                    collectionHolder.dataset.index
                );


            let dillerHtml = "";
            let dillerLength = {{ diller|length }};
            for (let i = 0; i < dillerLength; i++) {
                let replaceAt = {
                    '__name__': collectionHolder.dataset.index,
                    '__dilname__': i.toString(),
                    '__baslikname__': "0",
                }
                dillerHtml += collectionHolder
                    .dataset
                    .prototypeDiller
                    .replace(
                        /__name__|__dilname__|__baslikname__/g, m => replaceAt[m]
                    )
            }
            item.innerHTML = iconHtml + dillerHtml;

            let dilPrototype = item.querySelectorAll(".dil-prototype");
            for (const [key, prot] of dilPrototype.entries()) {
                const itemInserter = document.createElement('button');
                const itemInserterContent = document.createTextNode("Dil Ekle");
                itemInserter.type = "button";
                itemInserter.classList.add("add_item_link_dil");
                itemInserter.dataset.collectionHolderClass = "ozetDiller";
                itemInserter.appendChild(itemInserterContent);

                prot.dataset.index = key;
                prot.dataset.baslikIndex = "1";
                prot.appendChild(itemInserter);
            }

            let baslikPrototypes = item.querySelectorAll(".baslik-prototype");
            for (const prototype of baslikPrototypes) {
                prototype.dataset.index = "1";
                prototype.innerHTML = prototype.dataset.prototype;
            }

            collectionHolder.appendChild(item);
            collectionHolder.dataset.index++;

            addFormDilTrigger();
        };

        const addFormToCollectionDil = (e) => {
            const collectionFrom = e.currentTarget.closest("li");
            const collectionHolder = e.currentTarget.closest(".dil-prototype");
            const mainCollectionHolder = document.querySelector('.ozetler');
            let replaceAt = {
                '__name__': collectionFrom.dataset.index,
                '__dilname__': collectionHolder.dataset.index,
                '__baslikname__': collectionHolder.dataset.baslikIndex,
            }
            let prototype = mainCollectionHolder.dataset.prototypeDiller.replace(
                /__name__|__dilname__|__baslikname__/g, m => replaceAt[m]
            )

            const parser = new DOMParser();
            const protoTypeDiller = parser.parseFromString(prototype, "text/html");
            const protoTypeDillerBaslik = protoTypeDiller.querySelector(".baslik-prototype");
            protoTypeDillerBaslik.innerHTML = protoTypeDillerBaslik.dataset.prototype;

            const protoTypeDillerElements = protoTypeDiller.querySelector(".dil-prototype").children;
            for (const element of protoTypeDillerElements) {
                const elementClone = element.cloneNode(true);
                e.currentTarget.before(elementClone);
            }

            collectionHolder.dataset.baslikIndex++;
        };

        document
            .querySelectorAll('.add_item_link')
            .forEach(btn => {
                btn.addEventListener("click", addFormToCollection)
            });

        function addFormDilTrigger() {
            document
                .querySelectorAll('.add_item_link_dil')
                .forEach(btn => {
                    btn.addEventListener("click", addFormToCollectionDil)
                });
        }
    </script>
     <script type="text/javascript">
        $(document).ready(function () {
            $('#kt_docs_repeater_basic').repeater({
                initEmpty: false,
                defaultValues: {
                    'text-input': 'foo'
                },
                show: function () {
                    $(this).slideDown();
                    Project.telefonMask();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        });
    </script>
{% endblock %}