{extends file='page.tpl'}

{block name="page_content"}
<form action="{$configureproductlink}" method="post">
<div class="row">
	<div class="col-md-3"></div>
	<div class="col-md-6">
		{foreach $configurator_fields as $id_page => $configurator_page}
			<div id="configurator_main_image_container" class="configurator_main_image_container configurator_main_image_container_{$id_page}" style="display: none; position: relative; max-width: 100%;">
				<img id="configurator_main_image" style="object-fit: cover; width: {$configurator_page['width']}px; height: {$configurator_page['height']}px; max-width: 100%;" attr-width="{$configurator_page['width']}" attr-height="{$configurator_page['height']}" src="{$configurator_page['image']}"/>
				{foreach $configurator_page['fields'] as $configurator_field}
					{if $configurator_field['type'] == 1}
						<div class="configurator_field configurator_field_{$configurator_field['id_config_field']}" attr-fontsize="{$configurator_field['fontsize']}" field-id="{$configurator_field['id_config_field']}" style="white-space: pre-wrap;line-height: normal;transform: rotate({$configurator_field['rotation']}deg);{if isset($configurator_field['textalign']) && $configurator_field['textalign']} text-align: {$configurator_field['textalign']};{/if} color: {$configurator_field['color']}; overflow: hidden; position: absolute; font-family: '{$configurator_field['font']}'; font-size: {$configurator_field['fontsize']}px; left: {$configurator_field['x']}%; top: {$configurator_field['y']}%; width: {$configurator_field['width']}%; height: {$configurator_field['height']}%;">{$configurator_field['text']}</div>
					{else}
						<div class="configurator_field configurator_field_{$configurator_field['id_config_field']}" field-id="{$configurator_field['id_config_field']}" style="background-image: url('{$configurator_field['text']}');background-size: 100% 100%;background-position: center;background-repeat: no-repeat;line-height: normal;transform: rotate({$configurator_field['rotation']}deg); color: {$configurator_field['color']}; overflow: hidden; position: absolute; font-family: '{$configurator_field['font']}'; font-size: {$configurator_field['fontsize']}px; left: {$configurator_field['x']}%; top: {$configurator_field['y']}%; width: {$configurator_field['width']}%; height: {$configurator_field['height']}%;"></div>
					{/if}
				{/foreach}
			</div>
		{/foreach}
	</div>
	<div class="col-md-3">
		<div class="row">
			<div class="col-md-12" id="pagesList">
				{foreach $configurator_fields as $id_page => $configurator_page}
					{if isset($configurator_page['fields']) && $configurator_page['fields'] && count($configurator_page['fields']) > 0}
		       			<button class="btn btn-primary configurator_page configurator_page_button_{$id_page}" style="margin-bottom: 1rem;" page-id="{$id_page}" type="button">{$configurator_page['name']}</button>	
					{/if}
				{/foreach}
			</div>
		</div>
	    <input type="hidden"
	       id="configurator_current_page"
	       name="configurator_current_page"
	       value="0"
	    />
		{foreach $configurator_fields as $id_page => $configurator_page}
			<div id="configurator_panel_field" class="configurator_panel_field configurator_panel_field_{$id_page}" style="width: 100%; display: none; position: relative;">
				{foreach $configurator_page['fields'] as $configurator_field}
					<div class="col-md-12 px-0 py-1">
		                <div>
		                	{if $configurator_field['type'] == 1}
				                <textarea
				                   id="configurator_field_input_{$configurator_field['id_config_field']}"
				                   name="configurator_field_input_{$configurator_field['id_config_field']}"
				                   class="form-control configurator_field_input"
				                   field-id="{$configurator_field['id_config_field']}"
				                   attr-characters-limit="{$configurator_field['characters_limit']}"
				                   value="{$configurator_field['text']}">{$configurator_field['text']}
			                   </textarea>
			                {else}
				                <input type="file"
				                   id="configurator_field_input_{$configurator_field['id_config_field']}"
				                   name="configurator_field_input_{$configurator_field['id_config_field']}"
				                   class="form-control configurator_field_input_img"
				                   field-id="{$configurator_field['id_config_field']}"
				                   img-id="configurator_field_img_{$configurator_field['id_config_field']}"
				                />
								<label style="width: 100%; display: inline-block; position: relative; margin-bottom: 0px; font-size: 1rem; text-align: left;">
									{l s='Pamiętaj, użyj zdjęcia o możliwie najwyższej rozdzielczości! Zdjęcia kiepskiej jakości obniżą jakość produktu!' mod='configurator'}
								</label>
							    <input type="hidden"
							       id="configurator_field_img_{$configurator_field['id_config_field']}"
							       name="configurator_field_img_{$configurator_field['id_config_field']}"
							       value="0"
							    />
			                {/if}
		                </div>
					</div>
				{/foreach}
			</div>
		{/foreach}
		<div class="row">
			<div class="col-md-12" style="margin-top: 15px;">
				{if isset($cart_redirect) && $cart_redirect == 1}
				    <input type="hidden"
				       id="edit"
				       name="edit"
				       value="1"
				    />
			    {/if}
		        <div class="add">
		          <button
		            class="btn btn-primary"
		            id="saveConfiguration"
		            name="saveConfiguration"
		            type="submit"
		          >
		            {l s='Save' d='Shop.Theme.Actions'}
		          </button>
		        </div>
		    </div>
		</div>
	</div>
</div>
</form>
<style>
#module-configurator-configureproduct #wrapper .container {
	width: 100%;
}
</style>
<div id="uploadimageModal" class="modal" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Wykadruj zdjęcie</h4>
        </div>
        <div class="modal-body">
          <div class="row">
       <div class="col-md-8 text-center">
        <div id="image_demo" style="width:350px; margin-top:30px; max-width: 100%;"></div>
       </div>
       <div class="col-md-4" style="padding-top:30px;">
        <br />
        <br />
        <br/>
        <button type="button" class="btn btn-primary crop_image">Zapisz zdjęcie</button>
     </div>
    </div>
        </div>
        <div class="modal-footer">
          <button type="button" type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
        </div>
     </div>
    </div>
</div>
<script>
{literal}
document.addEventListener('DOMContentLoaded', function (event) {
    var current_width = 0;
    var current_height = 0;
    var img_id = 0;
    var field_id = 0;
	$image_crop = $('#image_demo').croppie({
	    enableExif: true,
	    viewport: {
	      width:200,
	      height:200,
	      type:'square' //circle
	    },
	    boundary:{
	      width:300,
	      height:300
	    }
	});
	$(document).on('keyup touchend', ".configurator_field_input", function (){
		var characters_limit = parseInt($(this).attr("attr-characters-limit"));
		if(typeof characters_limit !== 'undefined' && characters_limit && characters_limit > 0 && $(this).val().length > characters_limit) {
			$(this).val($(this).val().substring(0, characters_limit));
		}
		$(".configurator_field_"+$(this).attr("field-id")).html($(this).val());
	});
	$(document).on('click', ".configurator_page", function (){
		$(".configurator_main_image_container").css("display", "none");
		$(".configurator_panel_field").css("display", "none");
		$(".configurator_main_image_container_"+$(this).attr("page-id")).css("display", "inline-block");
		$(".configurator_panel_field_"+$(this).attr("page-id")).css("display", "inline-block");
		$("#configurator_current_page").val($(this).attr("page-id"));
	    current_width = 0;
	    current_height = 0;
		scaleConfigurator();
	});
	$(".configurator_main_image_container_{/literal}{$config_page}{literal}").css("display", "inline-block");
	$(".configurator_panel_field_{/literal}{$config_page}{literal}").css("display", "inline-block");
	$(".images-container.js-images-container").append($("#configurator-content-img-html").html());
	$("#configurator-content-img-html").remove();
	$(document).on('click', ".open-product-config-modal", function (){
		$(".product-cover").hide();
		$(".js-qv-mask.mask").hide();
		$("#configurator-content-img").show();
		$("#configurator-content-settings").show();
		scaleConfigurator();
	});
	$(document).on('change', ".configurator_field_input_img", function (event){
	    img_id = $(this).attr('img-id');
	    field_id = $(this).attr('field-id');
	    $image_crop.croppie('destroy');
		$image_crop = $('#image_demo').croppie({
		    enableExif: true,
		    viewport: {
		      width: $(".configurator_field_"+field_id).width(),
		      height: $(".configurator_field_"+field_id).height(),
		      type:'square' //circle
		    },
		    boundary:{
		      width:300,
		      height:300
		    }
		});
		var reader = new FileReader();
	    reader.onload = function (event) {
	      $image_crop.croppie('bind', {
	        url: event.target.result
	      }).then(function(){
	        console.log('jQuery bind complete');
	      });
	    }
	    reader.readAsDataURL(this.files[0]);
	    $('#uploadimageModal').modal('show');
	});
	
	  $('.crop_image').click(function(event){
	    $image_crop.croppie('result', {
	      type: 'canvas',
	      size: 'viewport'
	    }).then(function(response){
		   var formData = new FormData();
		   formData.append('img', response);
		   formData.append('prev', '');
		   formData.append('type', 'customer');
		   $.ajax({
		       url : 'https://wyczarujprezent.pl/modules/configurator/uploadFieldImg.php',
		       type : 'POST',
		       data : formData,
		       processData: false,  // tell jQuery not to process the data
		       contentType: false,  // tell jQuery not to set contentType
		       success : function(data) {
		       	if(typeof data !== 'undefined') {
		       		$('#'+img_id).val(data);
					$(".configurator_field_"+field_id).css('background-image', 'url("'+data+'")');
					refreshAddToCartButton();
		            $('#uploadimageModal').modal('hide');
		            $('#uploaded_image').html(data);
		       	}
		       }
		   });
	    })
	  });
	$(".configurator_page_button_{/literal}{$config_page}{literal}").click();
	function scaleConfigurator() {
		var configurator_current_page = parseInt($("#configurator_current_page").val());
		var original_width = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").attr("attr-width"));
		var original_height = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").attr("attr-height"));
		if(current_width == 0 || original_width == current_width) {
			current_width = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").width());
			current_height = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").height());
		}
		var ratio = parseInt((current_width*100)/original_width);
		$(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").height(original_height*(ratio/100));
		$(".configurator_main_image_container_"+configurator_current_page+" .configurator_field").each(function() {
			var font_size = parseInt($(this).attr("attr-fontsize"));
		    $(this).css("font-size", (font_size*(ratio/100))+"px");
		});
	}
});
{/literal}
</script>
{/block}