@extends('layouts.user')

@section('title', 'Global Port Dashboard')

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

<style>
    /* Marker cluster styling */
    .marker-cluster {
        background-color: rgba(245, 158, 11, 0.8);
        border: 2px solid white;
        border-radius: 50%;
        text-align: center;
        color: white;
        font-weight: bold;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .marker-cluster div {
        background-color: rgba(245, 158, 11, 0.9);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .marker-cluster-small { width: 30px; height: 30px; }
    .marker-cluster-medium { width: 40px; height: 40px; }
    .marker-cluster-large { width: 50px; height: 50px; }

    @keyframes pspFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Map + Panel Wrapper — Weather-style inline flex layout ───── */
    .map-panel-wrapper {
        display: flex;
        gap: 0;
        align-items: stretch;
        width: 100%;
        min-height: 700px;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid #EDE5C8;
        box-shadow: 0 2px 18px rgba(212,160,23,0.07);
        background: #fff;
        position: relative;
    }

    /* Map section — shrinks when panel opens */
    .map-section {
        flex: 1 1 auto;
        min-width: 0;
        transition: flex-basis 320ms cubic-bezier(0.4,0,0.2,1);
        position: relative;
    }

    /* Map canvas */
    #port-map {
        width: 100%;
        height: 700px;
        display: block;
        z-index: 1;
    }

    /* Side panel — starts hidden (width 0), slides in */
    .port-side-panel {
        flex: 0 0 0px;
        width: 0;
        min-width: 0;
        overflow: hidden;
        transition: flex-basis 320ms cubic-bezier(0.4,0,0.2,1),
                    width 320ms cubic-bezier(0.4,0,0.2,1);
        background: #fff;
        border-left: 0px solid #EDE5C8;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .port-side-panel.open {
        flex: 0 0 360px;
        width: 360px;
        border-left-width: 1px;
    }

    /* Panel inner — always 360px wide inside overflow:hidden wrapper */
    .port-side-panel-inner {
        width: 360px;
        height: 100%;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 200ms ease 100ms, transform 200ms ease 100ms;
    }

    .port-side-panel.open .port-side-panel-inner {
        opacity: 1;
        transform: translateX(0);
    }

    /* Panel header */
    .psp-header {
        padding: 16px 18px;
        background: linear-gradient(135deg, rgba(254,243,199,0.7), #fff);
        border-bottom: 1px solid #EDE5C8;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .psp-header-icon {
        font-size: 22px;
        width: 40px; height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #F59E0B, #D97706);
        display: flex; align-items: center; justify-content: center;
        color: white; flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(245,158,11,0.25);
    }

    .psp-header-info { flex: 1; min-width: 0; }
    .psp-port-name {
        font-size: 14px; font-weight: 800;
        color: #1A1A2E; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    .psp-port-country {
        font-size: 11px; color: #6B7280; margin-top: 1px;
        display: flex; align-items: center; gap: 4px;
    }
    .psp-port-country img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }

    .psp-close {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: none; border: 1px solid #E5DCC8;
        color: #9CA3AF; font-size: 14px;
        cursor: pointer; display: flex;
        align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: all 0.15s;
    }
    .psp-close:hover { background: #FEF2F2; border-color: #FCA5A5; color: #DC2626; }

    /* Panel body */
    .psp-body {
        flex: 1; overflow-y: auto; padding: 16px;
        background: #FAFAF8;
    }

    .psp-body::-webkit-scrollbar { width: 5px; }
    .psp-body::-webkit-scrollbar-track { background: transparent; }
    .psp-body::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.2); border-radius: 4px; }

    /* Placeholder */
    .psp-placeholder {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        height: 100%; text-align: center;
        color: #9CA3AF; padding: 2rem 1rem;
    }
    .psp-placeholder-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

    /* Port detail inside panel */
    .psp-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .psp-stat {
        background: #fff;
        border: 1px solid #EDE5C8;
        border-radius: 12px;
        padding: 12px 10px;
        text-align: center;
    }

    .psp-stat-label {
        font-size: 9px; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.07em;
        color: #9CA3AF; margin-bottom: 5px;
    }

    .psp-stat-value {
        font-size: 15px; font-weight: 800;
        color: #1A1A2E;
    }

    .psp-coord-box {
        background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
        border: 1px solid #BAE6FD;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 14px;
        font-size: 12px;
    }

    .psp-coord-title { color: #0369A1; font-weight: 700; margin-bottom: 8px; }
    .psp-coord-row {
        display: flex; justify-content: space-between;
        padding: 3px 0; color: #374151;
    }
    .psp-coord-row span:first-child { color: #0369A1; font-weight: 600; }
    .psp-coord-row span:last-child { font-family: monospace; }

    .psp-impact-box {
        background: #fff;
        border: 1px solid #EDE5C8;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 14px;
        font-size: 12px; color: #374151;
    }
    .psp-impact-title { font-weight: 700; color: #1A1A2E; margin-bottom: 6px; }

    /* Action buttons */
    .psp-actions { display: flex; gap: 8px; margin-top: 4px; }
    .psp-btn {
        flex: 1; padding: 9px 12px;
        border-radius: 10px; font-size: 12px; font-weight: 600;
        text-align: center; text-decoration: none;
        cursor: pointer; border: none;
        transition: all 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .psp-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .psp-btn-primary { background: #F59E0B; color: #fff; }
    .psp-btn-primary:hover { background: #D97706; }
    .psp-btn-secondary {
        background: #fff; color: #374151;
        border: 1px solid #EDE5C8;
    }
    .psp-btn-secondary:hover { background: #FFF9EC; border-color: #F59E0B; color: #B45309; }

    /* Status badge overrides */
    .psp-status-open   { background: #F0FDF4; color: #166534; border: 1px solid #86EFAC; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-status-limited{ background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-status-congested{background:#FFF7ED; color: #9A3412; border: 1px solid #FDBA74; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-status-closed { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-risk-high   { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-risk-medium { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
    .psp-risk-low    { background: #F0FDF4; color: #166534; border: 1px solid #86EFAC; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }

    /* Port list below (keep but slimmer) */
    .port-list-container { margin-top: 18px; }

    /* Marker cluster styling */
    .marker-cluster {
        background-color: rgba(245, 158, 11, 0.8);
        border: 2px solid white; border-radius: 50%;
        text-align: center; color: white;
        font-weight: bold;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .marker-cluster div {
        background-color: rgba(245, 158, 11, 0.9);
        border-radius: 50%; width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
    }
    .marker-cluster-small  { width: 30px; height: 30px; }
    .marker-cluster-medium { width: 40px; height: 40px; }
    .marker-cluster-large  { width: 50px; height: 50px; }

    /* Map filters and legend from ports-enhanced.css */
    @media (max-width: 1024px) {
        .port-side-panel.open { flex: 0 0 310px; width: 310px; }
        .port-side-panel-inner { width: 310px; }
        #port-map { height: 600px; }
        .map-panel-wrapper { min-height: 600px; }
    }

    @media (max-width: 768px) {
        .map-panel-wrapper {
            flex-direction: column;
            border-radius: 14px;
        }
        #port-map { height: 420px; }
        .port-side-panel {
            flex: 0 0 0px !important;
            width: 100% !important;
            border-left: none;
            border-top: 1px solid #EDE5C8;
            max-height: 0;
            transition: max-height 320ms ease;
        }
        .port-side-panel.open {
            max-height: 450px;
            flex: unset !important;
        }
        .port-side-panel-inner { width: 100%; }
    }

    /* Widget card overrides */
    .port-map-container .widget-body {
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
</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="dashboard-content">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-slate-800">
            Global <span class="text-amber-600">Port Dashboard</span>
        </h1>
        <p class="mt-2 text-slate-600">
            Interactive World Port Index with advanced search, filtering, and mapping capabilities.
        </p>
    </div>

    {{-- ── Enhanced Statistics Cards ───────────────────────────────────────────── --}}
    <div class="stats-enhanced">
        <div class="stat-card-enhanced">
            <div class="stat-icon-enhanced">⚓</div>
            <div class="stat-value-enhanced">{{ number_format($stats['total'] ?? 0) }}</div>
            <div class="stat-label-enhanced">Total Ports</div>
        </div>
        
        <div class="stat-card-enhanced">
            <div class="stat-icon-enhanced">🏢</div>
            <div class="stat-value-enhanced">{{ number_format($stats['major'] ?? 0) }}</div>
            <div class="stat-label-enhanced">Major Ports</div>
        </div>
        
        <div class="stat-card-enhanced">
            <div class="stat-icon-enhanced">🌍</div>
            <div class="stat-value-enhanced">{{ number_format($stats['countries'] ?? 0) }}</div>
            <div class="stat-label-enhanced">Countries</div>
        </div>
        
        <div class="stat-card-enhanced">
            <div class="stat-icon-enhanced">🟢</div>
            <div class="stat-value-enhanced">{{ number_format($stats['status']['open'] ?? 0) }}</div>
            <div class="stat-label-enhanced">Active Ports</div>
        </div>
        
        <div class="stat-card-enhanced">
            <div class="stat-icon-enhanced">🔴</div>
            <div class="stat-value-enhanced">{{ number_format($stats['risk']['high'] ?? 0) }}</div>
            <div class="stat-label-enhanced">High Risk</div>
        </div>
    </div>

    {{-- ── Search & Filter Section ─────────────────────────────────────── --}}
    <div class="search-section">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Search Port</label>
                <input id="port-search" type="text" placeholder="Port name, country, or code..."
                       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="block text-sm font-medium text-slate-700 mb-2">Country</label>
                <select id="country-filter"
                        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 Countries</option>
                    @foreach($countries ?? [] as $country)
                        <option value="{{ $country }}">{{ $country }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Port Size</label>
                <select id="size-filter"
                        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 Sizes</option>
                    <option value="Large">Large Ports</option>
                    <option value="Medium">Medium Ports</option>
                    <option value="Small">Small Ports</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
                <select id="status-filter"
                        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 Status</option>
                    <option value="Open">Open</option>
                    <option value="Limited">Limited</option>
                    <option value="Congested">Congested</option>
                    <option value="Closed">Closed</option>
                </select>
            </div>
        </div>

        <div class="search-buttons">
            <button id="search-btn" class="search-btn search-btn-primary">
                🔍 Search
            </button>
            <button id="reset-btn" class="search-btn search-btn-secondary">
                ↺ Reset Filter
            </button>
        </div>
    </div>

    {{-- ── Results Info ─────────────────────────────────────────── --}}
    <div id="results-info" class="results-info" style="display: none;">
        📊 Loading results...
    </div>

        {{-- ── Map + Side Panel (Weather-style inline flex) ─────────── --}}
        <div class="map-panel-wrapper" id="map-panel-wrapper">

            {{-- Map Section --}}
            <div class="map-section" id="map-section">
                {{-- Map Filters --}}
                <div class="map-filters">
                    <div class="map-filter-title">Quick Filters</div>
                    <div class="map-filter-item">
                        <input type="checkbox" class="map-filter-checkbox" value="open" checked>
                        <span>🟢 Active</span>
                    </div>
                    <div class="map-filter-item">
                        <input type="checkbox" class="map-filter-checkbox" value="large" checked>
                        <span>🏢 Large</span>
                    </div>
                    <div class="map-filter-item">
                        <input type="checkbox" class="map-filter-checkbox" value="medium" checked>
                        <span>🏭 Medium</span>
                    </div>
                    <div class="map-filter-item">
                        <input type="checkbox" class="map-filter-checkbox" value="small" checked>
                        <span>⚓ Small</span>
                    </div>
                    <div class="map-filter-item">
                        <input type="checkbox" class="map-filter-checkbox" value="high" checked>
                        <span>🔴 High Risk</span>
                    </div>
                </div>

                {{-- Map Legend --}}
                <div class="map-legend">
                    <div class="legend-title">Port Status</div>
                    <div class="legend-item">
                        <div class="legend-marker" style="background: #10b981;"></div>
                        <span>Active</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-marker" style="background: #f59e0b;"></div>
                        <span>Limited</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-marker" style="background: #ea580c;"></div>
                        <span>Congested</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-marker" style="background: #ef4444;"></div>
                        <span>Closed</span>
                    </div>
                </div>

                {{-- Reset View --}}
                <button id="reset-view"
                        style="position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:500;
                               background:#fff;border:1px solid #EDE5C8;border-radius:9px;padding:6px 14px;
                               font-size:12px;font-weight:600;color:#4B5563;cursor:pointer;
                               box-shadow:0 1px 6px rgba(0,0,0,0.07);transition:all 0.2s;"
                        onmouseover="this.style.background='#FFF9EC'" onmouseout="this.style.background='#fff'">
                    🗺️ Reset View
                </button>

                <div id="port-map"></div>
            </div>

            {{-- Side Information Panel --}}
            <div class="port-side-panel" id="side-panel">
                <div class="port-side-panel-inner" id="side-panel-inner">

                    {{-- Panel Header --}}
                    <div class="psp-header">
                        <div class="psp-header-icon" id="psp-icon">⚓</div>
                        <div class="psp-header-info">
                            <div class="psp-port-name" id="psp-port-name">Port Details</div>
                            <div class="psp-port-country" id="psp-port-country">
                                <span>Select a port on the map</span>
                            </div>
                        </div>
                        <button class="psp-close" id="panel-close" aria-label="Close panel">✕</button>
                    </div>

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

                </div>
            </div>

        </div>{{-- /map-panel-wrapper --}}


</div>

@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="{{ asset('js/ports-enhanced.js') }}"></script>

<script>
// Pass ports data to JavaScript - using collect to avoid potential errors
window.portsData = {!! collect($ports ?? [])->map(function($port) {
    return [
        'id' => $port->id,
        'name' => $port->port_name,
        'code' => $port->port_code,
        'country' => $port->country->name ?? 'Unknown',
        'lat' => (float) $port->latitude,
        'lng' => (float) $port->longitude,
        'status' => $port->status ?? 'Open',
        'capacity' => (int) $port->capacity,
        'congestion_level' => (int) $port->congestion_level,
        'flag_url' => $port->country->flag_url ?? null,
    ];
})->toJson() !!};

</script>
@endpush