Default page

Edit File: index.php

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0"><?=$title?></h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active"><?=$li_1?></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-white">
                        <div class="card-tools">
                            <button class="btn btn-sm btn-primary px-3" data-toggle="modal" data-target="#modalAdd">
                                <i class="fas fa-plus mr-1"></i> Tambah
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light text-muted">
                                <tr>
                                    <th class="px-4 py-3 small font-weight-bold" width="100">IKON</th>
                                    <th class="small font-weight-bold">NAMA AKSES CEPAT</th>
                                    <th class="small font-weight-bold text-center" width="150">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if(!empty($dirs)): ?>
                                    <?php foreach($dirs as $d): ?>
                                    <tr>
                                        <td class="px-4">
                                            <img src="<?= base_url('uploads/directorate/'.$d['icon']) ?>" class="rounded border shadow-sm" width="50" height="50" style="object-fit: cover;">
                                        </td>
                                        <td class="align-middle">
                                            <div class="font-weight-bold text-dark"><?= $d['name'] ?></div>
                                            <a href="<?= $d['url'] ?>" target="_blank" class="text-primary small">
                                                <i class="fas fa-link mr-1"></i> <?= $d['url'] ?: '-' ?>
                                            </a>
                                        </td>
                                        <td class="text-center align-middle">
                                            <button type="button" 
                                                    class="btn btn-outline-primary btn-sm px-3 btn-edit" 
                                                    data-id="<?= $d['id'] ?>"
                                                    data-name="<?= $d['name'] ?>"
                                                    data-url="<?= $d['url'] ?>"
                                                    data-icon="<?= base_url('uploads/directorate/'.$d['icon']) ?>">
                                                <i class="fas fa-pencil-alt"></i>
                                            </button>
                                            
                                            <a href="<?= base_url('admin/directorate/delete/' . $d['id']) ?>" 
                                               class="btn btn-outline-danger btn-sm px-3 btn-delete" 
                                               onclick="return confirm('Apakah Anda yakin?')">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <tr><td colspan="3" class="text-center py-5 text-muted">Belum ada data akses cepat.</td></tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg">
            <form id="formDirectorate" action="<?= base_url('admin/directorate/store') ?>" method="post">
                <?= csrf_field() ?>
                <input type="hidden" name="id" id="dir_id">
                
                <div class="modal-header border-bottom-0 p-4 pb-0">
                    <h5 class="font-weight-bold mb-0" id="modalTitle">Tambah Akses Cepat</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-4 text-center">
                        <div class="bg-light rounded border mb-3 d-flex align-items-center justify-content-center mx-auto" 
                             style="width: 120px; height: 120px; overflow: hidden; border-style: dashed !important;">
                            <img id="iconPreview" src="https://placehold.co/150" class="img-fluid" style="object-fit: contain;">
                        </div>
                        <div class="custom-file text-left" style="font-size: 13px;">
                            <input type="file" id="inputIcon" class="custom-file-input" accept="image/*">
                            <label class="custom-file-label">Pilih Ikon (1:1)</label>
                        </div>
                        <input type="hidden" name="icon_base64" id="icon_base64">
                    </div>
                    <div class="form-group mb-3">
                        <label class="small font-weight-bold">Nama Akses Cepat</label>
                        <input type="text" name="name" id="dir_name" class="form-control" placeholder="Contoh: HRIS" required>
                    </div>
                    <div class="form-group mb-3">
                        <label class="small font-weight-bold">URL Website</label>
                        <input type="url" name="url" id="dir_url" class="form-control" placeholder="https://...">
                    </div>
                </div>
                <div class="modal-footer border-top-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 font-weight-bold shadow-sm">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCropDir" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white p-2 px-3">
                <h6 class="modal-title">Potong Ikon (1:1)</h6>
            </div>
            <div class="modal-body p-0 bg-dark text-center">
                <div style="max-height: 400px; overflow: hidden;">
                    <img id="imageToCropDir" src="" style="max-width: 100%; display: block;">
                </div>
            </div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-primary btn-block font-weight-bold" id="btnSaveCropDir">Potong & Gunakan</button>
            </div>
        </div>
    </div>
</div>

// --- HANDLE EDIT ---
    $('.btn-edit').on('click', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const url = $(this).data('url');
        const icon = $(this).data('icon');

$('#modalTitle').text('Edit Akses Cepat');
        $('#formDirectorate').attr('action', '<?= base_url('admin/directorate/update') ?>/' + id);
        
        $('#dir_id').val(id);
        $('#dir_name').val(name);
        $('#dir_url').val(url);
        $('#iconPreview').attr('src', icon);

$modalAdd.modal('show');
    });

// --- RESET MODAL SAAT DITUTUP ---
    $modalAdd.on('hidden.bs.modal', function () {
        $('#modalTitle').text('Tambah Akses Cepat');
        $('#formDirectorate').attr('action', '<?= base_url('admin/directorate/store') ?>');
        $('#formDirectorate')[0].reset();
        $('#dir_id').val('');
        $('#icon_base64').val('');
        $('#iconPreview').attr('src', 'https://placehold.co/150');
        $('.custom-file-label').text('Pilih Ikon (1:1)');
    });

// --- LOGIKA INPUT FILE & MODAL CROP ---
    $('#inputIcon').on('change', function(e) {
        const files = e.target.files;
        if (files && files.length > 0) {
            const reader = new FileReader();
            reader.onload = function(event) {
                imgCrop.src = event.target.result;
                $modalCrop.modal('show');
            };
            reader.readAsDataURL(files[0]);
        }
    });

// --- INISIALISASI CROPPER ---
    $modalCrop.on('shown.bs.modal', function() {
        if (cropperDir) cropperDir.destroy();
        cropperDir = new Cropper(imgCrop, {
            aspectRatio: 1 / 1,
            viewMode: 2,
            autoCropArea: 1
        });
    }).on('hidden.bs.modal', function() {
        if (cropperDir) {
            cropperDir.destroy();
            cropperDir = null;
        }
        $('#inputIcon').val(''); // Reset input file agar bisa pilih ulang
    });

// --- SIMPAN HASIL CROP ---
    $('#btnSaveCropDir').on('click', function() {
        if (!cropperDir) return;
        
        const canvas = cropperDir.getCroppedCanvas({ width: 300, height: 300 });
        const base64 = canvas.toDataURL('image/png');
        
        $('#iconPreview').attr('src', base64);
        $('#icon_base64').val(base64);
        
        $modalCrop.modal('hide');
    });
});
</script>