@extends('admin.layouts.main')

@php
  $page_name = 'Product Image Mapping';
@endphp

@section('style')
  <style>
    body {
      cursor: pointer;
    }

    .pre_map {
      transform-origin: center;
    }

    .image-container {
      position: relative;
      display: inline-block;
      width: fit-content;
      max-width: 500px;
    }

    .editable-area {
      position: absolute;
      border: 2px dashed red;
      cursor: pointer;
      resize: both;
      overflow: hidden;
      background: rgba(255, 0, 0, 0.2);
    }

    .rectangle {
      border-radius: 0;
    }

    .circle {
      border-radius: 50%;
    }

    .heart {
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, 0.2);
      position: absolute;
      clip-path: path("M50,10 C30,-10 0,20 0,40 C0,80 50,100 50,100 C50,100 100,80 100,40 C100,20 70,-10 50,10 Z");
    }

    .star {
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, 0.2);
      position: absolute;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .select-image {
      width: 100px;
      height: 100px;
      cursor: pointer;
      margin: 5px;
      border: 2px solid transparent;
    }

    .image_active {
      border: 2px solid blue;
    }

    .delete-area {
      position: absolute;
      top: -10px;
      right: -10px;
      background: red;
      color: white;
      border: none;
      font-size: 12px;
      cursor: pointer;
      padding: 3px 5px;
      border-radius: 50%;
    }

    .start_drag {
      cursor: move;
    }

    .text-white {
      color: white;
    }

    .editor_area {
      position: relative;
    }
  </style>
@endsection

@section('content')
  <div class="container">
    <div class="card">
      <div class="card-header">
        <div class="d-flex justify-content-between">
          <h3>Map Editable Areas on Product</h3>
          <div>
            <a href="{{ route('admin.testimagemap', enc($product['id'])) }}" class="btn btn-warning">Test Preview</a>
          </div>
        </div>
      </div>
      <div>
        @if (!empty($map_imgs))
          <div class="mb-3 p-2">
            <label class="form-label">Mapped Images</label>
            <div class="row m-0">
              @foreach ($map_imgs as $map_img)
                <div class="col-1">
                  <div>
                    <button type="button" class="btn btn-danger btn-sm delete_mapped_image"
                      value="{{ enc($map_img['id']) }}">
                      Delete
                    </button>
                  </div>
                  <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 $index => $x)
                        <div class="border border-danger position-absolute pre_map"
                          style="width:{{ $map_img['width'][$index] }}%;height:{{ $map_img['height'][$index] }}%;left:{{ $x }}%;top:{{ $map_img['y'][$index] }}%;transform:{{ $map_img['angle'][$index] ?? '' }};">
                        </div>
                      @endforeach
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        @else
          <div class="mb-3 px-4">
            <p>No previously mapped images found.</p>
          </div>
        @endif
      </div>
      <div class="card-body">
        <form id="imageMappingForm">
          @csrf
          {{-- Image Selection (5 Images) --}}
          <div class="mb-3">
            <label class="form-label">Select an Image</label>
            <div class="d-flex flex-wrap">
              @for ($i = 1; $i <= 5; $i++)
                @php
                  $imagePath = !empty($product["product_image_$i"])
                      ? url('images/products/' . $product["product_image_$i"])
                      : null;
                @endphp
                @if ($imagePath)
                  <img src="{{ $imagePath }}" class="img-thumbnail select-image" data-image="{{ $imagePath }}">
                @endif
              @endfor
            </div>
          </div>

          {{-- Product Image (Editable Area inside) --}}
          <button class="btn btn-sm btn-primary" type="button" id="add_area_btn">add Area</button>
          <div class="mb-3">
            <div class="image-container editor_area">
              @if (isset($map_imgs[0]['x']))
                @foreach ($map_imgs[0]['x'] as $k => $item)
                  <div class="editable-area rectangle editableArea"
                    style="width:{{ $map_imgs[0]['width'][$k] }}%;height:{{ $map_imgs[0]['height'][$k] }}%;left:{{ $map_imgs[0]['x'][$k] }}%;top:{{ $map_imgs[0]['y'][$k] }}%; transform:{{ $map_imgs[0]['angle'][$k] ?? '' }};">
                    <div curves = '{{ $map_imgs[0]['top_curve'][$k] }},{{ $map_imgs[0]['bottom_curve'][$k] }}'
                      class="position-absolute editableArea_in w-100 h-100"
                      style="z-index:1; background:rgba(255, 159, 159, 0.59);">
                      <p class="start_drag m-0"><i class="fa-solid fa-up-down-left-right text-white"></i></p>
                      <p class="start_rotate text-white"><i class="fa-solid fa-rotate"></i></p> <button type="button"
                        class="delete-area m-2"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                  </div>
                @endforeach
              @endif
              @if (isset($map_imgs[0]['image_path']) && $map_imgs[0]['image_path'] != '')
                <img id="productImage" src="{{ url('images/products/' . $map_imgs[0]['image_path']) }}" class="img-fluid"
                  alt="Product Image">
              @else
                <img id="productImage" src="" class="img-fluid" alt="Product Image">
              @endif
            </div>
          </div>
          <div class="mb-3">
            <label for="upload_type" class="form-label">Image upload type</label>
            <select id="upload_type" name="upload_type" class="form-control">
              <option value="1">Only selected image</option>
              <option value="2">full width image</option>
            </select>
          </div>
          {{--  Options --}}


          <div class="mb-3">
            <label for="is_curve" class="form-label">Image Is Curve</label>
            <select id="is_curve" name="is_curve" class="form-control">
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
          </div>

          <div class="mb-3 d-none">
            <label for="allowsText" class="form-label">Allow Text</label>
            <select id="allowsText" name="allows_text" class="form-control">
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="for_microsite" class="form-label">Mapping for</label>
            <select id="for_microsite" name="for_microsite" class="form-control">
              <option value="0">Print On Demand</option>
              <option value="1">Micorsite</option>
            </select>
          </div>

          <div class="my-2 d-none">
            <button class="add_curve_form_top btn btn-sm btn-primary" type="button">Add curve from Top</button>
            <button class="remove_curve_form_top btn btn-sm btn-primary" type="button">Remove curve from Top</button>
            <button class="add_curve_form_bottom btn btn-sm btn-primary" type="button">Add curve from bottom</button>
            <button class="remove_curve_form_bottom btn btn-sm btn-primary" type="button">Remove curve from
              bottom</button>
          </div>


          <button type="button" id="submit_btn" class="btn btn-success">Save Mapping</button>
        </form>
      </div>
    </div>
  </div>

  @include('components.alertmodal', [
      'modal_id' => 'deleteMappedImageModal',
      'form_id' => 'deleteMappedImageForm',
      'action' => route('admin.deletemappedimage'),
      'modal_title' => 'Confirm Deletion',
      'input_id' => 'deleteMappedImageId',
      'modal_mess' => 'Are you sure you want to delete this mapped image?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteMappedImageButton',
  ])

@endsection

@section('script')
  <script>
    var top_curve = 0;
    var bottom_curve = 0;

    function get_edit_part(width = "100px", height = "100px", left = "10px", top = "10px", transform = "") {
      return `<div class="editable-area rectangle editableArea" style="width:${width};height:${height};left:${left};top:${top};transform:${transform};">
        <div class="position-absolute editableArea_in w-100 h-100" style="z-index:1; background:rgba(255, 159, 159, 0.59);">
          <p class="start_drag m-0"><i class="fa-solid fa-up-down-left-right text-white"></i></p><p class="start_rotate text-white"><i class="fa-solid fa-rotate"></i></p><button type="button" class="delete-area m-2"><i class="fa-solid fa-xmark"></i></button>
          </div>
        </div>`;
    }

    $(document).on("click", ".switch_preview", function() {
      let pre_view = $(this);
      let img_src = pre_view.find(".pre_img").attr("src");
      let mappedAreas = pre_view.find(".pre_map");

      // Set the selected image as the main product image
      $("#productImage").attr("src", img_src);

      // Clear existing editable areas
      $(".editor_area .editable-area").remove();

      // Add mapped areas to the editor
      mappedAreas.each(function() {
        let area = $(this);
        let width = area[0].style.width;
        let height = area[0].style.height;
        let left = area[0].style.left;
        let top = area[0].style.top;
        let transform = area[0].style.transform;

        $(".editor_area").append(get_edit_part(width, height, left, top, transform));
      });
    });

    $(document).ready(function() {
      let selectedImage = null;
      let productImage = $("#productImage");
      let editableArea = $(".editableArea");

      // Select image from uploaded images
      $(document).on("click", ".select-image", function() {
        let image = $(this);
        let img_src = image.attr("src");
        productImage.attr("src", img_src);
      })

      $(document).on("click", "#add_area_btn", function() {
        $(".editor_area").append(get_edit_part());
      })

      // Make Editable Area Draggable
      var isDragging = false;
      var currentarea = null;

      $(document).on("mousedown", ".start_drag", function(e) {
        isDragging = true;
        currentarea = $(this).closest(".editable-area");
      });

      $(document).on("mousemove", ".editor_area", function(e) {
        if (isDragging && currentarea) {
          let containerOffset = $(".editor_area").offset();
          let newX = e.pageX - containerOffset.left;
          let newY = e.pageY - containerOffset.top;
          // Ensure the draggable area stays within the container bounds
          newX = Math.max(0, Math.min(newX, $(".editor_area").width() - currentarea.outerWidth()));
          newY = Math.max(0, Math.min(newY, $(".editor_area").height() - currentarea.outerHeight()));
          currentarea.css({
            left: `${newX}px`,
            top: `${newY}px`
          });
        }
      });

      $(document).on("mouseup", "body", function() {
        isDragging = false;
        currentarea = null;
      });

      // $(document).on("mouseup", "body", function() {
      //   isDragging = false;
      // });

      //Change Shape
      // shapeSelect.addEventListener("change", function() {
      //   editableArea.className = `editable-area ${this.value}`;
      // });

      //Delete Editable Area
      $(document).on("click", ".delete-area", function() {
        $(this).closest(".editableArea").remove();
      });
    });


    $('#submit_btn').click(function(event) {
      let img_ele = $("#productImage");
      let img_h = img_ele.height();
      let img_w = img_ele.width();

      event.preventDefault();

      let editableAreas = [];

      let image = $('#productImage').attr('src') ?? '';
      let product_id = "{{ enc($product['id']) }}";
      $('.editable-area').each(function() {
        area_ele = $(this);
        angle = getRotationAngle(area_ele);
        area_h = area_ele.outerHeight();
        area_w = area_ele.outerWidth();
        area_x = area_ele[0].offsetLeft;
        area_y = area_ele[0].offsetTop;
        per_h = (area_h / img_h) * 100;
        per_w = (area_w / img_w) * 100;
        per_x = (area_x / img_w) * 100;
        per_y = (area_y / img_h) * 100;
        s_bottom_curve = (bottom_curve / area_h) * 100;
        s_top_curve = (top_curve / area_h) * 100;
        let area = {
          height: per_h,
          width: per_w,
          x: per_x,
          y: per_y,
          angle: angle,
          bottom_curve: s_bottom_curve,
          top_curve: s_top_curve,
        };
        editableAreas.push(area);
      });

      if (editableAreas.length === 0) {
        alert('Please add at least one editable area.');
        return;
      }

      $.ajax({
        url: "{{ route('admin.savemapimage') }}",
        method: 'POST',
        data: {
          _token: $('input[name="_token"]').val(),
          areas: editableAreas,
          image: image,
          product_id: product_id,
          allows_text: $('#allowsText').val(),
          upload_type: $('#upload_type').val(),
          for_microsite: $('#for_microsite').val(),
          is_curve: $('#is_curve').val()
        },
        success: function(response) {
          showAlert(response["message"], "success", "");
          try {
            if (response["success"] == true) {
              window.location.reload();
            }
          } catch (error) {
            showAlert("An error occurred.", "danger", "");
          }
        },
        error: function(xhr, status, error) {
          let errorMessage = xhr.responseJSON?.message || "An error occurred.";
          showAlert(errorMessage, "danger", "");
        }
      });
    });
    $(document).on("click", ".delete_mapped_image", function() {
      let val = $(this).attr("value");
      $("#deleteMappedImageId").val(val);
      $("#deleteMappedImageModal").modal("show");
    });

    $(document).on("click", ".pre_img , .select-image", function() {
      let img_src = $(this).attr("src");
      $(".image_active").removeClass("image_active");
      $(`img[src='${img_src}'].pre_img , img[src='${img_src}'].select-image`).addClass("image_active");
    })
    $(document).ready(function() {
      img_src = $("#productImage").attr("src");
      $(".image_active").removeClass("image_active");
      $(`img[src='${img_src}'].pre_img , img[src='${img_src}'].select-image`).addClass("image_active");
    });

    function getRotationAngle($element) {
      let transform = $element[0].style.transform;
      if (transform == "") {
        transform = "rotate(0deg)";
      }
      return transform;
    }


    let isRotating = false;
    let currentElement = null;
    let center = {
      x: 0,
      y: 0
    };
    let startAngle = 0;

    function getCenter(elem) {
      const offset = elem.offset();
      const width = elem.outerWidth();
      const height = elem.outerHeight();
      return {
        x: offset.left + width / 2,
        y: offset.top + height / 2
      };
    }

    function getAngle(center, point) {
      const dy = point.y - center.y;
      const dx = point.x - center.x;
      return Math.atan2(dy, dx) * (180 / Math.PI);
    }

    $(document).on('mousedown touchstart', ".start_rotate", function(e) {
      e.preventDefault();

      isRotating = true;
      currentElement = $(this).closest('.editableArea');
      center = getCenter(currentElement);

      const pageX = e.pageX || e.originalEvent.touches[0].pageX;
      const pageY = e.pageY || e.originalEvent.touches[0].pageY;

      startAngle = getAngle(center, {
        x: pageX,
        y: pageY
      });

      // Store the current rotation angle
      const currentTransform = currentElement.css('transform');
      const match = /rotate\(([-\d.]+)deg\)/.exec(currentTransform);
      currentElement.data('rotation', match ? parseFloat(match[1]) : 0);
    });

    $(document).on('mousemove touchmove', function(e) {
      if (!isRotating || !currentElement) return;

      const pageX = e.pageX || e.originalEvent.touches[0].pageX;
      const pageY = e.pageY || e.originalEvent.touches[0].pageY;

      const currentAngle = getAngle(center, {
        x: pageX,
        y: pageY
      });
      const rotation = currentElement.data('rotation') || 0;
      const newAngle = rotation + (currentAngle - startAngle);

      currentElement.css('transform', `rotate(${newAngle}deg)`);
    });

    $(document).on('mouseup touchend', function() {
      if (isRotating && currentElement) {
        const transform = currentElement.css('transform');
        const match = /rotate\(([-\d.]+)deg\)/.exec(transform);
        currentElement.data('rotation', match ? parseFloat(match[1]) : 0);
      }
      isRotating = false;
      currentElement = null;
    });



    function set_path() {
      $(".editableArea_in").each(function() {
        ele = $(this);
        w = ele.outerWidth();
        h = ele.outerHeight();
        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')`
        );
      });
    }

    $(document).on("click", ".add_curve_form_top", function() {
      top_curve = (top_curve * 1) + 1;
      set_path()
    })

    $(document).on("click", ".remove_curve_form_top", function() {
      top_curve = (top_curve * 1) - 1;
      set_path()
    })
    $(document).on("click", ".add_curve_form_bottom", function() {
      bottom_curve = (bottom_curve * 1) + 1;
      set_path()
    })
    $(document).on("click", ".remove_curve_form_bottom", function() {
      bottom_curve = (bottom_curve * 1) - 1;
      set_path()
    })
    $(".editableArea_in").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