{% if formSubmitted is not defined %}
    {% set formSubmitted = 0 %}
{% endif %}

<h4>
    {{ formObject.title }}
</h4>

{% if formObject.description != '' %}
    <p>
        {{ formObject.description }}
    </p>
{% endif %}

<div class="space"></div>
<form action="{{ path('content_form_complete_edit', { 'formCompletedId': formCompletedId } ) }}" method="POST"
      enctype="multipart/form-data">
    
    {% if formObject.survey and formSubmitted == 0 %}
        <div class="survey-section mb-4 p-4 border rounded bg-light" id="surveyForm">
            <h4 class="mb-3">Survey Information</h4>
            <p class="text-muted mb-3">
                <strong>Note:</strong> The information you provide below will not be associated with your form submission. 
                This data is collected separately for survey purposes only.
            </p>
            
            <div class="row mb-3">
                <div class="col-sm-12 col-lg-3 formLabel">
                    <label for="survey_name" class="formLabel">Name *</label>
                </div>
                <div class="col-sm-12 col-lg-9 formPrompt">
                    <input type="text" id="survey_name" name="survey_name" class="form-control" required>
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-sm-12 col-lg-3 formLabel">
                    <label for="survey_surname" class="formLabel">Surname *</label>
                </div>
                <div class="col-sm-12 col-lg-9 formPrompt">
                    <input type="text" id="survey_surname" name="survey_surname" class="form-control" required>
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-sm-12 col-lg-3 formLabel">
                    <label for="survey_email" class="formLabel">E-mail Address *</label>
                </div>
                <div class="col-sm-12 col-lg-9 formPrompt">
                    <input type="email" id="survey_email" name="survey_email" class="form-control" required>
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-sm-12 col-lg-3 formLabel">
                    <label for="survey_id_number" class="formLabel">ID Number *</label>
                </div>
                <div class="col-sm-12 col-lg-9 formPrompt">
                    <input type="text" id="survey_id_number" name="survey_id_number" class="form-control" required>
                </div>
            </div>
            
            <div class="row">
                <div class="d-grid justify-content-md-center">
                    <button type="button" id="submitSurvey" class="btn btn-secondary text-can-overflow">Continue to Form</button>
                </div>
            </div>
        </div>
        
        <div id="mainForm" style="display: none;">
    {% endif %}
    
    {% for formItem in formItems %}
        {% if formItem.widget_name == 'paragraph' or formItem.widget_name == 'heading' or formItem.widget_name == 'sub-heading' %}
            {% if formItem.widget_name == 'heading' %}
                <h4>{{ formItem.prompt|urldecode }}</h4>
            {% elseif formItem.widget_name == 'sub-heading' %}
                <h5>{{ formItem.prompt|urldecode }}</h5>
            {% else %}
                <p>{{ formItem.description|urldecode|nl2br }}</p>
            {% endif %}
        {% else %}
            <div class="row" {% if formItem.description != '' %} data-toggle="popover" data-content="{{ formItem.description|urldecode }}" title="{{ formItem.prompt|urldecode }}"{% endif %}>
                {% set firstCol = 3 %}
                {% set lgCol = 9 %}
                {% if formItem.date_col != '' %}
                    {% set firstCol = 6 %}
                    {% set lgCol = 6 %}
                {% endif %}
                <div class="col-sm-12 col-lg-{{ firstCol }} formLabel">
                    {% if formItem.date_col != '' %}
                        <table border="0" width="100%" cellpadding="2" cellspacing="0">
                            <tr>
                                <td width="25" nowrap valign="top">
                                    {{ formItem.date_col }}
                                </td>
                                <td width="25" nowrap valign="top">
                                    {{ formItem.time_col }}
                                </td>
                                <td valign="top">
                                    {{ formItem.prompt }}
                                </td>
                                <td width="25%" nowrap valign="top">
                                    {{ formItem.presenter_name }}
                                </td>
                            </tr>
                        </table>
                    {% else %}
                        <label class="formLabel" for="some_form_element_{{ formItem.id }}">{{ formItem.prompt|urldecode }}</label>
                    {% endif %}
                </div>
                <div class="col-sm-12 col-lg-{{ lgCol }} formPrompt">
                    {% if formItem.widget_id is defined %}
                        {{ form_widget(attribute(form, formItem.widget_id)) }}
                        {{ form_errors(attribute(form, formItem.widget_id)) }}
                    {% endif %}
                </div>
            </div>
            {% if formItem.additional_comments %}
                <p>&nbsp;</p>
                <div class="row">
                    <div class="col-sm-12 col-lg-3">
                    </div>
                    <div class="col-sm-12 col-lg-3">
                        Comments / Suggestions / Improvements
                    </div>
                    <div class="col-sm-12 col-lg-6 formPrompt">
                        {% if formItem.widget_id is defined %}
                            {{ form_widget(attribute(form, 'comment_' ~ formItem.widget_id)) }}
                            {{ form_errors(attribute(form, 'comment_' ~ formItem.widget_id)) }}
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            <hr />
            <p>&nbsp;</p>
        {% endif %}
    {% endfor %}

    <div class="form-group row">
        <div class="col-sm-12 col-lg-3 formLabel">
            {{ form_label(form.recaptcha) }}
        </div>
        <div class="col-sm-12 col-lg-9 formPrompt">
            {{ form_widget(form.recaptcha) }}
            <span class="formError">{{ form_errors(form.recaptcha) }}</span>
        </div>
    </div>

    <div class="row p-3">
        <div class="d-grid justify-content-md-center">
            <button type="submit" class="btn btn-primary text-can-overflow">Submit</button>
        </div>
    </div>

    {{ form_rest(form) }}

    {% if formObject.survey %}
        </div> <!-- Close mainForm div -->
    {% endif %}

</form>

<script language="Javascript">
    $(document).ready(function () {
        // Survey form functionality
        if ($('#surveyForm').length > 0) {
            // Initially hide the main form
            $('#mainForm').hide();
            
            // Handle survey form submission
            $('#submitSurvey').on('click', function() {
                var name = $('#survey_name').val().trim();
                var surname = $('#survey_surname').val().trim();
                var email = $('#survey_email').val().trim();
                var idNumber = $('#survey_id_number').val().trim();
                
                // Validate required fields
                if (!name || !surname || !email || !idNumber) {
                    alert('Please fill in all required fields (Name, Surname, E-mail Address, and ID Number).');
                    return;
                }
                
                // Validate email format
                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('Please enter a valid e-mail address.');
                    return;
                }
                
                // Hide survey form and show main form
                $('#surveyForm').fadeOut('slow');
                $('#mainForm').fadeIn('slow');
                
                // Store survey data in sessionStorage for potential use
                sessionStorage.setItem('survey_name', name);
                sessionStorage.setItem('survey_surname', surname);
                sessionStorage.setItem('survey_email', email);
            });
        }
        
        // Existing form functionality
        $(".datepicker").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true
        });
        $(".datetimepicker").datetimepicker({
            format: 'Y-m-d H:i',
            dateFormat: 'Y-m-d',
            timeFormat: 'HH:mm',
            changeMonth: true,
            changeYear: true,
            changeTime: true
        });
        $('.timepicker').timepicker();
    });
</script>