<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>Surat Selesai</title>
    <style>
        @page {
            size: A4;
            margin: 2cm;
        }

        body {
            font-family: Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: justify;
        }

        .container {
            width: 100%;
        }

        .kop {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .kop img {
            width: 60px;
            height: 60px;
        }

        .kop-text {
            flex: 1;
            text-align: start;
        }

        .line {
            border-bottom: 2px solid black;
            margin-bottom: 20px;
        }

        .right {
            text-align: right;
        }

        .section {
            margin-bottom: 15px;
        }

        .label {
            display: inline-block;
            width: 100px;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        {{-- Kop Surat --}}
        <table style="width: 100%; margin-bottom: 20px;">
            <tr>
                <td style="width: 80px;">
                    <img src="{{ public_path('humic.jpg') }}" alt="Logo" style="width: 80px;height: 80px">
                </td>
                <td style="text-align: center;">
                    <div style="font-size: 14pt; font-weight: bold; line-height: 1.3;">
                        Pusat Penelitian HUMIC Engineering<br>
                        Universitas Telkom
                    </div>
                    <div style="font-size: 10pt; margin-top: 4px; line-height: 1.4;">
                        Jl. Telekomunikasi Terusan Buah Batu, Bandung 40257, Jawa Barat, Indonesia<br>
                        Telp/Faks: +6281321397936 / +6222-70658638 / +6222-7565931
                    </div>
                </td>
            </tr>
        </table>


        <div class="line"></div>



        {{-- Detail Surat --}}
        <div class="section">
            <div><span class="label">Nomor</span>: {{ $letter->nomor_surat_completion }}</div>
            <div><span class="label">Lampiran</span>: -</div>
            <div><span class="label">Perihal</span>: Surat Selesai Kerja Praktek</div>
        </div>

        <div class="section">
            <p>Kepada Yth.<br>
                {{ $letter->address_to }} {{ $letter->program_studi_mahasiswa }} <br>
                di Tempat</p>
        </div>

        <div class="section">
            <p>Dengan hormat,</p>
            <p>
                Sehubungan dengan telah selesainya kerja praktek di CoE Humic Engineering yang telah dilaksanakan oleh
                mahasiswa
                atas nama:
            </p>
        </div>

        <div class="section">
            <div><span class="label">Nama</span>: {{ $letter->nama_mahasiswa }}</div>
            <div><span class="label">NIM</span>: {{ $letter->nomor_induk_mahasiswa }}</div>
            <div><span class="label">Prodi</span>: {{ $letter->program_studi_mahasiswa }}</div>
        </div>

        <div class="section">
            <p>
                Dengan ini kami menyatakan bahwa mahasiswa yang bersangkutan <span class="bold">TELAH
                    MENYELESAIKAN</span> Kerja Praktek
                di CoE Human Centric Engineering, Telkom University. Kegiatan ini telah
                dilaksanakan pada tanggal {{ $letter->start_formatted }} s.d. {{ $letter->end_formatted }},
                periode Tahun Ajaran {{ $letter->tahun_ajaran }}.
            </p>
            <p>
                Demikian surat keterangan ini kami buat agar dapat dipergunakan sebagaimana mestinya.
            </p>
        </div>

        <div class="section">
            <p>Bandung, {{ $tanggalSurat }}</p>
            <br><br><br>
            <p><span class="bold" style="text-decoration: underline;">Assoc. Prof. Dr. Satria Manda</span><br>
                <span class="bold"> Direktur CoE HUMIC ENGINERING</span>
            </p>
        </div>
    </div>
</body>

</html>
