@extends('faq::layouts.master')
@section('title', trans('menu.organizational_chart_title'))

@section('plugin-styles')
<link rel="stylesheet" href="{{asset('vendors/OrgChart/css/jquery.orgchart.min.css')}}">
<style>
    .orgchart .hierarchy.first-shown::before {
        left: calc(50% - 1px);
        width: calc(50% + 1px);
    }

    .orgchart .hierarchy.last-shown::before {
        width: calc(50% + 1px);
    }

    .orgchart .hierarchy.first-shown.last-shown::before {
        width: 2px;
    }
</style>
@stop

@section('content')
    @php $user = auth()->user(); @endphp
    <div class="content">

        <x-content.header title="{{ $organizational_chart->name }}" subTitle="{{ $organizational_chart->location->name }}">
            <x-slot:headerRight>

                <a href="javascript:;" class="btn-primary-sm mt-4" id="export">{{trans('menu.export')}}</a>

                <a href="{{route('organizational-charts.index')}}" class="btn-tertiary-sm mt-4">{{trans('forms.lbl_back')}}</a>

            </x-slot:headerRight>
        </x-content.header>

        <div id="folder-search-bar" class="flex gap-3 justify-start items-center relative">
            <div class="search-bar w-[calc(100%-24px-12px)] lg:w-auto loader-section">
                <form id="filter-form" method="POST" onsubmit="return false;">
                    <input name="_term" type="text" class="search-input w-full lg:w-[320px]"
                        placeholder="{{ trans('forms.lbl_search') }}" id="key-word" />
                    <x-svg-icon icon="icon-search" />
                </form>
            </div>
        </div>

        <div class="tw-card">
            <div id="chart-container" style="background-image:url('/images/swatch.png')"></div>

            @include('organizationalchart::user')
        </div>
    </div>
@endsection


@section('footer-script')
<script src="{{asset('js/html2canvas.min.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> --}}
{{-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> --}}
<script src="{{asset('vendors/OrgChart/js/jquery.orgchart.min.js')}}"></script>
<!-- End plugin js for this page -->

<script type="text/javascript">
    //Get the Template from above
            let loader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>';

            var nodeTemplate = function(data) {
                image = (data.image) ? `<img class="rounded-circle" width="40" height="40" src="${data.image}" />` : ``;
                // <span class="office">${data.user_id}</span>
                // <div class="title">${data.name}</div>
                return `<div class="bg-white p-4 border border-custom-grey-200 rounded shadow hover:border-custom-orange-200 hover:bg-custom-orange-25">
                    <div class="mb-2" id="node-${data.id}">
                        @if($user->hasAnyPermission(['create organizational-charts']))
                            <textarea data-userid="${data.user_id}" data-id="${data.id}"
                                rows="3"
                                class="w-full text-sm-medium px-[12px] py-2 border border-custom-grey-300 text-custom-grey-900 rounded-lg outline-none title-input" id="title"
                                name="title" placeholder="{{__('forms.lbl_title')}}"
                                maxlength="1000">${data.title}</textarea>
                        @else
                            <div class="w-full text-sm-medium px-[12px] py-2 border border-custom-grey-300 text-custom-grey-900 rounded-lg outline-none">${data.title}</div>
                        @endif
                    </div>
                    <div class="border border-custom-blue-400 rounded-lg bg-custom-blue-25 p-2 ${data.isVisibleContent}">
                        <div class="text-sm-semibold">
                            <div>${image}</div>
                            <div class="block ml-2 text-left">
                                <div>${data.name}</div>
                                <div>${data.phone}</div>
                            </div>
                        </div>
                    </div>
                </div>`;
        };

        jQuery(document).ready(function(){

            var oc = $('#chart-container').orgchart({
                data                : {!! $hierarchy !!},
                nodeTemplate        : nodeTemplate,
                collapsed           : true,
                //exportButton        : true,
                exportFilename      : 'MyOrgChart',
                exportFileextension : "png",
                //pan               : true,
                //zoom              : true,
                createNode          : function($node, data) {

                    @if($user->hasAnyPermission(['create organizational-charts']))
                    var secondMenuIcon = $('<li>', {
                        'class'         : 'fa fa-plus-circle btn-chart-edit create-menu-icon',
                        'data-toggle'   : "modal",
                        'data-target'   : "#modal-dialog",
                        'data-title'    : "{{trans('title.edit_user')}}",
                        'data-edit'     : 0,
                        'data-parent'   : data.id,
                        'data-uri'      : "{{route('organizational-charts.nodes.create', $organizational_chart)}}"
                    });
                    $node.append(secondMenuIcon);
                    @endif

                    @if($user->can('update', $organizational_chart))
                    var thirdMenuIcon = $('<li>', {
                        'class'         : 'fa fa-edit edit-menu-icon btn-chart-edit',
                        'data-toggle'   : "modal",
                        'data-target'   : "#modal-dialog",
                        'data-id'       : data.id,
                        'data-user_id'  : (data.user_id ? data.user_id : 0),
                        'data-parent'   : (data.parent_id ? data.parent_id : 0),
                        'data-title'    : "{{trans('title.edit_user')}}",
                        'data-uri'      : "{{route('organizational-charts.nodes.store', $organizational_chart)}}/" + data.id+"/edit"
                    });
                    $node.append(thirdMenuIcon);
                    @endif

                    @if($user->can('delete', \Modules\OrganizationalChart\Entities\OrganizationalChart::class))
                    var deleteIcon = $('<li>', {
                        'class'         : 'fa fa-trash btn-delete delete-menu-icon',
                        'data-toggle'   : 'modal',
                        'data-target'   : '#confirm-delete',
                        'data-uri'      : '{{route('organizational-charts.nodes.store', $organizational_chart)}}/' + data.id,
                        'data-redirect' : "{{route('organizational-charts.show', $organizational_chart)}}"
                    });
                    $node.append(deleteIcon);
                    @endif

                }
            });

            $(window).resize(function() {
                var width = $(window).width();
                if(width > 576) {
                    oc.init({'verticalLevel': undefined});
                } else {
                    oc.init({'verticalLevel': 2});
                }
            });
        });


        function loopChart($hierarchy) {
            var $siblings = $hierarchy.children(".nodes").children(".hierarchy");
            if ($siblings.length) {
                $siblings
                .filter(":not(.hidden)")
                .first()
                .addClass("first-shown")
                .end()
                .last()
                .addClass("last-shown");
            }
            $siblings.each(function (index, sibling) {
                loopChart($(sibling));
            });
        }

        function filterNodes(keyWord) {
            if (!keyWord.length) {
                clearFilterResult();

                return;
            } else {

                keyWord = keyWord.toLowerCase();

                var $chart = $(".orgchart");
                // disalbe the expand/collapse feture
                $chart.addClass("noncollapsable");

                // distinguish the matched nodes and the unmatched nodes according to the given key word
                $chart
                .find(".node")
                .filter(function (index, node) {
                    const string = $(node).text().toLowerCase().trim();
                    return string.indexOf(keyWord) > -1;
                })
                .addClass("matched")
                .closest(".hierarchy")
                .parents(".hierarchy")
                .children(".node")
                .addClass("retained");
                // hide the unmatched nodes
                $chart.find(".matched,.retained").each(function (index, node) {
                    $(node)
                        .removeClass("slide-up")
                        .closest(".nodes")
                        .removeClass("hidden")
                        .siblings(".hierarchy")
                        .removeClass("isChildrenCollapsed");

                    $(node)
                        .closest(".hierarchy")
                        .siblings()
                        .find(".node:first:not(.matched,.retained)")
                        .closest(".hierarchy")
                        .addClass("hidden");
                });
                // hide the redundant descendant nodes of the matched nodes
                $chart.find(".matched").each(function (index, node) {
                    if (!$(node).siblings(".nodes").find(".matched").length) {
                        $(node)
                        .siblings(".nodes")
                        .addClass("hidden")
                        .parent()
                        .addClass("isChildrenCollapsed");
                    }
                });
                // loop chart and adjust lines
                loopChart($chart.find(".hierarchy:first"));
            }
        }

        function clearFilterResult() {
            $(".orgchart")
                .removeClass("noncollapsable")
                .find(".node")
                .removeClass("matched retained")
                .end()
                .find(".hidden, .isChildrenCollapsed, .first-shown, .last-shown")
                .removeClass("hidden isChildrenCollapsed first-shown last-shown")
                .end()
                .find(".slide-up, .slide-left, .slide-right")
                .removeClass("slide-up slide-right slide-left");
        }

        const _organoSearch = _.debounce( function(data) {
            var loader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>';

            $(".loader-section").append(loader);

            filterNodes($('#key-word').val());

            $(".loader-section").find(".custom-loader").remove();
        }, 500);

        $('#filter-form').on('keydown', function(event) {
            _organoSearch();
        });


        $('#export').on('click', function() {
            //$('.oc-export-btn').trigger("click");
            var div = $(".orgchart")[0];
            var rect = div.getBoundingClientRect();

            var canvas = document.createElement("canvas");
            canvas.width = rect.width;
            canvas.height = rect.height;

            var ctx = canvas.getContext("2d");
            ctx.translate(-rect.left,-rect.top);

            html2canvas($("#chart-container"), {
                canvas:canvas,
                height:rect.height,
                width:rect.width
            }).then(canvas => {
                //var image = canvas.toDataURL("image/png");
                //saveAs(image, '');
                saveAs(canvas.toDataURL(), 'MyOrgChart.png');
            });
        });

        function saveAs(uri, filename) {

            var link = document.createElement('a');

            if (typeof link.download === 'string') {

                link.href = uri;
                link.download = filename;

                //Firefox requires the link to be in the body
                document.body.appendChild(link);

                //simulate click
                link.click();

                //remove the link when done
                document.body.removeChild(link);

            } else {

                window.open(uri);

            }
        }

        $('body').on('keypress', '.title-input', function(event) {
            if (event.which === 13) {
                event.preventDefault();
                let id = $(this).data('id');

                $("#node-"+id).append(loader);
                PDRequest({
                    type    : "POST",
                    url     : "/organizational-charts/{{$organizational_chart->id}}/nodes/"+id+"/title",
                    data    : {title : $(this).val()},
                    event   : event
                }).then((response) => {
                    if(response.status == "success") {
                        $("#node-"+id).find(".custom-loader").remove();
                    }
                }).catch(error => {
                    $("#node-"+id).find(".custom-loader").remove();
                });
            }
        });

</script>

@stop