MIF_E31222680/application/views/admin/detail_informasi_spp_santri.php

<?= $this->session->flashdata('pesan'); ?>
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center w-100">
        <h3 class="card-title mb-1" style="margin-top: 5px;">Halaman Informasi SPP Santri</h3>
        <div class="ml-auto">
            <a href="<?= base_url('santri') ?>" class="btn btn-danger btn-sm custom-button">
                <i class="fas fa-solid fa-angle-left"></i> Kembali
            </a>
        </div>
    </div>
    <!-- /.card-header -->
    <?php
    $kelas_diniyah = [
        1 => 'Al-Wadhih Banin',
        2 => 'Al-Wadhih Banat',
        3 => 'Al-Jurūmiyyah Banin',
        4 => 'Al-Jurūmiyyah Banat',
        5 => 'Al-Imriti Banin',
        6 => 'Al-Imriti Banat',
        7 => 'Alfiyah Ula Banin',
        8 => 'Alfiyah Ula Banat',
        9 => 'Alfiyah Tsani Banin',
        10 => 'Alfiyah Tsani Banat',
        11 => 'Alfiyah Tsalits Banin',
        12 => 'Alfiyah Tsalits Banat'
    ];
    $nama_bulan = [
        1 => 'Januari',
        2 => 'Februari',
        3 => 'Maret',
        4 => 'April',
        5 => 'Mei',
        6 => 'Juni',
        7 => 'Juli',
        8 => 'Agustus',
        9 => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember'
    ];
    ?>
    <div class="card-body">
        <table id="tb_santri" class="table table-bordered table-striped">
            <thead>
                <tr class="text-center">
                    <th>No</th>
                    <th>NIS</th>
                    <th>Nama Santri</th>
                    <th>Kelas Diniyah</th>
                    <th>Bulan</th>
                    <th>Tahun</th>
                    <th>Jumlah Pembayaran</th>
                    <th>Jatuh Tempo</th>
                    <th>Keterangan</th>
                </tr>
            </thead>
            <tbody>
                <?php $no = 1;
                foreach ($informasisppsantri as $sppstr) : ?>
                    <tr class="text-center">
                        <td><?= $no++ ?></td>
                        <td><?= $sppstr->NIS ?></td>
                        <td><?= $sppstr->nama_santri ?></td>
                        <td><?= $kelas_diniyah[$sppstr->kelas_diniyah] ?? 'Kelas Diniyah Tidak Valid' ?></td>
                        <td><?= $nama_bulan[$sppstr->bulan] ?? 'Bulan Tidak Valid' ?></td>
                        <td><?= $sppstr->tahun ?></td>
                        <td><?= $sppstr->jumlah_pembayaran ?></td>
                        <td><?= $sppstr->jatuh_tempo ?></td>
                        <td><?= $sppstr->keterangan ?></td>
                    </tr>
                <?php endforeach ?>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* CSS untuk mengubah background dan border <th> dan <td> */
    /* Ubah warna border tabel menjadi hijau */
    table.table-bordered {
        border: 2px solid green;
        /* Border luar tabel */
    }

    /* Ubah warna background dan border header tabel */
    table.table-bordered th {
        background-color: #e0f7e0;
        /* Hijau muda untuk header */
        border: 1px solid green;
        /* Warna border hijau */
        color: #333;
        /* Warna teks */
    }

    /* Ubah warna background dan border sel tabel */
    table.table-bordered td {
        background-color: #f0fff0;
        /* Hijau sangat muda untuk sel */
        border: 1px solid green;
        /* Warna border hijau */
        color: #333;
        /* Warna teks */
    }

    .form-control:not([size]):not([multiple]) {
        background-image: none !important;
        /* Menghilangkan panah bawaan Bootstrap */
    }

    .custom-button {
        font-family: inherit;
        /* Mengikuti font dari parent */
        font-size: 0.9rem;
        /* Sesuaikan dengan font pada h3 */
        font-weight: bold;
        /* Jika judul pakai bold, tombol juga dibuat bold */
        text-transform: capitalize;
        /* Mengikuti format teks di judul */
        padding: 6px 13px;
        /* Sesuaikan padding agar proporsional */
    }

    .custom-btn {
        font-family: inherit;
        /* Mengikuti font dari parent */
        font-size: 0.9rem;
        /* Sesuaikan dengan font pada h3 */
        font-weight: bold;
        /* Jika judul pakai bold, tombol juga dibuat bold */
        text-transform: capitalize;
        /* Mengikuti format teks di judul */
        padding: 4px 10px;
        /* Sesuaikan padding agar proporsional */
    }

    /* Override panah sorting ganda */
    /* Hapus panah sorting bawaan template atau Bootstrap */
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:after {
        display: none !important;
    }
</style>

<script>
    $(document).ready(function() {
        $('#tb_santri').DataTable({
            "paging": true, // Enable pagination
            "lengthChange": true, // Allow user to change number of rows shown
            "searching": true, // Enable search
            "ordering": true, // Enable column sorting
            "info": true, // Show table info
            "autoWidth": false, // Disable auto column width adjustment
        });
    });
</script>