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

<?= $this->section('content') ?>
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <h1>Manajemen Kontak Sekolah</h1>
        <a href="<?= base_url('admin/kontak/edit') ?>" class="btn btn-warning shadow-sm">
            <i class="fa fa-edit"></i> Edit Info Kontak
        </a>
    </div>

    <?php if (session()->getFlashdata('success')) : ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow mb-4 border-left-success">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold text-success">Detail Informasi</h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th width="30%">Alamat</th>
                            <td>: <?= $kontak['alamat'] ?></td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>: <?= $kontak['email'] ?></td>
                        </tr>
                        <tr>
                            <th>Telepon</th>
                            <td>: <?= $kontak['telepon'] ?></td>
                        </tr>
                        <tr>
                            <th>Instagram</th>
                            <td>: <span class="badge bg-danger">@<?= $kontak['instagram'] ?></span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold text-primary">Preview Google Maps</h6>
                </div>
                <div class="card-body p-0 overflow-hidden" style="height: 250px;">
                    <?= $kontak['maps_iframe'] ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    iframe { width: 100% !important; height: 100% !important; border: 0; }
    .border-left-success { border-left: 0.25rem solid #198754 !important; }
</style>
<?= $this->endSection() ?>