{% extends "backend/custom/surround.html" %}
{% block topScripts %}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<style>
    body {
        font-family: 'Roboto', sans-serif;
        background-color: #f8f9fa;
    }

    .card {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .card-title {
        font-weight: 500;
    }

    .table {
        margin-bottom: 0;
    }

    .table th,
    .table td {
        vertical-align: middle;
    }

    .text-muted-light {
        color: #6c757d;
    }

    #chartdiv {
        width: 100%;
        height: 500px;
    }
    #chartdiv-theme {
        width: 100%;
        height: 500px;
    }
    .card-border-top { border-top: 4px solid var(--bs-blue) !important; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid p-3 p-lg-4">
    <header class="mb-4">
        <p class="text-muted small">Estadística generada: 22/10/2025 09:00</p>
    </header>
    <div class="row g-4">
        <div class="col-lg-6 col-md-6">
            <div class="card card-border-top text-center p-4 mb-4">
                <div class="card-body">
                    <span class="material-icons text-danger fs-1">collections_bookmark</span>
                    <h1 class="display-4 fw-bold">2888</h1>
                    <p class="text-muted-light mb-0">Objetos</p>
                </div>
            </div>
            
            <div class="row g-4">
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h4 class="fw-bold">1809</h4>
                            <p class="small text-muted-light mb-0">Colección Kaluz</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h4 class="fw-bold">194</h4>
                            <p class="small text-muted-light mb-0">Colección Privada</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h5 class="fw-bold">2347</h5>
                            <p class="small text-muted-light mb-0">Objetos con Imágenes (Alta Calidad)</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h5 class="fw-bold">2464</h5>
                            <p class="small text-muted-light mb-0">Objetos con Imágenes (Calidad Estándar)</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h5 class="fw-bold">422</h5>
                            <p class="small text-muted-light mb-0">Objetos sin Imágenes</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h5 class="fw-bold">541</h5>
                            <p class="small text-muted-light mb-0">Objetos sin Imágenes (Alta Calidad)</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card text-center p-4 mb-4">
                <div class="card-body">
                    <p class="text-muted-light mb-0">Valor Asegurado</p>
                    <h1 class="fw-bold">$ 38,940,003.50</h1>
                </div>
            </div>
            <div class="card text-center p-4 mb-4">
                <div class="card-body">
                    <p class="text-muted-light mb-0">Obras con valor superior a $100.000</p>
                    <h1 class="fw-bold">167</h1>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Disciplina / Tipo de Objeto</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Disciplina</th>
                                    <th class="text-end" scope="col">Cantidad</th>
                                    <th class="text-end" scope="col">Porcentaje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Pintura</td>
                                    <td class="text-end">1655</td>
                                    <td class="text-end">57.31 %</td>
                                </tr>
                                <tr>
                                    <td>Dibujo</td>
                                    <td class="text-end">607</td>
                                    <td class="text-end">21.02 %</td>
                                </tr>
                                <tr>
                                    <td>Grabado / Estampa</td>
                                    <td class="text-end">120</td>
                                    <td class="text-end">04.16 %</td>
                                </tr>
                                <tr>
                                    <td>Escultura</td>
                                    <td class="text-end">101</td>
                                    <td class="text-end">03.50 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Manuscrito</td>
                                    <td class="text-end">17</td>
                                    <td class="text-end">00.59 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Fotográfico</td>
                                    <td class="text-end">67</td>
                                    <td class="text-end">02.32 %</td>
                                </tr>
                                <tr>
                                    <td>Instalaciones</td>
                                    <td class="text-end">1</td>
                                    <td class="text-end">00.03 %</td>
                                </tr>
                                <tr>
                                    <td>No clasificado</td>
                                    <td class="text-end">302</td>
                                    <td class="text-end">10.46 %</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- TARJETA DEL GRÁFICO 1 (Faltante - Añadida aquí) -->
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Distribución por Disciplina</h5>
                </div>
                <div class="card-body">
                    <!-- Contenedor del gráfico 1 -->
                    <div id="chartdiv"></div> 
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4">
        <div class="col-lg-6 col-md-6">
            <div class="card text-center card-border-top p-4 mb-4">
                <div class="card-body">
                    <span class="material-icons fs-2 text-primary">account_circle</span>
                    <h1 class="fw-bold">403</h1>
                    <p class="text-muted-light mb-0">Autores</p>
                </div>
            </div>
            
            <div class="row g-4">
                <div class="col-md-4 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h4 class="fw-bold">299</h4>
                            <p class="small text-muted-light mb-0">Masculinos</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h4 class="fw-bold">57</h4>
                            <p class="small text-muted-light mb-0">Femeninos</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="card p-3">
                        <div class="card-body text-center">
                            <h5 class="fw-bold">47</h5>
                            <p class="small text-muted-light mb-0">No espec.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- TARJETA autores -->
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">Autores más representados</h5>
                    </div>
                    <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Disciplina</th>
                                    <th class="text-end" scope="col">Cantidad</th>
                                    <th class="text-end" scope="col">Porcentaje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Pintura</td>
                                    <td class="text-end">1655</td>
                                    <td class="text-end">57.31 %</td>
                                </tr>
                                <tr>
                                    <td>Dibujo</td>
                                    <td class="text-end">607</td>
                                    <td class="text-end">21.02 %</td>
                                </tr>
                                <tr>
                                    <td>Grabado / Estampa</td>
                                    <td class="text-end">120</td>
                                    <td class="text-end">04.16 %</td>
                                </tr>
                                <tr>
                                    <td>Escultura</td>
                                    <td class="text-end">101</td>
                                    <td class="text-end">03.50 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Manuscrito</td>
                                    <td class="text-end">17</td>
                                    <td class="text-end">00.59 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Fotográfico</td>
                                    <td class="text-end">67</td>
                                    <td class="text-end">02.32 %</td>
                                </tr>
                                <tr>
                                    <td>Instalaciones</td>
                                    <td class="text-end">1</td>
                                    <td class="text-end">00.03 %</td>
                                </tr>
                                <tr>
                                    <td>No clasificado</td>
                                    <td class="text-end">302</td>
                                    <td class="text-end">10.46 %</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Temática</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Disciplina</th>
                                    <th class="text-end" scope="col">Cantidad</th>
                                    <th class="text-end" scope="col">Porcentaje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Pintura</td>
                                    <td class="text-end">1655</td>
                                    <td class="text-end">57.31 %</td>
                                </tr>
                                <tr>
                                    <td>Dibujo</td>
                                    <td class="text-end">607</td>
                                    <td class="text-end">21.02 %</td>
                                </tr>
                                <tr>
                                    <td>Grabado / Estampa</td>
                                    <td class="text-end">120</td>
                                    <td class="text-end">04.16 %</td>
                                </tr>
                                <tr>
                                    <td>Escultura</td>
                                    <td class="text-end">101</td>
                                    <td class="text-end">03.50 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Manuscrito</td>
                                    <td class="text-end">17</td>
                                    <td class="text-end">00.59 %</td>
                                </tr>
                                <tr>
                                    <td>Documento Fotográfico</td>
                                    <td class="text-end">67</td>
                                    <td class="text-end">02.32 %</td>
                                </tr>
                                <tr>
                                    <td>Instalaciones</td>
                                    <td class="text-end">1</td>
                                    <td class="text-end">00.03 %</td>
                                </tr>
                                <tr>
                                    <td>No clasificado</td>
                                    <td class="text-end">302</td>
                                    <td class="text-end">10.46 %</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- TARJETA DEL GRÁFICO 2 -->
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Distribución por Temática</h5>
                </div>
                <div class="card-body">
                    <!-- Contenedor del gráfico 2 -->
                    <div id="chartdiv-theme"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}
{% block bottomScripts %}
    <script>
        // Declaramos variables para las instancias root de amCharts
        // Esto es una buena práctica para gestionar múltiples gráficos.
        let root1, root2;

        // Datos para los gráficos
        // NOTA: Estos datos reflejan la tabla 'Disciplina / Tipo de Objeto'
        const chartData = [{
            "category": "Pintura",
            "value": 1655
        }, {
            "category": "Dibujo",
            "value": 607
        }, {
            "category": "Grabado / Estampa",
            "value": 120
        }, {
            "category": "Escultura",
            "value": 101
        }, {
            "category": "Doc. Manuscrito",
            "value": 17
        }, {
            "category": "Doc. Fotográfico",
            "value": 67
        }, {
            "category": "Instalaciones",
            "value": 1
        }, {
            "category": "No clasificado",
            "value": 302
        }];

        /**
         * Función reutilizable para crear un gráfico de columnas horizontal (Barra) de amCharts 5.
         * @param {string} containerId - El ID del div contenedor (ej. "chartdiv").
         * @param {Array<Object>} data - Los datos del gráfico.
         * @returns {am5.Root} La instancia root del gráfico.
         */
        function createBarChart(containerId, data) {
            // Aseguramos que el contenedor exista y tenga dimensiones
            const container = document.getElementById(containerId);
            if (!container) {
                console.error(`Contenedor no encontrado: ${containerId}`);
                return null;
            }
            
            // 1. Crear el elemento raíz (Root element)
            // Importante: Cada gráfico debe tener su propio am5.Root
            var root = am5.Root.new(containerId);

            // Limpiar el logo (opcional, pero buena práctica)
            root._logo.dispose();

            // 2. Aplicar temas
            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            // 3. Crear el gráfico XY
            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: false,
                panY: false,
                wheelX: "none",
                wheelY: "none",
                layout: root.verticalLayout // Layout vertical para columnas horizontales
            }));

            // 4. Crear Eje Y (Categorías)
            var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "category",
                renderer: am5xy.AxisRendererY.new(root, {
                    inversed: true, // Barras horizontales
                    cellStartLocation: 0.1,
                    cellEndLocation: 0.9,
                    minorGridEnabled: false,
                    // Ocultar línea del eje Y (a menudo más limpio para gráficos de barras)
                    strokeOpacity: 0
                }),
                tooltip: am5.Tooltip.new(root, {}) // Tooltip para categorías
            }));
            yAxis.data.setAll(data);

            // 5. Crear Eje X (Valores)
            var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererX.new(root, {
                    strokeOpacity: 0.1,
                    minGridDistance: 50
                }),
                min: 0,
                // Formato para los números del eje X
                numberFormat: "#,###" 
            }));

            // 6. Crear la Serie (Barras)
            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                name: "Cantidad de Objetos",
                xAxis: xAxis,
                yAxis: yAxis,
                valueXField: "value",
                categoryYField: "category",
                sequencedInterpolation: true,
                tooltip: am5.Tooltip.new(root, {
                    pointerOrientation: "horizontal",
                    // Formato del Tooltip: [bold]Categoría[/]: Valor
                    labelText: "[bold]{categoryY}[/]: {valueX}"
                })
            }));

            // Configuración de las Columnas
            series.columns.template.setAll({
                height: am5.percent(90),
                strokeOpacity: 0,
                cornerRadiusTR: 4,
                cornerRadiusBR: 4,
                tooltipText: "[bold]{categoryY}[/]: {valueX}" // Tooltip explícito en la columna
            });

            // Etiqueta de valor en la barra
            series.bullets.push(function() {
                return am5.Bullet.new(root, {
                    locationX: 1, // Ubicar al final de la barra
                    sprite: am5.Label.new(root, {
                        text: "{valueX}",
                        fill: root.interfaceColors.get("alternativeText"), // Color del texto
                        centerX: am5.p100, // Alinear a la derecha del punto
                        paddingLeft: 5,
                        populateText: true
                    })
                });
            });


            // Adaptador para asignar colores del tema a cada barra
            series.columns.template.adapters.add("fill", function (fill, target) {
                return chart.get("colors").getIndex(series.columns.indexOf(target));
            });

            // 7. Establecer los datos y animación
            series.data.setAll(data);
            series.appear(1000);
            chart.appear(1000, 100);

            return root; // Retorna la instancia de root
        }

        am5.ready(function () {
            // Limpieza: Aseguramos que cualquier instancia anterior se elimine.
            if (root1) { root1.dispose(); }
            if (root2) { root2.dispose(); }

            // Crear el gráfico 1 (Distribución por Disciplina)
            root1 = createBarChart("chartdiv", chartData);
            
            // Crear el gráfico 2 (Distribución por Temática)
            root2 = createBarChart("chartdiv-theme", chartData);
        }); // end am5.ready()

        // Función para limpiar gráficos si se usa fuera de este contexto
        window.disposeCharts = () => {
            if (root1) {
                root1.dispose();
            }
            if (root2) {
                root2.dispose();
            }
        };
    </script>
{% endblock %}