{% extends 'admin/admin_base_new.html.twig' %}

{% if entity is defined %}
    {% set isVariant = entity.isVariant %}
    {% set isEnabled = entity.isEnabled %}
    {% set activeVariantIds = getProductVariantAssingIds(entity) %}
    {% set productVariant = getProductVariant({'product':entity}) %}
    {% set productPrices = getProductPrices({'productVariant':productVariant}) %}
    {% set productLangs = getProductLangs({'product':entity}) %}
    {% set productLang = productLangs['tr']|default %}
    {% set activeCategoryIds = [entity.mainCategory.id|default] %}
    {% set activeCategoryIds = getOtherCategoryIds(entity) %}
    {% set activeProductGroupIds = getProductGroupAssingIds(entity) %}
    {% set activeProductIds = getSimularProductIds(entity) %}
{% else %}
    {% set entity = {} %}
    {% set isEnabled = false %}
{% endif %}

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

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

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

{% block javascripts %}
    <script src="{{ asset('assets/admin/app-assets/js/core/app-menu.js') }}"></script>
    <script src="{{ asset('assets/admin/app-assets/js/core/app.js') }}"></script>
    <script src="{{ asset('assets/admin/js/core/kodpit.js') }}"></script>
    <script src="{{ asset('assets/theme/js/custom.js') }}"></script>
    <script src="{{ asset('assets/admin/js/pages/product.js') }}"></script>
    <script src="{{ asset('assets/admin/js/pages/price_calculate.js') }}"></script>

    <script>
        $(document).ready(function () {
            /**
             *  Page init scripts
             */
            Panel.priceFormat();
            Price.init();
        });
    </script>

    {% set imagesArr = [] %}
    {% for image in entity.productImages|default %}
        {% set imagesArr = imagesArr|merge([{
            'serverID': image.id,
            'type': 'image/jpeg',
            'size': 12345,
            'title': image.title,
            'name': image.filename,
            'manually': true,
            'accepted': true,
            'filepath': asset('media/products/'~image.product.uuid~'/')
        }]) %}
    {% endfor %}

    <script src="{{ asset('assets/theme/plugins/custom/tinymce/tinymce.bundle.js') }}"></script>
    <script>
        // Stepper lement
        const element = document.querySelector("#kt_stepper_example_vertical");

        // Initialize Stepper
        const stepper = new KTStepper(element);

        // Handle next step
        stepper.on("kt.stepper.next", function (stepper) {
            stepper.goNext(); // go next step
        });

        // Handle previous step
        stepper.on("kt.stepper.previous", function (stepper) {
            stepper.goPrevious(); // go previous step
        });

        const options = {selector: "#productDescription", height : "375"};
        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: '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 productMainImage = "#productMainImage";
        const dropzoneItem = document.getElementById("dropzoneItem");
        let dropzonePreviewTemplate = dropzoneItem.content.children[0].outerHTML;
        const dropzoneMainImage = $(productMainImage).dropzone(dropzoneOptions(productMainImage, 1, 'product_main_image'));

        const productOtherImages = "#productOtherImages";
        const dropzoneOtherImages = $(productOtherImages).dropzone(dropzoneOptions(productOtherImages, 4, 'product_other_images'));

        function dropzoneInit() {
            let $this = this;
            let $dropzoneItems = $(this.element).find(".dropzone-items");
            this.on("thumbnail", function (file) {
                if (file.manually) {
                    $(file.previewElement).find("[data-dz-thumbnail]").attr({width: 75, height: 75});
                    $(file.previewElement).find("input").val(file.title)
                }
            });
            this.on("resize", function (file, width, height, resizeMethod) {
                console.log("resize");
                console.log(file);
                console.log(width);
                console.log(height);
                console.log(resizeMethod);
            });
            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);
                });
            });
            /* >>> Events */
            let images = [];
            {% if imagesArr|length > 0 %}
            images = JSON.parse('{{ imagesArr|json_encode|raw }}');
            {% endif %}

            let mockFile = { name: 'yeni-koleksiyon-product-1-1.jpg', size: 12345, width: 75, height: 75, type: 'image/jpeg', serverID: 0, manually: true, accepted: true };
            if (images.length) {
                if (this.element.id === "productMainImage") {
                    $this.emit("addedfile", images[0]);
                    $this.emit("thumbnail", images[0], images[0].filepath + images[0].name);
                    $this.files.push(images[0]);
                } else {
                    $.each(images, function (i,e) {
                        if (i > 0) {
                            //this.emit("success", mockFile);
                            //this.emit("complete", mockFile);
                            $this.emit("addedfile", e);
                            $this.emit("thumbnail", e, e.filepath + e.name);
                            $this.files.push(e);
                            //this.emit("resize", mockFile, 50, 50, 'contain');
                        }
                    });
                }
            }
            /* <<< */
        }

        function variantForm(value) {
            let $template = value ? $("#variantForm") : $("#noVariantForm");
            let templateClone = $template[0].content.cloneNode(true);
            $("#variantFormContainer").html(templateClone).find("select").select2();
        }
        variantForm({{ isVariant ? 1 : 0 }});

        $("#submitButton").click(function () {
            const $this = $(this);
            const $form = $("#entityForm");
            const formData = new FormData($form[0]);
            formData.append("product_lang[tr][description]", tinymce.get("productDescription").getContent());

            let mainImages = dropzoneMainImage[0].dropzone.files;
            let mainImagesTitle = dropzoneMainImage.find(".dropzone-item input");
            for (const key in mainImages) {
                let file = mainImages[key];
                //onaylanmayanlari gonderme
                if (file.accepted) {
                    let title = mainImagesTitle[key].value;
                    formData.append("productMainImage[0]", file);
                    formData.append("productMainImage[0][title]", title);
                    break;
                }
            }

            let otherImages = dropzoneOtherImages[0].dropzone.files;
            let otherImagesTitle = dropzoneOtherImages.find(".dropzone-item input");
            for (const key in otherImages) {
                let file = otherImages[key];
                //onaylanmayanlari gonderme
                if (file.accepted) {
                    let title = otherImagesTitle[key].value;
                    formData.append("productOtherImages["+key+"]", file);
                    formData.append("productOtherImages["+key+"][title]", title);
                }
            }

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

            $.ajax({
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false
            }).done(function (data) {
                console.log("done", data);
                $this.removeAttr("data-kt-indicator").prop("disabled", false);
            });
        });
    </script>
{% endblock %}


{% block breadcrumb %}
    <!--begin::Page title-->
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <!--begin::Title-->
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Ürün Ekle</h1>
        <!--end::Title-->
        <!--begin::Breadcrumb-->
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">
                <a href="#" class="text-muted text-hover-primary">Anasayfa</a>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">
                <a href="#" class="text-muted text-hover-primary">Ürünler</a>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">Ürün Ekle</li>
            <!--end::Item-->
        </ul>
        <!--end::Breadcrumb-->
    </div>
    <!--end::Page title-->
    <!--begin::Actions-->
    <div class="d-flex align-items-center gap-2 gap-lg-3">
        <!--begin::Secondary button-->
        <a href="#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Listeye Dön</a>
        <!--end::Secondary button-->
    </div>
    <!--end::Actions-->
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-body">
            <div class="stepper stepper-pills stepper-column d-flex flex-column flex-lg-row" id="kt_stepper_example_vertical">
                <div class="d-flex flex-row-auto w-100 w-lg-300px">
                    <div class="stepper-nav flex-cente">
                        <div class="stepper-item me-5 current" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper d-flex align-items-center">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">1</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Ürün Bilgileri</h3>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <div class="stepper-item me-5" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper d-flex align-items-center">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">2</span>
                                </div>
                                <!--begin::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Ürün Detayları</h3>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <div class="stepper-item me-5" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper d-flex align-items-center">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="stepper-check fas fa-check"></i>
                                    <span class="stepper-number">3</span>
                                </div>
                                <!--begin::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Medya</h3>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                    </div>
                </div>
                <div class="flex-row-fluid">
                    <form class="form w-lg-750px" novalidate="novalidate" id="entityForm">
                        <div class="mb-5">
                            <div class="flex-column current" data-kt-stepper-element="content">
                                <div class="row mb-10">
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productCode">Ürün Kodu</label>
                                        <input type="text" id="productCode" class="form-control form-control-solid" name="product[code]" placeholder="Ürün Kodu" value="{{ entity.code|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productBarcode">Barkod Numarası</label>
                                        <input type="text" id="productBarcode" class="form-control form-control-solid" name="product[barcode]" placeholder="Barkod Numarası" value="{{ entity.barcode|default }}"/>
                                    </div>
                                </div>
                                <div class="row mb-10">
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productMainCategory">Ana Kategori</label>
                                        <select id="productMainCategory" class="form-select form-select-solid" name="product[main_category_id]" data-control="select2" data-placeholder="Kategori Seçiniz">
                                            <option></option>
                                            {% include "admin/Main/Product/Category/_categoryOptions.html.twig" %}
                                        </select>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productOtherCategories">Diğer Kategoriler</label>
                                        <select id="productOtherCategories" class="form-select form-select-solid" name="product[other_categories][]" data-control="select2" data-close-on-select="false" data-placeholder="Kategori Seçiniz" data-allow-clear="true" multiple="multiple">
                                            <option></option>
                                            {% include "admin/Main/Product/Category/_categoryOptions.html.twig" %}
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-10">
                                    <label class="form-label" for="productProductGroups">Ürün Grupları</label>
                                    <select id="productProductGroups" class="form-select form-select-solid" name="product[product_groups][]" data-control="select2" data-close-on-select="false" data-placeholder="Ürün Grubu Seçiniz" data-allow-clear="true" multiple="multiple">
                                        <option></option>
                                        {% include "admin/Main/Product/Product/Form/_productGroups.html.twig" %}
                                    </select>
                                </div>
                                <div class="d-flex flex-stack">
                                    <div class="me-5 fw-semibold">
                                        <label class="fs-6">Ürün Durumu</label>
                                        <div class="fs-7 text-muted">Pasif ürün sitede görünmeyecektir</div>
                                    </div>
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" name="product[is_enabled]" value="{{ isEnabled ? '1' : '0' }}" {% if isEnabled %}checked{% endif%}/>
                                        <span class="form-check-label fw-semibold text-muted">Aktif</span>
                                    </label>
                                </div>
                                <hr class="border my-10">
                                <div class="mb-10">
                                    <label class="form-label me-3">Varyant:</label>
                                    <div class="form-check form-check-custom form-check-solid form-check-inline">
                                        <input class="form-check-input" name="product[is_variant]" type="radio" value="0" id="flexRadioDefault1" aria-label="Varyant Yok" onchange="variantForm(0)" {% if isVariant == 0 %}checked{% endif %}/>
                                        <label class="form-check-label" for="flexRadioDefault1">Yok</label>
                                    </div>
                                    <div class="form-check form-check-custom form-check-solid form-check-inline">
                                        <input class="form-check-input" name="product[is_variant]" type="radio" value="1" id="flexRadioDefault2" aria-label="Varyant Var" onchange="variantForm(1)" {% if isVariant %}checked{% endif %}/>
                                        <label class="form-check-label" for="flexRadioDefault2">Var</label>
                                    </div>
                                </div>
                                <div id="variantFormContainer"></div>
                            </div>
                            <div class="flex-column" data-kt-stepper-element="content">
                                <div class="row mb-10">
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productName">Ürün Başlığı</label>
                                        <input type="text" id="productName" class="form-control form-control-solid mb-5" name="product_lang[tr][name]" placeholder="Ürün Başlığı" value="{{ productLang.name|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productShortDescription">Ürün Tipi</label>
                                        <input type="text" id="productShortDescription" class="form-control form-control-solid mb-5" name="product_lang[tr][short_description]" placeholder="Ürün Tipi" value="{{ productLang.shortDescription|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productMetaDescription">Meta Açıklaması</label>
                                        <input type="text" id="productMetaDescription" class="form-control form-control-solid mb-5" name="product_lang[tr][meta_description]" placeholder="Meta Açıklaması" value="{{ productLang.metaDescription|default }}"/>
                                    </div>
                                    <div class="col-12"></div>
                                    <div class="col-lg-3">
                                        <label class="form-label" for="productLength">Genişlik (cm)</label>
                                        <input type="number" id="productLength" class="form-control form-control-solid mb-5" name="product[length]" placeholder="Genişlik (cm)" value="{{ entity.length|default }}"/>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="form-label" for="productDepth">Derinlik (cm)</label>
                                        <input type="number" id="productDepth" class="form-control form-control-solid mb-5" name="product[depth]" placeholder="Derinlik (cm)" value="{{ entity.depth|default }}"/>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="form-label" for="productHeight">Yükseklik (cm)</label>
                                        <input type="number" id="productHeight" class="form-control form-control-solid mb-5" name="product[height]" placeholder="Yükseklik (cm)" value="{{ entity.height|default }}"/>
                                    </div>
                                    <div class="col-lg-3">
                                        <label class="form-label" for="productWeight">Ağırlık (kg)</label>
                                        <input type="number" id="productWeight" class="form-control form-control-solid mb-5" name="product[weight]" placeholder="Ağırlık (kg)" value="{{ entity.weight|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productMaterial">Materyal</label>
                                        <input type="text" id="productMaterial" class="form-control form-control-solid mb-5" name="product[productMaterial]" placeholder="Materyal" value="{{ entity.productMaterial|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productColor">Renk</label>
                                        <input type="text" id="productColor" class="form-control form-control-solid mb-5" name="product[productColor]" placeholder="Renk" value="{{ entity.productColor|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productSuggestion">Bakım Önerisi</label>
                                        <input type="text" id="productSuggestion" class="form-control form-control-solid mb-5" name="product[productSuggestion]" placeholder="Bakım Önerisi" value="{{ entity.productSuggestion|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productPaintType">Boya Tipi</label>
                                        <input type="text" id="productPaintType" class="form-control form-control-solid mb-5" name="product[productPaintType]" placeholder="Boya Tipi" value="{{ entity.productPaintType|default }}"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productDeliveryTime">Teslimat Süresi</label>
                                        <input type="text" id="productDeliveryTime" class="form-control form-control-solid mb-5" name="product[deliveryTime]" placeholder="Teslimat Süresi" value="{{ entity.deliveryTime|default }}"/>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label" for="productDescription">Açıklama</label>
                                        <textarea id="productDescription" name="product[description]" class="tox-target mb-5">{{ productLang.description|default|raw }}</textarea>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-label" for="productSimular">Benzer Ürünler</label>
                                        <select id="productSimular" class="form-select form-select-solid" name="product[simular_products][]" data-control="select2" data-close-on-select="false" data-placeholder="Ürün Seçiniz" data-allow-clear="true" multiple="multiple">
                                            <option></option>
                                            {% include "admin/Main/Product/Product/Form/_simularProductOptions.html.twig" %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-column" data-kt-stepper-element="content">
                                <div class="fv-row mb-10">
                                    <label class="col-lg-2 col-form-label text-lg-right">Ana Resim:</label>
                                    <div class="dropzone text-start" id="productMainImage">
                                        <div class="dz-message needsclick">
                                            <i class="ki-duotone ki-file-up fs-3x text-primary">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                            <div class="ms-4">
                                                <h3 class="fs-5 fw-bold text-gray-900 mb-1">Resim eklemek için tıklayın veya resmi bu alana sürükleyin</h3>
                                                <span class="fs-7 fw-semibold text-gray-500">Yalnızca <b>1</b> dosya ekleyebilirsiniz</span>
                                            </div>
                                        </div>
                                        <div class="dropzone-items"></div>
                                    </div>
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="col-lg-2 col-form-label text-lg-right">Diğer Resimler:</label>
                                    <div class="dropzone text-start" id="productOtherImages">
                                        <div class="dz-message needsclick">
                                            <i class="ki-duotone ki-file-up fs-3x text-primary">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                            <div class="ms-4">
                                                <h3 class="fs-5 fw-bold text-gray-900 mb-1">Resim eklemek için tıklayın veya resmi bu alana sürükleyin</h3>
                                                <span class="fs-7 fw-semibold text-gray-500"><b>4</b> Dosyaya kadar ekleyebilirsiniz</span>
                                            </div>
                                        </div>
                                        <div class="dropzone-items"></div>
                                    </div>
                                </div>
                                <hr class="border">
                                <p class="text-warning"><b>Not:</b> Resimler 1645x925 boyutunda olmalıdır.</p>
                            </div>
                        </div>
                        <div class="d-flex flex-stack">
                            <div class="me-2">
                                <button type="button" class="btn btn-light btn-active-light-primary" data-kt-stepper-action="previous">Geri</button>
                            </div>
                            <div>
                                <button type="button" class="btn btn-primary" data-kt-stepper-action="submit" id="submitButton">
                                    <span class="indicator-label">Kaydet</span>
                                    <span class="indicator-progress">Kaydediliyor...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-kt-stepper-action="next">İleri</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <template id="variantForm">
        <label class="form-label" for="productVariant">Varyantlar</label>
        <select id="productVariant" class="form-select form-select-solid" name="product[variant][]" data-control="select2" data-close-on-select="false" data-placeholder="Varyant Seçiniz" data-allow-clear="true" multiple="multiple">
            <option></option>
            {% include "admin/Main/Product/Variant/_variantOptions.html.twig" %}
        </select>
        <p class="mt-5 text-warning"><b>Not:</b> Varyant başlıkları düzenlendiğinde, ürüne ait alt fiyatlandırmalar <u>sıfırlanır.</u></p>
    </template>
    {% set productPricing = productPrices['TL']|default %}
    <template id="noVariantForm">
        <div class="row">
            <div class="col-lg-4">
                <label for="productOriginalPrice" class="form-label">Fiyat</label>
                <div class="input-group input-group-solid">
                    <input type="text" id="productOriginalPrice" class="form-control price-format original_price" name="price[TL][original_price]" placeholder="Fiyat" value="{{ money_format(productPricing.originalPrice|default(0)) }}"/>
                    <span class="input-group-text">₺</span>
                </div>
            </div>
            <div class="col-lg-4">
                <label for="productSalesPrice" class="form-label">Satış Fiyatı</label>
                <div class="input-group input-group-solid">
                    <input type="text" id="productSalesPrice" class="form-control price-format sales_price" name="price[TL][sales_price]" placeholder="Satış Fiyatı" value="{{ money_format(productPricing.salesPrice|default(0)) }}"/>
                    <span class="input-group-text">₺</span>
                </div>
            </div>
            <div class="col-lg-4">
                <label for="productDiscountRate" class="form-label">İndirim Oranı</label>
                <div class="input-group input-group-solid">
                    <input type="text" id="productDiscountRate" class="form-control price-format discount_rate" name="price[TL][discount_rate]" placeholder="İndirim Oranı" value="{{ money_format(productPricing.discountRate|default(0)) }}" disabled/>
                    <span class="input-group-text">%</span>
                </div>
            </div>
        </div>
        <hr class="border my-10">
        <div class="row mb-10">
            <div class="col-lg-4">
                <label for="productVariantStock" class="form-label">Stok</label>
                <input type="text" id="productVariantStock" class="form-control form-control-solid" name="product_variant[stock]" placeholder="Stok" value="{{ productVariant.stock|default }}"/>
            </div>
        </div>
        <div class="d-flex flex-stack mb-10">
            <div class="me-5 fw-semibold">
                <label class="fs-6">Stok Takibi</label>
                <div class="fs-7 text-muted">Aktifse sistem ürün stoğunu takip edecektir</div>
            </div>
            <label class="form-check form-switch form-check-custom form-check-solid">
                {% set isTracked = productVariant is null ? false : productVariant.isTracked %}
                <input class="form-check-input" type="checkbox" name="product_variant[is_tracked]" {% if isTracked %}checked{% endif %}/>
                <span class="form-check-label fw-semibold text-muted">Aktif</span>
            </label>
        </div>
    </template>
    <template id="dropzoneItem">
        <div class="row align-items-center border-bottom-1 border-bottom-dashed border-gray-300 mx-0 py-3 dropzone-item">
            <div class="col-auto">
                <img src="" alt="" data-dz-thumbnail>
            </div>
            <div class="col">
                <div class="row align-items-center">
                    <div class="col-6">
                        <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" placeholder="Resim Başlık" class="form-control form-control-solid form-control-sm" aria-label="Başlık">
                    </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 %}