@extends('admin.layouts.main')
@php
  $page_name = 'Image map test';
@endphp

@section('style')
  <style>
    .pre_map {
      /* clip-path: polygon(0% 0%, 50% 4%, 100% 0%, 100% 96%, 50% 100%, 0% 96%); */
      /* clip-path: path("M0,0 Q-5,4 104,0 L107,90 Q50,100 0,90 Z"); */
    }

    .pre_map {
      background: rgba(255, 255, 255, 0.519);
      overflow: hidden;
      position: absolute;
    }

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

    .custom_btn {
      font-size: clamp(5px, 0.5vw, 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%;
      object-fit: contain;
      pointer-events: none;
    }

    .switch_preview {
      position: relative;
    }

    .classification-result {
      font-size: 14px;
    }
  </style>
@endsection

@section('content')
  <div class="container">
    <div class="card">
      <div class="card-header">
        @if (!empty($map_imgs))
          <div class="mb-3 p-2">
            <label class="form-label">Mapped Images</label>
            <button type="button" id="view_preview" class="btn btn-sm btn-success">View Preview</button>
            <div class="row m-0">
              @foreach ($map_imgs as $i => $map_img)
                <div class="col-6">
                  <div class="position-relative switch_preview">
                    <img src="{{ url('images/products/' . $map_img['image_path']) }}" 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">
                            <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>
                            <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>
                            <button class="btn btn-warning add_text_button p-1 py-0"
                              value="{{ $i }}_{{ $j }}" style="font-size: 10px;">Add Text</button>
                            <input type="color" id="color_input_{{ $i }}_{{ $j }}"
                              value="{{ $i }}_{{ $j }}" class="d-none color_input">
                            <label for="color_input_{{ $i }}_{{ $j }}"
                              class="btn btn-warning color_button p-1 py-0"
                              value="{{ $i }}_{{ $j }}" style="font-size: 10px;">Change
                              Colour</label>
                          </div>
                        </div>
                        <div curves = '{{ $map_imgs[0]['top_curve'][$j] }},{{ $map_imgs[0]['bottom_curve'][$j] }}' id="pre_map_{{ $i }}_{{ $j }}" class="position-absolute pre_map {{$map_img['is_curve'] ? 'is_curve':''}}"
                          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" id="iamge_upload_{{ $i }}_{{ $j }}"
                            class="d-none image_input">
                          <label class="btn custom_btn"
                            for="iamge_upload_{{ $i }}_{{ $j }}">Select
                            Image</label>
                        </div>
                      @endforeach
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        @else
          <p>No previously mapped images found.</p>
        @endif
      </div>
    </div>
  </div>

  <form action="{{route('admin.showpreview')}}" method="post" enctype="multipart/form-data">
    <input type="file" name="uploads[]">
    @csrf
    <button type="submit">submit</button>
  </form>
@endsection

@section('script')
  {{-- Your existing jQuery logic --}}
  <script>
    $(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" id="image_upload_${val}" class="d-none image_input"><label class="btn custom_btn" for="image_upload_${val}">Select 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 img = $('<img>', {
            src: e.target.result,
            class: 'uploaded-img'
          });

          let wrapper = $('<div>', {
            class: 'draggable-resizable'
          }).append(img);

          let container = input_ele.closest('.pre_map');
          container.css("background", "transparent");
          container.find('.center-reset-button').show();
          container.find('.custom_btn').remove();
          container.append(wrapper);

          makeDraggableResizable(wrapper, container);
        };

        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>

  {{-- MobileNet Classifier --}}
  <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";

        console.log(predictions);

        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);
      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) {
        alert('Only one text allowed in this area.');
        return;
      }

      // Create editable text box
      let textBox = $(`<div class="custom-text-box" id="${textId}" contenteditable="true">
            Edit text
          <span class="remove-text">&times;</span>
        </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')`);
    //   });
    // });
    $(".pre_map.is_curve").each(function() {
      ele = $(this);
      t = ele.attr("curves").split(",")[0] * 1;
      b = ele.attr("curves").split(",")[1] * 1;
      w = ele.outerWidth();
      h = ele.outerHeight();
      bottom_curve = b * h / 100;
      top_curve = t * h / 100;
      ele.css("clip-path",
        `path('M0,0 Q ${w/2},${top_curve} ${w},0 L${w},${h-bottom_curve} Q ${w/2} ${h+bottom_curve} 0,${h-bottom_curve} Z')`
      );
    });
  </script>
@endsection