Default page

Edit File: edit.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">
        <form action="<?= base_url('admin/opini/update/' . $opini->id) ?>" method="post" enctype="multipart/form-data" id="form-edit-opini">
            <?= csrf_field() ?>
            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                        <div class="card-body p-3">
                            <div class="mb-3">
                                <label class="form-label small fw-bold text-muted text-uppercase">Judul Opini</label>
                                <input type="text" name="title" class="form-control form-control-sm border-light bg-light" 
                                       value="<?= old('title', $opini->title) ?>" required>
                            </div>

<div class="mb-0">
                                <label class="form-label small fw-bold text-muted text-uppercase">Isi Konten</label>
                                <textarea name="content" id="editor-edit"><?= old('content', $opini->content) ?></textarea>
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-lg-4">
                    <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
                        <div class="card-body p-3 text-center">
                            <h6 class="fw-bold small mb-3 text-muted text-uppercase text-start">Gambar Sampul</h6>
                            
                            <div class="position-relative mb-3">
                                <div id="image-frame" class="border rounded d-flex align-items-center justify-content-center bg-light" 
                                     style="aspect-ratio: 16/9; overflow: hidden; border-style: dashed !important;">
                                    
                                    <?php if (!empty($opini->image) && file_exists(FCPATH . 'uploads/opini/' . $opini->image)): ?>
                                        <div id="placeholder-preview" style="display: none;">
                                            <i class="bi bi-image text-muted fs-1"></i>
                                        </div>
                                        <img id="image-preview-result" src="<?= base_url('uploads/opini/' . $opini->image) ?>" 
                                             class="img-fluid w-100 h-100" style="display: block; object-fit: cover;">
                                    <?php else: ?>
                                        <div id="placeholder-preview">
                                            <i class="bi bi-image text-muted fs-1"></i>
                                            <p class="small text-muted mb-0">Klik Choose File</p>
                                        </div>
                                        <img id="image-preview-result" src="#" class="img-fluid w-100 h-100" 
                                             style="display: none; object-fit: cover;">
                                    <?php endif; ?>
                                </div>
                            </div>

<div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
                        <div class="card-body p-3">
                            <h6 class="fw-bold small mb-3 text-muted text-uppercase">Atribut Penulisan</h6>
                            <div class="mb-3">
                                <label class="form-label small">Nama Penulis</label>
                                <input type="text" name="author_name" value="<?=$opini->author_name?>" class="form-control form-control-sm border-light bg-light" 
                                       value="">
                            </div>
                            <div class="mb-3">
                                <label class="form-label small">Tanggal Publish</label>
                                <input type="datetime-local" name="published_at" class="form-control form-control-sm border-light bg-light" 
                                       value="<?= date('Y-m-d\TH:i', strtotime($opini->published_at)) ?>">
                            </div>

<div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="headline" value="1" id="headlineSwitch" 
                                           <?= (isset($opini) && $opini->headline == 1) ? 'checked' : '' ?>>
                                    <label class="form-check-label small fw-bold" for="headlineSwitch">Jadikan Headline (Slideshow)</label>
                                </div>
                                <div style="font-size: 10px;" class="text-muted">Opini akan muncul di banner utama halaman depan.</div>
                            </div>
                        </div>
                    </div>

<div class="card border-0 shadow-sm" style="border-radius: 12px;">
                        <div class="card-body p-3">
                            <label class="form-label small">Status</label>
                            <select name="status" class="form-select form-select-sm border-light bg-light mb-3">
                                <option value="draft" <?= $opini->status == 'draft' ? 'selected' : '' ?>>Draft</option>
                                <option value="published" <?= $opini->status == 'published' ? 'selected' : '' ?>>Published</option>
                            </select>
                            <button type="submit" class="btn btn-primary btn-sm w-100 rounded-pill py-2 fw-bold shadow-sm">
                                <i class="bi bi-check-circle me-1"></i> Update Opini
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<div class="modal fade" id="cropperModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white p-2 px-3">
                <h6 class="modal-title fs-6">Sesuaikan Foto Baru</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0 bg-secondary bg-opacity-10 text-center">
                <div class="img-container" style="max-height: 450px; overflow: hidden;">
                    <img id="image-to-crop" style="display: block; max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-primary px-4 shadow-sm" id="crop-button">Gunakan Foto Ini</button>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    
    // --- 1. CKEDITOR 5 ---
    const editorElement = document.querySelector('#editor-edit');
    if (editorElement) {
        ClassicEditor.create(editorElement, {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo']
        }).then(editor => {
            editor.editing.view.change(writer => {
                writer.setStyle('min-height', '300px', editor.editing.view.document.getRoot());
            });
        }).catch(err => console.error(err));
    }

// --- 2. CROPPER LOGIC ---
    let cropper = null; // Pastikan inisialisasi di sini
    const $modal = $('#cropperModal');
    const imageToCrop = document.getElementById('image-to-crop');
    const uploadInput = document.getElementById('upload-image');
    
    // A. Saat pilih file
    $(uploadInput).on('change', function(e) {
        const files = e.target.files;
        if (files && files.length > 0) {
            const reader = new FileReader();
            reader.onload = function(event) {
                imageToCrop.src = event.target.result;
                $modal.modal('show'); // Cara Bootstrap 4
            };
            reader.readAsDataURL(files[0]);
        }
    });

// B. Inisialisasi Cropper saat modal terbuka sempurna
    $modal.on('shown.bs.modal', function () {
        // Hancurkan instance lama jika ada (mencegah double instance)
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }

cropper = new Cropper(imageToCrop, {
            aspectRatio: 16 / 9,
            viewMode: 2,
            autoCropArea: 1,
            // Tambahkan ini agar koordinat selalu terhitung saat gambar tampil
            ready: function() {
                console.log("Cropper Ready");
            }
        });
    });

// C. Bersihkan saat modal tertutup
    $modal.on('hidden.bs.modal', function () {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
        uploadInput.value = ""; // Reset input agar bisa pilih file yang sama
    });

// D. Tombol Potong (Sering terjadi error di sini)
    $('#crop-button').on('click', function () {
        // CEK APAKAH CROPPER SUDAH ADA
        if (!cropper) {
            alert("Silahkan tunggu hingga gambar muncul sempurna di modal.");
            return;
        }

// Ambil hasil crop
        const canvas = cropper.getCroppedCanvas({ 
            width: 800, 
            height: 450 
        });

if (canvas) {
            const base64data = canvas.toDataURL('image/jpeg', 0.8);
            
            // Update Preview (di halaman edit)
            $('#image-preview-result').attr('src', base64data).show();
            $('#placeholder-preview').hide();
            
            // Masukkan base64 ke hidden input
            $('#cropped_image').val(base64data);
            
            // Tutup modal
            $modal.modal('hide');
        } else {
            console.error("Gagal mendapatkan canvas");
        }
    });
});
</script>