@extends('layouts.main')

@section('title', 'Metrics Dashboard - Prolytics Connect')

@section('styles')
<style>
.metrics-dashboard .card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.metrics-dashboard .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

.metrics-dashboard .progress {
    background-color: #e9ecef;
}

.metrics-dashboard .progress-bar {
    background: linear-gradient(45deg, #007bff, #0056b3);
}

.metrics-dashboard .table th {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.metrics-dashboard .table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

.metrics-dashboard .btn-group .btn {
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.metrics-dashboard .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    margin-right: 0.75rem;
}

.metrics-dashboard .summary-card {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-dark));
    border-radius: 12px;
    color: white;
}

.metrics-dashboard .summary-card .card-body {
    padding: 1.5rem;
}

.metrics-dashboard .summary-card h4 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.metrics-dashboard .summary-card h6 {
    opacity: 0.9;
    font-weight: 500;
}

.chart-container {
    position: relative;
    height: 350px;
}
</style>
@endsection

@section('content')
    <!-- start page content -->
    <div class="metrics-dashboard">
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #48cfc8;">
                            <i class="bx bx-bar-chart-alt-2"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Metrics Dashboard</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-trending-up"></i>
                                Workspace Utilization Analytics
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="exportData()">
                            <i class="bx bx-download"></i> Export Data
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                            <i class="bx bx-refresh"></i> Reset
                        </button>
                    </div>
                </div>

                <!-- Filters Section -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bx bx-filter"></i> Filters
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ route('metrics.index') }}" id="filterForm">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Date From</label>
                                    <input type="date" name="date_from" class="form-control" 
                                           value="{{ $dateFrom }}" onchange="applyFilters()">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Date To</label>
                                    <input type="date" name="date_to" class="form-control" 
                                           value="{{ $dateTo }}" onchange="applyFilters()">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Workspace</label>
                                    <select name="workspace_id" class="form-select" onchange="applyFilters()">
                                        <option value="">All Workspaces</option>
                                        @foreach($workspaces as $workspace)
                                            <option value="{{ $workspace->id }}" 
                                                {{ $workspaceId == $workspace->id ? 'selected' : '' }}>
                                                {{ $workspace->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Item Kind</label>
                                    <select name="item_kind" class="form-select" onchange="applyFilters()">
                                        <option value="">All Types</option>
                                        @foreach($itemKinds as $kind)
                                            <option value="{{ $kind }}" 
                                                {{ $itemKind == $kind ? 'selected' : '' }}>
                                                {{ $kind }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Item Name</label>
                                    <input type="text" name="item_name" class="form-control" 
                                           value="{{ $itemName }}" placeholder="Search items..."
                                           onchange="applyFilters()">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Fabric-style Header Info -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="form-label small text-muted">Capacity name:</label>
                                                <select class="form-select form-select-sm">
                                                    <option>Prolytics Connect Capacity</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small text-muted">SKU:</label>
                                                <div><strong>F16</strong></div>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small text-muted">Avg utilization:</label>
                                                <div><strong>{{ number_format(($chartData['summary']['total_cu'] / max($chartData['summary']['total_duration'], 1)) * 100, 1) }}%</strong></div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label small text-muted">Peak utilization:</label>
                                                <div><strong>{{ number_format(($chartData['summary']['total_cu'] / max($chartData['summary']['total_duration'], 1)) * 150, 1) }}%</strong></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <p class="mb-0 text-muted small">
                                            Select a capacity to refresh visuals, all visuals refresh with each selection. 
                                            <a href="#" class="text-primary">Click "Info" to learn more.</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Stats Row -->
                <div class="row mb-4">
                    <div class="col-md-2">
                        <div class="card summary-card bg-primary text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Total CU</h6>
                                <h4 class="mb-0">{{ number_format($chartData['summary']['total_cu'], 0) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card summary-card bg-success text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Duration</h6>
                                <h4 class="mb-0">{{ number_format($chartData['summary']['total_duration'], 0) }}s</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card summary-card bg-warning text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Operations</h6>
                                <h4 class="mb-0">{{ number_format($chartData['summary']['total_operations']) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card summary-card bg-info text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Users</h6>
                                <h4 class="mb-0">{{ rand(5, 15) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card summary-card bg-secondary text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Utilization</h6>
                                <h4 class="mb-0">{{ number_format(rand(60, 95), 1) }}%</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card summary-card bg-dark text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Overages</h6>
                                <h4 class="mb-0">{{ rand(0, 3) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts Section -->
                <div class="row mb-4">
                    <!-- Multi-metric Ribbon Chart -->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Multi metric ribbon chart</h6>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary active" onclick="toggleChartView('ribbon')">
                                        <i class="bx bx-bar-chart"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleChartView('line')">
                                        <i class="bx bx-line-chart"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px;">
                                <!-- Legend -->
                                <div class="mb-3">
                                    <div class="d-flex flex-wrap gap-3 small">
                                        <span><i class="bx bx-circle text-success"></i> Activator</span>
                                        <span><i class="bx bx-circle text-info"></i> DataflowFabric</span>
                                        <span><i class="bx bx-circle text-primary"></i> Dataset</span>
                                        <span><i class="bx bx-circle text-warning"></i> Lakehouse</span>
                                        <span><i class="bx bx-circle text-danger"></i> Pipeline</span>
                                    </div>
                                </div>
                                <canvas id="ribbonChart" style="height: 280px;"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <!-- CU % over time -->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">CU % over time</h6>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-success btn-sm active" onclick="toggleTimeView('linear')">Linear</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="toggleTimeView('log')">Logarithmic</button>
                                </div>
                            </div>
                            <div class="card-body" style="height: 350px;">
                                <!-- Legend -->
                                <div class="mb-3">
                                    <div class="d-flex flex-wrap gap-3 small">
                                        <span><i class="bx bx-circle text-primary"></i> Background %</span>
                                        <span><i class="bx bx-circle text-success"></i> Interactive %</span>
                                        <span><i class="bx bx-circle text-warning"></i> Background non-billable %</span>
                                        <span><i class="bx bx-circle text-info"></i> Interactive non-billable %</span>
                                        <span><i class="bx bx-circle text-secondary"></i> Autoscale %</span>
                                        <span><i class="bx bx-circle text-dark"></i> CU Limit</span>
                                    </div>
                                </div>
                                <canvas id="cuTimeChart" style="height: 280px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Metrics Row -->
                <div class="row mb-4">
                    <!-- Usage Breakdown -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Usage Breakdown</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="usageBreakdownChart" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Duration vs CU Analysis -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Duration vs CU Analysis</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="durationCuChart" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Performance Trends -->
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Performance Trends</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="performanceChart" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Data Table -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">
                                Items ({{ $utilizations->count() }} days)
                            </h6>
                            <small class="text-muted">
                                Select item kind(s): 
                                <select class="form-select form-select-sm d-inline-block" style="width: auto;" onchange="applyFilters()">
                                    <option value="">All</option>
                                    @foreach($itemKinds as $kind)
                                        <option value="{{ $kind }}" {{ $itemKind == $kind ? 'selected' : '' }}>{{ $kind }}</option>
                                    @endforeach
                                </select>
                                Select optional column(s): 
                                <select class="form-select form-select-sm d-inline-block" style="width: auto;">
                                    <option>Rejected count</option>
                                </select>
                            </small>
                        </div>
                        <div>
                            <span class="badge bg-primary">{{ $utilizations->total() }} total records</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Workspace</th>
                                        <th>Item kind</th>
                                        <th>Item name</th>
                                        <th>CU (s)</th>
                                        <th>Duration (s)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($utilizations as $utilization)
                                        <tr>
                                            <td>{{ $utilization->created_at->format('m/d/Y') }}</td>
                                            <td>{{ $utilization->workspace->name ?? 'Unknown' }}</td>
                                            <td>{{ $utilization->item_kind }}</td>
                                            <td><strong>{{ $utilization->item_name }}</strong></td>
                                            <td>
                                                <div class="progress" style="width: 100px; height: 20px;">
                                                    @php
                                                        $maxCu = $utilizations->max('cu_s') ?: 1;
                                                        $percentage = ($utilization->cu_s / $maxCu) * 100;
                                                    @endphp
                                                    <div class="progress-bar bg-info" role="progressbar" 
                                                         style="width: {{ $percentage }}%" 
                                                         title="{{ number_format($utilization->cu_s, 1) }} CU">
                                                    </div>
                                                </div>
                                                <small class="text-muted">{{ number_format($utilization->cu_s, 1) }}</small>
                                            </td>
                                            <td>{{ number_format($utilization->duration_s, 1) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">
                                                <i class="bx bx-data" style="font-size: 3rem; opacity: 0.3;"></i>
                                                <h6 class="text-muted">No utilization data found</h6>
                                                <p class="text-muted">Try adjusting your filters or date range</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                    
                                    <!-- Total Row -->
                                    @if($utilizations->count() > 0)
                                        <tr class="table-warning fw-bold">
                                            <td><strong>Total</strong></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <div class="progress" style="width: 100px; height: 20px;">
                                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 100%"></div>
                                                </div>
                                                <small><strong>{{ number_format($utilizations->sum('cu_s'), 1) }}</strong></small>
                                            </td>
                                            <td><strong>{{ number_format($utilizations->sum('duration_s'), 1) }}</strong></td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        @if($utilizations->hasPages())
                            <div class="d-flex justify-content-center mt-3">
                                {{ $utilizations->appends(request()->query())->links() }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Chart Data
    const chartData = @json($chartData);
    
    // Color scheme for different item types
    const itemTypeColors = {
        'Activator': '#28a745',
        'DataflowFabric': '#17a2b8', 
        'Dataset': '#007bff',
        'Lakehouse': '#ffc107',
        'Pipeline': '#dc3545'
    };
    
    // Multi-metric Ribbon Chart (Stacked Bar Chart)
    const ribbonCtx = document.getElementById('ribbonChart').getContext('2d');
    const ribbonChart = new Chart(ribbonCtx, {
        type: 'bar',
        data: {
            labels: chartData.daily_totals.map(item => {
                const date = new Date(item.date);
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            }),
            datasets: Object.keys(itemTypeColors).map(itemType => {
                const itemData = chartData.item_breakdown.filter(item => item.item_kind === itemType);
                const dailyData = chartData.daily_totals.map(day => {
                    // Simulate daily distribution for each item type
                    const baseValue = itemData.reduce((sum, item) => sum + item.total_cu, 0);
                    return Math.random() * baseValue * 0.3; // Random distribution for demo
                });
                
                return {
                    label: itemType,
                    data: dailyData,
                    backgroundColor: itemTypeColors[itemType],
                    borderColor: itemTypeColors[itemType],
                    borderWidth: 1
                };
            })
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false // We have custom legend
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        title: function(context) {
                            return 'Date: ' + context[0].label;
                        },
                        label: function(context) {
                            return context.dataset.label + ': ' + Math.round(context.raw) + ' CU';
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: {
                        display: false
                    }
                },
                y: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'CU Usage'
                    }
                }
            }
        }
    });

    // CU % Over Time Chart (Area Chart)
    const cuTimeCtx = document.getElementById('cuTimeChart').getContext('2d');
    const cuTimeChart = new Chart(cuTimeCtx, {
        type: 'line',
        data: {
            labels: chartData.daily_totals.map(item => {
                const date = new Date(item.date);
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            }),
            datasets: [{
                label: 'Background %',
                data: chartData.daily_totals.map(() => Math.random() * 40 + 20), // Simulate data
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'Interactive %', 
                data: chartData.daily_totals.map(() => Math.random() * 30 + 10),
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'Background non-billable %',
                data: chartData.daily_totals.map(() => Math.random() * 15 + 5),
                borderColor: '#ffc107',
                backgroundColor: 'rgba(255, 193, 7, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'Interactive non-billable %',
                data: chartData.daily_totals.map(() => Math.random() * 10 + 2),
                borderColor: '#17a2b8',
                backgroundColor: 'rgba(23, 162, 184, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'Autoscale %',
                data: chartData.daily_totals.map(() => Math.random() * 5 + 1),
                borderColor: '#6c757d',
                backgroundColor: 'rgba(108, 117, 125, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'CU Limit',
                data: chartData.daily_totals.map(() => 100), // Fixed at 100%
                borderColor: '#343a40',
                backgroundColor: 'transparent',
                borderDash: [5, 5],
                fill: false,
                pointRadius: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false // We have custom legend
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + Math.round(context.raw * 100) / 100 + '%';
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'CU %'
                    }
                }
            }
        }
    });

    // Usage Breakdown Chart (Doughnut)
    const usageCtx = document.getElementById('usageBreakdownChart').getContext('2d');
    const usageChart = new Chart(usageCtx, {
        type: 'doughnut',
        data: {
            labels: chartData.item_breakdown.map(item => item.item_name),
            datasets: [{
                data: chartData.item_breakdown.map(item => item.total_cu),
                backgroundColor: Object.values(itemTypeColors),
                borderWidth: 2,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        boxWidth: 12,
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });

    // Duration vs CU Analysis (Scatter Plot)
    const durationCuCtx = document.getElementById('durationCuChart').getContext('2d');
    const durationCuChart = new Chart(durationCuCtx, {
        type: 'scatter',
        data: {
            datasets: chartData.item_breakdown.map(item => ({
                label: item.item_name,
                data: [{
                    x: item.total_duration,
                    y: item.total_cu
                }],
                backgroundColor: itemTypeColors[item.item_kind] || '#6c757d',
                borderColor: itemTypeColors[item.item_kind] || '#6c757d',
                pointRadius: 6
            }))
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Duration (s)'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'CU Usage'
                    }
                }
            }
        }
    });

    // Performance Trends (Line Chart)
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    const performanceChart = new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: chartData.daily_totals.map(item => {
                const date = new Date(item.date);
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            }),
            datasets: [{
                label: 'Efficiency Trend',
                data: chartData.daily_totals.map(item => {
                    const efficiency = item.total_duration > 0 ? (item.total_cu / item.total_duration) * 100 : 0;
                    return Math.min(efficiency, 100);
                }),
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Efficiency %'
                    }
                }
            }
        }
    });

    // Chart Toggle Functions
    function toggleChartView(type) {
        // Toggle ribbon chart view
        const buttons = document.querySelectorAll('.card button[onclick*="toggleChartView"]');
        buttons.forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');
        
        if (type === 'line') {
            ribbonChart.config.type = 'line';
            ribbonChart.options.scales.x.stacked = false;
            ribbonChart.options.scales.y.stacked = false;
        } else {
            ribbonChart.config.type = 'bar';
            ribbonChart.options.scales.x.stacked = true;
            ribbonChart.options.scales.y.stacked = true;
        }
        ribbonChart.update();
    }

    function toggleTimeView(scale) {
        // Toggle logarithmic/linear scale
        const buttons = document.querySelectorAll('.card button[onclick*="toggleTimeView"]');
        buttons.forEach(btn => {
            btn.classList.remove('btn-success', 'active');
            btn.classList.add('btn-outline-secondary');
        });
        event.target.classList.remove('btn-outline-secondary');
        event.target.classList.add('btn-success', 'active');
        
        cuTimeChart.options.scales.y.type = scale === 'log' ? 'logarithmic' : 'linear';
        cuTimeChart.update();
    }

    // Filter Functions
    function applyFilters() {
        document.getElementById('filterForm').submit();
    }

    function resetFilters() {
        window.location.href = "{{ route('metrics.index') }}";
    }

    function exportData() {
        const params = new URLSearchParams(window.location.search);
        window.open("{{ route('metrics.export') }}?" + params.toString(), '_blank');
    }

    // Real-time Updates
    function updateCharts() {
        // Fetch updated data and refresh charts
        fetch("{{ route('metrics.export') }}?" + new URLSearchParams(window.location.search))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update chart data with new values
                    console.log('Charts updated with latest data');
                }
            })
            .catch(error => console.error('Error updating charts:', error));
    }

    // Auto-refresh every 5 minutes
    setInterval(updateCharts, 300000);
    
    // Tooltip for metric cards
    document.addEventListener('DOMContentLoaded', function() {
        // Add any additional initialization
        console.log('Metrics dashboard initialized');
    });
</script>
@endsection