@extends('layouts.adminapp')
@section('content')
    <style>
        .page {
            background: gray;
            width: 1020px;
            height: 500px;
        }

        .item {
            padding: 5px;
            color: green;
            font-size: 32px;
            position: relative;
        }

        .seleced-item {
            border: 1px red solid;
        }
    </style>
    <x-app-flash />
    <!-- DataTales Example -->
    <div class="row mb-5">
        <div class="col-sm-3">
            <div class="card shadow">
                <div class="d-flex justify-content-center">
                    <div class="p-2"><button class="btn btn-sm btn-secondary" onclick="Increase();"  data-toggle="tooltip" title="tree" data-placement="bottom">+</button></div>
                    <div class="p-2"><button class="btn btn-sm btn-secondary" onclick="Decrease();"  data-toggle="tooltip" title="tree" data-placement="bottom">-</button></div>
                    {{-- <div class="p-2"><button class="btn btn-sm btn-secondary" onclick="ChangeLocation(50,75);">T</button></div> --}}
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card shadow">
                <div class="d-flex justify-content-center">
                    <div class="p-2"><button class="btn btn-sm btn-primary" onclick="drawItem('tree');" data-toggle="tooltip" title="tree" data-placement="bottom"><i class="fa fa-tree"></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-primary" onclick="drawItem('circle');" data-toggle="tooltip" title="circle" data-placement="bottom"><i class="fa fa-circle"></i></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-primary" onclick="drawItem('grip-lines-vertical');" data-toggle="tooltip" title="grip-lines-vertical" data-placement="bottom"><i class="fas fa-grip-lines-vertical"></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-primary" onclick="drawItem('home');" data-toggle="tooltip" title="home" data-placement="bottom"><i class="fas fa-home"></i></button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card shadow">
                <div class="d-flex justify-content-center">
                    <div class="p-2"><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('up');" data-toggle="tooltip" title="up" data-placement="bottom"><i class="fa fa-arrow-up" aria-hidden="true" ></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('left');" data-toggle="tooltip" title="left" data-placement="bottom"><i class="fa fa-arrow-left" aria-hidden="true" ></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('right');" data-toggle="tooltip" title="right" data-placement="bottom"><i class="fa fa-arrow-right" aria-hidden="true" ></i></button></div>
                    <div class="p-2"><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('down');" data-toggle="tooltip" title="down" data-placement="bottom"><i class="fa fa-arrow-down" aria-hidden="true" ></i></button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="card shadow">
                <div class="d-flex justify-content-center">
                    <div class="p-2"><button class="btn btn-sm btn-secondary" onclick="clearPage()">{{__('lng.Clear')}}</button></div>
                </div>
            </div>
        </div>
        {{-- <div class="col-sm-4">
            <div class="card shadow">
                <ul class="list-group">
                    <li class="list-group-item"><button class="btn btn-secondary" onclick="Increase();">+</button></li>
                    <li class="list-group-item"><button class="btn btn-secondary" onclick="Decrease();">-</button></li>
                    <li class="list-group-item"><button class="btn btn-secondary" onclick="ChangeLocation(50,75);">T</button></li>
                </ul>
            </div>
            <table>
              <tr>
                <td></td>
                <td><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('up');"><i class="fa fa-arrow-up" aria-hidden="true"></i></button></td>
                <td></td>
              </tr>
              <tr>
                <td><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('left');"><i class="fa fa-arrow-left" aria-hidden="true"></i></button></td>
                <td></td>
                <td><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('right');"><i class="fa fa-arrow-right" aria-hidden="true"></i></button></td>
              </tr>
              <tr>
                <td></td>
                <td><button class="btn btn-sm btn-info" onclick="NavigationKeys_Click('down');"><i class="fa fa-arrow-down" aria-hidden="true"></i></button></td>
                <td></td>
              </tr>
            </table>
        </div> --}}
        <div class="col-sm-12">
            <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> --}}
                    <div class="overflow-auto">
                        <div class="page" id="page" onmouseup="Page_MoseUP();">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p id="Print"></p>
        <script>
            var SelectedItem = null;
            var page = document.getElementById("page");
            var isDrag = false;
            var X;
            var Y;

            function drawItem(Type) {
                const icon = document.createElement("i");
                icon.classList.add("fa");
                icon.classList.add("item");
                icon.classList.add("fa-" + Type);
                icon.classList.add("fa-" + Type);
                icon.setAttribute("data-toggle", "tooltip");
                icon.setAttribute("data-placement", "bottom");
                icon.setAttribute("title",Type);
                // icon.addEventListener('click', Item_Selected);
                icon.addEventListener('mousedown', Item_Down);
                icon.addEventListener('mousemove', Item_Move);
                icon.addEventListener('mouseup', Item_Up);
                icon.style.left = "5px";
                icon.style.top = "5px";
                page.appendChild(icon);
                Item_Selected(icon);
            }

            function Item_Down(event) {
                isDrag = true;
                Item_Selected(event.target);
                X = event.clientX; //X1!=""?parseInt(X1.substring(0,X1.length)):0;
                Y = event.clientY; //Y1!=""?parseInt(Y1.substring(0,Y1.length)):0;
                document.getElementById("Print").innerHTML = Date() + "(" + X + ":" + Y + ")";
            }

            function Item_Move(event) {
                if (isDrag) {
                    var X1 = SelectedItem.style.left;
                    var Y1 = SelectedItem.style.top;
                    X1 = X1 !== "" ? parseInt(X1.substring(0, X1.length - 2)) : 0;
                    Y1 = Y1 !== "" ? parseInt(Y1.substring(0, Y1.length - 2)) : 0;
                    document.getElementById("Print").innerHTML = X1;

                    // Adjust the speed factor to your desired value
                    var speedFactor = .5;

                    // Calculate the increment based on the speed factor
                    var deltaX = (event.clientX - X) * speedFactor;
                    var deltaY = (event.clientY - Y) * speedFactor;

                    var cX = X1 + deltaX;
                    var cY = Y1 + deltaY;
                    ChangeLocation(cX, cY);
                    document.getElementById("Print").innerHTML = Date() + "(" + cX + ":" + cY + ")";
                }
            }

            function Item_Up() {
                isDrag = false;
            }

            var stepSize = 1; // Adjust the step size as needed
            function NavigationKeys_Click(Direction)
            {
              if(SelectedItem!=null)
              {
                var X1 = SelectedItem.style.left;
                var Y1 = SelectedItem.style.top;
                X1 = X1 !== "" ? parseInt(X1.substring(0, X1.length - 2)) : 0;
                Y1 = Y1 !== "" ? parseInt(Y1.substring(0, Y1.length - 2)) : 0;
                var currentTop = Y1;
                var currentLeft = X1;
                if (Direction=="up") {
                  SelectedItem.style.top = eval(currentTop - stepSize) + "px";
                } else if (Direction == "down") {
                  SelectedItem.style.top = eval(currentTop + stepSize) + "px";
                } else if (Direction == "left") {
                  SelectedItem.style.left = eval(currentLeft - stepSize) + "px";
                } else if (Direction == "right") {
                  SelectedItem.style.left = eval(currentLeft + stepSize) + "px";
                }
              }
            }

            function clearPage() {
                page.innerHTML = "";
            }

            function Item_Selected(Item) {
                SelectedItem = Item;
                var Selecteditems = document.getElementsByClassName('seleced-item');
                if (Selecteditems.length > 0) {
                    Selecteditems[0].classList.remove('seleced-item');
                }
                SelectedItem.classList.add("seleced-item");
            }

            function Increase() {
                if (SelectedItem) {
                    var element = SelectedItem;
                    var currentFontSize = window.getComputedStyle(element).fontSize;
                    var currentSize = parseFloat(currentFontSize);
                    var newSize = currentSize + 2;
                    element.style.fontSize = newSize + "px";
                }
            }

            function Decrease() {
                if (SelectedItem) {
                    var element = SelectedItem;
                    var currentFontSize = window.getComputedStyle(element).fontSize;
                    var currentSize = parseFloat(currentFontSize);
                    var newSize = currentSize - 2;
                    element.style.fontSize = newSize + "px";
                }
            }

            function ChangeLocation(x, y) {
                SelectedItem.style.left = x + "px";
                SelectedItem.style.top = y + "px";
            }

            function Page_MoseUP() {
                isDrag = false;
            }
        </script>
    @endsection