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

{% set popupResimBoyut = [1920,1080] %}
{% set popupResimLimit = 5 - popupResimler|length %}

{% block body %}
    <div class="card card-flush shadow-sm bgi-position-y-center bgi-no-repeat mb-10" style="background-size: auto calc(100% + 10rem); background-position-x: 100%; background-image: url('{{ asset('assets/system/media/illustrations/sketchy-1/9.png') }}')">
        <div class="card-header pt-10">
            <div class="d-flex align-items-center">
                <div class="symbol symbol-circle me-5">
                    <div class="symbol-label bg-transparent text-primary border border-secondary border-dashed">
                        <span class="svg-icon svg-icon-2x svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path opacity="0.3" d="M22.1 11.5V12.6C22.1 13.2 21.7 13.6 21.2 13.7L19.9 13.9C19.7 14.7 19.4 15.5 18.9 16.2L19.7 17.2999C20 17.6999 20 18.3999 19.6 18.7999L18.8 19.6C18.4 20 17.8 20 17.3 19.7L16.2 18.9C15.5 19.3 14.7 19.7 13.9 19.9L13.7 21.2C13.6 21.7 13.1 22.1 12.6 22.1H11.5C10.9 22.1 10.5 21.7 10.4 21.2L10.2 19.9C9.4 19.7 8.6 19.4 7.9 18.9L6.8 19.7C6.4 20 5.7 20 5.3 19.6L4.5 18.7999C4.1 18.3999 4.1 17.7999 4.4 17.2999L5.2 16.2C4.8 15.5 4.4 14.7 4.2 13.9L2.9 13.7C2.4 13.6 2 13.1 2 12.6V11.5C2 10.9 2.4 10.5 2.9 10.4L4.2 10.2C4.4 9.39995 4.7 8.60002 5.2 7.90002L4.4 6.79993C4.1 6.39993 4.1 5.69993 4.5 5.29993L5.3 4.5C5.7 4.1 6.3 4.10002 6.8 4.40002L7.9 5.19995C8.6 4.79995 9.4 4.39995 10.2 4.19995L10.4 2.90002C10.5 2.40002 11 2 11.5 2H12.6C13.2 2 13.6 2.40002 13.7 2.90002L13.9 4.19995C14.7 4.39995 15.5 4.69995 16.2 5.19995L17.3 4.40002C17.7 4.10002 18.4 4.1 18.8 4.5L19.6 5.29993C20 5.69993 20 6.29993 19.7 6.79993L18.9 7.90002C19.3 8.60002 19.7 9.39995 19.9 10.2L21.2 10.4C21.7 10.5 22.1 11 22.1 11.5ZM12.1 8.59998C10.2 8.59998 8.6 10.2 8.6 12.1C8.6 14 10.2 15.6 12.1 15.6C14 15.6 15.6 14 15.6 12.1C15.6 10.2 14 8.59998 12.1 8.59998Z" fill="black"/>
                                <path d="M17.1 12.1C17.1 14.9 14.9 17.1 12.1 17.1C9.30001 17.1 7.10001 14.9 7.10001 12.1C7.10001 9.29998 9.30001 7.09998 12.1 7.09998C14.9 7.09998 17.1 9.29998 17.1 12.1ZM12.1 10.1C11 10.1 10.1 11 10.1 12.1C10.1 13.2 11 14.1 12.1 14.1C13.2 14.1 14.1 13.2 14.1 12.1C14.1 11 13.2 10.1 12.1 10.1Z" fill="black"/>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="d-flex flex-column">
                    <h2 class="mb-3">Ayarlar</h2>
                    <div class="text-muted">
                        <span>Son Güncelleme : {{ ayarlar.updateDate is defined ? ayarlar.updateDate|date('d-m-Y H:i:s') : '' }}</span>
                        <br>
                        <span>Son Güncelleyen : {{ ayarlar.updateUser.email|default }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body pb-0">
        </div>
    </div>
    <div class="card shadow-sm mb-10">
        <div class="card-body">
            {{ include('system/ayarlar/_form.html.twig') }}
        </div>
    </div>
    <div class="card shadow-sm">
        <div class="card-header">
            <h3 class="card-title">Diller</h3>
            {#
            <div class="card-toolbar">
                <div class="btn-group">
                    <a href="{{ path('app_dil_new') }}" class="btn btn-sm btn-icon btn-light-success" rel="tooltip" title="Yeni Ekle">
                        <i class="fa fa-plus"></i>
                    </a>
                </div>
            </div>
            #}
        </div>
        <div class="card-body">
            <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>Başlık</th>
                    <th>Kısa Başlık</th>
                    <th class="text-end">İşlemler</th>
                </tr>
                </thead>
                <tbody>
                {% for dil in diller %}
                    <tr id="recordsArray_{{ dil.code }}">
                        <td>{{ include('system/default/sirala_icon.html.twig') }}</td>
                        <td>{{ dil.baslik }}</td>
                        <td>{{ dil.kisaBaslik }}</td>
                        <td class="text-end">
                            <div class="btn-group">
                                <a href="{{ path('app_dil_edit', {'code': dil.code}) }}" class="btn btn-sm btn-icon btn-light-warning" rel="tooltip" title="Düzenle">
                                    <i class="fa fa-pen"></i>
                                </a>
                                <a href="{{ path('app_dil_delete', {'code': dil.code}) }}" class="btn btn-sm btn-icon btn-light-danger" rel="tooltip" title="Sil" onclick="Project.sweetalert.confirm(event);">
                                    <i class="fa fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="3">
                            {{ include('system/default/kayit_bulunamadi.html.twig') }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="card shadow-sm mt-10">
        <div class="card-header">
            <h3 class="card-title">Çerez Politikası</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 %}
                        <li class="nav-item">
                            <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}" data-bs-toggle="tab" href="#tab_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="card-toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-icon btn-light-warning" rel="tooltip" title="Düzenle"
                            data-bs-toggle="modal" data-bs-target="#modalCerezPolitikasi">
                        <i class="fa fa-pen"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                {% for dil in diller %}
                    <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="tab_dil_{{ loop.index }}">
                        <div class="row mb-10 fs-5">
                            <div class="col-md-3 text-muted">Başlık</div>
                            <div class="col-md-9 cerez-politikasi-baslik-{{ dil.kisaBaslik }}">{{ dil.cerezPolitikasiDil.baslik|default }}</div>
                        </div>
                        <div class="row mb-10 fs-5">
                            <div class="col-md-3 text-muted">Metin</div>
                            <div class="col-md-9 cerez-politikasi-metin-{{ dil.kisaBaslik }}">{{ dil.cerezPolitikasiDil.metin|default|raw }}</div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="card shadow-sm mt-10">
        <div class="card-header">
            <h3 class="card-title">Pop-Up</h3>
            <div class="card-toolbar">
                <button type="button" class="btn btn-sm btn-light-dark">Boyut: {{ popupResimBoyut[0] }}x{{ popupResimBoyut[1] }}</button>
            </div>
        </div>
        <div class="card-body">
            <form class="form mb-10" action="#" method="post">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <div class="dropzone dropzone-queue mb-2" id="dropzone_main_popup_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">{{ popupResimLimit }} 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>
            </form>
            <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-150px">Resim</th>
                    <th class="text-end">Ekleme Tarihi</th>
                    <th class="text-end">İşlem</th>
                </tr>
                </thead>
                <tbody id="popup_resim_tbody" class="draggable-zone"></tbody>
            </table>
        </div>
    </div>

    {# Modal Cerez Politikasi #}
    <div class="modal fade" data-bs-focus="false" id="modalCerezPolitikasi" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form id="formCerezPolitikasi" method="post">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Çerez Politikası</h5>
                        <div class="w-2px h-20px ms-5 bg-primary"></div>
                        <ul class="nav me-auto">
                            {% for dil in diller %}
                                <li class="nav-item">
                                    <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}"
                                       data-bs-toggle="tab" href="#tab_cerez_politikasi_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                            <span class="svg-icon svg-icon-2x"></span>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="tab-content">
                            {% for dil in diller %}
                                <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="tab_cerez_politikasi_dil_{{ loop.index }}">
                                    <label for="cerezPolitikasiDilBaslik-{{ dil.kisaBaslik }}"
                                           class="form-label required">Başlık</label>
                                    <input type="text"
                                           name="cerez_politikasi_diller[{{ dil.kisaBaslik }}][baslik]"
                                           class="form-control mb-5" id="cerezPolitikasiDilBaslik-{{ dil.kisaBaslik }}">
                                    <label for="cerezPolitikasiDilMetin-{{ dil.kisaBaslik }}"
                                           class="form-label required">Metin</label>
                                    <textarea name="cerez_politikasi_diller[{{ dil.kisaBaslik }}][metin]"
                                              class="form-control tinymce_editor"
                                              id="cerezPolitikasiDilMetin-{{ dil.kisaBaslik }}"></textarea>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
                        <button type="submit" class="btn btn-success btn-submit">Kaydet</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
    <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 dropzoneMainIDPopupResim = 'dropzone_main_popup_resim';
        let dropzoneContainerIDPopupResim = 'popup_resim_tbody';
        let dropzoneMaxUploadPopupResim = {{ popupResimLimit }};
        let dropzoneListPathPopupResim = "{{ path('app_system_popup_resim') }}";
        let dropzoneUploadPathPopupResim = "{{ path('app_system_popup_resim_upload') }}";
        let cropperPathPopupResim = "{{ path('app_system_popup_resim_upload', {'cropperCode':'CROPPERCODE'}) }}";

        $(document).ready(function () {
            Project.dropzoneList(false, dropzoneContainerIDPopupResim, dropzoneListPathPopupResim);
            Project.dropzoneCropper(dropzoneMainIDPopupResim, dropzoneContainerIDPopupResim, dropzoneMaxUploadPopupResim, dropzoneListPathPopupResim, dropzoneUploadPathPopupResim, cropperPathPopupResim, 'max', {{ popupResimBoyut[0] }}, {{ popupResimBoyut[1] }});

            let $modalCerezPolitikasi = $("#modalCerezPolitikasi");
            let $formCerezPolitikasi = $("#formCerezPolitikasi");
            $modalCerezPolitikasi.on("show.bs.modal", function () {
               const request = new XMLHttpRequest();
               request.addEventListener("load", function () {
                   if (typeof this.response === "object" && Object.keys(this.response).length > 0) {
                       for(let key of Object.keys(this.response)) {
                           const dil = this.response[key];
                           $("#cerezPolitikasiDilBaslik-"+key).val(dil['baslik']);
                           tinymce.get('cerezPolitikasiDilMetin-'+key).setContent(dil['metin']);
                       }
                   }
               });
               request.open("GET", "{{ path('app_system_cerezpolitikasi') }}");
               request.responseType = "json"
               request.send();
            });
            $formCerezPolitikasi.submit(function (event) {
                event.preventDefault();
                const formData = new FormData($formCerezPolitikasi.get(0));
                const request = new XMLHttpRequest();
                request.addEventListener("load", function () {
                    if (typeof this.response === "object" && Object.keys(this.response).length > 0) {
                        for(let key of Object.keys(this.response)) {
                            const dil = this.response[key];
                            $(".cerez-politikasi-baslik-"+key).text(dil['baslik']);
                            $(".cerez-politikasi-metin-"+key).html(dil['metin']);
                        }
                    }
                    $modalCerezPolitikasi.modal("hide");
                });
                request.open("POST", "{{ path('app_system_cerezpolitikasi') }}");
                request.responseType = "json"
                request.send(formData);
            });
        });
    </script>
{% endblock %}