@extends('layouts.app')

@section('content')
<div>
    <h1 class="page-header text-overflow">{{ translate('Add New Product') }}</h1>
</div>
<div class="row">
	<div class="col-lg-8 col-lg-offset-2">
		<form class="form form-horizontal mar-top" action="{{route('products.store')}}" method="POST" enctype="multipart/form-data" id="choice_form">
			@csrf
			<input type="hidden" name="added_by" value="admin">
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Information')}}</h3>
				</div>
				<div class="panel-body">

					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Managed By')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="manage_type_id" id="managed_id" required>
								<option value="">Select an option</option>
								<option value="0">Inventory</option>
								<option value="1">Marketplace</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Shipment Type')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="shipment_type" id="shipment_type" required>
								<option value="">Select an option</option>
								<option value="0">KVIO</option>
								<option value="1">Seller</option>
							</select>
						</div>
					</div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">{{translate('Shipment Cost')}}</label>
                        <div class="col-lg-7">
                            <select class="form-control demo-select2-placeholder" name="shipment_cost"
                                    id="shipment_cost" required>
                                <option value="">Select an option</option>
                                <option value="0">KVIO</option>
                                <option value="1">Seller</option>
                            </select>
                        </div>
                    </div>

					<div class="form-group">
						<label class="col-lg-2 control-label">Vendor</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="seller_id" id="seller_id" required>
								<option value="">Select vendor</option>
								@foreach($sellers as $key=>$value)
								<option value="{{$value->id}}">{{$value->name}}</option>
								@endforeach
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Product Name')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="name" placeholder="{{ translate('Product Name') }}" onchange="update_sku()" required>
						</div>
					</div>
					<div class="form-group" id="category">
						<label class="col-lg-2 control-label">{{translate('Category')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="category_id" id="category_id" required>
								@foreach($categories as $category)
									<option value="{{$category->id}}">{{__($category->name)}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group" id="subcategory">
						<label class="col-lg-2 control-label">{{translate('Subcategory')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="subcategory_id" id="subcategory_id">

							</select>
						</div>
					</div>
					<div class="form-group" id="subsubcategory">
						<label class="col-lg-2 control-label">{{translate('Sub Subcategory')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="subsubcategory_id" id="subsubcategory_id">

							</select>
						</div>
					</div>
					<div class="form-group" id="brand">
						<label class="col-lg-2 control-label">{{translate('Brand')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="brand_id" id="brand_id">
								<option value="">{{ ('Select Brand') }}</option>
								@foreach (\App\Brand::all() as $brand)
									<option value="{{ $brand->id }}">{{ $brand->name }}</option>
								@endforeach
							</select>
						</div>
					</div>

					<!-- <div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Unit')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="unit" placeholder="{{ translate('Unit (e.g. KG, Pc etc)') }}" required>
						</div>
					</div> -->

                    <div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Minimum Qty')}}</label>
						<div class="col-lg-7">
							<input type="number" class="form-control" name="min_qty" value="1" min="1" required>
							<input type="hidden" class="form-control" name="unit" value="pc">
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Tags')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="tags[]" placeholder="{{ translate('Type to add a tag') }}" data-role="tagsinput">
						</div>
					</div>
						<div class="form-group">
						<label class="col-lg-2 control-label">HSN Code</label>
						<div class="col-lg-7">
							<input type="text" placeholder="eg. 4545 or 50-55 or 55" minlength="2" maxlength="12" name="hsn_code" class="form-control" onkeypress='validate(event)'  required>
							<span class="note">Only numbers and hyphen are allowed (min digit:2, max digit:4)</span>
						</div>
					</div>

					@php
					    $pos_addon = \App\Addon::where('unique_identifier', 'pos_system')->first();
					@endphp
					@if ($pos_addon != null && $pos_addon->activated == 1)
						<div class="form-group">
							<label class="col-lg-2 control-label">{{translate('Barcode')}}</label>
							<div class="col-lg-7">
								<input type="text" class="form-control" name="barcode" placeholder="{{ translate('Barcode') }}">
							</div>
						</div>
					@endif


					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('MRP Printed')}}</label>
						<div class="col-lg-7">
							<label class="switch" style="margin-top:5px;">
								<input type="checkbox" name="mrp_printed" value="1">
	                            <span class="slider round"></span></label>
							</label>
						</div>
					</div>

					@php
					    $refund_request_addon = \App\Addon::where('unique_identifier', 'refund_request')->first();
					@endphp
					@if ($refund_request_addon != null && $refund_request_addon->activated == 1)
						<div class="form-group">
							<label class="col-lg-2 control-label">{{translate('Refundable')}}</label>
							<div class="col-lg-7">
								<label class="switch" style="margin-top:5px;">
									<input type="checkbox" name="refundable" checked>
		                            <span class="slider round"></span></label>
								</label>
							</div>
						</div>
					@endif
				</div>
			</div>

			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Dimensions')}}</h3>
				</div>
				<div class="panel-body">

					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Weight')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="weight gm" placeholder="{{ translate('Weight') }}" required>
							<span class="text-small"><small>Weight of the package(gm)</small></span>
						</div>
					</div>


					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Height')}}</label>
						<div class="col-lg-7">
							 <input type="text" min="0" step="0.01" class="form-control" placeholder="eg for 50 cm enter 50" name="height" value="" required>
                             <span class="text-small"><small>Height of the package should be in centimetre only</small></span>
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Width')}}</label>
						<div class="form-group">
							<div class="col-lg-7">
                            <input type="text" min="0" step="0.01" class="form-control mb-3" placeholder="eg for 20 cm enter 20" name="breadth" value="" required>
                            <span class="text-small"><small>Breadth can be width of the package in centimetre only</small></span>
                        </div></div>
					</div>

				 	<div class="form-group">
	                  <label class="col-lg-2 control-label">{{ translate('Length')}}</label>
	                  <div class="col-lg-7">
	                    <input type="number" min="0" step="0.01" class="form-control" placeholder="eg for 100 cm enter 100" name="length" value="" required>
	                    <span class="text-small"><small>Length can be width of the package in centimetre only
						</small></span>
	                </div></div>
				</div>
			</div>

			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Images')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Gallery Images')}} </label>
						<div class="col-lg-7">
							<div id="photos">

							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Thumbnail Image')}} <small>(290x300)</small></label>
						<div class="col-lg-7">
							<div id="thumbnail_img">

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Videos')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Video Provider')}}</label>
						<div class="col-lg-7">
							<select class="form-control demo-select2-placeholder" name="video_provider" id="video_provider">
								<option value="youtube">{{translate('Youtube')}}</option>
								<option value="dailymotion">{{translate('Dailymotion')}}</option>
								<option value="vimeo">{{translate('Vimeo')}}</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Video Link')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="video_link" placeholder="{{ translate('Video Link') }}">
						</div>
					</div>
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Variation')}}</h3>
				</div>
				<div class="panel-body">
				<!-- 	<div class="form-group">
						<div class="col-lg-2">
							<input type="text" class="form-control" value="{{translate('Colors')}}" disabled>
						</div>
						<div class="col-lg-7">
							<select class="form-control color-var-select" name="colors[]" id="colors" multiple disabled>
								@foreach (\App\Color::orderBy('name', 'asc')->get() as $key => $color)
									<option value="{{ $color->code }}">{{ $color->name }}</option>
								@endforeach
							</select>
						</div>
						<div class="col-lg-2">
							<label class="switch" style="margin-top:5px;">
								<input value="1" type="checkbox" name="colors_active">
								<span class="slider round"></span>
							</label>
						</div>
					</div> -->

					<div class="form-group">
						<div class="col-lg-2">
							<input type="text" class="form-control" value="{{translate('Attributes')}}" disabled>
						</div>
	                    <div class="col-lg-7">
	                        <select name="choice_attributes[]" id="choice_attributes" class="form-control demo-select2" multiple data-placeholder="{{ translate('Choose Attributes') }}">
								@foreach (\App\Attribute::all() as $key => $attribute)
									<option value="{{ $attribute->id }}">{{ $attribute->name }}</option>
								@endforeach
	                        </select>
	                    </div>
	                </div>

					<div>
						<p>{{ translate('Choose the attributes of this product and then input values of each attribute') }}</p>
						<br>
					</div>

					<div class="customer_choice_options" id="customer_choice_options">

					</div>

					{{-- <div class="customer_choice_options" id="customer_choice_options">

					</div>
					<div class="form-group">
						<div class="col-lg-2">
							<button type="button" class="btn btn-info" onclick="add_more_customer_choice_option()">{{ translate('Add more customer choice option') }}</button>
						</div>
					</div> --}}
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product price + stock')}}</h3>
				</div>
				<div class="panel-body">

					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Unit price')}}</label>
						<div class="col-lg-7">
							<input type="number" min="0" value="0" step="0.01" placeholder="{{ translate('Unit price') }}" name="unit_price" class="form-control" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Purchase price')}}</label>
						<div class="col-lg-7">
							<input type="number" min="0" value="0" step="0.01" placeholder="{{ translate('Purchase price') }}" name="purchase_price" class="form-control" required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Tax')}}</label>
						<div class="col-lg-7">
							<input type="number" min="0" value="0" step="0.01" placeholder="{{ translate('Tax') }}" name="tax" class="form-control" required>
						</div>
						<div class="col-lg-2">
							<select class="demo-select2" name="tax_type">
								<!-- <option value="amount">{{translate('Flat')}}</option> -->
								<option value="percent" selected="">{{translate('Percent')}}</option>
							</select>
						</div>
					</div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">{{translate('Discount By KVIO')}}</label>
                        <div class="col-lg-7">
                            <input type="number" min="0" value="0" step="0.01"
                                   placeholder="{{ translate('Discount By KVIO') }}" name="discount_by_kvio"
                                   class="form-control" required>
                        </div>
                        <div class="col-lg-2">
                            <select class="demo-select2" name="discount_type">
                            <!-- <option value="amount">{{translate('Flat')}}</option> -->
                                <option value="percent">{{translate('Percent')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">{{translate('Discount By Seller')}}</label>
                        <div class="col-lg-7">
                            <input type="number" min="0" value="0" step="0.01"
                                   placeholder="{{ translate('Discount By Seller') }}" name="discount_by_seller"
                                   class="form-control" required>
                        </div>
                        <div class="col-lg-2">
                            <select class="demo-select2" name="discount_type">
                            <!-- <option value="amount">{{translate('Flat')}}</option> -->
                                <option value="percent">{{translate('Percent')}}</option>
                            </select>
                        </div>
                    </div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Discount')}}</label>
						<div class="col-lg-7">
							<input type="number" min="0" value="0" step="0.01" placeholder="{{ translate('Discount') }}" name="discount" class="form-control" required>
						</div>
						<div class="col-lg-2">
							<select class="demo-select2" name="discount_type">
								<!-- <option value="amount">{{translate('Flat')}}</option> -->
								<option value="percent">{{translate('Percent')}}</option>
							</select>
						</div>
					</div>
					<div class="form-group" id="quantity">
						<label class="col-lg-2 control-label">{{translate('Quantity')}}</label>
						<div class="col-lg-7">
							<input type="number" min="0" value="0" step="1" placeholder="{{ translate('Quantity') }}" name="current_stock" class="form-control" required>
						</div>
					</div>
					<br>
					<div class="sku_combination" id="sku_combination">

					</div>
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Product Description')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Description')}}</label>
						<div class="col-lg-9">
							<textarea id="editor" name="description"></textarea>
						</div>
					</div>
				</div>
			</div>
            @if (\App\BusinessSetting::where('type', 'shipping_type')->first()->value == 'product_wise_shipping')
                <div class="panel">
    				<div class="panel-heading bord-btm">
    					<h3 class="panel-title">{{translate('Product Shipping Cost')}}</h3>
    				</div>
    				<div class="panel-body">
    					<div class="row bord-btm">
    						<div class="col-md-2">
    							<div class="panel-heading">
    								<h3 class="panel-title">{{translate('Free Shipping')}}</h3>
    							</div>
    						</div>
    						<div class="col-md-10">
    							<div class="form-group">
    								<label class="col-lg-2 control-label">{{translate('Status')}}</label>
    								<div class="col-lg-7">
    									<label class="switch" style="margin-top:5px;">
    										<input type="radio" name="shipping_type" value="free" checked>
    										<span class="slider round"></span>
    									</label>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="row">
    						<div class="col-md-2">
    							<div class="panel-heading">
    								<h3 class="panel-title">{{translate('Flat Rate')}}</h3>
    							</div>
    						</div>
    						<div class="col-md-10">
    							<div class="form-group">
    								<label class="col-lg-2 control-label">{{translate('Status')}}</label>
    								<div class="col-lg-7">
    									<label class="switch" style="margin-top:5px;">
    										<input type="radio" name="shipping_type" value="flat_rate" checked>
    										<span class="slider round"></span>
    									</label>
    								</div>
    							</div>
    							<div class="form-group">
    								<label class="col-lg-2 control-label">{{translate('Shipping cost')}}</label>
    								<div class="col-lg-7">
    									<input type="number" min="0" value="0" step="0.01" placeholder="{{ translate('Shipping cost') }}" name="flat_shipping_cost" class="form-control" required>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
            @endif
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('PDF Specification')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('PDF Specification')}}</label>
						<div class="col-lg-7">
							<input type="file" class="form-control" id="file-6" placeholder="{{ translate('PDF') }}" name="pdf" accept="application/pdf" onchange="validatePDF('file-6')" >
						</div>
					</div>
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('SEO Meta Tags')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Meta Title')}}</label>
						<div class="col-lg-7">
							<input type="text" class="form-control" name="meta_title" placeholder="{{ translate('Meta Title') }}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{translate('Description')}}</label>
						<div class="col-lg-7">
							<textarea name="meta_description" rows="8" class="form-control"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label">{{ translate('Meta Image') }}</label>
						<div class="col-lg-7">
							<div id="meta_photo">

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mar-all text-right">
				<button type="submit" name="button" class="btn btn-info">{{ translate('Add New Product') }}</button>
			</div>
		</form>
	</div>
</div>


@endsection

@section('script')

<style type="text/css">
	.select2-selection__choice[title="Weight"] .select2-selection__choice__remove {
    display: none;
}
</style>

<script type="text/javascript">

	$(document).ready(function(){

		//$('#choice_attributes').val('8');
		//$('#choice_attributes').trigger('change');
		//getWeightField('8', 'Weight');
	});

	$("#choice_attributes").on("select2:select", function(evt) {
        var element = evt.params.data.element;
        var $element = $(element);
        $element.detach();
        $(this).append($element);
        $(this).trigger("change");
	});


	 function add_more_customer_choice_option(i, name){

        $.ajax({
           type:'GET',
           url:'{{url("admin/products/getlist/")}}',
           data:{'id':i},
           success: function(res){
                // console.log(res);
                $("#test"+i).html(res);

           }
        })

        $('#customer_choice_options').append('<div class="form-group"><div class="col-lg-2"><input type="hidden" name="choice_no[]" value="'+i+'"><input type="text" class="form-control" name="choice[]" id="current_name_'+i+'" value="'+name+'" placeholder="{{ translate('Choice Title') }}" readonly></div><div class="col-lg-7" id="test'+i+'"></div><input type="hidden" class="form-control" id="choice_options_'+i+'" name="choice_options_'+i+'[]" placeholder="{{ translate('Enter choice values') }}" data-role="tagsinput" onchange="update_sku()" style=""></div>');

        $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
    }

	$('input[name="colors_active"]').on('change', function() {
	    if(!$('input[name="colors_active"]').is(':checked')){
			$('#colors').prop('disabled', true);
		}
		else{
			$('#colors').prop('disabled', false);
		}
		update_sku();
	});

	$('#colors').on('change', function() {
	    update_sku();
	});

	$('input[name="unit_price"]').on('keyup', function() {
	    update_sku();
	});

	$('input[name="name"]').on('keyup', function() {
	    update_sku();
	});

	function delete_row(em){
		$(em).closest('.form-group').remove();
		update_sku();
	}

	function update_sku(){
		$.ajax({
		   type:"POST",
		   url:'{{ route('products.sku_combination') }}',
		   data:$('#choice_form').serialize(),
		   success: function(data){
			   $('#sku_combination').html(data);
			   if (data.length > 1) {
				   $('#quantity').hide();
			   }
			   else {
					$('#quantity').show();
			   }
		   }
	   });
	}


	function get_vendors_by_manage_id(){
		var manage_id = $('#managed_id').val();
		$.post('{{ route('vendors.get_vendors_by_manage_id') }}',{_token:'{{ csrf_token() }}', manage_id:manage_id}, function(data){
		    $('#seller_id').html(null);
		    for (var i = 0; i < data.length; i++) {
		        $('#seller_id').append($('<option>', {
		            value: data[i].id,
		            text: data[i].name
		        }));
		        $('.demo-select2').select2();
		        update_sku();
		    }
		});
	}


	function get_subcategories_by_category(){
		var category_id = $('#category_id').val();
		$.post('{{ route('subcategories.get_subcategories_by_category') }}',{_token:'{{ csrf_token() }}', category_id:category_id}, function(data){
		    $('#subcategory_id').html(null);
		    for (var i = 0; i < data.length; i++) {
		        $('#subcategory_id').append($('<option>', {
		            value: data[i].id,
		            text: data[i].name
		        }));
		        $('.demo-select2').select2();
		    }
		    get_subsubcategories_by_subcategory();
		});
	}

	function get_subsubcategories_by_subcategory(){
		var subcategory_id = $('#subcategory_id').val();
		$.post('{{ route('subsubcategories.get_subsubcategories_by_subcategory') }}',{_token:'{{ csrf_token() }}', subcategory_id:subcategory_id}, function(data){
		    $('#subsubcategory_id').html(null);
			$('#subsubcategory_id').append($('<option>', {
				value: null,
				text: null
			}));
		    for (var i = 0; i < data.length; i++) {
		        $('#subsubcategory_id').append($('<option>', {
		            value: data[i].id,
		            text: data[i].name
		        }));
		        $('.demo-select2').select2();
		    }
		    //get_brands_by_subsubcategory();
			//get_attributes_by_subsubcategory();
		});
	}

	function get_brands_by_subsubcategory(){
		var subsubcategory_id = $('#subsubcategory_id').val();
		$.post('{{ route('subsubcategories.get_brands_by_subsubcategory') }}',{_token:'{{ csrf_token() }}', subsubcategory_id:subsubcategory_id}, function(data){
		    $('#brand_id').html(null);
		    for (var i = 0; i < data.length; i++) {
		        $('#brand_id').append($('<option>', {
		            value: data[i].id,
		            text: data[i].name
		        }));
		        $('.demo-select2').select2();
		    }
		});
	}

	function get_attributes_by_subsubcategory(){
		var subsubcategory_id = $('#subsubcategory_id').val();
		$.post('{{ route('subsubcategories.get_attributes_by_subsubcategory') }}',{_token:'{{ csrf_token() }}', subsubcategory_id:subsubcategory_id}, function(data){
		    $('#choice_attributes').html(null);
		    for (var i = 0; i < data.length; i++) {
		        $('#choice_attributes').append($('<option>', {
		            value: data[i].id,
		            text: data[i].name
		        }));
		    }
			$('.demo-select2').select2();
		});
	}

	$(document).ready(function(){
	    get_subcategories_by_category();
		$("#photos").spartanMultiImagePicker({
			fieldName:        'photos[]',
			maxCount:         10,
			rowHeight:        '200px',
			groupClassName:   'col-md-4 col-sm-4 col-xs-6',
			maxFileSize:      '500000',
			dropFileLabel : "Drop Here",
			onExtensionErr : function(index, file){
				console.log(index, file,  'extension err');
				alert('Please only input png or jpg type file')
			},
			onSizeErr : function(index, file){
				//console.log(index, file,  'file size too big');
				alert('Max Upload size is 500kb only');
			}
		});
		$("#thumbnail_img").spartanMultiImagePicker({
			fieldName:        'thumbnail_img',
			maxCount:         1,
			rowHeight:        '200px',
			groupClassName:   'col-md-4 col-sm-4 col-xs-6',
			maxFileSize:      '500000',
			dropFileLabel : "Drop Here",
			onExtensionErr : function(index, file){
				console.log(index, file,  'extension err');
				alert('Please only input png or jpg type file')
			},
			onSizeErr : function(index, file){
				//console.log(index, file,  'file size too big');
				alert('Max Upload size is 500kb only')
			}
		});
		$("#meta_photo").spartanMultiImagePicker({
			fieldName:        'meta_img',
			maxCount:         1,
			rowHeight:        '200px',
			groupClassName:   'col-md-4 col-sm-4 col-xs-6',
			maxFileSize:      '500000',
			dropFileLabel : "Drop Here",
			onExtensionErr : function(index, file){
				console.log(index, file,  'extension err');
				alert('Please only input png or jpg type file')
			},
			onSizeErr : function(index, file){
				//console.log(index, file,  'file size too big');
				alert('Max Upload size is 500kb only')
			}
		});
	});

	$('#managed_id').on('change', function() {
	    get_vendors_by_manage_id();
	});

	$('#category_id').on('change', function() {
	    get_subcategories_by_category();
	});

	$('#subcategory_id').on('change', function() {
	    get_subsubcategories_by_subcategory();
	});

	$('#subsubcategory_id').on('change', function() {
	    // get_brands_by_subsubcategory();
		//get_attributes_by_subsubcategory();
	});

	$('#choice_attributes').on('change', function() {
		$('#customer_choice_options').html(null);
		$.each($("#choice_attributes option:selected"), function(){
			//console.log($(this).val());
            add_more_customer_choice_option($(this).val(), $(this).text());
        });
		update_sku();
	});


	function validate(evt) {
	  var theEvent = evt || window.event;

	  // Handle paste
	  if (theEvent.type === 'paste') {
	      key = event.clipboardData.getData('text/plain');
	  } else {
	  // Handle key press
	      var key = theEvent.keyCode || theEvent.which;
	      key = String.fromCharCode(key);
	  }
	  var regex = /[0-9 -]|\./;
	  if( !regex.test(key) ) {
	    theEvent.returnValue = false;
	    if(theEvent.preventDefault) theEvent.preventDefault();
	  }
	}

</script>
<style type="text/css">
	span.note {
	    color: #ff0000;
	    font-style: italic;
	    font-size: 12px;
	}small {
    color: #8c8c8c;
}
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.js"></script>
<script type="text/javascript">
        var editorJodit = new Jodit('#editor', {
        showCharsCounter: true,
        showWordsCounter: true,
        askBeforePasteHTML: false,
        askBeforePasteFromWord: false,
        defaultActionOnPaste: 'insert_only_text',
        defaultActionOnPasteFromWord : 'insert_as_text',
        tabIndex: 0,
        theme: "summer",
        height: 500,
        hotkeys: {
            redo: 'ctrl+z',
            undo: 'ctrl+y,ctrl+shift+z',
            indent: 'ctrl+]',
            outdent: 'ctrl+[',
            bold: 'ctrl+b',
            italic: 'ctrl+i',
            removeFormat: 'ctrl+shift+m',
            insertOrderedList: 'ctrl+shift+7',
            insertUnorderedList: 'ctrl+shift+8',
            openSearchDialog: 'ctrl+f',
            openReplaceDialog: 'ctrl+r',
        }
    });

    editorJodit.events.on('beforePaste', (event) => {
        const target = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
        const pastedText = target.getData('text/plain') || target.getData('text/html');
        console.log("beforePaste");
        if (pastedText.indexOf('data:image') !== -1 || pastedText.indexOf('src="data:image"') !== -1 || pastedText.indexOf('base64') !== -1) {
            return false;
        }
    });

    editorJodit.events.off('processPaste.paste').on('processPaste.paste', (event, text, type) => {
        if (text && /.*\<img.*src=".*base64.*[\S\n\r\s]*">.*/g.test(text)) {
            return text.replace(/\<img.*src=".*base64.*[\S\n\r\s]*">/g, '');
        }else {
            return text;
        }
    });
    </script>
@endsection