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

{% block title %}Dettagli 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-eye"></i> Dettagli 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_edit', {'DECClass': decode.DECClass, 'DECKey': decode.DECKey, 'DECMacchinaId': decode.DECMacchinaId}) }}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit"></i> Modifica
                        </a>
                        <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal">
                            <i class="fas fa-trash"></i> Elimina
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-bordered">
                                <tr>
                                    <th width="30%">Classe</th>
                                    <td>
                                        <span class="badge badge-primary">{{ decode.DECClass }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Chiave</th>
                                    <td><strong>{{ decode.DECKey }}</strong></td>
                                </tr>
                                <tr>
                                    <th>Nome</th>
                                    <td>{{ decode.DecName }}</td>
                                </tr>
                                <tr>
                                    <th>Tipo</th>
                                    <td>
                                        <span class="badge badge-info">{{ decode.DECType }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Descrizione</th>
                                    <td>{{ decode.DECDescription ?: '<em class="text-muted">Nessuna descrizione</em>' | raw }}</td>
                                </tr>
                                <tr>
                                    <th>Stato</th>
                                    <td>
                                        {% if decode.DECActive %}
                                            <span class="badge badge-success">Attivo</span>
                                        {% else %}
                                            <span class="badge badge-danger">Disattivo</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Ordine</th>
                                    <td>
                                        <span class="badge badge-secondary">{{ decode.DECOrder }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>ID Macchina</th>
                                    <td>
                                        <span class="badge badge-info">{{ decode.DECMacchinaId }}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            {% if decode.DECImmagine %}
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Immagine</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        <img src="{{ decode.DECImmagine }}" alt="Immagine decode" class="img-fluid" style="max-width: 100%;">
                                    </div>
                                </div>
                            {% else %}
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    Nessuna immagine associata
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">
                                        <i class="fas fa-code"></i> Valore JSON
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <pre class="bg-light p-3" style="border-radius: 5px;"><code id="jsonCode">{{ decode.DECValue }}</code></pre>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="formatJSON()">
                                        <i class="fas fa-indent"></i> Formatta JSON
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyJSON()">
                                        <i class="fas fa-copy"></i> Copia
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if decode.CreationDate or decode.ModifyDate %}
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">
                                            <i class="fas fa-history"></i> Informazioni di Sistema
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-sm">
                                            {% if decode.CreationDate %}
                                                <tr>
                                                    <th width="20%">Creato il</th>
                                                    <td>{{ decode.CreationDate|date('d/m/Y H:i:s') }}</td>
                                                    <th width="20%">Creato da</th>
                                                    <td>ID: {{ decode.CreatorId }}</td>
                                                </tr>
                                            {% endif %}
                                            {% if decode.ModifyDate %}
                                                <tr>
                                                    <th>Modificato il</th>
                                                    <td>{{ decode.ModifyDate|date('d/m/Y H:i:s') }}</td>
                                                    <th>Modificato da</th>
                                                    <td>ID: {{ decode.ModifyId }}</td>
                                                </tr>
                                            {% endif %}
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal di conferma eliminazione -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conferma Eliminazione</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Sei sicuro di voler eliminare il decode <strong>{{ decode.DECKey }}</strong>?
                <br><small class="text-muted">Questa azione non può essere annullata.</small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annulla</button>
                <form method="post" action="{{ path('decode_delete', {'DECClass': decode.DECClass, 'DECKey': decode.DECKey, 'DECMacchinaId': decode.DECMacchinaId}) }}" style="display: inline;">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ decode.DECClass ~ decode.DECKey ~ decode.DECMacchinaId) }}">
                    <button type="submit" class="btn btn-danger">Elimina</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function formatJSON() {
    const codeElement = document.getElementById('jsonCode');
    try {
        const jsonObject = JSON.parse(codeElement.textContent);
        codeElement.textContent = JSON.stringify(jsonObject, null, 2);
    } catch(e) {
        alert('JSON non valido, impossibile formattare');
    }
}

function copyJSON() {
    const codeElement = document.getElementById('jsonCode');
    navigator.clipboard.writeText(codeElement.textContent).then(function() {
        // Feedback visivo
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i> Copiato!';
        button.classList.add('btn-success');
        button.classList.remove('btn-outline-secondary');
        
        setTimeout(function() {
            button.innerHTML = originalText;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-secondary');
        }, 2000);
    });
}
</script>
{% endblock %}