{% extends '@SonataAdmin/CRUD/base_show_field.html.twig' %}

{% block field %}
    {% if value %}
        {% set jsonReports = value|json_decode %}
        
        {% if jsonReports is iterable and jsonReports|length > 0 %}
            <div class="json-reports-container">
                <h4>MailChimp Batch Reports ({{ jsonReports|length }} reports)</h4>
                
                {% for index, report in jsonReports %}
                    <div class="json-report-item" style="margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; padding: 15px;">
                        <div class="report-header" style="cursor: pointer; background-color: #f8f9fa; padding: 10px; margin: -15px -15px 15px -15px; border-radius: 5px 5px 0 0;" onclick="toggleReport({{ index }})">
                            <strong>Report #{{ index + 1 }}</strong>
                            <span class="toggle-icon" id="toggle-icon-{{ index }}" style="float: right;">▼</span>
                        </div>
                        
                        <div class="report-content" id="report-content-{{ index }}" style="display: block;">
                            {% if report is iterable %}
                                <table class="table table-bordered table-striped">
                                    <tbody>
                                        {% for key, value in report %}
                                            <tr>
                                                <td style="width: 30%; font-weight: bold; background-color: #f8f9fa;">{{ key|title }}</td>
                                                <td>
                                                    {% if value is iterable %}
                                                        <table class="table table-bordered table-striped">
                                                            <tbody>
                                                                {% for key, value in value %}
                                                                    <tr>
                                                                        <td style="width: 30%; font-weight: bold; background-color: #f8f9fa;">{{ key|title }}</td>
                                                                        <td><pre style="max-height: 200px; overflow-y: auto; background-color: #f8f9fa; padding: 10px; border-radius: 3px; font-size: 12px;">{{ value|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre></td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    {% else %}
                                                        {% if value is same as(true) %}
                                                            <span class="badge badge-success">True</span>
                                                        {% elseif value is same as(false) %}
                                                            <span class="badge badge-danger">False</span>
                                                        {% elseif value is null %}
                                                            <span class="badge badge-secondary">Null</span>
                                                        {% else %}
                                                            {{ value }}
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <pre style="background-color: #f8f9fa; padding: 10px; border-radius: 3px; font-size: 12px;">{{ report|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
            
            <script>
                function toggleReport(index) {
                    const content = document.getElementById('report-content-' + index);
                    const icon = document.getElementById('toggle-icon-' + index);
                    
                    if (content.style.display === 'none') {
                        content.style.display = 'block';
                        icon.textContent = '▼';
                    } else {
                        content.style.display = 'none';
                        icon.textContent = '▶';
                    }
                }
            </script>
            
            <style>
                .json-reports-container {
                    max-width: 100%;
                    overflow-x: auto;
                }
                
                .json-report-item {
                    transition: all 0.3s ease;
                }
                
                .report-header:hover {
                    background-color: #e9ecef !important;
                }
                
                .table td {
                    vertical-align: top;
                }
                
                .badge {
                    padding: 4px 8px;
                    border-radius: 3px;
                    font-size: 11px;
                    font-weight: bold;
                }
                
                .badge-success {
                    background-color: #28a745;
                    color: white;
                }
                
                .badge-danger {
                    background-color: #dc3545;
                    color: white;
                }
                
                .badge-secondary {
                    background-color: #6c757d;
                    color: white;
                }
            </style>
        {% else %}
            <div class="alert alert-info">
                <i class="fa fa-info-circle"></i>
                No JSON reports available for this batch.
            </div>
        {% endif %}
    {% else %}
        <div class="alert alert-warning">
            <i class="fa fa-exclamation-triangle"></i>
            No JSON reports data available.
        </div>
    {% endif %}
{% endblock %}