@extends('layouts.form')
@section('styles')
<style>
    .cursor-crosshair{
        cursor: crosshair !important;
    }
</style>
@endsection


@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Module</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
<a href="{{ route('admin.homepage') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.event.event.index') }}">Events</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.event.stadium.index') }}">Stadiums</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Draw</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <a href="{{ route('admin.event.stadium.index') }}">
                    <button type="button" class="btn btn-primary"><i class="fadeIn animated bx bx-arrow-back"></i> กลับ</button>
                    </a>
                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <div class="row">
            <div class="col-xl-12 mx-auto">
                {{-- <h6 class="mb-0 text-uppercase">Basic Form</h6>
                <hr/> --}}
                <div class="card border-top border-0 border-4 border-primary">
                    <div class="card-body p-5">
                        <div class="card-title d-flex align-items-center">
                            <div><i class="bx bxs-user me-1 font-22 text-primary"></i>
                            </div>
                            <h5 class="mb-0 text-primary">Stadium Draw Form</h5>
                        </div>
                        <hr>
                        <form class="row g-3" id="user_frm" name="user_frm" method="POST" onsubmit="setSave(); return false;" enctype="multipart/form-data">
                            @csrf
                            {{-- field --}}

                            <div class="col-md-4">

                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title row">
                                            <div class="col-8">
                                                <h5 class="mb-0">Add/Edit Zone Plan</h5>
                                            </div>
                                            <div class="col-4 text-end">
                                                <button type="button" onclick="addNewPolygon();" id="addPolygon" class="btn btn-primary">Add</button>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="table-responsive">
                                            <div id="zone-list-container">
                                                {{-- <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="Zone name" aria-label="Zone name">
                                                    <button class="btn btn-outline-secondary" type="button"><i class="fadeIn animated bx bx-trash"></i></button>
                                                </div> --}}
                                            </div>
                                        </div>
                                       
                                    </div>
                                    
                                </div>  
                                
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title row">
                                            <div class="col-6">
                                                <h5 class="mb-0">Re Draw Zone</h5>
                                            </div>
                                            <div class="col-6 text-end">
                                                <button type="button" onclick="reDraw();" id="redrawPolygons" class="btn btn-warning px-5">Re draw</button>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="table-responsive">
                                            <canvas id="canvas2" width="400" height="400"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title row">
                                            <div class="col-6">
                                                <h5 class="mb-0">Json</h5>
                                            </div>
                                            <div class="col-6 text-end">
                                                <button type="button" onclick="makeJsonPolygon();" id="savePolygons" class="btn btn-success">Make Json</button>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="table-responsive">
                                            <textarea id="output" rows="10" cols="50"></textarea>
                                        </div>
                                       
                                    </div>
                                </div>


                            </div>

                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title row">
                                            <h5 class="mb-0">Draw Zone</h5>
                                            <input class="form-control form-control-sm" id="floor-plan-img" value="/assets/images/stadium/stage.png" />
                                        </div>
                                        <hr>
                                        <div class="table-responsive">
                                            <canvas id="canvas" width="1000" height="1000"></canvas>
                                        </div>
                                    </div>
                                </div>
                               
                            </div>

                            {{-- .field --}}
                            <div class="col-12 text-center">
                                <button type="button" id="savePolygons" class="btn btn-info px-5"><i class="lni lni-save"></i> Save</button>
                                <a href="{{ route('admin.user.user.index') }}">
                                    <button type="button" class="btn btn-warning px-5"><i class="lni lni-close"></i> Cancel</button>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
               
            </div>
        </div>
        <!--end row-->
    </div>
</div>
<!--end page wrapper -->
@endsection('content')

@section('scripts')
    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/default.css') }}">
    <script src="{{ mix('js/default.js') }}"></script>
    <script src="https://unpkg.com/fabric@5.3.0/dist/fabric.min.js"></script>
    <script>
        var floor_plan_img = $('#floor-plan-img').val();
        var canvas_height = 1000 ;
        var canvas_width = 1000 ;
        var canvas_redraw_height = 400 ;
        var canvas_redraw_width = 400 ;
        var canvas = new fabric.Canvas('canvas', {
                height: canvas_height,
                width: canvas_width,
                // fireRightClick: true,  // <-- enable firing of right click events
                // fireMiddleClick: true, // <-- enable firing of middle click events
                // stopContextMenu: false, // <--  prevent context menu from showing
            });

        var canvas2 = new fabric.Canvas('canvas2', {
            height: canvas_redraw_height,
            width: canvas_redraw_width,
            // fireRightClick: true,  // <-- enable firing of right click events
            // fireMiddleClick: true, // <-- enable firing of middle click events
            // stopContextMenu: false, // <--  prevent context menu from showing
        });

        var polygon_object = [] ;
        var polygon_cnt = 0;
        var points = [];
        var lineObjects = [];
        var dotObjects = [];
        var drawing = false;
        var currentPolygonName = null;
        var selectedPolygon = null;

        var polygonNameInput = document.getElementById('polygonName');
        var addPolygonButton = document.getElementById('addPolygon');
        var savePolygonsButton = document.getElementById('savePolygons');
        var contextMenu = document.getElementById('contextMenu');
        // var deletePolygonButton = document.getElementById('deletePolygon');
        var outputTextarea = document.getElementById('output');

        // set canvas bg
        canvas.setBackgroundImage(floor_plan_img, function (img) {
            var scaleX = canvas.width / img.width;
            var scaleY = canvas.height / img.height;
            canvas.backgroundImage.scaleX = scaleX;
            canvas.backgroundImage.scaleY = scaleY;
            canvas.renderAll();
        }, {
            originX: 'left',
            originY: 'top'
        });

        canvas.on('mouse:down', function (options) {
            if (!drawing) {
                return;
            }

            if($('#polygonName_'+polygon_cnt).val() == ''){
                alert('ใส่ชื่อ Zone ก่อน');
                $('#polygonName_'+polygon_cnt).focus() ;
                return;
            }

            var point = canvas.getPointer(options.e);
            var circle = new fabric.Circle({
                left: point.x - 3,
                top: point.y - 3,
                radius: 3,
                fill: 'blue',
                selectable: false
            });
            canvas.add(circle);
            dotObjects.push(circle);

            points.push(point);
            
            if (points.length >= 2) {
                var line = new fabric.Line([points[points.length - 2].x, points[points.length - 2].y, point.x, point.y], {
                    stroke: 'blue',
                    strokeWidth: 2,
                    selectable: false
                });
                canvas.add(line);
                lineObjects.push(line);
            }
        });

        canvas.on('mouse:dblclick', function (options) {
            if (drawing && points.length >= 3) {

                currentPolygonName = $('#polygonName_'+ polygon_cnt ).val();
                var polygon = new fabric.Polygon(points, {
                    fill: 'rgba(255,0,0,0.5)',
                    selectable: false,
                    name: currentPolygonName,
                    associatedLines: [...lineObjects],
                    associatedDots: [...dotObjects]
                });

               

                // Calculate the centroid of the polygon
                var centroid = points.reduce((acc, point) => {
                    acc.x += point.x;
                    acc.y += point.y;
                    return acc;
                }, { x: 0, y: 0 });
                centroid.x /= points.length;
                centroid.y /= points.length;

                // Create a text label at the centroid location
                var text = new fabric.Text(polygon.name, {
                    left: centroid.x,
                    top: centroid.y,
                    fontSize: 14,
                    textAlign: 'center',
                    originX: 'center',
                    originY: 'center',
                    selectable: false
                });

                canvas.add(text);

                // Store a reference to the text label in the polygon
                polygon.associatedText = text;

                // add ploygon to polygon array
                polygon_object[polygon_cnt] = polygon ;

                canvas.add(polygon);
                points = [];

                lineObjects.forEach(line => canvas.remove(line));
                lineObjects = [];

                dotObjects.forEach(dot => canvas.remove(dot));
                dotObjects = [];
                
                canvas.upperCanvasEl.style.cursor = 'default';
                drawing = false;

                $('.upper-canvas ').css('cursor','default');
                $('.upper-canvas ').removeClass('cursor-crosshair');
            }
        });

        // redraw

        // var tooltip = document.getElementById('tooltip');

        // canvas2.on('mouse:over', function (event) {
        //     console.log('mouse over'+ event.target.type) ;
        //     if (event.target && event.target.type === 'polygon') {
        //         var polygon = event.target;
        //         tooltip.innerText = polygon.name;

        //         // // Position the tooltip based on the mouse location
        //         // var pointer = canvas2.getPointer(event.e);
        //         // tooltip.style.left = pointer.x + 10 + "px";
        //         // tooltip.style.top = pointer.y + 10 + "px";

        //         // tooltip.style.display = 'block';
        //         var rect = canvas2.upperCanvasEl.getBoundingClientRect();
        //         var canvas = $('#canvas2').offset();
        //         // Adjust tooltip position based on the canvas offset and current mouse location
        //         var pointer = canvas2.getPointer(event.e);
        //         tooltip.style.left = canvas.left + pointer.x + 10 + "px";
        //         tooltip.style.top = canvas.top + pointer.y + 10 + "px";
        //         console.log(tooltip.style.left);
        //         console.log(tooltip.style.top);
        //     }
        // });

        // canvas2.on('mouse:out', function (event) {
        //     if (event.target && event.target.type === 'polygon') {
        //         // tooltip.style.display = 'none';
        //     }
        // });


      

      


        // add new polygon
        function addNewPolygon() {
            polygon_cnt = polygon_cnt+1;
            drawing = true ;
            currentPolygonName = polygon_cnt ;
            canvas.upperCanvasEl.style.cursor = 'crosshair';
            $('#zone-list-container').append(zoneInputItem());
            $('.upper-canvas ').css('cursor','crosshair');
            $('.upper-canvas ').addClass('cursor-crosshair');
        };

        function makeJsonPolygon(){
            var polygonsData = [];
            canvas.getObjects('polygon').forEach(function (polygon) {
                polygonsData.push({
                    name: polygon.name,
                    points: polygon.get('points')
                });
            });
            outputTextarea.value = JSON.stringify(polygonsData, null, 2);
        }

        function reDraw(){

            makeJsonPolygon();
            // Clear canvas2
            canvas2.clear();

            canvas2.setBackgroundImage(floor_plan_img, function (img) {
                var scaleX = canvas2.width / img.width;
                var scaleY = canvas2.height / img.height;
                canvas2.backgroundImage.scaleX = scaleX;
                canvas2.backgroundImage.scaleY = scaleY;
                canvas2.renderAll();
            }, {
                originX: 'left',
                originY: 'top'
            });


            // Parse JSON from textarea
            var polygonsData = JSON.parse(outputTextarea.value);

            // Draw each polygon on canvas2
            polygonsData.forEach(function (data) {
                var polygon = new fabric.Polygon(data.points, {
                    fill: 'rgba(0,255,0,0.5)',
                    selectable: false,
                    name: data.name
                });
                console.log(polygon);

               
                polygon.left = polygon.left*(canvas_redraw_width/canvas_width);
                polygon.top = polygon.top*(canvas_redraw_width/canvas_width);
                var scalingFactor = canvas_redraw_width/canvas_width ;
                polygon.scale(scalingFactor);


                // Calculate the centroid of the polygon for the text label
                var centroid = data.points.reduce((acc, point) => {
                    acc.x += point.x;
                    acc.y += point.y;
                    return acc;
                }, { x: 0, y: 0 });
                centroid.x /= data.points.length;
                centroid.y /= data.points.length;

                // Create and add text label
                var text = new fabric.Text(polygon.name, {
                    left: centroid.x,
                    top: centroid.y,
                    fontSize: 14,
                    textAlign: 'center',
                    originX: 'center',
                    originY: 'center',
                    selectable: false
                });
                

                canvas2.add(polygon);
                canvas2.add(text);
            });
        };

        function zoneInputItem(){
            var input = '';
                input += '<div class="input-group" id="polygon_item_'+polygon_cnt+'">';
                input += '<input type="text" id="polygonName_'+polygon_cnt+'" class="form-control" placeholder="Zone name" aria-label="Zone name">';
                input += '<button onclick="setDeletePolygon('+polygon_cnt+')" class="btn btn-outline-secondary" type="button"><i class="fadeIn animated bx bx-trash"></i></button>';
                input += '</div><p>';
            return input ;
        }

        function setDeletePolygon(cnt){
            canvas.remove(polygon_object[cnt].associatedText); 
            canvas.remove(polygon_object[cnt]);
            $('#polygon_item_'+polygon_cnt).remove();
        }

    </script>
@endsection