@extends('layouts.main_layout')
@section('title', "Dashboard")

@section('icon-breadcrumbs', $icon)
 
@section('content')
{{ Breadcrumbs::render('dashboard') }}
<div class="card">
	<div class="card-body">
		<ul id="organization">
			<li>
				{{-- <adjunct>
					<img src="{{ asset('images/avatar.png') }}">
					<div class="mt-1">
						Dea Sidarto<br>
						<small>
							Bendahara Umum<br>
							(-)
						</small>
					</div>
				</adjunct> --}}
				<img src="{{ asset('images/avatar.png') }}">
				<div class="mt-1">
					Katharine Grace<br>
					<small>
						Ketua Umum<br>
						(PT Bank Permata Tbk)
					</small>
				</div>
				<ul>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Dea Sidarto<br>
							<small>
								Bendahara Umum<br>
								(-)
							</small>
						</div>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Tumpal M. Sihombing<br>
							<small>
								Wakil Ketua Umum<br>
								(PT Selaras Citra Nusantara Perkasa Tbk)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Hudya Indah Panggita<br>
									<small>
										Anggota<br>
										(PT Pan Brothers Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Andrew Djauhary<br>
							<small>
								Wakil Ketua Umum<br>
								(PT Bumi Benowo Sukses Sejahtera Tbk)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Sidik Pramono<br>
									<small>
										Anggota<br>
										(Perum DAMRI)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Fajriyah Usman<br>
							<small>
								Wakil Ketua Umum<br>
								(PT Pertamina (Persero))
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									F. Bernadeth Conny Ponto<br>
									<small>
										Anggota<br>
										(PT Cemindo Gemilang Tbk)
									</small>
								</div>
								<hr>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Reza Priyambada<br>
									<small>
										Anggota<br>
										(PT Indonesia Kendaraan Terminal Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Dimass Atmaja<br>
							<small>
								Wakil Ketua Umum<br>
								(-)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Susan Chandra<br>
									<small>
										Anggota<br>
										(PT Dian Swastatika Sentosa Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Ranty Astari Rachman<br>
							<small>
								Wakil Ketua Umum<br>
								(PT XL Axiata Tbk)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Maharani Cindy Opssedha<br>
									<small>
										Anggota<br>
										(PT Elnusa Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Reski Damayanti<br>
							<small>
								Wakil Ketua Umum<br>
								(PT Unilever Indonesia Tbk)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Alexander Syauta<br>
									<small>
										Anggota<br>
										(PT Transkon Jaya Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Melinda Pudjo<br>
							<small>
								Wakil Ketua Umum<br>
								(PT Astra Graphia Tbk)
							</small>
						</div>

						<ul>
							<li>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Ratna Hidayati<br>
									<small>
										Anggota<br>
										(PT Putra Rajawali Kencana Tbk)
									</small>
								</div>
								<hr>
								<img src="{{ asset('images/avatar.png') }}">
								<div class="mt-1">
									Alia Dewi<br>
									<small>
										Anggota<br>
										(PT Mandom Indonesia Tbk)
									</small>
								</div>
							</li>
						</ul>
					</li>
					<li>
						<img src="{{ asset('images/avatar.png') }}">
						<div class="mt-1">
							Apong Maryati<br>
							<small>
								Sekretaris Jenderal<br>
								(PT Garuda Maintenance Facilities Aeroasia Tbk)
							</small>
						</div>
					</li>
				</ul>
			</li>
		</ul>

		<button type="button" id="btn-generate">GENERATE</button>

		<hr>
		<div id="orgchart"></div>

		<hr>
		<div id="img" style="display:none;">
            <img src="" id="newimg" class="top" />
        </div>
	</div>
</div>
@endsection

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

<style>
div.orgChart div.node,
div.orgChart div.adjunct.node {
	padding: 5px;
	width: 100px;
	height: auto;
	font-size: 14px;
}
div.orgChart div.node img {
	height: 60px;
}
div.orgChart div.adjunct-link {
	width: 30px;
	margin-left: -30px;
}

div.orgChart div.adjunct.node {
    margin-left: -130px;
}
</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");
				console.log(imgsrc);
				$("#newimg").attr('src', imgsrc);
				$("#img").show();
				var dataURL = canvas.toDataURL();
				console.log(dataURL)
				// $.ajax({
				// 	type: "POST",
				// 	url: "script.php",
				// 	data: {
				// 		imgBase64: dataURL
				// 	}
				// }).done(function(o) {
				// 	console.log('saved');
				// });
			}
		});
	});
})
</script>
@endpush