@php
use App\Models\Organization;
use App\Models\Attachment;
@endphp

@extends('layouts.main_layout')
@section('title', $label)
@section('icon-breadcrumbs',$icon)

@section('content')
{{ Breadcrumbs::render('info.organization.generate') }}

<div class="card">
	<div class="card-body">
		<ul id="organization">
            @foreach ($org as $parent)
                <li>
                    <x-initiate-avatar-background :attachment="$parent->attachment" class=".avatar-small" />
                        
                    <div class="mt-2">
                        {{ $parent->name }}<br>
                        <small>
                            {{ $parent->position->name }}<br>
                            ({{ $parent->structure->name }})
                        </small>
                    </div>

                    @php
                    $orgchild1 = Organization::select('id', 'id_parent', 'id_structure', 'id_position', 'number',
                            'name', 'office', 'startyear', 'endyear', 'photo')
                        ->with([
                            'structure' => function($query) {
                                $query->select('id', 'name');
                            },
                            'position' => function($query) {
                                $query->select('id', 'name');
                            },
                            'attachment'
                        ])
                        ->whereIdParent($parent->id)
                        ->exceptSecretariat()
                        ->exceptSupervisoryBoard()
                        ->orderBy('number')
                        ->get();
                    @endphp

                    @if ($orgchild1->count() > 0)
                        @if ($orgchild1[0]->number == '1.0')
                            <adjunct>
                                <x-initiate-avatar-background :attachment="$orgchild1[0]->attachment" class=".avatar-small" />
                                <div class="mt-2 mb-2">
                                    {{ $orgchild1[0]->name }}<br>
                                    <small>
                                        {{ $orgchild1[0]->position->name }}<br>
                                        ({{ $orgchild1[0]->structure->name }})
                                    </small>
                                </div>
                            </adjunct>
                        @endif

                        @if (@$orgchild1[1]->number == '1.0')
                            <adjunct class="right">
                                <x-initiate-avatar-background :attachment="$orgchild1[1]->attachment" class=".avatar-small" />
                                <div class="mt-2 mb-2">
                                    {{ $orgchild1[1]->name }}<br>
                                    <small>
                                        {{ $orgchild1[1]->position->name }}<br>
                                        ({{ $orgchild1[1]->structure->name }})
                                    </small>
                                </div>
                                <div class="line"></div>
                            </adjunct>
                        @endif

                        <ul>
                            @foreach ($orgchild1 as $child1)
                                @php
                                if ($child1->number == '1.0')
                                    continue;
                                @endphp
                                <li>
                                    <x-initiate-avatar-background :attachment="$child1->attachment" class=".avatar-small" />
                                    <div class="mt-2">
                                        {{ $child1->name }}<br>
                                        <small>
                                            {{ $child1->position->name }}<br>
                                            ({{ $child1->structure->name }})
                                        </small>
                                    </div>

                                    @php
                                    $orgchild2 = Organization::select('id', 'id_parent', 'id_structure', 'id_position', 'number',
                                            'name', 'office', 'startyear', 'endyear', 'photo')
                                        ->with([
                                            'structure' => function($query) {
                                                $query->select('id', 'name');
                                            },
                                            'position' => function($query) {
                                                $query->select('id', 'name');
                                            },
                                            'attachment'
                                        ])
                                        ->whereIdParent($child1->id)
                                        ->orderBy('number')
                                        ->get();
                                    @endphp

                                    @if ($orgchild2->count() > 0)
                                        <ul>
                                            <li>
                                                @foreach ($orgchild2 as $child2)
                                                    <x-initiate-avatar-background :attachment="$child2->attachment" class=".avatar-small" />
                                                        <div class="mt-2">
                                                        {{ $child2->name }}<br>
                                                        <small>
                                                            {{ $child2->position->name }}<br>
                                                            ({{ $child2->structure->name }})
                                                        </small>
                                                    </div>
                                                    <hr>
                                                @endforeach
                                            </li>
                                        </ul>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
            @endforeach
        </ul>

        <button type="button" id="btn-generate" class="btn btn-warning btn-sm">GENERATE</button>
        <hr>
		<div id="orgchart"></div>

        {{-- <img src="" id="result-org"> --}}
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('libraries/orgchart/jquery.orgchart.css') }}" />

<style>
div.orgChart {
    background: #ffffff;
}
div.orgChart img {
    border-radius: 0 !important;
    width: auto;
    height: auto;
}
div.orgChart div.node,
div.orgChart div.adjunct.node {
	padding: 5px;
	width: 100px;
	height: auto;
	font-size: 14px;
}
/* div.orgChart div.adjunct.node {
	width: 200px;
} */
div.orgChart div.node img {
	height: 60px;
}
div.orgChart div.adjunct-link {
	width: 130px;
	margin-left: -80px;
    margin-top: 188px;
    background: #000000;
    height: 2px;
    border: 0;
}

div.orgChart div.adjunct.node {
    margin-left: -180px;
    margin-top: 140px;
}
div.orgChart adjunct.right {
    position: absolute;
    padding: 5px;
	width: 100px;
	height: auto;
	font-size: 14px;
    background-color: #efefef;
    cursor: default;
    border: 2px solid black;
    display: inline-block;
    line-height: 1.3em;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 4px 4px 6px #888888;
    margin-left: 130px;
    margin-top: 10px;
}
div.orgChart adjunct.right .line {
    position: absolute;
    left: 0;
    top: 45px;
    width: 130px;
    height: 2px;
    background: #000000;
    margin-left: -131px;
}
/* div.orgChart adjunct.right:before {
    content: "";
    display: block;
    width: 130px;
    height: 2px;
    background: #000000;
    right: 98px;
    top: 45px;
    position: absolute;
} */
div.orgChart > table > tbody > tr > td > table > tbody > tr.lines.x > td.line {
    height: 240px;
}
</style>
@endpush

@push('scripts')
<script src="{{ asset('libraries/orgchart/jquery.orgchart.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
$(document).ready(function(){
	$(".navbar-toggler").click()
	$("#organization").hide()
	$("#organization").orgChart({container: $("#orgchart")})

	$("#btn-generate").click(function() {
		html2canvas($("#orgchart"), {
			onrendered: function(canvas) {
				var imgsrc = canvas.toDataURL("image/png");
				var dataURL = canvas.toDataURL();
                var formdata = {_token: token, image: dataURL}

                // $("#result-org").attr("src", imgsrc)

				$.ajax({
                    type: "POST",
                    url: "{{ route('organization.generateImage') }}",
                    data: formdata,
                    dataType: "json",
                    success: function (response) {
                        toastr.success(response.message)
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
			}
		});
	});
})
</script>
@endpush