add produk buket views (admin n owner) including crud modal
This commit is contained in:
parent
8e76ec0f8b
commit
ddac3b0e7e
|
|
@ -0,0 +1,58 @@
|
||||||
|
@extends('layouts.admin')
|
||||||
|
|
||||||
|
@section('title', 'Produk Buket')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<section class="section">
|
||||||
|
<div class="buttons pb-3">
|
||||||
|
<a href="#" class="btn-add-custom" data-bs-toggle="modal" data-bs-target="#create">
|
||||||
|
<i class="bi bi-plus fs-5"></i>
|
||||||
|
Tambah Produk Buket
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table table-striped" id="table1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>No.</th>
|
||||||
|
<th>Nama Buket</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="#show">
|
||||||
|
<i class="bi bi-eye"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn icon btn-warning btn-action" data-bs-toggle="modal"
|
||||||
|
data-bs-target="#edit">
|
||||||
|
<i class="bi bi-pencil"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn icon btn-danger btn-action" data-bs-toggle="modal"
|
||||||
|
data-bs-target="#delete">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
@include('admin.produk-buket.partials.modal-create')
|
||||||
|
@include('admin.produk-buket.partials.modal-show')
|
||||||
|
@include('admin.produk-buket.partials.modal-edit')
|
||||||
|
@include('admin.produk-buket.partials.modal-delete')
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<div class="modal fade" id="create" 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 Produk Buket</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-6">
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Nama Buket</label>
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
style="font-size: 13px;"placeholder="Masukkan Nama Buket">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Harga Buket</label>
|
||||||
|
<input type="number" class="form-control"
|
||||||
|
style="font-size: 13px;"placeholder="Masukkan Harga Buket">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Request Khusus</label>
|
||||||
|
<input type="text" class="form-control"style="font-size: 13px;"
|
||||||
|
placeholder="Masukkan Opsi Custom">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Deskripsi Buket</label>
|
||||||
|
<textarea class="form-control" rows="4" style="font-size: 13px;" placeholder="Masukkan Deskripsi Buket"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Upload Foto Buket</label>
|
||||||
|
<div class="upload-area p-4 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 Buket</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: 135px; 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="delete" 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 Produk Buket</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 buket?</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,116 @@
|
||||||
|
<div class="modal fade" id="edit" 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 Produk Buket</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-6">
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Nama Buket</label>
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
style="font-size: 13px;"placeholder="Masukkan Nama Buket">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Harga Buket</label>
|
||||||
|
<input type="number" class="form-control"
|
||||||
|
style="font-size: 13px;"placeholder="Masukkan Harga Buket">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Request Khusus</label>
|
||||||
|
<input type="text" class="form-control"style="font-size: 13px;"
|
||||||
|
placeholder="Masukkan Opsi Custom">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Deskripsi Buket</label>
|
||||||
|
<textarea class="form-control" rows="4" style="font-size: 13px;" placeholder="Masukkan Deskripsi Buket"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label">Upload Foto Buket</label>
|
||||||
|
<div class="upload-area p-4 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 Buket</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: 135px; 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,98 @@
|
||||||
|
<div class="modal fade" id="show" 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 Produk Bunga</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 Buket</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-8 col-sm-9">
|
||||||
|
<span class="detail-buket-value">Buket Lily Premium</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="col-4 col-sm-3">
|
||||||
|
<span class="detail-buket-label">Harga Buket</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 Buket</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-8 col-sm-9">
|
||||||
|
<p class="detail-buket-value text-justify mb-0" style="line-height: 1.6;">
|
||||||
|
Buket Lily Premium menghadirkan keanggunan dalam setiap helai kelopak lily segar
|
||||||
|
berwarna putih atau pink, dipadukan dengan daun hijau dan sentuhan baby’s breath
|
||||||
|
yang lembut. Rangkaian ini dibalut kertas premium bernuansa nude atau ivory
|
||||||
|
dengan pita satin senada.
|
||||||
|
</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