{% extends 'layout.html' %}
{% load common %}
{% load static %}

{% block layout_script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
(unknown => {
	$('#disp_table1').find('[data-htmlreport]').each(function() {
		$(this).on('click',event => {
			event.preventDefault();
			$('#disp_htmlreport').prop('src',this.href);
		});
	});

	window.page_disp_delete = (event,target) => {
		let message = 'Yakin Hapus Disposisi Ini?';
		if (!window.confirm(message)) {
			event.preventDefault();
		}
	};

	$('#item_list').val('{{ show }}');
	$('#sorting').val('{{ sorting }}');

	if("{{display}}" == 'list'){
		$('#btn_list').addClass('btn-active');
		$('#btn_col').removeClass('btn-active');
	}else{
		$('#btn_list').removeClass('btn-active');
		$('#btn_col').addClass('btn-active');
	}
})();

function redir_list(a){
		window.location.href = "?disp={{display}}&item_jml="+a.value+"&sorting={{ sorting }}";
	}

function redir_sorting(a){
	window.location.href = "?disp={{display}}&item_jml={{ show }}&sorting="+a.value+"";
}

function redir_disp(e){
	window.location.href = "?disp="+e+"&item_jml={{ show }}&sorting={{sorting}}";
}
</script>
{% endblock %}


{% block layout_content %}
{% include 'extra/base_messages.html' %}
<div class="card mt-3">
	<div class="card-body">

<div class="d-flex mb-3">
	<div class="h4">List Disposisi</div>
	<div class="ml-auto mr-3">
		<a href="{% url 'disp_create' %}" class="btn btn-webapp text-uppercase" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
			<i class="fas fa-fw fa-plus"></i>
			tambah
		</a>
	</div>
	<form class="form-inline" autocomplete="off">
		<input type="search" name="term" value="{{ page_term }}" placeholder="Pencarian ..." class="form-control">
	</form>
</div>
<div class="form-inline d-flex flex-row-reverse mb-3">
	<div class="form-group">
		<label class="mt-2">Sortir</label>
		<div class="col-md-4 mt-2">
			<select sorting name="sorting" id="sorting" class="form-control mr-custom" onchange="redir_sorting(this)">
				<option value="asc">Berkas Terbaru</option>
				<option value="desc">Berkas Terlama</option>
			</select>
		</div>
	</div>
	<div class="form-group border-right mr-3 px-2">
		<label class="mt-2">Item</label>
		<div class="col-md-4 mt-2">
			<select item_list name="item_list" id="item_list" class="form-control" onchange="redir_list(this)">
				<option value="6">6 </option>
				<option value="12">12 </option>
				<option value="18">18 </option>
				<option value="24">24 </option>
			</select>
		</div>
	</div>
	<div class="form-group border-right mr-3 px-2">
		<label class="mr-2 mt-2">Tipe</label>
	    <div class="ml-2">
			<button class="btn" id="btn_list" onclick="redir_disp('list')" type="button" data-target="#"><i class="fas fa-bars mt-2 "></i></button>
			<button class="btn" id="btn_col" onclick="redir_disp('col')" type="button" data-target="#"><i class="fas fa-grip-horizontal mt-2 "></i></button>
		</div>
	</div>
</div>
<ul class="pagination justify-content-center mb-3">
	{% if paging.has_previous %}
		<li class="page-item">
			<a class="page-link" href="?page={{ paging.previous_page_number }}&term={{ page_term }}&disp={{display}}&item_jml={{ show }}&sorting={{sorting}}">&lsaquo; Sebelumnya</a>
		</li>
	{% else %}
		<li class="page-item disabled"><a z-index="-1" class="page-link">&lsaquo; Sebelumnya</a></li>
	{% endif %}
	{% if paging.has_next %}
		<li class="page-item">
			<a class="page-link" href="?page={{ paging.next_page_number }}&term={{ page_term }}&disp={{display}}&item_jml={{ show }}&sorting={{sorting}}">Selanjutnya &rsaquo;</a>
		</li>
	{% else %}
		<li class="page-item disabled"><a class="page-link" z-index="-1">Selanjutnya &rsaquo;</a></li>
	{% endif %}
</ul>

{% if display == 'col' %}
	<div class="form-row align-items-center d-flex mb-4">
		<!-- start loop grip items -->
		{% for i in paging %}
		<div class="col-md-3 mb-4">
			<a href="#"></a>
			<div class="card card-ticket h-100 thumb-rounded">
				<div class="card-image">
					<img src="{% static 'upload/logo.png' %}" alt="" class="img-fluid" onerror="this.onerror=null;this.src='';">
				</div>
				<div class="card-body h-custom">
					<spam class="mt-2 font-weight-bold">{{ i.tanggal }}</spam>
					</br>
					<span class="text-left">{{ i.kepada|linebreaksbr }}</span>
					</br>
					<span class="text-left">{{ i.catatan|linebreaksbr }}</span>
					</br>
					<div class="position-45 mt-auto text-center">
						<span class="btn-info px-2 py-0 rounded p-2">{{ i.sifat }}</span>
					</div>
					</br>
					<div class="text-center mt-0 position-45">
						{% if session_current.role in allowed_roles or i.user_input == session_current.pk %}
						<a href="{% url 'disp_delete' disp_pk=i.pk %}" class="btn btn-sm btn-outline-danger text-uppercase" title="Hapus Disposisi" onclick="page_disp_delete(event,this)">
							<i class="fas fa-fw fa-trash"></i>
						</a>
						<a href="{% url 'disp_update' disp_pk=i.pk %}" class="btn btn-sm btn-outline-success text-uppercase" title="Rubah Disposisi">
							<i class="fas fa-fw fa-edit"></i>
						</a>
						{% endif %}

						<a data-htmlreport href="{% url 'disp_htmlreport' page='v1' pk=i.pk %}" target="_blank" class="btn btn-sm btn-outline-webapp text-uppercase" title="Cetak Disposisi">
							<i class="fas fa-fw fa-print"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
		{% empty %}
		<div class="alert alert-dark text-center">(kosong)</div>
		{% endfor %}
		<!-- end loop grip items -->
	</div>
{% elif display == 'list' %}
	<table id="disp_table1" class="table table-hover table-bordered" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
		<thead class="text-white" style="background-color: rgb(33, 112, 202) !important;">
			<tr>
				<th>Tanggal</th>
				<th title="Sifat Disposisi">Sifat</th>
				<th title="Disposisi Kepada">Kepada</th>
				<th>Catatan</th>
				<th class="text-center" title="Aksi">
					<i class="fas fa-fw fa-cog"></i>
				</th>
			</tr>
		</thead>
		<tbody>
			{% for i in paging %}
			<tr>
				<td title="{{ i.tanggal|stringDateYMD }}">{{ i.tanggal }}</td>
				<td>{{ i.sifat }}</td>
				<td>{{ i.kepada|linebreaksbr }}</td>
				<td>{{ i.catatan|linebreaksbr }}</td>

				<td class="text-center">
					{% if session_current.role in allowed_roles or i.user_input == session_current.pk %}
						<a href="{% url 'disp_delete' disp_pk=i.pk %}" class="btn btn-sm btn-outline-danger text-uppercase" title="Hapus Disposisi" onclick="page_disp_delete(event,this)">
							<i class="fas fa-fw fa-trash"></i>
						</a>
						<a href="{% url 'disp_update' disp_pk=i.pk %}" class="btn btn-sm btn-outline-success text-uppercase" title="Rubah Disposisi">
							<i class="fas fa-fw fa-edit"></i>
						</a>
					{% endif %}

					<a data-htmlreport href="{% url 'disp_htmlreport' page='v1' pk=i.pk %}" target="_blank" class="btn btn-sm btn-outline-webapp text-uppercase" title="Cetak Disposisi">
						<i class="fas fa-fw fa-print"></i>
					</a>
				</td>
			</tr>
			{% empty %}
			<tr>
				<td colspan="999" class="text-center text-muted">(kosong)</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
{% endif %}
	</div>
</div>
<iframe id="disp_htmlreport" style="width:0;height:0;border:0;border:none;visibility:hidden;"></iframe>
{% endblock %}