{% extends base_template %}

{% block stylesheets %}
  {{ parent() }}
  {# <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> #}
{% endblock %}

{% block list_table %}
    <div class="col-xs-12 col-md-12">
        <div class="box box-primary">
            <div class="box-body">
                <div class="dropzone">
                    <div class="fallback">
                        <input name="file" type="file" multiple />
                    </div>
                </div>
                {# <div class="btn_upload" style="margin-top:20px;">
                  <a href="#" class="btn btn-block btn-success uploadFile"/>  Ajouter  </a>
              </div> #}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script>

      $(document).ready(function(){

        var myDropzone = new Dropzone(".dropzone", {
          url: Routing.generate("galleries", {}, true),
          uploadMultiple: true,
          headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
          dictDefaultMessage: "Drop files here or click to upload",
          acceptedFiles: "image/jpeg,image/jpg,image/png",
          maxFilesize: 3, // in Mb
          addRemoveLinks: false,
          parallelUploads: 20,
          autoProcessQueue: true,
        });

        var dropzoneContainer = myDropzone.element;
        var sortable = new Sortable(dropzoneContainer, {
          draggable: ".dz-preview",
          handle: ".drag-handle",
          onEnd: function(event) {
            var sortedOrder = sortable.toArray();
            var imageIds = [];

            var thumbnailElements = event.target.getElementsByClassName("dz-file-preview");
            for (var i = 0; i < thumbnailElements.length; i++) {
              var thumbnailElement = thumbnailElements[i];
              var imageId = thumbnailElement.getAttribute("data-image-id");
              imageIds.push(imageId);
            }

            var requestData = {
              order: sortedOrder,
              imageIds: imageIds
            };
            
            $.ajax({
              url: Routing.generate("sortedOrder", {}, true),
              method: "POST",
              data:requestData,
              success: function(response) {
                console.log("Order saved successfully:", response);
              },
            })
          }
        });

        var imageUrls = [
          {% if admin.galeries|length > 0 %}
            {% for image in admin.galeries %}
              {
                id: "{{ image.id }}",
                url: "{{ cdn_url ~ '/upload/gallery/' ~ image.image }}"
              },
            {% endfor %}
          {% endif %}
        ];

        for (var i = 0; i < imageUrls.length; i++) {
          var imageUrl = imageUrls[i].url;

          // Create a thumbnail element for each image
          var thumbnailElement = document.createElement("div");
              thumbnailElement.classList.add("dz-preview", "dz-file-preview");
              thumbnailElement.setAttribute("data-image-id", imageUrls[i].id);

          var thumbnailImage = document.createElement("img");
              thumbnailImage.src = imageUrl;
              thumbnailElement.appendChild(thumbnailImage);

          var deleteButton = document.createElement("button");
              deleteButton.classList.add("btn", "btn-danger", "delete-button");
              deleteButton.innerHTML = "x";
              thumbnailElement.appendChild(deleteButton);

          var dragHandle = document.createElement("div");
              dragHandle.classList.add("drag-handle");
              dragHandle.innerHTML = "&#9776;";
              thumbnailElement.appendChild(dragHandle);

          myDropzone.previewsContainer.appendChild(thumbnailElement);
        }
      

        $(document).on("click", ".delete-button", function() {
          var thumbnailElement = $(this).closest(".dz-file-preview");
          var imageId = thumbnailElement.data("image-id");
          $.get(Routing.generate("deleteimage", {id:imageId}, true), function(data, status){
            thumbnailElement.remove();
          });
        });
        
        myDropzone.on("successmultiple", function(files, response) {
          console.log("Files uploaded:", files, response);
        });

        myDropzone.on("completemultiple", function() {
          console.log("Upload complete");
          location.reload();
        });

      });
    </script>
{% endblock %}