כרדע אני רוצה שאחרי שאני מעלה את הקבוץ הראשון בשדה הכחול

האפליקציה תשלום אילו אריכי חשבוניות הזנתי בטופס
ואת "סוג השירות
בגינו מבוקש החזר"
מה שרשום מתחת
ייעוץ פסיכיאטרי
ובצד אחד תרשום לי את כל מה שהאפליקציה מצאה כולל הצגת preview של מסמך ה pdf
ובצד ליד בעמודה נופסת את השדות החדשים שארצה להזין

index.html

@@ -42,23 +42,32 @@
                     </div>
                 </div>
             </div>
-
             <div class="col-md-6">
                 <div class="card mb-4">
                     <div class="card-header bg-info text-white">
-                        <h5>CSV Preview</h5>
+                        <h5>PDF Form Fields</h5>
                     </div>
                     <div class="card-body">
-                        <div class="table-responsive">
-                            <table class="table table-striped" id="csvPreview">
-                                <thead></thead>
-                                <tbody></tbody>
-                            </table>
+                        <div id="pdfFieldsPreview" class="mb-4">
+                            <h6>Existing Fields in PDF:</h6>
+                            <ul id="existingFieldsList" class="list-group"></ul>
+                        </div>
+                        <div id="pdfPreview" class="mb-4">
+                            <h6>PDF Preview:</h6>
+                            <iframe id="pdfViewer" style="width:100%; height:300px; border:1px solid #ddd;"></iframe>
+                        </div>
+                        <div id="newFieldsSection">
+                            <h6>Add New Fields:</h6>
+                            <div class="mb-3">
+                                <input type="text" id="newFieldName" class="form-control mb-2" placeholder="Field Name">
+                                <input type="text" id="newFieldValue" class="form-control mb-2" placeholder="Field Value">
+                                <button id="addFieldBtn" class="btn btn-sm btn-primary">Add Field</button>
+                            </div>
+                            <div id="newFieldsList" class="list-group"></div>
                         </div>
                     </div>
                 </div>
-
-                <div class="card">
+<div class="card">
                     <div class="card-header bg-warning text-dark">
                         <h5>Step 3: Generate PDFs</h5>
                     </div>

script.js

@@ -11,8 +11,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     let csvData = [];
     let headers = [];
-
-    // Upload template PDF
+    // Upload template PDF and extract fields
     uploadTemplateBtn.addEventListener('click', async () => {
         if (!templateUpload.files.length) {
             alert('Please select a PDF file first');
@@ -28,14 +27,71 @@ document.addEventListener('DOMContentLoaded', function() {
                 body: formData
             });
             const result = await response.json();
-            alert(result.message || 'Template uploaded successfully!');
+            
+            // Display PDF preview
+            const pdfViewer = document.getElementById('pdfViewer');
+            pdfViewer.src = URL.createObjectURL(templateUpload.files[0]);
+            
+            // Display form fields (mock data - in real app this would come from server)
+            const fieldsList = document.getElementById('existingFieldsList');
+            fieldsList.innerHTML = '';
+            
+            // Mock fields - replace with actual fields from your PDF
+            const mockFields = [
+                'מספר ח חשבונית',
+                'תאריך ח חשבונית',
+                'סוג השירות',
+                'ששם המ המטופל',
+                'סכום לה להחזר'
+            ];
+            
+            mockFields.forEach(field => {
+                const li = document.createElement('li');
+                li.className = 'list-group-item';
+                li.textContent = field;
+                fieldsList.appendChild(li);
+            });
+            
+            // Show the fields section
+            document.getElementById('pdfFieldsPreview').classList.remove('d-none');
+            document.getElementById('pdfPreview').classList.remove('d-none');
+            
         } catch (error) {
             console.error('Error uploading template:', error);
             alert('Failed to upload template');
         }
     });
 
-    // Upload and preview CSV
+    // Add new field functionality
+    document.getElementById('addFieldBtn').addEventListener('click', () => {
+        const nameInput = document.getElementById('newFieldName');
+        const valueInput = document.getElementById('newFieldValue');
+        const fieldsList = document.getElementById('newFieldsList');
+        
+        if (!nameInput.value.trim()) {
+            alert('Please enter a field name');
+            return;
+        }
+        
+        const fieldItem = document.createElement('div');
+        fieldItem.className = 'list-group-item d-flex justify-content-between align-items-center';
+        fieldItem.innerHTML = `
+            <span><strong>${nameInput.value}:</strong> ${valueInput.value}</span>
+            <button class="btn btn-sm btn-danger remove-field">×</button>
+        `;
+        
+        fieldsList.appendChild(fieldItem);
+        
+        // Clear inputs
+        nameInput.value = '';
+        valueInput.value = '';
+        
+        // Add remove functionality
+        fieldItem.querySelector('.remove-field').addEventListener('click', () => {
+            fieldItem.remove();
+        });
+    });
+// Upload and preview CSV
     uploadCsvBtn.addEventListener('click', async () => {
         if (!csvUpload.files.length) {
             alert('Please select a CSV file first');

style.css

@@ -16,12 +16,33 @@ body {
 .card-header {
     font-weight: 600;
 }
-
-#csvPreview {
+#csvPreview,
+#existingFieldsList,
+#newFieldsList {
     max-height: 300px;
     overflow-y: auto;
 }
 
+.list-group-item {
+    padding: 0.75rem 1.25rem;
+}
+
+.remove-field {
+    padding: 0 0.5rem;
+    line-height: 1;
+}
+
+#pdfPreview {
+    background: #f8f9fa;
+    border-radius: 0.25rem;
+    padding: 1rem;
+}
+
+#newFieldsSection {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #eee;
+}
 .btn {
     font-weight: 500;
     padding: 0.5rem 1.5rem;