@extends('layouts.adminapp')
@section('content')

{{-- KabarRegister --}}
<x-app-flash/>
    {{-- <h1 class="h3 mb-2 text-gray-800">{{__('lng.KabarRegister')}}</h1> --}}
    
    <!-- DataTales Example -->
    <div class="row">
        <div class="col-sm-9">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="kabar-icon d-flex flex-row-reverse">
                        <i class="fas fa-compass"></i>
                    </div>  
                    

                    <p>Drag from blue toolbar onto red canvas<br>Then press the action buttons below</p>
                    <div id="toolbar">
                        <img class="tool" width=32 height=32 src="https://www.w3schools.com/html/img_logo.gif" crossOrigin='anonymous'>
                    </div><br>
                    <canvas id="canvas" width=350 height=150></canvas><br>
                </div>
            </div>  
           
        </div>
        <div class="col-sm-3">
            <div class="card shadow mb-4 p-4">
                <div class="card-body">
                    <div class="card shadow mb-4 ">
                        <div class="card-body text-center kabar-icon">
                            <i class="fa fa-tree"></i>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-body text-center kabar-icon">
                            <i class="fa fa-circle" ></i>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-body text-center kabar-icon">
                            <i class="fas fa-grip-lines-vertical"></i>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-body text-center kabar-icon">
                            <i class="fas fa-home fa-fw" ></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        // get references to the canvas and its context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// get the offset position of the canvas
var $canvas=$("#canvas");
var Offset=$canvas.offset();
var offsetX=Offset.left;
var offsetY=Offset.top;

var x,y,width,height;

// select all .tool's
var $tools=$(".tool");


// make all .tool's draggable
$tools.draggable({
    helper:'clone',
});


// assign each .tool its index in $tools
$tools.each(function(index,element){
    $(this).data("toolsIndex",index);
});


// make the canvas a dropzone
$canvas.droppable({
    drop:dragDrop,
});


// handle a drop into the canvas
function dragDrop(e,ui){
    
    // get the drop point (be sure to adjust for border)
    x=parseInt(ui.offset.left-offsetX)-1;
    y=parseInt(ui.offset.top-offsetY);
    width=ui.helper[0].width;
    height=ui.helper[0].height;
    
    // get the drop payload (here the payload is the $tools index)
    var theIndex=ui.draggable.data("toolsIndex");
    
    // drawImage at the drop point using the dropped image 
    // This will make the img a permanent part of the canvas content
    ctx.drawImage($tools[theIndex],x,y,width,height);
    
}


// Just testing: Scribble some lines over the dropped img pixels
// In your app you can scribble any way you desire
$('#scribble').click(function(){
    ctx.beginPath();
    ctx.moveTo(x-20,y-20);
    ctx.lineTo(x+10,y+height+5);
    ctx.lineTo(x+20,y-20);
    ctx.lineTo(x+width,y+height+5);
    ctx.stroke();
    console.log('scribble',x,y,width,height);
});

// export the img pixels plus the scribble pixels
// (1) Draw the desired pixels onto a temporary canvas
// (2) Create a new img element from the temp canvas's dataURL
// (3) Append that new img to the #exportedImgs div
$('#export').click(function(){
    var tempCanvas=document.createElement('canvas');
    var tempCtx=tempCanvas.getContext('2d');
    tempCanvas.width=width;
    tempCanvas.height=height;
    tempCtx.drawImage(canvas,x,y,width,height,0,0,width,height);
    var img=new Image();
    img.onload=function(){
        $('#exportedImgs').append(img);
    };
    img.src=tempCanvas.toDataURL();
});
    </script>

@endsection