<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>
           Veranstaltung: Samstag, 09:00 – 19:00 Uhr<br>
           Abbau direkt am Samstag
        </div>
        <p class="small-note" style="margin-top:10px;">Hinweis: Im Standpreis sind 2 Ausstellerausweise enthalten.</p>
    </div>
    <div class="sny-form-card">
        <form id="dealer-form" action="/send_to_docuseal.php" method="POST" oninput="calculateTotal()">
            <h3 class="form-section-title">1. Ausstellerdaten</h3>
            <div class="form-grid">
                <div class="field-group full-width">
                    <label>Name des Standes / Künstlers:</label>
                    <input type="text" name="shop_name" placeholder="Wie heißt dein Shop?" required="">
                </div>
                <div class="field-group">
                    <label>Ansprechpartner (Vor- &amp; Nachname):</label>
                    <input type="text" name="contact_name" placeholder="Max Mustermann" required="">
                </div>
                <div class="field-group">
                    <label>Steuernummer (Pflicht bei Händlern):</label>
                    <input type="text" name="tax_id" placeholder="123/456/789">
                </div>
                <div class="field-group full-width">
                    <label>Anschrift (Straße, PLZ, Ort):</label>
                    <input type="text" name="address" placeholder="Musterstraße 1, 12345 Stadt" required="">
                </div>
                <div class="field-group">
                    <label>E-Mail:</label>
                    <input type="email" name="email" placeholder="mail@example.com" required="">
                </div>
                <div class="field-group">
                    <label>Telefon (für Rückfragen):</label>
                    <input type="text" name="phone" placeholder="Mobilnummer">
                </div>
                <div class="field-group full-width">
                    <label>Kurze Beschreibung des Angebots:</label>
                    <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>
            <div class="type-selection">
                <label class="radio-card">
                    <input type="radio" name="stand_type" value="Händler" checked="" onclick="calculateTotal()">
                    <div>
                        <strong>Gewerblicher Händler</strong>
                        <div class="price-tag">85 € / Meter</div>
                        <div class="sub-price">Tischmiete: +10 € / Stk.</div>
                    </div>
                </label>
                <label class="radio-card">
                    <input type="radio" name="stand_type" value="Künstler" onclick="calculateTotal()">
                    <div>
                        <strong>Künstler / Artist</strong>
                        <div class="price-tag">30 € / Meter</div>
                        <div class="sub-price">Tischmiete: +5 € / Stk.</div>
                    </div>
                </label>
            </div>
            <div class="calc-area">
                <div class="calc-row">
                    <label>Benötigte Standmeter:</label>
                    <div class="input-with-unit">
                        <input type="number" name="meters" id="meters" value="3" min="1" style="width: 80px;" onchange="calculateTotal()">
                        <span>m</span>
                    </div>
                </div>
                <div class="calc-row">
                    <label>Miet-Tische gewünscht?</label>
                    <div class="input-with-unit">
                        <input type="number" name="tables" id="tables" value="0" min="0" style="width: 80px;" onchange="calculateTotal()">
                        <span>Stk</span>
                    </div>
                </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">

                <label class="checkbox-option">
                    <input type="checkbox" name="confirm_terms" required="">
                    <span>Ich erkenne die Teilnahmebedingungen und die Marktordnung des Sakura No Yume e.V an.</span>
                </label>
                <label class="checkbox-option">
                    <input type="checkbox" name="confirm_privacy" required="">
                    <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; }
    .schedule-box { background: #f0f0f5; padding: 15px; border-radius: 8px; border: 1px solid #ddd; display: inline-block; text-align: left; font-size: 0.95em; }
    .small-note { font-size: 0.85em; color: #666; font-style: italic; }

    .sny-form-card { background: #fff; padding: 40px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    
    .form-section-title { color: #8a2be2; border-bottom: 2px solid #eee; margin-top: 30px; margin-bottom: 15px; padding-bottom: 5px; }
    
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .full-width { grid-column: span 2; }
    
    .field-group { display: flex; flex-direction: column; }
    .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; 
        border: 2px solid #eee; padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s; 
    }
    .radio-card:hover { border-color: #e94598; background: #fff0f8; }
    .radio-card input:checked + div { color: #e94598; }
    
    .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; }
    
    .total-box { 
        background: #8a2be2; color: white; padding: 15px; margin-top: 20px; 
        display: flex; justify-content: space-between; align-items: center; 
        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; }
    .btn-print:disabled { background: #ccc; cursor: not-allowed; }
</style>

<script>
function calculateTotal() {
    let pricePerMeter = 85;
    let pricePerTable = 10;
    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;
        }
    }
    if (selectedType === "Künstler") {
        pricePerMeter = 30;
        pricePerTable = 5;
    }
    let meters = parseFloat(document.getElementById('meters').value) || 0;
    let tables = parseFloat(document.getElementById('tables').value) || 0;
    let total = (meters * pricePerMeter) + (tables * pricePerTable);
    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>