<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>

<div class="edit-static-form">
	
	<div class="line">
		<div class="col-des-12 builder-title">
			<h2><?php echo __('Masonry Gallery Block') ?></h2>
		</div>
	</div>
	<form id="section-form" enctype="multipart/form-data" method="POST" action="<?php echo $this->getUrl('fbuilder/element/save') ?>" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}'>
		<input type="hidden" name="page_id" value="<?php echo $this->getRequest()->getParam('page_id') ?>">
		<input id="block_type" type="hidden" name="type" value="masonry">
		<input id="block_block_name" type="hidden" name="block_name" value="<?php echo $params['block'] ?>">
		<?php if(isset($params['id'])): ?>
			<?php 
				$child =  $this->getModel('MGS\Fbuilder\Model\Child')->load($params['id']);
				$exist = true;
				$settings = json_decode($child->getSetting(), true);
			?>
			<input type="hidden" name="child_id" value="<?php echo $params['id'] ?>">
		<?php endif ?>
		
		<input id="block_html" type="hidden" name="setting[block_link]" value="<?php if($exist && isset($settings['block_html']) && $settings['block_html']): ?><?php echo $settings['block_html'] ?><?php endif ?>">
		
		<div class="mgs-tab product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
			<div class="data item title" aria-labeledby="tab-label-general-title" data-role="collapsible" id="tab-label-general">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#general" id="tab-label-general-title">
					<?php echo __('General') ?>
				</a>
			</div>
			
			<div class="data item content" id="general" data-role="content">
				<div class="form-group line">
					<label for="col" class="col-tb-3 control-label"><?php echo __('Block col (12 to full)') ?></label>
					<div class="col-tb-9">
						<select id="col" class="required-entry input-text" name="col">
							<?php for($i=12; $i>=1; $i--): ?>
								<option value="<?php echo $i ?>"<?php if($exist && ($child->getCol()==$i)): ?> selected="selected"<?php endif ?>><?php echo $i ?></option>
							<?php endfor ?>
						</select>
					</div>
				</div>
				<div class="form-group line">
					<label for="class" class="col-tb-3 control-label"><?php echo __('Custom Class') ?></label>
					<div class="col-tb-9">
						<input type="text" id="class" class="input-text" name="class"<?php if($exist): ?> value="<?php echo $child->getClass() ?>"<?php endif ?> />
					</div>
				</div>
				
				<div class="form-group line">
					<label for="animation" class="col-tb-3 control-label"><?php echo __('Block Animation') ?></label>
					<div class="col-tb-5">
						<select onchange="changeAnimationClass(this.value)" id="animation" class="input-text" name="setting[animation]">
							<option value=""><?php echo __('Choose Animation Effect') ?></option>
							<?php foreach($helper->getAnimationEffect() as $animation=>$label): ?>
								<option value="<?php echo $animation ?>"<?php if($exist && ($settings['animation']==$animation)): ?> selected="selected"<?php endif ?>><?php echo $label ?></option>
							<?php endforeach ?>
						</select>
					</div>
					
					<div class="col-tb-3 text-center animated<?php if($exist && ($settings['animation']!='')): ?> <?php echo $settings['animation'] ?><?php endif ?>" id="animation-test">Animation Preview</div>
				</div>
				
				<div class="form-group line">
					<label for="animation_delay" class="col-tb-3 control-label"><?php echo __('Animation Delay') ?></label>
					<div class="col-tb-9">
						<input type="text" placeholder="ms" id="animation_delay" class="input-text validate-number" name="setting[animation_delay]" <?php if($exist && isset($settings['animation_delay'])): ?> value="<?php echo $settings['animation_delay'] ?>"<?php endif ?>>
					</div>
				</div>
				
				<div class="form-group line">
					<div class="col-tb-12">
						<div class="style-inline-container">
							<div class="border-container">
								<span class="inline-note margin-note">Margin</span>
								
								<input type="text" placeholder="px" id="margin-top" class="input-text validate-number" name="setting[margin_top]" <?php if($exist && isset($settings['margin_top'])): ?> value="<?php echo $settings['margin_top'] ?>"<?php endif ?>>
								
								<div class="middle-content-input">
									
									<div class="left-margin"><input type="text" placeholder="px" id="margin-left" class="input-text validate-number" name="setting[margin_left]" <?php if($exist && isset($settings['margin_left'])): ?> value="<?php echo $settings['margin_left'] ?>"<?php endif ?>></div>
									<div class="middle-content">
										<span class="inline-note padding-note">Padding</span>
										<input type="text" placeholder="px" id="padding-top" class="input-text validate-number" name="setting[padding_top]" <?php if($exist && isset($settings['padding_top'])): ?> value="<?php echo $settings['padding_top'] ?>"<?php endif ?>>
										
										<div class="padding-middle">
											<input type="text" placeholder="px" id="padding-left" class="input-text validate-number" name="setting[padding_left]" <?php if($exist && isset($settings['padding_left'])): ?> value="<?php echo $settings['padding_left'] ?>"<?php endif ?>>
											
											<input type="text" placeholder="px" id="padding-right" class="input-text validate-number" name="setting[padding_right]" <?php if($exist && isset($settings['padding_right'])): ?> value="<?php echo $settings['padding_right'] ?>"<?php endif ?>>
										</div>
										
										<input type="text" placeholder="px" id="padding-bottom" class="input-text validate-number" name="setting[padding_bottom]" <?php if($exist && isset($settings['padding_bottom'])): ?> value="<?php echo $settings['padding_bottom'] ?>"<?php endif ?>>
									</div>
									<div class="right-margin"><input type="text" placeholder="px" id="margin-right" class="input-text validate-number" name="setting[margin_right]" <?php if($exist && isset($settings['margin_right'])): ?> value="<?php echo $settings['margin_right'] ?>"<?php endif ?>></div>
								</div>
								
								<input type="text" placeholder="px" id="margin-bottom" class="input-text validate-number" name="setting[margin_bottom]" <?php if($exist && isset($settings['margin_bottom'])): ?> value="<?php echo $settings['margin_bottom'] ?>"<?php endif ?>>
							</div>
						</div>
					</div>
				</div>
			</div>
		
			<div class="data item title" aria-labeledby="tab-label-images-title" data-role="collapsible" id="tab-label-images">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#images" id="tab-label-images-title">
					<?php echo __('Manage Images') ?>
				</a>
			</div>
			
			<div class="data item content" id="images" data-role="content" style="display:none">
				<?php $images = $helper->getPanelUploadImages('masonry') ?>
				<?php if($exist): ?>
					<?php $imageSetting = array_combine(range(1, count($settings['addimg'])), array_values($settings['addimg'])); ?>
					<?php $urls = array_combine(range(1, count($settings['url'])), array_values($settings['url'])); ?>
				<?php endif ?>

				<div id="list-images" class="masonry-list">
					<?php if(count($images)>0): ?>
						<?php $i = 0; ?>
						<?php foreach($images as $key=>$_image): $i++ ?>
							<?php 
								$checked = false;
								$url = '';
								if($exist && isset($settings['addimg']) && in_array($_image, $settings['addimg'])){
									$checked = true;
									$keySetting = array_search ($_image, $imageSetting);

									if($keySetting){
										$url = $urls[$keySetting];
									}
								}
							?>
							<div class="image-item">
								<div class="img-div">
									<img class="img-responsive" src="<?php echo $this->getPanelUploadSrc('masonry',$_image) ?>" alt=""/>
								</div>
								
								<div class="image-action">
									<span><?php echo __('Add to Gallery&nbsp;&nbsp;&nbsp;') ?></span>
									<div class="admin__actions-switch" data-role="switcher">
										<input type="checkbox" name="setting[addimg][]" id="addimg<?php echo $i ?>" class="admin__actions-switch-checkbox imagetoadd" value="<?php echo $_image ?>"<?php if($checked): ?> checked="checked"<?php endif ?> onclick="addToGallery(<?php echo $i ?>)" />
										<label for="addimg<?php echo $i ?>" class="admin__actions-switch-label">
											<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
										</label>
									</div>
								</div>
								
								<div class="image-action">
									<span><?php echo __('Remove Image&nbsp;&nbsp;') ?></span>
									<div class="admin__actions-switch" data-role="switcher">
										<input type="checkbox" name="setting[removeimg][]" id="removeimg<?php echo $i ?>" class="admin__actions-switch-checkbox" value="<?php echo $_image ?>">
										<label for="removeimg<?php echo $i ?>" class="admin__actions-switch-label">
											<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
										</label>
									</div>
								</div>
								
								<div class="image-action">
									<input type="text" class="input-text" name="setting[url][]" id="url<?php echo $i ?>" placeholder="<?php echo __('Link') ?>" disabled="disabled" value="<?php echo $url ?>"/>
								</div>
							</div>
						<?php endforeach ?>
					<?php endif ?>
				</div>
				
				<div id="upload-container">
					<div id="list-upload"></div>
					<button class="btn btn-default" onclick="newImageUpload()" type="button"><span class="fa fa-plus"></span> <?php echo __('Upload new Image') ?></button>
				</div>
			</div>
		
			<div class="data item title" aria-labeledby="tab-label-slider-title" data-role="collapsible" id="tab-label-slider">
				<a class="data switch" tabindex="-1" data-toggle="switch" href="#slider" id="tab-label-slider-title" onclick="setPreview()">
					<?php echo __('Masonry Config') ?>
				</a>
			</div>
			
			<div class="data item content" id="slider" data-role="content" style="display:none">
				<div class="form-group line">
					<div class="col-tb-3">
						<label for="column" class="control-label"><?php echo __('Number of columns') ?></label><br/>
						<select id="column" class="input-text" name="setting[column]" onchange="setPreview()">
							<option value="2"<?php if($exist && ($settings['column']==2)): ?> selected="selected"<?php endif ?>>2</option>
							<option value="3"<?php if($exist && ($settings['column']==3)): ?> selected="selected"<?php endif ?>>3</option>
							<option value="4"<?php if($exist && ($settings['column']==4)): ?> selected="selected"<?php endif ?>>4</option>
							<option value="5"<?php if($exist && ($settings['column']==5)): ?> selected="selected"<?php endif ?>>5</option>
							<option value="6"<?php if($exist && ($settings['column']==6)): ?> selected="selected"<?php endif ?>>6</option>
							<option value="7"<?php if($exist && ($settings['column']==7)): ?> selected="selected"<?php endif ?>>7</option>
							<option value="8"<?php if($exist && ($settings['column']==8)): ?> selected="selected"<?php endif ?>>8</option>
						</select>
					</div>
					
					<div class="col-tb-3">
						<label for="item_margin" class="control-label"><?php echo __('Item margin') ?></label><br/>
						<input type="text" class="input-text validate-number" id="item_margin" name="setting[item_margin]"<?php if($exist && $settings['item_margin']!=''): ?> value="<?php echo $settings['item_margin'] ?>"<?php endif ?> placeholder="px" onchange="setPreview()"/>
					</div>
					
					
					
					<div class="col-tb-3">
						<label for="effect" class="control-label"><?php echo __('Hover effect') ?></label><br/>
						<select id="effect" class="input-text" name="setting[effect]" onchange="setPreview()">
							<option value=""><?php echo __('No Effect') ?></option>
							<option value="zoom-in"<?php if($exist && ($settings['effect']=='zoom-in')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom In') ?></option>
							<option value="zoom-out"<?php if($exist && ($settings['effect']=='zoom-out')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom Out') ?></option>
							<option value="rotate"<?php if($exist && ($settings['effect']=='rotate')): ?> selected="selected"<?php endif ?>><?php echo __('Rotate & Zoom Out') ?></option>
							<option value="blur"<?php if($exist && ($settings['effect']=='blur')): ?> selected="selected"<?php endif ?>><?php echo __('Blur') ?></option>
							<option value="grayscale"<?php if($exist && ($settings['effect']=='grayscale')): ?> selected="selected"<?php endif ?>><?php echo __('Gray Scale') ?></option>
							<option value="sepia"<?php if($exist && ($settings['effect']=='sepia')): ?> selected="selected"<?php endif ?>><?php echo __('Sepia') ?></option>
							<option value="opacity"<?php if($exist && ($settings['effect']=='opacity')): ?> selected="selected"<?php endif ?>><?php echo __('Opacity') ?></option>
						</select>
					</div>
					
					<div class="col-tb-3">
						<label for="lightbox" class="control-label"><?php echo __('Use lightbox') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['lightbox']): ?> checked="checked"<?php endif ?> value="1" name="setting[lightbox]" id="lightbox" class="admin__actions-switch-checkbox">
							<label for="lightbox" class="admin__actions-switch-label">
								<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
							</label>
						</div>
					</div>
				</div>
				
				<div class="form-group line">
					<div class="col-tb-3">
						<label for="border_color" class="control-label"><?php echo __('Border color') ?></label><br/>
						<input type="text" class="input-text color-input" id="border_color" name="setting[border_color]"<?php if($exist && $settings['border_color']): ?> value="<?php echo $settings['border_color'] ?>"<?php endif ?> onchange="setPreview()"/>
					</div>
					
					<div class="col-tb-3">
						<label for="border_width" class="control-label"><?php echo __('Border width') ?></label>
						<input type="text" class="input-text validate-number" id="border_width" name="setting[border_width]"<?php if($exist && $settings['border_width']!=''): ?> value="<?php echo $settings['border_width'] ?>"<?php endif ?> placeholder="px" onchange="setPreview()"/>
					</div>
					
					<div class="col-tb-3">
						<label for="border_radius" class="control-label"><?php echo __('Border radius') ?></label>
						<input type="text" class="input-text validate-number" id="border_radius" name="setting[border_radius]"<?php if($exist && $settings['border_radius']!=''): ?> value="<?php echo $settings['border_radius'] ?>"<?php endif ?> placeholder="px" onchange="setPreview()"/>
					</div>
					
					<div class="col-tb-3">
						<label for="box_shadow" class="control-label"><?php echo __('Box shadow') ?></label><br/>
						<div class="admin__actions-switch" data-role="switcher">
							<input type="checkbox"<?php if($exist && $settings['box_shadow']): ?> checked="checked"<?php endif ?> value="1" name="setting[box_shadow]" id="box_shadow" class="admin__actions-switch-checkbox" onclick="setPreview()">
							<label for="box_shadow" class="admin__actions-switch-label">
								<span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
							</label>
						</div>
					</div>
				</div>
				
				<hr/>
				
				<div class="content-block mgs-masonry-block" id="masonry-temp">
				</div>
				
				<style type="text/css" id="masonry-custom-css"></style>
			</div>
			
			<?php if($exist): ?>
				<?php 
					echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
						->setExist($exist)
						->setBuilderChild($child)
						->setBuilderHelper($helper)
						->setTemplate('MGS_Fbuilder::panel/create/element/widgets/code_tab.phtml')->toHtml() ;
				?>
				
			<?php endif ?>
		</div>
		
		
		<div class="line">
			<div class="form-group">
				<div class="col-des-12 builder-action">
					<div class="buttons">
						<?php if(!$exist): ?>
							<button type="button" class="action" onclick="history.go(-1)"><span><?php echo __('Back') ?></span></button>
						<?php endif ?>
						<button type="submit" class="action primary"><span><?php echo __('Submit') ?></span></button>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
<script type="text/javascript">
    var idx = <?php echo $i ?>;
	require([
		'jquery',
	], function($){
		$(document).ready(function(){
			setPreview();
			$('.imagetoadd').each(function(){
				if($(this).prop("checked") == true){
					id = $(this).attr('id');
					arrId = id.split('addimg');
					numberId = arrId[1];
					$('#url'+numberId).removeAttr('disabled');
				}
			});
		});
	});
    
	function addToGallery(numberId){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#addimg'+numberId).prop("checked") == true){
					$('#url'+numberId).removeAttr('disabled');
				}else{
					$('#url'+numberId).attr('disabled','disabled');
				}
			})(jQuery);
		});
	}
	
	function setPreview(){
		require([
			'jquery',
			'bridget',
			'mgsmasonry'
		], function(jQuery){
			(function($) {
				column = $('#column').val();
				item_margin = parseFloat($('#item_margin').val());
				effect = $('#effect').val();
				border_color = $('#border_color').val();
				border_width = parseFloat($('#border_width').val());
				border_radius = parseFloat($('#border_radius').val());
				
				$itemMargin = 30;
				if(item_margin!='' && item_margin>0){
					$itemMargin = item_margin;
				}
				if($itemMargin!=0){
					$colMargin = parseFloat($itemMargin/2);
				}else{
					$colMargin = 0;
				}

				html = '<div class="line row-'+column+'" id="masonry" style="margin-left:-'+$colMargin+'px; margin-right:-'+$colMargin+'px">';
				
				for(var i=1; i<=10; i++){
					html += '<div class="grid-item col mgs-effect-'+effect+'" style="margin-bottom:'+$itemMargin+'px; padding-left:'+$colMargin+'px; padding-right:'+$colMargin+'px">';
					
					html += '<span';
					
					if($('#box_shadow').prop("checked") == true){
						html += ' class="mgs-box-shadow"';
					}
					html += '><a>';
					
					html += '<img src="<?php echo $this->getViewFileUrl('MGS_Fbuilder::images/panel/masonry') ?>/'+i+'.jpg" alt="" />';
					
					html += '</a></span>';
					
					html += '</div>';
				}
				
				html += '</div>';
				
				$('#masonry-temp').html(html);
				
				$('#masonry').masonry({
				  itemSelector: '.grid-item',
				  percentPosition: true,
				});
				
				$customStyle = '';
				
				if(border_color!='' && border_width!='' && !isNaN(border_width) && border_width>0){
					$customStyle += '#masonry-temp.mgs-masonry-block .grid-item span{border:'+border_width+'px solid '+border_color+'}';
				}
				if(border_radius!='' && !isNaN(border_radius) && border_radius>0){
					$customStyle += '#masonry-temp.mgs-masonry-block .grid-item span{border-radius:'+border_radius+'px}';
				}
				
				$('#masonry-custom-css').html($customStyle);
			})(jQuery);
		});
	}
	
	function newImageUpload(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				if($('#file_upload').length){
					if($('#upload_button').length){
						alert('<?php echo __('Please upload selected image first.') ?>');
					}else{
						alert('<?php echo __('Please choose file to upload.') ?>');
					}
				}else{
					html = '<div class="form-group line"><div class="col-tb-3 choose-file-upload"><input id="file_upload" name="file_upload" type="file" onchange="chooseFileAction(this.id)"><span class="choose-label"><span class="fa fa-folder-o"> </span> &nbsp;<?php echo __('Choose File to Upload') ?></span></div><div class="col-tb-9" id="upload_action"></div></div>';
					$('#list-upload').html(html);
				}
				
			})(jQuery);
		});
	}
	
	function chooseFileAction(elId){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
				fileName = $('#'+elId).val();
				arrName = fileName.split(".");
				extensionName = arrName[arrName.length - 1];
				extensionName = extensionName.toLowerCase();
				if((extensionName=='jpg') || (extensionName=='jpeg') || (extensionName=='png') || (extensionName=='gif')){
					html = fileName + ' <button type="button" class="btn btn-default" id="upload_button" onclick="uploadImage()"><img src="<?php echo $this->getViewFileUrl('MGS_Fbuilder::images/small-ajax-loader.gif') ?>" id="upload-loading" style="display:none"/> <span class="fa fa-upload" id="upload-icon"></span> <?php echo __('Upload') ?></button>';
					$('#upload_action').html(html);
				}
			})(jQuery);
		});
	}
	
	function uploadImage(){
		require([
			'jquery',
		], function(jQuery){
			(function($) {
                idx++;
				if($('.alert-image-success').length){
					$('.alert-image-success').remove();
				}
				$('#upload-loading').show();
				$('#upload-icon').hide();
				var formData = new FormData();
				formData.append('file', $('#file_upload')[0].files[0]);
				$.ajax({
					url: "<?php echo $this->getUrl('fbuilder/post/upload', ['type'=>'masonry']) ?>",
					type: "POST",
					data: formData,
					contentType: false,
					cache: false,
					processData:false,
					success: function(data){
						var result = jQuery.parseJSON(data);
						if(result.result=='success'){
                            tbhtml = '<li><img src="<?php echo $this->getPanelUploadFolder('masonry') ?>'+result.data+'" alt=""></li>';
                            html =  '<div class="image-item">' +
                                        '<div class="img-div"><img class="img-responsive" src="<?php echo $this->getPanelUploadFolder('masonry') ?>'+result.data+'" alt=""/></div>' +
										
										'<div class="image-action"><span><?php echo __('Add to Gallery&nbsp;&nbsp;&nbsp;') ?></span><div class="admin__actions-switch" data-role="switcher"><input type="checkbox" name="setting[addimg][]" id="addimg'+idx+'" class="admin__actions-switch-checkbox" value="'+result.data+'" onclick="addToGallery('+idx+')"><label for="addimg'+idx+'" class="admin__actions-switch-label"><span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span></label></div></div>' +
										
                                        '<div class="image-action"><span><?php echo __('Remove Image&nbsp;&nbsp;') ?></span><div class="admin__actions-switch" data-role="switcher"><input type="checkbox" name="setting[removeimg][]" id="removeimg'+idx+'" class="admin__actions-switch-checkbox" value="'+result.data+'"><label for="removeimg'+idx+'" class="admin__actions-switch-label"><span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span></label></div></div><div class="image-action"><input type="text" class="input-text" name="setting[url][]" id="url'+idx+'" placeholder="<?php echo __('Link') ?>" disabled="disabled"/></div>' +
										
                                    '</div>';
							$('#list-images').append(html);
							$(".panel-image-list").animate({ scrollTop: $('#list-images').height()}, 300);
						}else{
							alert(result.data);
						}
						
						$('#list-upload').html('');
					}
				});
			})(jQuery);
		});
	}
</script>