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

{% block title %}Nuovo Decode - ACQPRESET{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-plus"></i> Nuovo Decode - ACQPRESET
                    </h3>
                    <div class="card-tools">
                        <a href="{{ path('decode_index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Torna alla lista
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form_label(form.DECKey) }}
                                {{ form_widget(form.DECKey) }}
                                {{ form_errors(form.DECKey) }}
                                <small class="form-text text-muted">Deve essere univoco</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form_label(form.DecName) }}
                                {{ form_widget(form.DecName) }}
                                {{ form_errors(form.DecName) }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        {{ form_label(form.DECValue) }}
                        {{ form_widget(form.DECValue) }}
                        {{ form_errors(form.DECValue) }}
                        <small class="form-text text-muted">
                            Inserisci un JSON valido. Esempio: {"key": "value", "number": 123}
                        </small>
                    </div>

                    <div class="form-group">
                        {{ form_label(form.DECDescription) }}
                        {{ form_widget(form.DECDescription) }}
                        {{ form_errors(form.DECDescription) }}
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ form_label(form.DECActive) }}
                                {{ form_widget(form.DECActive) }}
                                {{ form_errors(form.DECActive) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ form_label(form.DECOrder) }}
                                {{ form_widget(form.DECOrder) }}
                                {{ form_errors(form.DECOrder) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {{ form_label(form.DECMacchinaId) }}
                                {{ form_widget(form.DECMacchinaId) }}
                                {{ form_errors(form.DECMacchinaId) }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        {{ form_label(form.imageFile) }}
                        {{ form_widget(form.imageFile) }}
                        {{ form_errors(form.imageFile) }}
                        {{ form_help(form.imageFile) }}
                    </div>

                    <!-- Campi nascosti per i valori fissi -->
                    <input type="hidden" name="DECClass" value="ACQPRESET">
                    <input type="hidden" name="DECType" value="S">

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Salva
                        </button>
                        <a href="{{ path('decode_index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Annulla
                        </a>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Validazione JSON in tempo reale
    const jsonField = document.querySelector('textarea[name="decode[DECValue]"]');
    if (jsonField) {
        jsonField.addEventListener('blur', function() {
            try {
                if (this.value.trim()) {
                    JSON.parse(this.value);
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                }
            } catch(e) {
                this.classList.remove('is-valid');
                this.classList.add('is-invalid');
            }
        });
    }

    // Preview immagine
    const imageInput = document.querySelector('input[name="decode[imageFile]"]');
    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Verifica dimensione
                if (file.size > 100 * 1024) {
                    alert('Il file deve essere massimo 100KB');
                    this.value = '';
                    return;
                }

                // Verifica tipo
                if (file.type !== 'image/png') {
                    alert('Solo file PNG sono supportati');
                    this.value = '';
                    return;
                }

                // Mostra preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = document.getElementById('imagePreview');
                    if (!preview) {
                        preview = document.createElement('img');
                        preview.id = 'imagePreview';
                        preview.className = 'img-thumbnail mt-2';
                        preview.style.maxWidth = '200px';
                        imageInput.parentNode.appendChild(preview);
                    }
                    preview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    }
});
</script>
{% endblock %}