{% extends 'extra/htmlreport/layout_v1.html' %}


{% block layout_script %}
<script>window.htmlreport_pageprint = true;</script>
{% endblock %}


{% block layout_style %}


<style>
	#table1 tr > td:nth-child(1) { width: 24%; }
	#table1 tr > td:nth-child(2) { width: 1%; }
    .table-disposisi td {
    vertical-align: top;
    font-size: 13px;
}

.check-col {
    width: 20px;
}

@media print {
    body {
        font-size: 12pt;
    }
}

</style>
{% endblock %}


{% block layout_content %}

<h2 class="text-center text-uppercase p-0 my-3">Lembar Disposisi</h2>

<style>
	@media print {
    .section-block {
        min-height: 40vh;
    }
}
    .box-bordered { border: 1px solid #000; padding: 8px; }
    .section-title { font-weight: bold; margin-bottom: 6px; }
    .table-disposisi td { padding: 3px 0 !important; }
</style>

<div class="container-fluid box-bordered">

    <!-- ============================== -->
    <!-- BAGIAN ATAS -->
    <!-- ============================== -->
    <div class="row border-bottom border-dark pb-2">
        <section class="col-8">
            <table class="table table-sm table-borderless table-disposisi">
                <tr>
                    <td width="35%">Surat Dari</td>
                    <td width="2%">:</td>
                    <td>
                        {% if disposisi.pk_surat %}
                            {{ disposisi.pk_surat.pengirim_nama }}
                            ({{ disposisi.pk_surat.pengirim_instansi }})
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Nomor Surat</td>
                    <td>:</td>
                    <td>{{ disposisi.pk_surat.nomor }}</td>
                </tr>
                <tr>
                    <td>Tanggal Surat</td>
                    <td>:</td>
                    <td>{{ disposisi.pk_surat.tanggal }}</td>
                </tr>
            </table>
        </section>

        <section class="col-4">
            <table class="table table-sm table-borderless table-disposisi">
                <tr>
                    <td width="40%">Nomor Agenda</td>
                    <td width="2%">:</td>
                    <td>{{ disposisi.nomor_agenda }}</td>
                </tr>
                <tr>
                    <td>Terima Tanggal</td>
                    <td>:</td>
                    <td>{{ disposisi.tanggal_masuk }}</td>
                </tr>
                <tr>
    <td>Sifat</td>
    <td>:</td>
    <td></td>
</tr>

<tr>
    <td colspan="3">
        <div style="display:flex; justify-content:space-between; text-align:center; ">
            <div style="width:25%;">Biasa</div>
            <div style="width:25%;">Penting</div>
            <div style="width:25%;">Segera</div>
            <div style="width:25%;">Amat Segera</div>
        </div>
    </td>
</tr>

<tr>
    <td colspan="3">
        <div style="display:flex; justify-content:space-between; text-align:center;">
            <div style="width:25%;">
                {% if disposisi.sifat == 'Biasa' %}☑{% else %}☐{% endif %}
            </div>
            <div style="width:25%;">
                {% if disposisi.sifat == 'Penting' %}☑{% else %}☐{% endif %}
            </div>
            <div style="width:25%;">
                {% if disposisi.sifat == 'Segera' %}☑{% else %}☐{% endif %}
            </div>
            <div style="width:25%;">
                {% if disposisi.sifat == 'Amat Segera / Kilat' %}☑{% else %}☐{% endif %}
            </div>
        </div>
    </td>
</tr>



            </table>
        </section>
    </div>

    <!-- ============================== -->
    <!-- PERIHAL -->
    <!-- ============================== -->
    <div class="row border-bottom border-dark py-3">
        <div class="col">
            <div class="section-title">Perihal :</div>
           
                <p>{{ disposisi.pk_surat.perihal }}</p>
         
        </div>
    </div>

    <!-- ============================== -->
    <!-- DITERUSKAN KEPADA -->
    <!-- ============================== -->
    <div class="row border-bottom border-dark py-3">
        <div class="col">
            <div class="section-title">Diteruskan Kepada Sdr (I) :</div>

                <table class="table table-sm table-borderless table-disposisi">
{% for item in daftar_kepada %}
<tr>
    <td width="5%">
        {% if item in disposisi.kepada %}
            ☑
        {% else %}
            ☐
        {% endif %}
    </td>
    <td>{{ item }}</td>
</tr>
{% endfor %}

</table>

        </div>


    </div>
	<div class="row border-bottom border-dark py-3">
	        <div class="col">
            <div class="section-title">Catatan / Instruksi :</div>
                <p>{{ disposisi.catatan }}</p>
        </div>
	</div>


    <!-- ============================== -->
    <!-- TTD -->
    <!-- ============================== -->
<div class="row py-4">
    <div class="col-7"></div>

    <div class="col-5 text-center">

        <!-- Baris Kota, Bulan, Tahun -->
        <div>
            {{ settings_default.PEMKOT }}, {% now "F Y" %}
        </div>

        <!-- Jabatan -->
        <div class="mb-5">
            {{ settings_default.JABATAN }}
        </div>

        <!-- Ruang TTD -->
        <div style="height: 60px;"></div>

        <!-- Nama Pejabat -->
        <div>
            {{ settings_default.NAMA_PEJABAT }}
        </div>

        <!-- Nama Jabatan -->
        <div>
            {{ settings_default.NAMA_JABATAN }}
        </div>

        <!-- NIP Pejabat -->
        <div>
            NIP. {{ settings_default.NIP_PEJABAT }}
        </div>

    </div>
</div>


</div>

{% endblock %}