TIF_NGANJUK_E41220418/resources/views/admin/paket-foto/partials/modal-show-foto.blade.php

98 lines
4.2 KiB
PHP

<div class="modal fade" id="foto" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Detail Nama Paket Foto</h5> <button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row gx-3">
<div class="col-12 col-md-4">
<div class="buket-img-wrapper text-align-center h-100"
onclick="showImage('{{ asset('img/invoice.jpg') }}')">
<img src="{{ asset('img/invoice.jpg') }}" class="proof-img">
</div>
</div>
<div class="col-12 col-md-8">
<div class="detail-buket ps-md-3 h-100">
<div class="row mb-2">
<div class="col-4 col-sm-3">
<span class="detail-buket-label">Nama Paket</span>
</div>
<div class="col-8 col-sm-9">
<span class="detail-buket-value">Single</span>
</div>
</div>
<div class="row mb-2">
<div class="col-4 col-sm-3">
<span class="detail-buket-label">Harga Paket</span>
</div>
<div class="col-8 col-sm-9">
<span class="detail-buket-value">Rp 130.000</span>
</div>
</div>
<div class="row mb-2">
<div class="col-4 col-sm-3">
<span class="detail-buket-label text-nowrap">Deskripsi Paket</span>
</div>
<div class="col-8 col-sm-9">
<p class="detail-buket-value text-justify mb-0" style="line-height: 1.6;">
Untuk 1 menit
10 menit sesi foto sepuasnya
5 menit sesi pilih foto (jika ada yang diprint)
</p>
</div>
</div>
<div class="row mb-2">
<div class="col-4 col-sm-3">
<span class="detail-buket-label text-nowrap">Request Khusus</span>
</div>
<div class="col-8 col-sm-9">
<span class="detail-buket-value">Wrapping, Tone Warna</span>
</div>
</div>
</div>
</div>
</div>
</div>
</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>