add paket foto views (paket foto n additional) including crud modal
This commit is contained in:
parent
f130fcd2a5
commit
4af592b05f
|
|
@ -0,0 +1,119 @@
|
|||
@extends('layouts.admin')
|
||||
|
||||
@section('title', 'Paket Foto')
|
||||
|
||||
@section('content')
|
||||
<section class="section">
|
||||
<div class="d-flex gap-2 pb-3">
|
||||
|
||||
<a href="#" class="btn-add-foto" data-bs-toggle="modal" data-bs-target="#createFoto">
|
||||
<i class="bi bi-plus fs-5"></i>
|
||||
Tambah Paket Foto
|
||||
</a>
|
||||
|
||||
<a href="#" class="btn-add-additional" data-bs-toggle="modal" data-bs-target="#createAdd">
|
||||
<i class="bi bi-plus fs-5"></i>
|
||||
Tambah Additional
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="nav nav-pills nav-fill mb-4" id="v-pills-tab" role="tablist" aria-orientation="horizontal">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home"
|
||||
role="tab" aria-controls="v-pills-home" aria-selected="true">
|
||||
Paket Foto
|
||||
</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile"
|
||||
role="tab" aria-controls="v-pills-profile" aria-selected="false">
|
||||
Additional
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="v-pills-tabContent">
|
||||
|
||||
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
|
||||
aria-labelledby="v-pills-home-tab">
|
||||
<table class="table table-striped" id="table1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Nama Paket</th>
|
||||
<th>Deskripsi</th>
|
||||
<th>Harga</th>
|
||||
<th>Foto</th>
|
||||
<th class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Graiden</td>
|
||||
<td>vehicula.aliquet@semconsequat.co.uk</td>
|
||||
<td>076 4820 8838</td>
|
||||
<td>Offenburg</td>
|
||||
<td>Offenburg</td>
|
||||
<td class="col-auto text-center">
|
||||
<a href="#" class="btn icon btn-primary btn-action" data-bs-toggle="modal"
|
||||
data-bs-target="#foto">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a href="#" class="btn icon btn-warning btn-action" data-bs-toggle="modal"
|
||||
data-bs-target="#editFoto">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="#" class="btn icon btn-danger btn-action" data-bs-toggle="modal"
|
||||
data-bs-target="#deleteFoto">
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
|
||||
<table class="table table-striped" id="riwayat-foto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Nama Additional</th>
|
||||
<th>Harga</th>
|
||||
<th class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Graiden</td>
|
||||
<td>vehicula.aliquet@semconsequat.co.uk</td>
|
||||
<td>076 4820 8838</td>
|
||||
<td class="col-auto text-center">
|
||||
<a href="#" class="btn icon btn-warning btn-action" data-bs-toggle="modal"
|
||||
data-bs-target="#editAdd">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<a href="#" class="btn icon btn-danger btn-action" data-bs-toggle="modal"
|
||||
data-bs-target="#deleteAdd">
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@include('admin.paket-foto.partials.modal-create-foto')
|
||||
@include('admin.paket-foto.partials.modal-show-foto')
|
||||
@include('admin.paket-foto.partials.modal-edit-foto')
|
||||
@include('admin.paket-foto.partials.modal-delete-foto')
|
||||
@include('admin.paket-foto.partials.modal-create-additional')
|
||||
@include('admin.paket-foto.partials.modal-edit-additional')
|
||||
@include('admin.paket-foto.partials.modal-delete-additional')
|
||||
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="modal fade" id="createAdd" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Tambah Additional</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">
|
||||
|
||||
<div class="col-12">
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Nama Additional</label>
|
||||
<input type="text" class="form-control"style="font-size: 13px;"
|
||||
placeholder="Masukkan Nama Additional">
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Harga Additional</label>
|
||||
<input type="number" class="form-control"style="font-size: 13px;"
|
||||
placeholder="Masukkan Harga Additional">
|
||||
</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>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<div class="modal fade" id="createFoto" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-md">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Tambah 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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<div class="modal fade" id="deleteAdd" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered ">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Hapus Additional</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">
|
||||
<p>Apakah anda yakin ingin menghapus nama aditional?</p>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-end border-top-0 pt-0">
|
||||
<button type="submit" class="btn btn-danger rounded-pill tolak px-3 py-2">
|
||||
Hapus
|
||||
</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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<div class="modal fade" id="deleteFoto" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered ">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Hapus 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">
|
||||
<p>Apakah anda yakin ingin menghapus nama paket?</p>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-end border-top-0 pt-0">
|
||||
<button type="submit" class="btn btn-danger rounded-pill tolak px-3 py-2">
|
||||
Hapus
|
||||
</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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div class="modal fade" id="editAdd" 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 Additional</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">
|
||||
|
||||
<div class="col-12">
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Nama Additional</label>
|
||||
<input type="text" class="form-control"style="font-size: 13px;"
|
||||
placeholder="Masukkan Nama Additional">
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Harga Additional</label>
|
||||
<input type="number" class="form-control"style="font-size: 13px;"
|
||||
placeholder="Masukkan Harga Additional">
|
||||
</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>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue