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

{% block body %}
    <form method="post">
        <div class="card shadow-sm mb-5">
            <div class="card-header">
                <h3 class="card-title">Yeni Analiz</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">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <label class="form-label required" for="flexCheckDefault">
                                Kodun nerede olacağını seçiniz
                            </label>
                            <select class="form-control mb-2 required"

                                    name="bolum">
                                <option value="1">Head</option>
                                <option value="2">Body üst</option>
                                <option value="3">Body alt</option>
                            </select></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Adı</label>
                        <input type="text" class="form-control mb-2"
                               name="baslik"
                               placeholder="Kodun adı:"/>
                    </div>
                    <div class="col-md-9 mb-10"></div>
                    <div class="col-md-12">
                        <label class="form-label required">Kod</label>
                        <textarea name="analiz" class="form-control mb-5 min-h-50px"></textarea>
                    </div>
                </div>
            </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>
{% 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 %}