accounting_dev/application/views/kamar/layout.php

<div class="container mt-4">
    <div class="card modern-card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Data Kamar</h5>
                <div>
                    <?php if(check_permission('kamar', 'can_create')): ?>
                    <button class="btn btn-success btn-add" style="margin-right: 5px;">
                        <i class="bi bi-plus-circle me-1"></i> Tambah Kamar
                    </button>
                    <?php endif; ?>
                </div>
            </div>

            <div class="table-responsive">
                <table id="tableKamar" class="table modern-table align-middle w-100">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Kamar</th>
                            <th>Gedung</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

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

<!-- MODAL TAMBAH / EDIT KAMAR -->
<div class="modal fade" id="modalKamar">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4">
            <div class="modal-header bg-success text-white rounded-top-4">
                <h5 class="modal-title">Tambah Kamar</h5>
                <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="inputId">
                <label class="fw-semibold mt-2">Nama Kamar</label>
                <input type="text" class="form-control" id="inputNama" placeholder="Masukkan nama kamar">

                <label class="fw-semibold mt-2">Gedung</label>
                <input type="text" class="form-control" id="inputGedung" placeholder="Masukkan nama gedung">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button class="btn btn-success" id="btnSimpanKamar">Simpan</button>
            </div>
        </div>
    </div>
</div>

<!-- MODAL DETAIL KAMAR -->
<div class="modal fade" id="modalDetailKamar">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header bg-primary text-white rounded-top-4">
                <h5 class="modal-title">Detail Kamar</h5>
                <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="d-flex flex-column gap-2">
                    <div class="p-3 border rounded-3 bg-light">
                        <span class="text-success fw-bold">Nama Kamar:</span>
                        <div id="detailNamaKamar" class="fw-semibold"></div>
                    </div>
                    <div class="p-3 border rounded-3 bg-light">
                        <span class="text-success fw-bold">Gedung:</span>
                        <div id="detailGedung"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){

    let table = $('#tableKamar').DataTable({
        dom: '<"dataTables_top d-flex justify-content-between mb-3"l f>rtip',
        processing: true,
        serverSide: true,
        responsive: false,
        autoWidth: false,
        order: [],
        ajax: {
            url: "<?= base_url('kamar/get_data'); ?>", 
            type: "POST"
        },
        columns: [
            { data: 0, orderable: false },
            { data: 1 },
            { data: 2 },
            { data: 3, orderable: false } // Kolom Aksi
        ],
        language: {
            processing: `<div class="d-flex justify-content-center"><div class="spinner-border text-success"></div></div>`
        }
    });

    $('.dataTables_filter input').attr('placeholder', 'Search...').css({
        'min-width': '300px',
        'padding': '6px 12px',
        'border-radius': '6px',
        'border': '1px solid #ced4da',
        'font-size': '0.9rem',
        'box-sizing': 'border-box'
    });

    table.on('draw', function () {
        $('#tableKamar tbody tr').each(function() {
            $(this).find('td').each(function(index) {
                let header = $('#tableKamar thead th').eq(index).text().trim();
                $(this).attr('data-label', header + ' : ');
            });
        });
    });

    // OPEN MODAL TAMBAH
    $(document).on('click', '.btn-add', function(){
        $('#inputId, #inputNama, #inputGedung').val('');
        $('#modalKamar .modal-title').text('Tambah Kamar');
        $('#btnSimpanKamar').text('Simpan').data('action','add').removeData('id');
        $('#modalKamar').modal('show');
    });

    // SAVE / UPDATE KAMAR
    $('#btnSimpanKamar').click(function(){
        let action = $(this).data('action');
        let id     = $('#inputId').val() || '';
        let formData = {
            id: id,
            nama: $('#inputNama').val(),
            gedung: $('#inputGedung').val()
        };

        let url = action === 'add' ? "<?= base_url('kamar/save'); ?>" : "<?= base_url('kamar/update'); ?>";

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(res){
                if(res.status){
                    $('#modalKamar').modal('hide');
                    table.ajax.reload(null,false);
                    Swal.fire('Sukses', res.message || 'Berhasil!', 'success');
                } else {
                    Swal.fire('Gagal', res.message || 'Gagal!', 'error');
                }
            },
            error: function(){
                Swal.fire('Error', 'Terjadi kesalahan server.', 'error');
            }
        });
    });

    // DETAIL KAMAR
    $(document).on('click', '.btn-detail', function(){
        let id = $(this).data('id');
        $.ajax({
            url: "<?= base_url('kamar/detail'); ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(res){
                $('#detailNamaKamar').text(res.nama);
                $('#detailGedung').text(res.gedung);
                $('#modalDetailKamar').modal('show');
            },
            error: function(){
                Swal.fire('Error','Gagal memuat detail.','error');
            }
        });
    });

    // EDIT KAMAR
    $(document).on('click', '.btn-edit', function(){
        let id = $(this).data('id');
        $.ajax({
            url: "<?= base_url('kamar/detail'); ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(res){
                $('#inputId').val(res.id);
                $('#inputNama').val(res.nama);
                $('#inputGedung').val(res.gedung);

                $('#modalKamar .modal-title').text('Edit Kamar');
                $('#btnSimpanKamar').text('Update').data('action','edit');
                $('#modalKamar').modal('show');
            },
            error: function(){
                Swal.fire('Error','Gagal memuat data edit.','error');
            }
        });
    });

    // DELETE KAMAR
    $(document).on('click', '.btn-delete', function(){
        let id = $(this).data('id');
        Swal.fire({
            title: 'Yakin ingin hapus?',
            text: "Data tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if(result.isConfirmed){
                $.ajax({
                    url: "<?= base_url('kamar/delete'); ?>/" + id,
                    type: "GET",
                    dataType: "json",
                    success: function(res){
                        if(res.status){
                            table.ajax.reload(null,false);
                            Swal.fire('Terhapus!', res.message || 'Berhasil dihapus!', 'success');
                        } else {
                            Swal.fire('Gagal', res.message || 'Gagal menghapus!', 'error');
                        }
                    },
                    error: function(){
                        Swal.fire('Error','Terjadi kesalahan saat menghapus.','error');
                    }
                });
            }
        });
    });

});
</script>