From 4af592b05f269d9a6bbbe2fbbdcf2387b173c796 Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Fri, 26 Dec 2025 21:33:50 +0700
Subject: [PATCH] add paket foto views (paket foto n additional) including crud
 modal

---
 .../views/admin/paket-foto/index.blade.php    | 119 ++++++++++++++++
 .../modal-create-additional.blade.php         |  39 ++++++
 .../partials/modal-create-foto.blade.php      | 128 ++++++++++++++++++
 .../modal-delete-additional.blade.php         |  53 ++++++++
 .../partials/modal-delete-foto.blade.php      |  53 ++++++++
 .../partials/modal-edit-additional.blade.php  |  38 ++++++
 .../partials/modal-edit-foto.blade.php        | 127 +++++++++++++++++
 .../partials/modal-show-foto.blade.php        |  97 +++++++++++++
 8 files changed, 654 insertions(+)
 create mode 100644 resources/views/admin/paket-foto/index.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-create-additional.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-create-foto.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-delete-additional.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-delete-foto.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-edit-additional.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-edit-foto.blade.php
 create mode 100644 resources/views/admin/paket-foto/partials/modal-show-foto.blade.php

diff --git a/resources/views/admin/paket-foto/index.blade.php b/resources/views/admin/paket-foto/index.blade.php
new file mode 100644
index 0000000..054bc74
--- /dev/null
+++ b/resources/views/admin/paket-foto/index.blade.php
@@ -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
diff --git a/resources/views/admin/paket-foto/partials/modal-create-additional.blade.php b/resources/views/admin/paket-foto/partials/modal-create-additional.blade.php
new file mode 100644
index 0000000..0de65af
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-create-additional.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-create-foto.blade.php b/resources/views/admin/paket-foto/partials/modal-create-foto.blade.php
new file mode 100644
index 0000000..f2986de
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-create-foto.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-delete-additional.blade.php b/resources/views/admin/paket-foto/partials/modal-delete-additional.blade.php
new file mode 100644
index 0000000..619ba00
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-delete-additional.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-delete-foto.blade.php b/resources/views/admin/paket-foto/partials/modal-delete-foto.blade.php
new file mode 100644
index 0000000..b881445
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-delete-foto.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-edit-additional.blade.php b/resources/views/admin/paket-foto/partials/modal-edit-additional.blade.php
new file mode 100644
index 0000000..3f4d4f0
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-edit-additional.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-edit-foto.blade.php b/resources/views/admin/paket-foto/partials/modal-edit-foto.blade.php
new file mode 100644
index 0000000..6779dae
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-edit-foto.blade.php
@@ -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>
diff --git a/resources/views/admin/paket-foto/partials/modal-show-foto.blade.php b/resources/views/admin/paket-foto/partials/modal-show-foto.blade.php
new file mode 100644
index 0000000..50385ac
--- /dev/null
+++ b/resources/views/admin/paket-foto/partials/modal-show-foto.blade.php
@@ -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>