@extends('layouts.main')

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

@section('styles')
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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: 280px;
}

.metrics-dashboard .card {
    transition: all 0.3s ease;
}

.metrics-dashboard .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.legend-item {
    font-size: 0.85rem;
    color: #495057;
}

.metrics-dashboard .form-select, .metrics-dashboard .form-control {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
}

.metrics-dashboard .form-select:focus, .metrics-dashboard .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.metrics-dashboard .btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.metrics-dashboard .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pagination-wrapper .pagination {
    margin: 0;
}

.pagination-wrapper .page-link {
    border-radius: 6px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    color: #6c757d;
    padding: 0.5rem 0.75rem;
}

.pagination-wrapper .page-link:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #0d6efd;
}

.pagination-wrapper .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.pagination-wrapper .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: white;
    border-color: #dee2e6;
}
.badge.bg-primary {
    background-color: #48cfc8 !important;
    color: white !important;
}
</style>
@endsection

@section('content')
    <!-- start page content -->
    <div class="metrics-dashboard">
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                {{-- @if($companyContext || (auth()->user() && auth()->user()->hasRole('company')))
                <div class="card">
                    <div class="card-body">
                        <div class="row col-md-12">
                            <div class="col-md-4">
                                <div class="text-center py-5">
                                    <div class="mb-4">
                                        <i class="bx bx-rocket upgrade-modal-icon" style="font-size: 4rem; color: #556ee6;"></i>
                                    </div>
                                    <h4 class="mb-3">Exciting Update Coming Soon!</h4>
                                    <p class="text-muted mb-4">
                                        We’re thrilled to announce that our Customer-Specific Dashboard will be available in the upcoming version update.
This new feature is designed to provide a personalized and intuitive experience — giving you powerful insights at a glance.
<br /> Here’s a preview of how it will look <i class="fa fa-hand-o-right" style="font-size: 25px;color: blue;" aria-hidden="true"></i>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <img src="{{ asset('images/matrics.png') }}" alt="Metrics" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
                @else --}}
                <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>
                                @if(isset($companyContext))
                                    Company Metrics Dashboard
                                @else
                                    Metrics Dashboard
                                @endif
                            </h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-trending-up"></i>
                                @if(isset($companyContext))
                                    {{ $companyContext->company ?? $companyContext->name }} - Workspace Utilization Analytics
                                @else
                                    Workspace Utilization Analytics
                                @endif
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @if(isset($companyContext))
                            <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                                <i class="bx bx-arrow-back"></i> Back to Companies
                            </a>
                        @endif
                        <button type="button" class="btn btn-outline-primary d-none" 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>

                <!-- Static Data Notice -->
                @if(isset($companyContext))
                <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
                    <i class="bx bx-info-circle me-2"></i>
                    <div>
                        <strong>Company:</strong> {{ $companyContext->company ?? 'Not Set' }} | 
                        <strong>Contact:</strong> {{ $companyContext->name }} ({{ $companyContext->email }}) | 
                        <strong>Workspaces:</strong> {{ $companyContext->workspaces->count() ?? 0 }} | 
                        <strong>Total Items:</strong> {{ $companyContext->workspaces->sum(function($ws) { return $ws->workspaceItems->count() ?? 0; }) ?? 0 }}
                    </div>
                </div>
                @endif

                @if(isset($chartData['static_mode']) && $chartData['static_mode'])
                <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
                    <i class="bx bx-info-circle me-2"></i>
                    <div>
                        <strong>Chart Data Mode:</strong> Currently displaying static sample data for visualization purposes. 
                        Charts will automatically switch to dynamic real-time data as more workspace utilization data becomes available. 
                        The data table below shows actual database records.
                    </div>
                </div>
                @endif

                <!-- 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">
                            @if(isset($companyId))
                                <input type="hidden" name="company_id" value="{{ $companyId }}">
                            @endif
                            <div class="row align-items-end">
                                <div class="col-md-2">
                                    <label class="form-label">Date From</label>
                                    <input type="date" name="date_from" class="form-control" 
                                           value="{{ $dateFrom }}">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Date To</label>
                                    <input type="date" name="date_to" class="form-control" 
                                           value="{{ $dateTo }}">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Workspace</label>
                                    <select name="workspace_id" class="form-select">
                                        <option value="">All Workspaces</option>
                                        @foreach($workspaces as $workspace)
                                            <option value="{{ $workspace->workspace_fabric_id }}" 
                                                {{ $workspaceId == $workspace->workspace_fabric_id ? 'selected' : '' }}>
                                                {{ $workspace->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">
                                        <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...">
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="bx bx-search"></i> Apply Filters
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Fabric-style Header Info -->
                <div class="row mb-4 d-none">
                    <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>{{ isset($filteredTotals) && $filteredTotals->total_duration > 0 ? number_format(($filteredTotals->total_cu / $filteredTotals->total_duration) * 100, 1) : 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">Total operations:</label>
                                                <div><strong>{{ isset($filteredTotals) ? number_format($filteredTotals->total_operations) : number_format($chartData['summary']['total_operations']) }}</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-3">
                        <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">{{ isset($filteredTotals) ? number_format($filteredTotals->total_cu, 0) : number_format($chartData['summary']['total_cu'], 0) }}</h4>
                                <small class="opacity-75">Filtered Results</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <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">{{ isset($filteredTotals) ? number_format($filteredTotals->total_duration, 0) : number_format($chartData['summary']['total_duration'], 0) }}s</h4>
                                <small class="opacity-75">Total Runtime</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <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">{{ isset($filteredTotals) ? number_format($filteredTotals->total_operations) : number_format($chartData['summary']['total_operations']) }}</h4>
                                <small class="opacity-75">Total Count</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card summary-card bg-info text-white">
                            <div class="card-body text-center">
                                <h6 class="mb-1">Avg Utilization</h6>
                                <h4 class="mb-0">{{ isset($filteredTotals) && $filteredTotals->total_duration > 0 ? number_format(($filteredTotals->total_cu / $filteredTotals->total_duration) * 100, 1) : number_format(($chartData['summary']['total_cu'] / max($chartData['summary']['total_duration'], 1)) * 100, 1) }}%</h4>
                                <small class="opacity-75">Efficiency Rate</small>
                            </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 d-flex justify-content-between align-items-center">
                                    <div class="d-flex flex-wrap gap-3 small">
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#28a745;border-radius:2px;display:inline-block;margin-right:5px;"></div>Activator</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#17a2b8;border-radius:2px;display:inline-block;margin-right:5px;"></div>DataflowFabric</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#007bff;border-radius:2px;display:inline-block;margin-right:5px;"></div>Dataset</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#ffc107;border-radius:2px;display:inline-block;margin-right:5px;"></div>Lakehouse</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#dc3545;border-radius:2px;display:inline-block;margin-right:5px;"></div>Pipeline</span>
                                    </div>
                                    <div class="text-muted small">Last 15 days</div>
                                </div>
                                <div class="chart-container">
                                    <canvas id="ribbonChart"></canvas>
                                </div>
                            </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 d-flex justify-content-between align-items-center">
                                    <div class="d-flex flex-wrap gap-3 small">
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#007bff;border-radius:2px;display:inline-block;margin-right:5px;"></div>Background %</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#28a745;border-radius:2px;display:inline-block;margin-right:5px;"></div>Interactive %</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#ffc107;border-radius:2px;display:inline-block;margin-right:5px;"></div>Background non-billable %</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#17a2b8;border-radius:2px;display:inline-block;margin-right:5px;"></div>Interactive non-billable %</span>
                                        <span class="legend-item"><div style="width:12px;height:12px;background:#6c757d;border-radius:2px;display:inline-block;margin-right:5px;"></div>Autoscale %</span>
                                        <span class="legend-item"><div style="width:12px;height:3px;background:#343a40;border-style:dashed;display:inline-block;margin-right:5px;"></div>CU Limit</span>
                                    </div>
                                    <div class="text-muted small">Real-time utilization</div>
                                </div>
                                <div class="chart-container">
                                    <canvas id="cuTimeChart"></canvas>
                                </div>
                            </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">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">
                                    <i class="bx bx-table me-1"></i>
                                    Workspace & Item Summary ({{ $utilizations->count() }} categories) 
                                    <span class="badge bg-success ms-2">Grouped Data</span>
                                </h6>
                                <div class="d-flex gap-3 align-items-center mt-2">
                                    <small class="text-muted d-flex align-items-center gap-2">
                                        <strong>Item kind:</strong>
                                        <span class="badge bg-secondary">{{ $itemKind ?: 'All' }}</span>
                                    </small>
                                    <small class="text-muted d-flex align-items-center gap-2">
                                        <strong>Date range:</strong> 
                                        <span class="text-primary">{{ $dateFrom }} to {{ $dateTo }}</span>
                                    </small>
                                </div>
                            </div>
                            <div class="text-end">
                                <div class="badge bg-primary fs-6 p-2">{{ isset($filteredTotals) ? number_format($filteredTotals->total_operations) : 0 }} operations aggregated</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="table-dark1">
                                    <tr>
                                        <th><i class="bx bx-buildings"></i> Workspace</th>
                                        <th><i class="bx bx-category"></i> Item Kind</th>
                                        <th><i class="bx bx-cube"></i> Item Name</th>
                                        <th><i class="bx bx-bar-chart"></i> Total CU (s)</th>
                                        <th><i class="bx bx-time"></i> Total Duration (s)</th>
                                        <th><i class="bx bx-hash"></i> Operations</th>
                                        <th><i class="bx bx-trending-up"></i> Efficiency %</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($utilizations as $utilization)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="heading-avatar text-white me-2" style="background: linear-gradient(135deg, #007bff, #0056b3); width: 32px; height: 32px; font-size: 14px;">
                                                        {{ substr($utilization->workspace_name, 0, 1) }}
                                                    </div>
                                                    <strong>{{ $utilization->workspace_name }}</strong>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ $utilization->item_kind == 'DataflowFabric' ? 'info' : ($utilization->item_kind == 'Activator' ? 'success' : ($utilization->item_kind == 'Dataset' ? 'primary' : ($utilization->item_kind == 'Lakehouse' ? 'warning' : 'secondary'))) }}">
                                                    {{ $utilization->item_kind }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!-- <i class="bx bx-cube me-2 text-muted"></i> -->
                                                    <span class="fw-medium">{{ $utilization->item_name ?? 'N/A' }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="progress flex-grow-1" style="height: 20px;">
                                                        @php
                                                            $maxCu = $utilizations->max('total_cu') ?: 1;
                                                            $maxCu = ($maxCu > 0) ? $maxCu : 1; // Ensure maxCu is never 0
                                                            $percentage = ($utilization->total_cu && $maxCu > 0) ? (($utilization->total_cu / $maxCu) * 100) : 0;
                                                        @endphp
                                                        <div class="progress-bar bg-primary" role="progressbar" 
                                                             style="width: {{ $percentage }}%" 
                                                             title="{{ number_format($utilization->total_cu, 1) }} CU">
                                                        </div>
                                                    </div>
                                                    <strong class="text-nowrap">{{ number_format($utilization->total_cu, 1) }}</strong>
                                                </div>
                                            </td>
                                            <td>
                                                <strong>{{ number_format($utilization->total_duration, 1) }}</strong>
                                            </td>
                                            <td>
                                                <span class="badge bg-dark">{{ number_format($utilization->total_operations) }}</span>
                                            </td>
                                            <td>
                                                @php
                                                    $efficiency = ($utilization->total_duration > 0 && $utilization->total_cu >= 0) ? ($utilization->total_cu / $utilization->total_duration) * 100 : 0;
                                                @endphp
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="progress flex-grow-1" style="height: 16px;">
                                                        <div class="progress-bar bg-{{ $efficiency > 75 ? 'success' : ($efficiency > 50 ? 'warning' : 'danger') }}" 
                                                             role="progressbar" style="width: {{ min($efficiency, 100) }}%">
                                                        </div>
                                                    </div>
                                                    <span class="small fw-bold">{{ number_format($efficiency, 1) }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-5">
                                                <i class="bx bx-data" style="font-size: 3rem; opacity: 0.3;"></i>
                                                <h6 class="text-muted mt-2">No utilization data found</h6>
                                                <p class="text-muted">Try adjusting your filters or date range</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                    
                                    <!-- Grand Total Row -->
                                    @if($utilizations->count() > 0 && isset($filteredTotals))
                                        @php
                                            // Calculate totals from the displayed grouped data as verification
                                            $displayedTotalCu = $utilizations->sum('total_cu');
                                            $displayedTotalDuration = $utilizations->sum('total_duration');
                                            $displayedTotalOperations = $utilizations->sum('total_operations');
                                            $displayedEfficiency = ($displayedTotalDuration > 0 && $displayedTotalCu >= 0) ? ($displayedTotalCu / $displayedTotalDuration) * 100 : 0;
                                        @endphp
                                        <tr class="table-success fw-bold border-top border-3">
                                            <td colspan="3">
                                                <i class="bx bx-calculator me-1"></i>
                                                <strong>GRAND TOTAL</strong>
                                                <small class="text-muted d-block">{{ number_format($utilizations->count()) }} grouped categories</small>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="progress flex-grow-1" style="height: 20px;">
                                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                                                    </div>
                                                    <strong class="text-success">{{ number_format($displayedTotalCu, 1) }}</strong>
                                                </div>
                                            </td>
                                            <td><strong class="text-success">{{ number_format($displayedTotalDuration, 1) }}</strong></td>
                                            <td><span class="badge bg-success fs-6">{{ number_format($displayedTotalOperations) }}</span></td>
                                            <td>
                                                <strong class="text-success">{{ number_format($displayedEfficiency, 1) }}%</strong>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        <!-- Summary Footer -->
                        <div class="card-footer bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted">
                                    <i class="bx bx-info-circle me-1"></i>
                                    Showing <strong>{{ $utilizations->count() }}</strong> grouped categories
                                    @if(isset($filteredTotals))
                                        from <strong>{{ number_format($filteredTotals->total_operations) }}</strong> total operations
                                    @endif
                                </div>
                                <div class="text-muted small">
                                    Data grouped by workspace and item kind | No pagination needed
                                </div>
                            </div>
                        </div>
                    </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,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: false // We have custom legend
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    titleColor: 'white',
                    bodyColor: 'white',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 6,
                    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
                    },
                    ticks: {
                        color: '#6c757d'
                    }
                },
                y: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'CU Usage',
                        color: '#495057'
                    },
                    grid: {
                        color: '#f8f9fa',
                        borderColor: '#dee2e6'
                    },
                    ticks: {
                        color: '#6c757d'
                    }
                }
            }
        }
    });

    // 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,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: false // We have custom legend
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    titleColor: 'white',
                    bodyColor: 'white',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 6,
                    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: parseFloat(item.total_duration),
                    y: parseFloat(item.total_cu)
                }],
                backgroundColor: itemTypeColors[item.item_kind] || '#6c757d',
                borderColor: itemTypeColors[item.item_kind] || '#6c757d',
                pointRadius: 8,
                pointHoverRadius: 12,
                pointBorderWidth: 2,
                pointBorderColor: '#fff'
            }))
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'point',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    titleColor: 'white',
                    bodyColor: 'white',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 6,
                    callbacks: {
                        title: function(context) {
                            return context[0].dataset.label;
                        },
                        label: function(context) {
                            return `Duration: ${Number(context.raw.x).toLocaleString()}s, CU: ${Number(context.raw.y).toLocaleString()}`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    type: 'linear',
                    title: {
                        display: true,
                        text: 'Duration (s)',
                        color: '#495057'
                    },
                    grid: {
                        color: '#f8f9fa',
                        borderColor: '#dee2e6'
                    },
                    ticks: {
                        color: '#6c757d',
                        callback: function(value) {
                            return Number(value).toLocaleString();
                        }
                    }
                },
                y: {
                    type: 'linear',
                    title: {
                        display: true,
                        text: 'CU Usage',
                        color: '#495057'
                    },
                    grid: {
                        color: '#f8f9fa',
                        borderColor: '#dee2e6'
                    },
                    ticks: {
                        color: '#6c757d',
                        callback: function(value) {
                            return Number(value).toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // 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() {
        @if(isset($companyId))
            window.location.href = "{{ route('metrics.index') }}?company_id={{ $companyId }}";
        @else
            window.location.href = "{{ route('metrics.index') }}";
        @endif
    }

    // Auto-submit form on filter change with debounce
    let filterTimeout;
    function debounceFilter() {
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(() => {
            document.getElementById('filterForm').submit();
        }, 500);
    }

    // Add event listeners for auto-filter
    document.addEventListener('DOMContentLoaded', function() {
        const filters = document.querySelectorAll('#filterForm select, #filterForm input[type="date"]');
        filters.forEach(filter => {
            filter.addEventListener('change', debounceFilter);
        });
        
        const textInput = document.querySelector('#filterForm input[type="text"]');
        if (textInput) {
            textInput.addEventListener('input', debounceFilter);
        }
    });

    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