{% extends 'system_base.html.twig' %}
{% block title %}Yeni Tedavi Detay Kontrol Öğesi{% endblock %}

{% block body %}
    {{ form_start(form) }}
        <div class="card shadow-sm mb-5">
            <div class="card-header">
                <h3 class="card-title">Yeni Tedavi Detay Kontrol Öğesi</h3>
                <div class="card-toolbar">
                    <div class="btn-group">
                        <a href="{{ path('app_system_ayarlar') }}" 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/ayarlar/TreatmentDetailsCheck/_form.html.twig') }}
            </div>
        </div>

        <div class="d-flex justify-content-between py-5">
            <a href="{{ path('app_system_ayarlar') }}" 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 %}