@extends('layouts.admin')

@section('content')
<div class="card">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style>
	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
	.textdata-container{margin-top: 40px;border:1px solid #000000;padding:20px;min-height:720px;position: relative;}
	.text-data{text-align:center;color:#ffffff;margin-bottom:20px;font-size:5px;background: rgba(54, 71, 79, 0.90);display: table;cursor:pointer;top:0;box-sizing: border-box;}
	.ui-state-highlight, .ui-widget-content .ui-state-highlight{
	border:none;
	background:transparent;
	}
	.label{
		color: #000000 !important;
	}
</style>

	@if(CloudStorage::exists($orderTemplate->files_dir.$orderTemplate->id.'.jpeg'))
	<div style="display:inline-block;float: left;position:relative">
		{{ csrf_field() }}
		<div class="image-container">
		@if($orderTemplate)
		<img data-templateid="{{ $orderTemplate->id }}" src="{{ CloudStorage::url($orderTemplate->files_dir.$orderTemplate->id.'.jpeg') }}" name="pdf_image" id="pdf_image" >
		@endif
		@if($templateBoxes)
			@foreach($templateBoxes as $tk=>$tv)
				<div class="text-data draggable" style="position:absolute;top:{{ $tv['top'] }}px;left:{{ $tv['left'] }}px;width:{{ $tv['width'] }}px;height:{{ $tv['height'] }}px;" data-id="{{ $tk }}">{{ $boxes[$tk] }}</div>
			@endforeach
		@endif
		</div>
		
	</div>
	<div class="col-md-4">
		<div class="textdata-container">		
			@if($boxes)
				@foreach($boxes as $k=>$v)
					@if(!array_key_exists($k, $templateBoxes))
					<div class="text-data draggable" data-id="{{ $k }}">{{ $v }}</div>
					@endif
				@endforeach
			@endif
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<button class="btn btn-sm btn-danger savepdfextrator"> Save</button>
		</div>
	</div>
	@else
	<div class="row">
		<div class="col-md-12">
			<b>No template file addded.</b>
		</div>
	</div>
	@endif
</div>


@endsection



@section('scripts')

<script charset="utf-8" src="{{asset('backend/js/services/orderTemplates.js')}}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	 $(function() {
            var textcords = {};
            $('.textdata-container').on('click','.draggable',function(){
				
              $('.image-container').append(this)
              //this.remove();
              startdrag();
			  
            });
			
			$('.image-container').on('dblclick','.draggable',function(){
				$(this).draggable( 'destroy' );
				$(this).resizable('destroy').removeAttr("style");
				console.log('double clicked');
				//$(this).removeClass('ui-draggable ui-draggable-handle ui-resizable')
				$('.textdata-container').append(this)
				
				delete textcords[$(this).data('id')];
				console.log(textcords);
			})

            var coordinates = function(element) {
                element = $(element);
                var top = element.position().top;
                var left = element.position().left;
                console.log('X: ' + left + ' ' + 'Y: ' + top);
            }
			
            function startdrag(){
            $(".image-container .draggable").draggable({
                containment: "#myCanvas",
				create:function(even,ui){
					/* console.log("x1:"+ Math.ceil(($(this).position().left)));
					console.log("y1:"+ Math.ceil(($('#pdf_image').height() - $(this).position().top-10)));
					console.log("x2: "+ Math.ceil(($(this).position().left + $(this).outerWidth())));
					console.log("y2: "+ Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1)))); */
					
				textcords[$(this).data('id')] = {
					"id"  : $(this).data('id'),
					"x1" : Math.ceil(($(this).position().left)),
					"y1" : Math.ceil(($('#pdf_image').height() - $(this).position().top-10)),
					"x2" : Math.ceil(($(this).position().left + $(this).outerWidth())),
					"y2" : Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1))),
					"top" : Math.ceil(($(this).position().top)),
					"left" : Math.ceil(($(this).position().left)),
					"width" : Math.ceil(($(this).outerWidth())),
					"height" : Math.ceil(($(this).outerHeight()))
				};
				console.log(textcords);
				},
                stop: function(event, ui) {
					console.log($(this).data('id'));
                var offset = $(this).offset();
                console.log(792 - offset.top)
                console.log("x1:"+ Math.ceil(($(this).position().left)));
                console.log("y1:"+ Math.ceil(($('#pdf_image').height() - $(this).position().top-10)));
                console.log("x2: "+ Math.ceil(($(this).position().left + ($(this).outerWidth()-4))));
                console.log("y2: "+ Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1))));
				console.log('height: '+Math.ceil(($(this).outerHeight())));

				textcords[$(this).data('id')] = {
					"id"  : $(this).data('id'),
					"x1" : Math.ceil(($(this).position().left)),
					"y1" : Math.ceil(($('#pdf_image').height() - $(this).position().top-10)),
					"x2" : Math.ceil(($(this).position().left + ($(this).outerWidth()-4))),
					"y2" : Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1))),
					"top" : Math.ceil(($(this).position().top)),
					"left" : Math.ceil(($(this).position().left)),
					"width" : Math.ceil(($(this).outerWidth())),
					"height" : Math.ceil(($(this).outerHeight()))
				};

				console.log(textcords);
               
             }
            }).resizable({
                stop:function(event){
                //  console.log(event.pageX + $(this).outerWidth());
                // console.log(792 - event.pageY);
                var offset = $(this).offset();
                console.log("x1:"+ Math.ceil(($(this).position().left)));
                console.log("y1:"+ Math.ceil(($('#pdf_image').height() - $(this).position().top-10)));
                console.log("x2: "+ Math.ceil(($(this).position().left + ($(this).outerWidth()-4))));
                console.log("y2: "+ Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1))))
				
				console.log($(this).outerHeight());
				console.log($(this).innerHeight());
				console.log($(this).height());

				textcords[$(this).data('id')] = {
					"id"  : $(this).data('id'),
					"x1" : Math.ceil(($(this).position().left)),
					"y1" : Math.ceil(($('#pdf_image').height() - $(this).position().top-10)),
					"x2" : Math.ceil(($(this).position().left + ($(this).outerWidth()-4))),
					"y2" : Math.ceil(($('#pdf_image').height() - ($(this).position().top + $(this).outerHeight()-1))),
					"top" : Math.ceil(($(this).position().top)),
					"left" : Math.ceil(($(this).position().left)),
					"width" : Math.ceil(($(this).outerWidth())),
					"height" : Math.ceil(($(this).outerHeight()))
				};

				// var foundIndex = textcords.findIndex(x => x.id == newboxval.id);
				// items[foundIndex] = item;
				

				console.log(textcords);

				}
            }).css("position", "absolute");
        }
		startdrag();
		$('.savepdfextrator').on('click',function(){
			showLoader();
			$('.image-container .draggable').draggable('disable');
			$('.image-container .draggable').resizable('disable');
			
			$.ajax({
				type: 'POST',
				url:  baseUrl+'/ordertemplate/storetemplate',
				data: {type: $(this).val(), template_id: $('#pdf_image').attr('data-templateid'), data: textcords, _token: $('input[name="_token"]').val()},
				dataType: 'json',
				success: function (data) {
					if(data.success){
						toastr.success(data.message);
					}
					else{
						toastr.error('Error occurred. Please try again.');
					}
				},
				error: function (data) {
					toastr.error('Error occurred. Please try again.');
				},
				complete:function (data) {
					hideLoader();
					$('.image-container .draggable').draggable('enable');
					$('.image-container .draggable').resizable('enable');
				}
			});
			
		})

        });
</script>

@endsection