{% extends "layouts/base.html" %}

{% block title %} Panels {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}

<link type="text/css" href="static/assets/style.css">
<link type="text/css" href="static/assets/all.min.css">
<link type="text/css" href="static/assets/owl.carousel.min.css">

{% endblock stylesheets %}
<style>
.department{
    white-space:pre-wrap;
    width:110px;
    padding:5px;
    color:#424242;
    font-weight:normal;
}
.units{
    white-space:pre-wrap;
    width:120px;
    height:200px;
    color:#212121;
    font-weight:normal;
    text-align:center;
    font-size:10px;
}
.units li{
    list-style-type:none;
    padding:5px;
    margin:4px 0;
    border-radius:5px;
}
.units ul{padding:0;}
.units hr{
    border:none;
    background:white;
    width:40px;
    height:1px;
}	
</style>

{% block content %}

	<div class="content">
		<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Organisasi</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="#">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="/">Home</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Organisasi</a>
					</li>
				</ul>
			</div>
			<div class="row">
				<div class="form-group col-md-12">
					<form action="{% url 'organisasi' %}" method="POST">{% csrf_token %}
						<label for="defaultSelect">Pilih Unit</label>
						<select class="form-control form-control" name="esl3" id="defaultSelect" onchange="this.form.submit()">
							<option>----- Pilih Unit -----</option>
							{% for a in org %}
								
								<option value="{{a.esl3}}" {% if a.esl3 in esl3 %} selected {% endif%} >{{a.esl3}}</option>
							{% endfor %}
						</select>
					</form>
					<p>{{namaesl3}}</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<ul class="nav nav-pills nav-secondary  nav-pills-no-bd nav-pills-icons justify-content-center" id="pills-tab-with-icon" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" id="pills-home-tab-icon" data-toggle="pill" href="#pills-home-icon" role="tab" aria-controls="pills-home-icon" aria-selected="true">
										<i class="flaticon-home"></i>
										Struktur Organisasi
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="pills-profile-tab-icon" data-toggle="pill" href="#pills-profile-icon" role="tab" aria-controls="pills-profile-icon" aria-selected="false">
										<i class="flaticon-user-4"></i>
										Tugas dan Fungsi
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="pills-contact-tab-icon" data-toggle="pill" href="#pills-contact-icon" role="tab" aria-controls="pills-contact-icon" aria-selected="false">
										<i class="flaticon-mailbox"></i>
										Uraian Jabatan
									</a>
								</li>
							</ul>

							<div class="tab-content mt-2 mb-3" id="pills-with-icon-tabContent">
								<div class="tab-pane fade show active" id="pills-home-icon" role="tabpanel" aria-labelledby="pills-home-tab-icon">
									<br>
									<div class="alert alert-success" role="alert">
										<p class="card-title">Struktur Organisasi {{ esl3 }}</p>
									</div>
									<div id="tree"></div>

									<script type="text/javascript">
									</script>
									<script src="/static/assets/js/org.js"></script>
									<!-- <script src="/static/assets/js/tree.js"></script> -->
									<script type="text/javascript">
										var data = {{data|safe}};
										var chart = new OrgChart(document.getElementById("tree"), {
													template: "rony",
													mouseScrool: OrgChart.action.none,
													scaleInitial: OrgChart.match.boundary,
													nodeBinding: {
														field_0: "name",
														field_1: "title",
														img_0: "img"
													},
													nodes: data
												});    
									</script>
									<!-- <div id="chartDiv" style="width: 100%; height: 600px; margin: 0px auto;"></div> -->
									<!-- <script src="https://code.jscharting.com/latest/jscharting.js"></script> -->
									<!-- <script type="text/javascript">
										// JS
										var chart = JSC.chart('chartDiv', {
											debug: false,
											type: 'organization down ',
											legend_visible: false,

											series: [
											{
												line: { color: '#004080', width: 1 },
												defaultPoint: {
												focusGlow: { color: '%color', opacity: 0.3 },
												label: {
													text: '<b>%name</b><br/>%data<img margin_left=-60 margin_top=-64 width=64 height=64 src=%img>',
													autoWrap: false,
													color: '#004080',
													margin_left: 60,
												},
												annotation: {
													padding: 9,
													corners: 'round',
													radius: 15,
													margin: [15, 5, 10, 0],
												},
												outline_width: 0,
												color: '#b3d9ff',
												tooltip: "<b>Tasks:</b><br><span style='listStyleType: circle; listPadding: 0;'>%tasks</span>",
												},

												points: [
												{
													name: 'Desky Wijaya',
													id: 'ms',
													color: '#0059b3',
													label_color: 'white',
													attributes: {
													img: 'https://account.kemenkeu.go.id/manage/uploads/thumbnails/197212271993021001.jpg',
													data: '<ul><li>Kepala Subdirektorat TSIKD</li><li>Dit. ESI</li></ul>',
													tasks: '<ul><li>Operations</li><li>Bookkeeping</li><li><i>Strategy</i></li></ul>',
													},
												},
												{
													name: 'Abri Setiawan',
													id: 'mh',
													parent: 'ms',
													color: '#fdccdf',
													attributes: {
													img: '../samples/images/Org2.png',
													data:
														'Kasi PPSIKD<br>Subdit TSIKD',
													tasks: '<ul><li>Product Strategy</li><li>Artistic Direction</li><li><i>Product Design</i></li></ul>',
													},
												},
												{
													name: 'Purwito',
													id: 'cl',
													parent: 'ms',
													color: '#fdccdf',
													attributes: {
													img: '../samples/images/Org5.png',
													data: 'Kasi PKSIKD<br>Subdit TSIKD',
													tasks: '<ul><li>Sales HR</li><li>Market Development</li></ul>',
													},
												},
												{
													name: 'Catur Wahyudi',
													id: '1mh',
													parent: 'ms',
													color: '#fdccdf',
													attributes: {
													img: '../samples/images/Org2.png',
													data:
														'Kasi SSIKD<br>Subdit TSIKD',
													tasks: '<ul><li>Product Strategy</li><li>Artistic Direction</li><li><i>Product Design</i></li></ul>',
													},
												},
												{
													name: 'Sigit Wahyu Kartiko',
													id: '1cl',
													parent: 'ms',
													color: '#fdccdf',
													attributes: {
													img: '../samples/images/Org5.png',
													data: 'Kasi MPKSIKD<br>Subdit TSIKD',
													tasks: '<ul><li>Sales HR</li><li>Market Development</li></ul>',
													},
												},
												{
													name: 'Rizky Herliana',
													id: 'kb',
													parent: 'mh',
													attributes: {
													img: '../samples/images/Org7.png',
													data: 'Pelaksana<br>Seksi PPSIKD',
													tasks: '<ul><li>Purchasing</li><li>Review</li></ul>',
													},
												},
												{
													name: 'Helbert Sinaga',
													id: 'kb2',
													parent: 'cl',
													attributes: {
													img: '../samples/images/Org7.png',
													data: 'Pelaksana<br>Seksi PKSIKD',
													tasks: '<ul><li>Purchasing</li><li>Review</li></ul>',
													},
												},
												{
													name: 'Euis Ulfah',
													id: 'cr2',
													parent: 'kb2',
													attributes: {
													img: '../samples/images/Org3.png',
													data: 'Pelaksana<br>Seksi PKSIKD',
													tasks: '<ul><li>Marketing HR</li><li>Market Research</li></ul>',
													},
												},
												{
													name: 'Deny Candra',
													id: 'cr3',
													parent: 'cr2',
													attributes: {
													img: '../samples/images/Org3.png',
													data: 'Pelaksana<br>Seksi PKSIKD',
													tasks: '<ul><li>Marketing HR</li><li>Market Research</li></ul>',
													},
												},
												{
													name: 'Nurlinna',
													id: 'kb3',
													parent: '1mh',
													attributes: {
													img: '../samples/images/Org7.png',
													data: 'Pelaksana<br>Seksi SSIKD',
													tasks: '<ul><li>Purchasing</li><li>Review</li></ul>',
													},
												},
												{
													name: 'Euis Ulfah',
													id: 'cr4',
													parent: 'kb3',
													attributes: {
													img: '../samples/images/Org3.png',
													data: 'Pelaksana<br>Seksi SSIKD',
													tasks: '<ul><li>Marketing HR</li><li>Market Research</li></ul>',
													},
												},
												{
													name: 'Wulan',
													id: 'cr5',
													parent: '1cl',
													attributes: {
													img: '../samples/images/Org3.png',
													data: 'Pelaksana<br>Seksi MPKSIKD',
													tasks: '<ul><li>Marketing HR</li><li>Market Research</li></ul>',
													},
												},
												],
											},
											],
										});
  									</script> -->
								</div>
								<div class="tab-pane fade" id="pills-profile-icon" role="tabpanel" aria-labelledby="pills-profile-tab-icon">

									<br>

									<div class="alert alert-success" role="alert">
										<p class="card-title">Tugas dan Fungsi {{ esl3 }}</p>
									</div>

									<div class="alert alert-danger" role="alert">
										<div class="card-body ">
											<div class="row align-items-center">
												<div class="col-icon">
													<div class="icon-big text-center icon-primary bubble-shadow-small">
														<div class="avatar avatar-xl">
															<img src="https://appsrv1-147a1.kxcdn.com/atlantis-lite/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
														</div>
													</div>
												</div>
												<div class="col col-stats ml-3 ml-sm-0">
													<h4 class="card-title text-danger">Tugas</h4>
													<div class="numbers">
														{% for i in tusi %} 
															<p class="card-category">{{ i.esl4 }}</p>
															<p>{{i.tugas}}</p><br>
														{% endfor %}
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- <div class="alert alert-warning" role="alert">
										<div class="card-body ">
											<div class="row align-items-center">
												<div class="col-icon">
													<div class="icon-big text-center icon-primary bubble-shadow-small">
														<div class="avatar avatar-xl">
															<img src="https://appsrv1-147a1.kxcdn.com/atlantis-lite/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
														</div>
													</div>
												</div>
												<div class="col col-stats ml-3 ml-sm-0">
													<h4 class="card-title text-success">Fungsi</h4>
													<div class="numbers">
														<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
														</div>
												</div>
											</div>
										</div>
									</div> -->
								</div>
								<div class="tab-pane fade" id="pills-contact-icon" role="tabpanel" aria-labelledby="pills-contact-tab-icon">
									<br>

									<div class="alert alert-success" role="alert">
										<p class="card-title">Uraian Jabatan {{ esl3 }}</p>
									</div>

									<div class="alert alert-warning" role="alert">
										<div class="card-body ">
											<div class="row align-items-center">
												<div class="col-icon">
													<div class="icon-big text-center icon-primary bubble-shadow-small">
														<div class="avatar avatar-xl">
															<img src="https://appsrv1-147a1.kxcdn.com/atlantis-lite/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
														</div>
													</div>
												</div>
												<div class="col col-stats ml-3 ml-sm-0">
													<h4 class="card-title text-success">Uraian Jabatan</h4>
													<div class="numbers">
														{% for i in tusi %} 
															<p class="card-category">{{ i.esl4 }}</p>
															<p>{{i.urjab}}</p><br>
														{% endfor %}
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- <div class="alert alert-info" role="alert">
										<div class="card-body ">
											<div class="row align-items-center">
												<div class="col-icon">
													<div class="icon-big text-center icon-primary bubble-shadow-small">
														<div class="avatar avatar-xl">
															<img src="https://appsrv1-147a1.kxcdn.com/atlantis-lite/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
														</div>
													</div>
												</div>
												<div class="col col-stats ml-3 ml-sm-0">
													<h4 class="card-title text-success">Uraian Jabatan</h4>
													<div class="numbers">
														<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
														</div>
												</div>
											</div>
										</div>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

	<!-- Atlantis DEMO methods, don't include it in your project! -->
	<script src="/static/assets/js/setting-demo2.js"></script>
{% endblock javascripts %}
