<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consultas OMIE</title>
    <link rel="icon" href="logo.png" type="image/png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="page-shell">
        <div class="container py-4 py-lg-5">
            <header class="hero-card mb-4">
                <div class="hero-brand">
                    <img src="logo.png" alt="Logo OMIE" class="hero-logo">
                    <div>
                        <p class="eyebrow mb-2">Mercado mayorista y seguimiento OMIE</p>
                        <h1 class="hero-title mb-2">Análisis y seguimiento del mercado OMIE</h1>
                        <p class="hero-copy mb-0">
                            Consulta diaria, mensual y anual con gráfica por 24 horas o por cuartos de hora,
                            indicadores resumen, control de carga y seguimiento de datos del mercado.
                        </p>
                        <p class="hero-copy mt-2 mb-0">Desarrollado por el departamento de IT de Elega.</p>
                    </div>
                </div>
                <div class="hero-actions">
                    <a href="https://www.omie.es/" target="_blank" rel="noreferrer" class="btn btn-outline-primary">
                        <i class="bi bi-box-arrow-up-right"></i>
                        Web OMIE
                    </a>
                </div>
            </header>

            <section class="panel-card mb-4">
                <div class="section-heading">
                    <div>
                        <p class="section-kicker mb-1">Filtros</p>
                        <h2 class="section-title mb-0">Consulta y análisis</h2>
                    </div>
                </div>

                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label for="fecha_inicio" class="form-label">Fecha inicio</label>
                        <input type="date" id="fecha_inicio" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label for="fecha_fin" class="form-label">Fecha fin</label>
                        <input type="date" id="fecha_fin" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <label for="tipo_consulta" class="form-label mb-0">Tipo de consulta</label>
                            <button
                                type="button"
                                id="openConsultaInfo"
                                class="btn btn-outline-secondary btn-sm info-trigger"
                                data-bs-toggle="modal"
                                data-bs-target="#consultaInfoModal"
                                aria-label="Ver informacion de la consulta"
                            >
                                <i class="bi bi-info-circle"></i>
                            </button>
                        </div>
                        <select id="tipo_consulta" class="form-select mt-2">
                            <option value="precio_medio">Comparativa OMIE y horas solar</option>
                            <option value="precio_solar">Precio medio horas solar</option>
                            <option value="precio_tarifa">Precio medio por tarifa</option>
                            <option value="consumo_tarifa">Consumo por tarifa</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-grid gap-2 d-md-flex justify-content-md-end">
                        <button id="filtrar" class="btn btn-primary btn-soft">
                            <i class="bi bi-search"></i>
                            Filtrar
                        </button>
                        <button id="reset" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-counterclockwise"></i>
                            Reset
                        </button>
                    </div>
                </div>
            </section>

            
            <section class="panel-card mb-4">
                <div class="section-heading section-heading-tight">
                    <div>
                        <p class="section-kicker mb-1">Resultados</p>
                        <h2 class="section-title mb-0">Tabla filtrada</h2>
                    </div>
                    <button id="exportTable" class="btn btn-outline-dark d-none">
                        <i class="bi bi-file-earmark-excel"></i>
                        Exportar tabla visible
                    </button>
                </div>
                <div id="resultados" class="results-shell">
                    <div class="empty-state">
                        <i class="bi bi-graph-up-arrow"></i>
                        <p class="mb-0">Aplica un filtro para cargar una tabla comparativa.</p>
                    </div>
                </div>
                <div id="resultsPagination" class="results-pagination d-none"></div>
            </section>

            <section class="dashboard-summary panel-card mb-4">
                <div class="section-heading section-heading-tight mb-3">
                    <div>
                        <p class="section-kicker mb-1">Resumen de la gráfica principal</p>
                        <h2 class="section-title mb-0">Indicadores del periodo mostrado</h2>
                    </div>
                    <p class="dashboard-summary-copy mb-0">
                        Estas tarjetas se actualizan según la fecha, la vista y la resolución elegidas en la gráfica principal.
                    </p>
                </div>

                <div class="dashboard-grid" id="dashboardCards">
                    <article class="metric-card">
                        <span class="metric-label">Media día</span>
                        <strong class="metric-value" data-metric="daily-average">--</strong>
                    <span class="metric-unit">EUR/MWh</span>
                        <span class="metric-foot" data-metric-foot="daily-average">Selecciona una fecha</span>
                    </article>
                    <article class="metric-card">
                        <span class="metric-label">Min / Max día</span>
                        <strong class="metric-value" data-metric="daily-range">--</strong>
                        <div class="metric-dual">
                            <span class="metric-dual-line" data-metric="daily-min">Min: --</span>
                            <span class="metric-dual-line" data-metric="daily-max">Max: --</span>
                        </div>
                        <span class="metric-foot" data-metric-foot="daily-range">Rango horario actual</span>
                    </article>
                    <article class="metric-card">
                        <span class="metric-label">Media del mes</span>
                        <strong class="metric-value" data-metric="month-average">--</strong>
                    <span class="metric-unit">EUR/MWh</span>
                        <span class="metric-foot" data-metric-foot="month-average">Cobertura mensual</span>
                    </article>
                    <article class="metric-card">
                        <span class="metric-label">Media del año</span>
                        <strong class="metric-value" data-metric="year-average">--</strong>
                    <span class="metric-unit">EUR/MWh</span>
                        <span class="metric-foot" data-metric-foot="year-average">Cobertura anual</span>
                    </article>
                    <article class="metric-card">
                        <span class="metric-label">Integridad 24h</span>
                        <strong class="metric-value" data-metric="integrity-24">--</strong>
                        <span class="metric-foot" data-metric-foot="integrity-24">Horas cargadas</span>
                    </article>
                    <article class="metric-card">
                        <span class="metric-label">Integridad 15 min</span>
                        <strong class="metric-value" data-metric="integrity-96">--</strong>
                        <span class="metric-foot" data-metric-foot="integrity-96">Cuartos cargados</span>
                    </article>
                </div>
            </section>

            <div class="row g-4">
                <div class="col-xl-9">
                    <section class="panel-card h-100">
                        <div class="section-heading section-heading-tight">
                            <div>
                                <p class="section-kicker mb-1">Gráfica principal</p>
                                <h2 id="chartTitle" class="section-title mb-1">Precio del mercado diario</h2>
                                <p id="chartSubtitle" class="section-subtitle mb-0">Carga diaria por 24 horas o por cuartos de hora</p>
                            </div>
                            <div class="toolbar">
                                <div class="toolbar-group">
                                    <label for="fecha_select" class="visually-hidden">Fecha gráfica</label>
                                    <input type="date" id="fecha_select" class="form-control">
                                </div>
                                <div class="toolbar-group segmented" role="group" aria-label="Vista temporal">
                                    <button id="mostrarDia" class="btn btn-primary is-active">Día</button>
                                    <button id="mostrarMes" class="btn btn-outline-primary">Mes</button>
                                    <button id="mostrarAnio" class="btn btn-outline-primary">Año</button>
                                </div>
                                <div class="toolbar-group segmented" role="group" aria-label="Resolucion">
                                    <button id="resolution24" class="btn btn-success is-active">24h</button>
                                    <button id="resolution96" class="btn btn-outline-success">15 min</button>
                                </div>
                                <div class="toolbar-group">
                                    <button id="exportChart" class="btn btn-outline-dark">
                                        <i class="bi bi-download"></i>
                                        Exportar Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="chart-shell">
                            <canvas id="graficaPrecios"></canvas>
                        </div>
                        <div id="chartMeta" class="chart-meta"></div>
                    </section>
                </div>

                <div class="col-xl-3">
                    <section class="panel-card h-100">
                        <div class="section-heading section-heading-tight">
                            <div>
                                <p class="section-kicker mb-1">Integridad de carga</p>
                                <h2 class="section-title mb-0">Alertas</h2>
                            </div>
                            <button id="refreshAlerts" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-repeat"></i>
                                Actualizar
                            </button>
                        </div>
                        <div id="alertsSummary" class="alerts-summary"></div>
                        <div id="alertsList" class="alerts-list"></div>
                    </section>
                </div>
            </div>

            <section id="detailSection" class="panel-card mt-4 d-none">
                <div class="section-heading section-heading-tight">
                    <div>
                        <p class="section-kicker mb-1">Detalle</p>
                        <h2 class="section-title mb-0">Día seleccionado</h2>
                    </div>
                    <button id="toggleDetalle" class="btn btn-outline-secondary btn-sm d-none">
                        Ocultar detalle
                    </button>
                </div>
                <div id="detalle" class="detail-panel detail-empty">Selecciona una fecha de la tabla para ver el detalle horario.</div>
            </section>

        </div>
    </div>

    <div class="modal fade" id="consultaInfoModal" tabindex="-1" aria-labelledby="consultaInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content consulta-modal">
                <div class="modal-header border-0 pb-0">
                    <div>
                        <p class="section-kicker mb-1">Ayuda</p>
                        <h5 class="modal-title" id="consultaInfoModalLabel">Detalle de la consulta</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="consulta-info-modal">
                        <strong id="consultaInfoTitle">Comparativa OMIE y horas solar</strong>
                        <span id="consultaInfoDesc">Compara el precio medio diario OMIE con el precio medio diario de horas solar para el rango seleccionado.</span>
                        <span id="consultaInfoSource">Consulta BD: OMIE_PRE y LIST_OMIE_PM_HR_SOLARES</span>
                        <span id="consultaInfoFields">Muestra: medias diarias, mensuales y anuales, con exportacion por dia.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script src="assets/js/scripts.js"></script>
</body>
</html>
