From ddac3b0e7e28b9eb596939a60e2a008216fd2e87 Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Fri, 26 Dec 2025 21:34:35 +0700
Subject: [PATCH] add produk buket views (admin n owner) including crud modal

---
 .../views/admin/produk-buket/index.blade.php  |  58 +++++++++
 .../partials/modal-create.blade.php           | 116 ++++++++++++++++++
 .../partials/modal-delete.blade.php           |  53 ++++++++
 .../partials/modal-edit.blade.php             | 116 ++++++++++++++++++
 .../partials/modal-show.blade.php             |  98 +++++++++++++++
 5 files changed, 441 insertions(+)
 create mode 100644 resources/views/admin/produk-buket/index.blade.php
 create mode 100644 resources/views/admin/produk-buket/partials/modal-create.blade.php
 create mode 100644 resources/views/admin/produk-buket/partials/modal-delete.blade.php
 create mode 100644 resources/views/admin/produk-buket/partials/modal-edit.blade.php
 create mode 100644 resources/views/admin/produk-buket/partials/modal-show.blade.php

diff --git a/resources/views/admin/produk-buket/index.blade.php b/resources/views/admin/produk-buket/index.blade.php
new file mode 100644
index 0000000..dc8a07e
--- /dev/null
+++ b/resources/views/admin/produk-buket/index.blade.php
@@ -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
diff --git a/resources/views/admin/produk-buket/partials/modal-create.blade.php b/resources/views/admin/produk-buket/partials/modal-create.blade.php
new file mode 100644
index 0000000..25d607f
--- /dev/null
+++ b/resources/views/admin/produk-buket/partials/modal-create.blade.php
@@ -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>
diff --git a/resources/views/admin/produk-buket/partials/modal-delete.blade.php b/resources/views/admin/produk-buket/partials/modal-delete.blade.php
new file mode 100644
index 0000000..0d39760
--- /dev/null
+++ b/resources/views/admin/produk-buket/partials/modal-delete.blade.php
@@ -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>
diff --git a/resources/views/admin/produk-buket/partials/modal-edit.blade.php b/resources/views/admin/produk-buket/partials/modal-edit.blade.php
new file mode 100644
index 0000000..65cd991
--- /dev/null
+++ b/resources/views/admin/produk-buket/partials/modal-edit.blade.php
@@ -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>
diff --git a/resources/views/admin/produk-buket/partials/modal-show.blade.php b/resources/views/admin/produk-buket/partials/modal-show.blade.php
new file mode 100644
index 0000000..2e1d599
--- /dev/null
+++ b/resources/views/admin/produk-buket/partials/modal-show.blade.php
@@ -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>