{% extends 'admin/admin_base_new.html.twig' %}
{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% if entity is not defined %}{% set entity = {} %}{% endif %}

{% set isVariant = entity is empty ? false : entity.isVariant %}

{% set categories = getCategoryList({'mainCategory': '1', 'isDel': '0'}) %}
{% set page_title = "Kategoriler" %}
{% set maxFilesLength = 5 %}

{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/admin/css/pages/category.css') }}" rel="stylesheet" type="text/css">
    <style>
        #productDescription + .tox.tox-tinymce {
            margin-bottom: 1.25rem;
        }

        .dropzone-item.dz-error {
            background-color: var(--bs-danger-light);
        }
    </style>
{% endblock %}

{% block breadcrumb %}
    {{ include('admin/Common/_breadcrumb.html.twig', {
        title: page_title,
        indexPath: path('admin_category_index'),
        paths: [
            {title: page_title, path: path('admin_category_index')}
        ]
    }) }}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-3 mb-10">
            <a href="{{ path('admin_category_new') }}" class="btn btn-primary w-100 mb-4">Yeni Oluştur</a>
            {% if categories|length > 0 %}
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            {% include "admin/Main/Product/Category/_list.html.twig" %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        {% if category|default %}
                            {{ category.name }}
                        {% else %}
                            Yeni Kategori
                        {% endif %}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form action="{{ category|default ? path('admin_category_edit', {'id':category.id}) : path('admin_category_new') }}"
                              class="form" novalidate="novalidate" id="entityForm">
                            {% include "admin/Main/Product/Category/_form.html.twig" %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="dropzoneItem">
        <div class="row align-items-center border-bottom-1 border-bottom-dashed border-gray-300 mx-0 py-3 dropzone-item"
             data-is-default="0">
            <div class="col-auto">
                <img src="" alt="" data-dz-thumbnail>
            </div>
            <div class="col">
                <div class="row align-items-center">
                    <div class="col-5">
                        <small class="text-muted">(<span data-dz-size>340kb</span>)</small>
                        <p class="text-truncate fw-medium mb-0" data-dz-name>no-image.png</p>
                    </div>
                    <div class="col">
                        <input type="text" name="productMainImage_0_[title]" placeholder="Resim Başlık"
                               class="form-control form-control-solid form-control-sm input-title"
                               id="productMainImage_0_title" aria-label="Başlık">
                    </div>
                    <div class="col-auto">
                        <div class="form-check form-check-custom form-check-solid">
                            <input class="form-check-input input-radio" type="radio" name="productMainImageIsDefault"
                                   value="_0_" id="productMainImage_0_isDefault"/>
                            <label class="form-check-label text-primary"
                                   for="productMainImage_0_isDefault">Varsayılan</label>
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="ki-duotone ki-cross-square align-middle fs-1 cursor-pointer" data-dz-remove>
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </div>
                    <div class="col-12">
                        <small class="d-block mt-3 text-danger" data-dz-errormessage></small>
                    </div>
                </div>
            </div>
        </div>
    </template>
{% endblock %}

{% block javascripts %}
    <script>
        $(".validate-action").click(function (event) {
            let isTrusted = event.originalEvent.isTrusted;
            if (isTrusted) {
                event.preventDefault();
                Panel.swal.confirm(event, $(this).data());
            }
        });

        const dropzoneOptions = function (id, paramName, maxFiles = {{ maxFilesLength }}) {
            return {
                url: location.href,
                autoQueue: false,
                acceptedFiles: 'image/jpeg',
                maxFiles: maxFiles,
                maxFilesize: 256 / 1024,
                paramName: paramName,
                previewTemplate: dropzonePreviewTemplate,
                previewsContainer: id + ' .dropzone-items',
                thumbnailWidth: 75,
                thumbnailHeight: 75,
                thumbnailMethod: 'contain',
                dictFileTooBig: 'Dosya boyutu (fileSizeKb) bu boyuttan fazla: maxFileSizeKb.dictFileTooBig',
                init: dropzoneInit
            }
        };

        const mainImageSelector = "#mainImage";
        const dropzoneItem = document.getElementById("dropzoneItem");
        let dropzonePreviewTemplate = dropzoneItem.content.children[0].outerHTML;
        const dropzoneMainImage = $(mainImageSelector).dropzone(dropzoneOptions(mainImageSelector, 'main_image'));

        function dropzoneInit() {
            let $this = this;
            let $dropzoneItems = $(this.element).find(".dropzone-items");
            this.on("addedfiles", function () {
                $dropzoneItems.addClass("mt-3");
                indexSorter($dropzoneItems);

                let files = this.files;
                const acceptedFiles = files.filter(file => file.accepted === true);
                if (acceptedFiles.length) {
                    acceptedFiles[0].previewTemplate.dataset.isDefault = "1";
                    acceptedFiles[0].previewTemplate.getElementsByClassName("input-radio")[0].checked = true;
                }
            });
            this.on("removedfile", function (file) {
                let files = this.files;
                const acceptedFiles = files.filter(file => file.accepted === true);
                if (acceptedFiles.length) {
                    if (file.previewTemplate.dataset.isDefault === "1") {
                        acceptedFiles[0].previewTemplate.dataset.isDefault = "1";
                        acceptedFiles[0].previewTemplate.getElementsByClassName("input-radio")[0].checked = true;
                    }
                    indexSorter($dropzoneItems);
                } else if (!files.length) {
                    $dropzoneItems.removeClass("mt-3");
                }
            });
            this.on("error", function (file, message) {
                let fileSize = file.size;
                let maxFilesize = this.options.maxFilesize;
                let unit = "Tb";
                if (maxFilesize < 1) {
                    //Dosya boyutu 1mb altındaysa: kb
                    unit = "Kb";
                } else if (maxFilesize < 1024) {
                    //Dosya boyutu 1mb altındaysa: mb
                    unit = "Mb";
                } else if (maxFilesize < 1048576) {
                    //Dosya boyutu 1mb altındaysa: gb
                    unit = "Gb";
                }

                if (message.includes("dictFileTooBig")) {
                    let fileSizeKb = Math.round((fileSize / 1024) * 100) / 100;
                    if (maxFilesize < 1) {
                        maxFilesize = Math.round((maxFilesize * 1024) * 100) / 100;
                    }
                    let pattern = /fileSize|maxFileSize|dictFileTooBig/g;
                    let replaces = {fileSize: fileSizeKb, maxFileSize: maxFilesize, dictFileTooBig: ""}
                    message = message.replace(pattern, function (match) {
                        return replaces[match]
                    });
                }
                $(file.previewElement).find('[data-dz-errormessage]').each(function () {
                    $(this).text(message);
                });
            });
            /* >>> Events */

            let images = [];
            let files = [];
            const getFileBlob = async image => {
                const res = await fetch(image.filepath + image.name);
                const blob = await res.blob();
                let file = new File([blob], image.name, blob);
                file.id = image.serverID;
                file.title = image.title;
                file.isDefault = image.isDefault;
            }
            const fetchFiles = async () => {
                const fetchImages = images.map(async image => await getFileBlob(image));
                await Promise.all(fetchImages);
                files.sort((a, b) => a.id - b.id);
                $.each(files, function (i, e) {
                    $this.addFile(e);
                    let lastFile = $this.files.slice(-1)[0];
                    let previewElement = lastFile.previewElement;
                    previewElement.querySelector('input[type="text"]').value = e.title;
                    if (e.isDefault) {
                        previewElement.querySelector('input[type="radio"]').checked = true;
                    }
                });
            }
            fetchFiles();
        }

        function indexSorter(parent) {
            parent.children().each(function (i) {
                $(this).find("input").each(function () {
                    let pattern = /_\d+_/;
                    let inputId = $(this).attr("id").replace(pattern, '_' + i + '_');
                    let inputName = $(this).attr("name").replace(pattern, '[' + i + ']');
                    let inputValue = $(this).attr("value") || '';
                    if (inputValue) {
                        inputValue = inputValue.replace(pattern, i);
                    }
                    $(this).attr({
                        id: inputId,
                        name: inputName,
                        value: inputValue,
                    }).next("label").attr("for", inputId);
                });
            });
        }

        function formSubmit(el) {
            const $form = $("#entityForm");
            const formData = new FormData($form[0]);

            /*let mainImages = dropzoneMainImage[0].dropzone.files;
            let checkedRadioVal = $('[name="productMainImageIsDefault"]:checked').val();
            for (const key in mainImages) {
                let file = mainImages[key];
                //onaylanmayanlari gonderme
                if (file.accepted) {
                    formData.append("productMainImage["+key+"]", file);
                    formData.append("productMainImage["+key+"][id]", file.id ?? '');
                    formData.append("productMainImage["+key+"][isDefault]", key === checkedRadioVal);
                }
            }*/

            $(el).attr("data-kt-indicator", "on").prop("disabled", true);

            $.ajax({
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false
            }).done(function (data) {
                let toastOptions = {};
                if (data.type === 'success') {
                    toastOptions.onHidden = function () {
                        window.location.replace('{{ path('admin_category_index') }}');
                    }
                } else {
                    $(el).removeAttr("data-kt-indicator").prop("disabled", false);
                }
                Panel.toast(data.type, data.message, toastOptions);
            });
        }
    </script>
{% endblock %}