@extends('layout.administrator.index')
@section('title', 'Dashboard')

@section('css')
    <link href="{{ asset('assets/minimalpro/vendor_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            height: 31px;
            font-size: 0.875rem;
        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 29px;
            padding-left: 12px;
        }
        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 29px;
        }
        .dashboard-filter-select + .select2-container {
            width: 100% !important;
        }
        .dashboard-filter-select + .select2-container .select2-selection--single,
        .dashboard-filter-select + .select2-container .select2-selection--multiple {
            border: 1px solid #d2d6de;
            min-height: 31px;
            border-radius: 0;
            font-size: 0.875rem;
        }
        .dashboard-filter-select + .select2-container .select2-selection--multiple {
            padding: 2px 4px;
        }
        .dashboard-filter-select + .select2-container .select2-selection--multiple .select2-selection__choice {
            background: #3c8dbc;
            border: 1px solid #2f7697;
            color: #fff;
            border-radius: 3px;
            margin-top: 3px;
        }
        .dashboard-filter-select + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        .charts-loading-overlay {
            position: absolute;
            inset: 0;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.72);
            z-index: 20;
            pointer-events: none;
        }
        .charts-loading-overlay.is-visible {
            display: flex;
            pointer-events: auto;
        }
        .chart-filter-row {
            display: block !important;
            padding: 8px 10px 10px;
            background: #f8f9fa;
            border-top: 1px solid #e3e6ea;
            margin-top: 6px;
        }
        .chart-filter-group {
            display: block;
            width: 100%;
            margin-bottom: 5px;
            text-align: left;
        }
        .chart-filter-group label {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            color: #6c757d;
            margin-bottom: 2px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .chart-filter-group select {
            display: block;
            width: 100%;
            height: 31px;
            padding: 4px 8px;
            font-size: 0.8rem;
            color: #555;
            background-color: #fff;
            border: 1px solid #d2d6de;
            border-radius: 0;
            box-shadow: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23999' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 6px center;
            padding-right: 22px;
            cursor: pointer;
            transition: border-color 0.15s;
        }
        .chart-filter-group select:focus {
            outline: none;
            border-color: #3c8dbc;
        }
        .chart-filter-toggle {
            position: absolute;
            top: 5px;
            right: 7px;
            background: #fff;
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 2px 7px;
            font-size: 0.74rem;
            color: #6c757d;
            cursor: pointer;
            line-height: 1.6;
            z-index: 1;
            transition: all 0.15s ease;
        }
        .chart-filter-toggle:hover {
            background: #e9ecef;
            border-color: #adb5bd;
            color: #333;
        }
        .chart-filter-toggle.active {
            background: #dff0d8;
            border-color: #3c763d;
            color: #3c763d;
        }
        .download-launcher {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
            padding-top: 0;
        }
        .download-launcher-spacer {
            display: block;
            width: 100%;
            height: 24px;
            margin-bottom: 0.25rem;
        }
        .download-launcher .btn {
            min-width: 210px;
        }
        .download-modal-header {
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 12px;
        }
        .download-modal-subtitle {
            display: block;
            color: #6b7280;
            font-size: 0.85rem;
            margin-top: 4px;
        }
        .download-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .download-toolbar-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .download-selection-count {
            font-size: 0.85rem;
            font-weight: 600;
            color: #4b5563;
        }
        #chartsCheckboxList {
            width: 100%;
        }
        #downloadChartsModal .select2-container {
            width: 100% !important;
        }
        #downloadChartsModal .select2-container--default .select2-selection--multiple {
            border: 1px solid #d2d6de;
            border-radius: 4px;
            min-height: 42px;
            padding: 4px;
        }
        #downloadChartsModal .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #3c8dbc;
        }
        #downloadChartsModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background: #3c8dbc;
            border: 1px solid #2f7697;
            color: #fff;
            border-radius: 3px;
            padding: 1px 6px;
            font-size: 0.82rem;
        }
        #downloadChartsModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
            margin-right: 6px;
        }
        #downloadChartsModal .select2-results__option {
            font-size: 0.9rem;
        }
        .download-config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            margin-top: 16px;
        }
        .download-config-card {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f8fafc;
            padding: 14px;
        }
        .download-config-card label {
            display: block;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #4b5563;
            margin-bottom: 8px;
        }
        .download-config-help {
            margin-top: 8px;
            font-size: 0.8rem;
            color: #6b7280;
        }
        .download-feedback {
            font-size: 0.85rem;
            font-weight: 600;
        }
        @media (max-width: 767px) {
            .download-launcher {
                justify-content: stretch;
                margin-top: 10px;
                padding-top: 0;
            }
            .download-launcher-spacer {
                display: none;
            }
            .download-launcher .btn {
                width: 100%;
                min-width: 0;
            }
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper bg-white">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="#"><i class="fa fa-dashboard"></i> Inicio</a> </li>
            </ol>
        </section>
        <section class="content">
            <div class="box">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="container-fluid">
                            <div class="card mb-3">
                                <div class="card-body p-3">
                                    <div class="form-row">
                                        <div class="form-group col-md-6 col-lg-3">
                                            <label class="small font-weight-bold">Fecha informe</label>
                                            <div class="d-flex align-items-center">
                                                <input type="date" id="dateFromFilter" class="form-control form-control-sm">
                                                <span class="mx-2">-</span>
                                                <input type="date" id="dateToFilter" class="form-control form-control-sm">
                                            </div>
                                        </div>
                                        <div class="form-group col-6 col-md-2 col-lg-1">
                                            <label class="small font-weight-bold">Año</label>
                                            <select id="yearFilter" class="form-control form-control-sm">
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-4 download-launcher align-self-end">
                                            <div class="download-launcher-spacer" aria-hidden="true"></div>
                                            <button class="btn btn-primary" id="downloadChartsBtn" type="button">
                                                <i class="fa fa-download"></i> Descargar gráficas disponibles
                                            </button>
                                        </div>
                                        <div class="modal fade" id="downloadChartsModal" tabindex="-1" role="dialog" aria-labelledby="downloadChartsModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header download-modal-header">
                                                        <div>
                                                            <h5 class="modal-title" id="downloadChartsModalLabel">Centro de descarga</h5>
                                                            <span class="download-modal-subtitle">Seleccione una o varias gráficas, el formato y si desea archivos separados o un ZIP unico.</span>
                                                        </div>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form id="downloadChartsForm">
                                                            <div class="form-group mb-2">
                                                                <div class="d-flex justify-content-between align-items-center mb-1">
                                                                    <label class="mb-0 small font-weight-bold">Gráficas a descargar <span class="text-muted font-weight-normal" id="downloadSelectionCount">(0 seleccionadas)</span></label>
                                                                    <div>
                                                                        <button type="button" class="btn btn-default btn-xs" id="selectAllChartsBtn">Todas</button>
                                                                        <button type="button" class="btn btn-default btn-xs" id="clearAllChartsBtn">Ninguna</button>
                                                                    </div>
                                                                </div>
                                                                <select id="chartsCheckboxList" class="form-control" multiple></select>
                                                                <small class="text-muted">Puede seleccionar una o varias gráficas y quitar cada una con la `x`.</small>
                                                            </div>
                                                            <div class="download-config-grid">
                                                                <div class="download-config-card">
                                                                    <label for="downloadFormat">Formato de descarga</label>
                                                                    <select class="form-control" id="downloadFormat" required>
                                                                        <option value="pdf">PDF</option>
                                                                        <option value="png">PNG</option>
                                                                        <option value="jpg">JPG</option>
                                                                    </select>
                                                                    <div class="download-config-help">Cada grafica se exporta con su encabezado visible y en fondo blanco.</div>
                                                                </div>
                                                                <div class="download-config-card">
                                                                    <label for="downloadMode">Modo de descarga</label>
                                                                    <select class="form-control" id="downloadMode" required>
                                                                        <option value="separate">Cada elemento por separado</option>
                                                                        <option value="zip">Todos los elementos en un archivo ZIP</option>
                                                                    </select>
                                                                    <div class="download-config-help" id="downloadModeHelp">Se descargara un archivo por cada grafica seleccionada.</div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <span id="downloadChartsMsg" class="download-feedback text-danger mr-auto"></span>
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                                        <button type="button" class="btn btn-success" id="confirmDownloadCharts">Descargar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-3 mb-3">
                                    <label class="small font-weight-bold">Flota</label>
                                    <select class="form-control form-control-sm dashboard-filter-select" id="fleetFilter" multiple>
                                        @foreach($fleetTypes as $fleet)
                                            <option value="{{ $fleet['id'] ?? $fleet->id }}" data-name="{{ $fleet['name'] ?? $fleet->name }}">{{ $fleet['name'] ?? $fleet->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="small font-weight-bold">Asset class</label>
                                    <select class="form-control form-control-sm dashboard-filter-select" id="assetClassFilter" multiple>
                                        @foreach($systemTypes as $systemType)
                                            <option value="{{ $systemType->id }}" data-name="{{ $systemType->name }}">{{ $systemType->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="small font-weight-bold">Report status</label>
                                    <select class="form-control form-control-sm dashboard-filter-select" id="statusFilter" multiple>
                                        <option value="2">Normal</option>
                                        <option value="1">Anormal</option>
                                        <option value="3">Crítico</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12 position-relative" id="chartsContainer">
                            <div id="chartsLoadingOverlay" class="charts-loading-overlay" style="display: none;">
                                <div class="text-center">
                                    <i class="fa fa-spinner fa-spin" aria-hidden="true" style="font-size: 24px;"></i>
                                    <div class="mt-2 font-weight-bold">Cargando gráficas...</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Resumen de condiciones</h6>
                                            <small class="text-muted d-block">Total: <span id="totalHealthPie">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_healthPie" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_healthPie" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_healthPie"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_healthPie"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_healthPie">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="healthPieChart" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Reportes por mes</h6>
                                            <small class="text-muted d-block">Total: <span id="totalAlarmsBySystem">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_alarmsBySystem" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_alarmsBySystem" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_alarmsBySystem"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_alarmsBySystem"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_alarmsBySystem">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="alarmsBySystemChart" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Reportes por cliente</h6>
                                            <small class="text-muted d-block">Total: <span id="totalHistoricalReport">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_historical" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_historical" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_historical"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_historical"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_historical">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="historicalReport" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Estado del lubricante</h6>
                                            <small class="text-muted d-block">Total: <span id="totalLubeHealth">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_lubeHealth" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_lubeHealth" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_lubeHealth"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_lubeHealth"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_lubeHealth">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="lubeHealthChart" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Estado de contaminación</h6>
                                            <small class="text-muted d-block">Total: <span id="totalContamination">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_contamination" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_contamination" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_contamination"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_contamination"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_contamination">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="contaminationChart" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Estado de desgaste</h6>
                                            <small class="text-muted d-block">Total: <span id="totalWear">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_wear" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_wear" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_wear"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_wear"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_wear">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="wearChart" style="height:30vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="box">
                                        <div class="box-header p-0 text-center" style="position:relative;">
                                            <h6 class="box-title font-weight-bold">Reportes por componente <small class="text-muted">(Top 20)</small></h6>
                                            <small class="text-muted d-block">Total: <span id="totalComponent">0</span></small>
                                            <button class="chart-filter-toggle" data-target="filterRow_component" title="Filtros de esta gráfica"><i class="fa fa-filter"></i></button>
                                            <div class="chart-filter-row" id="filterRow_component" style="display:none;">
                                                <div class="chart-filter-group">
                                                    <label>Flota</label>
                                                    <select id="chartFleet_component"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Asset class</label>
                                                    <select id="chartAsset_component"><option value="">Todas</option></select>
                                                </div>
                                                <div class="chart-filter-group">
                                                    <label>Estado</label>
                                                    <select id="chartStatus_component">
                                                        <option value="">Todos</option>
                                                        <option value="2">Normal</option>
                                                        <option value="1">Anormal</option>
                                                        <option value="3">Crítico</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box-body p-2">
                                            <div class="chart">
                                                <canvas id="componentChart" style="height:45vh;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/administrator/js/dashboard-charts-core.js') }}"></script>
    <script type="text/javascript">
        // --- Descarga de gráficas ---
        // Nombres de las gráficas y sus canvas IDs
        const chartDefinitions = [
            { id: 'healthPieChart', name: 'Resumen de condiciones', type: 'Grafica', chartRef: 'healthPieChart' },
            { id: 'alarmsBySystemChart', name: 'Reportes por mes', type: 'Grafica', chartRef: 'alarmsBySystemChart' },
            { id: 'historicalReport', name: 'Reportes por cliente', type: 'Grafica', chartRef: 'historicalReportChart' },
            { id: 'lubeHealthChart', name: 'Estado del lubricante', type: 'Grafica', chartRef: 'lubeHealthChart' },
            { id: 'contaminationChart', name: 'Estado de contaminacion', type: 'Grafica', chartRef: 'contaminationChart' },
            { id: 'wearChart', name: 'Estado de desgaste', type: 'Grafica', chartRef: 'wearChart' },
            { id: 'componentChart', name: 'Reportes por componente', type: 'Grafica', chartRef: 'componentChart' },
        ];

        function getChartDefinition(id) {
            return chartDefinitions.find(function(chart) {
                return chart.id === id;
            }) || null;
        }

        function getChartInstance(id) {
            const def = getChartDefinition(id);
            if (!def || !def.chartRef) {
                return null;
            }

            const chartInstances = {
                healthPieChart: healthPieChart,
                alarmsBySystemChart: alarmsBySystemChart,
                historicalReportChart: historicalReportChart,
                lubeHealthChart: lubeHealthChart,
                contaminationChart: contaminationChart,
                wearChart: wearChart,
                componentChart: componentChart,
            };

            return chartInstances[def.chartRef] || null;
        }

        function sanitizeFileName(value) {
            return String(value || 'grafica')
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/[^a-zA-Z0-9_-]+/g, '_')
                .replace(/_+/g, '_')
                .replace(/^_|_$/g, '')
                .toLowerCase();
        }

        function getSelectedChartIds() {
            const select = document.getElementById('chartsCheckboxList');
            return select ? Array.from(select.selectedOptions).map(function(o) { return o.value; }) : [];
        }

        function initDownloadChartsSelect2() {
            if (!window.jQuery || !$.fn.select2) {
                return;
            }

            var $select = $('#chartsCheckboxList');
            if ($select.length === 0) {
                return;
            }

            if ($select.data('select2')) {
                return;
            }

            $select.select2({
                placeholder: 'Seleccione gráficas',
                width: '100%',
                closeOnSelect: false,
                dropdownParent: $('#downloadChartsModal'),
                language: {
                    noResults: function() {
                        return 'No se encontraron resultados';
                    },
                    searching: function() {
                        return 'Buscando...';
                    }
                }
            }).on('change', function() {
                updateDownloadSelectionState();
            });
        }

        function setDownloadFeedback(message, isError) {
            const msgEl = document.getElementById('downloadChartsMsg');
            if (!msgEl) {
                return;
            }
            msgEl.textContent = message || '';
            msgEl.classList.toggle('text-danger', !!isError);
            msgEl.classList.toggle('text-success', !isError && !!message);
        }

        function updateDownloadSelectionState() {
            const selected = getSelectedChartIds();
            const counter = document.getElementById('downloadSelectionCount');
            if (counter) {
                const n = selected.length;
                counter.textContent = '(' + n + (n === 1 ? ' seleccionada)' : ' seleccionadas)');
            }
        }

        function updateDownloadModeOptions() {
            const formato = document.getElementById('downloadFormat')?.value;
            const modeSelect = document.getElementById('downloadMode');
            if (!modeSelect) return;

            if (formato === 'pdf') {
                modeSelect.innerHTML =
                    '<option value="pdf-window">Abrir para imprimir / descargar PDF</option>';
            } else {
                modeSelect.innerHTML =
                    '<option value="separate">Cada elemento por separado</option>' +
                    '<option value="zip">Todos en un archivo ZIP</option>';
            }
            updateDownloadModeHelp();
        }

        function updateDownloadModeHelp() {
            const mode = document.getElementById('downloadMode')?.value;
            const formato = document.getElementById('downloadFormat')?.value;
            const help = document.getElementById('downloadModeHelp');
            if (!help) return;

            if (formato === 'pdf') {
                help.textContent = 'Se abrirá una nueva ventana con las gráficas. Desde allí puede descargar como PDF o imprimir.';
            } else {
                help.textContent = mode === 'zip'
                    ? 'Se descargará un archivo ZIP con todas las gráficas seleccionadas.'
                    : 'Se descargará un archivo independiente por cada gráfica seleccionada.';
            }
        }

        function renderDownloadChartList() {
            const select = document.getElementById('chartsCheckboxList');
            if (!select) return;

            select.innerHTML = chartDefinitions.map(function(chart) {
                return '<option value="' + chart.id + '">' + chart.name + '</option>';
            }).join('');

            initDownloadChartsSelect2();

            // Seleccionar todas por defecto
            Array.from(select.options).forEach(function(opt) { opt.selected = true; });
            if (window.jQuery && $.fn.select2 && $('#chartsCheckboxList').data('select2')) {
                $('#chartsCheckboxList').trigger('change.select2');
            }
            updateDownloadSelectionState();
        }

        document.addEventListener('DOMContentLoaded', function() {
            const openBtn = document.getElementById('downloadChartsBtn');
            const confirmBtn = document.getElementById('confirmDownloadCharts');
            const selectAllBtn = document.getElementById('selectAllChartsBtn');
            const clearAllBtn = document.getElementById('clearAllChartsBtn');
            const modeSelect = document.getElementById('downloadMode');

            if (openBtn) {
                openBtn.addEventListener('click', function() {
                    renderDownloadChartList();
                    updateDownloadModeOptions();
                    setDownloadFeedback('', true);
                    $('#downloadChartsModal').modal('show');
                });
            }

            if (selectAllBtn) {
                selectAllBtn.addEventListener('click', function() {
                    const select = document.getElementById('chartsCheckboxList');
                    if (select) Array.from(select.options).forEach(function(o) { o.selected = true; });
                    if (window.jQuery && $.fn.select2 && $('#chartsCheckboxList').data('select2')) {
                        $('#chartsCheckboxList').trigger('change.select2');
                    }
                    updateDownloadSelectionState();
                });
            }

            if (clearAllBtn) {
                clearAllBtn.addEventListener('click', function() {
                    const select = document.getElementById('chartsCheckboxList');
                    if (select) Array.from(select.options).forEach(function(o) { o.selected = false; });
                    if (window.jQuery && $.fn.select2 && $('#chartsCheckboxList').data('select2')) {
                        $('#chartsCheckboxList').trigger('change.select2');
                    }
                    updateDownloadSelectionState();
                });
            }

            const formatSelect = document.getElementById('downloadFormat');
            if (formatSelect) {
                formatSelect.addEventListener('change', updateDownloadModeOptions);
            }

            if (modeSelect) {
                modeSelect.addEventListener('change', updateDownloadModeHelp);
            }

            if (confirmBtn) {
                confirmBtn.addEventListener('click', async function() {
                    const selected = getSelectedChartIds();
                    const format = document.getElementById('downloadFormat').value;
                    const mode = document.getElementById('downloadMode').value;

                    if (selected.length === 0) {
                        setDownloadFeedback('Seleccione al menos una grafica para descargar.', true);
                        return;
                    }

                    confirmBtn.disabled = true;
                    confirmBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generando';
                    setDownloadFeedback('Preparando descarga...', false);

                    try {
                        await descargarGraficas(selected, format, mode);
                        setDownloadFeedback('Descarga generada correctamente.', false);
                        setTimeout(function() {
                            $('#downloadChartsModal').modal('hide');
                        }, 900);
                    } catch (e) {
                        setDownloadFeedback('Error al descargar: ' + (e.message || e), true);
                    } finally {
                        confirmBtn.disabled = false;
                        confirmBtn.textContent = 'Descargar';
                    }
                });
            }
        });

        async function ensureDownloadLibraries(formato, modo) {
            if (modo === 'zip' && !window.JSZip) {
                await cargarScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js');
            }
        }

        async function descargarGraficas(ids, formato, modo) {
            if (formato === 'pdf') {
                await exportarGraficasPorServidor(ids);
                return;
            }

            await ensureDownloadLibraries(formato, modo);

            if (modo === 'separate') {
                for (const id of ids) {
                    await exportarGrafica(id, formato);
                }
            } else {
                await exportarGraficasEnArchivo(ids, formato);
            }
        }

        // Extrae propiedades serializables de un dataset de Chart.js
        function sanitizeDashboardDatasets(datasets) {
            if (!Array.isArray(datasets)) { return []; }
            return datasets.map(function(ds) {
                var safe = {
                    label:       ds.label || '',
                    data:        Array.isArray(ds.data) ? ds.data.slice() : [],
                    fill:        ds.fill !== undefined ? ds.fill : false,
                    hidden:      ds.hidden || false,
                    borderWidth: ds.borderWidth !== undefined ? ds.borderWidth : 1,
                };
                if (ds.type            !== undefined) safe.type            = ds.type;
                if (ds.backgroundColor !== undefined) safe.backgroundColor = ds.backgroundColor;
                if (ds.borderColor     !== undefined) safe.borderColor     = ds.borderColor;
                if (ds.pointBackgroundColor !== undefined) safe.pointBackgroundColor = ds.pointBackgroundColor;
                if (ds.hoverBackgroundColor !== undefined) safe.hoverBackgroundColor = ds.hoverBackgroundColor;
                return safe;
            });
        }

        function getChartDataBreakdown(labels, datasets) {
            if (!Array.isArray(datasets) || datasets.length === 0) {
                return [];
            }

            if (datasets.length === 1 && Array.isArray(labels) && labels.length > 0) {
                var firstDataset = datasets[0];
                return labels.map(function(label, index) {
                    var rawValue = Array.isArray(firstDataset.data) ? firstDataset.data[index] : 0;
                    var numericValue = Number(rawValue);
                    return {
                        label: String(label || ('Dato ' + (index + 1))),
                        value: isNaN(numericValue) ? 0 : numericValue
                    };
                });
            }

            return datasets.map(function(dataset, index) {
                var total = Array.isArray(dataset.data)
                    ? dataset.data.reduce(function(acc, value) {
                        var numericValue = Number(value);
                        return acc + (isNaN(numericValue) ? 0 : numericValue);
                    }, 0)
                    : 0;

                return {
                    label: String(dataset.label || ('Serie ' + (index + 1))),
                    value: total
                };
            });
        }

        async function exportarGraficasPorServidor(ids) {
            var chartsPayload = [];
            var year = document.getElementById('yearFilter') ? document.getElementById('yearFilter').value : new Date().getFullYear();

            for (var i = 0; i < ids.length; i++) {
                var id = ids[i];
                var def = getChartDefinition(id);
                var instance = getChartInstance(id);

                if (!instance) {
                    console.warn('No se encontro instancia de Chart.js para:', id);
                    continue;
                }

                var chartType = (instance.config && instance.config.type) ? instance.config.type : 'bar';
                var labels    = instance.data && instance.data.labels ? instance.data.labels.slice() : [];
                var datasets  = instance.data ? sanitizeDashboardDatasets(instance.data.datasets || []) : [];
                var opts      = (instance.options && typeof instance.options === 'object') ? instance.options : {};
                var dataBreakdown = getChartDataBreakdown(labels, datasets);

                chartsPayload.push({
                    name:     def ? def.name : id,
                    type:     chartType,
                    labels:   labels,
                    datasets: datasets,
                    dataBreakdown: dataBreakdown,
                    options: {
                        scales: opts.scales ? {
                            xAxes: (opts.scales.xAxes || []).map(function(ax) { return { stacked: !!ax.stacked }; }),
                            yAxes: (opts.scales.yAxes || []).map(function(ax) { return { stacked: !!ax.stacked, ticks: { beginAtZero: true } }; })
                        } : {}
                    }
                });
            }

            if (chartsPayload.length === 0) {
                throw new Error('No hay gráficas con datos disponibles para exportar.');
            }

            var tokenMeta = document.querySelector('meta[name="csrf-token"]');
            var token = tokenMeta ? tokenMeta.getAttribute('content') : '';

            var response = await fetch('{{ route("administrator.dashboard.graph.reportView") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    charts: chartsPayload,
                    title:  'Dashboard',
                    year:   year,
                    _token: token
                })
            });

            if (!response.ok) {
                throw new Error('Error del servidor al generar el reporte (' + response.status + ')');
            }

            var data = await response.json();

            var newWindow = window.open('', 'DASHBOARD_PDF',
                'height=' + Math.round(window.outerHeight * 0.9) +
                ',width=' + Math.round(window.outerWidth * 0.8) +
                ',scrollbars=yes,resizable=yes');
            newWindow.document.write(data.view);
            newWindow.document.close();
            newWindow.focus();
        }

        function cargarScript(src) {
            return new Promise((resolve, reject) => {
                const s = document.createElement('script');
                s.src = src;
                s.onload = resolve;
                s.onerror = reject;
                document.head.appendChild(s);
            });
        }

        async function captureChartCanvas(id) {
            const canvas = document.getElementById(id);
            if (!canvas) {
                throw new Error('No se encontro la grafica: ' + id);
            }
            if (!canvas.width || !canvas.height) {
                throw new Error('La grafica no tiene dimensiones: ' + id);
            }
            // Usar el canvas de Chart.js directamente — máxima calidad, sin captura DOM
            return canvas;
        }

        function buildDownloadBaseName(id) {
            const definition = getChartDefinition(id);
            const nombre = definition ? definition.name : id;
            const now = new Date();
            const fecha = now.toLocaleDateString();
            const hora = now.toLocaleTimeString();
            let cantidadDatos = 0;
            const chartObj = getChartInstance(id);
            if (chartObj && chartObj.data) {
                if (Array.isArray(chartObj.data.labels) && chartObj.data.labels.length > 0) {
                    cantidadDatos = chartObj.data.labels.length;
                } else if (Array.isArray(chartObj.data.datasets)) {
                    cantidadDatos = chartObj.data.datasets.reduce(function(acc, ds) {
                        return acc + ((ds.data && ds.data.length) || 0);
                    }, 0);
                }
            }

            let nombreArchivo = sanitizeFileName(nombre) + '_' + fecha.replace(/\//g, '-') + '_' + hora.replace(/:/g, '-');
            if (cantidadDatos) {
                nombreArchivo += '_datos' + cantidadDatos;
            }
            return nombreArchivo;
        }

        async function buildChartExportFile(id, formato) {
            const chartCanvas = await captureChartCanvas(id);
            const baseName = buildDownloadBaseName(id);

            if (formato === 'pdf') {
                const { jsPDF } = window.jspdf;
                const orientation = chartCanvas.width >= chartCanvas.height ? 'l' : 'p';
                const pdf = new jsPDF({ orientation: orientation, unit: 'mm', format: 'a4' });
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();
                const margin = 10;
                const availableWidth = pageWidth - (margin * 2);
                const availableHeight = pageHeight - (margin * 2);
                const imageRatio = chartCanvas.width / chartCanvas.height;

                let renderWidth = availableWidth;
                let renderHeight = renderWidth / imageRatio;
                if (renderHeight > availableHeight) {
                    renderHeight = availableHeight;
                    renderWidth = renderHeight * imageRatio;
                }

                const posX = (pageWidth - renderWidth) / 2;
                const posY = (pageHeight - renderHeight) / 2;
                pdf.addImage(chartCanvas.toDataURL('image/png', 1.0), 'PNG', posX, posY, renderWidth, renderHeight);

                return {
                    filename: baseName + '.pdf',
                    blob: pdf.output('blob')
                };
            }

            const mimeType = formato === 'jpg' ? 'image/jpeg' : 'image/png';
            return {
                filename: baseName + '.' + formato,
                blob: dataURLtoBlob(chartCanvas.toDataURL(mimeType, 1.0))
            };
        }

        function triggerBlobDownload(blob, fileName) {
            const link = document.createElement('a');
            const objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            link.download = fileName;
            link.click();
            setTimeout(function() {
                URL.revokeObjectURL(objectUrl);
            }, 1000);
        }

        async function exportarGrafica(id, formato) {
            const file = await buildChartExportFile(id, formato);
            triggerBlobDownload(file.blob, file.filename);
        }

        async function exportarGraficasEnArchivo(ids, formato) {
            const zip = new JSZip();
            for (const id of ids) {
                const file = await buildChartExportFile(id, formato);
                zip.file(file.filename, file.blob);
            }

            const blob = await zip.generateAsync({ type: 'blob' });
            const stamp = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
            triggerBlobDownload(blob, 'dashboard_graficas_' + stamp + '.zip');
        }
        // Devuelve string con los filtros activos principales
        function obtenerFiltrosActivos() {
            let filtros = [];
            const year = document.getElementById('yearFilter')?.value;
            if (year) filtros.push('Año: ' + year);
            const dateFrom = document.getElementById('dateFromFilter')?.value;
            const dateTo = document.getElementById('dateToFilter')?.value;
            if (dateFrom || dateTo) filtros.push('Fecha: ' + (dateFrom || '-') + ' a ' + (dateTo || '-'));
            const fleets = Array.from(document.getElementById('fleetFilter')?.selectedOptions || [])
                .map(option => option.text)
                .filter(Boolean);
            if (fleets.length) filtros.push('Flotas: ' + fleets.join(', '));
            const assets = Array.from(document.getElementById('assetClassFilter')?.selectedOptions || [])
                .map(option => option.text)
                .filter(Boolean);
            if (assets.length) filtros.push('Asset class: ' + assets.join(', '));
            const status = Array.from(document.getElementById('statusFilter')?.selectedOptions || [])
                .map(option => option.text)
                .filter(Boolean);
            if (status.length) filtros.push('Estado: ' + status.join(', '));
            return filtros.join(' | ');
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){ u8arr[n] = bstr.charCodeAt(n); }
            return new Blob([u8arr], {type:mime});
        }

        // --- Fin descarga de gráficas ---
        let healthPieChart = null;
        let alarmsBySystemChart = null;
        let historicalReportChart = null;
        let lubeHealthChart = null;
        let contaminationChart = null;
        let wearChart = null;
        let componentChart = null;
        
        function initCharts() {
            healthPieChart = window.DashboardChartsCore.createChartInstance('healthPie', document.getElementById('healthPieChart'));
            alarmsBySystemChart = window.DashboardChartsCore.createChartInstance('alarmsBySystem', document.getElementById('alarmsBySystemChart'));
            historicalReportChart = window.DashboardChartsCore.createChartInstance('historical', document.getElementById('historicalReport'));
            lubeHealthChart = window.DashboardChartsCore.createChartInstance('lubeHealth', document.getElementById('lubeHealthChart'));
            contaminationChart = window.DashboardChartsCore.createChartInstance('contamination', document.getElementById('contaminationChart'));
            wearChart = window.DashboardChartsCore.createChartInstance('wear', document.getElementById('wearChart'));
            componentChart = window.DashboardChartsCore.createChartInstance('component', document.getElementById('componentChart'));
        }

        const setTotal = (id, value) => {
            const el = document.getElementById(id);
            if (el) el.textContent = String(value || 0);
        };

        function updateHealthPieChart(reports) {
            if (!healthPieChart) return;
            setTotal('totalHealthPie', window.DashboardChartsCore.updateChartInstance('healthPie', healthPieChart, reports));
        }

        function updateAlarmsBySystemChart(reports) {
            if (!alarmsBySystemChart) return;
            setTotal('totalAlarmsBySystem', window.DashboardChartsCore.updateChartInstance('alarmsBySystem', alarmsBySystemChart, reports));
        }

        function updateLubeHealthChart(reports) {
            if (!lubeHealthChart) return;
            setTotal('totalLubeHealth', window.DashboardChartsCore.updateChartInstance('lubeHealth', lubeHealthChart, reports));
        }

        function updateContaminationChart(reports) {
            if (!contaminationChart) return;
            setTotal('totalContamination', window.DashboardChartsCore.updateChartInstance('contamination', contaminationChart, reports));
        }

        function updateWearChart(reports) {
            if (!wearChart) return;
            setTotal('totalWear', window.DashboardChartsCore.updateChartInstance('wear', wearChart, reports));
        }

        function updateHistoricalChart(reports) {
            if (!historicalReportChart) return;
            setTotal('totalHistoricalReport', window.DashboardChartsCore.updateChartInstance('historical', historicalReportChart, reports));
        }

        function updateComponentChart(reports) {
            if (!componentChart) return;
            setTotal('totalComponent', window.DashboardChartsCore.updateChartInstance('component', componentChart, reports));
        }
        
        function getStatusBadge(statusReport) {
            const statusMap = {
                3: { name: 'Crítico', class: 'badge-danger' },
                1: { name: 'Anormal', class: 'badge-warning' },
                2: { name: 'Normal', class: 'badge-success' }
            };
            const status = statusMap[statusReport] || { name: 'Desconocido', class: 'badge-secondary' };
            return `<span class="badge ${status.class}">${status.name}</span>`;
        }
    </script>

    <script type="text/javascript">
        
        const fleetTypes = {!! json_encode($fleetOptions ?? $fleetTypes) !!};
        const systemTypes = {!! json_encode($systemTypeOptions) !!};
        const allFleetTypes = {!! json_encode($fleetTypes) !!};
        const allSystemTypes = {!! json_encode($systemTypes) !!};
        const equipments = {!! json_encode($equipments) !!};
        const alarmReportsData = {!! json_encode($alarmReports) !!};
        let chartReportsData = {!! json_encode($chartReports ?? $alarmReports) !!};

        const systemTypeMap = new Map(systemTypes.map(item => [item.id, item.name]));
        const systemTypeNameToId = new Map(systemTypes.map(item => [String(item.name).trim().toLowerCase(), item.id]));
        
        const RECORDS_PER_PAGE = 25;
        let currentHotSheetPage = 1;
        let totalHotSheetRecords = 0;
        
        let activeFilters = {
            fleets: [],
            assetClasses: [],
            assetClassNames: [],
            status: [],
            dateFrom: '',
            dateTo: '',
            year: new Date().getFullYear()
        };

        // ── Per-chart independent filter state ──
        const chartFilters = {
            healthPie:      { fleet: '', assetClass: '', status: '' },
            alarmsBySystem: { fleet: '', assetClass: '', status: '' },
            historical:     { fleet: '', assetClass: '', status: '' },
            lubeHealth:     { fleet: '', assetClass: '', status: '' },
            contamination:  { fleet: '', assetClass: '', status: '' },
            wear:           { fleet: '', assetClass: '', status: '' },
            component:      { fleet: '', assetClass: '', status: '' },
        };

        function filterReportsForChart(reports, chartId) {
            const f = chartFilters[chartId];
            const globallyFiltered = window.DashboardChartsCore.filterReports(reports, activeFilters);
            return globallyFiltered.filter(report => {
                if (f.fleet !== '' && parseInt(report.fleet_id) !== parseInt(f.fleet)) return false;
                if (f.assetClass !== '' && parseInt(report.system_type_id) !== parseInt(f.assetClass)) return false;
                if (f.status !== '' && parseInt(report.status_report) !== parseInt(f.status)) return false;
                return true;
            });
        }

        function updateAllCharts() {
            updateHealthPieChart(filterReportsForChart(chartReportsData, 'healthPie'));
            updateAlarmsBySystemChart(filterReportsForChart(chartReportsData, 'alarmsBySystem'));
            updateHistoricalChart(filterReportsForChart(chartReportsData, 'historical'));
            updateLubeHealthChart(filterReportsForChart(chartReportsData, 'lubeHealth'));
            updateContaminationChart(filterReportsForChart(chartReportsData, 'contamination'));
            updateWearChart(filterReportsForChart(chartReportsData, 'wear'));
            updateComponentChart(filterReportsForChart(chartReportsData, 'component'));
        }

        function initChartFilters() {
            const chartDefs = [
                { id: 'healthPie',      fleetId: 'chartFleet_healthPie',      assetId: 'chartAsset_healthPie',      statusId: 'chartStatus_healthPie' },
                { id: 'alarmsBySystem', fleetId: 'chartFleet_alarmsBySystem',  assetId: 'chartAsset_alarmsBySystem',  statusId: 'chartStatus_alarmsBySystem' },
                { id: 'historical',     fleetId: 'chartFleet_historical',      assetId: 'chartAsset_historical',      statusId: 'chartStatus_historical' },
                { id: 'lubeHealth',     fleetId: 'chartFleet_lubeHealth',      assetId: 'chartAsset_lubeHealth',      statusId: 'chartStatus_lubeHealth' },
                { id: 'contamination',  fleetId: 'chartFleet_contamination',   assetId: 'chartAsset_contamination',   statusId: 'chartStatus_contamination' },
                { id: 'wear',           fleetId: 'chartFleet_wear',            assetId: 'chartAsset_wear',            statusId: 'chartStatus_wear' },
                { id: 'component',      fleetId: 'chartFleet_component',       assetId: 'chartAsset_component',       statusId: 'chartStatus_component' },
            ];

            let fleetOpts = '<option value="">Flota: Todas</option>';
            allFleetTypes.forEach(f => { fleetOpts += `<option value="${f.id || f['id']}">${f.name || f['name']}</option>`; });

            let assetOpts = '<option value="">Asset: Todos</option>';
            allSystemTypes.forEach(s => { assetOpts += `<option value="${s.id}">${s.name}</option>`; });

            // Wire toggle buttons
            document.querySelectorAll('.chart-filter-toggle').forEach(btn => {
                btn.addEventListener('click', function() {
                    const row = document.getElementById(this.dataset.target);
                    if (!row) return;
                    const isVisible = row.style.display !== 'none';
                    row.style.display = isVisible ? 'none' : 'block';
                    this.classList.toggle('active', !isVisible);
                });
            });

            chartDefs.forEach(cfg => {
                const fleetEl  = document.getElementById(cfg.fleetId);
                const assetEl  = document.getElementById(cfg.assetId);
                const statusEl = document.getElementById(cfg.statusId);
                if (!fleetEl || !assetEl || !statusEl) return;

                fleetEl.innerHTML = fleetOpts;
                assetEl.innerHTML = assetOpts;

                const onFilterChange = () => {
                    chartFilters[cfg.id].fleet      = fleetEl.value;
                    chartFilters[cfg.id].assetClass = assetEl.value;
                    chartFilters[cfg.id].status     = statusEl.value;
                    const filtered = filterReportsForChart(chartReportsData, cfg.id);
                    switch (cfg.id) {
                        case 'healthPie':      updateHealthPieChart(filtered);      break;
                        case 'alarmsBySystem': updateAlarmsBySystemChart(filtered); break;
                        case 'historical':     updateHistoricalChart(filtered);     break;
                        case 'lubeHealth':     updateLubeHealthChart(filtered);     break;
                        case 'contamination':  updateContaminationChart(filtered);  break;
                        case 'wear':           updateWearChart(filtered);           break;
                        case 'component':      updateComponentChart(filtered);      break;
                    }
                };

                fleetEl.addEventListener('change', onFilterChange);
                assetEl.addEventListener('change', onFilterChange);
                statusEl.addEventListener('change', onFilterChange);
            });
        }

        function updateActiveFilters() {
            const selectedFleetOptions = Array.from(document.getElementById('fleetFilter')?.selectedOptions || []);
            activeFilters.fleets = selectedFleetOptions
                .map(option => parseInt(option.value))
                .filter(value => Number.isFinite(value));

            const selectedAssetOptions = Array.from(document.getElementById('assetClassFilter')?.selectedOptions || []);
            activeFilters.assetClasses = selectedAssetOptions
                .map(option => parseInt(option.value))
                .filter(value => Number.isFinite(value));
            activeFilters.assetClassNames = selectedAssetOptions
                .map(option => String(option.dataset.name || option.text || '').trim().toLowerCase())
                .filter(Boolean);

            const selectedStatusOptions = Array.from(document.getElementById('statusFilter')?.selectedOptions || []);
            activeFilters.status = selectedStatusOptions
                .map(option => parseInt(option.value))
                .filter(value => Number.isFinite(value));
            
            activeFilters.dateFrom = document.getElementById('dateFromFilter')?.value || '';
            activeFilters.dateTo = document.getElementById('dateToFilter')?.value || '';
            activeFilters.year = parseInt(document.getElementById('yearFilter')?.value || new Date().getFullYear());
            applyFilters();
        }

        function filterReports(reports, includeYearFilter = true) {
            return reports.filter(report => {
                if (activeFilters.fleets.length > 0) {
                    const reportFleetId = report.fleet_id ?? report.get_equipment?.id_fleet;
                    if (!activeFilters.fleets.includes(parseInt(reportFleetId))) {
                        return false;
                    }
                }

                if (activeFilters.status.length > 0) {
                    if (!activeFilters.status.includes(parseInt(report.status_report))) {
                        return false;
                    }
                }

                if (activeFilters.assetClasses.length > 0 || activeFilters.assetClassNames.length > 0) {
                    let reportSystemTypeId = report.system_type_id ? parseInt(report.system_type_id) : null;
                    const reportSystemTypeName = report.system_type ? String(report.system_type).trim().toLowerCase() : '';
                    if (!reportSystemTypeId && reportSystemTypeName) {
                        reportSystemTypeId = systemTypeNameToId.get(reportSystemTypeName) || null;
                    }
                    const matchById = reportSystemTypeId && activeFilters.assetClasses.includes(reportSystemTypeId);
                    const matchByName = reportSystemTypeName && activeFilters.assetClassNames.includes(reportSystemTypeName);
                    
                    if (!matchById && !matchByName) {
                        return false;
                    }
                }
                
                if (activeFilters.dateFrom !== '' || activeFilters.dateTo !== '') {
                    const reportDate = new Date(report.date_of_analysis);
                    
                    if (activeFilters.dateFrom !== '') {
                        const fromDate = new Date(activeFilters.dateFrom);
                        if (reportDate < fromDate) {
                            return false;
                        }
                    }
                    
                    if (activeFilters.dateTo !== '') {
                        const toDate = new Date(activeFilters.dateTo);
                        toDate.setHours(23, 59, 59);
                        if (reportDate > toDate) {
                            return false;
                        }
                    }
                }
                
                if (includeYearFilter && activeFilters.year) {
                    const reportYear = new Date(report.date_of_analysis).getFullYear();
                    if (reportYear !== activeFilters.year) {
                        return false;
                    }
                }
                
                return true;
            });
        }

        function applyFilters() {
            const filteredTableReports = filterReports(alarmReportsData, false);
            updateHotSheetTable(filteredTableReports);
            updateAllCharts();
        }

        function updateHotSheetTable(reports) {
            const tbody = document.getElementById('hotSheetTableBody');
            const paginationDiv = document.getElementById('hotSheetPagination');
            
            if (!tbody) {
                return;
            }
            
            totalHotSheetRecords = reports.length;
            currentHotSheetPage = 1;
            
            if (reports.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8" class="text-center">No hay reportes que coincidan con los filtros seleccionados</td></tr>';
                paginationDiv.innerHTML = '';
                return;
            }
            
            renderHotSheetPage(reports);
            renderHotSheetPagination(reports);
        }

        function renderHotSheetPage(reports) {
            const tbody = document.getElementById('hotSheetTableBody');
            const startIndex = (currentHotSheetPage - 1) * RECORDS_PER_PAGE;
            const endIndex = startIndex + RECORDS_PER_PAGE;
            const pageReports = reports.slice(startIndex, endIndex);

            let allRows = '';
            pageReports.forEach((report) => {
                const assetClassName = report.system_type || systemTypeMap.get(parseInt(report.system_type_id)) || 'N/A';
                const equipmentId = report.get_equipment?.unit_id || report.equipment_id || 'N/A';
                const componentName = report.serial_component || report.get_component?.name || 'N/A';
                const dateAnalysis = report.date_of_analysis || 'N/A';
                const lubricantName = report.get_lubricant?.name || 'N/A';
                const statusBadge = getStatusBadge(report.status_report);
                
                let sampleAge = 'N/A';
                if (report.sample_date_taken) {
                    const sampleDate = new Date(report.sample_date_taken);
                    const today = new Date();
                    const diffTime = Math.abs(today - sampleDate);
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                    sampleAge = diffDays;
                }
                
                let formattedDate = 'N/A';
                if (dateAnalysis && dateAnalysis !== 'N/A') {
                    const date = new Date(dateAnalysis);
                    formattedDate = (date.getMonth() + 1).toString().padStart(2, '0') + '/' + 
                                    date.getDate().toString().padStart(2, '0') + '/' + 
                                    date.getFullYear();
                }
                
                const commentary = report.commentary || report.default_comments || 'Sin comentario';
                const tooltipSummary = `Status: ${report.lube_health_cond || 0}, Wear: ${report.wearout_condition || 0}, Contamination: ${report.contamination_cond || 0}`;
                
                allRows += `
                    <tr>
                        <td>${assetClassName}</td>
                        <td>${equipmentId}</td>
                        <td>${componentName}</td>
                        <td>${formattedDate}</td>
                        <td>${sampleAge}</td>
                        <td class="text-truncate" style="max-width:180px" title="${lubricantName}">${lubricantName}</td>
                        <td>${statusBadge}</td>
                        <td class="text-truncate" style="max-width:220px" title="${tooltipSummary}">${commentary}</td>
                    </tr>
                `;
            });
            
            tbody.innerHTML = allRows;
        }

        function renderHotSheetPagination(reports) {
            const paginationDiv = document.getElementById('hotSheetPagination');
            const totalPages = Math.ceil(totalHotSheetRecords / RECORDS_PER_PAGE);

            if (totalPages <= 1) {
                paginationDiv.innerHTML = '';
                return;
            }

            let paginationHTML = '<ul class="pagination pagination-sm mb-0">';
            
            paginationHTML += `<li class="page-item ${currentHotSheetPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="javascript:;" onclick="changeHotSheetPage(${currentHotSheetPage - 1}, arguments[0])">Anterior</a>
            </li>`;

            for (let i = 1; i <= totalPages; i++) {
                paginationHTML += `<li class="page-item ${i === currentHotSheetPage ? 'active' : ''}">
                    <a class="page-link" href="javascript:;" onclick="changeHotSheetPage(${i}, arguments[0])">${i}</a>
                </li>`;
            }

            paginationHTML += `<li class="page-item ${currentHotSheetPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="javascript:;" onclick="changeHotSheetPage(${currentHotSheetPage + 1}, arguments[0])">Siguiente</a>
            </li>`;

            paginationHTML += '</ul>';
            paginationDiv.innerHTML = paginationHTML;
        }

        function changeHotSheetPage(pageNumber, event) {
            if (event) {
                event.preventDefault();
            }

            const totalPages = Math.ceil(totalHotSheetRecords / RECORDS_PER_PAGE);
            
            if (pageNumber < 1 || pageNumber > totalPages) {
                return;
            }

            currentHotSheetPage = pageNumber;
            
            const filteredReports = filterReports(alarmReportsData, false);

            renderHotSheetPage(filteredReports);
            renderHotSheetPagination(filteredReports);
        }

        document.getElementById('fleetFilter')?.addEventListener('change', updateActiveFilters);
        document.getElementById('assetClassFilter')?.addEventListener('change', updateActiveFilters);
        document.getElementById('statusFilter')?.addEventListener('change', updateActiveFilters);

        document.getElementById('dateFromFilter')?.addEventListener('change', updateActiveFilters);
        document.getElementById('dateToFilter')?.addEventListener('change', updateActiveFilters);
        document.getElementById('yearFilter')?.addEventListener('change', function() {
            const selectedYear = parseInt(this.value);
            loadChartDataByYear(selectedYear);
        });

        function setChartsLoading(isLoading) {
            const overlay = document.getElementById('chartsLoadingOverlay');
            if (!overlay) {
                return;
            }

            if (isLoading) {
                overlay.classList.add('is-visible');
                overlay.style.display = 'flex';
            } else {
                overlay.classList.remove('is-visible');
                overlay.style.display = 'none';
            }
        }

        function loadChartDataByYear(year) {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const shouldShowLoader = !Array.isArray(chartReportsData) || chartReportsData.length === 0;

            if (shouldShowLoader) {
                setChartsLoading(true);
            }
            
            fetch('{{ route("administrator.dashboard.getChartReportsByYear") }}?year=' + year, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                }
            })
            .then(response => response.json())
            .then(data => {
                chartReportsData = data;
                updateActiveFilters();
            })
            .catch(error => {
                console.error('Error loading chart data:', error);
                updateActiveFilters();
            })
            .finally(() => {
                if (shouldShowLoader) {
                    setChartsLoading(false);
                }
            });
        }

        function initializeYearFilter() {
            const yearSelect = document.getElementById('yearFilter');
            const currentYear = new Date().getFullYear();
            const minYear = 2014;
            
            let html = '';
            for (let year = currentYear; year >= minYear; year--) {
                const selected = year === currentYear ? 'selected' : '';
                html += `<option value="${year}" ${selected}>${year}</option>`;
            }
            
            yearSelect.innerHTML = html;
        }
        
        initializeYearFilter();

        initCharts();
        initChartFilters();
        updateActiveFilters();

        $(function() {
            if (!$.fn.select2) {
                return;
            }

            $('#fleetFilter').select2({
                placeholder: 'Todas las flotas',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: 0,
                language: {
                    noResults: function() {
                        return "No se encontraron resultados";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            }).on('change', function() {
                updateActiveFilters();
            });

            $('#assetClassFilter').select2({
                placeholder: 'Todas las clases',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: 0,
                language: {
                    noResults: function() {
                        return "No se encontraron resultados";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            }).on('change', function() {
                updateActiveFilters();
            });

            $('#statusFilter').select2({
                placeholder: 'Todos los estados',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: 0,
                language: {
                    noResults: function() {
                        return "No se encontraron resultados";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            }).on('change', function() {
                updateActiveFilters();
            });

        });
    </script>

@endsection