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

{% block layout_script %}
{% include 'extra/preview.html' %}
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
(unknown => {
	new Vue({
		el: document.getElementById('item-attachments-list'),
		data: {
			list: {{ attachments|json }},
		},
		created: function() {
			let list = [];
			let item;
			for (var i = 0; i < this.list.length; i++) {
				item = this.list[i];
				item.href = `{% static '' %}${item.path}`;
				list.push(item);
			}
			window.Previewer.init(list);
		},
		methods: {
			view: function(index) {
				window.Previewer.show();
				window.Previewer.goto(index);
			},
		},
	});
})();
$('.alert').fadeIn(300).delay(1500).fadeOut(400);
var $exec = $('#upload_exec');
$exec.find('[data-delete]').each(function() {
	$(this).prop('href',this.dataset.delete).on('click',event => {
		let message = `Anda Yakin Untuk Hapus Berkas Ini Beserta Lampirannya ?\nData Yang Sudah Dihapus Tidak Bisa Dikembalikan.`;
		if (window.confirm(message) === false) event.preventDefault();
	});
});

// PDF Preview
function previewPDF(pdfUrl) {
    const iframe = document.createElement('iframe');
    iframe.src = pdfUrl;
    iframe.width = '900px';
    iframe.height = '600px';
    iframe.style.border = 'none';

    const previewModal = document.createElement('div');
    previewModal.id = 'pdf-preview-modal';
    previewModal.style.position = 'fixed';
    previewModal.style.top = '50%';
    previewModal.style.left = '50%';
    previewModal.style.transform = 'translate(-50%, -50%)';
    previewModal.style.backgroundColor = 'white';
    previewModal.style.padding = '20px';
    previewModal.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
    previewModal.style.zIndex = '9999';
    previewModal.style.maxWidth = '80%';
    previewModal.style.maxHeight = '80%';
    previewModal.style.overflow = 'auto';
	previewModal.style.borderRadius = '10px';

    previewModal.appendChild(iframe);

    const closeButton = document.createElement('button');
    closeButton.textContent = 'X';
    closeButton.onclick = function() {
        document.body.removeChild(previewModal);
    };
    closeButton.style.position = 'absolute';
    closeButton.style.top = '10px';
    closeButton.style.right = '10px';
    closeButton.style.padding = '5px 10px';
    closeButton.style.backgroundColor = 'red';
    closeButton.style.color = 'white';
    closeButton.style.border = 'none';
    closeButton.style.cursor = 'pointer';
	closeButton.style.borderRadius = '10px';

    previewModal.appendChild(closeButton);
    document.body.appendChild(previewModal);
}
</script>

<script>
function shareAttachment(fileName, fileUrl) {
	let shareText = `${fileName} \n\nLink: ${window.location.origin}${fileUrl}`;
	let encodedText = encodeURIComponent(shareText);
	let gmailUrl = `https://mail.google.com/mail/u/0/?view=cm&fs=1&to=&su=${encodeURIComponent('Berbagi Lampiran: ' + fileName)}&body=${encodedText}&tf=1`;

	let shareOptions = `
		<div id="share-modal" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
			background:#fff;padding:20px;box-shadow:0px 0px 10px rgba(0,0,0,0.3);border-radius:10px;z-index:9999;">
			<span>Bagikan Ke:</span> <br>
			<a href="https://api.whatsapp.com/send?text=${encodedText}" target="_blank" class="btn btn-success my-2">
				<i class="fab fa-whatsapp" style="font-size: 11px;"></i>
			</a>
			<a href="${gmailUrl}" target="_blank" class="btn btn-danger my-2">
				<i class="far fa-envelope" style="font-size: 11px;"></i>
			</a>
			<a href="https://www.messenger.com/new?text=${encodedText}" target="_blank" class="btn btn-primary my-2">
				<i class="fab fa-facebook-messenger" style="font-size: 11px;"></i>
			</a>
			<button onclick="document.getElementById('share-modal').remove()" class="btn btn-dark my-2">
				<i class="fas fa-times" style="font-size: 11px;"></i>
			</button>
		</div>
	`;

	document.body.insertAdjacentHTML('beforeend', shareOptions);
}
</script>
{% endblock %}

{% block layout_content %}
<div class="card my-3" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
	<div class="card-body">
		<div id="alert-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
		<table class="table table-hover table-borderless">
			<tbody>
				<tr><th class="text-nowrap">SKPD</th><td>:</td><td>{{ skpd.urai|default:"(kosong)" }}</td></tr>
				<tr><th class="text-nowrap">Tahun</th><td>:</td><td>{{ item.tahun.tahun }}</td></tr>
				<tr><th class="text-nowrap">Judul</th><td>:</td><td>{{ item.judul }}</td></tr>
				<tr><th class="text-nowrap">Deskripsi</th><td>:</td><td>{{ item.deskripsi|linebreaksbr }}</td></tr>

				{% for i,attr in attributes.items %}
					{% if attr.name and attr.type %}
					<tr data-pk="{{i}}">
						<th class="text-nowrap">{{ attr.name }}</th>
						<td>:</td>
						<td>
							{% for k,v in item.attributes.items %}
								{% if k == i %}
									{% if attr.type == 'date' %}
										{{ v|stringDateYMD }}
									{% elif attr.type == 'text_max' %}
										{{ v.strip|linebreaksbr }}
									{% else %}
										{{ v }}
									{% endif %}
								{% endif %}
							{% endfor %}
						</td>
					</tr>
					{% endif %}
				{% endfor %}

				{% for attachment in attachments %}
				<tr>
					<th class="text-nowrap">Lampiran</th>
					<td>:</td>
					<td>
						<span class="text-muted text-italic">{{ forloop.counter }}.</span>
						<a href="{% static attachment.path %}" target="_blank" class="text-dark">
							{{ attachment.name }}
						</a> &nbsp;
						<button onclick="previewPDF('{% static attachment.path %}')" class="btn btn-sm btn-primary">
                            <i class="fas fa-download" style="font-size: small;"></i>
                        </button>
						{% if status_konten == 'public' %}
						<button onclick="shareAttachment('{{ attachment.name }}', '{% static attachment.path %}')" class="btn btn-sm btn-warning">
							<i class="fas fa-share" style="font-size: small;"></i> 
						</button>
						{% endif %}
					</td>
				</tr>
				{% endfor %}

				<tr>
				<th class="text-nowrap">Waktu Pembuatan</th><td>:</td>
				<td title="{{ item.created|date:'c' }}">{{ item.created }}</td>
				</tr>
				<tr>
				<th class="text-nowrap">Tags</th><td>:</td>
				<td>
				{% with tags=item.contenttag_set.all %}
					{% if tags %}
					{% for tag in tags %}
						<a href="{% url 'tag_detail' tag.tag.name %}" class="badge badge-warning">{{ tag.tag.name }}</a>
					{% endfor %}
					{% else %}
					<span class="text-muted">(tidak ada tag)</span>
					{% endif %}
				{% endwith %}
				</td>
				</tr>


			</tbody>
		</table>

		<div style="text-align: right;">
			<h5 style="font-weight: bold;">Dibuat Oleh : {{ user_yg_input }}</h5>
		</div>

		<div>
			<a href="{% url 'content_list' %}" class="btn shadow btn-sm btn-secondary"><i class="fa fa-arrow-circle-left" style="font-size: small;"></i> Kembali</a>
			{% if allow == 'yes' %}
				<a href="{% url 'content_update' pk=item.pk %}" class="btn shadow btn-sm btn-success"><i class="fas fa-edit" style="font-size: small;"></i> Edit</a>
				<button class="btn btn-sm btn-danger shadow" data-toggle="modal" data-target="#confirmDeleteModal">
				<i class="fa fa-trash" style="font-size: 0.95rem;"></i> Hapus
				</button>
			{% endif %}
			
			<a href="{% url 'content_history' pk=item.pk %}" class="btn btn-sm btn-primary">
				<i class="fa fa-history" style="font-size: small;"></i> Riwayat
			</a>
		</div>
	</div>
</div>

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="confirmDeleteLabel"><i class="fas fa-trash"></i> Konfirmasi Hapus</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Tutup">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Apakah Anda yakin ingin menghapus dokumen ini? Tindakan ini tidak dapat dibatalkan.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <a href="{% url 'content_delete' pk=item.pk %}" class="btn btn-danger">Ya, Hapus</a>
      </div>
    </div>
  </div>
</div>

{% endblock %}