{% extends "backend/custom/surround.html" %}
{% block topScripts %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border: 0;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .material-icons-outlined {
            vertical-align: middle;
        }
        .card-title.border-start {
            border-left-width: .25rem !important;
        }
        .list-group-item {
            border-left: 0;
            border-right: 0;
            padding-left: 0;
            padding-right: 0;
        }
        .list-group-item:first-child {
            border-top: 0;
        }
        .list-group-item:last-child {
            border-bottom: 0;
        }
        .legend-item .legend-color-box {
            width: 0.75rem;
            height: 0.75rem;
            display: inline-block;
            border-radius: 0.125rem;
        }
    </style>
{% endblock %}    
</head>

{% block content %}
<div class="container-fluid p-4 p-lg-5">
<header class="mb-4">
<h1 class="h2 fw-bold text-body">Estadísticas generales</h1>
<p class="text-muted small">Generado: 07-11-2025 10:00</p>
</header>
<main class="row g-4">
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<h2 class="display-3 fw-bold">2888</h2>
<p class="text-muted mb-0">Objetos</p>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
<span class="material-icons-outlined text-danger" style="font-size: 2.5rem;">account_balance</span>
<p class="h3 fw-bold my-2">1809</p>
<p class="text-muted small mb-0">Colección Kaluz</p>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
<span class="material-icons-outlined text-primary" style="font-size: 2.5rem;">museum</span>
<p class="h3 fw-bold my-2">194</p>
<p class="text-muted small mb-0">Colección Privada</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<p class="h3 fw-bold">167</p>
<p class="text-muted small mb-0 mt-1">Obras con valor superior a $100,000</p>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body d-flex align-items-center">
<span class="material-icons-outlined text-info me-3" style="font-size: 2rem;">image</span>
<div>
<p class="h5 fw-bold mb-0">85.32 %</p>
<p class="text-muted" style="font-size: 0.75rem;">2464 Objetos con Imágenes (Calidad Estándar)</p>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body d-flex align-items-center">
<span class="material-icons-outlined text-success me-3" style="font-size: 2rem;">verified</span>
<div>
<p class="h5 fw-bold mb-0">81.27 %</p>
<p class="text-muted" style="font-size: 0.75rem;">2347 Objetos con Imágenes (Alta Calidad)</p>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<p class="h5 fw-bold mb-0">422 (14.61 %)</p>
<p class="text-muted" style="font-size: 0.75rem;">Objetos sin Imágenes</p>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<p class="h5 fw-bold mb-0">541 (18.73 %)</p>
<p class="text-muted" style="font-size: 0.75rem;">Objetos sin Imágenes (Alta Calidad)</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<p class="text-muted">Valor Asegurado</p>
<div class="d-flex align-items-center justify-content-center mt-2">
<span class="material-icons-outlined text-success" style="font-size: 2.5rem;">arrow_upward</span>
<p class="h3 fw-bold mb-0 ms-2">$ 38,940,003.50</p>
</div>
<p class="text-muted mt-2" style="font-size: 0.75rem;">Una diferencia de $ 0.00 desde 01/11/2025</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title h5 fw-semibold border-start border-primary ps-3 mb-4">Disciplina / Tipo de Objeto</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Pintura</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">1655</span><span class="text-muted text-end" style="width: 50px;">57.31 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Dibujo</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">607</span><span class="text-muted text-end" style="width: 50px;">21.02 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Grabado / Estampa</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">120</span><span class="text-muted text-end" style="width: 50px;">04.16 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Escultura</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">101</span><span class="text-muted text-end" style="width: 50px;">03.50 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Documento Manuscrito</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">17</span><span class="text-muted text-end" style="width: 50px;">00.59 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Documento Fotografico</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">67</span><span class="text-muted text-end" style="width: 50px;">02.32 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Instalaciones</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">1</span><span class="text-muted text-end" style="width: 50px;">00.03 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>No clasificado</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">302</span><span class="text-muted text-end" style="width: 50px;">10.46 %</span></div></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h3 class="card-title h5 fw-semibold border-start border-primary ps-3 mb-4">Disciplina / Tipo de Objeto</h3>
<div class="d-flex justify-content-center align-items-center flex-grow-1" style="min-height: 250px;max-height: 300px;">
<canvas id="disciplinaChart-old" style="height: 500px !important;max-height:500px !important ;"></canvas>
</div>
<div class="row row-cols-2 row-cols-sm-3 g-2 mt-3 small" id="disciplinaLegend"></div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body d-flex flex-column flex-sm-row align-items-center justify-content-around text-center gap-4">
<div>
<p class="display-3 fw-bold">403</p>
<p class="text-muted mb-0">Autores</p>
</div>
<div class="d-none d-sm-block vr"></div>
<div class="d-flex align-items-center">
<span class="material-icons-outlined text-success" style="font-size: 2.5rem;">man</span>
<div class="ms-3 text-start">
<p class="h3 fw-bold mb-0">299</p>
<p class="text-muted small mb-0">Artistas Masculino</p>
</div>
</div>
<div class="d-flex align-items-center">
<span class="material-icons-outlined" style="font-size: 2.5rem; color: #d63384;">woman</span>
<div class="ms-3 text-start">
<p class="h3 fw-bold mb-0">57</p>
<p class="text-muted small mb-0">Artistas Femenino</p>
</div>
</div>
<div class="d-flex align-items-center">
<span class="material-icons-outlined text-primary" style="font-size: 2.5rem;">transgender</span>
<div class="ms-3 text-start">
<p class="h3 fw-bold mb-0">47</p>
<p class="text-muted small mb-0">No especificado</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="card-title h5 fw-semibold border-start border-primary ps-3 mb-0">Autores más representados</h3>
<a class="small" href="#">Ver todos</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center"><span>José María Velasco</span><span class="fw-medium">445</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Autor no identificado</span><span class="fw-medium">309</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Francisco Marco Chilet</span><span class="fw-medium">130</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Best Maugard</span><span class="fw-medium">77</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Antonio Rodríguez Luna</span><span class="fw-medium">60</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Elvira Gascón</span><span class="fw-medium">58</span></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h3 class="card-title h5 fw-semibold border-start border-primary ps-3 mb-4">Temáticas</h3>
<div class="flex-grow-1 overflow-auto" style="max-height: 290px;">
<ul class="list-group list-group-flush pe-2">
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Paisaje</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">755</span><span class="text-muted text-end" style="width: 50px;">26.28 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Costumbree</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">296</span><span class="text-muted text-end" style="width: 50px;">10.25 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Naturaleza Muerta</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">115</span><span class="text-muted text-end" style="width: 50px;">03.98 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Retrato</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">337</span><span class="text-muted text-end" style="width: 50px;">11.67 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Exilio</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">657</span><span class="text-muted text-end" style="width: 50px;">22.75 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Escultura</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">21</span><span class="text-muted text-end" style="width: 50px;">00.73 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>No clasificado</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">385</span><span class="text-muted text-end" style="width: 50px;">13.33 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Abstracto</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">2</span><span class="text-muted text-end" style="width: 50px;">00.07 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Estudio vegetal</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">98</span><span class="text-muted text-end" style="width: 50px;">03.39 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Imagen religiosa</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">11</span><span class="text-muted text-end" style="width: 50px;">00.38 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Estudio animal</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">65</span><span class="text-muted text-end" style="width: 50px;">02.25 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Arquitectura</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">43</span><span class="text-muted text-end" style="width: 50px;">01.49 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Registro histórico</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">47</span><span class="text-muted text-end" style="width: 50px;">01.63 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Objeto</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">16</span><span class="text-muted text-end" style="width: 50px;">00.55 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Contemporáneo</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">4</span><span class="text-muted text-end" style="width: 50px;">00.14 %</span></div></li>
<li class="list-group-item d-flex justify-content-between align-items-center"><span>Caligrafía</span><div class="d-flex align-items-baseline"><span class="fw-medium me-4">32</span><span class="text-muted text-end" style="width: 50px;">01.11 %</span></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h3 class="card-title h5 fw-semibold border-start border-primary ps-3 mb-4">Temáticas</h3>
<div class="d-flex justify-content-center align-items-center flex-grow-1" style="min-height: 250px;max-height: 300px;">
<canvas id="tematicasChart"></canvas>
</div>
<div class="row row-cols-2 row-cols-sm-3 g-2 mt-3 small" id="tematicasLegend"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 offset-lg-4">
<div class="card h-100">
<div class="card-body text-center d-flex flex-column justify-content-center">
<p class="text-muted">Publicaciones Museo Kaluz</p>
<p class="display-3 fw-bold my-2">4</p>
<a class="small" href="#">Ver publicaciones</a>
</div>
</div>
</div>
</main>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const createDonutChart = (canvasId, legendId, data, labels, title, truncateLength) => {
            const ctx = document.getElementById(canvasId).getContext('2d');
            const colors = [
                '#0d6efd', '#6f42c1', '#d63384', '#fd7e14', '#ffc107', 
                '#198754', '#20c997', '#0dcaf0', '#6c757d', '#adb5bd', 
                '#dc3545', '#343a40', '#6610f2', '#f8f9fa', '#e83e8c', '#28a745'
            ];
            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        label: title,
                        data: data,
                        backgroundColor: colors.slice(0, data.length),
                        borderColor: '#fff',
                        borderWidth: 2,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed !== null) {
                                        const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                                        const percentage = ((context.raw / total) * 100).toFixed(1);
                                        label += `${context.raw} (${percentage}%)`;
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
            // Custom Legend
            const legendContainer = document.getElementById(legendId);
            const total = data.reduce((a, b) => a + b, 0);
            labels.forEach((label, index) => {
                const percentage = ((data[index] / total) * 100).toFixed(1);
                const truncatedLabel = label.length > truncateLength ? label.substring(0, truncateLength) + '...' : label;
                const legendItem = `
                    <div class="col">
                        <div class="d-flex align-items-center legend-item" title="${label}">
                            <div class="legend-color-box me-2" style="background-color: ${colors[index]};"></div>
                            <span class="text-truncate">${truncatedLabel}</span>
                            <span class="ms-auto text-muted">${percentage}%</span>
                        </div>
                    </div>`;
                legendContainer.innerHTML += legendItem;
            });
        };
        // Disciplina / Tipo de Objeto Chart
        const disciplinaData = [1655, 607, 120, 101, 17, 67, 1, 302];
        const disciplinaLabels = ['Pintura', 'Dibujo', 'Grabado / Estampa', 'Escultura', 'Doc. Manuscrito', 'Doc. Fotografico', 'Instalaciones', 'No clasificado'];
        createDonutChart('disciplinaChart', 'disciplinaLegend', disciplinaData, disciplinaLabels, 'Disciplina / Tipo de Objeto', 14);
        // Temáticas Chart
        const tematicasData = [755, 296, 115, 337, 657, 21, 385, 2, 98, 11, 65, 43, 47, 16, 4, 32];
        const tematicasLabels = ['Paisaje', 'Costumbree', 'Naturaleza Muerta', 'Retrato', 'Exilio', 'Escultura', 'No clasificado', 'Abstracto', 'Estudio vegetal', 'Imagen religiosa', 'Estudio animal', 'Arquitectura', 'Registro histórico', 'Objeto', 'Contemporáneo', 'Caligrafía'];
        createDonutChart('tematicasChart', 'tematicasLegend', tematicasData, tematicasLabels, 'Temáticas', 12);
    });
</script>
{%endblock%}