{% 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>
{% 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="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" 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-center d-flex mb-4">
				<!-- start loop grip items -->
				{% for i in list %}
				{% if i.thumbnail and i.banyak_berkas > 1  %}
				<div class="col col-md-6 col-lg-2 mb-3">
					<a href="#"></a>
					<div class="card card-ticket h-100 thumb-rounded">
						<div id="myCarousel{{i.pk}}" class="carousel slide" data-ride="carousel">
						    <div class="card-image carousel-inner">
						    	
						    	{% for thumb in i.thumbnail %}
							    	{% with i.thumbnail|first as first_browser %}
									    <div class="item {% if thumb.pk == first_browser.pk %} active {% endif %}">
								        	<img src="{% static 'upload/surat/' %}{{thumb.path}}.png" alt="" class="img-fluid" onerror="this.onerror=null;this.src='';">
								      	</div>
									{% endwith %}
						    		
								{% endfor %}
						    </div>

						    <!-- Left and right 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>
						<div class="card-body h-custom font-sm">
							<span class="text-break font-weight-bold">{{ i.nomor|truncatechars:100 }}</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Penerima : {{ i.pengirim_nama|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Penerima :{{ i.penerima_nama|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Pengirim :{{ i.pengirim_instansi|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Pengirim :{{ i.penerima_instansi|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">Perihal : {{ i.perihal|truncatewords:10|linebreaksbr }}</span>
							<br/>
							{{ i.tanggal }}
							<br/>
							<span class="text-left">
								(
									{% if i.banyak_berkas %}
										Ada {{ i.banyak_berkas }} Berkas
									{% else %}
										Tidak Ada Berkas
									{% endif %}
								)
							</span>
							<br/>
							<div class="position-15">
								<span class="float-right btn-info px-2 py-1 rounded">{{ i.jenis }}</span>
							</div>
							<br/>
							<div class="text-right mt-3 flex-row-reverse position-15">
								{% include "surat/list_comp_action.html" %}
							</div>
						</div>
					</div>
				</div>
				{% elif i.thumbnail and i.banyak_berkas <= 1 %}
				<div class="col col-md-6 col-lg-2 mb-3">
					<a href="#"></a>
					<div class="card card-ticket h-100 thumb-rounded">
						<div class="card-image">
							{% for thumb in i.thumbnail %}
								<img src="{% static 'upload/surat/' %}{{thumb.path}}.png" alt="" class="img-fluid" onerror="this.onerror=null;this.src='';">
							{% endfor %}
						</div>
						<div class="card-body h-custom font-sm">
							<span class="text-break font-weight-bold">{{ i.nomor|truncatechars:100 }}</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Pengirim : {{ i.pengirim_nama|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Pengirim : {{ i.penerima_nama|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Penerima : {{ i.pengirim_instansi|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Penerima : {{ i.penerima_instansi|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">Perihal : {{ i.perihal|truncatewords:10|linebreaksbr }}</span>
							<br/>
							{{ i.tanggal }}
							<br/>
							<span class="text-left">
								(
									{% if i.banyak_berkas %}
										Ada {{ i.banyak_berkas }} Berkas
									{% else %}
										Tidak Ada Berkas
									{% endif %}
								)
							</span>
							<br/>
							<div class="position-15">
								<span class="float-right btn-info px-2 py-1 rounded">{{ i.jenis }}</span>
							</div>
							<br/>
							<div class="text-right mt-3 flex-row-reverse position-15">
								{% include "surat/list_comp_action.html" %}
							</div>
						</div>
					</div>
				</div>
				{% else %}
				<div class="col col-md-6 col-lg-2 mb-3">
					<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 font-sm">
							<span class="text-break font-weight-bold">{{ i.nomor|truncatechars:100 }}</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Pengirim : {{ i.pengirim_nama|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Pengirim : {{ i.penerima_nama|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">
								{% if surat_type == 'MASUK' %}Penerima : {{ i.pengirim_instansi|truncatechars:70 }}{% endif %}
								{% if surat_type == 'KELUAR' %}Penerima : {{ i.penerima_instansi|truncatechars:70 }}{% endif %}
							</span>
							<br/>
							<span class="text-break">Perihal : {{ i.perihal|truncatewords:10|linebreaksbr }}</span>
							<br/>
							{{ i.tanggal }}
							<br/>
							<span class="text-left">
								(
									{% if i.banyak_berkas %}
										Ada {{ i.banyak_berkas }} Berkas
									{% else %}
										Tidak Ada Berkas
									{% endif %}
								)
							</span>
							<br/>
							<div class="position-15">
								<span class="float-right btn-info px-2 py-1 rounded">{{ i.jenis }}</span>
							</div>
							<br/>
							<div class="text-right mt-3 flex-row-reverse position-15">
								{% include "surat/list_comp_action.html" %}
							</div>
						</div>
					</div>
				</div>
				{% endif %}
				{% empty %}
				<div class="alert alert-dark text-center">(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>
								<div class="text-muted text-nowrap font-italic">
									(
										{% if i.banyak_berkas %}
											Ada {{ i.banyak_berkas }} Berkas
										{% else %}
											Tidak Ada Berkas
										{% endif %}
									)
								</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 %}