From 43e6573bf24f185e870a8ded442e801a3306908b Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Tue, 5 Nov 2024 19:00:11 +0700
Subject: [PATCH] Add multiple file upload functionality

Enhanced the document upload section to support multiple file uploads for "Dokumen Jaminan". Added "Add More" and "Remove" buttons for dynamically managing file inputs. Implemented helper functions to handle dynamic input fields and update the UI accordingly.
---
 .../debitur/components/dokumen.blade.php      | 139 +++++++++++-------
 1 file changed, 89 insertions(+), 50 deletions(-)

diff --git a/resources/views/debitur/components/dokumen.blade.php b/resources/views/debitur/components/dokumen.blade.php
index 23acee9..be5c1c0 100644
--- a/resources/views/debitur/components/dokumen.blade.php
+++ b/resources/views/debitur/components/dokumen.blade.php
@@ -158,7 +158,14 @@
                         Dokumen Jaminan
                     </label>
                     <div class="flex flex-wrap items-baseline w-full">
-                        <input class="file-input" type="file" name="dokumen_jaminan[]" value="">
+                        <div class="flex flex-col w-full gap-2"  id="file-container-{{$n}}">
+                            <div class="flex items-center gap-2">
+                                <input class="file-input" type="file" name="dokumen_jaminan[{{ $n }}][]" multiple>
+                                <button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput({{ $n }})">Add More</button>
+                            </div>
+                            <div id="additional-files-{{ $n }}"></div>
+                        </div>
+
                         @if(isset($detail->dokumen_jaminan))
                             <a href="{{ route('debitur.jaminan.download',['id'=>$debitur->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
                                 <i class="ki-filled ki-cloud-download"></i></a>
@@ -444,7 +451,7 @@
     <script>
         function getLegalitasJaminan() {
             var legalitasJaminan = document.getElementById("jenis_jaminan_id").value;
-            var documentId = "{{ $document->id ?? "0" }}"; // Assuming you have access to the debitur ID in your Blade template
+            var documentId = "{{ $document->id ?? "0" }}";
             var debiturId = "{{ $debitur->id }}";
             var url = `/basic-data/jenis-jaminan/legalitas/${documentId}/${legalitasJaminan}`;
             fetch(url, {
@@ -465,63 +472,95 @@
                     doctainer.innerHTML = "";
                     data.forEach((item, index) => {
                         doctainer.innerHTML += `
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56 font-bold">
-                        ${index + 1}. ${item.name}
-                    </label>
-                    <input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
-                    ${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
-                </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56 font-bold">
+                                ${index + 1}. ${item.name}
+                            </label>
+                            <input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
+                            ${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
+                        </div>
 
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Nama Dokumen
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
-                    </div>
-                </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Nama Dokumen
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
+                            </div>
+                        </div>
 
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Dokumen Jaminan
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <input class="file-input" type="file" name="dokumen_jaminan[]" value="">
-                        ${item.dokumen_jaminan ? `
-                            <a href="/debitur/${debiturId}/jaminan/download?dokumen=${item.id}" class="badge badge-sm badge-outline mt-2">
-                                ${item.dokumen_jaminan.split('/').pop()}
-                                <i class="ki-filled ki-cloud-download"></i>
-                            </a>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Dokumen Jaminan
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full" id="file-container-${index}">
+                                ${item.dokumen_jaminan ? renderExistingFiles(item.dokumen_jaminan, debiturId, item.id) : ''}
+                                <div class="flex items-center gap-2 my-2 w-full">
+                                    <input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
+                                    <button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput(${index})">Add File</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        ${item.custom_field ? `
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56 capitalize">
+                                ${item.custom_field.replace(/_/g, " ")}
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                ${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
+                            </div>
+                        </div>
                         ` : ''}
-                    </div>
-                </div>
 
-                ${item.custom_field ? `
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56 capitalize">
-                        ${item.custom_field.replace(/_/g, " ")}
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        ${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
-                    </div>
-                </div>
-                ` : ''}
-
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label class="form-label max-w-56">
-                        Keterangan
-                    </label>
-                    <div class="flex flex-wrap items-baseline w-full">
-                        <textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
-                    </div>
-                </div>
-            `;
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Keterangan
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
+                            </div>
+                        </div>
+                    `;
                     });
                 })
                 .catch(error => console.error('Error:', error));
         }
 
+        function addFileInput(index) {
+            const container = document.getElementById(`file-container-${index}`);
+            const newInput = document.createElement('div');
+            newInput.className = 'flex items-center gap-2 mb-2 w-full';
+            newInput.innerHTML = `
+                <input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
+                <button type="button" class="btn btn-danger w-[100px] text-center" onclick="removeFileInput(this)">Remove</button>
+            `;
+            container.appendChild(newInput);
+        }
+
+        function removeFileInput(button) {
+            button.closest('.flex.items-center.gap-2.mb-2').remove();
+        }
+
+        function renderExistingFiles(dokumenJaminan, debiturId, itemId) {
+            if (typeof dokumenJaminan === 'string') {
+                return `
+                    <a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}" class="badge badge-sm badge-outline mt-2">
+                        ${dokumenJaminan.split('/').pop()}
+                        <i class="ki-filled ki-cloud-download"></i>
+                    </a>
+                `;
+            } else if (Array.isArray(dokumenJaminan)) {
+                return dokumenJaminan.map(file => `
+                    <a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}&file=${file}" class="badge badge-sm badge-outline mt-2 mr-2">
+                        ${file.split('/').pop()}
+                        <i class="ki-filled ki-cloud-download"></i>
+                    </a>
+                `).join('');
+            }
+            return '';
+        }
+
         function getCustomFieldInput(type, fieldName, value) {
             value = value ? JSON.parse(value)[fieldName] || '' : '';
             switch (type) {