<?php
/**
 * Public Form View (Client-facing)
 *
 * @package Freelance_Studio
 */

if (!defined('ABSPATH')) {
    exit;
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <title><?php echo esc_html($form->name); ?> - <?php echo esc_html($business['business_name']); ?></title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
        .fs-public-form-container { max-width: 700px; margin: 40px auto; padding: 0 20px; }
        .fs-form-header { background: #fff; border-radius: 12px 12px 0 0; padding: 40px; border-bottom: 1px solid #e5e5e5; }
        .fs-form-header h1 { font-size: 28px; margin-bottom: 10px; color: #1a1a1a; }
        .fs-form-header p { color: #666; font-size: 16px; }
        .fs-form-body { background: #fff; padding: 40px; border-radius: 0 0 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .fs-form-field { margin-bottom: 28px; }
        .fs-form-field:last-child { margin-bottom: 0; }
        .fs-form-field label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }
        .fs-form-field .required { color: #e53935; margin-left: 3px; }
        .fs-form-field input[type="text"], .fs-form-field input[type="email"], .fs-form-field input[type="tel"], .fs-form-field input[type="url"], .fs-form-field input[type="number"], .fs-form-field input[type="date"], .fs-form-field input[type="time"], .fs-form-field textarea, .fs-form-field select { width: 100%; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
        .fs-form-field input:focus, .fs-form-field textarea:focus, .fs-form-field select:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); }
        .fs-form-field textarea { min-height: 120px; resize: vertical; }
        .fs-form-field .fs-help-text { font-size: 13px; color: #888; margin-top: 6px; }
        .fs-form-field-heading { margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid #eee; }
        .fs-form-field-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
        .fs-form-field-heading h2 { font-size: 20px; color: #1a1a1a; }
        .fs-form-field-paragraph { margin-bottom: 24px; color: #666; }
        .fs-form-field-divider { height: 1px; background: #e5e5e5; margin: 32px 0; }
        .fs-choice-options label { display: flex; align-items: center; padding: 12px 16px; margin-bottom: 8px; background: #f9f9f9; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
        .fs-choice-options label:hover { background: #f0f0f0; }
        .fs-choice-options input[type="radio"], .fs-choice-options input[type="checkbox"] { margin-right: 12px; width: 18px; height: 18px; accent-color: #4CAF50; }
        .fs-scale-options { display: flex; gap: 8px; flex-wrap: wrap; }
        .fs-scale-options label { flex: 1; min-width: 50px; text-align: center; padding: 12px; background: #f5f5f5; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
        .fs-scale-options label:hover { background: #e8f5e9; }
        .fs-scale-options input[type="radio"] { display: none; }
        .fs-scale-options input[type="radio"]:checked + span { background: #4CAF50; color: #fff; border-radius: 8px; display: block; padding: 12px; margin: -12px; }
        .fs-scale-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #888; }
        .fs-yes-no-options { display: flex; gap: 12px; }
        .fs-yes-no-options label { flex: 1; text-align: center; padding: 16px; background: #f5f5f5; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
        .fs-yes-no-options label:hover { background: #e0e0e0; }
        .fs-yes-no-options input[type="radio"] { display: none; }
        .fs-yes-no-options input[type="radio"]:checked + span { display: block; padding: 16px; margin: -16px; border-radius: 8px; }
        .fs-yes-no-options input[value="yes"]:checked + span { background: #4CAF50; color: #fff; }
        .fs-yes-no-options input[value="no"]:checked + span { background: #f44336; color: #fff; }
        .fs-file-download { display: flex; align-items: center; gap: 12px; padding: 16px; background: #e3f2fd; border-radius: 8px; }
        .fs-file-download .dashicons { font-size: 24px; color: #1976d2; }
        .fs-file-download a { color: #1976d2; font-weight: 600; text-decoration: none; }
        .fs-file-download a:hover { text-decoration: underline; }
        .fs-file-upload-area { border: 2px dashed #ccc; border-radius: 8px; padding: 32px; text-align: center; transition: all 0.2s; }
        .fs-file-upload-area:hover, .fs-file-upload-area.dragover { border-color: #4CAF50; background: #f1f8e9; }
        .fs-file-upload-area input[type="file"] { display: none; }
        .fs-file-upload-area label { cursor: pointer; color: #666; }
        .fs-file-upload-area label strong { color: #4CAF50; }
        .fs-uploaded-file { display: flex; align-items: center; gap: 8px; padding: 12px; background: #e8f5e9; border-radius: 8px; margin-top: 12px; }
        .fs-uploaded-file .remove { color: #f44336; cursor: pointer; margin-left: auto; }
        .fs-signature-pad { border: 2px solid #e0e0e0; border-radius: 8px; background: #fff; }
        .fs-signature-pad canvas { width: 100%; height: 150px; display: block; }
        .fs-signature-actions { display: flex; gap: 8px; margin-top: 8px; }
        .fs-signature-actions button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .fs-signature-actions .clear-btn { background: #f5f5f5; color: #666; }
        .fs-form-submit { margin-top: 32px; }
        .fs-form-submit button { width: 100%; padding: 18px; background: #4CAF50; color: #fff; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
        .fs-form-submit button:hover { background: #43a047; }
        .fs-form-submit button:disabled { background: #ccc; cursor: not-allowed; }
        .fs-form-success { text-align: center; padding: 60px 40px; }
        .fs-form-success .success-icon { width: 80px; height: 80px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
        .fs-form-success .success-icon svg { width: 40px; height: 40px; color: #4CAF50; }
        .fs-form-success h2 { font-size: 24px; margin-bottom: 12px; }
        .fs-form-success p { color: #666; }
        .fs-form-closed { text-align: center; padding: 60px 40px; }
        .fs-form-closed h2 { font-size: 24px; margin-bottom: 12px; color: #f44336; }
        .fs-form-error { background: #ffebee; border: 1px solid #ffcdd2; color: #c62828; padding: 16px; border-radius: 8px; margin-bottom: 24px; }
        .fs-business-footer { text-align: center; padding: 24px; color: #888; font-size: 14px; }
        .fs-business-footer a { color: #666; text-decoration: none; }
        @media (max-width: 600px) {
            .fs-public-form-container { margin: 20px auto; }
            .fs-form-header, .fs-form-body { padding: 24px; }
            .fs-scale-options label { min-width: 40px; padding: 10px 8px; }
        }
    </style>
</head>
<body>
    <div class="fs-public-form-container">
        <?php if ($submitted): ?>
            <div class="fs-form-body fs-form-success">
                <div class="success-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
                <h2><?php esc_html_e('Thank You!', 'freelance-studio'); ?></h2>
                <p><?php echo esc_html($form->settings['success_message'] ?? __('Your response has been submitted.', 'freelance-studio')); ?></p>
            </div>
        <?php elseif (!$accepts_responses): ?>
            <div class="fs-form-body fs-form-closed">
                <h2><?php esc_html_e('Form Closed', 'freelance-studio'); ?></h2>
                <p><?php esc_html_e('This form is no longer accepting responses.', 'freelance-studio'); ?></p>
            </div>
        <?php else: ?>
            <div class="fs-form-header">
                <h1><?php echo esc_html($form->name); ?></h1>
                <?php if ($form->description): ?>
                    <p><?php echo esc_html($form->description); ?></p>
                <?php endif; ?>
            </div>
            
            <div class="fs-form-body">
                <?php if (!empty($error)): ?>
                    <div class="fs-form-error"><?php echo esc_html($error); ?></div>
                <?php endif; ?>
                
                <form method="post" enctype="multipart/form-data" id="fs-public-form">
                    <?php wp_nonce_field('fs_submit_form_' . $form->id, 'fs_form_nonce'); ?>
                    <input type="hidden" name="form_id" value="<?php echo esc_attr($form->id); ?>">
                    <?php if (!empty($client_id)): ?>
                        <input type="hidden" name="client_id" value="<?php echo esc_attr($client_id); ?>">
                    <?php endif; ?>
                    <?php if (!empty($project_id)): ?>
                        <input type="hidden" name="project_id" value="<?php echo esc_attr($project_id); ?>">
                    <?php endif; ?>
                    
                    <?php foreach ($form->fields as $field): ?>
                        <?php
                        $field_id = 'field_' . $field['id'];
                        $field_name = 'fields[' . $field['id'] . ']';
                        $required = !empty($field['required']);
                        $conditional = $field['conditional_logic'] ?? null;
                        $conditional_data = '';
                        if (!empty($conditional['enabled']) && !empty($conditional['rules'])) {
                            $conditional_data = ' data-conditional="' . esc_attr(json_encode($conditional)) . '"';
                        }
                        ?>
                        
                        <?php if ($field['type'] === 'heading'): ?>
                            <div class="fs-form-field-heading"<?php echo  esc_html( $conditional_data ); ?>>
                                <h2><?php echo esc_html($field['label']); ?></h2>
                            </div>
                        
                        <?php elseif ($field['type'] === 'paragraph'): ?>
                            <div class="fs-form-field-paragraph"<?php echo  esc_html( $conditional_data ); ?>>
                                <?php echo nl2br(esc_html($field['content'] ?? '')); ?>
                            </div>
                        
                        <?php elseif ($field['type'] === 'divider'): ?>
                            <div class="fs-form-field-divider"<?php echo  esc_html( $conditional_data ); ?>></div>
                        
                        <?php elseif ($field['type'] === 'file_download'): ?>
                            <div class="fs-form-field"<?php echo  esc_html( $conditional_data ); ?>>
                                <div class="fs-file-download">
                                    <span class="dashicons dashicons-download"></span>
                                    <a href="<?php echo esc_url($field['file_url']); ?>" target="_blank" download>
                                        <?php echo esc_html($field['file_name'] ?: __('Download File', 'freelance-studio')); ?>
                                    </a>
                                </div>
                            </div>
                        
                        <?php else: ?>
                            <div class="fs-form-field" data-field-id="<?php echo esc_attr($field['id']); ?>"<?php echo  esc_attr( $conditional_data ); ?>>
                                <label for="<?php echo esc_attr($field_id); ?>">
                                    <?php echo esc_html($field['label']); ?>
                                    <?php if ($required): ?><span class="required">*</span><?php endif; ?>
                                </label>
                                
                                <?php if ($field['type'] === 'short_text'): ?>
                                    <input type="text" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? ''); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'long_text'): ?>
                                    <textarea id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? ''); ?>" <?php echo $required ? 'required' : ''; ?>></textarea>
                                
                                <?php elseif ($field['type'] === 'email'): ?>
                                    <input type="email" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? 'email@example.com'); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'phone'): ?>
                                    <input type="tel" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? ''); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'number'): ?>
                                    <input type="number" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? ''); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'url'): ?>
                                    <input type="url" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" placeholder="<?php echo esc_attr($field['placeholder'] ?? 'https://'); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'date'): ?>
                                    <input type="date" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'time'): ?>
                                    <input type="time" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" <?php echo $required ? 'required' : ''; ?>>
                                
                                <?php elseif ($field['type'] === 'single_choice'): ?>
                                    <div class="fs-choice-options">
                                        <?php foreach (($field['options'] ?? array()) as $i => $option): ?>
                                            <label>
                                                <input type="radio" name="<?php echo esc_attr($field_name); ?>" value="<?php echo esc_attr($option); ?>" <?php echo ($required && $i === 0) ? 'required' : ''; ?>>
                                                <?php echo esc_html($option); ?>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                
                                <?php elseif ($field['type'] === 'multiple_choice'): ?>
                                    <div class="fs-choice-options">
                                        <?php foreach (($field['options'] ?? array()) as $option): ?>
                                            <label>
                                                <input type="checkbox" name="<?php echo esc_attr($field_name); ?>[]" value="<?php echo esc_attr($option); ?>">
                                                <?php echo esc_html($option); ?>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                
                                <?php elseif ($field['type'] === 'dropdown'): ?>
                                    <select id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" <?php echo $required ? 'required' : ''; ?>>
                                        <option value=""><?php esc_html_e('Select an option...', 'freelance-studio'); ?></option>
                                        <?php foreach (($field['options'] ?? array()) as $option): ?>
                                            <option value="<?php echo esc_attr($option); ?>"><?php echo esc_html($option); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                
                                <?php elseif ($field['type'] === 'yes_no'): ?>
                                    <div class="fs-yes-no-options">
                                        <label><input type="radio" name="<?php echo esc_attr($field_name); ?>" value="yes" <?php echo $required ? 'required' : ''; ?>><span><?php esc_html_e('Yes', 'freelance-studio'); ?></span></label>
                                        <label><input type="radio" name="<?php echo esc_attr($field_name); ?>" value="no"><span><?php esc_html_e('No', 'freelance-studio'); ?></span></label>
                                    </div>
                                
                                <?php elseif ($field['type'] === 'scale'): ?>
                                    <?php $min = intval($field['min'] ?? 1); $max = intval($field['max'] ?? 10); ?>
                                    <div class="fs-scale-options">
                                        <?php for ($i = $min; $i <= $max; $i++): ?>
                                            <label><input type="radio" name="<?php echo esc_attr($field_name); ?>" value="<?php echo  esc_attr( $i ); ?>" <?php echo  esc_attr( ($required && $i === $min) ? 'required' : '' ); ?>><span><?php echo  esc_attr( $i ); ?></span></label>
                                        <?php endfor; ?>
                                    </div>
                                    <?php if (!empty($field['min_label']) || !empty($field['max_label'])): ?>
                                        <div class="fs-scale-labels">
                                            <span><?php echo esc_html($field['min_label'] ?? ''); ?></span>
                                            <span><?php echo esc_html($field['max_label'] ?? ''); ?></span>
                                        </div>
                                    <?php endif; ?>
                                
                                <?php elseif ($field['type'] === 'file_upload'): ?>
                                    <div class="fs-file-upload-area">
                                        <input type="file" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" accept="<?php echo esc_attr('.' . str_replace(',', ',.', $field['allowed_types'] ?? 'pdf,doc,docx,jpg,png')); ?>" <?php echo $required ? 'required' : ''; ?>>
                                        <label for="<?php echo esc_attr($field_id); ?>">
                                            <strong><?php esc_html_e('Click to upload', 'freelance-studio'); ?></strong> <?php esc_html_e('or drag and drop', 'freelance-studio'); ?>
                                            <?php /* translators: 1. allowed file types, 2. max file size in MB */ ?>
                                            <br><small><?php echo wp_kses_post( sprintf( __('Allowed: %1$s (max %2$dMB)', 'freelance-studio'), esc_html($field['allowed_types'] ?? 'pdf,doc,docx,jpg,png'), intval($field['max_size'] ?? 10))); ?></small>
                                        </label>
                                    </div>
                                
                                <?php elseif ($field['type'] === 'signature'): ?>
                                    <div class="fs-signature-pad">
                                        <canvas id="<?php echo esc_attr($field_id); ?>_canvas"></canvas>
                                        <input type="hidden" id="<?php echo esc_attr($field_id); ?>" name="<?php echo esc_attr($field_name); ?>" <?php echo $required ? 'required' : ''; ?>>
                                    </div>
                                    <div class="fs-signature-actions">
                                        <button type="button" class="clear-btn" onclick="clearSignature('<?php echo esc_attr($field_id); ?>')"><?php esc_html_e('Clear', 'freelance-studio'); ?></button>
                                    </div>
                                
                                <?php endif; ?>
                                
                                <?php if (!empty($field['help_text'])): ?>
                                    <div class="fs-help-text"><?php echo esc_html($field['help_text']); ?></div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                    
                    <div class="fs-form-submit">
                        <button type="submit"><?php echo esc_html($form->settings['submit_button_text'] ?? __('Submit', 'freelance-studio')); ?></button>
                    </div>
                </form>
            </div>
        <?php endif; ?>
        
        <div class="fs-business-footer">
            <a href="<?php echo esc_url($business['business_website'] ?: home_url()); ?>">
                <?php echo esc_html($business['business_name']); ?>
            </a>
        </div>
    </div>
    
    <script>
    // Signature pad functionality
    var signaturePads = {};
    document.querySelectorAll('.fs-signature-pad canvas').forEach(function(canvas) {
        var ctx = canvas.getContext('2d');
        var fieldId = canvas.id.replace('_canvas', '');
        var drawing = false;
        
        canvas.width = canvas.offsetWidth;
        canvas.height = 150;
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        
        signaturePads[fieldId] = { canvas: canvas, ctx: ctx };
        
        function getPos(e) {
            var rect = canvas.getBoundingClientRect();
            var x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
            var y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
            return {x: x, y: y};
        }
        
        canvas.addEventListener('mousedown', function(e) { drawing = true; ctx.beginPath(); var pos = getPos(e); ctx.moveTo(pos.x, pos.y); });
        canvas.addEventListener('mousemove', function(e) { if (!drawing) return; var pos = getPos(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); });
        canvas.addEventListener('mouseup', function() { drawing = false; document.getElementById(fieldId).value = canvas.toDataURL(); });
        canvas.addEventListener('mouseleave', function() { drawing = false; });
        
        canvas.addEventListener('touchstart', function(e) { e.preventDefault(); drawing = true; ctx.beginPath(); var pos = getPos(e); ctx.moveTo(pos.x, pos.y); });
        canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if (!drawing) return; var pos = getPos(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); });
        canvas.addEventListener('touchend', function() { drawing = false; document.getElementById(fieldId).value = canvas.toDataURL(); });
    });
    
    function clearSignature(fieldId) {
        var pad = signaturePads[fieldId];
        if (pad) {
            pad.ctx.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
            document.getElementById(fieldId).value = '';
        }
    }
    
    // File upload drag and drop
    document.querySelectorAll('.fs-file-upload-area').forEach(function(area) {
        area.addEventListener('dragover', function(e) { e.preventDefault(); area.classList.add('dragover'); });
        area.addEventListener('dragleave', function() { area.classList.remove('dragover'); });
        area.addEventListener('drop', function(e) {
            e.preventDefault();
            area.classList.remove('dragover');
            var input = area.querySelector('input[type="file"]');
            if (e.dataTransfer.files.length) {
                input.files = e.dataTransfer.files;
            }
        });
    });
    
    // Conditional logic
    function evaluateConditionalLogic() {
        document.querySelectorAll('[data-conditional]').forEach(function(el) {
            var conditional = JSON.parse(el.dataset.conditional);
            if (!conditional || !conditional.rules || !conditional.rules.length) return;
            
            var results = conditional.rules.map(function(rule) {
                return evaluateRule(rule);
            });
            
            var shouldShow;
            if (conditional.logic === 'any') {
                shouldShow = results.some(function(r) { return r; });
            } else {
                shouldShow = results.every(function(r) { return r; });
            }
            
            if (conditional.action === 'hide') {
                shouldShow = !shouldShow;
            }
            
            el.style.display = shouldShow ? '' : 'none';
            
            // Disable required fields when hidden
            var inputs = el.querySelectorAll('input, textarea, select');
            inputs.forEach(function(input) {
                if (!shouldShow) {
                    input.removeAttribute('required');
                    input.dataset.wasRequired = input.hasAttribute('required') ? '1' : '';
                } else if (input.dataset.wasRequired === '1') {
                    input.setAttribute('required', 'required');
                }
            });
        });
    }
    
    function evaluateRule(rule) {
        var fieldEl = document.querySelector('[data-field-id="' + rule.field_id + '"]');
        if (!fieldEl) return false;
        
        var value = getFieldValue(fieldEl, rule.field_id);
        var ruleValue = rule.value || '';
        
        switch (rule.operator) {
            case 'equals':
                return value.toLowerCase() === ruleValue.toLowerCase();
            case 'not_equals':
                return value.toLowerCase() !== ruleValue.toLowerCase();
            case 'contains':
                return value.toLowerCase().indexOf(ruleValue.toLowerCase()) !== -1;
            case 'not_contains':
                return value.toLowerCase().indexOf(ruleValue.toLowerCase()) === -1;
            case 'is_empty':
                return !value || value.trim() === '';
            case 'is_not_empty':
                return value && value.trim() !== '';
            default:
                return false;
        }
    }
    
    function getFieldValue(fieldEl, fieldId) {
        // Check for radio buttons or checkboxes
        var radios = fieldEl.querySelectorAll('input[type="radio"]:checked');
        if (radios.length) {
            return radios[0].value;
        }
        
        var checkboxes = fieldEl.querySelectorAll('input[type="checkbox"]:checked');
        if (checkboxes.length) {
            var values = [];
            checkboxes.forEach(function(cb) { values.push(cb.value); });
            return values.join(', ');
        }
        
        // Check for select
        var select = fieldEl.querySelector('select');
        if (select) {
            return select.value;
        }
        
        // Check for text input
        var input = fieldEl.querySelector('input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea');
        if (input) {
            return input.value;
        }
        
        return '';
    }
    
    // Run on page load and on any input change
    evaluateConditionalLogic();
    document.getElementById('fs-public-form').addEventListener('input', evaluateConditionalLogic);
    document.getElementById('fs-public-form').addEventListener('change', evaluateConditionalLogic);
    </script>
</body>
</html>
