<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Surat {{ $data['nomor_surat'] ?? '' }}</title>
    <style>
        @page {
            margin: 2cm 2.5cm;
            size: A4 portrait;
        }
        body {
            font-family: Arial, sans-serif;
            font-size: 12pt;
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }
        .kop-surat {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
            page-break-inside: avoid;
        }
        .kop-surat img {
            width: 100%;
            max-height: 120px;
            object-fit: contain;
        }
        .details-table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
            page-break-inside: avoid;
        }
        .details-table td {
            vertical-align: top;
            padding: 3px 0;
        }
        .label {
            width: 80px;
            font-weight: normal;
        }
        .colon {
            width: 10px;
            text-align: center;
        }
        .value {
            text-align: left;
        }
        .content-surat {
            text-align: justify;
            margin-bottom: 30px;
        }
        .content-surat p {
            margin: 0 0 10px;
            text-align: justify;
        }
        .ttd-section {
            width: 40%;
            margin-left: 60%;
            text-align: left;
            page-break-inside: avoid;
        }
        ol {
            padding-left: 20px;
        }
        ol ol {
            list-style-type: lower-alpha;
            padding-left: 25px;
        }
        li {
            margin-bottom: 5px;
            text-align: justify;
        }
    </style>
</head>
<body>
    <div class="kop-surat">
        <img src="{{ public_path('assets/images/kop.jpg') }}" alt="Logo Kop Surat">
    </div>

    <table class="details-table">
        <tr>
            <td class="label">Nomor</td>
            <td class="colon">:</td>
            <td class="value">{{ $data['nomor_surat'] ?? '' }}</td>
        </tr>
        <tr>
            <td class="label">Sifat</td>
            <td class="colon">:</td>
            <td class="value">{{ $data['sifat'] ?? '' }}</td>
        </tr>
        <tr>
            <td class="label">Lampiran</td>
            <td class="colon">:</td>
            <td class="value">{{ $data['lampiran'] ?? '' }}</td>
        </tr>
        <tr>
            <td class="label">Hal</td>
            <td class="colon">:</td>
            <td class="value">{{ $data['hal'] ?? '' }}</td>
        </tr>
        <tr>
            <td class="label">Tanggal</td>
            <td class="colon">:</td>
            <td class="value">{{ isset($data['tanggal_surat']) ? date('d F Y', strtotime($data['tanggal_surat'])) : '' }}</td>
        </tr>
        <tr>
            <td class="label">Kepada</td>
            <td class="colon">:</td>
            <td class="value">{{ $data['kepada'] ?? '' }}</td>
        </tr>
    </table>

    <div class="content-surat">
        {!! nl2br_with_indentation($data['isi_surat'] ?? '') !!}
    </div>

    <div class="ttd-section">
        <p>Jakarta, {{ isset($data['tanggal_surat']) ? date('d F Y', strtotime($data['tanggal_surat'])) : '' }}</p>
        <p>Kepala Dinas Lingkungan Hidup</p>
        <br><br><br>
        <p><u>Nama Pejabat</u></p>
        <p>NIP. 19700101 199001 1 001</p>
    </div>
</body>
</html>
