@extends('layouts.main')

@section('title', 'Customize Image')

@section('navbar')
  @include('layouts.navbar')
@endsection

@section('style')
  <style>
    .pre_map {
      background: rgba(255, 255, 255, 0.519);
      overflow: hidden;
      position: relative;
    }

    .pre_img {
      height: 100%;
      display: block;
    }

    .custom-text-box {
      cursor: move;
      border: 1px dashed white;
    }

    .custom_btn {
      font-size: clamp(8px, 0.8vw, 15px) !important;
      padding: 2px;
      color: black;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .draggable-resizable {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px dashed #999;
      box-sizing: border-box;
    }

    .uploaded-img {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .switch_preview {
      position: relative;
    }

    .classification-result {
      font-size: 14px;
    }

    .add_text_button {
      white-space: nowrap;
    }

    .image_input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  </style>
@endsection

@section('content')

  <div class="my-3">
    <div class="mb-2">
      <h4 class="text-center">Customize Images</h4>
      <small class="d-block text-center" style="color:red ; font-size: 0.7rem; margin-top: -4px;">
        Please upload a high-resolution image (1000 x 1000 pixels). Only PNG and JPG formats are supported
      </small>
      <div class="d-flex justify-content-center mt-2">
        <button type="button" id="submitPreview" class="btn btn-sm btn-success mx-1">View Preview</button>
        {{-- <button type="button" id="remove_background" class="btn btn-sm btn-success mx-1">Remove Background</button> --}}
      </div>
    </div>

    <canvas id="finalCanvas" class="d-none"></canvas>
    <div class="row m-0">
      <div class="col-12 p-0">
        <div class="border rounded d-flex justify-content-center">
          @foreach ($map_imgs as $i => $map_img)
            @if ($map_img['upload_type'] == 2)
              @php
                $img_count = count($map_imgs);
                $width = 100 / $img_count;
              @endphp
              <form id="previewForm" class="d-flex justify-content-center product_size_div position-relative">
                @csrf
                <input type="hidden" value="{{ $product['id'] }}" name="pro_id">
                @foreach ($map_img['x'] as $j => $x)
                  <div class="position-absolute edit_buttons"
                    style="left:calc({{ $x }}%);top:calc({{ $map_img['y'][$j] }}% - 30px); transform:{{ $map_img['angle'][$j] ?? '' }};">
                    <div class="mx-2 d-flex">
                      <div class="mx-1">
                        <button type="button" value="{{ $i }}_{{ $j }}"
                          class="btn btn-danger p-1 py-0 delete_image">
                          <i class="fa-solid fa-trash" style="font-size: 10px;"></i>
                        </button>
                      </div>
                      <div class="mx-1">
                        <button type="button" class="btn btn-warning p-1 py-0 center-reset-button"
                          value="{{ $i }}_{{ $j }}"><i class="fa-solid fa-rotate-right"
                            style="font-size: 10px;"></i></button>
                      </div>
                      <div class="mx-1">
                        <button type="button" class="btn btn-warning add_text_button p-1 py-0"
                          value="{{ $i }}_{{ $j }}"> <span style="font-size: 10px;"><i
                              class="fa-solid fa-font"></i><i class="fa-solid fa-i-cursor mx-1"></i></span></button>
                      </div>
                      <input type="color" id="color_input_{{ $i }}_{{ $j }}"
                        value="{{ $i }}_{{ $j }}" name="color[]" class="d-none color_input">
                      <div class="mx-1">
                        <label for="color_input_{{ $i }}_{{ $j }}"
                          class="btn btn-warning color_button p-1 py-0"
                          value="{{ $i }}_{{ $j }}"><i style="font-size: 10px;"
                            class="fa-solid fa-palette"></i></label>
                      </div>
                    </div>
                  </div>
                  <div id="pre_map_{{ $i }}_{{ $j }}"
                    class="position-absolute pre_map {{ $map_img['upload_type'] ? 'upload_type' : '' }}"
                    style="width:{{ $width }}%;height:{{ $map_img['height'][$j] }}%;left:0%;top:{{ $map_img['y'][$j] }}%;transform:{{ $map_img['angle'][$j] ?? '' }};">
                    <input type="file" accept=".png,.jpg" id="image_upload_{{ $i }}_{{ $j }}"
                      class="image_input" name="uploads[]">
                    <label class="btn custom_btn" for="image_upload_{{ $i }}_{{ $j }}">Select/Drag
                      And Drop
                      Image</label>
                    <input class="og_images" type="hidden" name="og_images[]">
                  </div>
                @endforeach
              </form>
              @break;
            @else
              <form id="previewForm" class="position-relative mb-2 product_size_div">
                @csrf
                <input type="hidden" value="{{ $product['id'] }}" name="pro_id">
                <div style="width: fit-content; max-height: 100%;height: 100%;"
                  class="d-flex position-relative switch_preview">
                  <img src="{{ url('images/products/' . $map_img['image_path']) }}" height="100%"
                    class="img-thumbnail pre_img" alt="Mapped Image">
                  <div class="mapped-areas">
                    @foreach ($map_img['x'] as $j => $x)
                      <div class="position-absolute edit_buttons"
                        style="left:calc({{ $x }}%);top:calc({{ $map_img['y'][$j] }}% - 30px); transform:{{ $map_img['angle'][$j] ?? '' }};">
                        <div class="mx-2 d-flex">
                          <div class="mx-1">
                            <button type="button" value="{{ $i }}_{{ $j }}"
                              class="btn btn-danger p-1 py-0 delete_image">
                              <i class="fa-solid fa-trash" style="font-size: 10px;"></i>
                            </button>
                          </div>
                          <div class="mx-1">
                            <button type="button" class="btn btn-warning p-1 py-0 center-reset-button"
                              value="{{ $i }}_{{ $j }}"><i class="fa-solid fa-rotate-right"
                                style="font-size: 10px;"></i></button>
                          </div>
                          <div class="mx-1">
                            <button type="button" class="btn btn-warning add_text_button p-1 py-0"
                              value="{{ $i }}_{{ $j }}"><span style="font-size: 10px;"><i
                                  class="fa-solid fa-font"></i><i class="fa-solid fa-i-cursor mx-1"></i></span></button>
                          </div>
                          <input type="color" id="color_input_{{ $i }}_{{ $j }}"
                            value="{{ $i }}_{{ $j }}" name="color[]"
                            class="d-none color_input">
                          <div class="mx-1">
                            <label for="color_input_{{ $i }}_{{ $j }}"
                              class="btn btn-warning color_button p-1 py-0"
                              value="{{ $i }}_{{ $j }}"><i style="font-size: 10px;"
                                class="fa-solid fa-palette"></i></label>
                          </div>
                        </div>
                      </div>
                      <div id="pre_map_{{ $i }}_{{ $j }}"
                        class="position-absolute pre_map {{ $map_img['upload_type'] ? 'upload_type' : '' }}"
                        style="width:{{ $map_img['width'][$j] }}%;height:{{ $map_img['height'][$j] }}%;left:{{ $x }}%;top:{{ $map_img['y'][$j] }}%;transform:{{ $map_img['angle'][$j] ?? '' }};">
                        <input type="file" accept=".png,.jpg"
                          id="image_upload_{{ $i }}_{{ $j }}" class="image_input"
                          name="uploads[]">
                        <label class="btn custom_btn"
                          for="image_upload_{{ $i }}_{{ $j }}">Select/Drag And Drop
                          Image</label>
                        <input class="og_images" type="hidden" name="og_images[]">
                      </div>
                    @endforeach
                  </div>
                </div>

              </form>
            @endif
          @endforeach
        </div>
        <div id="previewImages" class="row m-0"></div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  {{-- Your existing jQuery logic --}}

  <script>
    var max_i = "{{ $i ?? 0 }}";
    var max_j = "{{ $j ?? 0 }}";
    $(document).on("click", ".delete_image", function() {
      let val = $(this).attr("value");
      let pre_map = $("#pre_map_" + val);
      pre_map.css("background", "rgba(255, 255, 255, 0.519)");
      pre_map.html(
        `<input type="file" accept=".png,.jpg" id="image_upload_${val}" class="image_input" name="uploads[]"><label class="btn custom_btn" for="image_upload_${val}">Select/Drag And Drop Image</label>`
      );
    });

    $(document).on("change", ".image_input", function(ev) {
      let input_ele = $(this);
      let file = input_ele[0].files[0];

      if (file) {
        let reader = new FileReader();

        reader.onload = function(e) {
          let imgData = e.target.result;
          let container = input_ele.closest('.pre_map');

          // Check HD image (minimum 1000x1000 px)
          let img = new Image();
          img.onload = function() {
            if (img.width < 1000 || img.height < 1000) {
              showAlert("Please upload an HD image (minimum 1000X1000 pixels).", "danger", "")
              input_ele.val(""); // Reset file input
              return;
            }

            container.css("background", "transparent");
            container.find('.custom_btn').remove();

            // Create draggable wrapper with data attributes
            let wrapper = $('<div>', {
              class: 'draggable-resizable',
              'data-img': imgData
            }).append($('<div>', {
              class: 'resize-handle'
            }));

            // Add a preview (optional)
            let previewImg = $('<img>', {
              src: imgData,
              class: 'uploaded-img'
            });
            wrapper.append(previewImg);

            container.append(wrapper);
            makeDraggableResizable(wrapper, container);
          };
          img.src = imgData;
        };
        reader.readAsDataURL(file);
      }
    });

    function makeDraggableResizable(element, container) {
      let isDragging = false;
      let isResizing = false;

      element.draggable({
        containment: false,
        start: function() {
          if (isResizing) return false;
          isDragging = true;
        },
        stop: function() {
          isDragging = false;
        }
      }).resizable({
        containment: false,
        handles: 'n, e, s, w, ne, se, sw, nw',
        start: function() {
          if (isDragging) return false;
          isResizing = true;
        },
        stop: function() {
          isResizing = false;
        }
      });
    }

    $(document).on('click', '.center-reset-button', function() {
      let input_ele = $(this).attr("value");
      let container = $('#pre_map_' + input_ele);
      let wrapper = container.find('.draggable-resizable');
      wrapper.css({
        top: '0%',
        left: '0%',
        width: '100%',
        height: '100%'
      });
    });
  </script>

  <script>
    const CURVED_KEYWORDS = ["mug", "bottle", "can", "jug", "glass", "jar", "thermos", "flask", "goblet", "vase",
      "kettle", "cup"
    ];
    const FLAT_KEYWORDS = ["t-shirt", "shirt", "jeans", "bag", "laptop", "notebook", "pad", "mouse", "tablet", "book",
      "folder"
    ];
    let mobilenetModel = null;

    // Load model on page ready
    $(document).ready(async function() {
      mobilenetModel = await mobilenet.load();
      console.log("MobileNetV2 loaded");
    });

    $('#view_preview').on('click', function() {
      $('.switch_preview').each(function() {
        const img = $(this).find('.pre_img')[0];
        if (!img || !mobilenetModel) return;

        classifyImage(img, $(this));
      });
    });

    function classifyImage(imgElement, container) {
      const tfImg = tf.browser.fromPixels(imgElement).toFloat();
      const resized = tf.image.resizeBilinear(tfImg, [224, 224]);
      const expanded = resized.expandDims(0);
      const normalized = expanded.div(tf.scalar(255));

      mobilenetModel.classify(normalized).then(predictions => {
        const label = predictions[0].className.toLowerCase();
        const confidence = (predictions[0].probability * 100).toFixed(2);
        let shape = "UNKNOWN";

        if (CURVED_KEYWORDS.some(word => label.includes(word))) {
          shape = "CURVED";
        } else if (FLAT_KEYWORDS.some(word => label.includes(word))) {
          shape = "FLAT";
        }

        // Remove previous result and show new one
        container.find('.classification-result').remove();
        container.append(resultHTML);

        // Optional: Add visual border
        if (shape === "CURVED") {
          $(imgElement).css("border", "3px solid green");
        } else if (shape === "FLAT") {
          $(imgElement).css("border", "3px solid blue");
        } else {
          $(imgElement).css("border", "3px solid gray");
        }
      });
    }

    $(document).on("click", ".add_text_button", function() {
      let val = $(this).attr("value"); // Format: "i_j"
      let target = $('#pre_map_' + val);
      target.html("");
      let textId = "text_" + val;
      target.find('.custom_btn').remove();
      let pre_map = $("#pre_map_" + val);
      pre_map.css("background", "transparent");
      // Check if text already exists
      if (target.find('#' + textId).length > 0) {
        showAlert("Only one text allowed in this area.", "warning", "")
        return;
      }

      // Create editable text box
      let textBox = $(`<div class="custom-text-box text-center" id="${textId}" name="user_text[]" contenteditable="true">
            &nbsp;
        </div>`);

      target.append(textBox);
      makeTextDraggableResizable(textBox);
    });

    function makeTextDraggableResizable(element) {
      element.draggable({
        containment: "parent"
      }).resizable({
        containment: "parent"
      });
    }
    $(document).on("change", ".color_input", function() {
      let id = $(this).attr("value");
      let val = $(this).val()
      $("#text_" + id).css("color", val);
    })
    $(document).on("click", "#view_preview", function() {
      let button = $(this);
      if (button.text() == "View Preview") {
        button.text("Edit");
        $(".edit_buttons").addClass("d-none");
      } else {
        button.text("View Preview");
        $(".edit_buttons").removeClass("d-none");
      }
    });

    $(document).ready(function() {
      $(".pre_map.is_curve").each(function() {
        ele = $(this);
        w = ele.outerWidth();
        h = ele.outerHeight();
        ele.css("clip-path", `path('M0,0 Q ${w/2},8 ${w},0 L${w},${h-8} Q ${w/2} ${h} 0,${h-8} Z')`);
      });
    });
    $(document).on("focus", ".custom-text-box", function() {
      let html = $(this).html().replaceAll("Enter Text", "&nbsp;");
      if ($(this).text().trim() == "Enter Text") $(this).html(html);
    })

    let qty = 1;

    function updateQty(val) {
      qty += val;
      if (qty < 1) qty = 1;
      document.getElementById('quantity').value = qty;
    }

    function toggleDesc(e) {
      e.preventDefault();
      document.getElementById('short-desc').classList.toggle('d-none');
      document.getElementById('full-desc').classList.toggle('d-none');
      e.target.remove();
    }
  </script>

  <script>
    var baseDpi = 96;

    function getScaledSize(sizeStr) {
      // 1. H X DIA 10 CM X 6.5 CM
      let match = sizeStr.match(/(\d+(\.\d+)?)\s*CM\s*X\s*(\d+(\.\d+)?)/i);
      if (match) {
        const heightCm = parseFloat(match[1]);
        const diaCm = parseFloat(match[3]);
        // Convert to real pixels
        const realHeight = (heightCm / 2.54) * baseDpi;
        const realWidth = (Math.PI * diaCm / 2.54) * baseDpi;
        // Get screen size
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight - 200;
        // Calculate scale
        const widthScale = screenWidth / realWidth;
        const heightScale = screenHeight / realHeight;
        const scaleFactor = Math.min(widthScale, heightScale, 1);
        // Apply scaling
        const scaledHeight = (realHeight * scaleFactor).toFixed(2);
        const scaledWidth = (realWidth * scaleFactor).toFixed(2);
        return {
          height: scaledHeight,
          width: scaledWidth
        };
      }

      // 2. L14.5XH2.5XW15.3 CM (find H and W)
      match = sizeStr.match(/L(\d+(\.\d+)?)XH(\d+(\.\d+)?)XW(\d+(\.\d+)?)/i);
      if (match) {
        const heightCm = parseFloat(match[3]);
        const widthCm = parseFloat(match[5]);
        const realHeight = (heightCm / 2.54) * baseDpi;
        const realWidth = (widthCm / 2.54) * baseDpi;
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight - 200;
        const widthScale = screenWidth / realWidth;
        const heightScale = screenHeight / realHeight;
        const scaleFactor = Math.min(widthScale, heightScale, 1);
        const scaledHeight = (realHeight * scaleFactor).toFixed(2);
        const scaledWidth = (realWidth * scaleFactor).toFixed(2);
        return {
          height: scaledHeight,
          width: scaledWidth
        };
      }

      // 3. W11.2XH50.6 CM (find W and H)
      match = sizeStr.match(/W(\d+(\.\d+)?)XH(\d+(\.\d+)?)/i);
      if (match) {
        const widthCm = parseFloat(match[1]);
        const heightCm = parseFloat(match[3]);
        const realHeight = (heightCm / 2.54) * baseDpi;
        const realWidth = (widthCm / 2.54) * baseDpi;
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight - 200;
        const widthScale = screenWidth / realWidth;
        const heightScale = screenHeight / realHeight;
        const scaleFactor = Math.min(widthScale, heightScale, 1);
        const scaledHeight = (realHeight * scaleFactor).toFixed(2);
        const scaledWidth = (realWidth * scaleFactor).toFixed(2);
        return {
          height: scaledHeight,
          width: scaledWidth
        };
      }
      return null;
    }

    $(document).ready(function() {
      let size = `{{ $product['size']['name'] }}`;
      const result = getScaledSize(size);
      if (result) {
        $(".product_size_div").css({
          height: result.height + "px",
          width: result.width + "px",
          background: "grey"
        });
        let image_mapped = {!! json_encode($map_imgs) !!};
        image_mapped.forEach(ele => {
          // console.log(ele.width);
          // let cr = (Math.PI * ele.width / 2.54);
          // console.log((Math.PI * ele.width));
          // $("#img_div").css("width",cr+"px");
          // $("#img_div").css("height",ele.height+"px");
          // $("#img_div").css("background","red");

          if (ele.upload_type == "2") {
            let val = "1_1";
            let pre_map = $("#pre_map_" + val);
            pre_map.css("background", "rgba(255, 255, 255, 0.519)");
            // pre_map.html(
            //   `<input type="file" accept=".png" id="image_upload_${val}" class="d-none image_input" name="uploads[]"><label class="btn custom_btn" for="image_upload_${val}">Select Image</label>`
            // );
          }
        });
      } else {
        $(".product_size_div").css({
          height: "80vh",
          width: "80vw",
          background: "grey"
        });
        $('#output').html("Invalid size format.");
      }
    });

    $(document).ready(function() {
      $('#submitPreview').on('click', function(e) {
        e.preventDefault();

        let formData = new FormData($('#previewForm')[0]);
        let preMaps = $('.pre_map');
        let total = preMaps.length;
        let completed = 0;
        for (let i = 0; i <= max_i; i++) {
          for (let j = 0; j <= max_j; j++) {
            // preMaps.each(function(index) {
            let preMap = $(`#pre_map_${i}_${j}`); //$(this);
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            let width = preMap.width();
            let height = preMap.height();

            canvas.width = width * 5;
            canvas.height = height * 5;
            ctx.clearRect(0, 0, width, height);

            let totalTasks = preMap.find('.draggable-resizable').length;
            let tasksCompleted = 0;

            // Draw images
            preMap.find('.draggable-resizable').each(function() {
              let el = $(this);
              let imgSrc = el.attr('data-img');
              let pos = el.position();
              let w = el.width();
              let h = el.height();

              let img = new Image();
              img.onload = function() {
                ctx.drawImage(img, pos.left, pos.top, w * 5, h * 5);
                tasksCompleted++;
                if (tasksCompleted === totalTasks) drawTextAndExport();
              };
              img.src = imgSrc;
            });

            // No image? Go straight to text
            if (totalTasks === 0) drawTextAndExport();

            function drawTextAndExport() {
              preMap.find('.custom-text-box').each(function() {
                let box = $(this);
                formData.append(`user_text[]`, box.text());
                let pos = box.position();
                let fontSize = parseInt(box.css('font-size')) || 16;
                let color = box.css('color') || '#000';
                let boxWidth = box.outerWidth(); // get box width for centering

                ctx.font = `${fontSize}px Arial`;
                ctx.fillStyle = color;
                ctx.textAlign = 'center'; // <-- Center align text
                ctx.textBaseline = 'top'; // so that positioning is consistent

                // Get each line from the contenteditable div
                let lines = [];
                box.contents().each(function() {
                  if (this.nodeType === 3) {
                    // Text node
                    lines.push(this.textContent);
                  } else if (this.nodeType === 1) {
                    if ($(this).is('br')) {
                      lines.push('');
                    } else {
                      lines.push($(this).text());
                    }
                  }
                });

                let centerX = pos.left + boxWidth / 2; // center X position

                // Draw each line with spacing
                lines.forEach((line, index) => {
                  ctx.fillText(line, centerX, pos.top + fontSize * index);
                });
              });

              canvas.toBlob(function(blob) {
                formData.append(`final_image_${i}_${j}[]`, blob, `preview_${i}_${j}.png`);
                completed++;
                if (completed === total) {
                  submitFormWithImages(formData);
                }
              }, 'image/png');
            }

            // });

          }
        }

      });

      function submitFormWithImages(formData) {
        $.ajax({
          url: "{{ route('showpreview') }}",
          method: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            // 👇 Your original preview logic kept untouched
            if (response.status === "success" && Array.isArray(response.preview)) {
              // $('#previewImages').empty(); // Clear previous images
              // response.preview.forEach(function(url) {
              //   $('#previewImages').append(`
            //   <div class="col-md-4 mb-3">
            //   <img src="${url}" alt="Preview" class="img-fluid img-thumbnail">
            //   </div>`);
              // });
              window.location.href = '{{ route('viewpreview', enc($product['id'])) }}';
            }
          },
          error: function(xhr) {
            console.error("Error:", xhr.responseText);
          }
        });
      }
    });

    $(document).on("click", "#remove_background", function() {
      // Find the first uploaded image input (you can adjust selector as needed)
      let imageInput = $(".image_input[type='file']").filter(function() {
        return this.files && this.files.length > 0;
      }).first();

      if (imageInput.length === 0) {
        showAlert("Please upload an image first.", "warning", "")
        return;
      }

      let file = imageInput[0].files[0];
      let formData = new FormData();
      formData.append('image', file);
      formData.append('_token', '{{ csrf_token() }}');
      $.ajax({
        url: "{{ route('backgroundRemove') }}",
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          if (response.status === "success" && response.image_url) {
            // Replace the image preview with the new image
            let container = $(imageInput).closest('.pre_map');
            container.find('.draggable-resizable, .custom_btn').remove();
            container.find(".og_images").val(response.og_images);
            // Create new draggable-resizable wrapper for the new image
            let wrapper = $('<div>', {
              class: 'draggable-resizable',
              'data-img': response.image_url
            }).append($('<div>', {
              class: 'resize-handle'
            }));

            let previewImg = $('<img>', {
              src: response.image_url,
              class: 'uploaded-img'
            });
            wrapper.append(previewImg);

            container.append(wrapper);
            makeDraggableResizable(wrapper, container);

            // Set the new image as the value of the input (simulate file input with Blob)
            fetch(response.image_url)
              .then(res => res.blob())
              .then(blob => {
                // Create a new File object
                let newFile = new File([blob], "removed_bg.png", {
                  type: blob.type
                });
                // Create a DataTransfer to set the file input
                let dt = new DataTransfer();
                dt.items.add(newFile);
                imageInput[0].files = dt.files;
              });

          } else {
            showAlert("Background removal failed. Please try again!", "danger", "");
          }
        },
        error: function(xhr) {
          showAlert("Error removing background. Please try again!", "danger", "");
        }
      });
    });
  </script>
  @php
    if (request()->query('converted_path') != '') {
        $converted_path = dec(request()->query('converted_path'));
    }
  @endphp
  @if (isset($converted_path) && $converted_path != '')
    <script>
      $(document).ready(function() {
        setTimeout(function() {
          $(".image_input[type='file']").each(function() {
            let imageInput = $(this);
            let container = imageInput.closest('.pre_map');
            if (container.length === 0) return;

            container.find('.draggable-resizable, .custom_btn').remove();

            // Create new draggable-resizable wrapper
            let wrapper = $('<div>', {
              class: 'draggable-resizable',
              'data-img': `{{ $converted_path }}`
            }).append($('<div>', {
              class: 'resize-handle'
            }));

            let previewImg = $('<img>', {
              src: `{{ $converted_path }}`,
              class: 'uploaded-img'
            });
            wrapper.append(previewImg);

            container.append(wrapper);

            if (typeof makeDraggableResizable === "function") {
              makeDraggableResizable(wrapper, container);
            }

            // Set the new image as the value of the input (simulate file input with Blob)
            fetch(`{{ $converted_path }}`)
              .then(res => res.blob())
              .then(blob => {
                let newFile = new File([blob], "converted.png", {
                  type: blob.type
                });
                let dt = new DataTransfer();
                dt.items.add(newFile);
                imageInput[0].files = dt.files;
              });
          }); // <-- this was missing
        }, 300); // Delay to ensure DOM is ready
      });
    </script>
  @endif
@endsection