{% 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 => {
	$('#surat_masuk_table').children('tbody').each(function() {
		$(this).find('[data-delete]').each((i,elem) => (elem.href = elem.dataset.delete)).on('click',event => {

			let nomor = $(this).find('[data-field=nomor]').text();
			let tanggal = $(this).find('[data-field=tanggal]').text();

			let message = `Anda Yakin Hapus Surat Nomor "${nomor}" Tanggal "${tanggal}" ?`;
			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}}";
}

function hapus_berkas(e) {

	var nomor = $(e).attr('data-nomor');
	var tanggal = $(e).attr('data-tgl');
	var message = `Anda Yakin Hapus Surat Nomor "${nomor}" Tanggal "${tanggal}" ?`;
	if (! window.confirm(message)){
		event.preventDefault();
	}else{
		window.location.href = $(e).attr('alt');
	}
}
</script>
<style>
	.card-image {
		min-height: 160px;
		overflow: hidden;
	}

	.card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.carousel-inner .item {
		display: none;
		height: 100%;
	}

	.carousel-inner .item.active {
		display: block;
	}
</style>

{% endblock %}

{% block layout_content %}
{% include 'extra/base_messages.html' %}

<div class="card mt-3" style="box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;">
	<div class="card-body">
		<h5 class="card-title d-flex mt-0">
			<span class="text-capitalize">List Surat {{ surat_type|lower }}</span>

			<span class="ml-auto mr-3">
				<a href="{% url 'surat_create' surat_type=surat_type|lower %}" 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 surat {{surat_type}}
				</a>
				<form class="form-inline mb-2" autocomplete="off">
					<input type="search" name="term" value="{{ page_term|default:'' }}" placeholder="Cari Nomor Surat ..." 
					class="form-control" style="width: 208px;">
				</form>
			</span>
		</h5>
		<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="desc">Berkas Terbaru</option>
						<option value="asc">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" type="button" id="btn_list" onclick="redir_disp('list')" data-target="#"><i class="fas fa-bars mt-2 "></i></button>
					<button class="btn" type="button" id="btn_col" onclick="redir_disp('col')" 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-stretch d-flex mb-4">
				<!-- start loop grip items -->
				{% for i in list %}
				<div class="col-12 col-md-6 col-lg-3 mb-3 d-flex">
					<div class="card card-ticket h-100 w-100 d-flex flex-column">
						{% if i.thumbnail %}
							{% if i.banyak_berkas > 1 %}
								<div id="myCarousel{{i.pk}}" class="carousel slide" data-ride="carousel">
									<div class="card-image carousel-inner" style="min-height: 160px;">
										{% with i.thumbnail|first as first_browser %}
											{% for thumb in i.thumbnail %}
												<div class="item {% if thumb.pk == first_browser.pk %}active{% endif %}">
													<img src="{% static 'upload/surat/' %}{{thumb.path}}.png"
														alt=""
														class="img-fluid w-100"
														style="object-fit: cover;"
														onerror="this.onerror=null;this.src='';">
												</div>
											{% endfor %}
										{% endwith %}
									</div>
									<!-- Controls -->
									<a class="left carousel-control" href="#myCarousel{{i.pk}}" data-slide="prev">
										<span><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
									</a>
									<a class="right carousel-control" href="#myCarousel{{i.pk}}" data-slide="next">
										<span><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
									</a>
								</div>
							{% else %}
								<div class="card-image" style="min-height: 160px;">
									{% for thumb in i.thumbnail %}
										<img src="{% static 'upload/surat/' %}{{thumb.path}}.png"
											alt=""
											class="img-fluid w-100"
											style="object-fit: cover;"
											onerror="this.onerror=null;this.src='';">
									{% endfor %}
								</div>
							{% endif %}
						{% else %}
							<div class="card-image" style="min-height: 160px;">
								<img src="{% static 'upload/logo.png' %}"
									alt=""
									class="img-fluid w-100"
									style="object-fit: cover;"
									onerror="this.onerror=null;this.src='';">
							</div>
						{% endif %}

						<div class="card-body h-custom font-sm d-flex flex-column">
							<span class="text-break font-weight-bold mb-2">{{ i.nomor|truncatechars:100 }}</span>
							<span class="text-break mb-1">
								{% if surat_type == 'MASUK' %}Pengirim : {{ i.pengirim_nama|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Pengirim : {{ i.penerima_nama|truncatechars:70 }}{% endif %}
							</span>
							<span class="text-break mb-1">
								{% if surat_type == 'MASUK' %}Penerima : {{ i.pengirim_instansi|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Penerima : {{ i.penerima_instansi|truncatechars:70 }}{% endif %}
							</span>
							<span class="text-break mb-1">Perihal : {{ i.perihal|truncatewords:10|linebreaksbr }}</span>
							<span class="text-break mb-1">Tanggal : {{ i.tanggal }}</span>
							
							<div class="position-5 mt-auto text-center">
								<span class="btn-info px-2 py-0 rounded p-2">{{ i.jenis }}</span>
							</div>
							<div class="text-center mt-3 flex-row-reverse position-5">
								{% include "surat/list_comp_action.html" %}
							</div>
						</div>
					</div>
				</div>
				{% empty %}
					<div class="alert alert-dark text-center w-100">(kosong)</div>
				{% endfor %}
				<!-- end loop grip items -->
			</div>

		{% elif display == 'list' %}
			<section class="table-responsive" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
				<table id="surat_masuk_table" class="table table-hover table-bordered">
					<thead class="text-white" style="background-color: rgb(33, 112, 202) !important;">
						<tr>
							<th>Nomor</th>
							<th>Tanggal</th>
							<th>
								{% if surat_type == 'MASUK' %}Nama Pengirim{% endif %}
								{% if surat_type == 'KELUAR' %}Nama Penerima{% endif %}
							</th>
							<th>
								{% if surat_type == 'MASUK' %}Instansi Pengirim{% endif %}
								{% if surat_type == 'KELUAR' %}Instansi Penerima{% endif %}
							</th>
							<th>Jenis</th>
							<th>Sifat</th>
							<th>Perihal</th>
							<th>Status</th>
							<th title="Aksi" class="text-center"><i class="fas fa-fw fa-cog"></i></th>
						</tr>
					</thead>
					{% for i in paging %}
					<tbody>
						<tr>
							<td data-field="nomor" class="font-weight-bold text-break">{{ i.nomor|truncatechars:64 }}</td>
							<td data-field="tanggal" title="{{ i.tanggal|stringDateYMD }}" class="text-nowrap">{{ i.tanggal }}</td>
							<td>
								{% if surat_type == 'MASUK' %}{{ i.pengirim_nama|truncatechars:64 }}{% endif %}
								{% if surat_type == 'KELUAR' %}{{ i.penerima_nama|truncatechars:64 }}{% endif %}
							</td>
							<td>
								{% if surat_type == 'MASUK' %}{{ i.pengirim_instansi|truncatechars:64 }}{% endif %}
								{% if surat_type == 'KELUAR' %}{{ i.penerima_instansi|truncatechars:64 }}{% endif %}
							</td>
							<td>{{ i.jenis }}</td>
							<td>{{ i.sifat }}</td>

							<td rowspan="2">
								<div class="text-break">{{ i.perihal|truncatewords:10|linebreaksbr }}</div>
							</td>
							<!-- PY 25/04/25 -->
							<td style="text-align: center;">
								{% if i.status_surat == 'public' %}
									<span class="badge badge-success">Public</span>
								{% elif i.status_surat == 'private' %}
									<span class="badge badge-warning">Private</span>
								{% else %}
									<span class="badge badge-dark">Unknown</span>
								{% endif %}
							</td>
							<td class="text-center text-nowrap">{% include "surat/list_comp_action.html" %}</td>
						</tr>
					</tbody>
					{% empty %}
						<tr><td colspan="999" class="text-center">(kosong)</td></tr>
					{% endfor %}
				</table>
			</section>
		{% endif %}
		<!-- <a href="{% url 'surat_create' surat_type=surat_type|lower %}" class="btn btn-webapp text-uppercase">
			<i class="fas fa-fw fa-plus"></i> tambah Surat {{ surat_type|lower }}
		</a> -->
	</div>
</div>
{% endblock %}