@extends('layouts.admin')
@section('styles')

<link href="{{asset('assets/admin/css/product.css')}}" rel="stylesheet"/>
<link href="{{asset('assets/admin/css/jquery.Jcrop.css')}}" rel="stylesheet"/>
<link href="{{asset('assets/admin/css/Jcrop-style.css')}}" rel="stylesheet"/>
  <style>

    .img-container img {
      max-width: 100%;
    }
    .container {
      margin: 20px auto;
      max-width: 960px;
    }

    img {
      max-width: 100%;
    }

    .row,
    .preview {
      overflow: hidden;
    }

    .col {
      float: left;
    }

    .col-6 {
      width: 50%;
    }

    .col-3 {
      width: 25%;
    }

    .col-2 {
      width: 16.7%;
    }

    .col-1 {
      width: 8.3%;
    }
  </style>
@endsection
@section('content')

						<div class="content-area">
							<div class="mr-breadcrumb">
								<div class="row">
									<div class="col-lg-12">
											<h4 class="heading">{{ __('Physical Product') }} <a class="add-btn" href="{{ route('admin-prod-types') }}"><i class="fas fa-arrow-left"></i> {{ __('Back') }}</a></h4>
											<ul class="links">
												<li>
													<a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }} </a>
												</li>
											<li>
												<a href="javascript:;">{{ __('Products') }} </a>
											</li>
											<li>
												<a href="{{ route('admin-prod-index') }}">{{ __('All Products') }}</a>
											</li>
												<li>
													<a href="{{ route('admin-prod-types') }}">{{ __('Add Product') }}</a>
												</li>
												<li>
													<a href="{{ route('admin-prod-physical-create') }}">{{ __('Physical Product') }}</a>
												</li>
											</ul>
									</div>
								</div>
							</div>
							<div class="add-product-content">
								<div class="row">
									<div class="col-lg-12">
										<div class="product-description">
											<div class="body-area">

					                      <div class="gocover" style="background: url({{asset('assets/images/'.$gs->admin_loader)}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);"></div>
					                      <form id="geniusform" action="{{route('admin-prod-store')}}" method="POST" enctype="multipart/form-data">
					                        {{csrf_field()}}

                        @include('includes.admin.form-both')


												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Name') }}* </h4>
																<p class="sub-heading">{{ __('(In Any Language)') }}</p>
														</div>
													</div>
													<div class="col-lg-7">
														<input type="text" class="input-field" placeholder="{{ __('Enter Product Name') }}" name="name" required="">
													</div>
												</div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Sku') }}* </h4>
														</div>
													</div>
													<div class="col-lg-7">
														<input type="text" class="input-field" placeholder="{{ __('Enter Product Sku') }}" name="sku" required="" value="{{ str_random(3).substr(time(), 6,8).str_random(3) }}">

							                            <div class="checkbox-wrapper">
							                              <input type="checkbox" name="product_condition_check" class="checkclick" id="conditionCheck" value="1">
							                              <label for="conditionCheck">{{ __('Allow Product Condition') }}</label>
							                            </div>

													</div>
												</div>

						            <div class="showbox">
													<div class="row">
														<div class="col-lg-4">
															<div class="left-area">
																	<h4 class="heading">{{ __('Product Condition') }}*</h4>
															</div>
														</div>
														<div class="col-lg-7">
																<select name="product_condition">
	                                <option value="2">{{ __('New') }}</option>
	                                <option value="1">{{ __('Used') }}</option>
																</select>
														</div>
													</div>
						            </div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Category') }}*</h4>
														</div>
													</div>
													<div class="col-lg-7">
															<select id="cat" name="category_id" required="">
																	<option value="">{{ __('Select Category') }}</option>
						                                              @foreach($cats as $cat)
						                                                  <option data-href="{{ route('admin-subcat-load',$cat->id) }}" value="{{ $cat->id }}">{{$cat->name}}</option>
						                                              @endforeach
						                                     </select>
													</div>
												</div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Sub Category') }}*</h4>
														</div>
													</div>
													<div class="col-lg-7">
															<select id="subcat" name="subcategory_id" disabled="">
                                                  				<option value="">{{ __('Select Sub Category') }}</option>
															</select>
													</div>
												</div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Child Category') }}*</h4>
														</div>
													</div>
													<div class="col-lg-7">
															<select id="childcat" name="childcategory_id" disabled="">
                                                  				<option value="">{{ __('Select Child Category') }}</option>
															</select>
													</div>
												</div>


												<div id="catAttributes"></div>
												<div id="subcatAttributes"></div>
												<div id="childcatAttributes"></div>



							                     <div class="row">
							                        <div class="col-lg-4">
							                          <div class="left-area">
							                              <h4 class="heading">{{ __('Feature Image') }} *</h4>
							                          </div>
							                        </div>
							                       	<div class="col-lg-7">
							                       		<div class="row">
							                       			<div class="col-md-6">
								                       			<div class="thumbnail">
								                       				<div class="panel panel-body">
																		<div id="avatar_content" class="span4  text-center" style="width: 300px; height: 300px; border: 1px dashed black;">
																			<img id="image" src="" alt="Picture" style="display: none">
																			      
																		</div>
																	</div>
								                       				
															      <div class="caption">
															        	<label class="d-inline-block mybtn1">
																			<i class="icofont-upload-alt"></i> {{ __('Upload Image Here') }}
															        		<input type="file" class="sr-only" id="input_img" name="image" accept="image/*">
															        	</label>
															      </div>
															    </div>
							                       			</div>
							                       			<div id="preview_panel" class="col-md-6" style="display: none">
																<div class="panel panel-body">
																	<div class="span4 text-center" style="width: 200px; height: 200px; border: 1px dashed black;">
																		<div class="preview"></div>
																	</div>
																</div>
							                       			</div>
							                       		</div>
							                       	</div>
							                      </div>

							                      <input type="hidden" id="feature_photo" name="photo" value="">

						                        <input type="file" name="gallery[]" class="hidden" id="uploadgallery" accept="image/*" multiple>
												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">
																		{{ __('Product Gallery Images') }} *
																</h4>
														</div>
													</div>
													<div class="col-lg-7">
														<a href="#" class="set-gallery"  data-toggle="modal" data-target="#setgallery">
																<i class="icofont-plus"></i> {{ __('Set Gallery') }}
														</a>
													</div>
												</div>


												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<ul class="list">
															<li>
																<input class="checkclick1" name="shipping_time_check" type="checkbox" id="check1" value="1">
																<label for="check1">{{ __('Allow Estimated Shipping Time') }}</label>
															</li>
														</ul>
													</div>
												</div>



						                        <div class="showbox">

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Estimated Shipping Time') }}* </h4>
														</div>
													</div>
													<div class="col-lg-7">
														<input type="text" class="input-field" placeholder="{{ __('Estimated Shipping Time') }}" name="ship">
													</div>
												</div>


						                        </div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<ul class="list">
															<li>
																<input name="size_check" type="checkbox" id="size-check" value="1" onchange="javascript:showContent()">
																<label for="size-check">{{ __('Allow Product Sizes') }}</label>
															</li>
														</ul>
													</div>
												</div>
													<div class="showbox" id="size-display">
													<div class="row">
															<div  class="col-lg-4">
															</div>
															<div  class="col-lg-7">
																<div class="product-size-details" id="size-section">
																		<div class="size-area">
																		<span class="remove size-remove"><i class="fas fa-times"></i></span>
																		<div  class="row">
																				<div class="col-md-4 col-sm-6">
																					<label>
																						{{ __('Size Name') }} :
																						<span>
																							{{ __('(eg. S,M,L,XL,XXL,3XL,4XL)') }}
																						</span>
																					</label>
																					<input type="text" name="size[]" class="input-field" placeholder="{{ __('Size Name') }}">
																				</div>
																				<div class="col-md-4 col-sm-6">
																						<label>
																							{{ __('Size Qty') }} :
																							<span>
																								{{ __('(Number of quantity of this size)') }}
																							</span>
																						</label>
																					<input type="number" name="size_qty[]" class="input-field" placeholder="{{ __('Size Qty') }}" value="1" min="1">
																				</div>
																				<div class="col-md-4 col-sm-6">
																						<label>
																							{{ __('Size Price') }} :
																							<span>
																								{{ __('(This price will be added with base price)') }}
																							</span>
																						</label>
																					<input type="number"  name="size_price[]" class="input-field" placeholder="{{ __('Size Price') }}" value="0" min="0">
																				</div>
																			</div>
																		</div>
																</div>

																<a href="javascript:;" id="size-btn" class="add-more"><i class="fas fa-plus"></i>{{ __('Add More Size') }} </a>
															</div>
													</div>
													</div>
												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<ul class="list">
															<li>
																<input class="checkclick1" name="color_check" type="checkbox" id="check3" value="1">
																<label for="check3">{{ __('Allow Product Colors') }}</label>
															</li>
														</ul>
													</div>
												</div>

						                        <div class="showbox">

													<div class="row">
															<div  class="col-lg-4">
																<div class="left-area">
																	<h4 class="heading">
																		{{ __('Product Colors') }}*
																	</h4>
																	<p class="sub-heading">
																		{{ __('(Choose Your Favorite Colors)') }}
																	</p>
																</div>
															</div>
															<div  class="col-lg-7">
																	<div class="select-input-color" id="color-section">
																		<div class="color-area">
																			<span class="remove color-remove"><i class="fas fa-times"></i></span>
											                                <div class="input-group colorpicker-component cp">
											                                  <input type="text" name="color[]" value="#000000"  class="input-field cp"/>
											                                  <span class="input-group-addon"><i></i></span>
											                                </div>
											                         	</div>
											                        </div>
																<a href="javascript:;" id="color-btn" class="add-more mt-4 mb-3"><i class="fas fa-plus"></i>{{ __('Add More Color') }} </a>
															</div>
														</div>

						                        </div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<ul class="list">
															<li>
																<input class="checkclick1" name="whole_check" type="checkbox" id="whole_check" value="1">
																<label for="whole_check">{{ __('Allow Product Whole Sell') }}</label>
															</li>
														</ul>
													</div>
												</div>

						                    <div class="showbox">
												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<div class="featured-keyword-area">
															<div class="feature-tag-top-filds" id="whole-section">
																<div class="feature-area">
																	<span class="remove whole-remove"><i class="fas fa-times"></i></span>
																	<div class="row">
																		<div class="col-lg-6">
																		<input type="number" name="whole_sell_qty[]" class="input-field" placeholder="{{ __('Enter Quantity') }}" min="0">
																		</div>

																		<div class="col-lg-6">
											                            <input type="number" name="whole_sell_discount[]" class="input-field" placeholder="{{ __('Enter Discount Percentage') }}" min="0" />
																		</div>
																	</div>
																</div>
															</div>

															<a href="javascript:;" id="whole-btn" class="add-fild-btn"><i class="icofont-plus"></i> {{ __('Add More Field') }}</a>
														</div>
													</div>
												</div>
											</div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
															<h4 class="heading">
																{{ __('Product Current Price') }}*
															</h4>
															<p class="sub-heading">
																({{ __('In') }} {{$sign->name}})
															</p>
														</div>
													</div>
													<div class="col-lg-7" id="pricebase" >
														<input name="price"  type="number" class="input-field" placeholder="{{ __('e.g 20') }}" step="0.01" required="" min="0">
													</div>
												</div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Previous Price') }}*</h4>
																<p class="sub-heading">{{ __('(Optional)') }}</p>
														</div>
													</div>
													<div class="col-lg-7">
														<input name="previous_price" step="0.01" type="number" class="input-field" placeholder="{{ __('e.g 20') }}" min="0">
													</div>
												</div>

												<div class="row" id="stckprod">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Stock') }}*</h4>
																<p class="sub-heading">{{ __('(Leave Empty will Show Always Available)') }}</p>
														</div>
													</div>
													<div class="col-lg-7">
														<input name="stock" type="number" class="input-field" placeholder="{{ __('e.g 20') }}">
														<div class="checkbox-wrapper">
															<input type="checkbox" name="measure_check" class="checkclick" id="allowProductMeasurement" value="1">
															<label for="allowProductMeasurement">{{ __('Allow Product Measurement') }}</label>
														</div>
													</div>
												</div>



											<div class="showbox">

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Product Measurement') }}*</h4>
														</div>
													</div>
													<div class="col-lg-3">
															<select id="product_measure">
			                                                  <option value="">{{ __('None') }}</option>
			                                                  <option value="Gram">{{ __('Gram') }}</option>
			                                                  <option value="Kilogram">{{ __('Kilogram') }}</option>
			                                                  <option value="Litre">{{ __('Litre') }}</option>
			                                                  <option value="Pound">{{ __('Pound') }}</option>
			                                                  <option value="Custom">{{ __('Custom') }}</option>
						                                     </select>
													</div>
													<div class="col-lg-1"></div>
													<div class="col-lg-3 hidden" id="measure">
														<input name="measure" type="text" id="measurement" class="input-field" placeholder="{{ __('Enter Unit') }}">
													</div>
												</div>

											</div>


												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
															<h4 class="heading">
																	{{ __('Product Description') }}*
															</h4>
														</div>
													</div>
													<div class="col-lg-7">
														<div class="text-editor">
															<textarea class="" name="details"></textarea>
														</div>
													</div>
												</div>



												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
															<h4 class="heading">
																	{{ __('Product Buy/Return Policy') }}*
															</h4>
														</div>
													</div>
													<div class="col-lg-7">
														<div class="text-editor">
															<textarea class="" name="policy"></textarea>
														</div>
													</div>
												</div>


												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">
																<h4 class="heading">{{ __('Youtube Video URL') }}*</h4>
																<p class="sub-heading">{{ __('(Optional)') }}</p>
														</div>
													</div>
													<div class="col-lg-7">
														<input  name="youtube" type="text" class="input-field" placeholder="{{ __('Enter Youtube Video URL') }}">
							                            <div class="checkbox-wrapper">
							                              <input type="checkbox" name="seo_check" value="1" class="checkclick" id="allowProductSEO" value="1">
							                              <label for="allowProductSEO">{{ __('Allow Product SEO') }}</label>
							                            </div>
													</div>
												</div>



						                        <div class="showbox">
						                          <div class="row">
						                            <div class="col-lg-4">
						                              <div class="left-area">
						                                  <h4 class="heading">{{ __('Meta Tags') }} *</h4>
						                              </div>
						                            </div>
						                            <div class="col-lg-7">
						                              <ul id="metatags" class="myTags">
						                              </ul>
						                            </div>
						                          </div>

						                          <div class="row">
						                            <div class="col-lg-4">
						                              <div class="left-area">
						                                <h4 class="heading">
						                                    {{ __('Meta Description') }} *
						                                </h4>
						                              </div>
						                            </div>
						                            <div class="col-lg-7">
						                              <div class="text-editor">
						                                <textarea name="meta_description" class="input-field" placeholder="{{ __('Meta Description') }}"></textarea>
						                              </div>
						                            </div>
						                          </div>
						                        </div>

												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7">
														<div class="featured-keyword-area">
															<div class="heading-area">
																<h4 class="title">{{ __('Feature Tags') }}</h4>
															</div>

															<div class="feature-tag-top-filds" id="feature-section">
																<div class="feature-area">
																	<span class="remove feature-remove"><i class="fas fa-times"></i></span>
																	<div class="row">
																		<div class="col-lg-6">
																		<input type="text" name="features[]" class="input-field" placeholder="{{ __('Enter Your Keyword') }}">
																		</div>

																		<div class="col-lg-6">
											                                <div class="input-group colorpicker-component cp">
											                                  <input type="text" name="colors[]" value="#000000" class="input-field cp"/>
											                                  <span class="input-group-addon"><i></i></span>
											                                </div>
																		</div>
																	</div>
																</div>
															</div>

															<a href="javascript:;" id="feature-btn" class="add-fild-btn"><i class="icofont-plus"></i> {{ __('Add More Field') }}</a>
														</div>
													</div>
												</div>


						                        <div class="row">
						                          <div class="col-lg-4">
						                            <div class="left-area">
						                                <h4 class="heading">{{ __('Tags') }} *</h4>
						                            </div>
						                          </div>
						                          <div class="col-lg-7">
						                            <ul id="tags" class="myTags">
						                            </ul>
						                          </div>
						                        </div>
						                        <input type="hidden" name="type" value="Physical">
												<div class="row">
													<div class="col-lg-4">
														<div class="left-area">

														</div>
													</div>
													<div class="col-lg-7 text-center">
														<button id="submit_btn" class="addProductSubmit-btn" type="button">{{ __('Create Product') }}</button>
														<!-- <button class="addProductSubmit-btn" type="submit">{{ __('Create Product') }}</button> -->
													</div>
												</div>
											</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

		<div class="modal fade" id="setgallery" tabindex="-1" role="dialog" aria-labelledby="setgallery" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
				<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalCenterTitle">{{ __('Image Gallery') }}</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="top-area">
						<div class="row">
							<div class="col-sm-6 text-right">
								<div class="upload-img-btn">
											<label for="image-upload" id="prod_gallery"><i class="icofont-upload-alt"></i>{{ __('Upload File') }}</label>
								</div>
							</div>
							<div class="col-sm-6">
								<a href="javascript:;" class="upload-done" data-dismiss="modal"> <i class="fas fa-check"></i> {{ __('Done') }}</a>
							</div>
							<div class="col-sm-12 text-center">( <small>{{ __('You can upload multiple Images.') }}</small> )</div>
						</div>
					</div>
					<div class="gallery-images">
						<div class="selected-image">
							<div class="row">


							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>

@endsection

@section('scripts')

		<script src="{{asset('assets/admin/js/jquery.Jcrop.js')}}"></script>
		<script src="{{asset('assets/admin/js/jquery.SimpleCropper.js')}}"></script>

<script type="text/javascript">

// Gallery Section Insert

  $(document).on('click', '.remove-img' ,function() {
    var id = $(this).find('input[type=hidden]').val();
    $('#galval'+id).remove();
    $(this).parent().parent().remove();
  });

  $(document).on('click', '#prod_gallery' ,function() {
    $('#uploadgallery').click();
     $('.selected-image .row').html('');
    $('#geniusform').find('.removegal').val(0);
  });


  $("#uploadgallery").change(function(){
     var total_file=document.getElementById("uploadgallery").files.length;
     for(var i=0;i<total_file;i++)
     {
      $('.selected-image .row').append('<div class="col-sm-6">'+
                                        '<div class="img gallery-img">'+
                                            '<span class="remove-img"><i class="fas fa-times"></i>'+
                                            '<input type="hidden" value="'+i+'">'+
                                            '</span>'+
                                            '<a href="'+URL.createObjectURL(event.target.files[i])+'" target="_blank">'+
                                            '<img src="'+URL.createObjectURL(event.target.files[i])+'" alt="gallery image">'+
                                            '</a>'+
                                        '</div>'+
                                  '</div> '
                                      );
      $('#geniusform').append('<input type="hidden" name="galval[]" id="galval'+i+'" class="removegal" value="'+i+'">')
     }

  });

// Gallery Section Insert Ends
</script>
<script type="text/javascript">
    function showContent() {
        element = document.getElementById("pricebase");
        check = document.getElementById("size-check");
        if (check.checked) {
            element.style.display='none';
        }
        else {
           
             element.style.display='block';
        }
    }
</script>
</script>

<script type="text/javascript">




// $('.cropme').simpleCropper();
// $('#crop-image').on('click',function(){
// $('.cropme').click();
// });
	function each(arr, callback) {
      var length = arr.length;
      var i;

      for (i = 0; i < length; i++) {
        callback.call(arr, arr[i], i, arr);
      }

      return arr;
    }



    window.addEventListener('DOMContentLoaded', function () {
      var image = document.querySelector('#image');
      var avatar = document.getElementById('avatar_content');
      var previews = document.querySelectorAll('.preview');
      // var pWidth = document.getElementById('dataWidth');
      // var pHeight = document.getElementById('dataHeight');
      var input = document.getElementById('input_img');
      var previewReady = false;
      var minCroppedWidth = 400;
      var minCroppedHeight = 400;
      var minAspectRatio = 1;
      var maxAspectRatio = 1;
      var cropper = null;
      var orine = null;

      	function createInputFile () {
      		return new Promise((resolver, rechazar) => {
      			var initialAvatarURL;
			    var canvas;
			    
			    if ($("#img_crop").length < 1) {
				    if (cropper) {
						canvas = cropper.getCroppedCanvas();
						initialAvatarURL = image.src;
						image.src = canvas.toDataURL();
						canvas.toBlob(function (blob) {
							var formData = document.forms.namedItem("geniusform");
							var contenedor=document.createElement('input')
							contenedor.setAttribute("id","img_crop");
							contenedor.setAttribute("name","img_crop");
							contenedor.setAttribute("type","hidden");
							var reader = new FileReader();
							reader.onload = function(e) {
						    	var fileInBase64 = btoa(e.target.result);
						     	contenedor.setAttribute("value", fileInBase64);
						   	};
						   	reader.readAsBinaryString(blob);
							formData.append(contenedor);
							var fullPath = input.value;
							var input_name=document.createElement('input')
							input_name.setAttribute("id","input_name");
							input_name.setAttribute("name","input_name");
							input_name.setAttribute("type","hidden");

						    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
						    var filename = fullPath.substring(startIndex);
						    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
						        filename = filename.substring(1);
						    }
						    input_name.setAttribute("value", filename);
						    formData.append(input_name);
						    setTimeout(function(){resolver()}, 300);
						});
			        }
			    } else {
			    	resolver();
			    }
			})
      	}
     	input.addEventListener('change', function (e) {
     		avatar.setAttribute("style", "border: 1px dashed black;");
     		$("#preview_panel").show();
			var files = e.target.files;
			var done = function (url) {
			  image.src = url;
			  image.setAttribute("style", "display: block;");
			};			 
			var reader;
			var file;
			var url;

			if (files && files.length > 0) {
			  file = files[0];

			  if (URL) {
			    done(URL.createObjectURL(file));
			  } else if (FileReader) {
			    reader = new FileReader();
			    
			    reader.onload = function (e) {
			      done(reader.result);
			    };
			    reader.readAsDataURL(file);
			  }
			}
			var img_validator = new Image();
			img_validator.onload = function dimension() {
				if (this.width.toFixed(0) < 400 || this.height.toFixed(0) < 400) {
				  	alert('Las medidas deben ser minimo de : 400 x 400');
				  	cropper.destroy();
        			cropper = null;
        			previews[0].innerHTML = "";
        			image.src = "";
        			input.value = '';
        			avatar.setAttribute("style", "width: 300px; height: 300px; border: 1px dashed black;");
        			$("#preview_panel").hide();
			  		image.setAttribute("style", "display: none;");
				}
			};
			img_validator.src = URL.createObjectURL(file);
			if (cropper !== null) {
				cropper.destroy();
        		cropper = null;
        		previews[0].innerHTML = "";
			}
		    cropper = new Cropper(image, {
		        viewMode: 3,

		        data: {
		          width: minCroppedWidth,
		          height: minCroppedHeight,
		        },
		        ready: function (event) {
		        	// previews.innerHTML="" ;
		            var clone = this.cloneNode();
					var cropper = this.cropper;
					var containerData = cropper.getContainerData();
					var cropBoxData = cropper.getCropBoxData();
					var aspectRatio = cropBoxData.width / cropBoxData.height;
					var input = document.getElementById('input');
					var newCropBoxWidth;

					if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
						newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);

						cropper.setCropBoxData({
						  left: (containerData.width - newCropBoxWidth) / 2,
						  width: newCropBoxWidth
						});
					}
					//////////////
		            clone.className = '';
		            clone.style.cssText = (
		              'display: block;' +
		              'width: 100%;' +
		              'min-width: 0;' +
		              'min-height: 0;' +
		              'max-width: none;' +
		              'max-height: none;'
		            );
		            // var data = event.detail;
		            var cropperp = this.cropper;
		            var imageData = cropperp.getImageData();
		            var previewAspectRatio = 400 / 400;
		            each(previews, function (elem) {
		              elem.appendChild(clone.cloneNode());
		              var previewImage = elem.getElementsByTagName('img').item(0);
		              var previewWidth = elem.offsetWidth;
		              var previewHeight = previewWidth / previewAspectRatio;
		              var imageScaledRatio = 400 / previewWidth;

		              elem.style.height = previewHeight + 'px';
		              previewImage.style.width = imageData.naturalWidth / imageScaledRatio + 'px';
		              previewImage.style.height = imageData.naturalHeight / imageScaledRatio + 'px';
		            });
		            previewReady = true;
		        },
		        crop: function (event) {
					if (!previewReady) {
					  return;
					}
					var width = event.detail.width;
					var height = event.detail.height;
					// pWidth.value = width;
					// pHeight.value = height;

					if (width < minCroppedWidth	|| height < minCroppedHeight) {
						cropper.setData({
						  width: Math.max(minCroppedWidth, width),
						  height: Math.max(minCroppedHeight,height),
						});
					}
					var data = event.detail;
		            var cropperp = this.cropper;
		            var imageData = cropperp.getImageData();
		            var previewAspectRatio = data.width / data.height;
		            each(previews, function (elem) {
		              var previewImage = elem.getElementsByTagName('img').item(0);
		              var previewWidth = elem.offsetWidth;
		              var previewHeight = previewWidth / previewAspectRatio;
		              var imageScaledRatio = data.width / previewWidth;

		              elem.style.height = previewHeight + 'px';
		              previewImage.style.width = imageData.naturalWidth / imageScaledRatio + 'px';
		              previewImage.style.height = imageData.naturalHeight / imageScaledRatio + 'px';
		              previewImage.style.marginLeft = -data.x / imageScaledRatio + 'px';
		              previewImage.style.marginTop = -data.y / imageScaledRatio + 'px';
		            });
		        },
		        cropmove: function () {
		          var cropper = this.cropper;
		          var cropBoxData = cropper.getCropBoxData();
		          var aspectRatio = cropBoxData.width / cropBoxData.height;

		          if (aspectRatio < minAspectRatio) {
		            cropper.setCropBoxData({
		              width: cropBoxData.height * minAspectRatio
		            });
		          } else if (aspectRatio > maxAspectRatio) {
		            cropper.setCropBoxData({
		              width: cropBoxData.height * maxAspectRatio
		            });
		          }
		          var initialAvatarURL;
	        	  var canvas;
		        }
		    });
      	});
		$("#submit_btn").click(function(e){
			if (cropper !== null) {
				createInputFile().then(() => {
					$( "#geniusform" ).submit();
				})
			} else {
				alert("Por Favor seleccione una imagen de portada primero");
			}
		})
    });
</script>


<script src="{{asset('assets/admin/js/product.js')}}"></script>
@endsection