@extends('layouts.principal')

@section('header')
    <script src="{{asset('js/drawflow.min.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{asset('css/drawflow.min.css')}}"/>
    {{--    <link rel="stylesheet" type="text/css" href="{{asset('css/beautiful.css')}}"/>--}}
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <script src="{{asset('js/micromodal.js')}}"></script>

@endsection
@section('titulo', 'Teste Fluxograma')

@section('content')

    <div class="wrapper-flux">
        <div class="col-2">
            <div class="menu-componentes">
                <h3>Componentes</h3>
                <label class="text-muted mt-2">Geral</label>
                <hr class="m-0">
                <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="start">
                    <i class="fa-solid fa-circle-play"></i><span> Início</span>
                </div>
                <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="end">
                    <i class="fa-solid fa-circle-stop"></i><span> Fim</span>
                </div>
                <label class="text-muted mt-2">Banco de Dados</label>
                <hr class="m-0">
                <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="campo">
                    <i class="fa-solid fa-grip"></i> <span> Campo</span>
                </div>
                <label class="text-muted mt-2">Fórmulas</label>
                <hr class="m-0">
                <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="soma">
                    <i class="fa-solid fa-plus"></i> <span> Somatório</span>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="menu">
                <ul>
                    <li onclick="editor.changeModule('Home'); changeModule(event);" class="selected">Home</li>
                </ul>
            </div>
            @csrf
            <div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)">

                <div class="btn-export" onclick="save()">Export
                </div>
                <div class="btn-clear" onclick="editor.clearModuleSelected()">Clear</div>
                <div class="btn-lock">
                    <i id="lock" class="fas fa-lock" onclick="editor.editor_mode='fixed'; changeMode('lock');"></i>
                    <i id="unlock" class="fas fa-lock-open" onclick="editor.editor_mode='edit'; changeMode('unlock');" style="display:none;"></i>
                </div>
                <div class="bar-zoom">
                    <i class="fas fa-search-minus" onclick="editor.zoom_out()"></i>
                    <i class="fas fa-search" onclick="editor.zoom_reset()"></i>
                    <i class="fas fa-search-plus" onclick="editor.zoom_in()"></i>
                </div>
            </div>

        </div>
    </div>
    <span>aquiii</span>
    @csrf
@endsection

@section('script')
    <script>

        function save() {
            $.post('/teste/fluxograma', {...editor.export(), ...{"_token": "{{ csrf_token() }}"}});
        }

        let id = document.getElementById("drawflow");
        const editor = new Drawflow(id);
        editor.reroute = true;
        editor.reroute_fix_curvature = true;
        editor.force_first_input = false;

        /*
          editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
            let center_x = ((end_pos_x - start_pos_x)/2)+start_pos_x;
            return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ center_x +' ' +  start_pos_y  + ' L ' + center_x + ' ' +  end_pos_y  + ' L ' + end_pos_x + ' ' + end_pos_y;
          }*/


        editor.start();
        // editor.import(dataToImport);

        // Events!
        editor.on('nodeCreated', function (id) {
            // console.log("Node created " + id);
        })

        editor.on('nodeRemoved', function (id) {
            // console.log("Node removed " + id);
        })

        editor.on('nodeSelected', function (id) {
            // console.log("Node selected " + id);
        })

        editor.on('moduleCreated', function (name) {
            // console.log("Module Created " + name);
        })

        editor.on('moduleChanged', function (name) {
            // console.log("Module Changed " + name);
        })

        editor.on('connectionCreated', function (connection) {
            // console.log('Connection created');
            // console.log(connection);
        })

        editor.on('connectionRemoved', function (connection) {
            // console.log('Connection removed');
            // console.log(connection);
        })
        /*
            editor.on('mouseMove', function(position) {
            //   console.log('Position mouse x:' + position.x + ' y:'+ position.y);
            })
        */
        editor.on('nodeMoved', function (id) {
            // console.log("Node moved " + id);
        })

        editor.on('zoom', function (zoom) {
            // console.log('Zoom level ' + zoom);
        })

        editor.on('translate', function (position) {
            // console.log('Translate x:' + position.x + ' y:' + position.y);
        })

        editor.on('addReroute', function (id) {
            // console.log("Reroute added " + id);
        })

        editor.on('removeReroute', function (id) {
            // console.log("Reroute removed " + id);
        })
        /* DRAG EVENT */

        /* Mouse and Touch Actions */

        let elements = document.getElementsByClassName('drag-drawflow');
        for (let i = 0; i < elements.length; i++) {
            elements[i].addEventListener('touchend', drop, false);
            elements[i].addEventListener('touchmove', positionMobile, false);
            elements[i].addEventListener('touchstart', drag, false);
        }

        let mobile_item_selec = '';
        let mobile_last_move = null;

        function positionMobile(ev) {
            mobile_last_move = ev;
        }

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            if (ev.type === "touchstart") {
                mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
            } else {
                ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
            }
        }

        function drop(ev) {
            if (ev.type === "touchend") {
                let parentdrawflow = document.elementFromPoint(mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow");
                if (parentdrawflow != null) {
                    addNodeToDrawFlow(mobile_item_selec, mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY);
                }
                mobile_item_selec = '';
            } else {
                ev.preventDefault();
                let data = ev.dataTransfer.getData("node");
                addNodeToDrawFlow(data, ev.clientX, ev.clientY);
            }

        }

        function addNodeToDrawFlow(name, pos_x, pos_y) {
            if (editor.editor_mode === 'fixed') {
                return false;
            }
            pos_x = pos_x * (editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * (editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
            pos_y = pos_y * (editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * (editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));


            switch (name) {

                case 'start':
                    let startTemplate = `<span>Início</span>`;
                    editor.addNode('start', 0, 1, pos_x, pos_y, 'start', {}, startTemplate);
                    break;
                case 'end':
                    let endTemplate = `<span>Fim</span>`;
                    editor.addNode('end', 1, 0, pos_x, pos_y, 'end', {}, endTemplate);
                    break;
                case 'soma':
                    let somaTemplate = `
                          <div>
                            <div class="title-box"><i class="fa-solid fa-plus"></i> Somatório</div>
                            <div class="box">
                              <p>Insira o valor a somar</p>
                            <input type="number" df-soma>
                            </div>
                          </div>`;
                    editor.addNode('soma', 1, 1, pos_x, pos_y, 'soma', {}, somaTemplate);
                    break;
                case 'campo':
                    let campoTemplate = `
                                   <div>
                                        <div class="title-box"><i class="fa-solid fa-grip"></i> Campo</div>
                                        <div class="box">
                                          <p>Selecione o campo</p>
                                          <select df-campo>
                                            <option disabled selected>Selecione</option>
                                            <option value="iso">ISO</option>
                                            <option value="iso_ddd">ISO_DDD</option>
                                            <option value="channel_3">Email</option>
                                            <option value="channel_4">Mais algo</option>
                                          </select>
                                        </div>
                                      </div>`;
                    editor.addNode('campo', 1, 1, pos_x, pos_y, 'campo', {}, campoTemplate);
                    break;

                default:
            }
        }

        let transform = '';

        function showpopup(e) {
            e.target.closest(".drawflow-node").style.zIndex = "9999";
            e.target.children[0].style.display = "block";
            //document.getElementById("modalfix").style.display = "block";

            //e.target.children[0].style.transform = 'translate('+translate.x+'px, '+translate.y+'px)';
            transform = editor.precanvas.style.transform;
            editor.precanvas.style.transform = '';
            editor.precanvas.style.left = editor.canvas_x + 'px';
            editor.precanvas.style.top = editor.canvas_y + 'px';
            // console.log(transform);

            //e.target.children[0].style.top  =  -editor.canvas_y - editor.container.offsetTop +'px';
            //e.target.children[0].style.left  =  -editor.canvas_x  - editor.container.offsetLeft +'px';
            editor.editor_mode = "fixed";

        }

        function closemodal(e) {
            e.target.closest(".drawflow-node").style.zIndex = "2";
            e.target.parentElement.parentElement.style.display = "none";
            //document.getElementById("modalfix").style.display = "none";
            editor.precanvas.style.transform = transform;
            editor.precanvas.style.left = '0px';
            editor.precanvas.style.top = '0px';
            editor.editor_mode = "edit";
        }

        function changeModule(event) {
            let all = document.querySelectorAll(".menu ul li");
            for (let i = 0; i < all.length; i++) {
                all[i].classList.remove('selected');
            }
            event.target.classList.add('selected');
        }

        function changeMode(option) {

            //console.log(lock.id);
            if (option == 'lock') {
                lock.style.display = 'none';
                unlock.style.display = 'block';
            } else {
                lock.style.display = 'block';
                unlock.style.display = 'none';
            }

        }

    </script>
@endsection