<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">
            <i class="bi bi-megaphone me-2"></i>Detail Pengumuman
        </h4>
        <div>
            <?php 
            $user_role = $this->session->userdata('role');
            if($user_role == 'admin' || $user_role == 'rt'): 
            ?>
            <a href="<?php echo base_url('pengumuman/edit/'.$pengumuman->id); ?>" class="btn btn-warning me-2">
                <i class="bi bi-pencil me-2"></i>Edit
            </a>
            <?php endif; ?>
            <a href="<?php echo base_url('pengumuman'); ?>" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-2"></i>Kembali
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <!-- Header -->
            <div class="mb-4">
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <?php 
                    $badge_kat = 'bg-info';
                    switch($pengumuman->kategori) {
                        case 'kegiatan': $badge_kat = 'bg-success'; break;
                        case 'darurat': $badge_kat = 'bg-danger'; break;
                        case 'pembayaran': $badge_kat = 'bg-warning'; break;
                    }
                    ?>
                    <span class="badge <?php echo $badge_kat; ?> fs-6">
                        <?php echo ucfirst($pengumuman->kategori); ?>
                    </span>
                    
                    <?php if($user_role == 'admin' || $user_role == 'rt'): ?>
                    <span class="badge bg-secondary fs-6">
                        Untuk: <?php echo ucfirst($pengumuman->untuk_role); ?>
                    </span>
                    
                    <?php 
                    $badge_status = 'bg-secondary';
                    switch($pengumuman->status) {
                        case 'publish': $badge_status = 'bg-success'; break;
                        case 'draft': $badge_status = 'bg-warning'; break;
                        case 'arsip': $badge_status = 'bg-dark'; break;
                    }
                    ?>
                    <span class="badge <?php echo $badge_status; ?> fs-6">
                        <?php echo ucfirst($pengumuman->status); ?>
                    </span>
                    <?php endif; ?>
                </div>
                
                <h2 class="mb-3"><?php echo $pengumuman->judul; ?></h2>
                
                <div class="text-muted">
                    <i class="bi bi-calendar3 me-2"></i>
                    <span><?php echo date('d F Y', strtotime($pengumuman->tanggal_publish)); ?></span>
                    
                    <span class="mx-2">|</span>
                    
                    <i class="bi bi-person me-2"></i>
                    <span><?php echo $pengumuman->pembuat; ?></span>
                    
                    <?php if($pengumuman->tanggal_expired): ?>
                    <span class="mx-2">|</span>
                    <i class="bi bi-hourglass-split me-2"></i>
                    <span>Berlaku s/d <?php echo date('d F Y', strtotime($pengumuman->tanggal_expired)); ?></span>
                    <?php endif; ?>
                </div>
            </div>

            <hr>

            <!-- Isi — render HTML dari rich text editor -->
            <div class="mb-4 pengumuman-content" style="font-size: 1.05rem; line-height: 1.8;">
                <?php echo $pengumuman->isi; ?>
            </div>

            <!-- Lampiran -->
            <?php if($pengumuman->lampiran): ?>
            <hr>
            <div class="alert alert-light border">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-paperclip fs-3 me-3 text-primary"></i>
                        <div>
                            <h6 class="mb-1">Lampiran</h6>
                            <p class="mb-0 text-muted"><?php echo $pengumuman->lampiran; ?></p>
                        </div>
                    </div>
                    <a href="<?php echo base_url('pengumuman/download_lampiran/'.$pengumuman->id); ?>" 
                       class="btn btn-primary">
                        <i class="bi bi-download me-2"></i>Download
                    </a>
                </div>
            </div>
            <?php endif; ?>

            <!-- Footer Info -->
            <hr>
            <div class="text-muted small">
                <div class="row">
                    <div class="col-md-6">
                        <i class="bi bi-calendar-plus me-2"></i>
                        Dibuat: <?php echo date('d/m/Y H:i', strtotime($pengumuman->created_at)); ?>
                    </div>
                    <?php if($pengumuman->updated_at): ?>
                    <div class="col-md-6 text-md-end">
                        <i class="bi bi-calendar-check me-2"></i>
                        Terakhir diupdate: <?php echo date('d/m/Y H:i', strtotime($pengumuman->updated_at)); ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Styling konten rich text dari Quill agar jarak antar baris rapi */
.pengumuman-content p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.75;
}

/* Kurangi tinggi baris kosong Quill (<p><br></p>) agar tidak terlalu jauh */
.pengumuman-content p > br:only-child {
    font-size: 0.5em;
}

.pengumuman-content strong {
    font-weight: 600;
}
.pengumuman-content ul,
.pengumuman-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.pengumuman-content li {
    margin-bottom: 0.15rem;
}
.pengumuman-content blockquote {
    border-left: 4px solid #dee2e6;
    padding-left: 1rem;
    color: #6c757d;
    margin: 0.75rem 0;
}
.pengumuman-content h1,
.pengumuman-content h2,
.pengumuman-content h3 {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
}
.pengumuman-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.pengumuman-content table td,
.pengumuman-content table th {
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
}
.pengumuman-content table th {
    background: #f8f9fa;
    font-weight: 600;
}
</style>