<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<div class="breadcrumb-area pt-50 pb-50 bg-gray">
    <div class="container">
        <div class="breadcrumb-content text-center">
            <ul>
                <li><a href="<?= base_url() ?>">Beranda</a></li>
                <li class="active">Profil</li>
            </ul>
            <h2><?= $halaman['judul_halaman'] ?></h2>
        </div>
    </div>
</div>

<div class="about-us-area pt-100 pb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="about-content custom-content-style">
                    
                    <?php if ($halaman['slug'] == 'visi-misi') : ?>
                        <div class="text-center mb-60">
                            <h2 class="text-success fw-bold">VISI</h2>
                            <div class="visi-box p-4 bg-light border-start border-4 border-success shadow-sm rounded">
                                <h3 class="fst-italic" style="color: #333; line-height: 1.6;">
                                    “<?= $halaman['visi'] ?>”
                                </h3>
                            </div>
                        </div>

                        <div class="mb-60">
                            <h2 class="text-success fw-bold mb-4">MISI SEKOLAH</h2>
                            <ul class="misi-list">
                                <?php 
                                // Memecah teks misi berdasarkan baris baru menjadi poin-poin
                                $misi_items = explode("\n", $halaman['misi']);
                                foreach ($misi_items as $item) : 
                                    if(trim($item) != "") : ?>
                                        <li><i class="fa fa-check-circle text-success"></i> <?= trim($item) ?></li>
                                <?php endif; endforeach; ?>
                            </ul>
                        </div>

                        <div class="tujuan-section bg-success text-white p-5 rounded shadow">
                            <h2 class="text-warning fw-bold mb-4">TUJUAN SATUAN PENDIDIKAN</h2>
                            <div class="tujuan-content">
                                <?= nl2br($halaman['tujuan']) ?>
                            </div>
                        </div>

                    <?php else : ?>
                        <?= $halaman['konten'] ?>
                    <?php endif; ?>

                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Styling agar tampilan otomatis rapi */
    .custom-content-style h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .visi-box {
        max-width: 800px;
        margin: 0 auto;
    }

    .misi-list {
        list-style: none;
        padding: 0;
    }

    .misi-list li {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
        color: #444;
    }

    .misi-list li i {
        margin-right: 15px;
        margin-top: 5px;
        font-size: 20px;
    }

    .tujuan-section {
        border-radius: 15px;
    }

    .tujuan-content {
        font-size: 17px;
        line-height: 1.9;
    }

    .text-success { color: #28a745 !important; }
    .text-warning { color: #ffc107 !important; }
</style>
<?= $this->endSection() ?>