{config_load file=$language_path section="general"}
{config_load file=$language_path section="products"}

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>YES FileUpload</title>
    <link rel="stylesheet" href="../includes/classes/vendor/enyo/dropzone/dist/dropzone.css">
    <script src="../includes/classes/vendor/enyo/dropzone/dist/dropzone.js"></script>
    <link rel="stylesheet" type="text/css" href="includes/stylesheet.css.php?file=css/yes_style.html5.css" />
    <link type="text/css" href="{$JQUERY_CSS_LINK}" rel="stylesheet" />
    <script type="text/javascript" src="{$JQUERY_JS_LINK}"></script>
    <script type="text/javascript" src="{$JQUERYUI_JS_LINK}"></script>
    <script type="text/javascript" src="minify_js.php?file=js/yes.js"></script>
    <style>
    .import-button{
        margin-top: 50px;
    }
    .import-button button{
        font-size: 1.4em;
        padding: 4px;
        margin: 20px;
    }
    .needsclick{
        background-color: #AAA;
        margin: 20px;
        padding: 40px;
        font-style: italic;
    }
    .limits{
        margin-top: 50px; 
        color: #666;
        font-family:'Courier New', Courier, monospace, system;
    }
    .dz-preview {
        position: relative;
    }
    .dz-sort-index {
        background: rgba(0,0,0,0.7);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        padding: 4px 12px;
        border-radius: 6px;
    }

    .dz-options {
        margin-top: 8px;
        text-align: left;
        font-size: 13px;
        line-height: 1.4em;
    }
    .dz-options input[type=checkbox] {
        margin-right: 4px;
    }
    .dz-preview{
        border: 1px solid #666;
        width: 200px;
        margin: 10px;
        display: inline-block;
        padding: 6px;
        border-radius: 6px;
        text-align: center;
    }
    #dz-preview-template{
        display: none;
    }
    .dz-details{
        font-size: 0.7em;
        color: #666;
        text-align:center;
    }
    </style>

    <script>
    const upload_max_filesize = parseInt('{$PHP_LIMITS.upload_max_filesize}');
    const max_file_uploads = parseInt('{$PHP_LIMITS.max_file_uploads}');
    const post_max_size = parseInt('{$PHP_LIMITS.post_max_size}');
    const text_delete = '<button class="ui-button ui-corner-all ui-state-error" style="padding:3px;">{#delete#}</button>';
    const text_intro_files = '{#file_upload_region#}';
    var products_id = parseInt('{$PRODUCTS_ID}');
    // Note that the name "myDropzone" is the camelized
    // id of the form.
    $(function(){
        const myDropzone = new Dropzone("#my-dropzone", {
            url: "categories.php?action=dropzone-upload&products_id="+products_id,
            paramName: "file",
            maxFilesize: upload_max_filesize,
            maxFiles: max_file_uploads,
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            dictRemoveFile: text_delete,
            dictDefaultMessage: text_intro_files,
            previewTemplate: $('#dz-preview-template').html(), // <-- jetzt korrekt
            init: function() {
                const dz = this;
                // Wenn Dropzone bereit ist, Sortierung aktivieren
                $(dz.element).sortable({
                    items: '.dz-preview',  // Nur die Vorschauelemente verschiebbar
                    cursor: 'move',
                    opacity: 0.8,
                    tolerance: 'pointer',
                    update: function(event, ui) {
                        updateSortIndexes();
                        // Reihenfolge nach Sortierung ermitteln
                        const order = [];
                        $('.dz-preview').each(function() {
                            const file = $(this).get(0).file;
                            if (file && file.serverFileName) {
                                order.push(file.serverFileName);
                            }
                        });
                    }
                });
            }
        });
        myDropzone.on("success", function(file, response) {
            // Server-Antwort speichern (z. B. Dateiname)
            if (response.file) {
                file.serverFileName = response.file;
            }
            $(file.previewElement).attr('data-filename', response.file);
            // Checkbox-Events registrieren
            const preview = file.previewElement;
            $(preview).find('input[type=checkbox]').on('change', function() {
                const webshop = $(preview).find('.opt-webshop').is(':checked') ? 1 : 0;

            });                
            updateSortIndexes();
        });




        myDropzone.on("queuecomplete", function() {
            updateSortIndexes();
        });

        myDropzone.on("removedfile", function(file) {
                if (!file.serverFileName) return; // Nichts auf Server, also ignorieren

                // AJAX-Aufruf zum Löschen
                fetch("categories.php?action=dropzone-delete&products_id="+products_id, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ filename: file.serverFileName })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        console.log("✅ file removed:", file.serverFileName);
                        updateSortIndexes();
                    } else {
                        console.error("❌ delete error:", data.message);
                    }
                })
                .catch(err => console.error("⚠️ Servererror:", err));
        });
        function updateSortIndexes() {
            $('.dz-preview').each(function(index) {
                const number = index;
                let badge = $(this).find('.dz-sort-index');
                if (!badge.length) {
                    badge = $('<div class="dz-sort-index"></div>').prependTo(this);
                }
                badge.text(number);
            });
        }

        $('#btn-import').on('click', function() {
            const data = [];
            if($('.dz-preview').length == 1){
                alert('no import images');
                return false;
            }
            $('.dz-preview').each(function(index) {
                const $preview = $(this);
                const file = $preview.data('filename');

                // Datei kann von Dropzone kommen oder aus Datenbank
                const filename = file?.serverFileName || $preview.data('filename') || null;
                if (!filename) {
                    return; // überspringen falls unbekannt
                }

                data.push({
                    file: filename,
                    sort: index,
                    webshop: $preview.find('.opt-webshop').is(':checked') ? 1 : 0
                });
            });

            console.log("📦 Daten an Server:", data);

            // JSON senden
            $.ajax({
                url: 'categories.php?action=dropzone-import&products_id='+products_id,
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(resp) {
                    console.log('✅ Erfolgreich gesendet:', resp);
                    window.opener.load_products_images(products_id,false);
                    window.close();
                },
                error: function(err) {
                    console.error('❌ Fehler beim Senden:', err);
                    alert('Fehler beim Speichern der Daten!');
                }
            });
        });


    });
    
</script>
</head>

<body>


<h1>YES FileUpload pID {$PRODUCTS_ID}</h1>

<!-- Custom Dropzone Preview Template -->
<div id="dz-preview-template">
  <div class="dz-preview dz-file-preview">
    <img data-dz-thumbnail align="left"/>
    <span class="dz-sort-index"></span>
    <br clear="all" />
    <!-- Deine Checkboxen -->
    <div class="dz-options">
      <label><input type="checkbox" class="opt-webshop" checked="checked"> {#products_listing_status#}</label><br>
    </div>

    <!-- Dropzone-Standardinfos -->
    <div class="dz-details">
      <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-size" data-dz-size></div>
    </div>

    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
  </div>
</div>



<form action="categories.php?action=dropzone-upload" id="my-dropzone">
    <div class="dz-message needsclick">
        {#file_upload_region#}
    </div>    
</form>
<div class="import-button">
    <button type="button" id="btn-import" class="ui-button ui-corner-all ui-state-default">Import</button>
</div>

{if $FILES.0}
    <span style="text-decoration:italic;font-size:11px;">{$EXISTING_FILES_INTRO}</span><br />
        {foreach from=$FILES item=file}
        <img style="margin: 4px; max-height:70px;" src="../images/product_images/thumbnail_images/{$file}" border="0" />
        {/foreach}
{/if}


<div class="limits">
    <b>Limits</b> upload_max_filesize: {$PHP_LIMITS.upload_max_filesize}MB / max_file_uploads: {$PHP_LIMITS.max_file_uploads} / post_max_size: {$PHP_LIMITS.post_max_size}MB
</div>

</body>

</html>