@extends('layouts.modern')

@section('page-title', 'Create New ' . $dataType->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
        <li class="breadcrumb-item"><a href="{{ route('manage-data.index', $dataType->slug) }}">{{ $dataType->name }}</a></li>
        <li class="breadcrumb-item active">Create New</li>
    @else
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Types</a></li>
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.show', $dataType) }}">{{ $dataType->name }}</a></li>
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.data.index', $dataType) }}">Data Entries</a></li>
        <li class="breadcrumb-item active">Create New</li>
    @endif
@endsection

@section('action-buttons')
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        <a href="{{ route('manage-data.index', $dataType->slug) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i>
            Back to Data Entries
        </a>
    @else
        <a href="{{ route('data-management.data-types.data.index', $dataType) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i>
            Back to Data Entries
        </a>
    @endif
@endsection

@section('content')
    <!-- Data Type Info -->
    <div class="card mb-4">
        <div class="card-body py-3">
            <div class="d-flex align-items-center">
                @if($dataType->icon)
                    <i class="{{ $dataType->icon }} me-3" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                @endif
                <div>
                    <h5 class="mb-1">Create New {{ $dataType->name }}</h5>
                    <p class="mb-0" style="color: var(--text-muted);">
                        {{ $dataType->description ?: 'Fill out the form below to create a new data entry' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <form action="@if(isset($isManageDataRoute) && $isManageDataRoute){{ route('manage-data.store', $dataType->slug) }}@else{{ route('data-management.data-types.data.store', $dataType) }}@endif" 
          method="POST" enctype="multipart/form-data" id="dynamicForm">
        @csrf
        
        <div class="row">
            <!-- Dynamic Sections (8 columns) -->
            <div class="col-lg-8">
                <div class="row" id="sections-container">
                    @foreach($sections as $section)
                        <div class="{{ $section->width_class }} mb-4" id="section-{{ $section->id }}">
                            <div class="card h-100">
                                <div class="card-header">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h6 class="mb-0">
                                            @if($section->icon)
                                                <i class="{{ $section->icon }} me-2" style="color: var(--primary-color);"></i>
                                            @else
                                                <i class="fas fa-layer-group me-2" style="color: var(--primary-color);"></i>
                                            @endif
                                            {{ $section->name }}
                                        </h6>
                                        @if($section->collapsible)
                                            <button type="button" class="btn btn-sm btn-outline-secondary" 
                                                    data-bs-toggle="collapse" 
                                                    data-bs-target="#section-content-{{ $section->id }}"
                                                    aria-expanded="{{ $section->collapsed_by_default ? 'false' : 'true' }}">
                                                <i class="fas fa-chevron-down"></i>
                                            </button>
                                        @endif
                                    </div>
                                    @if($section->description)
                                        <small style="color: var(--text-muted);">{{ $section->description }}</small>
                                    @endif
                                </div>
                                <div class="card-body collapse {{ $section->collapsed_by_default ? '' : 'show' }}" 
                                     id="section-content-{{ $section->id }}">
                                    @if($section->fields->count() > 0)
                                        <div class="row">
                                            @foreach($section->fields as $field)
                                                <div class="{{ $field->width_class }} mb-3" id="field-wrapper-{{ $field->name }}">
                                                    @include('data-management.dynamic-forms.partials.form-field', ['field' => $field, 'value' => old($field->name, $field->default_value)])
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="text-center py-3">
                                            <i class="fas fa-info-circle fa-2x mb-2" style="color: var(--text-muted);"></i>
                                            <p style="color: var(--text-muted);">No fields configured for this section.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Form Actions -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-save me-2"></i>
                                    Create {{ $dataType->name }}
                                </button>
                                @if(isset($isManageDataRoute) && $isManageDataRoute)
                                    <a href="{{ route('manage-data.index', $dataType->slug) }}" class="btn btn-outline-secondary btn-lg">
                                        <i class="fas fa-times me-2"></i>
                                        Cancel
                                    </a>
                                @else
                                    <a href="{{ route('data-management.data-types.data.index', $dataType) }}" class="btn btn-outline-secondary btn-lg">
                                        <i class="fas fa-times me-2"></i>
                                        Cancel
                                    </a>
                                @endif
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-info" onclick="validateForm()">
                                    <i class="fas fa-check-circle me-2"></i>
                                    Validate Form
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar: Progress, Actions & Validation (4 columns) -->
            <div class="col-lg-4">
                <!-- Sections Overview -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-layer-group me-2"></i>
                            Sections Overview
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <small class="text-muted">{{ $sections->count() }} sections configured</small>
                        </div>
                        
                        @foreach($sections as $index => $section)
                            <div class="d-flex align-items-center justify-content-between py-2 border-bottom section-progress-item" 
                                 data-section-id="{{ $section->id }}">
                                <div class="d-flex align-items-center">
                                    @if($section->icon)
                                        <i class="{{ $section->icon }} me-2" style="color: var(--primary-color); font-size: 0.9rem;"></i>
                                    @else
                                        <i class="fas fa-layer-group me-2" style="color: var(--primary-color); font-size: 0.9rem;"></i>
                                    @endif
                                    <small class="fw-medium">{{ $section->name }}</small>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-light text-dark me-1" style="font-size: 0.7rem;">
                                        {{ $section->fields->count() }} fields
                                    </span>
                                    <i class="fas fa-check-circle text-success section-status-icon" 
                                       style="display: none; font-size: 0.8rem;"></i>
                                    <a href="#section-{{ $section->id }}" class="btn btn-outline-primary btn-sm py-0 px-1 ms-1" 
                                       style="font-size: 0.7rem;">
                                        <i class="fas fa-arrow-down"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Form Progress -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-tasks me-2"></i>
                            Form Progress
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <small>Completion</small>
                                <small><span id="progress-percentage">0</span>%</small>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                     id="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="border-end">
                                    <div class="fw-bold" style="color: var(--primary-color); font-size: 1.1rem;" id="completed-fields">0</div>
                                    <small style="color: var(--text-muted);">Completed</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border-end">
                                    <div class="fw-bold" style="color: var(--warning-color); font-size: 1.1rem;" id="required-fields">{{ $allFields->where('required', true)->count() }}</div>
                                    <small style="color: var(--text-muted);">Required</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="fw-bold" style="color: var(--text-muted); font-size: 1.1rem;" id="total-fields">{{ $allFields->count() }}</div>
                                <small style="color: var(--text-muted);">Total</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Field Validation Status -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Validation Status
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="validation-status">
                            <div class="text-center py-3">
                                <i class="fas fa-info-circle fa-2x mb-2" style="color: var(--text-muted);"></i>
                                <p style="color: var(--text-muted);" class="mb-0">Start filling the form to see validation status</p>
                            </div>
                        </div>
                        
                        <!-- Validation Summary -->
                        <div id="validation-summary" style="display: none;">
                            <div class="row text-center mt-3">
                                <div class="col-6">
                                    <div class="border-end">
                                        <div class="fw-bold text-success" id="valid-fields-count">0</div>
                                        <small class="text-muted">Valid</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="fw-bold text-danger" id="invalid-fields-count">0</div>
                                    <small class="text-muted">Invalid</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-bolt me-2"></i>
                            Quick Actions
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="fillSampleData()">
                                <i class="fas fa-magic me-2"></i>
                                Fill Sample Data
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearForm()">
                                <i class="fas fa-eraser me-2"></i>
                                Clear Form
                            </button>
                            <hr class="my-2">
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="saveAsDraft()">
                                <i class="fas fa-file-alt me-2"></i>
                                Save as Draft
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
// Field configuration and conditional logic
let fieldConfig = {};
let conditionalLogic = [];

// Load field configuration on page load
document.addEventListener('DOMContentLoaded', function() {
    loadFieldConfiguration();
    bindFormEvents();
    updateFormProgress();
    
    // Initialize tooltips and popovers
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// Load field configuration from server
async function loadFieldConfiguration() {
    try {
        const response = await fetch(`{{ route('data-management.data-types.field-config', $dataType) }}`);
        const data = await response.json();
        
        fieldConfig = data.fields;
        conditionalLogic = data.conditions;
        
        // Apply initial conditional logic
        applyConditionalLogic();
        
    } catch (error) {
        console.error('Error loading field configuration:', error);
    }
}

// Bind form events
function bindFormEvents() {
    const form = document.getElementById('dynamicForm');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        // Progress tracking
        input.addEventListener('change', updateFormProgress);
        input.addEventListener('input', debounce(updateFormProgress, 300));
        
        // Conditional logic
        input.addEventListener('change', applyConditionalLogic);
        
        // Real-time validation
        input.addEventListener('blur', function() {
            validateField(this);
        });
    });
}

// Update form progress
function updateFormProgress() {
    const form = document.getElementById('dynamicForm');
    const visibleFields = Array.from(form.querySelectorAll('input, select, textarea'))
        .filter(field => {
            const wrapper = field.closest('[id^="field-wrapper-"]');
            return wrapper && wrapper.style.display !== 'none';
        });
    
    const completedFields = visibleFields.filter(field => {
        if (field.type === 'checkbox' || field.type === 'radio') {
            return field.checked;
        } else if (field.type === 'file') {
            return field.files && field.files.length > 0;
        } else {
            return field.value && field.value.trim() !== '';
        }
    });
    
    const requiredFields = visibleFields.filter(field => field.hasAttribute('required'));
    const completedRequiredFields = requiredFields.filter(field => {
        if (field.type === 'checkbox' || field.type === 'radio') {
            return field.checked;
        } else if (field.type === 'file') {
            return field.files && field.files.length > 0;
        } else {
            return field.value && field.value.trim() !== '';
        }
    });
    
    const percentage = visibleFields.length > 0 ? Math.round((completedFields.length / visibleFields.length) * 100) : 0;
    
    // Update overall progress
    document.getElementById('progress-percentage').textContent = percentage;
    document.getElementById('progress-bar').style.width = percentage + '%';
    document.getElementById('completed-fields').textContent = completedFields.length;
    
    // Update progress bar color and animation
    const progressBar = document.getElementById('progress-bar');
    progressBar.className = 'progress-bar progress-bar-striped';
    if (percentage < 30) {
        progressBar.classList.add('bg-danger');
    } else if (percentage < 70) {
        progressBar.classList.add('bg-warning');
    } else {
        progressBar.classList.add('bg-success');
    }
    
    if (percentage < 100) {
        progressBar.classList.add('progress-bar-animated');
    }
    
    // Update section progress
    updateSectionProgress();
    
    // Update validation status
    updateValidationStatus();
}

// Update individual section progress
function updateSectionProgress() {
    document.querySelectorAll('.section-progress-item').forEach(item => {
        const sectionId = item.getAttribute('data-section-id');
        const sectionElement = document.getElementById(`section-${sectionId}`);
        
        if (sectionElement) {
            const sectionFields = sectionElement.querySelectorAll('input, select, textarea');
            const completedSectionFields = Array.from(sectionFields).filter(field => {
                if (field.type === 'checkbox' || field.type === 'radio') {
                    return field.checked;
                } else if (field.type === 'file') {
                    return field.files && field.files.length > 0;
                } else {
                    return field.value && field.value.trim() !== '';
                }
            });
            
            const statusIcon = item.querySelector('.section-status-icon');
            if (completedSectionFields.length === sectionFields.length && sectionFields.length > 0) {
                statusIcon.style.display = 'inline-block';
                item.classList.add('section-complete');
            } else {
                statusIcon.style.display = 'none';
                item.classList.remove('section-complete');
            }
        }
    });
}

// Update validation status display
function updateValidationStatus() {
    const form = document.getElementById('dynamicForm');
    const fields = form.querySelectorAll('input, select, textarea');
    let validCount = 0;
    let invalidCount = 0;
    let errorMessages = [];
    
    fields.forEach(field => {
        const wrapper = field.closest('[id^="field-wrapper-"]');
        if (wrapper && wrapper.style.display !== 'none') {
            if (field.checkValidity()) {
                validCount++;
            } else {
                invalidCount++;
                if (field.validationMessage) {
                    errorMessages.push({
                        field: field.name,
                        label: field.closest('.mb-3')?.querySelector('label')?.textContent?.replace('*', '').trim() || field.name,
                        message: field.validationMessage
                    });
                }
            }
        }
    });
    
    const validationStatus = document.getElementById('validation-status');
    const validationSummary = document.getElementById('validation-summary');
    
    if (validCount + invalidCount > 0) {
        validationSummary.style.display = 'block';
        document.getElementById('valid-fields-count').textContent = validCount;
        document.getElementById('invalid-fields-count').textContent = invalidCount;
        
        if (invalidCount === 0) {
            validationStatus.innerHTML = `
                <div class="text-center py-3">
                    <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
                    <p class="text-success mb-0">All fields are valid!</p>
                </div>
            `;
        } else {
            validationStatus.innerHTML = `
                <div class="text-center py-2">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2 text-warning"></i>
                    <p class="text-warning mb-2">${invalidCount} field(s) need attention</p>
                </div>
                <div class="mt-2" style="max-height: 150px; overflow-y: auto;">
                    ${errorMessages.slice(0, 5).map(error => `
                        <small class="d-block text-danger mb-1">
                            <strong>${error.label}:</strong> ${error.message}
                        </small>
                    `).join('')}
                    ${errorMessages.length > 5 ? `<small class="text-muted">... and ${errorMessages.length - 5} more</small>` : ''}
                </div>
            `;
        }
    }
}

// Apply conditional logic
function applyConditionalLogic() {
    conditionalLogic.forEach(condition => {
        const dependentField = document.querySelector(`[name="${condition.dependent_field}"]`);
        const targetWrapper = document.getElementById(`field-wrapper-${condition.field}`);
        const targetField = document.querySelector(`[name="${condition.field}"]`);
        
        if (!dependentField || !targetWrapper || !targetField) return;
        
        const dependentValue = getFieldValue(dependentField);
        const conditionMet = evaluateCondition(dependentValue, condition.operator, condition.value);
        
        switch (condition.action) {
            case 'show':
                targetWrapper.style.display = conditionMet ? '' : 'none';
                break;
            case 'hide':
                targetWrapper.style.display = conditionMet ? 'none' : '';
                break;
            case 'require':
                targetField.required = conditionMet;
                updateFieldRequiredIndicator(targetField, conditionMet);
                break;
            case 'unrequire':
                targetField.required = !conditionMet;
                updateFieldRequiredIndicator(targetField, !conditionMet);
                break;
        }
    });
    
    // Update progress after applying conditional logic
    updateFormProgress();
}

// Get field value based on field type
function getFieldValue(field) {
    if (field.type === 'checkbox') {
        return field.checked ? field.value : '';
    } else if (field.type === 'radio') {
        const checked = document.querySelector(`[name="${field.name}"]:checked`);
        return checked ? checked.value : '';
    } else if (field.multiple) {
        return Array.from(field.selectedOptions).map(option => option.value);
    } else {
        return field.value;
    }
}

// Evaluate condition
function evaluateCondition(value, operator, conditionValue) {
    switch (operator) {
        case 'equals':
            return value == conditionValue;
        case 'not_equals':
            return value != conditionValue;
        case 'contains':
            return value.toString().toLowerCase().includes(conditionValue.toLowerCase());
        case 'not_contains':
            return !value.toString().toLowerCase().includes(conditionValue.toLowerCase());
        case 'greater_than':
            return parseFloat(value) > parseFloat(conditionValue);
        case 'less_than':
            return parseFloat(value) < parseFloat(conditionValue);
        case 'is_empty':
            return !value || value === '';
        case 'is_not_empty':
            return value && value !== '';
        default:
            return false;
    }
}

// Update field required indicator
function updateFieldRequiredIndicator(field, required) {
    const label = field.closest('.mb-3').querySelector('label');
    if (label) {
        const existingAsterisk = label.querySelector('.text-danger');
        if (required && !existingAsterisk) {
            label.innerHTML += ' <span class="text-danger">*</span>';
        } else if (!required && existingAsterisk) {
            existingAsterisk.remove();
        }
    }
}

// Validate individual field
function validateField(field) {
    const fieldName = field.name;
    const fieldConfig = window.fieldConfig && window.fieldConfig[fieldName];
    
    if (!fieldConfig) return;
    
    // Remove existing validation feedback
    field.classList.remove('is-valid', 'is-invalid');
    const existingFeedback = field.parentNode.querySelector('.invalid-feedback, .valid-feedback');
    if (existingFeedback) {
        existingFeedback.remove();
    }
    
    const value = getFieldValue(field);
    let isValid = true;
    let errorMessage = '';
    
    // Required validation
    if (field.required && (!value || value === '')) {
        isValid = false;
        errorMessage = 'This field is required.';
    }
    
    // Type-specific validation
    if (isValid && value) {
        switch (fieldConfig.type) {
            case 'email':
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(value)) {
                    isValid = false;
                    errorMessage = 'Please enter a valid email address.';
                }
                break;
            case 'url':
                try {
                    new URL(value);
                } catch {
                    isValid = false;
                    errorMessage = 'Please enter a valid URL.';
                }
                break;
            case 'number':
                if (isNaN(value) || !Number.isInteger(Number(value))) {
                    isValid = false;
                    errorMessage = 'Please enter a valid integer.';
                }
                break;
        }
    }
    
    // Apply validation styling
    field.classList.add(isValid ? 'is-valid' : 'is-invalid');
    
    // Add feedback message
    if (!isValid) {
        const feedback = document.createElement('div');
        feedback.className = 'invalid-feedback';
        feedback.textContent = errorMessage;
        field.parentNode.appendChild(feedback);
    }
    
    return isValid;
}

// Validate entire form
function validateForm() {
    const form = document.getElementById('dynamicForm');
    const fields = form.querySelectorAll('input, select, textarea');
    let isValid = true;
    let validationReport = [];
    
    fields.forEach(field => {
        const fieldValid = validateField(field);
        if (!fieldValid) {
            isValid = false;
            validationReport.push({
                field: field.name,
                label: field.closest('.mb-3').querySelector('label').textContent.replace('*', '').trim(),
                error: field.parentNode.querySelector('.invalid-feedback').textContent
            });
        }
    });
    
    // Update validation status
    updateValidationStatus(validationReport);
    
    if (isValid) {
        showAlert('success', 'Form validation passed! All fields are valid.');
    } else {
        showAlert('warning', `Form has ${validationReport.length} validation error(s). Please check the highlighted fields.`);
    }
    
    return isValid;
}

// Update validation status display
function updateValidationStatus(errors) {
    const container = document.getElementById('validation-status');
    
    if (errors.length === 0) {
        container.innerHTML = `
            <div class="text-center py-3">
                <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
                <p class="text-success mb-0">All validations passed!</p>
            </div>
        `;
    } else {
        let html = `
            <div class="mb-2">
                <small class="text-danger fw-bold">${errors.length} Validation Error(s)</small>
            </div>
        `;
        
        errors.forEach(error => {
            html += `
                <div class="mb-2 p-2 border border-danger rounded-2" style="background-color: #fef2f2;">
                    <small class="fw-bold text-danger">${error.label}</small>
                    <br><small class="text-danger">${error.error}</small>
                </div>
            `;
        });
        
        container.innerHTML = html;
    }
}

// Fill sample data
function fillSampleData() {
    const form = document.getElementById('dynamicForm');
    const fields = form.querySelectorAll('input, select, textarea');
    
    fields.forEach(field => {
        const fieldName = field.name;
        const config = fieldConfig[fieldName];
        
        if (!config) return;
        
        switch (config.type) {
            case 'text':
                field.value = 'Sample ' + config.label;
                break;
            case 'email':
                field.value = 'sample@example.com';
                break;
            case 'url':
                field.value = 'https://example.com';
                break;
            case 'tel':
                field.value = '+1234567890';
                break;
            case 'number':
                field.value = Math.floor(Math.random() * 100) + 1;
                break;
            case 'textarea':
                field.value = 'This is a sample text for ' + config.label;
                break;
            case 'select':
            case 'radio':
                if (config.options && config.options.length > 0) {
                    const randomOption = config.options[Math.floor(Math.random() * config.options.length)];
                    if (field.type === 'radio') {
                        const radioOption = document.querySelector(`[name="${fieldName}"][value="${randomOption}"]`);
                        if (radioOption) radioOption.checked = true;
                    } else {
                        field.value = randomOption;
                    }
                }
                break;
            case 'date':
                field.value = new Date().toISOString().split('T')[0];
                break;
            case 'datetime':
                field.value = new Date().toISOString().slice(0, 16);
                break;
            case 'time':
                field.value = new Date().toTimeString().slice(0, 5);
                break;
        }
    });
    
    // Apply conditional logic and update progress
    applyConditionalLogic();
    updateFormProgress();
    
    showAlert('info', 'Sample data has been filled in the form.');
}

// Clear form
function clearForm() {
    if (confirm('Are you sure you want to clear all form data?')) {
        const form = document.getElementById('dynamicForm');
        form.reset();
        
        // Clear validation states
        form.querySelectorAll('.is-valid, .is-invalid').forEach(field => {
            field.classList.remove('is-valid', 'is-invalid');
        });
        
        // Remove feedback messages
        form.querySelectorAll('.invalid-feedback, .valid-feedback').forEach(feedback => {
            feedback.remove();
        });
        
        // Apply conditional logic and update progress
        applyConditionalLogic();
        updateFormProgress();
        
        showAlert('info', 'Form has been cleared.');
    }
}

// Save as draft (placeholder function)
function saveAsDraft() {
    showAlert('info', 'Draft saving functionality will be implemented in a future update.');
}

// Show alert message
function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // Insert alert at the top of the form
    const form = document.getElementById('dynamicForm');
    form.insertAdjacentHTML('afterbegin', alertHtml);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        const alert = form.querySelector('.alert');
        if (alert) {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 5000);
}

// Utility function for debouncing
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Form submission handling
document.getElementById('dynamicForm').addEventListener('submit', function(e) {
    if (!validateForm()) {
        e.preventDefault();
        showAlert('danger', 'Please fix the validation errors before submitting the form.');
        return false;
    }
    
    // Show loading state
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Creating...';
    submitBtn.disabled = true;
    
    // Reset button after 10 seconds (in case of slow response)
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 10000);
});
</script>
@endpush

@push('styles')
<style>
/* Enhanced section layout styles */
#sections-container .card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #dee2e6);
}

#sections-container .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Section progress tracking */
.section-progress-item {
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 2px 0;
    padding: 8px 4px !important;
}

.section-progress-item:hover {
    background-color: var(--bs-light, #f8f9fa);
}

.section-progress-item.section-complete {
    background-color: rgba(25, 135, 84, 0.1);
    border-left: 3px solid var(--bs-success, #198754);
}

/* Enhanced progress bar */
.progress {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
    border-radius: 10px;
}

/* Section width responsive adjustments */
@media (max-width: 991.98px) {
    #sections-container .col-6,
    #sections-container .col-8,
    #sections-container .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Sidebar cards sticky positioning */
@media (min-width: 992px) {
    .col-lg-4 .card {
        position: sticky;
        top: 20px;
    }
}

/* Validation status styling */
#validation-status .text-success {
    color: var(--bs-success, #198754) !important;
}

#validation-status .text-warning {
    color: var(--bs-warning, #ffc107) !important;
}

#validation-status .text-danger {
    color: var(--bs-danger, #dc3545) !important;
}

/* Quick action buttons */
.card .btn-outline-primary:hover,
.card .btn-outline-secondary:hover,
.card .btn-outline-info:hover,
.card .btn-outline-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Form field enhancements */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Section header improvements */
.card-header h6 {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.card-header .btn-sm {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.card-header:hover .btn-sm {
    opacity: 1;
}

/* Smooth scrolling for section navigation */
html {
    scroll-behavior: smooth;
}

/* Badge styling improvements */
.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Loading states */
.btn.loading {
    position: relative;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form validation improvements */
.is-invalid {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.is-valid {
    border-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
</style>
@endpush