@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3>Logistik Pelabuhan & Peta</h3>
    <p>Peta pelabuhan global interaktif dengan indeks kemacetan dan tingkat risiko</p>
</div>

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('ports') }}" class="row g-2 align-items-center">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Cari nama pelabuhan..." value="{{ $search }}">
            </div>
            <div class="col-md-3">
                <select name="country" class="form-select">
                    <option value="">Semua Negara</option>
                    @foreach($allCountries as $c)
                        <option value="{{ $c }}" @if($country === $c) selected @endif>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="risk" class="form-select">
                    <option value="">Semua Tingkat Risiko</option>
                    <option value="low"    @if($risk==='low')    selected @endif>Rendah</option>
                    <option value="medium" @if($risk==='medium') selected @endif>Sedang</option>
                    <option value="high"   @if($risk==='high')   selected @endif>Tinggi</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-accent flex-fill">
                    <i class="bi bi-funnel me-1"></i> Filter
                </button>
                <a href="{{ route('ports') }}" class="btn" style="background:rgba(255,255,255,.07); color:#e0e8f0;">
                    <i class="bi bi-x-circle"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="row g-3">

    {{-- Map --}}
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body p-2">
                <div class="d-flex justify-content-between align-items-center px-2 pb-2">
                    <span class="fw-semibold" style="font-size:.85rem;">
                        <i class="bi bi-compass me-1 text-info"></i> Peta Lokasi Pelabuhan
                    </span>
                    <div class="d-flex gap-2" style="font-size:.7rem;">
                        <span><span style="color:#28c76f;">●</span> Rendah</span>
                        <span><span style="color:#ffc107;">●</span> Sedang</span>
                        <span><span style="color:#dc3545;">●</span> Tinggi</span>
                    </div>
                </div>
                <div id="port-map" style="height:460px; border-radius:10px;"></div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-semibold" style="font-size:.85rem; color:#7eceff;">
                        Direktori Pelabuhan
                    </span>
                    <span style="font-size:.75rem; color:#5a8099;">{{ $ports->count() }} pelabuhan</span>
                </div>

                <div style="max-height:420px; overflow-y:auto;">
                    <table class="table table-dark align-middle" style="font-size:.78rem;">
                        <thead style="position:sticky; top:0; background:#1b2a3b;">
                            <tr>
                                <th>Pelabuhan</th>
                                <th>Negara</th>
                                <th class="text-center">Kemacetan</th>
                                <th class="text-center">Risiko</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($ports as $port)
                            <tr id="port-row-{{ $port->id }}" style="cursor:pointer;"
                                onmouseenter="this.style.background='rgba(0,210,255,.05)'"
                                onmouseleave="this.style.background=''"
                                onclick="focusPort({{ $port->lat }}, {{ $port->lng }}, '{{ addslashes($port->port_name) }}', '{{ $port->country }}', {{ $port->congestion_index }}, '{{ $port->risk_level }}')">
                                <td class="fw-semibold">{{ $port->port_name }}</td>
                                <td style="color:#7a9ab5;">{{ $port->country }}</td>
                                <td class="text-center">
                                    <div class="progress" style="height:5px; width:60px; margin:auto;">
                                        <div class="progress-bar"
                                             style="width:{{ $port->congestion_index }}%;
                                                    background:{{ $port->congestion_index >= 70 ? '#dc3545' : ($port->congestion_index >= 40 ? '#ffc107' : '#28c76f') }};">
                                        </div>
                                    </div>
                                    <span style="font-size:.65rem; color:#5a8099;">{{ $port->congestion_index }}%</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge risk-badge-{{ $port->risk_level }}" style="font-size:.65rem;">
                                        {{ $port->risk_level === 'high' ? 'TINGGI' : ($port->risk_level === 'medium' ? 'SEDANG' : 'RENDAH') }}
                                    </span>
                                </td>
                                <td>
                                    <i class="bi bi-geo-alt-fill text-info" style="font-size:.85rem;"></i>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4" style="color:#5a8099;">
                                    Tidak ditemukan pelabuhan. Periksa filter Anda.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Port detail popup --}}
<div class="modal fade" id="portModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="background:#1b2a3b; border:1px solid rgba(255,255,255,.1);">
            <div class="modal-header border-0">
                <h6 class="modal-title" id="modal-port-name" style="color:#00d2ff;"></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div style="font-size:.7rem; color:#5a8099;">Negara</div>
                        <div id="modal-country" style="font-size:.9rem;"></div>
                    </div>
                    <div class="col-6">
                        <div style="font-size:.7rem; color:#5a8099;">Tingkat Risiko</div>
                        <div id="modal-risk"></div>
                    </div>
                    <div class="col-12">
                        <div style="font-size:.7rem; color:#5a8099; margin-bottom:4px;">Indeks Kemacetan</div>
                        <div class="progress" style="height:10px;">
                            <div id="modal-congestion-bar" class="progress-bar" style="width:0%;"></div>
                        </div>
                        <div id="modal-congestion-label" style="font-size:.75rem; margin-top:4px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const map = L.map('port-map').setView([20, 40], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);
    setTimeout(() => map.invalidateSize(), 300);

    const ports  = @json(json_decode($portsJson, true) ?? []);
    const markersMap = {};

    ports.forEach(p => {
        const color = p.risk_level === 'high' ? '#dc3545' : p.risk_level === 'medium' ? '#ffc107' : '#28c76f';
        const marker = L.circleMarker([p.lat, p.lng], {
            radius: 7, fillColor: color, color: '#fff',
            weight: 1.5, opacity: 0.9, fillOpacity: 0.85,
        }).addTo(map);

        marker.bindPopup(`
            <div style="min-width:160px;">
                <b style="color:#00d2ff;">${p.port_name}</b><br>
                <span style="color:#8899aa;">${p.country}</span><br>
                Risiko: <span style="color:${color}; font-weight:600;">${p.risk_level === 'high' ? 'TINGGI' : p.risk_level === 'medium' ? 'SEDANG' : 'RENDAH'}</span><br>
                Kemacetan: ${p.congestion_index}%
            </div>
        `);

        if (p.id) markersMap[p.id] = marker;
    });

    const portModal = new bootstrap.Modal(document.getElementById('portModal'));

    window.focusPort = function (lat, lng, name, country, congestion, risk) {
        map.flyTo([lat, lng], 8, { duration: 1 });

        document.getElementById('modal-port-name').textContent = name;
        document.getElementById('modal-country').textContent   = country;

        const riskEl = document.getElementById('modal-risk');
        const color  = risk === 'high' ? '#ff6b6b' : risk === 'medium' ? '#ffcc33' : '#28c76f';
        const riskText = risk === 'high' ? 'TINGGI' : risk === 'medium' ? 'SEDANG' : 'RENDAH';
        riskEl.innerHTML = `<span style="color:${color}; font-weight:600; font-size:.9rem;">${riskText}</span>`;

        const barEl  = document.getElementById('modal-congestion-bar');
        barEl.style.width       = congestion + '%';
        barEl.style.background  = congestion >= 70 ? '#dc3545' : congestion >= 40 ? '#ffc107' : '#28c76f';
        const congestionLabel = congestion >= 70 ? 'Parah' : congestion >= 40 ? 'Sedang' : 'Normal';
        document.getElementById('modal-congestion-label').textContent =
            congestion + '% – ' + congestionLabel;

        portModal.show();
    };
});
</script>
@endpush