<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Customize Uniform</title>
    <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>

</head>
<body>

    <div id="svgFrontContent" style="display:none;"></div>
   
    <p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
    <canvas  id="frontCanvas"  width="572px" height="502px" style="border: 1px solid black; display:none"></canvas>
    <div id="printFileDiv" style="display:none;"></div>
    
    <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
        <p id="log"></p>
    <!-- jQuery 3 -->
    <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
    <!-- fabric js 1.7.20 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
    <!-- curvetext -->
    <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>

    <script>
       function logSubmit(event) {
        log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;

        event.preventDefault();
        }
/*  var dwn = document.getElementById('btndownload'); */
        var form = document.getElementById('myForm');
        var  log = document.getElementById('log');
        form.addEventListener('submit', logSubmit);


        var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
        tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
        frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
			frontCanvas.overlayImage = null;
            frontCanvas.renderAll();

            setTimeout(function(){

                frontCanvas.backgroundImage = 0;
				frontCanvas.overlayImage = null;
                frontCanvas.clear();
                frontCanvas.renderAll();

                setTimeout(function(){

                    frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
						frontCanvas.overlayImage = null;
                        frontCanvas.renderAll();
                        frontCanvas.selection = false;
						zoomIn(frontCanvas, "Front");
						download(frontCanvas, 'print_file.jpg');
                    });

                },1000);

            } ,500);
        });
		
		
		/* dwn.onclick = function(){
			download(frontCanvas, 'print_file.');
		  } */
      
 			function download(canvas, filename) {
			  /// create an "off-screen" anchor tag
			  var lnk = document.createElement('a'), e;

			  /// the key here is to set the download attribute of the a tag
			  lnk.download = filename;

			  /// convert canvas content to data-uri for link. When download
			  /// attribute is set the content pointed to by link will be
			  /// pushed as "download" in HTML5 capable browsers
			  lnk.href = canvas.toDataURL("image/jpeg;base64");

			  /// create a "fake" click-event to trigger the download
			  if (document.createEvent) {
				e = document.createEvent("MouseEvents");
				e.initMouseEvent("click", true, true, window,
								 0, 0, 0, 0, 0, false, false, false,
								 false, 0, null);

				lnk.dispatchEvent(e);
			  } else if (lnk.fireEvent) {
				lnk.fireEvent("onclick");
			  }
			}
           
 
        function zoomIn(canvas, side) {
            var canvasScale = 1;
            var SCALE_FACTOR = 1.2;
            // TODO limit the max canvas zoom in
            //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
            // X = WIDTH and Y = HEIGHT
            if(side == "Front"){
                var SCALE_FACTOR_X = 792 / 572;
                var SCALE_FACTOR_Y = 695.164 / 502;
            }
           
            canvasScale = canvasScale * SCALE_FACTOR;

            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);

            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * SCALE_FACTOR_X;
                var tempScaleY = scaleY * SCALE_FACTOR_Y;
                var tempLeft = left * SCALE_FACTOR_X;
                var tempTop = top * SCALE_FACTOR_Y;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            canvas.renderAll();
        }

        function sendSVG(){
            var svgText = document.getElementById('printFileDiv').innerHTML;


            var form = document.querySelector('form');
            // form.setAttribute("method", "post");
            // form.setAttribute("id", "frm_svg");
            // form.setAttribute("action", "");
            // form.setAttribute("accept-charset", "UTF-8");

            var hiddenSVGField = document.createElement("input");
            hiddenSVGField.setAttribute("type", "hidden");
            hiddenSVGField.setAttribute("name", "svgText");
            hiddenSVGField.setAttribute("value", svgText);
            
            var hiddenToken = document.createElement("input");
            hiddenToken.setAttribute("type", "hidden");
            hiddenToken.setAttribute("name", "_token");
            hiddenToken.setAttribute("value", "{{ csrf_token() }}");

            var hiddenDetails = document.createElement("input");
            hiddenDetails.setAttribute("type", "hidden");
            hiddenDetails.setAttribute("name", "filename");
            hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size  }}");


            form.appendChild(hiddenSVGField);
            form.appendChild(hiddenToken);
            form.appendChild(hiddenDetails);

            document.body.appendChild(form);
            form.submit();
            alert("Print file is successfully generated!");
            setTimeout(function(){
               window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
            },2000);
		}

    </script>

</body>
</html>