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

<head>
    <meta charset="UTF-8">
    <title>Formulir Cuti</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 12pt;
        }

        .kop {
            text-align: center;
            border-bottom: 1.5px solid black;
            padding-bottom: 5px;
            margin-bottom: 10px;
            position: relative;
        }

        .kop img {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
        }

        .kop h2 {
            margin: 0;
            font-size: 16pt;
        }

        .kop h4,
        .kop p {
            margin: 0;
            font-size: 12pt;
        }

        table {
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .bold {
            font-weight: bold;
        }

        .ttd {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 50px;
            gap: 10px;
        }

        .ttd-box {
            width: 48%;
            text-align: center;
            border: 1px solid red;
        }

        .catatan {
            margin-top: 20px;
            font-size: 11pt;
            line-height: 1.2;
        }

        .catatan h4 {
            margin: 5px 0 3px;
            font-size: 11pt;
            font-weight: bold;
        }

        .catatan p {
            margin: 3px 0;
            line-height: 1.2;
        }
    </style>
</head>

<body>
    <?php
    $mulai = new DateTime($data['tanggal_mulai']);
    $selesai = new DateTime($data['tanggal_selesai']);
    $lamaCuti = $mulai->diff($selesai)->days + 1; // +1 supaya termasuk hari pertama
    ?>
    <div class="kop">
        <table style="width: 100%;">
            <tr>
                <td style="width: 80px;">
                    <?php if (!empty($settings['logo'])): ?>
                        <img src="<?= base_url('public/assets/images/faces/' . $settings['logo']) ?>" alt="Logo" style="height: 80px;">
                    <?php endif; ?>
                </td>
                <td style="text-align: center;">
                    <h2 style="margin: 0;"><?= esc($settings['nama_aplikasi'] ?? 'Nama Instansi') ?></h2>
                    <h4 style="margin: 0;"><?= esc($settings['alamat'] ?? '-') ?></h4>
                    <p style="margin: 0;"><?= esc($settings['keterangan'] ?? '') ?></p>
                </td>
            </tr>
        </table>
        <!-- <hr style="border: 1px solid black; margin-top: 10px;"> -->
    </div>

    <h3 style="text-align:center; margin-bottom: 30px;">Formulir Pengajuan Cuti</h3>

    <p>Kepada Yth.<br>
        (Pejabat yang berwenang memberikan cuti)<br>
        Di __________________________</p>

    <p>Yang bertanda tangan di bawah ini:</p>
    <table>
        <tr>
            <td class="bold" width="30%">Nama</td>
            <td>: <?= $data['nama'] ?></td>
        </tr>
        <tr>
            <td class="bold">NIP</td>
            <td>: <?= $data['nip'] ?></td>
        </tr>
        <tr>
            <td class="bold">Jabatan</td>
            <td>: <?= $data['nama_jabatan'] ?? '-' ?></td>
        </tr>
        <tr>
            <td class="bold">Unit Kerja</td>
            <td>: <?= $data['nama_unit'] ?? '-' ?></td>
        </tr>
        <tr>
            <td colspan="2" style="padding-top: 10px;">
                dengan ini mengajukan permintaan cuti selama <b><?= $lamaCuti ?></b> hari,
                terhitung mulai tanggal <b><?= date('d-m-Y', strtotime($data['tanggal_mulai'])) ?></b> s.d. <b><?= date('d-m-Y', strtotime($data['tanggal_selesai'])) ?></b>,
                karena <b><?= $data['keterangan'] ?></b>.
            </td>
        </tr>
        <!-- <tr>
            <td colspan="2">
                Alamat selama menjalankan cuti: <b><?= $data['alamat_cuti'] ?? '-' ?></b>
            </td>
        </tr> -->
    </table>

    <p>Demikianlah permintaan ini saya buat untuk dapat dipertimbangkan sebagaimana mestinya.</p>

    <table style="width: 100%; margin-top: 30px;">
        <tr>
            <td style="width: 60%;"></td>
            <td style="width: 40%; text-align: center;">
                Jakarta, <?= date('d-m-Y') ?><br>
                Hormat saya,<br><br>
                <?php if (!empty($data['ttd_user'])): ?>
                    <img src="<?= base_url('uploads/ttd/' . $data['ttd_user']) ?>" alt="TTD User" style="height: 80px;">
                <?php else: ?>
                    <div style="height: 80px;"></div>
                <?php endif; ?>
                <br>
                <span style="font-weight: bold;">( <?= $data['nama'] ?> )</span><br>
                <span>NIP. <?= $data['nip'] ?></span>
            </td>
        </tr>
    </table>

    <div class="catatan">
        <h4>Catatan/ Pertimbangan Atasan Langsung (Supervisor):</h4>
        <p><?= !empty($data['catatan_supervisor']) ? esc($data['catatan_supervisor']) : '<i>Tidak ada catatan.</i>' ?></p>

        <h4>Catatan/ Pertimbangan Pejabat (Manager):</h4>
        <p><?= !empty($data['catatan_manager']) ? esc($data['catatan_manager']) : '<i>Tidak ada catatan.</i>' ?></p>
    </div>

    <table style="width: 100%; margin-top: 50px;">
        <tr>
            <td style="text-align: center; width: 50%;">
                <?= $supervisor['nama_jabatan'] ?? 'Supervisor' ?><br>
                <?php if (!empty($supervisor['ttd_user'])): ?>
                    <img src="<?= base_url('uploads/ttd/' . $supervisor['ttd_user']) ?>" alt="TTD Supervisor" style="height: 80px;">
                <?php else: ?>
                    <div style="height: 80px;"></div>
                <?php endif; ?>
                <br>( <?= $supervisor['nama'] ?? '........................................' ?> )
                <br>(NIP <?= $manager['nip'] ?? '........................................' ?> )
            </td>
            <td style="text-align: center; width: 50%;">
                <?= $manager['nama_jabatan'] ?? 'Manager' ?><br>
                <?php if (!empty($manager['ttd_user'])): ?>
                    <img src="<?= base_url('uploads/ttd/' . $manager['ttd_user']) ?>" alt="TTD Manager" style="height: 80px;">
                <?php else: ?>
                    <div style="height: 80px;"></div>
                <?php endif; ?>
                <br>( <?= $manager['nama'] ?? '........................................' ?> )
                <br>(NIP <?= $manager['nip'] ?? '........................................' ?> )
            </td>
        </tr>
    </table>

</body>

</html>