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

{% block body %}
    {{ form_start(form) }}
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Yeni Sayfa</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 class="card-toolbar">
                <div class="btn-group">
                    <a href="{{ path('app_sayfa_index') }}" 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">
            <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 }}">
                        {{ include('system/sayfa/_form_dil.html.twig') }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-between py-5">
        <a href="{{ path('app_sayfa_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>
        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 elementReportValidity(targetlink, targetField) {
            targetlink.on('shown.bs.tab', () => {
                targetField.reportValidity()
            });
        }
    </script>
{% endblock %}