{% 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 projectLangs = getProjectsLangs({'Projects':project}) %}
{% set page_title = "Proje Düzenle" %}

{% block metaTitle %}{{ page_title }}{% endblock %}

{% block breadcrumb %}
    {% set fields = [
        {'name':'Proje','href':path('admin_projects_index')},
        { 'name': page_title }] %}
    {% include 'admin/Common/_breadcrumb.html.twig' %}

    {% block page_buttons %}
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <a href="{{ path('admin_projects_index') }}" class="btn btn-sm fw-bold btn-secondary">Listeye Dön</a>
        </div>
    {% endblock %}
{% endblock %}

{% block stylesheets %}
    <style>
        .tox-target + .tox.tox-tinymce {
            margin-bottom: 1.25rem;
        }

        .dropzone-item.dz-error {
            background-color: var(--bs-danger-light);
        }

        .tox-target + .tox.tox-tinymce {
            margin-bottom: 1.25rem;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <form method="post" id="entityForm">
                    {{ include('admin/Main/Projects/_form.html.twig', {project: project}) }}

                    <div class="button-group p-0" id="interactiveButtonGroup">
                        {{ include('admin/Common/_button_group.html.twig') }}
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {% set projectsLang = getProjectsLang({'project': project}) %}



    {% set imageBlob = {
        'serverID': project.id,
        'type': 'image/jpeg',
        'title': projectsLang.title,
        'name': project.imageFile,
        'manually': true,
        'accepted': true,
        'isDefault': 1,
        'filepath': asset('media/projects/')
    } %}

    <script src="{{ asset('assets/theme/plugins/custom/tinymce/tinymce.bundle.js') }}"></script>
    <script>
        const options = {
            selector: ".tox-target",
            height : "375",
            setup: (editor) => {
                editor.on('blur', () => {
                    editor.save();
                });
            }
        };
        if (KTThemeMode.getMode() === "dark") {
            options["skin"] = "oxide-dark";
            options["content_css"] = "dark";
        }
        tinymce.init(options);

        const dropzoneOptions = function (id, maxFiles, paramName) {
            return {
                url: location.href,
                autoQueue: false,
                acceptedFiles: '.jpeg,.jpg,.png,.webp,.gif,.bmp,.svg',
                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 productMainImage = "#productMainImage";
        const dropzoneItem = document.getElementById("dropzoneItem");
        let dropzonePreviewTemplate = dropzoneItem.content.children[0].outerHTML;
        const dropzoneMainImage = $(productMainImage).dropzone(dropzoneOptions(productMainImage, 1, 'product_main_image'));

        function dropzoneInit() {
            let $this = this;
            let $dropzoneItems = $(this.element).find(".dropzone-items");
            this.on("addedfile", function () {
                $dropzoneItems.addClass("mt-3");
            });
            this.on("removedfile", function () {
                if (!this.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";
                }

                console.log(fileSize);
                console.log(fileSize / 1024);
                console.log(maxFilesize);
                console.log(maxFilesize * 1024);

                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);
                });
            });

            let image = JSON.parse('{{ imageBlob|json_encode|raw }}');
            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.manually = true;
                file.isDefault = image.isDefault;
                $this.addFile(file);
            }
            getFileBlob(image);
        }

        $("#submitButton").click(function () {
            const $this = $(this);
            const $form = $("#entityForm");
            const formData = new FormData($form[0]);

            let acceptedFile = dropzoneMainImage[0].dropzone.files.filter(f => f.accepted === true && f.manually !== true);
            if (acceptedFile.length) {
                formData.append("image", acceptedFile[0]);
            }

            $this.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_projects_index') }}');
                    }
                } else {
                    $this.removeAttr("data-kt-indicator").prop("disabled", false);
                }
                Panel.toast(data.type, data.message, toastOptions);
            });
        });
    </script>
{% endblock %}