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

{% set resimBoyut = [400,400] %}
{% set resimLimit = 1 %}


{% block body %}
    {{ form_start(form) }}
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Profil</h3>
            <div class="card-toolbar">
                <button type="button" class="btn btn-sm btn-light-dark">Max. Boyut: {{ resimBoyut[0]~'x'~resimBoyut[1] }}</button>
            </div>
        </div>
        <div class="card-body">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <div class="dropzone dropzone-queue mb-2" id="dropzone_main_resim">
                            <div class="dropzone-panel mb-lg-0 mb-2">
                                <div class="dropzone dz-clickable dropzone-select">
                                    <div class="dz-message needsclick d-flex">
                                        <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
                                        <div class="ms-4">
                                            <h3 class="fs-7 fw-bolder text-gray-900 mb-1">Dosyaları buraya bırakın veya yüklemek için tıklayın.</h3>
                                            <span class="fs-7 fw-bold text-primary opacity-75">{{ resimLimit }} dosyaya kadar yükleyebilirsiniz</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropzone-items wm-200px">
                                <div class="dropzone-item" style="display:none">
                                    <div class="dropzone-file">
                                        <div class="dropzone-filename" title="some_image_file_name.jpg">
                                            <span data-dz-name>some_image_file_name.jpg</span>
                                            <strong>(<span data-dz-size>340kb</span>)</strong>
                                        </div>
                                        <div class="dropzone-error" data-dz-errormessage></div>
                                    </div>
                                    <div class="dropzone-progress">
                                        <div class="progress">
                                            <div class="progress-bar bg-primary" role="progressbar"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100" aria-valuenow="0"
                                                 data-dz-uploadprogress></div>
                                        </div>
                                    </div>
                                    <div class="dropzone-toolbar">
                                        <span class="dropzone-delete" data-dz-remove>
                                            <i class="bi bi-x fs-1"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <table class="table table-rounded table-striped border gy-7 gs-7">
                <thead>
                <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                    <th class="w-1px"></th>
                    <th>Resim</th>
                    <th>Düzenleme Tarihi</th>
                    <th class="text-end">İşlem</th>
                </tr>
                </thead>
                <tbody id="resim_tbody" class="draggable-zone"></tbody>
            </table>
        </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/user/profile_dil_form.html.twig', { locale: diller[locale].kisaBaslik }) }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="card shadow-sm mb-5">
        <div class="card-header">
            <h3 class="card-title">Sosyal Medya</h3>
        </div>
        <div class="card-body">
            <!--begin::Repeater-->
            <div id="kt_docs_repeater_basic">
                <!--begin::Form group-->
                <div class="form-group">
                    <div data-repeater-list="sosyal_medya">
                        <div data-repeater-item>
                            <div class="form-group row mb-3">
                                <div class="col-auto">
                                    <label>
                                        <select name="tip" class="form-select">
                                            <option value="">Seçiniz</option>
                                            <option value="facebook">Facebook</option>
                                            <option value="instagram">Instagram</option>
                                            <option value="linkedin">LinkedIn</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="col-md-5">
                                    <label class="w-100">
                                        <input type="text" name="link" class="form-control" placeholder="Link" />
                                    </label>
                                </div>
                                <div class="col">
                                    <a href="javascript:void(0)" data-repeater-delete class="btn btn-light-danger">
                                        <i class="la la-trash-o"></i> Sil
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Form group-->
                <!--begin::Form group-->
                <div class="form-group mt-5">
                    <a href="javascript:void(0)" data-repeater-create class="btn btn-light-primary">
                        <i class="la la-plus"></i> Ekle
                    </a>
                </div>
                <!--end::Form group-->
            </div>
            <!--end::Repeater-->
        </div>
    </div>

    <div class="d-flex justify-content-end py-5">
        <button type="submit" 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 src="{{ asset('assets/system/plugins/custom/fslightbox/fslightbox.bundle.js') }}"></script>
    <script>
        {% set repeaterData = profile.sosyalMedyalar %}
        let repeaterData = JSON.parse('{{ repeaterData|json_encode|e('js') }}');
        const repeater = $('#kt_docs_repeater_basic').repeater({
            initEmpty: true,
            show: function () {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            }
        });
        repeater.setList(repeaterData);

        function formValidation(form) {
            let formSubmit = true;
            console.log(form.elements);
            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()}
        }

    </script>
    <script src="{{ asset('assets/system/plugins/custom/cropper/cropper.bundle.js') }}"></script>
    <script src="{{ asset('assets/system/plugins/custom/fslightbox/fslightbox.bundle.js') }}"></script>
    <script type="text/javascript">
        let dropzoneMainIDResim = 'dropzone_main_resim';
        let dropzoneContainerIDResim = 'resim_tbody';
        let dropzoneMaxUploadResim = {{ resimLimit }};
        let dropzoneListPathResim = '{{ path('app_profile_resim') }}';
        let dropzoneUploadPathResim = '{{ path('app_profile_resim_upload') }}';
        let cropperPathResim = '{{ path('app_profile_resim_upload', {'cropperCode':'CROPPERCODE'}) }}';

        $(document).ready(function () {
            Project.dropzoneList(false, dropzoneContainerIDResim, dropzoneListPathResim);
            Project.dropzoneCropper(dropzoneMainIDResim, dropzoneContainerIDResim, dropzoneMaxUploadResim, dropzoneListPathResim, dropzoneUploadPathResim, cropperPathResim, 'max', {{ resimBoyut[0] }}, {{ resimBoyut[1] }});
        });
    </script>


{% endblock %}