@extends('layouts.user')

@section('title', 'Risk Map Test - Weather Style UX')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="{{ asset('css/risk-map-panel.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">
            Risk Map <span class="text-amber-600">Weather-Style UX Test</span>
        </h1>
        <p class="mt-2 text-slate-600">
            Testing Weather-style side panel interaction for Risk Map
        </p>
    </div>

    {{-- Risk Map with Side Panel --}}
    <div class="risk-map-panel-wrapper" id="risk-map-wrapper">
        
        {{-- Risk Information Panel (Left Side) --}}
        <div class="risk-side-panel" id="risk-panel">
            <div class="risk-side-panel-inner" id="risk-panel-inner">
                
                {{-- Panel Header --}}
                <div class="rsp-header">
                    <img id="rsp-flag" class="rsp-flag" src="" alt="" style="display: none;">
                    <div class="rsp-country-info">
                        <div class="rsp-country-name" id="rsp-country-name">Select a country</div>
                        <div class="rsp-country-region" id="rsp-country-region">Click a marker to view risk details</div>
                    </div>
                    <button class="rsp-close" id="risk-panel-close" aria-label="Close panel">✕</button>
                </div>

                {{-- Risk Score Display --}}
                <div class="rsp-risk-score" id="rsp-risk-score" style="display: none;">
                    <div class="risk-score-value" id="risk-score-value">0</div>
                    <div class="risk-score-level" id="risk-score-level">Risk Level</div>
                </div>

                {{-- Panel Body --}}
                <div class="rsp-body" id="risk-panel-content">
                    <div class="rsp-placeholder">
                        <div class="rsp-placeholder-icon">🌍</div>
                        <p style="font-size:14px;">Click a country marker on the map<br>to view detailed risk information</p>
                    </div>
                </div>

                {{-- Action Button --}}
                <div class="rsp-actions" id="rsp-actions" style="display: none;">
                    <a href="#" class="rsp-btn rsp-btn-primary" id="rsp-btn-detail">
                        📊 View Country Detail
                    </a>
                </div>

            </div>
        </div>

        {{-- Map Section --}}
        <div class="risk-map-section" id="risk-map-section">
            <div class="border-b border-slate-200 px-5 py-4 bg-gradient-to-r from-amber-50 to-transparent">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="font-semibold text-slate-800">🗺️ Global Risk Map</h2>
                        <p class="text-xs text-slate-600 mt-1">Click country markers to view risk details in side panel</p>
                    </div>
                    <div class="text-xs text-slate-600">
                        <span class="font-medium">Legend:</span>
                        <span class="ml-2">🟢 Low (0-39)</span>
                        <span class="ml-2">🟡 Medium (40-69)</span>
                        <span class="ml-2">🔴 High (70-100)</span>
                    </div>
                </div>
            </div>
            <div class="risk-map-container">
                <div id="riskMap"></div>
            </div>
        </div>

    </div>

    {{-- Test Controls --}}
    <div class="mt-6 p-4 bg-blue-50 rounded-lg border">
        <h3 class="font-semibold text-blue-800 mb-2">🧪 Test Controls</h3>
        <div class="flex gap-2">
            <button onclick="testOpenPanel()" class="px-3 py-2 bg-blue-600 text-white rounded text-sm">
                Open Panel Test
            </button>
            <button onclick="testClosePanel()" class="px-3 py-2 bg-red-600 text-white rounded text-sm">
                Close Panel Test
            </button>
            <button onclick="testGermanyRisk()" class="px-3 py-2 bg-green-600 text-white rounded text-sm">
                Show Germany Risk
            </button>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{{ asset('js/risk-map-panel.js') }}"></script>
<script>
let riskMapManager;

document.addEventListener('DOMContentLoaded', function() {
    // Sample countries data for testing
    const testCountriesData = [
        {
            name: 'Germany',
            iso2: 'DE',
            region: 'Europe',
            lat: 51.1657,
            lng: 10.4515,
            risk_score: 22.5,
            risk_level: 'Low Risk',
            flag_url: 'https://flagcdn.com/w160/de.png'
        },
        {
            name: 'Indonesia',
            iso2: 'ID', 
            region: 'Asia',
            lat: -0.7893,
            lng: 113.9213,
            risk_score: 68.3,
            risk_level: 'Medium Risk',
            flag_url: 'https://flagcdn.com/w160/id.png'
        },
        {
            name: 'Iran',
            iso2: 'IR',
            region: 'Asia',
            lat: 32.4279,
            lng: 53.6880,
            risk_score: 82.6,
            risk_level: 'High Risk',
            flag_url: 'https://flagcdn.com/w160/ir.png'
        },
        {
            name: 'Japan',
            iso2: 'JP',
            region: 'Asia',
            lat: 36.2048,
            lng: 138.2529,
            risk_score: 54.5,
            risk_level: 'Medium Risk',
            flag_url: 'https://flagcdn.com/w160/jp.png'
        },
        {
            name: 'United Kingdom',
            iso2: 'GB',
            region: 'Europe', 
            lat: 55.3781,
            lng: -3.4360,
            risk_score: 35.4,
            risk_level: 'Low Risk',
            flag_url: 'https://flagcdn.com/w160/gb.png'
        }
    ];

    // Sample risk breakdown data
    const testRiskBreakdown = {
        'DE': { weather: 4.2, economy: 6.8, inflation: 3.1, currency: 2.4, port: 6.0, total: 22.5 },
        'ID': { weather: 15.2, economy: 18.5, inflation: 12.8, currency: 11.3, port: 10.5, total: 68.3 },
        'IR': { weather: 18.7, economy: 22.1, inflation: 19.3, currency: 14.2, port: 8.3, total: 82.6 },
        'JP': { weather: 12.4, economy: 15.2, inflation: 8.7, currency: 9.8, port: 8.4, total: 54.5 },
        'GB': { weather: 7.1, economy: 9.2, inflation: 6.4, currency: 4.8, port: 7.9, total: 35.4 }
    };

    // Initialize Risk Map Manager
    riskMapManager = new RiskMapManager('riskMap', {
        countriesData: testCountriesData,
        riskBreakdownData: testRiskBreakdown,
        isPublicMode: false
    });

    // Make it globally accessible
    window.riskMapManager = riskMapManager;
});

// Test functions
function testOpenPanel() {
    riskMapManager.openRiskPanel();
}

function testClosePanel() {
    riskMapManager.closeRiskPanel();
}

function testGermanyRisk() {
    riskMapManager.showCountryByIso2('DE');
}
</script>
@endpush