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

{% block title %}Modifica Decode - {{ decode.DECKey }}{% 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-edit"></i> Modifica Decode - {{ decode.DECKey }}
                    </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>
                        <a href="{{ path('decode_show', {'DECClass': decode.DECClass, 'DECKey': decode.DECKey, 'DECMacchinaId': decode.DECMacchinaId}) }}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i> Visualizza
                        </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) }}
                        
                        {% if decode.DECImmagine %}
                            <div class="mb-2">
                                <strong>Immagine attuale:</strong><br>
                                <img src="{{ decode.DECImmagine }}" alt="Immagine attuale" class="img-thumbnail" style="max-width: 200px;">
                            </div>
                        {% endif %}
                        
                        {{ form_widget(form.imageFile) }}
                        {{ form_errors(form.imageFile) }}
                        {{ form_help(form.imageFile) }}
                        <small class="form-text text-muted">
                            Lascia vuoto per mantenere l'immagine attuale.
                        </small>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Salva Modifiche
                        </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('newImagePreview');
                    if (!preview) {
                        preview = document.createElement('div');
                        preview.id = 'newImagePreview';
                        preview.innerHTML = '<strong>Nuova immagine:</strong><br><img class="img-thumbnail" style="max-width: 200px;">';
                        imageInput.parentNode.appendChild(preview);
                    }
                    preview.querySelector('img').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    }
});
</script>
{% endblock %}