@extends('layouts.user')

@section('title', $port->port_name . ' — Port Details')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<link rel="stylesheet" href="{{ asset('css/ports-enhanced.css') }}">

<style>
    #port-detail-map {
        height: 400px;
        width: 100%;
        border-radius: 12px;
        z-index: 1;
    }
    
    .weather-widget {
        background: linear-gradient(135deg, #3b82f6, #1e40af);
        color: white;
        border-radius: 12px;
        padding: 20px;
    }
    
    .nearby-port-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    
    .nearby-port-item:hover {
        border-color: #f59e0b;
        background: #fef3c7;
        transform: translateY(-1px);
    }
    
    .back-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f1f5f9;
        color: #475569;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
        margin-bottom: 24px;
    }
    
    .back-button:hover {
        background: #e2e8f0;
        color: #334155;
    }
</style>
@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="port-detail-page">
    {{-- Back Button --}}
    <a href="{{ route('user.ports.index') }}" class="back-button">
        ← Back to Port Dashboard
    </a>

    {{-- Port Header --}}
    <div class="port-header-detail">
        <div class="port-title-section">
            <div class="port-icon-large">⚓</div>
            <div class="port-title-info">
                <h1>{{ $port->port_name }}</h1>
                <div class="port-country-detail">
                    @if($port->country?->flag_url)
                        <img src="{{ $port->country->flag_url }}" alt="{{ $port->country->name }}">
                    @endif
                    <span>{{ $port->country->name ?? 'Unknown Country' }}</span>
                </div>
            </div>
        </div>
        
        <div class="flex gap-4 flex-wrap">
            <div class="status-badge status-{{ strtolower($port->status ?? 'open') }}">
                {{ $port->status ?? 'Open' }}
            </div>
            <div class="risk-badge risk-{{ $port->congestion_level >= 70 ? 'high' : ($port->congestion_level >= 30 ? 'medium' : 'low') }}">
                @if($port->congestion_level >= 70)
                    🔴 High Risk
                @elseif($port->congestion_level >= 30)
                    🟡 Medium Risk
                @else
                    🟢 Low Risk
                @endif
            </div>
        </div>
    </div>

    {{-- Detail Grid --}}
    <div class="port-detail-grid">
        {{-- Port Information --}}
        <div class="detail-section">
            <h3 class="section-title">
                📋 Port Information
            </h3>
            <div class="space-y-2">
                <div class="detail-item">
                    <span class="detail-label">UNLOCODE</span>
                    <span class="detail-value">{{ $port->port_code ?? 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">City</span>
                    <span class="detail-value">{{ $port->city ?: 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Latitude</span>
                    <span class="detail-value">{{ $port->latitude ? number_format($port->latitude, 6) : 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Longitude</span>
                    <span class="detail-value">{{ $port->longitude ? number_format($port->longitude, 6) : 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Port Size</span>
                    <span class="detail-value">
                        @if($port->capacity >= 50000)
                            Large Port
                        @elseif($port->capacity >= 10000)
                            Medium Port
                        @else
                            Small Port
                        @endif
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Capacity</span>
                    <span class="detail-value">{{ $port->capacity ? number_format($port->capacity) . ' TEU' : 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Congestion Level</span>
                    <span class="detail-value">{{ $port->congestion_level ?? 0 }}%</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Last Updated</span>
                    <span class="detail-value">{{ $port->updated_at ? $port->updated_at->format('M d, Y') : 'N/A' }}</span>
                </div>
            </div>
        </div>

        {{-- Weather Information --}}
        <div class="detail-section weather-widget">
            <h3 class="section-title" style="color: white; margin-bottom: 16px;">
                🌤️ Current Weather
            </h3>
            <div class="grid grid-cols-2 gap-4 text-center">
                <div>
                    <div style="font-size: 24px; font-weight: bold;">{{ $weather['temperature'] }}</div>
                    <div style="font-size: 12px; opacity: 0.8;">Temperature</div>
                </div>
                <div>
                    <div style="font-size: 16px; font-weight: 600;">{{ $weather['condition'] }}</div>
                    <div style="font-size: 12px; opacity: 0.8;">Condition</div>
                </div>
                <div>
                    <div style="font-size: 16px; font-weight: 600;">{{ $weather['humidity'] }}</div>
                    <div style="font-size: 12px; opacity: 0.8;">Humidity</div>
                </div>
                <div>
                    <div style="font-size: 16px; font-weight: 600;">{{ $weather['wind_speed'] }}</div>
                    <div style="font-size: 12px; opacity: 0.8;">Wind Speed</div>
                </div>
            </div>
        </div>

        {{-- Country Information --}}
        <div class="detail-section">
            <h3 class="section-title">
                🌍 Country Details
            </h3>
            <div class="space-y-2">
                <div class="detail-item">
                    <span class="detail-label">Country</span>
                    <span class="detail-value">{{ $port->country->name ?? 'Unknown' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">ISO Code</span>
                    <span class="detail-value">{{ $port->country->iso2 ?? 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Region</span>
                    <span class="detail-value">{{ $port->country->region ?? 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Capital</span>
                    <span class="detail-value">{{ $port->country->capital ?? 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Population</span>
                    <span class="detail-value">{{ $port->country->population ? number_format($port->country->population) : 'N/A' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">GDP (USD)</span>
                    <span class="detail-value">{{ $port->country->gdp ? '$' . number_format($port->country->gdp / 1000000000, 1) . 'B' : 'N/A' }}</span>
                </div>
            </div>
        </div>

        {{-- Risk Assessment --}}
        <div class="detail-section">
            <h3 class="section-title">
                ⚠️ Risk Assessment
            </h3>
            <div class="space-y-2">
                <div class="detail-item">
                    <span class="detail-label">Overall Risk</span>
                    <span class="detail-value risk-badge risk-{{ $port->congestion_level >= 70 ? 'high' : ($port->congestion_level >= 30 ? 'medium' : 'low') }}">
                        @if($port->congestion_level >= 70)
                            🔴 High
                        @elseif($port->congestion_level >= 30)
                            🟡 Medium
                        @else
                            🟢 Low
                        @endif
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Congestion Risk</span>
                    <span class="detail-value">{{ $port->congestion_level ?? 0 }}%</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Operational Status</span>
                    <span class="detail-value status-badge status-{{ strtolower($port->status ?? 'open') }}">{{ $port->status ?? 'Open' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Reliability</span>
                    <span class="detail-value">
                        @if($port->congestion_level < 30)
                            Very High
                        @elseif($port->congestion_level < 50)
                            High
                        @elseif($port->congestion_level < 70)
                            Moderate
                        @else
                            Low
                        @endif
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Map Section --}}
    @if($port->latitude && $port->longitude)
    <div class="detail-section">
        <h3 class="section-title">
            🗺️ Location Map
        </h3>
        <div id="port-detail-map"></div>
    </div>
    @endif

    {{-- Nearby Ports --}}
    @if($nearbyPorts->count() > 0)
    <div class="detail-section">
        <h3 class="section-title">
            📍 Nearby Ports (within 100km)
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($nearbyPorts as $nearby)
                <div class="nearby-port-item" onclick="window.location.href='{{ route('user.ports.show', $nearby->id) }}'">
                    <div class="port-icon" style="width: 32px; height: 32px; font-size: 14px;">⚓</div>
                    <div class="flex-1">
                        <h5 class="font-medium text-slate-800 text-sm">{{ $nearby->port_name }}</h5>
                        <p class="text-xs text-slate-500 flex items-center gap-1">
                            @if($nearby->country?->flag_url)
                                <img src="{{ $nearby->country->flag_url }}" class="w-4 h-3 rounded-sm object-cover" alt="">
                            @endif
                            {{ $nearby->country->name ?? 'Unknown' }}
                        </p>
                    </div>
                    <div class="text-right">
                        <div class="status-badge status-{{ strtolower($nearby->status ?? 'open') }} text-xs">
                            {{ $nearby->status ?? 'Open' }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Action Buttons --}}
    <div class="flex gap-4 justify-center mt-8">
        <a href="{{ route('user.ports.index') }}" class="port-btn port-btn-secondary" style="padding: 12px 24px;">
            ← Back to Ports
        </a>
        @if($port->latitude && $port->longitude)
        <button onclick="showOnGoogleMaps()" class="port-btn port-btn-primary" style="padding: 12px 24px;">
            🌍 Open in Google Maps
        </button>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    @if($port->latitude && $port->longitude)
    // Initialize detail map
    const detailMap = L.map('port-detail-map').setView([{{ $port->latitude }}, {{ $port->longitude }}], 12);
    
    // Add satellite and street view layers
    const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    });
    
    const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '© Esri'
    });
    
    // Add default layer
    streetLayer.addTo(detailMap);
    
    // Layer control
    const baseLayers = {
        "Street": streetLayer,
        "Satellite": satelliteLayer
    };
    
    L.control.layers(baseLayers).addTo(detailMap);
    
    // Add large port marker
    const portIcon = L.divIcon({
        html: '<div style="background: #f59e0b; border: 3px solid white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.3); animation: pulse 2s infinite;">⚓</div>',
        className: 'port-detail-marker',
        iconSize: [40, 40],
        iconAnchor: [20, 20]
    });
    
    const marker = L.marker([{{ $port->latitude }}, {{ $port->longitude }}], { icon: portIcon })
        .addTo(detailMap)
        .bindPopup(`
            <div style="text-align: center; font-family: system-ui;">
                <h4 style="margin: 0 0 8px 0; font-size: 16px;">{{ $port->port_name }}</h4>
                <p style="margin: 0; color: #64748b;">{{ $port->country->name ?? 'Unknown' }}</p>
            </div>
        `);
    
    // Add nearby ports markers
    @if($nearbyPorts->count() > 0)
    @foreach($nearbyPorts as $nearby)
        @if($nearby->latitude && $nearby->longitude)
        const nearbyIcon{{ $loop->index }} = L.divIcon({
            html: '<div style="background: #3b82f6; border: 2px solid white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">⚓</div>',
            className: 'nearby-port-marker',
            iconSize: [24, 24],
            iconAnchor: [12, 12]
        });
        
        L.marker([{{ $nearby->latitude }}, {{ $nearby->longitude }}], { icon: nearbyIcon{{ $loop->index }} })
            .addTo(detailMap)
            .bindPopup(`
                <div style="text-align: center; font-family: system-ui;">
                    <h5 style="margin: 0 0 4px 0; font-size: 14px;">{{ $nearby->port_name }}</h5>
                    <p style="margin: 0; color: #64748b; font-size: 12px;">{{ $nearby->country->name ?? 'Unknown' }}</p>
                    <a href="{{ route('user.ports.show', $nearby->id) }}" style="display: inline-block; margin-top: 6px; padding: 4px 8px; background: #f59e0b; color: white; text-decoration: none; border-radius: 4px; font-size: 11px;">View Details</a>
                </div>
            `);
        @endif
    @endforeach
    @endif
    
    // Resize handler
    window.addEventListener('resize', function() {
        setTimeout(() => detailMap.invalidateSize(), 100);
    });
    
    // Global function to open in Google Maps
    window.showOnGoogleMaps = function() {
        const url = `https://www.google.com/maps?q={{ $port->latitude }},{{ $port->longitude }}&z=15`;
        window.open(url, '_blank');
    };
    @endif
});
</script>
@endpush