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

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

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

<link rel="text/css" href="{% static 'assets/style.css' %}">
<link rel="text/css" href="{% static 'assets/all.min.css' %}">
<link rel="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|title}}</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>
								<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 %}
