{% extends 'base_public.html.twig' %}

{% block title %}Prüfungsformular{% endblock %}

{% block body %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">
                        <i class="fas fa-clipboard-check me-2"></i>{{ inspection.title }}
                    </h3>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h5>Prüfungsinformationen</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Anlage:</strong> {{ inspection.container.name }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Nächste Prüfung:</strong> {{ inspection.nextInspection|date('d.m.Y') }}</p>
                            </div>
                        </div>
                        {% if inspection.description %}
                            <p><strong>Beschreibung:</strong> {{ inspection.description }}</p>
                        {% endif %}
                    </div>

                    <hr>

                    {% if inspection.template %}
                        <h5 class="mb-3">Prüfungsformular</h5>
                        <form id="inspectionForm">
                            <div id="formFieldsContainer">
                                <!-- Hier werden die Felder dynamisch eingefügt -->
                            </div>
                            
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-save me-2"></i>Prüfung abschicken
                                </button>
                            </div>
                        </form>
                    {% else %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Für diese Prüfung wurde kein Formular-Template zugewiesen.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="successModalLabel">
                    <i class="fas fa-check-circle me-2"></i>Erfolgreich abgeschickt!
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                <h4 class="mt-3">Vielen Dank!</h4>
                <p class="mb-0">Ihr Prüfungsformular wurde erfolgreich übermittelt.</p>
                <p class="text-muted small mt-2">Sie können dieses Fenster jetzt schließen.</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success btn-lg" onclick="closeInspectionWindow()">
                    <i class="fas fa-times me-2"></i>Fenster schließen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="errorModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Fehler
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="errorMessage" class="mb-0">Es ist ein Fehler aufgetreten.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/admin/signature-pad.js') }}"></script>
<script>
    const token = '{{ token }}';
    const inspectionData = {{ inspection.template ? inspection.template.formFields|json_encode|raw : '[]' }};
    const apiUrl = '{{ path("api_public_inspection_submit", {"token": token}) }}';
    const successUrl = '{{ path("public_my_bookings") }}';
    let signaturePads = {};

    document.addEventListener('DOMContentLoaded', function() {
        renderForm();
        
        document.getElementById('inspectionForm')?.addEventListener('submit', function(e) {
            e.preventDefault();
            submitForm();
        });
    });

    function renderForm() {
        const container = document.getElementById('formFieldsContainer');
        if (!container || !inspectionData) return;

        let html = '';
        inspectionData.forEach((field, index) => {
            html += renderField(field, index);
        });

        container.innerHTML = html;
        
        // Initialize signature pads
        setTimeout(() => {
            initializeSignaturePads();
        }, 100);
    }

    function renderField(field, index) {
        const fieldId = `field_${index}`;
        
        switch(field.type) {
            case 'heading':
                return `<div class="field-builder-item"><div class="form-heading my-4"><h5>${escapeHtml(field.label || 'Überschrift')}</h5></div></div>`;
            
            case 'text':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <input type="text" class="form-control" id="${fieldId}" name="${fieldId}" 
                               ${field.required ? 'required' : ''}>
                    </div>
                `;
            
            case 'textarea':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <textarea class="form-control" id="${fieldId}" name="${fieldId}" rows="3" 
                                  ${field.required ? 'required' : ''}></textarea>
                    </div>
                `;
            
            case 'number':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <input type="number" class="form-control" id="${fieldId}" name="${fieldId}" 
                               ${field.required ? 'required' : ''}>
                    </div>
                `;
            
            case 'date':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <input type="date" class="form-control" id="${fieldId}" name="${fieldId}" 
                               ${field.required ? 'required' : ''}>
                    </div>
                `;
            
            case 'select':
                let optionsHtml = '';
                if (field.options && Array.isArray(field.options)) {
                    field.options.forEach(option => {
                        optionsHtml += `<option value="${escapeHtml(option)}">${escapeHtml(option)}</option>`;
                    });
                }
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <select class="form-control" id="${fieldId}" name="${fieldId}" 
                                ${field.required ? 'required' : ''}>
                            <option value="">Bitte wählen...</option>
                            ${optionsHtml}
                        </select>
                    </div>
                `;
            
            case 'file':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <input type="file" class="form-control" id="${fieldId}" name="${fieldId}" 
                               ${field.required ? 'required' : ''} multiple accept="image/*,.pdf,.doc,.docx">
                        <small class="text-muted">Mehrere Dateien möglich (JPG, PNG, PDF, DOC)</small>
                    </div>
                `;
            
            case 'checkbox':
                return `
                    <div class="field-builder-item mb-3 form-check">
                        <input class="form-check-input" type="checkbox" id="${fieldId}" name="${fieldId}">
                        <label class="form-check-label" for="${fieldId}">
                            ${escapeHtml(field.label)}
                        </label>
                    </div>
                `;
            
            case 'switch':
                return `
                    <div class="field-builder-item mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="${fieldId}" name="${fieldId}">
                            <label class="form-check-label" for="${fieldId}">
                                ${escapeHtml(field.label)}
                            </label>
                        </div>
                    </div>
                `;
            
            case 'signature':
                return `
                    <div class="field-builder-item mb-3">
                        <label class="form-label">${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                        <div class="signature-container">
                            <canvas id="signatureCanvas${index}" class="signature-canvas"></canvas>
                            <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="clearSignature${index}()">
                                <i class="fas fa-eraser me-1"></i>Löschen
                            </button>
                        </div>
                        <div class="form-check mt-3">
                            <input class="form-check-input" type="checkbox" id="confirmCheck${index}" required>
                            <label class="form-check-label" for="confirmCheck${index}">
                                Ich bestätige, dass alle Arbeiten korrekt ausgeführt wurden
                            </label>
                        </div>
                    </div>
                `;
            
            default:
                return '';
        }
    }

    function initializeSignaturePads() {
        const canvases = document.querySelectorAll('.signature-canvas');
        canvases.forEach((canvas, index) => {
            // Get the actual index from canvas ID (e.g., "signatureCanvas8" -> "8")
            const canvasId = canvas.id;
            const canvasIndex = canvasId.replace('signatureCanvas', '');
            
            // Use the actual canvas index for padKey
            const padKey = `pad${canvasIndex}`;
            
            console.log('Initializing signature pad:', { canvasId, canvasIndex, padKey });
            
            if (!signaturePads[padKey]) {
                signaturePads[padKey] = new SignaturePad(canvas);
                console.log('Signature pad created:', padKey);
                
                // Create global clear function for this specific canvas
                window[`clearSignature${canvasIndex}`] = function() {
                    if (signaturePads[padKey]) {
                        signaturePads[padKey].clear();
                    }
                };
            }
        });
    }

    // Global function for backward compatibility (will be overridden per canvas)
    window.clearSignature = function(index) {
        if (signaturePads[`pad${index}`]) {
            signaturePads[`pad${index}`].clear();
        }
    };

    async function submitForm() {
        const formDataObj = collectFormData();
        
        // Debug: Log collected data
        console.log('Collected form data:', formDataObj);
        
        // Create FormData for file upload
        const formData = new FormData();
        
        // Get actual files from file inputs
        const fileInputs = document.querySelectorAll('#formFieldsContainer input[type="file"]');
        fileInputs.forEach(input => {
            if (input.files && input.files.length > 0) {
                for (let i = 0; i < input.files.length; i++) {
                    formData.append(`${input.name}[]`, input.files[i]);
                }
            }
        });
        
        // Add form data
        formData.append('formData', JSON.stringify(formDataObj.formData));
        
        try {
            const response = await fetch(apiUrl, {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                showSuccessModal();
            } else {
                throw new Error(result.message || 'Fehler beim Abschicken');
            }
        } catch (error) {
            showErrorModal(error.message);
        }
    }

    function collectFormData() {
        const data = {};
        const filesData = {};
        
        // Get all field wrappers to iterate in template order
        const fieldWrappers = document.querySelectorAll('#formFieldsContainer .field-builder-item');
        let signatureCounter = 0;
        let fieldCounter = 0;
        
        // Iterate through fields in the order they appear in the template
        fieldWrappers.forEach((wrapper, index) => {
            // Check if this wrapper contains a signature canvas
            const isSignatureField = wrapper.querySelector('.signature-canvas');
            const isHeadingField = wrapper.classList.contains('heading-field') || wrapper.querySelector('.heading-field');
            
            // Skip headings
            if (isHeadingField) {
                return;
            }
            
            // Handle signature data separately
            if (isSignatureField) {
                const canvas = wrapper.querySelector('.signature-canvas');
                if (canvas) {
                    const canvasId = canvas.id;
                    const canvasIndex = canvasId.replace('signatureCanvas', '');
                    const padKey = `pad${canvasIndex}`;
                    
                    console.log('Checking signature:', { canvasId, canvasIndex, padKey, hasPad: !!signaturePads[padKey], isEmpty: signaturePads[padKey] ? signaturePads[padKey].isEmpty() : 'N/A' });
                    
                    if (signaturePads[padKey] && !signaturePads[padKey].isEmpty()) {
                        data[`signature_${signatureCounter}`] = signaturePads[padKey].getDataURL();
                        console.log('Signature data added:', `signature_${signatureCounter}`, 'from pad:', padKey);
                    } else {
                        console.log('No signature data available for:', padKey);
                    }
                    
                    // Check for confirmation checkbox
                    const confirmCheckbox = wrapper.querySelector('input[id^="confirmCheck"]');
                    if (confirmCheckbox && confirmCheckbox.checked) {
                        data[`confirmCheck${signatureCounter}`] = true;
                        console.log('Confirm checkbox added:', `confirmCheck${signatureCounter}`);
                    }
                    
                    signatureCounter++;
                }
            } else {
                // Regular fields - get the first input/textarea/select in this wrapper
                const field = wrapper.querySelector('input, textarea, select');
                if (field) {
                    // Skip non-input elements like buttons
                    if (field.type === 'button' || field.tagName === 'BUTTON') {
                        return;
                    }
                    
                    if (field.type === 'checkbox' || field.type === 'switch') {
                        data[`field_${fieldCounter}`] = field.checked;
                    } else if (field.type === 'file') {
                        // Collect file data
                        if (field.files && field.files.length > 0) {
                            const fileArray = [];
                            for (let i = 0; i < field.files.length; i++) {
                                fileArray.push({
                                    name: field.files[i].name,
                                    size: field.files[i].size,
                                    type: field.files[i].type
                                });
                            }
                            filesData[`field_${fieldCounter}`] = fileArray;
                            data[`field_${fieldCounter}`] = fileArray.map(f => f.name).join(', ');
                        }
                    } else if (field.type === 'text' || field.type === 'textarea' || field.type === 'number' || field.type === 'date') {
                        data[`field_${fieldCounter}`] = field.value;
                    } else if (field.tagName === 'SELECT') {
                        data[`field_${fieldCounter}`] = field.value;
                    }
                    
                    fieldCounter++;
                }
            }
        });

        return { formData: data, files: filesData };
    }

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    function showSuccessModal() {
        const modal = document.getElementById('successModal');
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        
        // Prevent page close/leave warning
        window.onbeforeunload = null;
        
        // Disable form submission button after success
        const submitBtn = document.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
        }
    }
    
    function showErrorModal(errorMessage) {
        const errorText = document.getElementById('errorMessage');
        if (errorText) {
            errorText.textContent = errorMessage;
        }
        const modal = document.getElementById('errorModal');
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
    }
    
    function closeModal() {
        // Remove the beforeunload warning
        window.onbeforeunload = null;
    }

    function closeInspectionWindow() {
        closeModal();

        const successModal = document.getElementById('successModal');
        if (successModal) {
            const instance = bootstrap.Modal.getInstance(successModal) || bootstrap.Modal.getOrCreateInstance(successModal);
            instance.hide();
        }

        // If embedded in an iframe, notify parent it can close/hide the frame.
        if (window.top !== window.self) {
            try {
                window.parent.postMessage({ type: 'inspection:close' }, '*');
            } catch (e) {
                // ignore postMessage issues
            }
        }

        // Works only when the window was script-opened.
        window.close();

        // Fallback when browser blocks window.close()
        setTimeout(() => {
            if (!window.closed) {
                window.location.href = '/ksbdueren/public/';
            }
        }, 150);
    }
    
    // Prevent accidental page closure during form filling
    window.addEventListener('beforeunload', function(e) {
        const submitBtn = document.querySelector('button[type="submit"]');
        if (!submitBtn || !submitBtn.disabled) {
            e.preventDefault();
            e.returnValue = 'Sie haben nicht gespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?';
            return e.returnValue;
        }
    });
</script>

<style>
.form-heading h5 {
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 0.5rem;
}

.signature-canvas {
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: crosshair;
    width: 100%;
    height: 300px;
    display: block;
    background-color: white;
    touch-action: none;
    user-select: none;
}

.signature-container {
    text-align: center;
}

/* Responsive canvas */
@media (max-width: 768px) {
    .signature-canvas {
        height: 250px;
    }
    
    .signature-container .btn {
        width: 100%;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .signature-canvas {
        height: 280px;
    }
}
</style>
{% endblock %}