<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Resolve URL foto pengurus.
 * Return string URL jika file ada, atau NULL jika tidak ada / kosong.
 */
function foto_pengurus_url($foto) {
    if (empty($foto)) return null;

    // Sudah berupa URL lengkap
    if (strpos($foto, 'http') === 0) return $foto;

    // Coba basename saja di uploads/pengaturan/
    $p1 = 'uploads/pengaturan/' . basename($foto);
    if (file_exists(FCPATH . $p1)) return base_url($p1);

    // Coba path apa adanya
    $p2 = ltrim($foto, '/');
    if (file_exists(FCPATH . $p2)) return base_url($p2);

    return null; // Tidak ditemukan → tampilkan placeholder SVG
}

/**
 * Render elemen avatar: <img> jika foto ada, atau <div> SVG placeholder.
 * $class  = class CSS pada elemen
 * $style  = inline style tambahan
 * $color  = warna aksen border/bg placeholder (hex)
 */
function avatar_html($foto, $alt = 'Foto', $class = 'avatar', $style = '', $color = '#0d9488') {
    $url = foto_pengurus_url($foto);
    if ($url) {
        return '<img class="' . $class . '" src="' . htmlspecialchars($url) . '" alt="' . htmlspecialchars($alt) . '"'
             . ($style ? ' style="' . $style . '"' : '') . '>';
    }
    // SVG placeholder — tidak butuh file eksternal sama sekali
    $lighter = $color . '22'; // transparansi ~13%
    return '<div class="' . $class . ' avatar-placeholder" style="background:' . $lighter . ';border-color:' . $color . ';' . $style . '">'
         . '<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">'
         . '<circle cx="40" cy="32" r="16" fill="' . $color . '" opacity=".35"/>'
         . '<ellipse cx="40" cy="68" rx="26" ry="18" fill="' . $color . '" opacity=".25"/>'
         . '</svg></div>';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Struktur Organisasi RT</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lora:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        /* ─── RESET & BASE ─────────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        :root {
            --teal:        #0d9488;
            --teal-light:  #14b8a6;
            --teal-pale:   #e6faf8;
            --teal-mid:    #ccfbf1;
            --amber:       #d97706;
            --amber-pale:  #fef3c7;
            --ink:         #0f1923;
            --ink-mid:     #374151;
            --ink-soft:    #6b7280;
            --border:      #e5e7eb;
            --surface:     #ffffff;
            --bg:          #f0fdfa;
            --radius-xl:   18px;
            --radius-lg:   12px;
            --radius-md:   8px;
            --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
            --shadow-md:   0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
            --shadow-lg:   0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            color: var(--ink);
            min-height: 100vh;
        }

        .page-wrap { padding: 2rem 1rem; max-width: 1200px; margin: 0 auto; }

        /* ─── HEADER BANNER ─────────────────────────────────────────── */
        .banner {
            position: relative;
            background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #0891b2 100%);
            border-radius: var(--radius-xl);
            padding: 2.5rem 2rem 2.5rem;
            margin-bottom: 2rem;
            overflow: hidden;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        .banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Ccircle cx='55' cy='55' r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .banner-logo {
            position: relative;
            flex-shrink: 0;
            width: 80px; height: 80px;
            background: rgba(255,255,255,.15);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 3px solid rgba(255,255,255,.35);
            overflow: hidden;
        }
        .banner-logo img { width: 100%; height: 100%; object-fit: contain; }
        .banner-logo .no-logo { font-size: 2rem; color: rgba(255,255,255,.7); }
        .banner-text { position: relative; flex: 1; min-width: 200px; }
        .banner-text .label {
            font-size: .7rem; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .3rem;
        }
        .banner-text h1 {
            font-family: 'Lora', serif; font-size: clamp(1.3rem, 4vw, 2rem);
            font-weight: 700; line-height: 1.2; margin-bottom: .4rem;
        }
        .banner-text .sub {
            font-size: .85rem; color: rgba(255,255,255,.8); line-height: 1.6;
        }
        .banner-actions { position: relative; }
        .btn-manage {
            display: inline-flex; align-items: center; gap: .5rem;
            background: rgba(255,255,255,.2); color: #fff;
            border: 1.5px solid rgba(255,255,255,.4);
            border-radius: var(--radius-md); padding: .55rem 1.1rem;
            font-size: .8rem; font-weight: 600; text-decoration: none;
            backdrop-filter: blur(6px);
            transition: background .2s, transform .15s;
        }
        .btn-manage:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); color: #fff; }

        /* ─── INFO CARD ─────────────────────────────────────────── */
        .info-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-sm);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem 2rem;
        }
        .info-item { display: flex; align-items: flex-start; gap: .75rem; }
        .info-item .icon {
            flex-shrink: 0; width: 36px; height: 36px;
            background: var(--teal-pale); border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            color: var(--teal); font-size: 1rem;
        }
        .info-item .key { font-size: .7rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
        .info-item .val { font-size: .88rem; font-weight: 600; color: var(--ink-mid); margin-top: 1px; }

        /* ─── SECTION TITLES ─────────────────────────────────────────── */
        .section-title {
            display: flex; align-items: center; gap: .75rem;
            font-family: 'Lora', serif; font-size: 1.25rem; font-weight: 700;
            color: var(--ink); margin-bottom: 1.5rem;
        }
        .section-title .line {
            flex: 1; height: 2px;
            background: linear-gradient(90deg, var(--teal-mid), transparent);
        }
        .section-title i { color: var(--teal); font-size: 1.1rem; }

        /* ─── PENGURUS CARDS ─────────────────────────────────────────── */
        .pengurus-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        @media(max-width: 900px) { .pengurus-grid { grid-template-columns: repeat(2, 1fr); } }
        @media(max-width: 580px) { .pengurus-grid { grid-template-columns: 1fr; } }

        .pengurus-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: transform .2s, box-shadow .2s;
        }
        .pengurus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

        .pengurus-card .card-top {
            padding: 2rem 1.5rem 1.25rem;
            text-align: center;
            position: relative;
        }
        .pengurus-card.ketua .card-top { background: linear-gradient(160deg, #e6faf8 0%, #f0fdfa 100%); }
        .pengurus-card.sekretaris .card-top { background: linear-gradient(160deg, #eff6ff 0%, #f8faff 100%); }
        .pengurus-card.bendahara .card-top { background: linear-gradient(160deg, #fef9ee 0%, #fffbf0 100%); }

        .pengurus-card .avatar-wrap {
            position: relative; display: inline-block; margin-bottom: 1rem;
        }
        .pengurus-card .avatar {
            width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
            border: 4px solid var(--surface);
            box-shadow: 0 4px 20px rgba(0,0,0,.12);
        }
        .pengurus-card.ketua    .avatar { border-color: #0d9488; box-shadow: 0 0 0 3px #ccfbf1, 0 4px 20px rgba(13,148,136,.2); }
        .pengurus-card.sekretaris .avatar { border-color: #3b82f6; box-shadow: 0 0 0 3px #dbeafe, 0 4px 20px rgba(59,130,246,.2); }
        .pengurus-card.bendahara .avatar { border-color: #d97706; box-shadow: 0 0 0 3px #fef3c7, 0 4px 20px rgba(217,119,6,.2); }

        /* Placeholder SVG — tampil jika foto tidak ada */
        .avatar-placeholder {
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%; overflow: hidden; border: 3px solid;
        }
        .avatar-placeholder svg { width: 58%; height: 58%; }
        .pejabat-card .avatar-placeholder { border-radius: 50%; }

        .pengurus-card .jabatan-badge {
            position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
            white-space: nowrap; font-size: .65rem; font-weight: 700;
            padding: .2rem .65rem; border-radius: 20px; letter-spacing: .07em; text-transform: uppercase;
        }
        .pengurus-card.ketua    .jabatan-badge { background: #0d9488; color: #fff; }
        .pengurus-card.sekretaris .jabatan-badge { background: #3b82f6; color: #fff; }
        .pengurus-card.bendahara .jabatan-badge { background: #d97706; color: #fff; }

        .pengurus-card .card-body-custom { padding: 1.25rem 1.5rem 1.5rem; text-align: center; border-top: 1px solid var(--border); }
        .pengurus-card .nama { font-family: 'Lora', serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; }
        .pengurus-card .nik  { font-size: .78rem; color: var(--ink-soft); }
        .pengurus-card .nik i { margin-right: .3rem; }
        .badge-verified {
            display: inline-flex; align-items: center; gap: .3rem;
            font-size: .7rem; font-weight: 600; padding: .25rem .65rem;
            border-radius: 20px; margin-top: .6rem;
            background: #dcfce7; color: #15803d;
        }
        .badge-unset {
            display: inline-flex; align-items: center; gap: .3rem;
            font-size: .7rem; font-weight: 600; padding: .25rem .65rem;
            border-radius: 20px; margin-top: .6rem;
            background: #f3f4f6; color: #9ca3af;
        }

        /* ─── PEJABAT SECTION ─────────────────────────────────────────── */
        .pejabat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.25rem;
            margin-bottom: 2rem;
        }
        .pejabat-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius-xl); padding: 1.25rem;
            display: flex; align-items: center; gap: 1.25rem;
            box-shadow: var(--shadow-sm);
            transition: transform .2s, box-shadow .2s;
        }
        .pejabat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
        .pejabat-card .pejabat-avatar {
            width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
            border: 3px solid var(--teal-mid); flex-shrink: 0;
        }
        .pejabat-card .pejabat-info .role {
            font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
            color: var(--teal); margin-bottom: .2rem;
        }
        .pejabat-card .pejabat-info .name { font-weight: 700; font-size: .95rem; color: var(--ink); }
        .pejabat-card .pejabat-info .meta { font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }

        /* ─── PERATURAN ─────────────────────────────────────────── */
        .peraturan-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius-xl); overflow: hidden;
            box-shadow: var(--shadow-sm); margin-bottom: 2rem;
        }
        .peraturan-header {
            background: linear-gradient(90deg, #78350f, #b45309);
            padding: 1rem 1.5rem; display: flex; align-items: center; gap: .75rem;
            color: #fff;
        }
        .peraturan-header i { font-size: 1.1rem; }
        .peraturan-header span { font-weight: 700; font-size: .9rem; }
        .peraturan-body {
            padding: 1.75rem 2rem;
        }
        .peraturan-text { display:none; } /* diganti dengan class baru */

        /* ── Render HTML dari Quill editor ── */
        .ql-editor-output {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: .95rem;
            line-height: 1.85;
            color: #374151;
        }
        /* Pastikan semua block element tampil sebagai block — override apapun dari parent */
        .ql-editor-output h1,
        .ql-editor-output h2,
        .ql-editor-output h3,
        .ql-editor-output p,
        .ql-editor-output ol,
        .ql-editor-output ul,
        .ql-editor-output li,
        .ql-editor-output div,
        .ql-editor-output hr,
        .ql-editor-output blockquote {
            display: block !important;
        }
        .ql-editor-output h1 {
            font-size: 1.2rem; font-weight: 800;
            text-align: center; color: #0f1923;
            margin: 0 0 .2rem; line-height: 1.4;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .ql-editor-output h2 {
            font-size: 1rem; font-weight: 700; color: #0d6b5e;
            border-left: 4px solid #0d9488;
            background: #f0fdf9;
            padding: .4rem .8rem;
            border-radius: 0 6px 6px 0;
            margin: 1.6rem 0 .6rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .ql-editor-output h3 {
            font-size: .95rem; font-weight: 700; color: #374151;
            margin: 1.1rem 0 .4rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .ql-editor-output p {
            margin: 0 0 .6rem;
            text-align: justify;
        }
        .ql-editor-output p:empty,
        .ql-editor-output p br:only-child {
            margin: 0 0 .3rem;
            line-height: .8;
        }
        .ql-editor-output ol {
            padding-left: 1.6rem;
            margin: .3rem 0 1rem;
            list-style-type: decimal;
        }
        .ql-editor-output ul {
            padding-left: 1.6rem;
            margin: .3rem 0 1rem;
            list-style-type: disc;
        }
        .ql-editor-output li {
            margin-bottom: .4rem;
            text-align: justify;
        }
        .ql-editor-output strong { color: #0f1923; font-weight: 700; }
        .ql-editor-output em { font-style: italic; color: #555; }
        .ql-editor-output u { text-decoration: underline; }
        .ql-editor-output hr {
            border: none;
            border-top: 1.5px solid #d1fae5;
            margin: 1.2rem 0;
        }
        .ql-editor-output .ql-align-center { text-align: center !important; }
        .ql-editor-output .ql-align-right  { text-align: right !important; }
        .ql-editor-output .ql-align-justify { text-align: justify !important; }
        /* Quill menyimpan align sebagai style inline */
        .ql-editor-output [style*="text-align: center"] { text-align: center !important; }
        .ql-editor-output [style*="text-align: right"]  { text-align: right !important; }
        .ql-editor-output [style*="text-align: justify"]{ text-align: justify !important; }
        .peraturan-footer {
            padding: .75rem 1.5rem; border-top: 1px solid var(--border);
            background: #fafafa;
        }
        .peraturan-footer small { font-size: .78rem; color: var(--ink-soft); }
        .empty-state {
            text-align: center; padding: 3rem 1rem; color: var(--ink-soft);
        }
        .empty-state i { font-size: 3rem; color: var(--border); margin-bottom: .75rem; }
        .empty-state p { font-size: .9rem; margin-bottom: 1rem; }
        .btn-add {
            display: inline-flex; align-items: center; gap: .4rem;
            background: #d97706; color: #fff; text-decoration: none;
            border-radius: var(--radius-md); padding: .5rem 1.1rem;
            font-size: .82rem; font-weight: 600;
            transition: background .2s;
        }
        .btn-add:hover { background: #b45309; color: #fff; }

        /* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────── */
        @media(max-width: 640px) {
            .page-wrap { padding: 1rem .75rem; }
            .banner { padding: 1.5rem 1.25rem; gap: 1rem; }
            .banner-logo { width: 60px; height: 60px; }
            .info-card { padding: 1.25rem; }
            .peraturan-body { padding: 1.25rem; }
        }
    </style>
</head>
<body>
<div class="page-wrap">

    <!-- ── BANNER ──────────────────────────────────────────── -->
    <div class="banner">
        <div class="banner-logo">
            <?php if(!empty($pengaturan->logo)): ?>
                <img src="<?php echo foto_pengurus_url($pengaturan->logo); ?>" alt="Logo RT">
            <?php else: ?>
                <i class="bi bi-house-fill no-logo"></i>
            <?php endif; ?>
        </div>
        <div class="banner-text">
            <div class="label">Struktur Organisasi</div>
            <h1>
                <?php echo htmlspecialchars($pengaturan->nama_rt ?? 'RT ???'); ?> /
                <?php echo htmlspecialchars($pengaturan->nama_rw ?? 'RW ???'); ?>
            </h1>
            <div class="sub">
                <?php
                $parts = array_filter([
                    $pengaturan->nama_kelurahan ?? null,
                    $pengaturan->nama_kecamatan  ?? null,
                    $pengaturan->nama_kota        ?? null,
                    $pengaturan->nama_provinsi    ?? null,
                ]);
                echo htmlspecialchars(implode(', ', $parts) ?: 'Kelurahan — Kecamatan — Kota');
                ?>
            </div>
        </div>
        <?php if($this->session->userdata('role') == 'admin'): ?>
        <div class="banner-actions">
            <a href="<?php echo base_url('pengaturan'); ?>" class="btn-manage">
                <i class="bi bi-gear-fill"></i> Kelola Pengurus
            </a>
        </div>
        <?php endif; ?>
    </div>

    <!-- ── INFO STRIP ──────────────────────────────────────────── -->
    <div class="info-card">
        <div class="info-item">
            <div class="icon"><i class="bi bi-geo-alt-fill"></i></div>
            <div>
                <div class="key">Sekretariat</div>
                <div class="val"><?php echo htmlspecialchars($pengaturan->alamat_sekretariat ?? '-'); ?></div>
            </div>
        </div>
        <div class="info-item">
            <div class="icon"><i class="bi bi-telephone-fill"></i></div>
            <div>
                <div class="key">Telepon</div>
                <div class="val"><?php echo htmlspecialchars($pengaturan->no_telp ?? '-'); ?></div>
            </div>
        </div>
        <div class="info-item">
            <div class="icon"><i class="bi bi-mailbox-flag"></i></div>
            <div>
                <div class="key">Kode Pos</div>
                <div class="val"><?php echo htmlspecialchars($pengaturan->kode_pos ?? '-'); ?></div>
            </div>
        </div>
        <div class="info-item">
            <div class="icon"><i class="bi bi-buildings-fill"></i></div>
            <div>
                <div class="key">Kecamatan</div>
                <div class="val"><?php echo htmlspecialchars($pengaturan->nama_kecamatan ?? '-'); ?></div>
            </div>
        </div>
    </div>

    <!-- ── PENGURUS RT ──────────────────────────────────────────── -->
    <?php 
    $pengurus_inti = array_filter($struktur, function($s){ return $s->kategori == 'pengurus'; });
    $seksi_seksi   = array_filter($struktur, function($s){ return $s->kategori == 'seksi'; });
    ?>

    <?php if(!empty($pengurus_inti)): ?>
    <div class="section-title">
        <i class="bi bi-people-fill"></i>
        Pengurus Inti RT
        <span class="line"></span>
    </div>

    <div class="pengurus-grid">
        <?php 
        $colors = ['#0d9488', '#3b82f6', '#d97706', '#7c3aed', '#db2777'];
        $i = 0;
        foreach($pengurus_inti as $st): 
            $color = $colors[$i % count($colors)];
            $i++;
        ?>
        <div class="pengurus-card">
            <div class="card-top">
                <div class="avatar-wrap">
                    <?php 
                    $foto = $st->foto;
                    // Jika warga terdaftar, prioritaskan foto dari profile warga? 
                    // Tapi di simpan_struktur kita sudah handle upload foto spesifik struktur.
                    echo avatar_html($foto, 'Foto ' . $st->nama_jabatan, 'avatar', 'width:110px;height:110px;', $color); 
                    ?>
                    <span class="jabatan-badge" style="background:<?php echo $color; ?>"><?php echo htmlspecialchars($st->nama_jabatan); ?></span>
                </div>
            </div>
            <div class="card-body-custom">
                <div class="nama"><?php echo htmlspecialchars($st->nama_warga ?: ($st->nama_manual ?: 'Belum diisi')); ?></div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- ── SEKSI-SEKSI ──────────────────────────────────────────── -->
    <?php if(!empty($seksi_seksi)): ?>
    <div class="section-title">
        <i class="bi bi-grid-fill"></i>
        Seksi & Departemen
        <span class="line"></span>
    </div>
    <div class="pejabat-grid mb-5">
        <?php foreach($seksi_seksi as $st): ?>
        <div class="pejabat-card">
            <?php echo avatar_html($st->foto, 'Foto ' . $st->nama_jabatan, 'pejabat-avatar', 'width:72px;height:72px;flex-shrink:0;', '#64748b'); ?>
            <div class="pejabat-info">
                <div class="role"><?php echo htmlspecialchars($st->nama_jabatan); ?></div>
                <div class="name"><?php echo htmlspecialchars($st->nama_warga ?: ($st->nama_manual ?: 'Belum diisi')); ?></div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- ── PEJABAT LAIN ──────────────────────────────────────────── -->
    <?php if(!empty($pengaturan->nama_ketua_rw) || !empty($pengaturan->nama_lurah)): ?>
    <div class="section-title">
        <i class="bi bi-person-badge-fill"></i>
        Pejabat Terkait
        <span class="line"></span>
    </div>
    <div class="pejabat-grid">

        <?php if(!empty($pengaturan->nama_ketua_rw)): ?>
        <div class="pejabat-card">
            <?php echo avatar_html($pengaturan->foto_ketua_rw ?? null, 'Foto Ketua RW', 'pejabat-avatar', 'width:72px;height:72px;flex-shrink:0;', '#0d9488'); ?>
            <div class="pejabat-info">
                <div class="role">Ketua <?php echo htmlspecialchars($pengaturan->nama_rw ?? 'RW'); ?></div>
                <div class="name"><?php echo htmlspecialchars($pengaturan->nama_ketua_rw); ?></div>
            </div>
        </div>
        <?php endif; ?>

        <?php if(!empty($pengaturan->nama_lurah)): ?>
        <div class="pejabat-card">
            <?php echo avatar_html($pengaturan->foto_lurah ?? null, 'Foto Lurah', 'pejabat-avatar', 'width:72px;height:72px;flex-shrink:0;', '#7c3aed'); ?>
            <div class="pejabat-info">
                <div class="role"><?php echo htmlspecialchars($pengaturan->jabatan_lurah ?? 'Lurah'); ?></div>
                <div class="name"><?php echo htmlspecialchars($pengaturan->nama_lurah); ?></div>
            </div>
        </div>
        <?php endif; ?>

    </div>
    <?php endif; ?>

    <!-- ── PERATURAN RT ──────────────────────────────────────────── -->
    <div class="section-title">
        <i class="bi bi-journal-text"></i>
        Peraturan & Tata Tertib
        <span class="line"></span>
    </div>

    <div class="peraturan-card">
        <div class="peraturan-header">
            <i class="bi bi-gavel"></i>
            <span>Peraturan Resmi <?php echo htmlspecialchars(($pengaturan->nama_rt ?? 'RT') . ' ' . ($pengaturan->nama_rw ?? '')); ?></span>
        </div>
        <div class="peraturan-body">
            <?php
            $isi_peraturan = $pengaturan->peraturan_rt ?? '';
            $is_html = !empty($isi_peraturan) && ($isi_peraturan !== strip_tags($isi_peraturan));

            if (!empty($isi_peraturan)):
                if ($is_html):
                    // Inject inline style ke setiap elemen agar tidak bergantung pada CSS eksternal
                    $html = $isi_peraturan;

                    // h1 — judul utama tengah
                    $html = preg_replace(
                        '/<h1([^>]*)>/i',
                        '<h1$1 style="display:block!important;font-size:1.15rem;font-weight:800;text-align:center;color:#0f1923;margin:0 0 4px;line-height:1.4;font-family:sans-serif;">',
                        $html
                    );
                    // h2 — judul pasal dengan aksen teal
                    $html = preg_replace(
                        '/<h2([^>]*)>/i',
                        '<h2$1 style="display:block!important;font-size:1rem;font-weight:700;color:#0d6b5e;border-left:4px solid #0d9488;background:#f0fdf9;padding:6px 12px;border-radius:0 6px 6px 0;margin:24px 0 8px;font-family:sans-serif;">',
                        $html
                    );
                    // h3
                    $html = preg_replace(
                        '/<h3([^>]*)>/i',
                        '<h3$1 style="display:block!important;font-size:.95rem;font-weight:700;color:#374151;margin:16px 0 6px;font-family:sans-serif;">',
                        $html
                    );
                    // p
                    $html = preg_replace(
                        '/<p([^>]*)>/i',
                        '<p$1 style="display:block!important;margin:0 0 8px;line-height:1.85;font-family:Georgia,serif;font-size:.95rem;color:#374151;">',
                        $html
                    );
                    // ol
                    $html = preg_replace(
                        '/<ol([^>]*)>/i',
                        '<ol$1 style="display:block!important;padding-left:1.6rem;margin:4px 0 14px;list-style-type:decimal;">',
                        $html
                    );
                    // ul
                    $html = preg_replace(
                        '/<ul([^>]*)>/i',
                        '<ul$1 style="display:block!important;padding-left:1.6rem;margin:4px 0 14px;list-style-type:disc;">',
                        $html
                    );
                    // li
                    $html = preg_replace(
                        '/<li([^>]*)>/i',
                        '<li$1 style="display:list-item!important;margin-bottom:6px;line-height:1.75;font-family:Georgia,serif;font-size:.95rem;color:#374151;">',
                        $html
                    );
                    // strong
                    $html = preg_replace(
                        '/<strong([^>]*)>/i',
                        '<strong$1 style="font-weight:700;color:#0f1923;">',
                        $html
                    );
                    // em
                    $html = preg_replace(
                        '/<em([^>]*)>/i',
                        '<em$1 style="font-style:italic;color:#555;">',
                        $html
                    );
                    // hr
                    $html = preg_replace(
                        '/<hr([^>]*)>/i',
                        '<hr$1 style="display:block!important;border:none;border-top:1.5px solid #d1fae5;margin:16px 0;">',
                        $html
                    );

                    echo '<div style="font-family:Georgia,serif;font-size:.95rem;line-height:1.85;color:#374151;">' . $html . '</div>';
                else:
                    // Plain text lama
                    echo '<div style="white-space:pre-wrap;font-family:Georgia,serif;font-size:.95rem;line-height:1.85;color:#374151;">'
                        . htmlspecialchars($isi_peraturan) . '</div>';
                endif;
            else: ?>
                <div class="empty-state">
                    <i class="bi bi-journal-x d-block"></i>
                    <p>Peraturan RT belum diatur oleh admin.</p>
                    <?php if($this->session->userdata('role') == 'admin'): ?>
                        <a href="<?php echo base_url('pengaturan'); ?>" class="btn-add">
                            <i class="bi bi-pencil-fill"></i> Atur Peraturan
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
        <?php if(!empty($pengaturan->peraturan_rt)): ?>
        <div class="peraturan-footer">
            <small>
                <i class="bi bi-info-circle me-1"></i>
                Peraturan ini berlaku bagi seluruh warga
                <?php echo htmlspecialchars($pengaturan->nama_rt ?? 'RT ini'); ?>.
            </small>
        </div>
        <?php endif; ?>
    </div>

</div>
</body>
</html>