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

{% block title %}Dashboard{% endblock %}

{% block stylesheets %}
<style>
    :root {
        --ink: #1f2933;
        --muted: #6b7280;
        --surface: #ffffff;
        --accent: #0f766e;
        --line: #e5e7eb;
        --bg: #f5f6f8;
    }

    .content {
        background: var(--bg);
    }

    .dashboard-title {
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .card-manager {
        border: 1px solid var(--line);
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
    }

    .table-minimal thead th {
        background: #f1f5f9;
        color: var(--ink);
        font-weight: 600;
        border-bottom: 1px solid var(--line);
    }

    .table-minimal tbody tr.header-row td {
        background: #eef2f7;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--ink);
    }

    .table-minimal tbody tr.total-row td {
        background: #f8fafc;
        font-weight: 600;
        color: var(--ink);
    }

    .table-minimal .time-total-col {
        background: #eef2f6;
    }

    .table-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .chart-wrap {
        width: 100%;
        height: 280px;
    }

    .chart-wrap-lg {
        height: 320px;
    }

    .chart-wrap-sm {
        height: 220px;
    }

    .report-title {
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .section-menu {
        display: inline-flex;
        gap: 0.5rem;
    }

    .section-menu .btn {
        border-radius: 999px;
        font-weight: 600;
        padding: 0.25rem 0.9rem;
    }

    .module-card-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 1rem;
    }

    .module-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 12px 14px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    .module-card__title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 6px;
        color: #111827;
        background: #f3f4f6;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .module-card__subtitle {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .module-card__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        font-size: 0.8rem;
        color: #374151;
    }

    .module-card__stats span {
        display: block;
        font-weight: 600;
        color: #111827;
    }

    .future-hour {
        color: #9ca3af;
    }

    .module-local-title {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #111827;
        margin: 0 0 0.75rem;
        padding-bottom: 0.35rem;
        border-bottom: 2px solid #e5e7eb;
    }
</style>
{% endblock %}

{% block body %}
{% set maxHasta = "now"|date_modify("-1 day")|date("Y-m-d") %}
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-3 align-items-center">
            <div class="col-sm-7">
                <h1 class="m-0 text-dark dashboard-title">Dashboard</h1>
                <div class="text-muted small">Periodo: {{ filters.desde }} al {{ filters.hasta }}</div>
            </div>
            <div class="col-sm-5">
                <div class="d-flex flex-column align-items-sm-end">
                    <div class="section-menu mb-2">
                        <a class="btn btn-sm {{ section == 'hoy' ? 'btn-primary' : 'btn-outline-secondary' }}"
                           href="{{ path('admin', baseParams|merge({'section': 'hoy'})) }}">Atenciones de hoy</a>
                        <a class="btn btn-sm {{ section == 'reportes' ? 'btn-primary' : 'btn-outline-secondary' }}"
                           href="{{ path('admin', baseParams|merge({'section': 'reportes'})) }}">Dashboard</a>
                        <a class="btn btn-sm {{ section == 'turnos' ? 'btn-primary' : 'btn-outline-secondary' }}"
                           href="{{ path('admin', baseParams|merge({'section': 'turnos'})) }}">Atenciones historicas</a>
                        <a class="btn btn-sm {{ section == 'colaboradores' ? 'btn-primary' : 'btn-outline-secondary' }}"
                           href="{{ path('admin', baseParams|merge({'section': 'colaboradores'})) }}">Colaboradores</a>
                    </div>
                    <form class="form-inline justify-content-sm-end align-items-center flex-nowrap" method="get">
                        <input type="hidden" name="section" value="{{ section }}">
                        {% if section != 'hoy' %}
                        <div class="form-group mr-2 mb-0">
                            <label class="sr-only" for="desde">Desde</label>
                            <input class="form-control form-control-sm" type="date" id="desde" name="desde" value="{{ filters.desde }}">
                        </div>
                        <div class="form-group mr-2 mb-0">
                            <label class="sr-only" for="hasta">Hasta</label>
                            <input class="form-control form-control-sm" type="date" id="hasta" name="hasta" value="{{ filters.hasta }}" max="{{ maxHasta }}">
                        </div>
                        {% endif %}
                        <div class="form-group mr-2 mb-0">
                            <label class="sr-only" for="local_id">Local</label>
                            <select class="form-control form-control-sm w-auto" id="local_id" name="local_id" onchange="this.form.submit()">
                                <option value="">Todos los locales</option>
                                {% for local in locals %}
                                    <option value="{{ local.id }}" {% if filters.local_id == local.id %}selected{% endif %}>
                                        {{ local.nombre }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group mr-2 mb-0">
                            <label class="sr-only" for="fila_id">Fila</label>
                            <select class="form-control form-control-sm w-auto" id="fila_id" name="fila_id" {% if not filters.local_id %}disabled{% endif %} onchange="this.form.submit()">
                                <option value="">Todas las filas</option>
                                {% for fila in filas %}
                                    <option value="{{ fila.id }}" {% if filters.fila_id == fila.id %}selected{% endif %}>
                                        {{ fila.nombre }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <button class="btn btn-sm btn-primary" type="submit">Filtrar</button>
                    </form>
                    <div class="d-flex justify-content-end mt-2">
                        {% set exportParams = {'desde': filters.desde, 'hasta': filters.hasta} %}
                        {% if filters.local_id %}
                            {% set exportParams = exportParams|merge({'local_id': filters.local_id}) %}
                        {% endif %}
                        {% if filters.fila_id %}
                            {% set exportParams = exportParams|merge({'fila_id': filters.fila_id}) %}
                        {% endif %}
                        <a class="btn btn-sm btn-outline-secondary" href="{{ path('admin_export_reporte', exportParams) }}">Descargar reporte</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container-fluid">
        {% if section == 'turnos' %}
            {% set tableOrigin = 'all' %}
            <div class="row">
                <div class="col-12">
                    <div class="card card-manager">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-calendar-day mr-2"></i>Diario</h3>
                    </div>
                    <div class="card-body">
                        <form class="form-inline mb-3 align-items-center flex-wrap" method="get">
                            <input type="hidden" name="section" value="{{ section }}">
                            <input type="hidden" name="desde" value="{{ filters.desde }}">
                            <input type="hidden" name="hasta" value="{{ filters.hasta }}">
                            {% if filters.local_id %}
                                <input type="hidden" name="local_id" value="{{ filters.local_id }}">
                            {% endif %}
                            {% if filters.fila_id %}
                                <input type="hidden" name="fila_id" value="{{ filters.fila_id }}">
                            {% endif %}
                            <input type="hidden" name="page_daily" value="1">
                            <input type="hidden" name="sort_daily" value="{{ sort.daily.key }}">
                            <input type="hidden" name="dir_daily" value="{{ sort.daily.dir }}">
                            {% if monthOptions|length > 1 %}
                                <label class="mr-2 small text-muted" for="month">Mes</label>
                                <select id="month" name="month" class="form-control form-control-sm mr-3" onchange="this.form.submit()">
                                    {% for option in monthOptions %}
                                        <option value="{{ option.value }}" {% if option.value == selectedMonth %}selected{% endif %}>
                                            {{ option.label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                            <label class="mr-2 small text-muted" for="origin">Origen</label>
                            <select id="origin" name="origin" class="form-control form-control-sm" onchange="this.form.submit()">
                                <option value="all" {% if origin == 'all' %}selected{% endif %}>Todos</option>
                                <option value="0" {% if origin == '0' %}selected{% endif %}>Espontaneos</option>
                                <option value="2" {% if origin == '2' %}selected{% endif %}>Reservas</option>
                            </select>
                        </form>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="small text-muted mb-0" for="chartMode">Grafico</label>
                            <div class="d-flex align-items-center">
                                <select id="chartMode" class="form-control form-control-sm w-auto mr-2">
                                {% if origin == 'all' %}
                                    <option value="turnos" selected>Comparativa turnos (Espontaneos vs Reservas)</option>
                                    <option value="espera">Comparativa espera (Espontaneos vs Reservas)</option>
                                    <option value="atencion">Comparativa atencion (Espontaneos vs Reservas)</option>
                                {% else %}
                                    <option value="cantidad" selected>Cantidad de turnos</option>
                                    <option value="espera">Tiempo de espera</option>
                                    <option value="atencion">Tiempo de atencion</option>
                                {% endif %}
                            </select>
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="turnosChart">Descargar PNG</button>
                            </div>
                        </div>
                        <div class="chart-wrap mb-4">
                            <canvas id="turnosChart"></canvas>
                        </div>
                        <div class="d-flex justify-content-end mb-2">
                            {% set exportDailyParams = {
                                'desde': filters.desde,
                                'hasta': filters.hasta,
                                'origin': origin,
                                'month': selectedMonth
                            } %}
                            {% if filters.local_id %}
                                {% set exportDailyParams = exportDailyParams|merge({'local_id': filters.local_id}) %}
                            {% endif %}
                            {% if filters.fila_id %}
                                {% set exportDailyParams = exportDailyParams|merge({'fila_id': filters.fila_id}) %}
                            {% endif %}
                            <a class="btn btn-sm btn-outline-secondary" href="{{ path('admin_export_diario', exportDailyParams) }}">Descargar Excel</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-minimal" id="table-diario">
                                <thead>
                                        <tr>
                                            {% set isActive = sort.daily.key == 'fecha' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'fecha', 'dir_daily': nextDir})) }}">
                                                    Fecha
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.daily.key == 'total_turnos' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'total_turnos', 'dir_daily': nextDir})) }}">
                                                    Total turnos
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.daily.key == 'reservas' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'reservas', 'dir_daily': nextDir})) }}">
                                                    Reservas
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.daily.key == 'espontaneos' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'espontaneos', 'dir_daily': nextDir})) }}">
                                                    Espontaneos
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% if tableOrigin == 'all' %}
                                                <th>Espera reservas (min)</th>
                                                <th>Atencion reservas (min)</th>
                                                <th>Espera espontaneos (min)</th>
                                                <th>Atencion espontaneos (min)</th>
                                            {% endif %}
                                            {% set isActive = sort.daily.key == 'promedio_espera_min' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th class="{{ tableOrigin == 'all' ? 'time-total-col' : '' }}">
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'promedio_espera_min', 'dir_daily': nextDir})) }}">
                                                    {{ tableOrigin == 'all' ? 'Promedio espera total (min)' : 'Promedio espera (min)' }}
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.daily.key == 'promedio_atencion_min' %}
                                            {% set nextDir = isActive and sort.daily.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th class="{{ tableOrigin == 'all' ? 'time-total-col' : '' }}">
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': 1, 'sort_daily': 'promedio_atencion_min', 'dir_daily': nextDir})) }}">
                                                    {{ tableOrigin == 'all' ? 'Promedio atencion total (min)' : 'Promedio atencion (min)' }}
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.daily.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in dailyRows %}
                                        {% if row.type == 'header' %}
                                            <tr class="header-row">
                                                <td colspan="{{ tableOrigin == 'all' ? 10 : 6 }}">{{ row.label }}</td>
                                            </tr>
                                        {% else %}
                                            <tr>
                                                <td>{{ row.fecha }}</td>
                                                <td>{{ row.total_turnos }}</td>
                                                <td>{{ row.reservas }}</td>
                                                <td>{{ row.espontaneos }}</td>
                                                {% if tableOrigin == 'all' %}
                                                    <td>{{ row.promedio_espera_reservas_min }}</td>
                                                    <td>{{ row.promedio_atencion_reservas_min }}</td>
                                                    <td>{{ row.promedio_espera_espontaneos_min }}</td>
                                                    <td>{{ row.promedio_atencion_espontaneos_min }}</td>
                                                {% endif %}
                                                <td class="{{ tableOrigin == 'all' ? 'time-total-col' : '' }}">{{ row.promedio_espera_min }}</td>
                                                <td class="{{ tableOrigin == 'all' ? 'time-total-col' : '' }}">{{ row.promedio_atencion_min }}</td>
                                            </tr>
                                        {% endif %}
                                    {% else %}
                                        <tr>
                                            <td colspan="{{ tableOrigin == 'all' ? 10 : 6 }}" class="text-center text-muted">Sin datos para el periodo seleccionado.</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="table-foot mt-3">
                                <div class="text-muted small">
                                    Pagina {{ pagination.daily.page }} de {{ pagination.daily.pages }} · {{ pagination.daily.total }} registros
                                </div>
                                <nav aria-label="Paginacion diario">
                                    {% set totalPages = pagination.daily.pages %}
                                    {% set currentPage = pagination.daily.page %}
                                    {% set startPage = currentPage - 2 %}
                                    {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% set endPage = startPage + 4 %}
                                    {% if endPage > totalPages %}{% set endPage = totalPages %}{% endif %}
                                    {% if endPage - startPage < 4 %}
                                        {% set startPage = endPage - 4 %}
                                        {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% endif %}
                                    <ul class="pagination pagination-sm mb-0">
                                        <li class="page-item {% if currentPage == 1 %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': currentPage > 1 ? currentPage - 1 : 1})) }}">Anterior</a>
                                        </li>
                                        {% for i in startPage..endPage %}
                                            <li class="page-item {% if i == currentPage %}active{% endif %}">
                                                <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': i})) }}">{{ i }}</a>
                                            </li>
                                        {% endfor %}
                                        <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_daily': currentPage < totalPages ? currentPage + 1 : totalPages})) }}">Siguiente</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var canvas = document.getElementById('turnosChart');
                    if (!canvas || typeof Chart === 'undefined') {
                        return;
                    }
                    var labels = {{ chart.labels|json_encode|raw }};
                    var isAllOrigin = {{ origin == 'all' ? 'true' : 'false' }};
                    var series = {
                        turnos: [
                            {
                                label: 'Reservas',
                                data: {{ chart.reservas|json_encode|raw }},
                                borderColor: '#2563eb',
                                backgroundColor: 'rgba(37, 99, 235, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            },
                            {
                                label: 'Espontaneos',
                                data: {{ chart.espontaneos|json_encode|raw }},
                                borderColor: '#f97316',
                                backgroundColor: 'rgba(249, 115, 22, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            }
                        ],
                        espera: [
                            {
                                label: isAllOrigin ? 'Espera reservas (min)' : 'Espera (min)',
                                data: isAllOrigin ? {{ chart.espera_reservas|json_encode|raw }} : {{ chart.espera|json_encode|raw }},
                                borderColor: '#16a34a',
                                backgroundColor: 'rgba(22, 163, 74, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            },
                            {
                                label: isAllOrigin ? 'Espera espontaneos (min)' : '',
                                data: isAllOrigin ? {{ chart.espera_espontaneos|json_encode|raw }} : [],
                                borderColor: '#0ea5e9',
                                backgroundColor: 'rgba(14, 165, 233, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            }
                        ],
                        atencion: [
                            {
                                label: isAllOrigin ? 'Atencion reservas (min)' : 'Atencion (min)',
                                data: isAllOrigin ? {{ chart.atencion_reservas|json_encode|raw }} : {{ chart.atencion|json_encode|raw }},
                                borderColor: '#7c3aed',
                                backgroundColor: 'rgba(124, 58, 237, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            },
                            {
                                label: isAllOrigin ? 'Atencion espontaneos (min)' : '',
                                data: isAllOrigin ? {{ chart.atencion_espontaneos|json_encode|raw }} : [],
                                borderColor: '#f43f5e',
                                backgroundColor: 'rgba(244, 63, 94, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            }
                        ],
                        cantidad: [
                            {
                                label: 'Cantidad de turnos',
                                data: {{ chart.total|json_encode|raw }},
                                borderColor: '#0f766e',
                                backgroundColor: 'rgba(15, 118, 110, 0.08)',
                                pointRadius: 2,
                                tension: 0.4,
                                fill: true
                            }
                        ]
                    };
                    var defaultKey = isAllOrigin ? 'turnos' : 'cantidad';
                    var initialSets = series[defaultKey].filter(function (item) {
                        return item.label !== '';
                    });
                    var chartMode = document.getElementById('chartMode');
                    var chart = new Chart(canvas.getContext('2d'), {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: initialSets
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top'
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        precision: 0
                                    }
                                }
                            }
                        }
                    });
                    if (chartMode) {
                        chartMode.addEventListener('change', function () {
                            var key = chartMode.value;
                            chart.data.datasets = series[key].filter(function (item) {
                                return item.label !== '';
                            });
                            chart.update();
                        });
                    }
                });
            </script>
        {% elseif section == 'hoy' %}
            {% set tableOrigin = 'all' %}
            {% set currentHour = "now"|date("H") %}
            <div class="row">
                <div class="col-12">
                    <div id="hoy-content">
                    <div class="card card-manager">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-clock mr-2"></i>Atenciones de hoy</h3>
                    </div>
                    <div class="card-body">
                        <form id="hoyOriginForm" class="form-inline mb-3 align-items-center flex-wrap" method="get">
                            <input type="hidden" name="section" value="{{ section }}">
                            {% if filters.local_id %}
                                <input type="hidden" name="local_id" value="{{ filters.local_id }}">
                            {% endif %}
                            {% if filters.fila_id %}
                                <input type="hidden" name="fila_id" value="{{ filters.fila_id }}">
                            {% endif %}
                        </form>
                        {% if not filters.local_id %}
                            {% set lastLocal = '' %}
                            {% for card in todayModules %}
                                {% if card.local != lastLocal %}
                                    {% set lastLocal = card.local %}
                                    <div class="module-local-title">{{ card.local }}</div>
                                    <div class="module-card-grid">
                                {% endif %}
                                <div class="module-card">
                                    <div class="module-card__title">
                                        <i class="fas fa-desktop"></i>
                                        <span>{{ card.modulo }}</span>
                                    </div>
                                    <div class="module-card__subtitle">
                                        <i class="fas fa-user"></i>
                                        <span>{{ card.colaborador }}</span>
                                    </div>
                                    <div class="module-card__stats">
                                        <div>
                                            Prom. atencion
                                            <span>{{ card.promedio_atencion_min }} min</span>
                                        </div>
                                        <div>
                                            Total atenciones
                                            <span>{{ card.total_atenciones }}</span>
                                        </div>
                                        <div>
                                            Espontaneos
                                            <span>{{ card.total_espontaneos }}</span>
                                        </div>
                                        <div>
                                            Reservas
                                            <span>{{ card.total_reservas }}</span>
                                        </div>
                                    </div>
                                </div>
                                {% if loop.last or (todayModules[loop.index] is defined and todayModules[loop.index].local != lastLocal) %}
                                    </div>
                                {% endif %}
                            {% else %}
                                <div class="text-muted small">Sin atenciones registradas hoy.</div>
                            {% endfor %}
                        {% else %}
                            <div class="module-card-grid">
                                {% for card in todayModules %}
                                    <div class="module-card">
                                        <div class="module-card__title">
                                            <i class="fas fa-desktop"></i>
                                            <span>{{ card.modulo }}</span>
                                        </div>
                                        <div class="module-card__subtitle">
                                            <i class="fas fa-user"></i>
                                            <span>{{ card.colaborador }}</span>
                                        </div>
                                        <div class="module-card__stats">
                                            <div>
                                                Prom. atencion
                                                <span>{{ card.promedio_atencion_min }} min</span>
                                            </div>
                                            <div>
                                                Total atenciones
                                                <span>{{ card.total_atenciones }}</span>
                                            </div>
                                            <div>
                                                Espontaneos
                                                <span>{{ card.total_espontaneos }}</span>
                                            </div>
                                            <div>
                                                Reservas
                                                <span>{{ card.total_reservas }}</span>
                                            </div>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="text-muted small">Sin atenciones registradas hoy.</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="small text-muted mb-0" for="chartModeToday">Grafico</label>
                            <div class="d-flex align-items-center">
                                <label class="mr-2 small text-muted" for="origin">Origen</label>
                                <select id="origin" name="origin" class="form-control form-control-sm w-auto mr-3" form="hoyOriginForm">
                                    <option value="all" {% if origin == 'all' %}selected{% endif %}>Todos</option>
                                    <option value="0" {% if origin == '0' %}selected{% endif %}>Espontaneos</option>
                                    <option value="2" {% if origin == '2' %}selected{% endif %}>Reservas</option>
                                </select>
                                <select id="chartModeToday" class="form-control form-control-sm w-auto mr-2">
                                {% if origin == 'all' %}
                                    <option value="turnos" selected>Comparativa turnos (Espontaneos vs Reservas)</option>
                                    <option value="espera">Comparativa espera (Espontaneos vs Reservas)</option>
                                    <option value="atencion">Comparativa atencion (Espontaneos vs Reservas)</option>
                                {% else %}
                                    <option value="cantidad" selected>Cantidad de turnos</option>
                                    <option value="espera">Tiempo de espera</option>
                                    <option value="atencion">Tiempo de atencion</option>
                                {% endif %}
                            </select>
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="todayChart">Descargar PNG</button>
                            </div>
                        </div>
                        <script type="application/json" id="today-chart-data">
                            {{ {
                                'labels': todayChart.labels,
                                'total': todayChart.total,
                                'reservas': todayChart.reservas,
                                'espontaneos': todayChart.espontaneos,
                                'espera_reservas': todayChart.espera_reservas,
                                'espera_espontaneos': todayChart.espera_espontaneos,
                                'espera': todayChart.espera,
                                'atencion_reservas': todayChart.atencion_reservas,
                                'atencion_espontaneos': todayChart.atencion_espontaneos,
                                'atencion': todayChart.atencion,
                                'origin': origin
                            }|json_encode|raw }}
                        </script>
                        <div class="chart-wrap mb-4">
                            <canvas id="todayChart"></canvas>
                        </div>
                        <h5 class="text-muted mb-2">Atenciones por hora</h5>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-minimal" id="table-hoy">
                                <thead>
                                        <tr>
                                            <th>Hora</th>
                                            <th>Total turnos</th>
                                            <th>Reservas</th>
                                            <th>Espontaneos</th>
                                            <th>Espera reservas (min)</th>
                                            <th>Atencion reservas (min)</th>
                                            <th>Espera espontaneos (min)</th>
                                            <th>Atencion espontaneos (min)</th>
                                            <th class="time-total-col">Promedio espera total (min)</th>
                                            <th class="time-total-col">Promedio atencion total (min)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in todayRows %}
                                        {% set rowHour = row.hora|slice(0,2) %}
                                        <tr class="{{ rowHour > currentHour ? 'future-hour' : '' }}">
                                            <td>{{ row.hora }}</td>
                                            <td>{{ row.total_turnos }}</td>
                                            <td>{{ row.reservas }}</td>
                                            <td>{{ row.espontaneos }}</td>
                                            <td>{{ row.promedio_espera_reservas_min }}</td>
                                            <td>{{ row.promedio_atencion_reservas_min }}</td>
                                            <td>{{ row.promedio_espera_espontaneos_min }}</td>
                                            <td>{{ row.promedio_atencion_espontaneos_min }}</td>
                                            <td class="time-total-col">{{ row.promedio_espera_min }}</td>
                                            <td class="time-total-col">{{ row.promedio_atencion_min }}</td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="10" class="text-center text-muted">Sin datos para hoy.</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                                {% if todayTotals %}
                                    <tfoot>
                                        <tr>
                                            <th>Total</th>
                                            <th>{{ todayTotals.total_turnos }}</th>
                                            <th>{{ todayTotals.reservas }}</th>
                                            <th>{{ todayTotals.espontaneos }}</th>
                                            <th>{{ todayTotals.promedio_espera_reservas_min }}</th>
                                            <th>{{ todayTotals.promedio_atencion_reservas_min }}</th>
                                            <th>{{ todayTotals.promedio_espera_espontaneos_min }}</th>
                                            <th>{{ todayTotals.promedio_atencion_espontaneos_min }}</th>
                                            <th class="time-total-col">{{ todayTotals.promedio_espera_min }}</th>
                                            <th class="time-total-col">{{ todayTotals.promedio_atencion_min }}</th>
                                        </tr>
                                    </tfoot>
                                {% endif %}
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                            <h5 class="text-muted mb-0">Turnos</h5>
                            {% set exportTurnosParams = {} %}
                            {% if filters.local_id %}
                                {% set exportTurnosParams = exportTurnosParams|merge({'local_id': filters.local_id}) %}
                            {% endif %}
                            {% if filters.fila_id %}
                                {% set exportTurnosParams = exportTurnosParams|merge({'fila_id': filters.fila_id}) %}
                            {% endif %}
                            {% if todayTurnosSort is defined %}
                                {% set exportTurnosParams = exportTurnosParams|merge({'sort_turnos': todayTurnosSort.key, 'dir_turnos': todayTurnosSort.dir}) %}
                            {% endif %}
                            <a class="btn btn-sm btn-outline-secondary" href="{{ path('admin_export_turnos_hoy', exportTurnosParams) }}">Descargar Excel</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-minimal" id="table-turnos-hoy">
                                <thead>
                                    <tr>
                                        {% set isActive = todayTurnosSort.key == 'turno_label' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'turno_label', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Turno
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'identificador' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'identificador', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                RUT
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'nombres' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'nombres', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Nombres
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'apellidos' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'apellidos', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Apellidos
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'email' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'email', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Email
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'celular' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'celular', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Celular
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'ingreso' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'ingreso', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Ingreso
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'atencion' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'atencion', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Atencion
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'termino_atencion' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'termino_atencion', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Termino atencion
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'pospuesto' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'pospuesto', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Pospuesto
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'derivado' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'derivado', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Derivado
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'modulo' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'modulo', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Modulo
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'colaborador' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'colaborador', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Colaborador
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% set isActive = todayTurnosSort.key == 'fila' %}
                                        {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                        <th>
                                            <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'fila', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                Fila
                                                {% if isActive %}
                                                    <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                {% endif %}
                                            </a>
                                        </th>
                                        {% if not filters.local_id %}
                                            {% set isActive = todayTurnosSort.key == 'local' %}
                                            {% set nextDir = isActive and todayTurnosSort.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_turnos': 1, 'sort_turnos': 'local', 'dir_turnos': nextDir})) }}#table-turnos-hoy">
                                                    Local
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ todayTurnosSort.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                {% for row in todayTurnos %}
                                    <tr>
                                        <td>{{ row.turno_label }}</td>
                                        <td>{{ row.identificador }}</td>
                                        <td>{{ row.nombres }}</td>
                                        <td>{{ row.apellidos }}</td>
                                        <td>{{ row.email }}</td>
                                        <td>{{ row.celular }}</td>
                                        <td>{{ row.hora_ingreso }}</td>
                                        <td>{{ row.hora_atencion }}</td>
                                        <td>{{ row.hora_termino_atencion }}</td>
                                        <td>{{ row.hora_pospuesto }}</td>
                                        <td>{{ row.hora_derivado }}</td>
                                        <td>{{ row.modulo_nombre }}</td>
                                        <td>{{ row.colaborador }}</td>
                                        <td>{{ row.fila_nombre }}</td>
                                        {% if not filters.local_id %}
                                            <td>{{ row.local_nombre }}</td>
                                        {% endif %}
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="{{ not filters.local_id ? 15 : 14 }}" class="text-center text-muted">Sin turnos para hoy.</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="table-foot mt-3">
                            <div class="text-muted small">
                                Pagina {{ todayTurnosPagination.page }} de {{ todayTurnosPagination.pages }} · {{ todayTurnosPagination.total }} registros
                            </div>
                            <nav aria-label="Paginacion turnos">
                                {% set totalPages = todayTurnosPagination.pages %}
                                {% set currentPage = todayTurnosPagination.page %}
                                {% set startPage = currentPage - 2 %}
                                {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                {% set endPage = startPage + 4 %}
                                {% if endPage > totalPages %}{% set endPage = totalPages %}{% endif %}
                                {% if endPage - startPage < 4 %}
                                    {% set startPage = endPage - 4 %}
                                    {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                {% endif %}
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item {% if currentPage == 1 %}disabled{% endif %}">
                                        <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge({'page_turnos': currentPage > 1 ? currentPage - 1 : 1})) }}#table-turnos-hoy">Anterior</a>
                                    </li>
                                    {% for i in startPage..endPage %}
                                        <li class="page-item {% if i == currentPage %}active{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge({'page_turnos': i})) }}#table-turnos-hoy">{{ i }}</a>
                                        </li>
                                    {% endfor %}
                                    <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}">
                                        <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge({'page_turnos': currentPage < totalPages ? currentPage + 1 : totalPages})) }}#table-turnos-hoy">Siguiente</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    </div>
                </div>
                    </div>
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (!document.getElementById('hoy-content')) {
                        return;
                    }

                    var initHoyChart = function () {
                        var canvas = document.getElementById('todayChart');
                        if (!canvas || typeof Chart === 'undefined') {
                            return;
                        }
                        var dataTag = document.getElementById('today-chart-data');
                        if (!dataTag) {
                            return;
                        }
                        var payload = {};
                        try {
                            payload = JSON.parse(dataTag.textContent);
                        } catch (error) {
                            return;
                        }
                        var isAllOrigin = payload.origin === 'all';
                        var series = {
                            turnos: [
                                {
                                    label: 'Reservas',
                                    data: payload.reservas || [],
                                    borderColor: '#2563eb',
                                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                },
                                {
                                    label: 'Espontaneos',
                                    data: payload.espontaneos || [],
                                    borderColor: '#f97316',
                                    backgroundColor: 'rgba(249, 115, 22, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                }
                            ],
                            espera: [
                                {
                                    label: isAllOrigin ? 'Espera reservas (min)' : 'Espera (min)',
                                    data: isAllOrigin ? (payload.espera_reservas || []) : (payload.espera || []),
                                    borderColor: '#16a34a',
                                    backgroundColor: 'rgba(22, 163, 74, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                },
                                {
                                    label: isAllOrigin ? 'Espera espontaneos (min)' : '',
                                    data: isAllOrigin ? (payload.espera_espontaneos || []) : [],
                                    borderColor: '#0ea5e9',
                                    backgroundColor: 'rgba(14, 165, 233, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                }
                            ],
                            atencion: [
                                {
                                    label: isAllOrigin ? 'Atencion reservas (min)' : 'Atencion (min)',
                                    data: isAllOrigin ? (payload.atencion_reservas || []) : (payload.atencion || []),
                                    borderColor: '#7c3aed',
                                    backgroundColor: 'rgba(124, 58, 237, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                },
                                {
                                    label: isAllOrigin ? 'Atencion espontaneos (min)' : '',
                                    data: isAllOrigin ? (payload.atencion_espontaneos || []) : [],
                                    borderColor: '#db2777',
                                    backgroundColor: 'rgba(219, 39, 119, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                }
                            ],
                            cantidad: [
                                {
                                    label: 'Cantidad de turnos',
                                    data: payload.total || [],
                                    borderColor: '#2563eb',
                                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                                    pointRadius: 2,
                                    tension: 0.4,
                                    fill: true
                                }
                            ]
                        };

                        var modeSelect = document.getElementById('chartModeToday');
                        var defaultKey = isAllOrigin ? 'turnos' : 'cantidad';
                        if (!series[defaultKey]) {
                            defaultKey = 'turnos';
                        }
                        if (window.__todayChart) {
                            window.__todayChart.destroy();
                        }
                        window.__todayChart = new Chart(canvas, {
                            type: 'line',
                            data: {
                                labels: payload.labels || [],
                                datasets: series[defaultKey].filter(function (item) {
                                    return item.label !== '';
                                })
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    legend: {
                                        display: true,
                                        position: 'top'
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });

                        if (modeSelect) {
                            modeSelect.addEventListener('change', function () {
                                var key = modeSelect.value;
                                window.__todayChart.data.datasets = (series[key] || []).filter(function (item) {
                                    return item.label !== '';
                                });
                                window.__todayChart.update();
                            });
                        }
                    };

                    var replaceHoyContent = function (html, url) {
                        var parser = new DOMParser();
                        var doc = parser.parseFromString(html, 'text/html');
                        var newContent = doc.getElementById('hoy-content');
                        var currentContent = document.getElementById('hoy-content');
                        if (!newContent || !currentContent) {
                            window.location.href = url;
                            return;
                        }
                        currentContent.innerHTML = newContent.innerHTML;
                        initHoyChart();
                    };

                    var fetchHoy = function (url, options) {
                        var fetchOptions = options || {};
                        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                            .then(function (response) { return response.text(); })
                            .then(function (html) {
                                replaceHoyContent(html, url);
                                if (fetchOptions.pushState !== false) {
                                    history.pushState(null, '', url);
                                }
                            })
                            .catch(function () {
                                window.location.href = url;
                            });
                    };

                    var bindHoyAjax = function () {
                        if (window.__hoyAjaxBound) {
                            return;
                        }
                        window.__hoyAjaxBound = true;

                        document.addEventListener('submit', function (event) {
                            var form = event.target;
                            if (!form || form.id !== 'hoyOriginForm') {
                                return;
                            }
                            event.preventDefault();
                            var action = form.getAttribute('action') || window.location.href;
                            var formUrl = new URL(action, window.location.href);
                            var formData = new FormData(form);
                            formUrl.search = new URLSearchParams(formData).toString();
                            fetchHoy(formUrl.toString());
                        });

                        document.addEventListener('change', function (event) {
                            var target = event.target;
                            if (!target) {
                                return;
                            }
                            var form = null;
                            if (target.getAttribute && target.getAttribute('form') === 'hoyOriginForm') {
                                form = document.getElementById('hoyOriginForm');
                            } else if (target.closest) {
                                form = target.closest('#hoyOriginForm');
                            }
                            if (!form) {
                                return;
                            }
                            event.preventDefault();
                            var action = form.getAttribute('action') || window.location.href;
                            var formUrl = new URL(action, window.location.href);
                            var formData = new FormData(form);
                            formUrl.search = new URLSearchParams(formData).toString();
                            fetchHoy(formUrl.toString());
                        });

                        document.addEventListener('click', function (event) {
                            var link = event.target.closest('#hoy-content .pagination a, #hoy-content #table-turnos-hoy a');
                            if (!link) {
                                return;
                            }
                            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
                                return;
                            }
                            event.preventDefault();
                            fetchHoy(link.href);
                        });

                        window.addEventListener('popstate', function () {
                            fetchHoy(window.location.href, { pushState: false });
                        });
                    };

                    initHoyChart();
                    bindHoyAjax();
                });
            </script>
        {% elseif section == 'colaboradores' %}
            <div class="row">
                <div class="col-12">
                    <div class="card card-manager">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-user-tie mr-2"></i>Colaboradoras</h3>
                    </div>
                    <div class="card-body">
                        <form class="form-inline mb-3 align-items-center flex-wrap" method="get">
                            <input type="hidden" name="section" value="{{ section }}">
                            <input type="hidden" name="desde" value="{{ filters.desde }}">
                            <input type="hidden" name="hasta" value="{{ filters.hasta }}">
                            {% if filters.local_id %}
                                <input type="hidden" name="local_id" value="{{ filters.local_id }}">
                            {% endif %}
                            {% if filters.fila_id %}
                                <input type="hidden" name="fila_id" value="{{ filters.fila_id }}">
                            {% endif %}
                            <input type="hidden" name="page_collab" value="1">
                            <input type="hidden" name="page_collab_daily" value="1">
                            <input type="hidden" name="sort_collab" value="{{ sort.collab.key }}">
                            <input type="hidden" name="dir_collab" value="{{ sort.collab.dir }}">
                            <input type="hidden" name="sort_collab_daily" value="{{ sort.collabDaily.key }}">
                            <input type="hidden" name="dir_collab_daily" value="{{ sort.collabDaily.dir }}">
                            {% if monthOptions|length > 1 %}
                                <label class="mr-2 small text-muted" for="month">Mes</label>
                                <select id="month" name="month" class="form-control form-control-sm mr-3" onchange="this.form.submit()">
                                    {% for option in monthOptions %}
                                        <option value="{{ option.value }}" {% if option.value == selectedMonth %}selected{% endif %}>
                                            {{ option.label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                            <label class="mr-2 small text-muted" for="origin">Origen</label>
                            <select id="origin" name="origin" class="form-control form-control-sm" onchange="this.form.submit()">
                                <option value="all" {% if origin == 'all' %}selected{% endif %}>Todos</option>
                                <option value="0" {% if origin == '0' %}selected{% endif %}>Espontaneos</option>
                                <option value="2" {% if origin == '2' %}selected{% endif %}>Reservas</option>
                            </select>
                        </form>
                        <div class="d-flex justify-content-end mb-2">
                            {% set exportCollabParams = {
                                'desde': filters.desde,
                                'hasta': filters.hasta,
                                'origin': origin,
                                'month': selectedMonth
                            } %}
                            {% if filters.local_id %}
                                {% set exportCollabParams = exportCollabParams|merge({'local_id': filters.local_id}) %}
                            {% endif %}
                            {% if filters.fila_id %}
                                {% set exportCollabParams = exportCollabParams|merge({'fila_id': filters.fila_id}) %}
                            {% endif %}
                            <a class="btn btn-sm btn-outline-secondary" href="{{ path('admin_export_colaboradoras', exportCollabParams) }}">Descargar Excel</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-minimal" id="table-colaboradoras">
                                <thead>
                                        <tr>
                                            {% set isActive = sort.collab.key == 'colaboradora' %}
                                            {% set nextDir = isActive and sort.collab.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': 1, 'sort_collab': 'colaboradora', 'dir_collab': nextDir})) }}">
                                                    Colaboradora
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.collab.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.collab.key == 'total_atenciones_mes' %}
                                            {% set nextDir = isActive and sort.collab.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': 1, 'sort_collab': 'total_atenciones_mes', 'dir_collab': nextDir})) }}">
                                                    Total atenciones mes
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.collab.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.collab.key == 'dias_con_atencion' %}
                                            {% set nextDir = isActive and sort.collab.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': 1, 'sort_collab': 'dias_con_atencion', 'dir_collab': nextDir})) }}">
                                                    Dias con atencion
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.collab.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                            {% set isActive = sort.collab.key == 'promedio_diario' %}
                                            {% set nextDir = isActive and sort.collab.dir == 'asc' ? 'desc' : 'asc' %}
                                            <th>
                                                <a class="text-dark" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': 1, 'sort_collab': 'promedio_diario', 'dir_collab': nextDir})) }}">
                                                    Promedio diario
                                                    {% if isActive %}
                                                        <i class="fas fa-sort-{{ sort.collab.dir == 'asc' ? 'up' : 'down' }} ml-1"></i>
                                                    {% endif %}
                                                </a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in collabRows %}
                                        {% if row.type == 'header' %}
                                            <tr class="header-row">
                                                <td colspan="4">{{ row.label }}</td>
                                            </tr>
                                        {% else %}
                                            <tr>
                                                <td>{{ row.colaboradora|upper }}</td>
                                                <td>{{ row.total_atenciones_mes }}</td>
                                                <td>{{ row.dias_con_atencion }}</td>
                                                <td>{{ row.promedio_diario }}</td>
                                            </tr>
                                        {% endif %}
                                    {% else %}
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">Sin datos para el periodo seleccionado.</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-foot mt-3">
                                <div class="text-muted small">
                                    Pagina {{ pagination.collab.page }} de {{ pagination.collab.pages }} · {{ pagination.collab.total }} registros
                                </div>
                                <nav aria-label="Paginacion colaboradoras">
                                    {% set totalPages = pagination.collab.pages %}
                                    {% set currentPage = pagination.collab.page %}
                                    {% set startPage = currentPage - 2 %}
                                    {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% set endPage = startPage + 4 %}
                                    {% if endPage > totalPages %}{% set endPage = totalPages %}{% endif %}
                                    {% if endPage - startPage < 4 %}
                                        {% set startPage = endPage - 4 %}
                                        {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% endif %}
                                    <ul class="pagination pagination-sm mb-0">
                                        <li class="page-item {% if currentPage == 1 %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': currentPage > 1 ? currentPage - 1 : 1})) }}">Anterior</a>
                                        </li>
                                        {% for i in startPage..endPage %}
                                            <li class="page-item {% if i == currentPage %}active{% endif %}">
                                                <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': i})) }}">{{ i }}</a>
                                            </li>
                                        {% endfor %}
                                        <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab': currentPage < totalPages ? currentPage + 1 : totalPages})) }}">Siguiente</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card card-manager">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-clipboard-list mr-2"></i>Detalle colaboradoras</h3>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-2">
                            {% set exportCollabDetailParams = {
                                'desde': filters.desde,
                                'hasta': filters.hasta,
                                'origin': origin,
                                'month': selectedMonth
                            } %}
                            {% if filters.local_id %}
                                {% set exportCollabDetailParams = exportCollabDetailParams|merge({'local_id': filters.local_id}) %}
                            {% endif %}
                            {% if filters.fila_id %}
                                {% set exportCollabDetailParams = exportCollabDetailParams|merge({'fila_id': filters.fila_id}) %}
                            {% endif %}
                            <a class="btn btn-sm btn-outline-secondary" href="{{ path('admin_export_colaboradoras_detalle', exportCollabDetailParams) }}">Descargar Excel</a>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-minimal" id="table-detalle-colaboradoras">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Total atenciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for row in collabDailyRows %}
                                    {% if row.type == 'header' %}
                                        <tr class="header-row">
                                            <td colspan="2">{{ row.label|upper }}</td>
                                        </tr>
                                    {% elseif row.type == 'total' %}
                                        <tr class="total-row">
                                            <td>{{ row.label|upper }}</td>
                                            <td>{{ row.total_atenciones }}</td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td>{{ row.fecha }}</td>
                                            <td>{{ row.total_atenciones }}</td>
                                        </tr>
                                        {% endif %}
                                    {% else %}
                                        <tr>
                                            <td colspan="3" class="text-center text-muted">Sin datos para el periodo seleccionado.</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-foot mt-3">
                                <div class="text-muted small">
                                    Pagina {{ pagination.collabDaily.page }} de {{ pagination.collabDaily.pages }} · {{ pagination.collabDaily.total }} registros
                                </div>
                                <nav aria-label="Paginacion detalle colaboradoras">
                                    {% set totalPages = pagination.collabDaily.pages %}
                                    {% set currentPage = pagination.collabDaily.page %}
                                    {% set startPage = currentPage - 2 %}
                                    {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% set endPage = startPage + 4 %}
                                    {% if endPage > totalPages %}{% set endPage = totalPages %}{% endif %}
                                    {% if endPage - startPage < 4 %}
                                        {% set startPage = endPage - 4 %}
                                        {% if startPage < 1 %}{% set startPage = 1 %}{% endif %}
                                    {% endif %}
                                    <ul class="pagination pagination-sm mb-0">
                                        <li class="page-item {% if currentPage == 1 %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab_daily': currentPage > 1 ? currentPage - 1 : 1})) }}">Anterior</a>
                                        </li>
                                        {% for i in startPage..endPage %}
                                            <li class="page-item {% if i == currentPage %}active{% endif %}">
                                                <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab_daily': i})) }}">{{ i }}</a>
                                            </li>
                                        {% endfor %}
                                        <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}">
                                            <a class="page-link" href="{{ path('admin', baseParams|merge(paginationParams)|merge(sortParams)|merge({'page_collab_daily': currentPage < totalPages ? currentPage + 1 : totalPages})) }}">Siguiente</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% elseif section == 'reportes' %}
            <div class="row">
                <div class="col-12">
                    <div class="card card-manager">
                        <div class="card-body">
                            <h3 class="report-title mb-1">{{ report.headline.title }}</h3>
                            <div class="text-muted">{{ report.headline.subtitle }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="card card-manager">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Cantidad de turnos por mes</h3>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="reportTurnosMes">Descargar PNG</button>
                        </div>
                        <div class="card-body">
                            <div class="chart-wrap chart-wrap-lg">
                                <canvas id="reportTurnosMes"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card card-manager">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Tiempo de espera por mes (min)</h3>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="reportEsperaMes">Descargar PNG</button>
                        </div>
                        <div class="card-body">
                            <div class="chart-wrap chart-wrap-lg">
                                <canvas id="reportEsperaMes"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="card card-manager">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">% de reservas y cantidad</h3>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="reportPorcentaje">Descargar PNG</button>
                        </div>
                        <div class="card-body">
                            <div class="chart-wrap chart-wrap-lg">
                                <canvas id="reportPorcentaje"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card card-manager">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Promedio de espera total (min)</h3>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="reportWaitTotals">Descargar PNG</button>
                        </div>
                        <div class="card-body">
                            <div class="chart-wrap chart-wrap-sm">
                                <canvas id="reportWaitTotals"></canvas>
                            </div>
                            <div class="d-flex justify-content-between text-muted small mt-2">
                                <span>Reserva: {{ report.waitTotals.reservas }}</span>
                                <span>Espontaneo: {{ report.waitTotals.espontaneos }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card card-manager">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Atenciones por hora</h3>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-download-canvas="reportPorHora">Descargar PNG</button>
                        </div>
                        <div class="card-body">
                            <div class="chart-wrap chart-wrap-lg">
                                <canvas id="reportPorHora"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (typeof Chart === 'undefined') {
                        return;
                    }
                    var monthLabels = {{ report.months.labels|json_encode|raw }};
                    var reservas = {{ report.months.reservas|json_encode|raw }};
                    var espontaneos = {{ report.months.espontaneos|json_encode|raw }};
                    var esperaReservas = {{ report.months.espera_reservas|json_encode|raw }};
                    var esperaEspontaneos = {{ report.months.espera_espontaneos|json_encode|raw }};
                    var percentReservas = {{ report.months.percent|json_encode|raw }};
                    var countReservas = {{ report.months.count|json_encode|raw }};

                    new Chart(document.getElementById('reportTurnosMes').getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: monthLabels,
                            datasets: [
                                {
                                    label: 'Reservas',
                                    data: reservas,
                                    backgroundColor: 'rgba(37, 99, 235, 0.45)',
                                    borderColor: '#2563eb',
                                    borderWidth: 1
                                },
                                {
                                    label: 'Espontaneos',
                                    data: espontaneos,
                                    backgroundColor: 'rgba(249, 115, 22, 0.45)',
                                    borderColor: '#f97316',
                                    borderWidth: 1
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                        precision: 0
                                    }
                                }]
                            }
                        }
                    });

                    new Chart(document.getElementById('reportEsperaMes').getContext('2d'), {
                        type: 'line',
                        data: {
                            labels: monthLabels,
                            datasets: [
                                {
                                    label: 'Reserva',
                                    data: esperaReservas,
                                    borderColor: '#7c3aed',
                                    backgroundColor: 'rgba(124, 58, 237, 0.08)',
                                    lineTension: 0.4,
                                    fill: true,
                                    pointRadius: 2
                                },
                                {
                                    label: 'Espontaneo',
                                    data: esperaEspontaneos,
                                    borderColor: '#16a34a',
                                    backgroundColor: 'rgba(22, 163, 74, 0.08)',
                                    lineTension: 0.4,
                                    fill: true,
                                    pointRadius: 2
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });

                    new Chart(document.getElementById('reportPorcentaje').getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: monthLabels,
                            datasets: [
                                {
                                    type: 'bar',
                                    label: '% Reservas',
                                    data: percentReservas,
                                    backgroundColor: 'rgba(148, 42, 120, 0.55)',
                                    borderColor: '#942a78',
                                    yAxisID: 'y'
                                },
                                {
                                    type: 'line',
                                    label: 'Cantidad reservas',
                                    data: countReservas,
                                    borderColor: '#4e2c7a',
                                    backgroundColor: 'rgba(78, 44, 122, 0.1)',
                                    yAxisID: 'y1',
                                    lineTension: 0.4,
                                    pointRadius: 2
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [
                                    {
                                        id: 'y',
                                        ticks: {
                                            beginAtZero: true,
                                            callback: function (value) { return value + '%'; }
                                        }
                                    },
                                    {
                                        id: 'y1',
                                        position: 'right',
                                        gridLines: { drawOnChartArea: false },
                                        ticks: {
                                            beginAtZero: true,
                                            precision: 0
                                        }
                                    }
                                ]
                            }
                        }
                    });

                    new Chart(document.getElementById('reportWaitTotals').getContext('2d'), {
                        type: 'horizontalBar',
                        data: {
                            labels: ['Reserva', 'Espontaneo'],
                            datasets: [
                                {
                                    label: 'Minutos',
                                    data: [{{ report.waitTotals.reservas }}, {{ report.waitTotals.espontaneos }}],
                                    backgroundColor: ['rgba(148, 42, 120, 0.55)', 'rgba(78, 44, 122, 0.55)'],
                                    borderColor: ['#942a78', '#4e2c7a']
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            legend: { display: false },
                            scales: {
                                xAxes: [{
                                    ticks: { beginAtZero: true }
                                }]
                            }
                        }
                    });

                    new Chart(document.getElementById('reportPorHora').getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: {{ report.hourly.labels|json_encode|raw }},
                            datasets: [
                                {
                                    label: 'Atenciones',
                                    data: {{ report.hourly.values|json_encode|raw }},
                                    backgroundColor: 'rgba(54, 52, 104, 0.55)',
                                    borderColor: '#363468'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                        precision: 0
                                    }
                                }]
                            }
                        }
                    });
                });
            </script>
        {% endif %}
    </div>
</div>
<script>
    document.addEventListener('click', function (event) {
        var target = event.target;
        if (!target || !target.matches('[data-download-canvas]')) {
            return;
        }
        var canvasId = target.getAttribute('data-download-canvas');
        var canvas = canvasId ? document.getElementById(canvasId) : null;
        if (!canvas) {
            return;
        }
        var link = document.createElement('a');
        link.href = canvas.toDataURL('image/png', 1.0);
        link.download = canvasId + '.png';
        link.click();
    });

</script>
{% endblock %}