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

{% block title %} Kajian dan Jurnal {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
/* pop-up text */

text span {
    color:#666;
    position:absolute;
    font-family:sans-serif;
    bottom:0;
    left:-25px;
    right:-25px;
    padding:5px 7px;
    z-index:-1;
    font-size:14px;
    border-radius:2px;
    background:#fff;
    visibility:hidden;
    opacity:0;
    -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  /* pop-up text arrow */
  
  text span:before {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    position:absolute;
    bottom:-5px;
    left:40px;
  }
  
  /* text pops up when icon is in hover state */
  
  text :hover span {
    bottom:50px;
    visibility:visible;
    opacity:1;
  }
  
  /* font awesome icons */
  
  text :nth-of-type(1):before {
  content:'\f09a';
  }
  text :nth-of-type(2):before {
  content:'\f099';
  }
  text :nth-of-type(3):before {
  content:'\f0d5';
  }
  text :nth-of-type(4):before {
  content:'\f113';
  }
  text :nth-of-type(5):before {
  content:'\f17d';
  }
  text :nth-of-type(6):before {
  content:'\f1cb';
  }


.thumb{
    margin-bottom: 30px;
}

.hide {
    display: none;
  }
   
  .myDIV:hover + .hide {
    display: block;
    color: red;
  }
  
.tab-content {
    padding: 0px;
    margin-top: 0px; 
} 

.col-md-9{
    padding-right: 5px;
    padding-left: 5px;
}
.col-md-6,.col-md-12{
    padding-right: 10px;
    padding-left: 5px;
}

.cardSide{
    height: 100%;
}

.nav-pills.flex-column .nav-link {
    border-radius: 0!important;
    border:none;
    border-bottom: 1px solid #d0e2fa;
    color: #082d5c;
    margin-top: -1px;
    text-align: left!important;
    padding:10px;
    word-wrap: normal;
}

.fa{
    padding:5px;
}


 #chart-container{
     height:200px;
 }

 .titleh4{
    padding-top:15px; 
    padding-left:10px;
    color: #082d5c;
    font-weight:bold;
 }

 .kajian{
     border-bottom: 1px solid #d0e2fa;
     margin-bottom:10px;
     padding-left:10px;
     padding-top:5px;
     padding-bottom:5px;
 }
 
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.container{
    padding: 10%;
    text-align: center;
}
#custom-search-input {
    margin:0;
    margin-top: 10px;
    padding: 0;
}
 
#custom-search-input .search-query {
    width:100%;
    padding-right: 3px;
    padding-left: 15px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0;
}
 
#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: absolute;
    right:0;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#D9230F;
    cursor: unset;
    z-index: 2;
}
 
.search-query:focus{
    z-index: 0;   
}

.table{
    margin-top:10px;
}

.theadcolor{
    background-color: #EBE4FF;
}
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .popup .popuptext {
    visibility: hidden;
    /* width: 160px; */
    background-color: #547fff;
    color: #fff; 
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -400px;
  }
   
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
   
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
   
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
</style>

{% endblock stylesheets %}


{% block content %}
    <div class="content">
    	<div class="page-inner">
			<div class="page-header">
				<h4 class="page-title">Kajian dan Jurnal</h4>
				<ul class="breadcrumbs">
					<li class="nav-home">
						<a href="{% url 'home' %}">
							<i class="flaticon-home"></i>
						</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Publikasi</a>
					</li>
					<li class="separator">
						<i class="flaticon-right-arrow"></i>
					</li>
					<li class="nav-item">
						<a href="#">Kajian dan Jurnal</a>
					</li>
				</ul>
			</div>
		 	<div class="row">
				<div class="col-md-3">
					<div class="card cardSide nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
						<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"><b><i class="icon-notebook"></i></b><span class="pad">Dashboard</span></a>
						<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false"><b><i class="icon-docs"></i></b><span class="pad">Daftar Kajian dan Jurnal</a>
						<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false"><b><i class="icon-people"></i></b> <span class="pad">Editor dan Reviewer Kami</span></a>
						{% comment %} <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="http://www.djpk.kemenkeu.go.id/ejournal/" target="_blank" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-arrow-circle-o-left"></i> <span>E-Journal DJPK</span></a> {% endcomment %}
						<a class="nav-link" href="http://www.djpk.kemenkeu.go.id/ejournal" target="_blank" role="tab" ><b> <i class="icon-link"></i></b> <span class="pad">E-Journal DJPK</span></a>
					</div>
				</div>
			 
				<div class="col-md-9 tab-content" id="v-pills-tabContent">
					<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
						<div class="row">
							<div class="col-md-6">
								<div class="card">
									<h4 class="titleh4"> <center> Jurnal Defis </center></h4>
									<div id="chart-container">
										<canvas id="pieChart"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="card">
									<h4 class="titleh4"> <center> Jurnal Defis Belum Publish </center> </h4>
									<div id="chart-container">
										<canvas id="doughnutChart"></canvas>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<h4 class="titleh4"> Jurnal Terbaru </h4>
									{% for p in data|slice:":5" %}
										<div class="kajian"> 
											<h5><b>{{ p.judul | title }}</b></h5>
											<p>{{ p.abstrak | slice:"0:100" }}</p>
											<a href="#">Full Text</a> 
											<a href="#">Download</a>
										</div>
									{% endfor %} 
								</div>
							</div>
						</div>				
					</div>
					<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<div class="card-header">
										<h4 class="card-title">Daftar Pegawai</h4>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table id="basic-datatables" class="display table table-striped table-hover" >
												<thead>
													<tr>
														<th scope="col">Judul</th>
														<th scope="col">Abstrak</th>
														<th scope="col">Publish</th>
													</tr>
												</thead>
												<tfoot>
													<tr>
														<th scope="col">Judul</th>
														<th scope="col">Abstrak</th>
														<th scope="col">Publish</th>
													</tr>
												</tfoot>
												<tbody>
													{% for p in data %}
														<tr>
															<td><small>{{ p.judul | title }}</small></td>
															<td><small>{{ p.abstrak | slice:"0:100" }}</small></td>
															<td><small>{{ p.publish | date:"d M Y"}}</small></td>
				
														</tr>
													{% endfor %} 
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
				
						</div>            
				
						<!-- <div class="row">
							<div class="col-md-12">
								<div class="card">
									<h4 class="titleh4"> Daftar Kajian dan Jurnal </h4>
									 <div class="col-md-12">
										<div id="custom-search-input">
											<div class="input-group">
												<input type="text" class="search-query form-control" placeholder="Search" />
												<span class="input-group-btn">
													<button type="button" disabled>
														<span class="fa fa-search"></span>
													</button>
												</span>
											</div>
										</div>
									</div>
									<div class="col-md-12">
								 		<table class="table">
											<thead class="theadcolor">
												<tr>
												<th scope="col">No</th>
												<th scope="col">Judul</th>
												<th scope="col">Tanggal Publish</th>
												<th scope="col">Info</th> 
												</tr>
											</thead>
											<tbody>
												<tr>
												<th scope="row">1</th>
												<td>ANALISIS SEKTOR UNGGULAN DAN STRUKTUR EKONOMI DI KABUPATEN KOLAKA</td>
												<td>22 Oktober 2020</td>
												<td>
													<div class="popup" onclick="myFunction()"><i class="fa fa-info-circle" aria-hidden="true"></i>
														<span class="popuptext" id="myPopup">
															<b> Analisis Sektor Unggulan dan Struktur Ekonomi di Kabupaten Kolaka </b>
																<br> <b>Sekilas Abstrak:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam odio. Praesent blandit, enim nec pharetra finibus, ex ligula 
																<br> <b>Tanggal:</b>  14 Desember 2021
																<br> <b>Reviewer:</b> Tebak People
																<br> <b>Editor:</b> Tebak People
														</span>
												    </div>
												</td> 
												</tr>
												<tr>
												<th scope="row">2</th>
												<td>ANALISIS SEKTOR UNGGULAN DAN STRUKTUR EKONOMI DI KABUPATEN KOLAKA</td>
												<td>22 Oktober 2020</td>
												<td>
													<div class="popup" onclick="myFunction()"><i class="fa fa-info-circle" aria-hidden="true"></i>
														<span class="popuptext" id="myPopup">
															<b> Analisis Sektor Unggulan dan Struktur Ekonomi di Kabupaten Kolaka 2 </b>
																<br> <b>Sekilas Abstrak:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam odio. Praesent blandit, enim nec pharetra finibus, ex ligula 
																<br> <b>Tanggal:</b>  14 Desember 2021
																<br> <b>Reviewer:</b> Tebak People
																<br> <b>Editor:</b> Tebak People
														</span>
												    </div>
												</td> 
												</tr>
												<tr>
												<th scope="row">3</th>
												<td>ANALISIS SEKTOR UNGGULAN DAN STRUKTUR EKONOMI DI KABUPATEN KOLAKA</td>
												<td>22 Oktober 2020</td>
												<td><i class="fa fa-info-circle">
													{% comment %} <div class="popup" onclick="myFunction()"><i class="fa fa-info-circle" aria-hidden="true"></i>
														<span class="popuptext" id="myPopup">
															<b> Analisis Sektor Unggulan dan Struktur Ekonomi di Kabupaten Kolaka 3 </b>
																<br> <b>Sekilas Abstrak:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam odio. Praesent blandit, enim nec pharetra finibus, ex ligula 
																<br> <b>Tanggal:</b>  14 Desember 2021
																<br> <b>Reviewer:</b> Tebak People
																<br> <b>Editor:</b> Tebak People
														</span> {% endcomment %}
												    </div>
												</td> 
												
												</tr>
											</tbody>
										</table>
									</div>
									<ul class="pagination float-right">
										<li class="page-item"><a class="page-link" href="#">Sebelumnya</a></li>
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item active"><a class="page-link" href="#">2</a></li>
										<li class="page-item"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">Selanjutnya</a></li>
									</ul>
								</div>
							</div>
						</div>	   -->
					</div>
					<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<h4 class="titleh4"> Mitra Bestari </h4>

									<hr class="mt-2 mb-5">
								
									<div class="row text-center text-lg-start">
								
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100 imgKajianJurnal">
										<img class=" img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Suban.jpg' %}" alt="Dr. Subandono, S.E., M.Ec." />
											<p> Dr. Subandono, S.E., M.Ec.</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100"> 
										<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Bu Fadliyah.png' %}" alt="Dr. Fadliya, S.E., M.A." />
										<p> Dr. Fadliya, S.E., M.A.</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
										<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Bu Vitri.png' %}" alt="Mariana Dyah Savitri, S.E., Ak., M.B.A., Ph.D..." />
										<p> Mariana Dyah Savitri, S.E., Ak., M.B.A., Ph.D..</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
										<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Suryo Guritno.jpg' %}" alt="RM. Suryo Guritno, S.IP., M.P.A., Ph.D." />
										<p> RM. Suryo Guritno, S.IP., M.P.A., Ph.D.</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
										<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Machfud.png' %}" alt="Dr. Machfud Sidik M.Sc" />
										<p> Dr. Machfud Sidik M.Sc</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
										<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Hefrizal.png' %}" alt="Dr. Hefrizal Handra" />
										<p> Dr. Hefrizal Handra</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
											<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Carlos.png' %}" alt="Carlos Mangunsong, S.E., M.Sc." />
											<p> Carlos Mangunsong, S.E., M.Sc.</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-4 col-6">
										<div class="d-block mb-4 h-100">
											<img class="img-fluid img-thumbnail" src="{% static 'assets/img/kajianJurnal/Pak Halley.png' %}" alt="Muhammad Halley Yudhistira, Ph.D" />
											<p> Muhammad Halley Yudhistira, Ph.D</p>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div> 
					<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4</div>
				</div>
			 	   
   	 		</div>
    </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script >
	$(document).ready(function() {
		$('#basic-datatables').DataTable({});
	});
</script>

<script>
function myFunction() {
	var popup = document.getElementById("myPopup");
	popup.classList.toggle("show");
}

// $(document).ready(function(){
// 	$(".fancybox").fancybox({
// 	  openEffect: "none",
// 	  closeEffect: "none"
//  	 });
//     $(".zoom").hover(function(){  
// 		$(this).addClass('transition');
// 		  }, function(){
			  
// 		$(this).removeClass('transition');
// 		  });
// });
		  

// $(document).ready(function(){
//   $(".fancybox").fancybox({
//         openEffect: "none",
//         closeEffect: "none"
//     });
    
//     $(".zoom").hover(function(){
		
// 		$(this).addClass('transition');
// 	}, function(){
        
// 		$(this).removeClass('transition');
// 	});
// });
    

$(document).ready(function() {
  

  $('.list-group-item').click(function(e) {
    e.preventDefault();
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
  });
});


var pieChart = document.getElementById('pieChart').getContext('2d');

var myPieChart = new Chart(pieChart, {
	type: 'pie',
	data: {
		datasets: [{
			data: [70, 30],
			backgroundColor :["#855CF8","#EF5DA8"],
			borderWidth: 0
		}],
		labels: ['Sudah Publish', 'Belum Publish']
	},
	options : {
		responsive: true,
		maintainAspectRatio: false,
		legend: {
			position : 'bottom',
			labels : {
				fontColor: 'rgb(154, 154, 154)',
				fontSize: 11,
				usePointStyle : true,
				padding: 20
			}
		},
		pieceLabel: {
			render: 'percentage',
			fontColor: 'white',
			fontSize: 14,
		},
		tooltips: false,
		layout: {
			padding: {
				left: 20,
				right: 20,
				top: 20,
				bottom: 20
			}
		}
	}
})


var doughnutChart = document.getElementById('doughnutChart').getContext('2d');

var myDoughnutChart = new Chart(doughnutChart, {
	type: 'doughnut',
	data: {
		datasets: [{
			data: [25, 2, 3],
			backgroundColor: ['#f3545d','#fdaf4b','#1d7af3']
		}],

		labels: [
		'Baru',
		'Sedang Verifikasi',
		'Sudah Assign',
		]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,
		legend : {
			position: 'bottom'
		},
		layout: {
			padding: {
				left: 20,
				right: 20,
				top: 20,
				bottom: 20
			}
		}
	}
});
</script>


{% endblock javascripts %}