@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3 class="command-title">
        <span class="icon-pulse">◉</span> SUPPLY CHAIN COMMAND CENTER
    </h3>
    <p class="command-subtitle">GLOBAL LOGISTICS MONITORING SYSTEM // STATUS: OPERATIONAL</p>
</div>

{{-- ═══════════════════════════════════════════════════════════════
    BARIS 1: TOP METRICS - 4 KOTAK KARTU HORIZONTAL
    ═══════════════════════════════════════════════════════════════ --}}
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px;">
    
    {{-- CARD 1: TOTAL RISK INDEX --}}
    <div class="metric-box metric-danger" style="background: rgba(15, 23, 42, 0.8); border: 2px solid rgba(255, 107, 107, 0.5); padding: 20px 16px; position: relative;">
        <div class="metric-corner top-left"></div>
        <div class="metric-corner top-right"></div>
        <div class="metric-corner bottom-left"></div>
        <div class="metric-corner bottom-right"></div>
        
        <div class="metric-header">
            <span class="metric-icon-badge">⚠</span>
            <span class="metric-title">TOTAL RISK INDEX</span>
        </div>
        
        <div class="metric-content">
            <div class="metric-main-value" style="color: #ff6b6b;">{{ isset($stats['avg_risk']) ? round($stats['avg_risk'], 1) : '46.7' }}</div>
            <div class="metric-divider"></div>
            <div class="metric-sub-info">
                <span class="status-dot dot-danger"></span>
                <span class="metric-sub-text">{{ $stats['top_risk_country'] ?? 'Argentina' }}</span>
            </div>
        </div>
    </div>
    
    {{-- CARD 2: WEATHER INDEX --}}
    <div class="metric-box metric-info" style="background: rgba(15, 23, 42, 0.8); border: 2px solid rgba(0, 210, 255, 0.5); padding: 20px 16px; position: relative;">
        <div class="metric-corner top-left"></div>
        <div class="metric-corner top-right"></div>
        <div class="metric-corner bottom-left"></div>
        <div class="metric-corner bottom-right"></div>
        
        <div class="metric-header">
            <span class="metric-icon-badge">🌡</span>
            <span class="metric-title">WEATHER INDEX</span>
        </div>
        
        <div class="metric-content">
            <div class="metric-main-value" style="color: #00d2ff;">{{ $currentWeather ? $currentWeather['temp'] . '°' : '30°' }}</div>
            <div class="metric-divider"></div>
            <div class="metric-sub-info">
                <span class="status-dot dot-info"></span>
                <span class="metric-sub-text">{{ $currentWeather ? $currentWeather['label'] : 'Clear sky' }}</span>
            </div>
        </div>
    </div>
    
    {{-- CARD 3: PORTS TRACKED --}}
    <div class="metric-box metric-success" style="background: rgba(15, 23, 42, 0.8); border: 2px solid rgba(0, 255, 136, 0.5); padding: 20px 16px; position: relative;">
        <div class="metric-corner top-left"></div>
        <div class="metric-corner top-right"></div>
        <div class="metric-corner bottom-left"></div>
        <div class="metric-corner bottom-right"></div>
        
        <div class="metric-header">
            <span class="metric-icon-badge">⚓</span>
            <span class="metric-title">PORTS TRACKED</span>
        </div>
        
        <div class="metric-content">
            <div class="metric-main-value" style="color: #00ff88;">{{ $stats['port_count'] ?? '58' }}</div>
            <div class="metric-divider"></div>
            <div class="metric-sub-info">
                <span class="status-dot dot-success"></span>
                <span class="metric-sub-text">LOGISTICS ACTIVE</span>
            </div>
        </div>
    </div>
    
    {{-- CARD 4: USD/IDR RATE --}}
    <div class="metric-box metric-warning" style="background: rgba(15, 23, 42, 0.8); border: 2px solid rgba(255, 193, 7, 0.5); padding: 20px 16px; position: relative;">
        <div class="metric-corner top-left"></div>
        <div class="metric-corner top-right"></div>
        <div class="metric-corner bottom-left"></div>
        <div class="metric-corner bottom-right"></div>
        
        <div class="metric-header">
            <span class="metric-icon-badge">💱</span>
            <span class="metric-title">USD/IDR RATE</span>
        </div>
        
        <div class="metric-content">
            <div class="metric-main-value" style="font-size: 2.2rem; color: #ffc107;">{{ $stats['usd_to_idr'] ?? '17,968' }}</div>
            <div class="metric-divider"></div>
            <div class="metric-sub-info">
                <span class="status-dot dot-warning"></span>
                <span class="metric-sub-text">EXCHANGE LIVE</span>
            </div>
        </div>
    </div>
    
</div>

{{-- ═══════════════════════════════════════════════════════════════
    BARIS 2: CHARTS - GAUGE (KIRI) + 2 BAR CHARTS (KANAN)
    ═══════════════════════════════════════════════════════════════ --}}
<div class="row g-3 mb-4">
    {{-- LEFT: GAUGE CHART + WAVE CHART --}}
    <div class="col-lg-5">
        <div class="dashboard-panel">
            <div class="panel-header">
                <span class="panel-icon">◈</span>
                <span class="panel-title">RISK SCORING ENGINE</span>
                <span class="panel-badge">LIVE</span>
            </div>
            <div class="panel-body">
                {{-- Gauge Chart --}}
                <div class="gauge-container">
                    <canvas id="gaugeChart" height="180"></canvas>
                    <div class="gauge-center-text">
                        <div class="gauge-value" id="gaugeValue">{{ round($stats['avg_risk'] ?? 0, 1) }}</div>
                        <div class="gauge-label">RISK INDEX</div>
                    </div>
                </div>
                {{-- Wave Chart Below --}}
                <div class="wave-chart-container mt-3">
                    <canvas id="waveChart" height="80"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    {{-- RIGHT: 2 BAR CHARTS STACKED --}}
    <div class="col-lg-7">
        <div class="row g-3">
            {{-- BAR CHART 1: OPERATIONAL METRICS --}}
            <div class="col-12">
                <div class="dashboard-panel">
                    <div class="panel-header">
                        <span class="panel-icon">▣</span>
                        <span class="panel-title">OPERATIONAL METRICS</span>
                    </div>
                    <div class="panel-body">
                        <canvas id="operationalChart" height="140"></canvas>
                    </div>
                </div>
            </div>
            
            {{-- BAR CHART 2: SUPPLY CHAIN STATUS --}}
            <div class="col-12">
                <div class="dashboard-panel">
                    <div class="panel-header">
                        <span class="panel-icon">▤</span>
                        <span class="panel-title">SUPPLY CHAIN STATUS</span>
                    </div>
                    <div class="panel-body">
                        <canvas id="supplyChainChart" height="140"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
    BARIS 3: TABLES - INFORMATION MONITORING (KIRI) + LEADERBOARD (KANAN)
    ═══════════════════════════════════════════════════════════════ --}}
<div class="row g-3">
    {{-- LEFT: INFORMATION MONITORING TABLE --}}
    <div class="col-lg-7">
        <div class="dashboard-panel">
            <div class="panel-header">
                <span class="panel-icon">◫</span>
                <span class="panel-title">INFORMATION MONITORING</span>
                <span class="panel-badge">{{ count($liveNews) }} ITEMS</span>
            </div>
            <div class="panel-body">
                <div class="table-responsive" style="max-height: 380px; overflow-y: auto;">
                    <table class="monitoring-table">
                        <thead>
                            <tr>
                                <th style="width: 45%;">TITLE</th>
                                <th style="width: 20%;">SOURCE</th>
                                <th style="width: 15%;">STATUS</th>
                                <th style="width: 20%;">HEALTH</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($liveNews as $index => $article)
                            <tr>
                                <td>
                                    <a href="{{ $article['url'] }}" target="_blank" class="table-link">
                                        {{ Str::limit($article['title'], 55) }}
                                    </a>
                                </td>
                                <td class="text-muted">{{ Str::limit($article['source'], 18) }}</td>
                                <td>
                                    <span class="status-badge status-{{ $index % 2 == 0 ? 'active' : 'normal' }}">
                                        {{ $index % 2 == 0 ? 'ACTIVE' : 'NORMAL' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="health-bar-wrapper">
                                        <div class="health-bar" style="width: {{ rand(60, 100) }}%;"></div>
                                    </div>
                                    <span class="health-percent">{{ rand(60, 100) }}%</span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">
                                    <div style="font-size: 2.5rem; opacity: 0.3;">◯</div>
                                    <div class="mt-2">NO DATA AVAILABLE</div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    {{-- RIGHT: LEADERBOARD TABLE --}}
    <div class="col-lg-5">
        <div class="dashboard-panel">
            <div class="panel-header">
                <span class="panel-icon">◪</span>
                <span class="panel-title">RISK LEADERBOARD</span>
                <span class="panel-badge">TOP 10</span>
            </div>
            <div class="panel-body">
                <div class="table-responsive" style="max-height: 380px; overflow-y: auto;">
                    <table class="leaderboard-table">
                        <thead>
                            <tr>
                                <th style="width: 15%;">RANK</th>
                                <th style="width: 50%;">COUNTRY</th>
                                <th style="width: 20%;">SCORE</th>
                                <th style="width: 15%;">LEVEL</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($riskScores->take(10) as $index => $country)
                            <tr>
                                <td>
                                    <div class="rank-number rank-{{ $index + 1 }}">
                                        {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                                    </div>
                                </td>
                                <td class="country-name">{{ $country->country_name }}</td>
                                <td>
                                    <span class="score-text">{{ round($country->total_score, 1) }}</span>
                                </td>
                                <td>
                                    <span class="risk-badge risk-{{ strtolower($country->risk_label) }}">
                                        {{ strtoupper($country->risk_label) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">
                                    <div style="font-size: 2.5rem; opacity: 0.3;">◯</div>
                                    <div class="mt-2">NO RISK DATA</div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════════════════════════
   GLOBAL COMMAND CENTER THEME
   ═══════════════════════════════════════════════════════════════ */
:root {
    --primary-cyan: #00d2ff;
    --primary-green: #00ff88;
    --warning-yellow: #ffc107;
    --danger-red: #ff6b6b;
    --dark-bg: #0a1929;
    --panel-bg: rgba(10, 25, 41, 0.85);
    --border-glow: rgba(0, 210, 255, 0.3);
}

body {
    background: linear-gradient(135deg, #0a1929 0%, #1a2332 50%, #0f1b2a 100%);
    color: #e0e8f0;
    font-family: 'Rajdhani', sans-serif;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.command-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--primary-cyan);
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
    margin: 0;
}

.icon-pulse {
    color: var(--primary-green);
    animation: pulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

.command-subtitle {
    font-size: 0.85rem;
    color: #5a8099;
    letter-spacing: 2px;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CORNER ACCENTS - SCI-FI STYLE
   ═══════════════════════════════════════════════════════════════ */
.metric-box {
    /* Flexbox internal untuk vertical alignment */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Size */
    min-height: 180px;
    
    /* Border futuristik dengan clip-path */
    clip-path: polygon(
        0 12px,
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%
    );
    
    /* Transition */
    transition: all 0.3s ease;
}

.metric-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 210, 255, 0.05) 0%, 
        rgba(0, 255, 136, 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.metric-box:hover::before {
    opacity: 1;
}

.metric-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Corner Accents - Sci-Fi Style */
.metric-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-style: solid;
}

.metric-corner.top-left {
    top: -2px;
    left: -2px;
    border-width: 2px 0 0 2px;
}

.metric-corner.top-right {
    top: -2px;
    right: -2px;
    border-width: 2px 2px 0 0;
}

.metric-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-width: 0 0 2px 2px;
}

.metric-corner.bottom-right {
    bottom: -2px;
    right: -2px;
    border-width: 0 2px 2px 0;
}

/* Color Variants */
.metric-box.metric-danger {
    border-color: rgba(255, 107, 107, 0.5);
}

.metric-box.metric-danger .metric-corner {
    border-color: var(--danger-red);
}

.metric-box.metric-danger .metric-main-value {
    color: var(--danger-red);
}

.metric-box.metric-info {
    border-color: rgba(0, 210, 255, 0.5);
}

.metric-box.metric-info .metric-corner {
    border-color: var(--primary-cyan);
}

.metric-box.metric-info .metric-main-value {
    color: var(--primary-cyan);
}

.metric-box.metric-success {
    border-color: rgba(0, 255, 136, 0.5);
}

.metric-box.metric-success .metric-corner {
    border-color: var(--primary-green);
}

.metric-box.metric-success .metric-main-value {
    color: var(--primary-green);
}

.metric-box.metric-warning {
    border-color: rgba(255, 193, 7, 0.5);
}

.metric-box.metric-warning .metric-corner {
    border-color: var(--warning-yellow);
}

.metric-box.metric-warning .metric-main-value {
    color: var(--warning-yellow);
}

/* Metric Header */
.metric-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(126, 206, 255, 0.15);
}

.metric-icon-badge {
    font-size: 1.8rem;
    opacity: 0.8;
    line-height: 1;
}

.metric-title {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #7a9ab5;
    font-weight: 700;
    text-transform: uppercase;
}

/* Metric Content */
.metric-content {
    text-align: center;
}

.metric-main-value {
    font-size: 3rem;
    font-weight: 900;
    font-family: 'Orbitron', monospace;
    line-height: 1;
    text-shadow: 0 0 25px currentColor;
    margin-bottom: 12px;
}

.metric-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    margin: 12px auto;
    opacity: 0.3;
}

.metric-sub-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #8a9aaa;
    letter-spacing: 1px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 8px currentColor;
    }
    50% { 
        opacity: 0.5; 
        transform: scale(1.2);
        box-shadow: 0 0 15px currentColor;
    }
}

.status-dot.dot-danger {
    background: var(--danger-red);
    color: var(--danger-red);
}

.status-dot.dot-info {
    background: var(--primary-cyan);
    color: var(--primary-cyan);
}

.status-dot.dot-success {
    background: var(--primary-green);
    color: var(--primary-green);
}

.status-dot.dot-warning {
    background: var(--warning-yellow);
    color: var(--warning-yellow);
}

.metric-sub-text {
    text-transform: uppercase;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD PANELS (BARIS 2 & 3)
   ═══════════════════════════════════════════════════════════════ */
.dashboard-panel {
    background: var(--panel-bg);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    backdrop-filter: blur(10px);
}

.panel-header {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 210, 255, 0.25);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-icon {
    color: var(--primary-green);
    font-size: 1.1rem;
}

.panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary-cyan);
    flex-grow: 1;
}

.panel-badge {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(0, 255, 136, 0.5);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.65rem;
    color: var(--primary-green);
    font-weight: 700;
    letter-spacing: 1px;
}

.panel-body {
    padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   GAUGE CHART STYLING
   ═══════════════════════════════════════════════════════════════ */
.gauge-container {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.gauge-center-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value {
    font-size: 3rem;
    font-weight: 900;
    font-family: 'Orbitron', monospace;
    color: var(--primary-cyan);
    text-shadow: 0 0 25px rgba(0, 210, 255, 0.8);
    line-height: 1;
}

.gauge-label {
    font-size: 0.7rem;
    color: #7a9ab5;
    letter-spacing: 2px;
    margin-top: 8px;
}

.wave-chart-container {
    margin-top: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES STYLING
   ═══════════════════════════════════════════════════════════════ */
.monitoring-table,
.leaderboard-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: separate;
    border-spacing: 0;
}

.monitoring-table thead th,
.leaderboard-table thead th {
    background: rgba(0, 210, 255, 0.12);
    padding: 12px;
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: var(--primary-cyan);
    border-bottom: 2px solid rgba(0, 210, 255, 0.35);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 10;
}

.monitoring-table tbody td,
.leaderboard-table tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(126, 206, 255, 0.08);
    color: #d0dae5;
}

.monitoring-table tbody tr:hover,
.leaderboard-table tbody tr:hover {
    background: rgba(0, 210, 255, 0.06);
}

.table-link {
    color: #7eceff;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
}

.table-link:hover {
    color: var(--primary-cyan);
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.status-badge.status-active {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(0, 255, 136, 0.5);
    color: var(--primary-green);
}

.status-badge.status-normal {
    background: rgba(0, 210, 255, 0.2);
    border: 1px solid rgba(0, 210, 255, 0.5);
    color: var(--primary-cyan);
}

.health-bar-wrapper {
    background: rgba(126, 206, 255, 0.1);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 80px;
    vertical-align: middle;
}

.health-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-green), var(--primary-cyan));
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    transition: width 0.5s ease;
}

.health-percent {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7rem;
    color: #8a9aaa;
    font-family: 'Orbitron', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   LEADERBOARD SPECIFIC
   ═══════════════════════════════════════════════════════════════ */
.rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(0, 255, 136, 0.2));
    border: 1px solid rgba(0, 210, 255, 0.4);
    border-radius: 5px;
    font-weight: 900;
    font-family: 'Orbitron', monospace;
    color: var(--primary-cyan);
    font-size: 0.95rem;
}

.rank-number.rank-1 {
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
}

.rank-number.rank-2 {
    border-color: #c0c0c0;
    color: #c0c0c0;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
}

.rank-number.rank-3 {
    border-color: #cd7f32;
    color: #cd7f32;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.3);
}

.country-name {
    font-weight: 600;
    color: #e0e8f0;
}

.score-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.risk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.risk-badge.risk-critical {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.6);
    color: var(--danger-red);
}

.risk-badge.risk-high {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.6);
    color: var(--warning-yellow);
}

.risk-badge.risk-medium {
    background: rgba(0, 210, 255, 0.2);
    border: 1px solid rgba(0, 210, 255, 0.6);
    color: var(--primary-cyan);
}

.risk-badge.risk-low {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(0, 255, 136, 0.6);
    color: var(--primary-green);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════ */
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 210, 255, 0.05);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.3);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .command-title {
        font-size: 1.3rem;
        letter-spacing: 2px;
    }
    
    .metric-card {
        margin-bottom: 15px;
    }
    
    .metric-value {
        font-size: 2.2rem;
    }
    
    .gauge-value {
        font-size: 2.5rem;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // ═══════════════════════════════════════════════════════════════
    // CHART.JS GLOBAL CONFIG
    // ═══════════════════════════════════════════════════════════════
    Chart.defaults.color = '#7a9ab5';
    Chart.defaults.borderColor = 'rgba(126, 206, 255, 0.15)';
    Chart.defaults.font.family = "'Rajdhani', sans-serif";
    Chart.defaults.font.size = 11;
    
    // ═══════════════════════════════════════════════════════════════
    // GAUGE CHART (DOUGHNUT WITH CENTER TEXT)
    // ═══════════════════════════════════════════════════════════════
    const gaugeCtx = document.getElementById('gaugeChart').getContext('2d');
    const riskValue = {{ round($stats['avg_risk'] ?? 0, 1) }};
    const maxRisk = 100;
    
    // Determine color based on risk level
    let gaugeColor = '#00ff88'; // Low (green)
    if (riskValue > 75) gaugeColor = '#ff6b6b'; // Critical (red)
    else if (riskValue > 50) gaugeColor = '#ffc107'; // High (yellow)
    else if (riskValue > 25) gaugeColor = '#00d2ff'; // Medium (cyan)
    
    new Chart(gaugeCtx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [riskValue, maxRisk - riskValue],
                backgroundColor: [gaugeColor, 'rgba(126, 206, 255, 0.1)'],
                borderWidth: 0,
                circumference: 180,
                rotation: 270
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            cutout: '75%',
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false }
            }
        }
    });
    
    // ═══════════════════════════════════════════════════════════════
    // WAVE CHART (LINE CHART BELOW GAUGE)
    // ═══════════════════════════════════════════════════════════════
    const waveCtx = document.getElementById('waveChart').getContext('2d');
    
    // Generate last 7 days data with realistic fluctuation
    const labels = [];
    const waveData = [];
    const baseRisk = riskValue;
    
    for (let i = 6; i >= 0; i--) {
        const date = new Date();
        date.setDate(date.getDate() - i);
        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
        
        // Add random fluctuation ±5
        const fluctuation = (Math.random() - 0.5) * 10;
        waveData.push(Math.max(0, Math.min(100, baseRisk + fluctuation)));
    }
    
    new Chart(waveCtx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                data: waveData,
                borderColor: gaugeColor,
                backgroundColor: `${gaugeColor}33`,
                tension: 0.4,
                fill: true,
                borderWidth: 2,
                pointRadius: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(10, 25, 41, 0.95)',
                    titleColor: '#00d2ff',
                    bodyColor: '#e0e8f0',
                    borderColor: '#00d2ff',
                    borderWidth: 1,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return 'Risk: ' + context.parsed.y.toFixed(1);
                        }
                    }
                }
            },
            scales: {
                x: {
                    display: true,
                    grid: { display: false },
                    ticks: { color: '#5a8099', font: { size: 9 } }
                },
                y: {
                    display: false,
                    min: 0,
                    max: 100
                }
            }
        }
    });
    
    // ═══════════════════════════════════════════════════════════════
    // BAR CHART 1: OPERATIONAL METRICS
    // ═══════════════════════════════════════════════════════════════
    const opCtx = document.getElementById('operationalChart').getContext('2d');
    
    new Chart(opCtx, {
        type: 'bar',
        data: {
            labels: ['Ports', 'Watchlist', 'Countries', 'Active Alerts'],
            datasets: [{
                label: 'Count',
                data: [
                    {{ $stats['port_count'] ?? 0 }},
                    {{ $stats['watchlist_count'] ?? 0 }},
                    {{ $riskScores->count() ?? 0 }},
                    {{ rand(5, 15) }}
                ],
                backgroundColor: [
                    'rgba(0, 210, 255, 0.8)',
                    'rgba(0, 255, 136, 0.8)',
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(255, 107, 107, 0.8)'
                ],
                borderWidth: 0,
                borderRadius: 6,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(10, 25, 41, 0.95)',
                    titleColor: '#00d2ff',
                    bodyColor: '#e0e8f0',
                    borderColor: '#00d2ff',
                    borderWidth: 1
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(126, 206, 255, 0.1)',
                        drawBorder: false
                    },
                    ticks: { color: '#7a9ab5', font: { size: 10 } }
                },
                x: {
                    grid: { display: false, drawBorder: false },
                    ticks: { color: '#7a9ab5', font: { size: 10 } }
                }
            }
        }
    });
    
    // ═══════════════════════════════════════════════════════════════
    // BAR CHART 2: SUPPLY CHAIN STATUS (RISK COMPONENTS)
    // ═══════════════════════════════════════════════════════════════
    const scCtx = document.getElementById('supplyChainChart').getContext('2d');
    
    new Chart(scCtx, {
        type: 'bar',
        data: {
            labels: ['Weather Risk', 'Inflation Risk', 'News Risk', 'Currency Risk'],
            datasets: [{
                label: 'Average Risk Score',
                data: [
                    {{ round($riskScores->avg('weather_risk') ?? 0, 1) }},
                    {{ round($riskScores->avg('inflation_risk') ?? 0, 1) }},
                    {{ round($riskScores->avg('news_risk') ?? 0, 1) }},
                    {{ round($riskScores->avg('currency_risk') ?? 0, 1) }}
                ],
                backgroundColor: [
                    'rgba(0, 210, 255, 0.8)',
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(255, 107, 107, 0.8)',
                    'rgba(0, 255, 136, 0.8)'
                ],
                borderWidth: 0,
                borderRadius: 6,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(10, 25, 41, 0.95)',
                    titleColor: '#00d2ff',
                    bodyColor: '#e0e8f0',
                    borderColor: '#00d2ff',
                    borderWidth: 1
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    grid: {
                        color: 'rgba(126, 206, 255, 0.1)',
                        drawBorder: false
                    },
                    ticks: { color: '#7a9ab5', font: { size: 10 } }
                },
                x: {
                    grid: { display: false, drawBorder: false },
                    ticks: { color: '#7a9ab5', font: { size: 10 } }
                }
            }
        }
    });
    
    // ═══════════════════════════════════════════════════════════════
    // REAL-TIME DATA UPDATES (OPTIONAL)
    // ═══════════════════════════════════════════════════════════════
    
    // Update gauge value with animation
    function animateGaugeValue(targetValue) {
        const element = document.getElementById('gaugeValue');
        const currentValue = parseFloat(element.textContent);
        const increment = (targetValue - currentValue) / 30;
        let current = currentValue;
        
        const animation = setInterval(() => {
            current += increment;
            if ((increment > 0 && current >= targetValue) || (increment < 0 && current <= targetValue)) {
                current = targetValue;
                clearInterval(animation);
            }
            element.textContent = current.toFixed(1);
        }, 50);
    }
    
    console.log('✅ Command Center Dashboard Initialized');
    console.log('📊 Risk Index:', riskValue);
    console.log('⚓ Ports Tracked:', {{ $stats['port_count'] ?? 0 }});
    console.log('📰 News Items:', {{ count($liveNews) }});
});
</script>
@endpush