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">
                        <h3 class="card-title text-bold">Daftar Galeri Foto</h3>
                        <div class="card-tools">
                            <button class="btn btn-sm btn-primary px-3" data-toggle="modal" data-target="#modalFoto">
                                <i class="fas fa-plus mr-1"></i> Tambah
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light text-muted">
                                    <tr>
                                        <th class="px-4 py-3" width="120">PREVIEW</th>
                                        <th>JUDUL FOTO</th>
                                        <th class="text-center">HEADLINE</th>
                                        <th class="text-center">AKSI</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($list as $p): ?>
                                    <tr>
                                        <td class="px-4">
                                            <img src="<?= base_url('uploads/foto/'.$p['photo_path']) ?>" class="rounded shadow-sm" width="80" height="60" style="object-fit: cover;">
                                        </td>
                                        <td class="align-middle font-weight-bold"><?= $p['title'] ?></td>
                                        <td class="text-center align-middle"><?= $p['is_headline'] ? '<span class="badge badge-success">Ya</span>' : '<span class="badge badge-light border">-</span>' ?></td>
                                        <td class="text-center align-middle">
                                            <button class="btn btn-outline-primary btn-sm btn-edit-foto" 
                                                data-id="<?= $p['id'] ?>" 
                                                data-title="<?= $p['title'] ?>" 
                                                data-headline="<?= $p['is_headline'] ?>">
                                                <i class="fas fa-pencil-alt"></i>
                                            </button>
                                            <a href="<?= base_url('admin/foto/delete/'.$p['id']) ?>" class="btn btn-outline-danger btn-sm btn-delete">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="modalFoto" 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="formFoto" action="<?= base_url('admin/foto/store') ?>" method="post">
                <?=csrf_field()?>
                <input type="hidden" name="id" id="foto_id">
                <input type="hidden" name="cropped_image" id="cropped_image">
                
                <div class="modal-header bg-light border-bottom-0">
                    <h5 class="font-weight-bold modal-title">Upload Foto</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body px-4">
                    <div class="form-group mb-3">
                        <label class="small font-weight-bold text-muted text-uppercase">Judul Foto</label>
                        <input type="text" name="title" id="foto_title" class="form-control" placeholder="Masukkan judul foto..." required>
                    </div>
                    <div class="form-group mb-3">
                        <label class="small font-weight-bold text-muted text-uppercase">Pilih Foto</label>
                        <input type="file" id="inputImage" class="form-control-file border p-1 rounded w-100" accept="image/*">
                    </div>

<div id="cropContainer" class="mb-3 d-none">
                        <label class="small font-weight-bold text-danger text-uppercase">Sesuaikan Gambar (4:3)</label>
                        <div class="img-container border rounded bg-dark" style="max-height: 400px; overflow: hidden;">
                            <img id="image-to-crop" style="max-width: 100%; display: block;">
                        </div>
                    </div>

<div class="custom-control custom-switch mt-3">
                        <input type="checkbox" class="custom-control-input" name="is_headline" value="1" id="foto_headline">
                        <label class="custom-control-label small font-weight-bold" for="foto_headline">Tampilkan di Headline (Banner)</label>
                    </div>
                </div>
                <div class="modal-footer border-top-0 px-4 pb-4">
                    <button type="button" class="btn btn-light border px-4" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4 font-weight-bold shadow-sm rounded-pill">Simpan & Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>

// 1. Inisialisasi Cropper saat Gambar Dipilih
    $(inputImage).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;
                $(cropContainer).removeClass('d-none');
                
                // Hancurkan cropper lama jika ada
                if (cropper) {
                    cropper.destroy();
                }

// Inisialisasi Cropper
                cropper = new Cropper(imageToCrop, {
                    aspectRatio: 4 / 3,
                    viewMode: 1,
                    autoCropArea: 1,
                    // Setiap kali area crop berubah, update input hidden
                    crop() {
                        const canvas = cropper.getCroppedCanvas({ width: 800, height: 600 });
                        croppedInput.value = canvas.toDataURL('image/jpeg', 0.8);
                    }
                });
            };
            reader.readAsDataURL(files[0]);
        }
    });

// 2. Klik Edit
    $('.btn-edit-foto').on('click', function() {
        const id = $(this).data('id');
        const title = $(this).data('title');
        const headline = $(this).data('headline');

$('#foto_id').val(id);
        $('#foto_title').val(title);
        $('#foto_headline').prop('checked', headline == 1);
        
        $('.modal-title').text('Edit Foto');
        $('#formFoto').attr('action', '<?= base_url('admin/foto/update') ?>/' + id);
        $(cropContainer).addClass('d-none');
        
        $modal.modal('show'); // BS4 Style
    });

// 3. Reset Modal saat ditutup
    $modal.on('hidden.bs.modal', function() {
        $('#formFoto')[0].reset();
        $(cropContainer).addClass('d-none');
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
        $('.modal-title').text('Upload Foto');
        $('#formFoto').attr('action', '<?= base_url('admin/foto/store') ?>');
        $('#cropped_image').val('');
        inputImage.value = "";
    });
});
</script>