haendler-kuenstler/Händler+Künstler.html aktualisiert

haendler-kuenstler/Händler+Künstler.html

@@ -1,15 +1,20 @@
 <div id="sny-dealer-wrapper">
+
     <div class="sny-info-header">
         <div class="schedule-box">
            <strong>📅 Zeitplan:</strong><br>
-           Aufbau: Freitag, 7:00 – 16:00 Uhr<br>
+           Aufbau: Freitag, 9:00 – 17:00 Uhr<br>
-           Veranstaltung: Samstag, 09:00 – 19:00 Uhr<br>
+           Veranstaltung: Samstag, 09:00 – 20:00 Uhr<br>
-           Abbau direkt am Samstag
+           Abbau: Samstag 20-22.30 Uhr 
         </div>
-        <p class="small-note" style="margin-top:10px;">Hinweis: Im Standpreis sind 2 Ausstellerausweise enthalten.</p>
+        <p class="small-note" style="margin-top:10px;">Hinweis: Im Standpreis sind 2 Ausstellerausweise enthalten. | Hinweis zu Tischgrößen: ca. 100 x 60 cm</p>
     </div>
+
     <div class="sny-form-card">
-        <form id="dealer-form" action="/send_to_docuseal.php" method="POST" oninput="calculateTotal()">
+        <form id="dealer-form" action="/process_form.php" method="POST" oninput="calculateTotal()">
+
+            <input type="hidden" name="template_id" value="2">
+
             <h3 class="form-section-title">1. Ausstellerdaten</h3>
             <div class="form-grid">
                 <div class="field-group full-width">
@@ -41,7 +46,9 @@
                     <input type="text" name="description" placeholder="Was verkaufst du? (Merch, Prints...)" required="">
                 </div>
             </div>
-            <h3 class="form-section-title">2. Standfläche &amp; Ausstattung</h3>
+
+            <h3 class="form-section-title">2. Standfläche, Ausstattung &amp; Strom</h3>
+            
             <div class="type-selection">
                 <label class="radio-card">
                     <input type="radio" name="stand_type" value="Händler" checked="" onclick="calculateTotal()">
@@ -56,10 +63,11 @@
                     <div>
                         <strong>Künstler / Artist</strong>
                         <div class="price-tag">30 € / Meter</div>
-                        <div class="sub-price">Tischmiete: +5 € / Stk.</div>
+                        <div class="sub-price">Tischmiete: +5 € / Stk. | Strom inkl. (20 €)</div>
                     </div>
                 </label>
             </div>
+
             <div class="calc-area">
                 <div class="calc-row">
                     <label>Benötigte Standmeter:</label>
@@ -68,6 +76,7 @@
                         <span>m</span>
                     </div>
                 </div>
+
                 <div class="calc-row">
                     <label>Miet-Tische gewünscht?</label>
                     <div class="input-with-unit">
@@ -75,15 +84,28 @@
                         <span>Stk</span>
                     </div>
                 </div>
+
+                <div class="calc-row" id="power-row">
+                    <label>Strompauschale:</label>
+                    <div class="power-options">
+                        <label><input type="radio" name="power_option" value="kein" checked="" onclick="calculateTotal()"> Keine</label>
+                        <label><input type="radio" name="power_option" value="klein" onclick="calculateTotal()"> Klein (25 €)</label>
+                        <label><input type="radio" name="power_option" value="gross" onclick="calculateTotal()"> Groß (50 €)</label>
                     </div>
+                </div>
+                <div id="artist-power-info" style="font-size: 0.85em; color: #666; font-style: italic; margin-top: -5px; margin-bottom: 15px; display: none;">
+                    * Für Künstler ist die Strompauschale fix in Höhe von 20,00 € enthalten.
+                </div>
+            </div>
+
             <div class="total-box">
                 <span style="font-size: 0.9em;">Voraussichtliche Standgebühr:</span>
                 <div id="total-display">135,00 €</div>
                 
                 <input type="hidden" name="total_price" id="hidden_total_price" value="135,00 €">
-                <input type="hidden" name="csrf_token" value="&lt;?php echo $_SESSION['csrf_token']; ?&gt;">
             </div>
             <div style="clear:both; height:1px;"></div>
+
             <h3 class="form-section-title">3. Bestätigung</h3>
             <div class="legal-check">
                 <input type="text" name="website_hp" style="display:none !important" tabindex="-1" autocomplete="off">
@@ -97,13 +119,16 @@
                     <span>Ich willige in die Datenspeicherung zur Vertragsabwicklung ein.</span>
                 </label>
             </div>
+
             <div class="sny-action-area">
                 <p class="hint-text" style="margin-bottom:15px;">Mit Klick auf den Button wird der Vertrag erstellt.</p>
                 <button type="submit" id="submit-btn" class="btn-print" style="width:100%; max-width:400px;">✍️ Weiter zur Unterschrift</button>
             </div>
+
         </form>
     </div>
 </div>
+
 <style>
     #sny-dealer-wrapper { font-family: 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto; color: #333; }
     .sny-info-header { text-align: center; margin-bottom: 30px; }
@@ -121,7 +146,6 @@
     .field-group label { font-size: 0.85em; font-weight: bold; margin-bottom: 4px; }
     .field-group input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; background: #fafafa; }
 
-    /* Radio Cards */
     .type-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
     .radio-card { 
         display: flex; align-items: center; gap: 10px; 
@@ -133,10 +157,10 @@
     .price-tag { font-size: 1.2em; font-weight: bold; color: #333; }
     .sub-price { font-size: 0.85em; color: #666; }
 
-    /* Calculation */
     .calc-area { background: #f9f9f9; padding: 20px; border-radius: 8px; }
     .calc-row { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
     .input-with-unit input { padding: 8px; text-align: center; font-size: 1.1em; border: 1px solid #ccc; border-radius: 4px; }
+    .power-options { display: flex; gap: 15px; font-size: 0.95em; }
     
     .total-box { 
         background: #8a2be2; color: white; padding: 15px; margin-top: 20px; 
@@ -144,12 +168,10 @@
         font-size: 1.5em; font-weight: bold; border-radius: 8px;
     }
 
-    /* Checkboxes */
     .legal-check { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
     .checkbox-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.95em; }
     .checkbox-option input { margin-top: 4px; }
 
-    /* Action Area */
     .sny-action-area { text-align: center; margin-top: 40px; padding: 20px; background: #f0f0f5; border-radius: 8px; }
     .btn-print { background: #e94598; color: white; border: none; padding: 15px 30px; font-size: 1.2em; border-radius: 50px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
     .btn-print:hover { background: #d63384; }
@@ -160,28 +182,56 @@
 function calculateTotal() {
     let pricePerMeter = 85;
     let pricePerTable = 10;
+    let powerCost = 0;
+
     const typeInputs = document.getElementsByName('stand_type');
     let selectedType = "Händler";
+    
     for(let i = 0; i < typeInputs.length; i++){
         if(typeInputs[i].checked){
             selectedType = typeInputs[i].value;
         }
     }
+
+    const powerRow = document.getElementById('power-row');
+    const artistInfo = document.getElementById('artist-power-info');
+
     if (selectedType === "Künstler") {
         pricePerMeter = 30;
         pricePerTable = 5;
+        powerCost = 20; 
+        
+        powerRow.style.display = "none";
+        artistInfo.style.display = "block";
+    } else {
+        powerRow.style.display = "flex";
+        artistInfo.style.display = "none";
+
+        const powerInputs = document.getElementsByName('power_option');
+        for(let j = 0; j < powerInputs.length; j++){
+            if(powerInputs[j].checked){
+                if(powerInputs[j].value === "klein") powerCost = 25;
+                if(powerInputs[j].value === "gross") powerCost = 50;
             }
+        }
+    }
+
     let meters = parseFloat(document.getElementById('meters').value) || 0;
     let tables = parseFloat(document.getElementById('tables').value) || 0;
-    let total = (meters * pricePerMeter) + (tables * pricePerTable);
+
+    let total = (meters * pricePerMeter) + (tables * pricePerTable) + powerCost;
+    
     let totalString = total.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
+
     document.getElementById('total-display').innerText = totalString;
     document.getElementById('hidden_total_price').value = totalString;
 }
+
 document.getElementById('dealer-form').onsubmit = function() {
     const btn = document.getElementById('submit-btn');
     btn.disabled = true;
     btn.innerHTML = "⌛ Verarbeite...";
 };
+
 window.onload = calculateTotal;
 </script>