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

{% block body %}
    {{ form_start(form) }}
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Video Güncelle</h3>
            <div class="card-toolbar">
                <a href="{{ path('app_video_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 class="card-body">
            {{ include('system/video/_form.html.twig') }}
        </div>
    </div>
    <div class="d-flex justify-content-between py-5">
        <a href="{{ path('app_video_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 %}