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


{% block layout_script %}
{% include 'extra/preview.html' %}
<script>
(unknown => {
	var comp = new Vue({
		el: document.getElementById('suratf_list'),
		data: {
			list: {{ suratf|json }},
		},
		created: function() {
			this.init();
		},
		methods: {
			init: function() {
				let list = [];
				let item;
				for (var i = 0; i < this.list.length; i++) {
					item = this.list[i].fields;
					item.pk = this.list[i].pk;
					item.href = `{% static '/upload/surat/' %}${item.path}`;
					list.push(item);
				}
				window.Previewer.init(list);
			},
			ordered: function(i) {
				return `${i+1}.`;
			},
			view: function(index) {
				window.Previewer.show();
				window.Previewer.goto(index);
			},
		},
	});
})();
</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>

<script>
	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>

{% endblock %}


{% block layout_content %}
<div class="card my-3">
	<div class="card-body">
		<h5 class="card-title">
			<span title="Nomor Surat" class="font-weight-bold">{{ surat.nomor }}</span>
			<span title="Tanggal Surat" class="text-muted"><small>( {{ surat.tanggal }} )</small></span>
		</h5>

		<table class="table table-borderless table-hover">
			<tbody>
				<tr>
					<td class="font-weight-bold">Jenis Surat</td>
					<td class="titik-duwa">:</td>
					<td>{{ surat.jenis }}</td>
				</tr>

				<tr>
					<td class="font-weight-bold">Sifat Surat</td>
					<td>:</td>
					<td>{{ surat.sifat }}</td>
				</tr>

				<tr>
					<td class="font-weight-bold">Perihal Surat</td>
					<td>:</td>
					<td>{{ surat.perihal }}</td>
				</tr>

				<tr>
					<td class="font-weight-bold">
						{% if surat_type == 'MASUK' %} Nama (Pengirim) {% endif %}
						{% if surat_type == 'KELUAR' %} Nama (Penerima) {% endif %}
					</td>
					<td>:</td>
					<td>
						{% if surat_type == 'MASUK' %} {{ surat.pengirim_nama }} {% endif %}
						{% if surat_type == 'KELUAR' %} {{ surat.penerima_nama }} {% endif %}
					</td>
				</tr>

				<tr>
					<td class="font-weight-bold">
						{% if surat_type == 'MASUK' %} Instansi (Pengirim) {% endif %}
						{% if surat_type == 'KELUAR' %} Instansi (Penerima) {% endif %}
					</td>
					<td>:</td>
					<td>
						{% if surat_type == 'MASUK' %} {{ surat.pengirim_instansi }} {% endif %}
						{% if surat_type == 'KELUAR' %} {{ surat.penerima_instansi }} {% endif %}
					</td>
				</tr>

				<tr>
					<td class="font-weight-bold">Surat/Lampirann</td>
					<td>:</td>
					<td id="suratf_list">
						<p v-if="list.length === 0" class="text-muted m-0">Tidak Ada Berkas</p>
						<p v-for="(item,i) in list" class="mb-1">
						<span class="text-muted text-italic" v-text="ordered(i)"></span>
						<a href="#" @click.prevent="view(i)" class="text-dark" v-text="item.fields.name"></a>
						<button @click="view(i)" class="btn btn-sm btn-primary">
							<i class="fas fa-download" style="font-size: small;" class="btn btn-sm btn-primary"></i>
						</button>
						</p>


						<!--#start agus 28/4/2025
						 Tombol Share hanya muncul jika status_file = 'public' -->
						{% if status_surat == 'public' %}
						<button onclick="shareAttachment('{{ surat.fields.name }}', '{% static surat.fields.path %}')"
							class="btn btn-sm btn-warning">
							<i class="fas fa-share" style="font-size: small;"></i> Share
						</button>
						{% else %}
						<button class="btn btn-sm btn-secondary" hidden>
							<i class="fas fa-share" style="font-size: small;"></i> Share (Private)
						</button>
						{% endif %}
						<!--#end -->

					</td>
				</tr>
			</tbody>
		</table>
		<a href="{% url 'surat_list' surat_type=surat_type|lower %}" class="btn px-lg-4 btn-secondary text-uppercase ml-1">
			<i class="fas fa-undo"></i> Kembali
		</a>	
	<a href="{% url 'surat_history' surat_pk=surat.pk %}" class="btn px-lg-4 btn-sm btn-info text-uppercase ml-1">
  <i class="fa fa-history"></i> Riwayat
</a>
</div>
</div>
{% endblock %}