@extends('layouts.app')
@section('title', 'Organisation Chart')
@section('content')
<div class="container page-content">
    <div class="row page-col">
        <div class="col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Organisation Chart</h1>
        </div>
    </div>
    <div class="row justify-content-start page-col">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="tree"></div>
            	</div>
        	</div>
    	</div>
	</div>  
</div>
<div id="rotate-device">
	<p class="text-center">The Organisation Chart is only viewable in <b>Landscape</b> mode.</p>
</div>
@endsection
@push('js')
<script>
	// Customise default inline theme CSS
	OrgChart.templates.polina.link = '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />';
	OrgChart.templates.polina.field_0 = '<text class="field_0" width="210" style="font-size: 18px; font-weight: bold;" fill="#ffffff" x="90" y="30" text-anchor="start">{val}</text>';
	OrgChart.templates.polina.field_1 = '<text class="field_1" width="210" style="font-size: 14px;" fill="#ffffff" x="90" y="55" text-anchor="start">{val}</text>';

    var chart = new OrgChart(document.getElementById("tree"), {
    	template: "polina",
    	scaleInitial: OrgChart.match.width,
        mouseScrool: OrgChart.action.scroll, // zoom navigate with the mouse
        showYScroll: OrgChart.scroll.visible, // the horizontal scroll bar will be visible
    	showXScroll: OrgChart.scroll.visible, // the vertical scroll bar will be visble
    	layout: OrgChart.mixed, // last nodes will be aligned vertically
        nodeMouseClick: OrgChart.action.expandCollapse, // expand or collapse on node 
    	collapse: {
            level: 2,
            allChildren: true
        },
        toolbar: {
            fullScreen: true,
            zoom: true,
            fit: true,
            expandAll: true
        },
        nodeBinding: {
            field_0: "Name",
            field_1: "Job Title",
            img_0: "img",
        }
    });    
    var app = @json($orgcharts);
    chart.load(app);
</script>
@endpush