@extends('layouts.app')
@section('content')
<div>
    <h1 class="page-header text-overflow">{{ translate('Edit Home Section Name') }}</h1>
</div>
<div class="row">
        <div class="col-sm-12">
            <a href="{{route('generalsettings.homecategory_activation')}}" class="btn btn-rounded btn-info pull-right">{{translate('Back')}}</a>
        </div>
    </div>

   <br>
<div class="row">
	<div class="col-lg-8 col-lg-offset-2">
		<form class="form form-horizontal mar-top" action="{{route('generalsettings.update_activationcategory')}}" method="POST" enctype="multipart/form-data" id="choice_form">
			<input name="_method" type="hidden" value="POST">
			<input type="hidden" name="id" value="{{ $product->id }}">
			<input type="hidden" name="published" value="{{ $product->published }}">
			@csrf
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Home Section Information')}}</h3>
				</div>
				<div class="panel-body">
					

					<div class="form-group">
                        <label class="col-sm-3">{{translate('Name')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="name" placeholder="{{translate('Product Name')}}" value="{{$product->type_name}}" required>
                        </div>
                    </div>
			
					
				</div>
			</div>
			<div class="mar-all text-right">
				<button type="submit" name="button" class="btn btn-info">{{ translate('Update') }}</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">

	

	// var i = $('input[name="choice_no[]"').last().val();
	// if(isNaN(i)){
	// 	i =0;
	// }

	$(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') }}" style="display:none!important;" data-role="tagsinput" onchange="update_sku()"></div>');
        $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
		// $('#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[]" value="'+name+'" readonly></div><div class="col-lg-7"><input type="text" id="setattr_'+i+'" class="form-control" name="choice_options_'+i+'[]" placeholder="{{ translate('Enter choice values') }}" data-role="tagsinput" onchange="update_sku()"></div><div class="col-lg-2"><button onclick="delete_row(this)" class="btn btn-danger btn-icon"><i class="demo-psi-recycling icon-lg"></i></button></div></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();
	// });

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

	function check_valoption(i){
		
		$(this).change(function(){ 			
			var selectedValues = $('#choice_opt_'+i).val();	
			$("#opt_val_"+i).val(selectedValues);
			update_sku();                                                                                                                  
		});
	}

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

	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
		        }));
		    }
		    $("#subcategory_id > option").each(function() {
		        if(this.value == '{{$product->subcategory_id}}'){
		            $("#subcategory_id").val(this.value).change();
		        }
		    });

		    $('.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
		        }));
		    }
		    $("#subsubcategory_id > option").each(function() {
		        if(this.value == '{{$product->subsubcategory_id}}'){
		            $("#subsubcategory_id").val(this.value).change();
		        }
		    });

		    $('.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
	// 	        }));
	// 	    }
	// 	    $("#brand_id > option").each(function() {
	// 	        if(this.value == '{{$product->brand_id}}'){
	// 	            $("#brand_id").val(this.value).change();
	// 	        }
	// 	    });
	//
	// 	    $('.demo-select2').select2();
	//
	// 	});
	// }

	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_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
		        }));
		    }
			$("#choice_attributes > option").each(function() {
				var str = @php echo $product->attributes @endphp;
		        $("#choice_attributes").val(str).change();
		    });

			$('.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 200kb 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 200kb 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 200kb only');
			}
		});

		update_sku();

		$('.remove-files').on('click', function(){
            $(this).parents(".col-md-4").remove();
        });
	});
	// $('#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(j, attribute){
			flag = false;
			$('input[name="choice_no[]"]').each(function(i, choice_no) {
				if($(attribute).val() == $(choice_no).val()){
					flag = true;
				}
			});
            if(!flag){
				add_more_customer_choice_option($(attribute).val(), $(attribute).text());
			}
        });

		var str = @php echo $product->attributes @endphp;

		$.each(str, function(index, value){
			flag = false;
			$.each($("#choice_attributes option:selected"), function(j, attribute){
				if(value == $(attribute).val()){
					flag = true;
				}
			});
            if(!flag){
				//console.log();
				$('input[name="choice_no[]"][value="'+value+'"]').parent().parent().remove();
			}
		});

		update_sku();
	});

$(document).ready(function(){
	get_vendors_by_manage_id();
});

	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 = /[A-Za-z0-9]|\./;
	  if( !regex.test(key) ) {
	    theEvent.returnValue = false;
	    if(theEvent.preventDefault) theEvent.preventDefault();
	  }
	}
	$("input[name='unit_price']").on('blur',function(){
		$('.variantPrice').val($('input[name="unit_price"]').val());
	});
</script>
<style type="text/css">
	span.note {
	    color: #ff0000;
	    font-style: italic;
	    font-size: 12px;
	}
</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