@extends('layouts.user')

@section('title', $country->name . ' — Country Details')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<style>
/* ── DaisyRisk Country Detail Page ──────────────────────────── */

/* Page wrapper with decorative flowers */
.cd-page {
    position: relative;
    min-height: 100vh;
}
.cd-page::before, .cd-page::after {
    content: '';
    position: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
}
.cd-page::before {
    background-image: url('{{ asset('assets/bunga1.png') }}');
    width: 340px; height: 340px;
    bottom: -80px; left: -80px;
}
.cd-page::after {
    background-image: url('{{ asset('assets/bunga2.png') }}');
    width: 280px; height: 280px;
    bottom: -60px; right: -60px;
}

/* Card base */
.cd-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.055);
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.2s, transform 0.2s;
}
.cd-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.09); }

.cd-card-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cd-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.cd-card-body { padding: 20px 24px; }

/* Section labels */
.cd-section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-section-label::before {
    content: '';
    display: inline-block;
    width: 3px; height: 14px;
    background: #f59e0b;
    border-radius: 2px;
}

/* Stat cells */
.cd-stat-cell {
    background: #f8fafc;
    border: 1px solid #f1f3f5;
    border-radius: 12px;
    padding: 12px 14px;
    transition: background 0.15s;
}
.cd-stat-cell:hover { background: #f1f5f9; }
.cd-stat-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.cd-stat-value { font-size: 16px; font-weight: 700; color: #1e293b; line-height: 1.2; }
.cd-stat-value.sm { font-size: 13px; }
.cd-stat-value.na { color: #cbd5e1; font-style: italic; }

/* Risk bar */
.cd-bar-track { height: 6px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.cd-bar-fill  { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* Badge */
.cd-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 12px; border-radius: 99px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
}

/* Hero banner */
.cd-hero {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.06);
    padding: 28px 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.cd-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(135deg, transparent 0%, rgba(251,191,36,0.06) 100%);
    pointer-events: none;
}

/* Buttons */
.cd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    transition: all 0.2s;
    cursor: pointer; border: 1px solid;
    text-decoration: none;
}
.cd-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.cd-btn-primary { background: #f59e0b; border-color: #d97706; color: #fff; }
.cd-btn-primary:hover { background: #d97706; }
.cd-btn-outline { background: #fff; border-color: #e2e8f0; color: #475569; }
.cd-btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.cd-btn-danger  { background: #fff; border-color: #fca5a5; color: #dc2626; }
.cd-btn-danger:hover  { background: #fef2f2; }
.cd-btn-success { background: #fff; border-color: #86efac; color: #16a34a; }
.cd-btn-success:hover { background: #f0fdf4; }

/* Weather icon bg based on condition */
.wx-banner { border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; }
.wx-banner.clear        { background: linear-gradient(135deg, #fef9c3, #fef3c7); }
.wx-banner.cloudy       { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.wx-banner.rain         { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.wx-banner.storm        { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.wx-banner.snow         { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); }
.wx-banner.fog          { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }

/* Port table */
.cd-port-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cd-port-table thead th {
    background: #f8fafc; color: #64748b;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 10px 16px; border-bottom: 1px solid #e9ecef; text-align: left;
}
.cd-port-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.12s; }
.cd-port-table tbody tr:hover { background: #f8fafc; }
.cd-port-table tbody td { padding: 11px 16px; color: #374151; }

/* Overview icon stat */
.cd-overview-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid #f1f5f9;
}
.cd-overview-item:last-child { border-bottom: none; }
.cd-overview-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cd-overview-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cd-overview-val   { font-size: 14px; color: #1e293b; font-weight: 700; margin-top: 1px; }

/* Econ metric card */
.cd-econ-metric {
    background: #f8fafc; border: 1px solid #f1f3f5;
    border-radius: 14px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.cd-econ-icon { font-size: 22px; }
.cd-econ-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.07em; }
.cd-econ-value { font-size: 18px; font-weight: 800; color: #1e293b; line-height: 1.15; }

/* Responsive */
@media (max-width: 768px) {
    .cd-hero { padding: 20px; }
    .cd-card-body { padding: 16px; }
}
</style>
@endpush

@section('content')

@php
    /* ── Pre-compute commonly used values ── */
    $economy  = $country->latestEconomy;
    $weather  = $country->latestWeather;
    $risk     = $country->latestRiskScore;
    $currency = $country->currency;
    $ports    = $country->ports->sortBy('port_name');

    /* Population from economy table */
    $population = isset($economy->population) ? number_format($economy->population) : 'N/A';

    /* Risk badge colors */
    $riskLevel   = $risk?->risk_level ?? 'N/A';
    $riskBadgeCls = match($riskLevel) {
        'Critical' => 'background:#fee2e2;color:#b91c1c;',
        'High'     => 'background:#fff7ed;color:#c2410c;',
        'Medium'   => 'background:#fffbeb;color:#b45309;',
        'Low'      => 'background:#f0fdf4;color:#166534;',
        default    => 'background:#f8fafc;color:#64748b;',
    };
    $riskScore = $risk?->total_score ?? null;

    /* Weather category */
    $wxCode = $weather?->weather_code ?? 0;
    $wxRisk = $weather?->storm_risk ?? 0;
    $wxBannerCls = 'fog';
    if ($weather) {
        if ($wxRisk >= 60 || in_array($wxCode, [95,96,99])) $wxBannerCls = 'storm';
        elseif ($wxRisk >= 25 || in_array($wxCode, [61,63,65,80,81,82])) $wxBannerCls = 'rain';
        elseif (in_array($wxCode, [71,73,75,77,85,86]))  $wxBannerCls = 'snow';
        elseif (in_array($wxCode, [1,2,3,45,48]))        $wxBannerCls = 'cloudy';
        elseif ($wxCode === 0)                            $wxBannerCls = 'clear';
    }
    $wxEmoji = match($wxBannerCls) {
        'clear'  => '☀️',
        'cloudy' => '⛅',
        'rain'   => '🌧️',
        'storm'  => '⛈️',
        'snow'   => '❄️',
        default  => '🌫️',
    };

    /* Exchange rate */
    $latestRate = $currency ? \App\Models\ExchangeRate::where('base_currency_id', $currency->id)->orderByDesc('recorded_at')->first() : null;

    /* Watchlist check */
    $inWatchlist = auth()->check() ? \App\Models\Watchlist::where('user_id', auth()->id())->where('country_id', $country->id)->exists() : false;

    /* Port status counts */
    $statusCounts = $ports->groupBy('status')->map->count();
@endphp

<div class="cd-page">

    {{-- ── BACK NAV ──────────────────────────────────────────────── --}}
    <div class="mb-5 flex items-center justify-between relative z-10">
        <a href="{{ route('user.countries.index') }}"
           class="cd-btn cd-btn-outline text-sm">
            ← Back to Countries
        </a>
        @auth
            <form method="POST" action="{{ route('user.watchlist.toggle', $country->id) }}">
                @csrf
                <button type="submit"
                        class="cd-btn {{ $inWatchlist ? 'cd-btn-danger' : 'cd-btn-success' }}">
                    {{ $inWatchlist ? '★ Remove Watchlist' : '☆ Add to Watchlist' }}
                </button>
            </form>
        @endauth
    </div>

    {{-- ── HERO HEADER ────────────────────────────────────────────── --}}
    <div class="cd-hero mb-6">
        <div class="flex flex-wrap items-start justify-between gap-5">
            <div class="flex items-start gap-5">
                @if($country->flag_url)
                    <img src="{{ $country->flag_url }}" alt="{{ $country->name }} flag"
                         class="h-16 w-auto rounded-lg shadow-md border border-slate-200 flex-shrink-0 object-cover">
                @endif
                <div>
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight leading-none">
                            {{ $country->name }}
                        </h1>
                        <span class="cd-badge" style="background:#f1f5f9;color:#64748b;">
                            {{ $country->iso2 }} / {{ $country->iso3 }}
                        </span>
                        @if($risk)
                            <span class="cd-badge" style="{{ $riskBadgeCls }}">
                                {{ $riskLevel }} Risk
                            </span>
                        @endif
                    </div>
                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-500 mt-2">
                        @if($country->region)
                            <span class="flex items-center gap-1">🌍 {{ $country->region }}{{ $country->subregion ? ' · ' . $country->subregion : '' }}</span>
                        @endif
                        @if($country->capital)
                            <span class="flex items-center gap-1">🏛️ {{ $country->capital }}</span>
                        @endif
                        @if($population !== 'N/A')
                            <span class="flex items-center gap-1">👥 {{ $population }}</span>
                        @endif
                        @if($country->timezone)
                            <span class="flex items-center gap-1">🕐 {{ $country->timezone }}</span>
                        @endif
                        @if($currency)
                            <span class="flex items-center gap-1">💱 {{ $currency->code }}{{ $currency->symbol ? ' (' . $currency->symbol . ')' : '' }}</span>
                        @endif
                    </div>
                </div>
            </div>
            @if($riskScore !== null)
                <div class="text-right flex-shrink-0">
                    <div class="text-5xl font-extrabold tracking-tight leading-none {{ $riskScore > 60 ? 'text-red-500' : ($riskScore > 30 ? 'text-amber-500' : 'text-emerald-500') }}">
                        {{ number_format($riskScore, 1) }}
                    </div>
                    <div class="text-xs text-slate-500 font-semibold uppercase tracking-widest mt-1">Risk Score</div>
                </div>
            @endif
        </div>
    </div>

    {{-- ── ROW 1: Weather · Economy · Risk Score ──────────────────── --}}
    <div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mb-5">

        {{-- Weather Card --}}
        <div class="cd-card" id="weather">
            <div class="cd-card-header">
                <span class="text-xl">🌤</span>
                <span class="cd-card-title">Current Weather</span>
                @if($weather)
                    <span class="ml-auto text-xs text-slate-400">{{ $weather->recorded_at?->diffForHumans() }}</span>
                @endif
            </div>
            <div class="cd-card-body">
                @if($weather)
                    {{-- Weather Banner --}}
                    <div class="wx-banner {{ $wxBannerCls }} mb-4">
                        <div class="text-5xl leading-none drop-shadow">{{ $wxEmoji }}</div>
                        <div>
                            <p class="font-bold text-slate-800 text-lg leading-tight">{{ $weather->weather_status }}</p>
                            <p class="text-sm text-slate-500 mt-0.5">{{ $weather->city }}</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">🌡 Temperature</div>
                            <div class="cd-stat-value">{{ number_format($weather->temperature, 1) }}°C</div>
                        </div>
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">💧 Humidity</div>
                            <div class="cd-stat-value">{{ number_format($weather->humidity, 0) }}%</div>
                        </div>
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">🌬 Wind Speed</div>
                            <div class="cd-stat-value">{{ number_format($weather->wind_speed, 1) }} km/h</div>
                        </div>
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">🌧 Rainfall</div>
                            <div class="cd-stat-value">{{ number_format($weather->rainfall, 1) }} mm</div>
                        </div>
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">⬇ Pressure</div>
                            <div class="cd-stat-value {{ !$weather->pressure ? 'na' : '' }}">
                                {{ $weather->pressure ? $weather->pressure . ' hPa' : 'N/A' }}
                            </div>
                        </div>
                        <div class="cd-stat-cell">
                            <div class="cd-stat-label">⚡ Storm Risk</div>
                            <div class="cd-stat-value {{ $wxRisk >= 60 ? 'text-red-500' : ($wxRisk >= 25 ? 'text-amber-500' : 'text-emerald-500') }}">
                                {{ $wxRisk }}%
                            </div>
                        </div>
                    </div>

                    {{-- Storm risk bar --}}
                    <div class="mt-4">
                        <div class="flex justify-between text-xs text-slate-500 mb-1">
                            <span>Storm Probability</span><span>{{ $wxRisk }}%</span>
                        </div>
                        <div class="cd-bar-track">
                            <div class="cd-bar-fill {{ $wxRisk >= 60 ? 'bg-red-400' : ($wxRisk >= 25 ? 'bg-amber-400' : 'bg-emerald-400') }}"
                                 style="width:{{ min(100,$wxRisk) }}%"></div>
                        </div>
                    </div>
                @else
                    <div class="text-center py-6 text-slate-400">
                        <div class="text-4xl mb-2">🌤️</div>
                        <p class="text-sm">No weather data available.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Economy Card --}}
        <div class="cd-card" id="economy">
            <div class="cd-card-header">
                <span class="text-xl">💼</span>
                <span class="cd-card-title">Economy</span>
                @if($economy)
                    <span class="ml-auto text-xs text-slate-400">{{ $economy->year }}</span>
                @endif
            </div>
            <div class="cd-card-body">
                @if($economy)
                    <div class="grid grid-cols-1 gap-3">
                        <div class="cd-econ-metric">
                            <div class="cd-econ-icon">💰</div>
                            <div class="cd-econ-label">GDP (USD)</div>
                            <div class="cd-econ-value">
                                ${{ $economy->gdp ? number_format($economy->gdp / 1e9, 1) . 'B' : 'N/A' }}
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="cd-econ-metric">
                                <div class="cd-econ-icon">💵</div>
                                <div class="cd-econ-label">Per Capita</div>
                                <div class="cd-econ-value" style="font-size:15px">
                                    ${{ $economy->gdp_per_capita ? number_format($economy->gdp_per_capita) : 'N/A' }}
                                </div>
                            </div>
                            <div class="cd-econ-metric">
                                <div class="cd-econ-icon">📈</div>
                                <div class="cd-econ-label">Growth</div>
                                <div class="cd-econ-value" style="font-size:15px;color:{{ ($economy->economic_growth ?? 0) < 0 ? '#dc2626' : '#16a34a' }}">
                                    {{ $economy->economic_growth !== null ? ($economy->economic_growth >= 0 ? '+' : '') . number_format($economy->economic_growth, 1) . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="cd-econ-metric">
                                <div class="cd-econ-icon">📉</div>
                                <div class="cd-econ-label">Inflation</div>
                                <div class="cd-econ-value" style="font-size:15px;color:{{ ($economy->inflation ?? 0) > 5 ? '#dc2626' : '#1e293b' }}">
                                    {{ $economy->inflation !== null ? number_format($economy->inflation, 1) . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="cd-econ-metric">
                                <div class="cd-econ-icon">👥</div>
                                <div class="cd-econ-label">Unemployment</div>
                                <div class="cd-econ-value" style="font-size:15px">
                                    {{ $economy->unemployment !== null ? number_format($economy->unemployment, 1) . '%' : 'N/A' }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Currency info below --}}
                    @if($currency)
                        <div class="mt-4 border-t border-slate-100 pt-4">
                            <div class="cd-section-label">Currency</div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-bold text-slate-800">{{ $currency->name }}</p>
                                    <p class="text-xs text-slate-500">{{ $currency->code }}{{ $currency->symbol ? ' · ' . $currency->symbol : '' }}</p>
                                </div>
                                @if($latestRate)
                                    <div class="text-right">
                                        <p class="font-bold text-emerald-600">{{ number_format($latestRate->exchange_rate, 4) }}</p>
                                        <p class="text-xs text-slate-500">vs USD
                                            @if($latestRate->change_percentage !== null)
                                                <span class="{{ $latestRate->change_percentage >= 0 ? 'text-emerald-500' : 'text-red-500' }}">
                                                    ({{ $latestRate->change_percentage >= 0 ? '+' : '' }}{{ number_format($latestRate->change_percentage, 2) }}%)
                                                </span>
                                            @endif
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                @else
                    <div class="text-center py-6 text-slate-400">
                        <div class="text-4xl mb-2">💼</div>
                        <p class="text-sm">No economy data available.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Risk Score Card --}}
        <div class="cd-card" id="risk">
            <div class="cd-card-header">
                <span class="text-xl">⚠️</span>
                <span class="cd-card-title">Risk Score</span>
                @if($risk)
                    <span class="ml-auto cd-badge" style="{{ $riskBadgeCls }}">{{ $riskLevel }}</span>
                @endif
            </div>
            <div class="cd-card-body">
                @if($risk)
                    {{-- Big Score --}}
                    <div class="flex items-center justify-between mb-5">
                        <div>
                            <div class="text-6xl font-extrabold tracking-tighter leading-none {{ $riskScore > 60 ? 'text-red-500' : ($riskScore > 30 ? 'text-amber-500' : 'text-emerald-500') }}">
                                {{ number_format($riskScore, 1) }}
                            </div>
                            <div class="text-xs text-slate-500 font-semibold uppercase tracking-widest mt-1">/ 100 Total Risk</div>
                        </div>
                        <div class="text-right">
                            <div class="w-20 h-20 rounded-full flex items-center justify-center border-4 {{ $riskScore > 60 ? 'border-red-200' : ($riskScore > 30 ? 'border-amber-200' : 'border-emerald-200') }}">
                                <span class="text-3xl">{{ $riskScore > 60 ? '🔴' : ($riskScore > 30 ? '🟡' : '🟢') }}</span>
                            </div>
                        </div>
                    </div>

                    {{-- Component bars --}}
                    <div class="flex flex-col gap-3">
                        @foreach([
                            ['🌩', 'Weather',   $risk->weather_score,   'bg-blue-400'],
                            ['💼', 'Economy',   $risk->economy_score,   'bg-amber-400'],
                            ['📉', 'Inflation', $risk->inflation_score, 'bg-orange-400'],
                            ['💱', 'Currency',  $risk->currency_score,  'bg-emerald-400'],
                            ['🗳', 'Political', $risk->political_score, 'bg-purple-400'],
                            ['⚓', 'Port',      $risk->port_score,      'bg-sky-400'],
                        ] as [$icon, $label, $val, $color])
                            <div>
                                <div class="flex items-center justify-between text-xs mb-1">
                                    <span class="text-slate-600 font-medium">{{ $icon }} {{ $label }}</span>
                                    <span class="font-bold text-slate-700">{{ $val !== null ? number_format($val, 1) : '—' }}</span>
                                </div>
                                <div class="cd-bar-track">
                                    <div class="cd-bar-fill {{ $color }}" style="width:{{ min(100,$val??0) }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if($risk->recommendation)
                        <div class="mt-4 pt-4 border-t border-slate-100 text-xs text-slate-500 leading-relaxed bg-slate-50 rounded-xl p-3">
                            💡 {{ $risk->recommendation }}
                        </div>
                    @endif
                @else
                    <div class="text-center py-6 text-slate-400">
                        <div class="text-4xl mb-2">⚠️</div>
                        <p class="text-sm">No risk score calculated yet.</p>
                    </div>
                @endif
            </div>
        </div>

    </div>{{-- /row-1 --}}

    {{-- ── ROW 2: Overview ────────────────────────────────────────── --}}
    <div class="cd-card mb-5">
        <div class="cd-card-header">
            <span class="text-xl">📊</span>
            <span class="cd-card-title">Country Overview</span>
        </div>
        <div class="cd-card-body">
            <div class="grid grid-cols-1 gap-0 sm:grid-cols-2 lg:grid-cols-4">
                @php
                    $overviewItems = [
                        ['🏙️', '#fef9c3', 'Capital',        $country->capital ?? 'N/A'],
                        ['👥', '#dcfce7', 'Population',     $population],
                        ['🗺️', '#e0f2fe', 'Area',           $country->area ? number_format($country->area) . ' km²' : 'N/A'],
                        ['🕐', '#f3e8ff', 'Timezone',       $country->timezone ?? 'N/A'],
                        ['🌍', '#fff7ed', 'Region',         $country->region ?? 'N/A'],
                        ['🏳️', '#f0fdf4', 'Sub-Region',     $country->subregion ?? 'N/A'],
                        ['📞', '#fef2f2', 'Calling Code',   $country->phone_code ? '+' . $country->phone_code : 'N/A'],
                        ['🌐', '#fafafa', 'ISO Code',       $country->iso2 . ' / ' . $country->iso3],
                    ];
                @endphp
                @foreach($overviewItems as [$icon, $iconBg, $label, $value])
                    <div class="cd-overview-item px-4">
                        <div class="cd-overview-icon" style="background:{{ $iconBg }}">{{ $icon }}</div>
                        <div>
                            <div class="cd-overview-label">{{ $label }}</div>
                            <div class="cd-overview-val">{{ $value }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ── ROW 3: Ports ───────────────────────────────────────────── --}}
    <div class="cd-card mb-5" id="ports">
        <div class="cd-card-header">
            <span class="text-xl">⚓</span>
            <span class="cd-card-title">Ports</span>
            <span class="ml-1 text-sm text-slate-500 font-normal">({{ $ports->count() }})</span>
            @if($ports->count() > 0)
                <a href="{{ route('public.ports.index') }}?country={{ urlencode($country->name) }}"
                   class="ml-auto cd-btn cd-btn-outline text-xs" style="padding:5px 12px">
                    🗺️ View on Map
                </a>
            @endif
        </div>

        @if($ports->isEmpty())
            <div class="cd-card-body text-center py-10 text-slate-400">
                <div class="text-4xl mb-2">⚓</div>
                <p class="text-sm">No ports recorded for this country.</p>
            </div>
        @else
            {{-- Port status mini-stats --}}
            <div class="grid grid-cols-2 gap-3 px-6 py-4 border-b border-slate-100 sm:grid-cols-4">
                @foreach(['Open' => ['text-emerald-600','bg-emerald-50'], 'Limited' => ['text-amber-600','bg-amber-50'], 'Congested' => ['text-orange-600','bg-orange-50'], 'Closed' => ['text-red-600','bg-red-50']] as $st => [$cls, $bg])
                    <div class="rounded-xl p-3 text-center" style="background:{{ str_replace('bg-','#',str_replace(['-50','-100'],['',' '],$bg)) }}">
                        <p class="text-2xl font-extrabold {{ $cls }}">{{ $statusCounts[$st] ?? 0 }}</p>
                        <p class="text-xs text-slate-500 font-semibold mt-0.5">{{ $st }}</p>
                    </div>
                @endforeach
            </div>

            {{-- Port filter --}}
            @if($ports->count() > 10)
                <div class="px-6 py-3 border-b border-slate-100">
                    <input id="port-filter" type="text" placeholder="🔍 Filter ports by name…"
                           class="w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm text-slate-800 placeholder-slate-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                </div>
            @endif

            {{-- Ports table --}}
            <div class="overflow-x-auto">
                <table class="cd-port-table" id="ports-table">
                    <thead>
                        <tr>
                            <th>Port Name</th>
                            <th>Code</th>
                            <th>City</th>
                            <th style="text-align:center">Status</th>
                            <th style="text-align:right">Coordinates</th>
                        </tr>
                    </thead>
                    <tbody id="ports-tbody">
                        @foreach($ports as $port)
                            <tr class="port-row" data-name="{{ strtolower($port->port_name) }}">
                                <td class="font-semibold text-slate-800">{{ $port->port_name }}</td>
                                <td class="font-mono text-xs text-amber-600 font-bold">{{ $port->port_code }}</td>
                                <td class="text-slate-500">{{ $port->city ?: '—' }}</td>
                                <td style="text-align:center">
                                    @php
                                        $stColor = match($port->status) {
                                            'Open'      => 'background:#f0fdf4;color:#166534;',
                                            'Limited'   => 'background:#fffbeb;color:#92400e;',
                                            'Congested' => 'background:#fff7ed;color:#c2410c;',
                                            'Closed'    => 'background:#fef2f2;color:#991b1b;',
                                            default     => 'background:#f8fafc;color:#64748b;',
                                        };
                                    @endphp
                                    <span class="cd-badge" style="{{ $stColor }}">{{ $port->status }}</span>
                                </td>
                                <td style="text-align:right;font-family:monospace;font-size:11px;color:#94a3b8">
                                    @if($port->latitude !== null && $port->longitude !== null)
                                        <a href="https://www.openstreetmap.org/?mlat={{ $port->latitude }}&mlon={{ $port->longitude }}&zoom=12"
                                           target="_blank" rel="noopener noreferrer"
                                           class="text-sky-500 hover:text-sky-700 transition-colors">
                                            {{ number_format($port->latitude, 4) }}, {{ number_format($port->longitude, 4) }}
                                        </a>
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

</div>{{-- /cd-page --}}

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Port filter
    var filterInput = document.getElementById('port-filter');
    if (filterInput) {
        filterInput.addEventListener('input', function () {
            var q = this.value.trim().toLowerCase();
            document.querySelectorAll('.port-row').forEach(function (row) {
                row.style.display = (q === '' || row.dataset.name.includes(q)) ? '' : 'none';
            });
        });
    }

    // Animate risk bars on load
    document.querySelectorAll('.cd-bar-fill').forEach(function(bar) {
        var w = bar.style.width;
        bar.style.width = '0%';
        setTimeout(function() { bar.style.width = w; }, 200);
    });
});
</script>
@endpush