128 lines
5.8 KiB
PHP
128 lines
5.8 KiB
PHP
<div class="modal fade" id="editFoto" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Paket Foto</h5> <button type="button" class="btn-close"
|
|
data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
|
|
<form action="#" method="POST" enctype="multipart/form-data">
|
|
<div class="modal-body">
|
|
<div class="row gx-3">
|
|
|
|
<div class="col-12 col-md-7">
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Nama Paket</label>
|
|
<input type="text" class="form-control" style="font-size: 13px;"
|
|
placeholder="Masukkan Nama Paket">
|
|
</div>
|
|
|
|
<div class="row gx-1">
|
|
<div class="col-12 col-md-6">
|
|
<div class="mb-2">
|
|
<label class="form-label">Harga Paket</label>
|
|
<input type="number" class="form-control" style="font-size: 13px;"
|
|
placeholder="Harga Paket">
|
|
<p class="mb-0"><small class="text-muted mb-0">Dalam Rupiah</small>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<div class="mb-2">
|
|
<label class="form-label">Durasi</label>
|
|
<input type="number" class="form-control" style="font-size: 13px;"
|
|
placeholder="Durasi Paket">
|
|
<p class="mb-0"><small class="text-muted mb-0">Dalam Menit</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Deskripsi Paket</label>
|
|
<textarea class="form-control" rows="4" style="font-size: 13px;" placeholder="Masukkan Deskripsi Paket"></textarea>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-12 col-md-5">
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Upload Foto Paket</label>
|
|
<div class="upload-area p-2 text-center d-flex flex-column align-items-center justify-content-center"
|
|
onclick="document.getElementById('fileInput').click()">
|
|
|
|
<i class="bi bi-file-earmark-arrow-up fs-5 text-secondary mb-3"></i>
|
|
<span class="fw-semibold text-dark">Upload Foto Paket</span>
|
|
<small class="text-muted">Max. 2 MB</small>
|
|
|
|
<input type="file" id="fileInput" class="d-none" name="foto">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Preview Foto</label>
|
|
|
|
<div class="border rounded d-flex justify-content-center align-items-center position-relative"
|
|
style="height: 120px; background-color: #f8f9fa; overflow: hidden;">
|
|
|
|
<div id="placeholder-text" class="text-center text-muted">
|
|
<i class="bi bi-image fs-5 mb-2"></i>
|
|
<p class="mb-0 fw-medium" style="font-size: 0.65rem;">Gambarmu akan muncul di
|
|
sini</p>
|
|
</div>
|
|
|
|
<img id="img-preview" src="#" class="img-fluid w-100 h-100 d-none"
|
|
style="object-fit: cover; position: absolute; top: 0; left: 0;">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer justify-content-end border-top-0 pt-0">
|
|
<button type="submit" class="btn btn-primary rounded-pill terima px-3 py-2">
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Target elemen berdasarkan ID
|
|
const fileInput = document.getElementById('fileInput');
|
|
const imgPreview = document.getElementById('img-preview');
|
|
const placeholder = document.getElementById('placeholder-text');
|
|
|
|
fileInput.addEventListener('change', function(event) {
|
|
const file = event.target.files[0];
|
|
|
|
if (file) {
|
|
// Jika ada file, baca gambarnya
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
imgPreview.src = e.target.result; // Masukkan data gambar
|
|
|
|
// TUKAR TAMPILAN:
|
|
imgPreview.classList.remove('d-none'); // Munculkan gambar
|
|
placeholder.classList.add('d-none'); // Sembunyikan teks
|
|
}
|
|
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
// Jika user membatalkan upload (cancel), reset ke awal
|
|
imgPreview.src = "#";
|
|
imgPreview.classList.add('d-none');
|
|
placeholder.classList.remove('d-none');
|
|
}
|
|
});
|
|
</script>
|