@extends('layouts.user')

@section('title', 'Countries — Global Supply Chain Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
@endpush

@section('content')

{{-- Flower Decorations --}}
<div class="flower-decorations">
    <div class="flower-left">
        <img src="{{ asset('assets/bunga1.png') }}" alt="Decorative Flower">
    </div>
    <div class="flower-right">
        <img src="{{ asset('assets/bunga2.png') }}" alt="Decorative Flower">
    </div>
</div>

<div class="dashboard-content">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-slate-800">
            Global <span class="text-amber-600">Countries</span>
        </h1>
        <p class="mt-2 text-slate-600">
            {{ $countries->count() }} countries monitored — risk, weather, economy &amp; ports.
        </p>
    </div>

    {{-- ── Filter Bar ────────────────────────────────────────────── --}}
    <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="mb-2 block text-sm font-medium text-slate-700">Search Country</label>
            <input id="f-search" type="text" placeholder="e.g. Germany, Indonesia, Asia…"
                   class="w-full rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm text-slate-800 placeholder-slate-500 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200">
        </div>
        <div>
            <label class="mb-2 block text-sm font-medium text-slate-700">Region</label>
            <select id="f-region"
                    class="w-full rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm text-slate-800 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200">
                <option value="">All regions</option>
                @foreach($regions as $r)
                    <option value="{{ $r }}">{{ $r }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="mb-2 block text-sm font-medium text-slate-700">Risk Level</label>
            <select id="f-risk"
                    class="w-full rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm text-slate-800 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200">
                <option value="">All risk levels</option>
                <option value="Low">Low Risk</option>
                <option value="Medium">Medium Risk</option>
                <option value="High">High Risk</option>
                <option value="Critical">Critical Risk</option>
            </select>
        </div>
    </div>

    {{-- ── Results Count ─────────────────────────────────────────── --}}
    <div class="mb-4 flex items-center justify-between">
        <span id="results-count" class="text-sm font-medium text-slate-600"></span>
        <div class="flex gap-2">
            <button id="view-grid" class="p-2 rounded-lg bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            </button>
            <button id="view-list" class="p-2 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
    </div>

    {{-- ── Countries Grid ────────────────────────────────────────── --}}
    <div id="countries-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        @foreach($countries as $country)
            @php
                $riskScore = $country->latestRiskScore;
                $riskLevel = $riskScore?->risk_level ?? 'Unknown';
                $totalScore = $riskScore?->total_score ?? 0;
                
                $riskColor = match($riskLevel) {
                    'Critical' => 'text-red-600 bg-red-50 border-red-200',
                    'High' => 'text-orange-600 bg-orange-50 border-orange-200',
                    'Medium' => 'text-amber-600 bg-amber-50 border-amber-200',
                    'Low' => 'text-emerald-600 bg-emerald-50 border-emerald-200',
                    default => 'text-slate-600 bg-slate-50 border-slate-200'
                };
            @endphp
            
            <div class="country-card widget-card cursor-pointer"
                 data-name="{{ strtolower($country->name) }}"
                 data-region="{{ strtolower($country->region ?? '') }}"
                 data-risk="{{ $riskLevel }}"
                 onclick="window.location.href='{{ route('user.countries.show', $country->iso2) }}'">
                
                {{-- Country Header --}}
                <div class="widget-header">
                    <div class="flex items-center gap-3">
                        @if($country->flag_url)
                            <img src="{{ $country->flag_url }}" class="h-8 w-12 rounded object-cover shadow-sm" alt="">
                        @endif
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-slate-800 truncate">{{ $country->name }}</h3>
                            <p class="text-xs text-slate-500">{{ $country->region }}</p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $riskColor }}">
                                {{ $riskLevel }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Country Stats --}}
                <div class="widget-body py-4">
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Risk Score</span>
                            <span class="font-bold text-lg {{ explode(' ', $riskColor)[0] }}">{{ number_format($totalScore, 1) }}</span>
                        </div>
                        
                        @if($country->economy)
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">GDP</span>
                            <span class="font-medium text-slate-800">
                                ${{ number_format(($country->economy->gdp ?? 0) / 1000000000, 1) }}B
                            </span>
                        </div>
                        @endif

                        @if($country->economy)
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Inflation</span>
                            <span class="font-medium text-slate-800">{{ number_format($country->economy->inflation_rate ?? 0, 2) }}%</span>
                        </div>
                        @endif

                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Ports</span>
                            <span class="font-medium text-slate-800">{{ $country->ports_count ?? 0 }}</span>
                        </div>
                    </div>
                </div>

                {{-- Country Footer --}}
                <div class="widget-footer">
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-slate-500">{{ $country->iso2 }} • {{ $country->iso3 }}</span>
                        <span class="text-amber-600 text-sm font-medium">View Details →</span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- ── Empty State ───────────────────────────────────────────── --}}
    <div id="empty-state" class="hidden text-center py-16">
        <div class="mx-auto max-w-md">
            <div class="text-6xl mb-4">🌍</div>
            <h3 class="text-lg font-semibold text-slate-800 mb-2">No Countries Found</h3>
            <p class="text-slate-600 text-sm">Try adjusting your search or filter criteria.</p>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const cards = Array.from(document.querySelectorAll('.country-card'));
    const grid = document.getElementById('countries-container');
    const emptyState = document.getElementById('empty-state');
    const resultsCount = document.getElementById('results-count');

    function applyFilters() {
        const q = document.getElementById('f-search').value.trim().toLowerCase();
        const region = document.getElementById('f-region').value;
        const risk = document.getElementById('f-risk').value;

        // Filter cards
        const visible = cards.filter(card => {
            const nameMatch = q === '' || card.dataset.name.includes(q);
            const regionMatch = region === '' || card.dataset.region.includes(region.toLowerCase());
            const riskMatch = risk === '' || card.dataset.risk === risk;
            return nameMatch && regionMatch && riskMatch;
        });

        // Show/hide cards
        cards.forEach(card => {
            const isVisible = visible.includes(card);
            card.style.display = isVisible ? '' : 'none';
        });

        // Update count and empty state
        const count = visible.length;
        resultsCount.textContent = `${count} countr${count === 1 ? 'y' : 'ies'} found`;
        
        if (count === 0) {
            emptyState.classList.remove('hidden');
            grid.style.display = 'none';
        } else {
            emptyState.classList.add('hidden');
            grid.style.display = 'grid';
        }
    }

    // Bind filter events
    document.getElementById('f-search').addEventListener('input', applyFilters);
    document.getElementById('f-region').addEventListener('change', applyFilters);
    document.getElementById('f-risk').addEventListener('change', applyFilters);

    // View toggle functionality
    const viewGrid = document.getElementById('view-grid');
    const viewList = document.getElementById('view-list');

    viewGrid.addEventListener('click', () => {
        grid.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4';
        viewGrid.className = 'p-2 rounded-lg bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors';
        viewList.className = 'p-2 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors';
    });

    viewList.addEventListener('click', () => {
        grid.className = 'grid grid-cols-1 gap-4';
        viewList.className = 'p-2 rounded-lg bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors';
        viewGrid.className = 'p-2 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors';
    });

    // Initial filter
    applyFilters();
});
</script>
@endpush