@extends('layouts.app')

@section("css")
<style>
  .hide_data{
    display: none;
  }
  #image-preview {
    max-width: 250px;
    display: inline-flex;
    display: flex;
    flex-wrap: wrap;
}
.preview-image-container {
    position: relative;
    margin-right: 1%;
    margin-bottom: 10px;
    cursor: grab;
    width: 100px;
    display: flex;
    height: 100px;
}
.preview-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 5px;
}
  .remove-icon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
  }
  .image-position {
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
  }
  .item-car img{
    width: 100%;
    max-width: 600px;
  }
  .ck-editor__editable_inline {
    min-height: 150px;
}
</style>
@endsection

@section('content')
<div class="app-main__inner">
                    <section class="product-add-section">
                        <div class="container-fluid">
                            <div class="row ">
                              
                                <div class="col-12 col-md-4 ">
                                    <h1 class="h1">Add Your Products</h1>
                                    <form class="marketplace mt-5" id="myForm" action="{{ isset($product) ? route('products.update', $product->slug) : route('products.store')}}" method="post" enctype="multipart/form-data">
                                    @csrf
                                      
                                        <div class="image-upload">
                                            <div class="image-upload-well" id="imagesUploadForm">
                                               <div class="file-group">
                                                    <label for="file">Select files to upload</label>

                                                    <input type="file" multiple="multiple" accept="image/*" id="image-upload-input" required/>
                                                </div>
                                            </div>
                                            <div id="image-preview"></div>
                                           
                                        </div>
                                         <div class="input-group">
                                            <input class="input form-control @error('name') is-invalid @enderror" type="text" name="name" id="add-title" placeholder="Add Title" value="{{ isset($product) ? $product->name :  old('name') }}" required/>
                                            <label for="input">Add Title</label>
                                          </div>
                                        <div class="input-group">
                                            <input class="input" type="number" id="original-price" name="original_price" placeholder="Original price" min="0"/>
                                            <label for="input">Original price</label>
                                        </div>
                                        <div class="input-group">
                                            <input class="input" type="number" name="sale_price" id="sale-price" placeholder="Sale price" min="0" step="any" value="{{old('sale_price')}}" required/>
                                            <label for="input">Sale price</label>
                                        </div>
                                        <div class="input-group">
                                            <input class="input" type="number" name="quantity" id="add-quantity" placeholder="Product Quantity" value="1" required/>
                                            <label for="input">Quantity</label>
                                          </div>
                                        <div class="input-group">
                                            <select name="category_id" class="input" id="select_category" required>
                                                @foreach($categories as $cat)
                                                  <option value="{{ $cat->id }}" data-value="{{ $cat->name }}">{{ $cat->name }}</option>
                                                @endforeach
                                            </select>
                                            <label for="input">Category</label>
                                        </div>
                                        <div class="input-group">
                                            <select class="input" name="product_condition" id="select_condition" required>  
                                            <option value="Brand New (Unopened Box)">Brand New (Unopened Box)</option>                                              
                                                <option value="New (Open Box)">New (Open Box)</option>                                                
                                                <option value="Used - Like New">Used - Like New</option>
                                            </select>

                                            <label for="input">Condition</label>
                                        </div>
                                        <div class="text-area" style="margin: 0 0 20px 0;">
                                            <textarea name="description" id="description" class="input" rows="10" cols="10" placeholder="Description" style="resize: none;"></textarea>

                                            <!-- <label for="input">Description</label> -->
                                        </div>
                                        <div class="input-group">
                                            <input class="input" type="number" name="shipping_cost" id="shipping-cost" placeholder="Shipping Cost" min="0"/>
                                            <label for="input">Shipping Cost</label>
                                        </div>
                                        <div class="row">
                                          <div class="col-12 mb-0"><label >Dimensions</label></div>
                                          <div class="col-12 col-lg-8 pr-0">
                                            
                                            <div class="d-flex justify-content-between">
                                              <div class="input-group dimensions">
                                                  <input class="input" type="text" name="dimensions_length" id="dimensions" placeholder="Dimensions"required/>
                                                  <label for="input">L</label>
                                                  
                                              </div>
                                              <div class="input-group dimensions">
                                                  <input class="input" type="text" name="dimensions_width" id="dimensions" placeholder="Dimensions"required/>
                                                  <label for="input">W</label>
                                                  
                                              </div>
                                              <div class="input-group dimensions">
                                                  <input class="input" type="text" name="dimensions_height" id="dimensions" placeholder="Dimensions"required/>
                                                  <label for="input">H</label>
                                                  
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-12 col-lg-4">
                                            <div class="input-group ">
                                                <select class="input" name="dimensions_unit" id="dimensions_unit" required>                                                
                                                    <option value="inches">inches</option>
                                                    <option value="centimeters">centimeters</option>
                                                </select>
                                                <label for="input">Unit</label>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="row">
                                          <div class="col-12 col-lg-8 pr-0">
                                            <div class="input-group ">
                                                <input class="input" type="number" name="weight" id="weight" placeholder="Weight" min="0" required/>
                                                <label for="input">Weight</label>
                                            </div>
                                          </div>
                                          <div class="col-12 col-lg-4">
                                            <div class="input-group">
                                                <select class="input" name="weight_unit" id="weight_unit" required>                                                
                                                    <option value="pounds">pounds</option>
                                                    <option value="ounces">ounces</option>
                                                    <option value="grams">grams</option>
                                                </select>
                                                <label for="input">Unit</label>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="input-group submit">
                                            <input class="submit" type="submit" name="submit" value="Add Product" />
                                        </div>
                                    </form>
                                </div>
                                <div class="col-12 col-md-8">
                                  
                                 <!-- <div id="myCarousel" class="carousel slide create-one">
                                    <div class="carousel-inner" role="listbox" id="previewItems">
                                    <div class="slick-slider  one-time" >
                                      
                                      </div>
                                    </div>
                                    <a class="left carousel-control" href="#myCarousel" role="button"
                                            data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button"
                                            data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                    </a>
                                  </div>-->
                                  <div id="myCarousel" class="carousel slide">
                                        <div class="carousel-inner" role="listbox" id="previewItems">
                                            
                                        </div>
                                        <a class="left carousel-control" href="#myCarousel" role="button"
                                            data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button"
                                            data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                    </a>
                                    </div>
                                <div id="preview">										
                                  <!-- <div class="slick-carousel-1 one-time">
                                    <div><img width="100px" src="http://127.0.0.1:8000/images/product-7.jpg" /></div>
                                    <div><img width="100px" src="http://127.0.0.1:8000/images/product-8.jpg" /></div>
                                    <div><img width="100px" src="http://127.0.0.1:8000/images/product-9.jpg" /></div>
                                  </div> -->
                                  <div class="preview-content"></div>
                                </div>
                              </div>
                            </div>
                        </div>
                    </section>
                </div>
@endsection


@section('scripts')
<script>
	/* code for show images to re-ordering start*/
	$(document).ready(function() {
    function updateImagePositions() {
        $('.preview-image-container').each(function(index) {
          $(this).find('.image-position').text(index + 1).attr('value', index + 1);
        });
      }

// Function to handle image upload
function handleImageUpload(event) {
    const files = event.target.files;
    if (!files || files.length === 0) return;
    let slide = 0;

    for (const file of files) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const imageUrl = e.target.result;

            // Append the new image to the slick slider
            //const sliderImage = `<div class="item item-car"><img src="${imageUrl}" /></div>`;
            //$(".slick-slider").slick('slickAdd', sliderImage);
            /*if (slide == 0){
              $(".carousel-inner").append(`<div class="item active">
                <img class="d-block w-100" src="${imageUrl}" alt="Slide">
              </div>`);
            }else{
            $(".carousel-inner").append(`<div class="item">
              <img class="d-block w-100" src="${imageUrl}" alt="Slide">
            </div>`);
            }*/

            // Create a preview image container with remove functionality
            const previewImageContainer = $('<div>').addClass('preview-image-container').attr('draggable', 'true');
            const previewImage = $('<img>').attr('src', imageUrl);
            previewImageContainer.append(previewImage);

            const imgBase64Data = $(`<textarea name="image_data[]"> ${imageUrl} </textarea>`).addClass('image-data ');
            previewImageContainer.append(imgBase64Data);


            const removeIcon = $('<button>').addClass('remove-icon').html('X');
            removeIcon.on('click', function () {
                // Remove the image from the slick slider and update positions
                const index = $(this).closest('.slick-slide').index();
                $(".slick-slider").slick('slickRemove', index);
                $(this).closest('.preview-image-container').remove();
                updateImagePositions();
            });
            slide++;
            previewImageContainer.append(removeIcon);
            $('#image-preview').append(previewImageContainer);
            if (slide === files.length) {
                // This block executes when all images have been processed
                previewImageSlider();
            }
            
        };
        reader.readAsDataURL(file);
       
    }
}

function previewImageSlider(){
  $(".carousel-inner").empty();
  $(".preview-image-container").each(function(index, element){
    var active = "";
    if(index == 0){
      var active = "active";
    }
      let imageUrl = $(this).find("img").attr("src");
      
      $(".carousel-inner").append(`<div class="item ${index} ${active} ${active}">
        <img class="d-block w-100" src="${imageUrl}" alt="Slide">
      </div>`);
  });
}


// Function to update image positions
function updateImagePositions() {
    $('.image-position').each(function (index) {
        $(this).text(index + 1);
        $(this).attr('value', index + 1);
    });
}

// Attach event listener to image upload input
$('#image-upload-input').on('change', handleImageUpload);
      let draggedElement = null;
      $('#image-preview').on('dragstart', '.preview-image-container', function(e) {
          draggedElement = $(this);
          e.originalEvent.dataTransfer.effectAllowed = 'move';
          e.originalEvent.dataTransfer.setData('text/plain', ''); // Necessary for Firefox
          draggedElement.addClass('dragging');
      });

      $('#image-preview').on('dragover', function(e) {
         e.preventDefault();
      });

      $('#image-preview').on('drop', '.preview-image-container', function(e) {
        e.preventDefault();
        const droppedElement = $(this);
        if (draggedElement && draggedElement !== droppedElement) {
          const draggedIndex = $('.preview-image-container').index(draggedElement);
          const droppedIndex = $('.preview-image-container').index(droppedElement);
          if (draggedIndex < droppedIndex) {
            droppedElement.after(draggedElement);
          } else {
            droppedElement.before(draggedElement);
          }
          updateImagePositions();
          previewImageSlider();
        }
        draggedElement.removeClass('dragging');
        draggedElement = null;
      });
    });
  </script>

<script>
    let editor;
    ClassicEditor
        .create( document.querySelector( '#description' ) )
        .then( newEditor => {
            editor = newEditor;
        } )
        .catch( error => {
            console.error( error );
        } );
</script>
<script>
$(document).ready(function() {
  // Function to update the preview
  function updatePreview() {
    const editorData = editor.getData();
	  var title = $('#add-title').val();
    var originalPrice = $('#original-price').val();
    var salePrice = $('#sale-price').val();
    var shipping_cost = $('#shipping-cost').val();
    // var category = $('#select_category').val();
    var category = $('#select_category option:selected').text();
    var condition = $('#select_condition').val();
    var dimensions = $('#dimensions').val()+$('#dimensions_unit option:selected').text();
    var weight = $('#weight').val()+$('#weight_unit option:selected').text();
    var description = editorData;
    

   
    $('.preview-content').html(`
      <p><span>Title:</span> ${title}</p>
      <p><span>Original Price:</span> ${originalPrice}</p>
      <p><span>Sale Price:</span> ${salePrice}</p>
      <p><span>Shipping Cost:</span> ${shipping_cost}</p>
      <p><span>Category: </span>${category}</p>
      <p><span>Condition:</span> ${condition}</p>
      <p><span>Description:</span> ${description}</p>
      <p><span>Dimensions:</span> ${dimensions}</p>
      <p><span>Weight:</span> ${weight}</p>
    `);
  }
  
  $('#myForm input[type="text"],  #myForm input[type="number"], #myForm textarea, #myForm select').on('input change', updatePreview);
});
</script>
@endsection