@extends('layouts.app')

@section('content')

{{-- ── MAP SECTION (nothing here — map is full-screen bg) ── --}}
<div id="section-map" class="dashboard-section active">
    {{-- Global News Ticker --}}
    <div class="global-news-ticker" id="global-news-ticker">
        <div class="ticker-label">
            <span class="live-dot-pulse"></span>
            LIVE NEWS
        </div>
        <div class="ticker-content">
            <div class="ticker-scroll" id="ticker-scroll">
                Loading live maritime updates...
            </div>
        </div>
    </div>


</div>


<style>
    /* Floating Glassmorphic Live News Ticker */
    .global-news-ticker {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 360px);
        max-width: 1200px;
        height: 46px;
        background: rgba(15, 23, 42, 0.92);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        z-index: 2000;
        display: flex;
        align-items: center;
        padding: 0 8px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
        pointer-events: auto;
        transition: all 0.3s var(--ease);
    }
    .global-news-ticker:hover .ticker-scroll {
        animation-play-state: paused;
    }
    .ticker-label {
        background: linear-gradient(135deg, #E11D48, #F43F5E);
        color: #ffffff;
        padding: 0 14px;
        height: 32px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 0.72rem;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
        flex-shrink: 0;
        z-index: 2;
    }
    .live-dot-pulse {
        width: 7px;
        height: 7px;
        background: #ffffff;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 8px #ffffff;
        animation: livePulse 1.5s infinite ease-in-out;
    }
    @keyframes livePulse {
        0% { transform: scale(0.8); opacity: 0.6; }
        50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #ffffff; }
        100% { transform: scale(0.8); opacity: 0.6; }
    }
    .ticker-content {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
    }
    .ticker-scroll {
        display: inline-block;
        padding-left: 100%;
        animation: ticker 180s linear infinite;
        will-change: transform;
        transform: translateZ(0);
    }
    .ticker-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-right: 50px;
        font-size: 0.84rem;
        font-weight: 600;
        color: #F8FAFC;
    }
    
    @keyframes ticker {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    @media (max-width: 768px) {
        .global-news-ticker {
            bottom: 76px;
            left: 12px;
            right: 12px;
            width: auto;
            transform: none;
        }
        
        /* Responsive untuk tombol refresh news di mobile */
        #btn-refresh-news {
            padding: 0 12px !important;
            font-size: 0.75rem !important;
            height: 38px !important;
            min-width: 44px;
        }
        
        #btn-refresh-news .refresh-news-text {
            display: none;
        }
        
        #news-country-filter {
            min-width: 130px !important;
            font-size: 0.75rem !important;
            height: 38px !important;
            padding-left: 10px !important;
        }
    }

    /* Tracking Panel Styles */
    .tracking-panel {
        position: absolute;
        top: 80px;
        left: 20px;
        width: 320px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        color: #0f172a;
        overflow: hidden;
        animation: fadeRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: auto; /* Enable clicks on this panel */
    }
    
    @keyframes fadeRight {
        from { opacity: 0; transform: translateX(-20px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .tracking-header {
        padding: 16px;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(126, 34, 206, 0.05));
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .tracking-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
    .tracking-subtitle { font-size: 0.7rem; color: #94a3b8; margin-top: 2px; }
    
    .tracking-body { padding: 16px; }
    
    .tracking-input {
        background: rgba(0,0,0,0.2) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: white !important;
        font-size: 0.8rem !important;
    }
    .tracking-input:focus { border-color: #3b82f6 !important; }
    
    .tracking-btn {
        background: #3b82f6;
        color: #0f172a;
        font-weight: 700;
        font-size: 0.8rem;
        border: none;
    }
    .tracking-btn:hover { background: #2563eb; color: #0f172a; }

    .tracking-status-box {
        background: rgba(255,255,255,0.7);
        border-radius: 8px;
        padding: 12px;
    }
    .tracking-badge { background: #10b981; font-size: 0.65rem; letter-spacing: 0.5px; }
    .tracking-eta { font-weight: 800; font-size: 0.9rem; color: #facc15; }
    .tracking-route { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; }
    .tracking-komoditas { font-size: 0.75rem; color: #94a3b8; }
    
    .tracking-details { font-size: 0.8rem; }
    .tr-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
    .tr-label { color: #94a3b8; }
    .tr-val { font-weight: 600; }
    
    /* Responsive for mobile */
    @media (max-width: 767px) {
        .tracking-panel {
            top: 70px;
            left: 10px;
            right: 10px;
            width: auto;
        }
    }
</style>

{{-- ── COUNTRY INTEL ── --}}
<div id="section-country" class="dashboard-section">
    <!-- Select Country Panel -->
    <div style="position:relative; background:rgba(255, 255, 255, 0.92); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255, 255, 255, 0.95); border-radius:24px; overflow:hidden; box-shadow:0 20px 45px -10px rgba(16,185,129,0.14), 0 4px 16px rgba(15,23,42,0.04); margin-bottom:24px;">
        <!-- Futuristic Geometric Backdrop Shapes -->
        <svg width="450" height="220" style="position:absolute; top:-60px; right:-80px; opacity:0.12; pointer-events:none; transform:rotate(12deg);" viewBox="0 0 200 200">
            <defs>
                <linearGradient id="shapeGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#1E3A8A"/>
                    <stop offset="100%" stop-color="#1D4ED8"/>
                </linearGradient>
            </defs>
            <path fill="url(#shapeGrad1)" d="M40,-50 C70,-20 90,40 60,90 C30,140 -40,120 -60,70 C-80,20 -20,-80 40,-50 Z"/>
            <circle cx="140" cy="60" r="25" fill="none" stroke="#2563EB" stroke-width="3" stroke-dasharray="6,6"/>
        </svg>
        
        <div style="position:relative; z-index:2;">
            <div style="background:linear-gradient(135deg, rgba(239,246,255,0.85), rgba(219,234,254,0.65)); border-bottom:1px solid rgba(191,219,254,0.8); display:flex; justify-content:space-between; align-items:center; padding:18px 26px;">
                <div>
                    <div style="font-weight:900; color:#0F172A; font-size:1.15rem; letter-spacing:-0.4px; line-height:1.2;">Country Intelligence Portal</div>
                    <div style="font-size:0.78rem; color:#1E3A8A; font-weight:700; margin-top:2px;">Filter metrics & economic risk profiles by nation</div>
                </div>
            </div>
            <div style="padding:24px;">
                <select id="country-select" class="form-select" style="height:58px; border-radius:16px; font-weight:800; font-size:1.05rem; background:rgba(248,250,252,0.9); border:2px solid #E2E8F0; box-shadow:0 8px 24px -4px rgba(30,58,138,0.08); color:#0F172A; cursor:pointer; transition:all 0.3s ease;">
                    <option value="">All Countries (Global Overview)</option>
                    @foreach($negaras as $negara)
                        <option value="{{ $negara->id }}">{{ $negara->nama }} ({{ $negara->kode_iso3 }})</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Economic Indicators -->
        <div class="col-md-6 d-none" id="col-eco">
            <div style="position:relative; background:rgba(255, 255, 255, 0.92); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255, 255, 255, 0.95); border-radius:24px; overflow:hidden; box-shadow:0 20px 45px -10px rgba(30,58,138,0.14); height:100%; display:flex; flex-direction:column;">
                <!-- Decorative Geometric Shapes -->
                <svg width="260" height="260" style="position:absolute; bottom:-70px; right:-70px; opacity:0.1; pointer-events:none; transform:rotate(-15deg);" viewBox="0 0 100 100">
                    <rect x="15" y="15" width="70" height="70" rx="20" fill="#1E3A8A" transform="rotate(45 50 50)"/>
                    <circle cx="50" cy="50" r="18" fill="#1D4ED8"/>
                </svg>
                
                <div style="position:relative; z-index:2; display:flex; flex-direction:column; height:100%;">
                    <div style="background:linear-gradient(135deg, rgba(239,246,255,0.85), rgba(219,234,254,0.65)); border-bottom:1px solid rgba(191,219,254,0.8); padding:16px 24px; display:flex; align-items:center; justify-content:space-between;">
                        <div style="font-weight:900; color:#1E3A8A; font-size:1.02rem; letter-spacing:-0.3px; display:flex; align-items:center; gap:8px;">
                            <i class="bi bi-graph-up-arrow" style="font-size:1.2rem; color:#1E3A8A;"></i> Economic Indicators
                        </div>
                        <span class="badge" style="background:rgba(30,58,138,0.12); color:#1E3A8A; font-weight:800; border-radius:99px; padding:6px 14px; font-size:0.72rem;">MACRO DATA</span>
                    </div>
                    <div style="padding:22px; flex:1; display:flex; flex-direction:column; gap:14px;">
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">GDP (USD)</span>
                            <span id="cd-gdp" style="font-size:1.05rem; font-weight:900; color:#0F172A;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Inflation Rate</span>
                            <span id="cd-inflation" style="font-size:1.05rem; font-weight:900; color:#F43F5E;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Population</span>
                            <span id="cd-population" style="font-size:1.05rem; font-weight:900; color:#0F172A;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Exports</span>
                            <span id="cd-export" style="font-size:1.05rem; font-weight:900; color:#10B981;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Imports</span>
                            <span id="cd-import" style="font-size:1.05rem; font-weight:900; color:#0F172A;">—</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Currency & Risk -->
        <div class="col-md-6 d-none" id="col-cur">
            <div style="position:relative; background:rgba(255, 255, 255, 0.92); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255, 255, 255, 0.95); border-radius:24px; overflow:hidden; box-shadow:0 20px 45px -10px rgba(30,58,138,0.14); height:100%; display:flex; flex-direction:column;">
                <!-- Decorative Geometric Shapes -->
                <svg width="220" height="220" style="position:absolute; top:-50px; left:-50px; opacity:0.1; pointer-events:none;" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="45" fill="none" stroke="#1E3A8A" stroke-width="4"/>
                    <polygon points="50,15 85,80 15,80" fill="#1D4ED8" opacity="0.5"/>
                </svg>
                
                <div style="position:relative; z-index:2; display:flex; flex-direction:column; height:100%;">
                    <div style="background:linear-gradient(135deg, rgba(239,246,255,0.85), rgba(219,234,254,0.65)); border-bottom:1px solid rgba(191,219,254,0.8); padding:16px 24px; display:flex; align-items:center; justify-content:space-between;">
                        <div style="font-weight:900; color:#1E3A8A; font-size:1.02rem; letter-spacing:-0.3px; display:flex; align-items:center; gap:8px;">
                            <i class="bi bi-currency-exchange" style="font-size:1.2rem; color:#1E3A8A;"></i> Currency & Risk Analysis
                        </div>
                        <span class="badge" style="background:rgba(30,58,138,0.12); color:#1E3A8A; font-weight:800; border-radius:99px; padding:6px 14px; font-size:0.72rem;">FINANCIAL INTEL</span>
                    </div>
                    <div style="padding:22px; flex:1; display:flex; flex-direction:column; gap:14px;">
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Currency</span>
                            <span id="cd-currency" style="font-size:1.05rem; font-weight:900; color:#0F172A;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Rate vs USD</span>
                            <span id="cd-rate" style="font-size:1.05rem; font-weight:900; color:#1E3A8A;">—</span>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(226,232,240,0.7);">
                            <span style="font-size:0.82rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px;">Risk Score</span>
                            <span id="cd-risk" style="font-size:1.05rem; font-weight:900; color:#0F172A;">—</span>
                        </div>
                        <div style="margin-top:auto; padding:18px; background:linear-gradient(135deg, rgba(239,246,255,0.9), rgba(219,234,254,0.8)); border:1.5px solid rgba(30,58,138,0.3); border-radius:18px; box-shadow:0 6px 20px rgba(30,58,138,0.08);">
                            <div style="font-size:0.73rem; font-weight:900; color:#1E3A8A; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:flex; align-items:center; gap:6px;">
                                <i class="bi bi-box-seam-fill"></i> Shipping Cost Impact · Per TEU ($15K USD)
                            </div>
                            <div id="cd-shipping-impact" style="font-size:1.5rem; font-weight:900; color:#0F172A; line-height:1.2; margin-bottom:4px;">—</div>
                            <div style="font-size:0.78rem; color:#64748B; font-weight:700;">Estimated in local currency</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── RISK SCORING ── --}}
<div id="section-risk" class="dashboard-section">
    <div style="background:#ffffff; border:1px solid #F1F5F9; border-radius:24px; overflow:hidden; box-shadow:0 10px 40px rgba(15,23,42,0.05); margin-bottom:28px;">
        <div style="background:#FAFAFC; border-bottom:1px solid #F1F5F9; display:flex; justify-content:space-between; align-items:center; padding:20px 28px; flex-wrap:wrap; gap:16px;">
            <div>
                <div style="display:flex; align-items:center; gap:10px;">
                    <div style="font-weight:800; color:#0F172A; font-size:1.2rem; letter-spacing:-0.4px; line-height:1.2;">Global Supply Chain Risk Matrix</div>
                    <span style="font-size:0.65rem; font-weight:800; background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE; padding:3px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:0.5px;">AI Multi-Factor Model</span>
                </div>
                <div style="font-size:0.78rem; color:#64748B; font-weight:500; margin-top:3px;">Weighted predictive risk index evaluated across Weather, Inflation, News & Currency Volatility</div>
            </div>
            <div style="display:flex; align-items:center; gap:12px;">
                <span style="font-size:0.75rem; font-weight:700; color:#0F172A; background:#F1F5F9; padding:8px 14px; border-radius:12px; display:flex; align-items:center; gap:6px;">
                    <i class="bi bi-shield-check" style="color:#1E3A8A;"></i> Multi-Variable Score (0-100)
                </span>
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; text-align:left;">
                <thead>
                    <tr style="background:#F8FAFC; border-bottom:1px solid #E2E8F0;">
                        <th style="padding:16px 24px; text-align:center; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px; width:60px;">Watch</th>
                        <th style="padding:16px 20px; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">Country & Hub</th>
                        <th style="padding:16px 16px; text-align:center; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">Weather Risk</th>
                        <th style="padding:16px 16px; text-align:center; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">Inflation Index</th>
                        <th style="padding:16px 16px; text-align:center; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">News Sentiment</th>
                        <th style="padding:16px 16px; text-align:center; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">Currency Volatility</th>
                        <th style="padding:16px 20px; text-align:center; font-size:0.7rem; font-weight:800; color:#0F172A; text-transform:uppercase; letter-spacing:1px;">Total Risk Score</th>
                        <th style="padding:16px 28px; text-align:right; font-size:0.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:1px;">Risk Level</th>
                    </tr>
                </thead>
                <tbody id="risk-table-body"></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ── CURRENCY IMPACT ── --}}
<div id="section-currency" class="dashboard-section">
    <div style="position:relative; background:#ffffff; border:1px solid #E2E8F0; border-radius:28px; overflow:hidden; box-shadow:0 20px 50px -10px rgba(15,23,42,0.08); margin-bottom:28px;">
        <!-- 3D Futuristic Layered Vector Shape Backdrops -->
        <svg width="450" height="450" style="position:absolute; top:-120px; right:-120px; opacity:0.045; pointer-events:none; transform:rotate(25deg);" viewBox="0 0 100 100">
            <polygon fill="#1E3A8A" points="50,0 100,50 50,100 0,50" />
            <rect x="15" y="15" width="70" height="70" rx="18" fill="none" stroke="#2563EB" stroke-width="4"/>
            <circle cx="50" cy="50" r="35" fill="none" stroke="#1D4ED8" stroke-width="5" stroke-dasharray="8,4"/>
        </svg>
        <svg width="300" height="300" style="position:absolute; bottom:-90px; left:-90px; opacity:0.04; pointer-events:none; transform:rotate(-15deg);" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#1E3A8A" stroke-width="6"/>
            <polygon points="50,10 90,85 10,85" fill="#2563EB" opacity="0.4"/>
        </svg>

        <div style="position:relative; z-index:2;">
            <!-- Modern Header -->
            <div style="background:linear-gradient(135deg, rgba(239,246,255,0.95), rgba(219,234,254,0.6)); border-bottom:1px solid rgba(191,219,254,0.8); display:flex; justify-content:space-between; align-items:center; padding:22px 32px; flex-wrap:wrap; gap:16px;">
                <div>
                    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                        <span style="font-weight:900; color:#0F172A; font-size:1.35rem; letter-spacing:-0.5px;">Currency Converter</span>
                        <span style="font-size:0.68rem; font-weight:800; color:#ffffff; background:linear-gradient(135deg, #1E3A8A, #2563EB); padding:4px 12px; border-radius:99px; letter-spacing:1px; text-transform:uppercase; box-shadow:0 4px 12px rgba(37,99,235,0.25);">FX INTELLIGENCE ENGINE</span>
                    </div>
                    <div style="font-size:0.82rem; color:#475569; font-weight:600; margin-top:3px;">Real-time Foreign Exchange analytics, supply chain FX impact & historical trends</div>
                </div>
                <span id="cur-update-time" style="font-size:0.78rem; font-weight:800; color:#1E3A8A; background:rgba(255,255,255,0.9); border:1px solid rgba(30,58,138,0.25); padding:8px 18px; border-radius:99px; display:flex; align-items:center; gap:8px; box-shadow:0 4px 14px rgba(30,58,138,0.08);">
                    <i class="bi bi-broadcast text-primary" style="animation:pulseGlow 1.5s infinite;"></i> Live FX Stream
                </span>
            </div>
    
            <div style="padding:32px;">
                <!-- Currency Selection Matrix -->
                <div style="display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:end; margin-bottom:32px; background:linear-gradient(135deg, #F8FAFC, #EFF6FF); border:1px solid #DBEAFE; padding:24px; border-radius:24px; box-shadow:0 8px 30px rgba(30,58,138,0.04);">
                    <div style="position:relative;">
                        <label style="font-size:0.75rem; font-weight:800; color:#1E3A8A; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; display:flex; align-items:center; gap:6px;">
                            <i class="bi bi-box-arrow-up-right text-primary"></i> From Currency (Origin)
                        </label>
                        <select id="cur-from" class="form-select" style="height:56px; border-radius:16px; font-weight:700; background:#ffffff; border:2px solid #CBD5E1; box-shadow:0 4px 16px rgba(15,23,42,0.04); color:#0F172A; cursor:pointer; font-size:1rem; padding-left:18px; transition:all 0.3s ease;">
                            <option value="">— Select Origin Currency —</option>
                        </select>
                    </div>
                    
                    <button id="cur-swap-btn" onclick="window.swapCurrencies()" style="width:56px; height:56px; margin-bottom:2px; border-radius:18px; border:none; background:linear-gradient(135deg, #1E3A8A, #2563EB); color:#fff; cursor:pointer; font-size:1.4rem; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(37,99,235,0.4); transition:all 0.3s cubic-bezier(0.16,1,0.3,1); flex-shrink:0;" onmouseover="this.style.transform='rotate(180deg) scale(1.08)'" onmouseout="this.style.transform='rotate(0deg) scale(1)'" title="Swap currencies">
                        <i class="bi bi-arrow-left-right"></i>
                    </button>
                    
                    <div style="position:relative;">
                        <label style="font-size:0.75rem; font-weight:800; color:#1E3A8A; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; display:flex; align-items:center; gap:6px;">
                            <i class="bi bi-box-arrow-in-down-left text-primary"></i> To Currency (Target)
                        </label>
                        <select id="cur-to" class="form-select" style="height:56px; border-radius:16px; font-weight:700; background:#ffffff; border:2px solid #CBD5E1; box-shadow:0 4px 16px rgba(15,23,42,0.04); color:#0F172A; cursor:pointer; font-size:1rem; padding-left:18px; transition:all 0.3s ease;">
                            <option value="">— Select Target Currency —</option>
                        </select>
                    </div>
                </div>

                <!-- Conversion Result Panel -->
                <div id="cur-result-panel" style="display:none; animation:fadeInUp 0.4s ease-out;">
                    <!-- Big Rate Display Hero Card -->
                    <div style="background:linear-gradient(135deg, rgba(30,58,138,0.07), rgba(37,99,235,0.03)); border:1.5px solid rgba(37,99,235,0.25); border-radius:26px; padding:38px 28px; margin-bottom:32px; text-align:center; position:relative; overflow:hidden; box-shadow:0 14px 45px rgba(30,58,138,0.1);">
                        <div style="position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, #1E3A8A, #2563EB, #60A5FA, #1D4ED8);"></div>
                        
                        <!-- Floating Subtle Background Badge -->
                        <div style="position:absolute; top:-20px; right:-20px; width:140px; height:140px; background:rgba(37,99,235,0.1); filter:blur(40px); border-radius:50%; pointer-events:none;"></div>
                        
                        <div style="position:relative; z-index:2;">
                            <div style="font-size:0.78rem; font-weight:900; color:#1E3A8A; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.9); padding:6px 18px; border-radius:99px; border:1px solid rgba(30,58,138,0.15);">
                                <i class="bi bi-lightning-charge-fill text-warning"></i> Real-Time Live Exchange Rate
                            </div>
                            <div style="font-size:3.6rem; font-weight:900; color:#0F172A; line-height:1.1; letter-spacing:-1.8px; margin-bottom:14px;" id="cur-rate-main">—</div>
                            <div style="font-size:0.92rem; font-weight:800; color:#475569; background:rgba(255,255,255,0.95); border:1px solid #CBD5E1; padding:8px 22px; border-radius:99px; display:inline-block; box-shadow:0 4px 14px rgba(15,23,42,0.05);" id="cur-rate-inverse">—</div>
                        </div>
                    </div>

                    <!-- Quick Reference Grid Title -->
                    <div style="font-size:0.8rem; font-weight:900; color:#1E3A8A; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px;">
                        <i class="bi bi-grid-3x3-gap-fill text-primary"></i> Quick Conversion Matrix
                    </div>

                    <!-- Quick Reference Grid -->
                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px; margin-bottom:32px;" id="cur-quick-grid">
                        <!-- filled by JS -->
                    </div>

                    <!-- Trend Chart Header -->
                    <div style="font-size:0.8rem; font-weight:900; color:#1E3A8A; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px;">
                        <i class="bi bi-graph-up-arrow text-primary"></i> 30-Day Historical FX Exchange Trend
                    </div>

                    <!-- Trend Chart -->
                    <div style="position:relative; overflow:hidden; height:280px; background:#ffffff; border:1px solid #E2E8F0; border-radius:26px; padding:22px; box-shadow:0 8px 28px rgba(15,23,42,0.05);">
                        <div style="position:relative; z-index:2; height:100%;">
                            <canvas id="currencyChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div id="cur-empty-state" style="text-align:center; padding:80px 0; color:#64748B;">
                    <div style="width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, rgba(30,58,138,0.12), rgba(37,99,235,0.08)); color:#1E3A8A; font-size:3.2rem; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; box-shadow:0 12px 35px rgba(30,58,138,0.15); border:2px solid rgba(255,255,255,0.8);">
                        <i class="bi bi-wallet2"></i>
                    </div>
                    <div style="font-size:1.35rem; font-weight:900; color:#0F172A; margin-bottom:8px; letter-spacing:-0.4px;">Select Currency Pair</div>
                    <div style="font-size:0.92rem; font-weight:600; color:#64748B; max-width:440px; margin:0 auto; line-height:1.5;">Choose origin and target currencies above to compute real-time exchange rates, quick reference conversion matrices, and 30-day historical trends.</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── NEWS FEED ── --}}
<div id="section-news" class="dashboard-section">
    <!-- Sentiment Analytics Card -->
    <div style="position:relative; background:#ffffff; border:1px solid #F1F5F9; border-radius:24px; overflow:hidden; box-shadow:0 10px 40px rgba(15,23,42,0.05); margin-bottom:28px;">
        <!-- Background Geometric Vector Shape -->
        <svg width="350" height="350" style="position:absolute; top:-90px; right:-90px; opacity:0.035; pointer-events:none; transform:rotate(15deg);" viewBox="0 0 100 100">
            <polygon fill="#0F172A" points="50,0 100,50 50,100 0,50" />
            <circle cx="50" cy="50" r="35" fill="none" stroke="#2563EB" stroke-width="6"/>
        </svg>

        <div style="position:relative; z-index:2;">
            <div style="background:#FAFAFC; border-bottom:1px solid #F1F5F9; display:flex; justify-content:space-between; align-items:center; padding:20px 28px; flex-wrap:wrap; gap:16px;">
                <div style="flex:1; min-width:200px;">
                    <div style="font-weight:800; color:#0F172A; font-size:1.2rem; letter-spacing:-0.4px; line-height:1.2;">Global Sentiment Analysis</div>
                    <div style="font-size:0.78rem; color:#64748B; font-weight:500; margin-top:2px;">Real-time market mood & media impact intelligence</div>
                </div>
                <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                    <select id="news-country-filter" class="form-select" style="width:auto; min-width:150px; max-width:200px; height:42px; font-size:0.82rem; font-weight:700; border-radius:14px; background:#ffffff; border:1px solid #E2E8F0; color:#0F172A; box-shadow:0 2px 8px rgba(15,23,42,0.04); cursor:pointer; padding-left:12px; padding-right:32px;">
                        <option value="">🌎 All Countries</option>
                        @foreach($negaras as $negara)
                            <option value="{{ $negara->id }}">{{ $negara->nama }}</option>
                        @endforeach
                    </select>
                    <button id="btn-refresh-news" onclick="refreshNews()" title="Refresh berita terbaru" style="height:42px; padding:0 16px; background:linear-gradient(135deg,#2563EB,#0EA5E9); color:#fff; border:none; border-radius:14px; font-size:0.82rem; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:7px; box-shadow:0 4px 14px rgba(37,99,235,0.3); transition:all 0.2s ease; white-space:nowrap; flex-shrink:0;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(37,99,235,0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(37,99,235,0.3)'">
                        <i class="bi bi-arrow-clockwise" id="refresh-news-icon"></i>
                        <span class="refresh-news-text">Refresh News</span>
                    </button>
                </div>
            </div>
            <div style="padding:28px;">
                <div class="row g-4 align-items-center">
                    <!-- Stat Badges -->
                    <div class="col-md-3">
                        <div style="display:flex; flex-direction:column; gap:14px;">
                            <!-- High Impact -->
                            <div style="position:relative; background:linear-gradient(135deg, rgba(225,29,72,0.06), rgba(225,29,72,0.01)); border:1px solid rgba(225,29,72,0.15); padding:20px; border-radius:18px; overflow:hidden; transition:all 0.3s var(--ease);" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 30px rgba(225,29,72,0.14)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                                <!-- Decorative Vector Shape -->
                                <svg width="150" height="150" style="position:absolute; bottom:-35px; right:-35px; opacity:0.12; pointer-events:none; transform:rotate(-15deg);" viewBox="0 0 100 100">
                                    <polygon fill="#E11D48" points="50,0 100,100 0,100" />
                                    <polygon fill="#E11D48" points="20,10 80,100 0,60" style="opacity:0.6;"/>
                                    <circle cx="50" cy="50" r="22" fill="none" stroke="#E11D48" stroke-width="4"/>
                                </svg>
                                <div style="position:absolute; top:-20px; right:-20px; width:80px; height:80px; background:rgba(225,29,72,0.15); filter:blur(22px); border-radius:50%; pointer-events:none;"></div>
                                
                                <div style="position:relative; z-index:2;">
                                    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                                        <div>
                                            <div style="font-size:0.68rem; font-weight:800; color:#E11D48; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                                                <i class="bi bi-exclamation-triangle-fill"></i> High Impact
                                            </div>
                                            <div style="font-size:2.5rem; font-weight:900; color:#0F172A; line-height:1; letter-spacing:-1px;" id="count-high">0</div>
                                        </div>
                                        <div style="width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, #E11D48, #F43F5E); display:grid; place-items:center; color:#fff; box-shadow:0 6px 16px rgba(225,29,72,0.3); font-size:1.1rem;">
                                            <i class="bi bi-graph-down-arrow"></i>
                                        </div>
                                    </div>
                                    <div style="font-size:0.75rem; color:#64748B; margin-top:14px; font-weight:600; padding-top:12px; border-top:1px dashed rgba(225,29,72,0.15);" id="pct-high">0% of news</div>
                                </div>
                            </div>
                            <!-- Neutral -->
                            <div style="position:relative; background:linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.01)); border:1px solid rgba(37,99,235,0.15); padding:20px; border-radius:18px; overflow:hidden; transition:all 0.3s var(--ease);" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 30px rgba(37,99,235,0.14)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                                <!-- Decorative Vector Shape -->
                                <svg width="170" height="170" style="position:absolute; top:-35px; right:-35px; opacity:0.10; pointer-events:none;" viewBox="0 0 100 100">
                                    <circle cx="50" cy="50" r="42" fill="none" stroke="#2563EB" stroke-width="8"/>
                                    <rect x="25" y="25" width="50" height="50" rx="14" fill="#0F172A" transform="rotate(45 50 50)" style="opacity:0.5;"/>
                                </svg>
                                <div style="position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; background:rgba(37,99,235,0.15); filter:blur(22px); border-radius:50%; pointer-events:none;"></div>
                                
                                <div style="position:relative; z-index:2;">
                                    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                                        <div>
                                            <div style="font-size:0.68rem; font-weight:800; color:#2563EB; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                                                <i class="bi bi-dash-circle-fill"></i> Neutral
                                            </div>
                                            <div style="font-size:2.5rem; font-weight:900; color:#0F172A; line-height:1; letter-spacing:-1px;" id="count-neutral">0</div>
                                        </div>
                                        <div style="width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, #0F172A, #2563EB); display:grid; place-items:center; color:#fff; box-shadow:0 6px 16px rgba(37,99,235,0.3); font-size:1.1rem;">
                                            <i class="bi bi-chat-square-text-fill"></i>
                                        </div>
                                    </div>
                                    <div style="font-size:0.75rem; color:#64748B; margin-top:14px; font-weight:600; padding-top:12px; border-top:1px dashed rgba(37,99,235,0.15);" id="pct-neutral">0% of news</div>
                                </div>
                            </div>
                            <!-- Low Impact -->
                            <div style="position:relative; background:linear-gradient(135deg, rgba(30,58,138,0.06), rgba(30,58,138,0.01)); border:1px solid rgba(30,58,138,0.15); padding:20px; border-radius:18px; overflow:hidden; transition:all 0.3s var(--ease);" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 30px rgba(30,58,138,0.14)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                                <!-- Decorative Vector Shape -->
                                <svg width="170" height="110" style="position:absolute; bottom:0; right:0; opacity:0.12; pointer-events:none;" viewBox="0 0 100 60" preserveAspectRatio="none">
                                    <path fill="#1E3A8A" d="M0,60 Q30,10 60,40 T120,10 L120,60 Z"/>
                                    <circle cx="80" cy="20" r="16" fill="#1D4ED8" style="opacity:0.6;"/>
                                </svg>
                                <div style="position:absolute; top:-20px; right:-20px; width:80px; height:80px; background:rgba(30,58,138,0.15); filter:blur(22px); border-radius:50%; pointer-events:none;"></div>
                                
                                <div style="position:relative; z-index:2;">
                                    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                                        <div>
                                            <div style="font-size:0.68rem; font-weight:800; color:#1E3A8A; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                                                <i class="bi bi-info-circle-fill"></i> Low Impact
                                            </div>
                                            <div style="font-size:2.5rem; font-weight:900; color:#0F172A; line-height:1; letter-spacing:-1px;" id="count-low">0</div>
                                        </div>
                                        <div style="width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, #1E3A8A, #1D4ED8); display:grid; place-items:center; color:#fff; box-shadow:0 6px 16px rgba(30,58,138,0.3); font-size:1.1rem;">
                                            <i class="bi bi-graph-up-arrow"></i>
                                        </div>
                                    </div>
                                    <div style="font-size:0.75rem; color:#64748B; margin-top:14px; font-weight:600; padding-top:12px; border-top:1px dashed rgba(30,58,138,0.15);" id="pct-low">0% of news</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Donut Chart -->
                    <div class="col-md-4" style="height:290px; position:relative; padding:10px;">
                        <canvas id="newsSentimentDonut"></canvas>
                    </div>
                    <!-- Bar Chart by Country -->
                    <div class="col-md-5" style="height:290px; padding:10px;">
                        <canvas id="newsSentimentByCountry"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- News Grid Container -->
    <div id="news-container" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:22px;"></div>
</div>

{{-- ── ETA PREDICTION ── --}}
{{-- ── ETA PREDICTION & CHOKEPOINT INTELLIGENCE ── --}}
<div id="section-track" class="dashboard-section">
    <div style="background:#ffffff; border:1px solid #F1F5F9; border-radius:24px; overflow:hidden; box-shadow:0 10px 40px rgba(15,23,42,0.05); margin-bottom:28px;">
        <!-- Header -->
        <div style="background:#FAFAFC; border-bottom:1px solid #F1F5F9; display:flex; justify-content:space-between; align-items:center; padding:20px 28px; flex-wrap:wrap; gap:16px;">
            <div>
                <div style="display:flex; align-items:center; gap:10px;">
                    <div style="font-weight:800; color:#0F172A; font-size:1.2rem; letter-spacing:-0.4px; line-height:1.2;">Cargo ETA & Chokepoint Disruption Intelligence</div>
                    <span style="font-size:0.65rem; font-weight:800; background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE; padding:3px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:0.5px;">AI Route Simulator</span>
                </div>
                <div style="font-size:0.78rem; color:#64748B; font-weight:500; margin-top:3px;">Predict voyage nautical distance, travel duration, weather hazards, and global maritime chokepoint blockades</div>
            </div>
            <div>
                <span style="font-size:0.75rem; font-weight:700; color:#0F172A; background:#F1F5F9; padding:8px 14px; border-radius:12px; display:flex; align-items:center; gap:6px;">
                    <i class="bi bi-compass" style="color:#2563EB;"></i> Great Circle & Chokepoint Routing
                </span>
            </div>
        </div>

        <div style="padding:28px;">
            <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:24px;">
                <div style="position:relative;">
                    <label style="font-size:0.7rem; font-weight:800; color:#0F172A; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:block;">Origin Port (Pelabuhan Asal)</label>
                    <select id="eta-origin" class="form-select" style="height:48px; border-radius:14px; font-weight:700; background:#ffffff; border:1px solid #E2E8F0; color:#0F172A; box-shadow:0 2px 8px rgba(15,23,42,0.04); cursor:pointer;">
                        <option value="">— Select Origin Port —</option>
                    </select>
                </div>
                <div style="position:relative;">
                    <label style="font-size:0.7rem; font-weight:800; color:#0F172A; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:block;">Destination Port (Pelabuhan Tujuan)</label>
                    <select id="eta-dest" class="form-select" style="height:48px; border-radius:14px; font-weight:700; background:#ffffff; border:1px solid #E2E8F0; color:#0F172A; box-shadow:0 2px 8px rgba(15,23,42,0.04); cursor:pointer;">
                        <option value="">— Select Destination Port —</option>
                    </select>
                </div>
                <div style="position:relative;">
                    <label style="font-size:0.7rem; font-weight:800; color:#0F172A; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:block;">Vessel Fleet Type</label>
                    <select id="eta-vessel" class="form-select" style="height:48px; border-radius:14px; font-weight:700; background:#ffffff; border:1px solid #E2E8F0; color:#0F172A; box-shadow:0 2px 8px rgba(15,23,42,0.04); cursor:pointer;">
                        <option value="Cargo">Container Cargo Ship (18 Knots / 33 km/h)</option>
                        <option value="Oil Tanker">VLCC Oil Tanker (14 Knots / 26 km/h)</option>
                        <option value="Passenger">Express Ferry/Liner (21 Knots / 40 km/h)</option>
                    </select>
                </div>
            </div>
            
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px;">
                <button id="btn-calculate-eta" style="flex:1; height:50px; border-radius:14px; border:none; background:linear-gradient(135deg, #0F172A, #2563EB); color:#fff; font-weight:800; letter-spacing:0.5px; font-size:1.02rem; box-shadow:0 6px 20px rgba(37,99,235,0.25); transition:all 0.2s var(--ease);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 10px 28px rgba(37,99,235,0.35)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(37,99,235,0.25)'">
                    <i class="bi bi-compass-fill me-2"></i> Calculate Route, Distance & Obstacle Delays
                </button>
                <div class="form-check" style="display:flex; align-items:center; gap:8px; margin-bottom:0;">
                    <input class="form-check-input" type="checkbox" id="eta-save-history" checked style="width:20px; height:20px; border-radius:6px; cursor:pointer;">
                    <label class="form-check-label" style="font-size:0.88rem; font-weight:700; color:#0F172A; cursor:pointer;" for="eta-save-history">
                        Save to Voyage History
                    </label>
                </div>
            </div>
            
            <div id="eta-results" class="mt-4 d-none">
                <div style="background:linear-gradient(135deg, #FAFAFC, #ffffff); border:1px solid #E2E8F0; border-radius:20px; padding:28px; position:relative; overflow:hidden; box-shadow:0 4px 20px rgba(15,23,42,0.03);">
                    <div style="position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(180deg, #0F172A, #2563EB);"></div>
                    <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;">
                        <div style="background:#ffffff; padding:16px; border-radius:14px; border:1px solid #F1F5F9;">
                            <span style="font-size:0.68rem; font-weight:800; color:#2563EB; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px;"><i class="bi bi-rulers me-1"></i> Nautical Distance</span>
                            <div style="font-size:1.6rem; font-weight:900; color:#0F172A;" id="eta-res-dist">—</div>
                            <span style="font-size:0.75rem; color:#64748B; font-weight:600;" id="eta-res-dist-nm">—</span>
                        </div>
                        <div style="background:#ffffff; padding:16px; border-radius:14px; border:1px solid #F1F5F9;">
                            <span style="font-size:0.68rem; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px;"><i class="bi bi-clock me-1"></i> Standard Sailing ETA</span>
                            <div style="font-size:1.6rem; font-weight:900; color:#0F172A;" id="eta-res-base">—</div>
                            <span style="font-size:0.75rem; color:#64748B; font-weight:600;">Optimal Weather & Clear Passage</span>
                        </div>
                        <div style="background:#ffffff; padding:16px; border-radius:14px; border:1px solid #F1F5F9;">
                            <span style="font-size:0.68rem; font-weight:800; color:#E11D48; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px;"><i class="bi bi-exclamation-octagon-fill me-1"></i> Obstacle & Chokepoint Delays</span>
                            <div style="font-size:1.6rem; font-weight:900; color:#E11D48;" id="eta-res-delay">—</div>
                            <span style="font-size:0.75rem; color:#E11D48; font-weight:700;" id="eta-res-fuel">—</span>
                        </div>
                        <div style="background:#ffffff; padding:16px; border-radius:14px; border:1px solid #F1F5F9;">
                            <span style="font-size:0.68rem; font-weight:800; color:#10B981; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px;"><i class="bi bi-flag-fill me-1"></i> Total Final Delivery ETA</span>
                            <div style="font-size:1.6rem; font-weight:900; color:#0F172A;" id="eta-res-final">—</div>
                            <span style="font-size:0.75rem; color:#10B981; font-weight:700;" id="eta-status-badge">Disruption Included</span>
                        </div>
                    </div>

                    <!-- Detected Chokepoints & Obstacles Banner -->
                    <div id="eta-res-notes" style="margin-top:24px; padding-top:20px; border-top:1px dashed #E2E8F0;"></div>
                </div>
            </div>

            <!-- History Section -->
            <div style="margin-top:36px;">
                <h6 style="font-weight:800; color:#0F172A; font-size:1.05rem; letter-spacing:-0.3px; margin-bottom:16px; display:flex; align-items:center; gap:8px;">
                    <i class="bi bi-clock-history" style="color:#2563EB;"></i> Voyage History & Route Simulations
                </h6>
                <div id="voyage-history-container" style="display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; padding-top:4px;">
                    <!-- Items will be injected by JS -->
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── COMPARE ── --}}
<div id="section-compare" class="dashboard-section">
    <!-- Comparison Selectors -->
    <div style="position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); padding:24px; box-shadow:var(--shadow-lg); margin-bottom:24px; overflow:hidden;">
        <!-- Modern Pattern -->
        <svg width="250" height="250" style="position:absolute; top:-100px; right:-50px; opacity:0.03; pointer-events:none; transform:rotate(15deg);" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="#51508b" stroke-width="15"/><circle cx="50" cy="50" r="10" fill="#51508b"/></svg>
        <div style="position:relative; z-index:2;">
            <div style="display:flex; align-items:center; gap:12px; margin-bottom:20px;">
                <div>
                    <div style="font-weight:800; color:var(--c-text); font-size:1.1rem; letter-spacing:-0.3px; line-height:1.2;">Compare Countries</div>
                    <div style="font-size:0.75rem; color:var(--c-muted); font-weight:500;">Side-by-side risk and economic analysis</div>
                </div>
            </div>
            
            <div class="row g-4">
                <div class="col-md-6">
                    <div style="position:relative;">
                        <label style="font-size:0.7rem; font-weight:800; color:#51508b; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:flex; align-items:center; gap:6px;"><i class="bi bi-circle-fill" style="font-size:8px;"></i> Country A</label>
                        <select id="compare-1" class="form-select" style="height:52px; border-radius:12px; font-weight:600; background:rgba(248,250,252,0.8); border:1px solid rgba(81,80,139,0.2); box-shadow:0 2px 6px rgba(81,80,139,0.05); color:#1e293b; cursor:pointer;">
                            <option value="">— Select Country A —</option>
                            @foreach($negaras as $negara)
                                <option value="{{ $negara->id }}">{{ $negara->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div style="position:relative;">
                        <label style="font-size:0.7rem; font-weight:800; color:#8197e5; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:flex; align-items:center; gap:6px;"><i class="bi bi-circle-fill" style="font-size:8px;"></i> Country B</label>
                        <select id="compare-2" class="form-select" style="height:52px; border-radius:12px; font-weight:600; background:rgba(248,250,252,0.8); border:1px solid rgba(129,151,229,0.2); box-shadow:0 2px 6px rgba(129,151,229,0.05); color:#1e293b; cursor:pointer;">
                            <option value="">— Select Country B —</option>
                            @foreach($negaras as $negara)
                                <option value="{{ $negara->id }}">{{ $negara->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="compare-analytics" class="d-none" style="animation:fadeInUp 0.4s ease-out;">
        <!-- Overview Stats -->
        <div style="position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); margin-bottom:24px; overflow:hidden;">
            <!-- Decorative Shape -->
            <svg width="300" height="300" style="position:absolute; top:-50px; left:50%; transform:translateX(-50%) rotate(-5deg); opacity:0.02; pointer-events:none;" viewBox="0 0 100 100"><path fill="#1e293b" d="M10,50 L50,10 L90,50 L50,90 Z"/></svg>
            <div style="position:relative; z-index:2;">
                <div style="background:rgba(241,245,249,0.5); border-bottom:1px solid var(--c-border); padding:16px 24px; font-weight:800; color:#1e293b; font-size:0.95rem;">
                    <i class="bi bi-bar-chart-line-fill me-2" style="color:#51508b;"></i> Economic Overview
                </div>
                <div style="padding:24px;">
                    <div class="row text-center align-items-center" id="compare-stats">
                        <!-- JS injected stats -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Charts -->
        <div class="row g-4 mb-4">
            <div class="col-md-4">
                <div style="position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); height:100%; display:flex; flex-direction:column; overflow:hidden;">
                    <!-- Decorative Shape -->
                    <svg width="150" height="150" style="position:absolute; bottom:-30px; left:-30px; opacity:0.04; pointer-events:none; transform:rotate(-15deg);" viewBox="0 0 100 100"><polygon fill="#51508b" points="50,0 100,100 0,100"/></svg>
                    <div style="position:relative; z-index:2; display:flex; flex-direction:column; height:100%;">
                        <div style="background:rgba(241,245,249,0.5); border-bottom:1px solid var(--c-border); padding:16px 20px; font-weight:800; color:#1e293b; font-size:0.9rem;">
                            <i class="bi bi-radar me-2" style="color:#51508b;"></i> Risk Radar
                        </div>
                        <div style="padding:16px; flex:1; position:relative; min-height:300px;">
                            <canvas id="compareRiskChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div style="position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); height:100%; display:flex; flex-direction:column; overflow:hidden;">
                    <!-- Decorative Shape -->
                    <svg width="150" height="150" style="position:absolute; top:-30px; right:-30px; opacity:0.04; pointer-events:none; transform:rotate(15deg);" viewBox="0 0 100 100"><rect x="20" y="20" width="60" height="60" rx="10" fill="#3b82f6"/></svg>
                    <div style="position:relative; z-index:2; display:flex; flex-direction:column; height:100%;">
                        <div style="background:rgba(241,245,249,0.5); border-bottom:1px solid var(--c-border); padding:16px 20px; font-weight:800; color:#1e293b; font-size:0.9rem;">
                            <i class="bi bi-newspaper me-2" style="color:#51508b;"></i> News Sentiment
                        </div>
                        <div style="padding:16px; flex:1; position:relative; min-height:300px;">
                            <canvas id="compareNewsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div style="position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); height:100%; display:flex; flex-direction:column; overflow:hidden;">
                    <!-- Decorative Shape -->
                    <svg width="200" height="100" style="position:absolute; bottom:0; right:0; opacity:0.05; pointer-events:none;" viewBox="0 0 100 50" preserveAspectRatio="none"><path fill="#8b5cf6" d="M0,50 Q25,10 50,30 T100,10 L100,50 Z"/></svg>
                    <div style="position:relative; z-index:2; display:flex; flex-direction:column; height:100%;">
                        <div style="background:rgba(241,245,249,0.5); border-bottom:1px solid var(--c-border); padding:16px 20px; font-weight:800; color:#1e293b; font-size:0.9rem;">
                            <i class="bi bi-graph-up me-2" style="color:#51508b;"></i> Currency Trend
                        </div>
                        <div style="padding:16px; flex:1; position:relative; min-height:300px;">
                            <canvas id="compareCurrencyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('js/dashboard.js') }}?v={{ time() }}"></script>
@endsection