@extends('layouts.admin')

@section('title', $port->port_name . ' — Port Dataset')
@section('page-title', 'Port Detail')

@section('content')

{{-- ── Action Buttons ────────────────────────────────────────────── --}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <a href="{{ route('admin.ports.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left mr-1"></i> Back to Ports
    </a>
    
    <div>
        @if($port->latitude !== null && $port->longitude !== null)
            <a href="https://www.google.com/maps/search/?api=1&query={{ $port->latitude }},{{ $port->longitude }}" 
               target="_blank" rel="noopener noreferrer" 
               class="btn btn-outline-primary btn-sm">
                <i class="fas fa-map-marked-alt mr-1"></i> View on Google Maps
            </a>
        @endif
    </div>
</div>

{{-- ── Header Card ─────────────────────────────────────────── --}}
<div class="card shadow border-bottom-primary mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-2 font-weight-bold text-gray-800">
                    <i class="fas fa-anchor text-primary mr-2"></i> {{ $port->port_name }}
                </h1>
                
                @if($port->country)
                    <div class="d-flex align-items-center mb-3">
                        @if($port->country->flag_url)
                            <img src="{{ $port->country->flag_url }}" alt="Flag of {{ $port->country->name }}" class="border shadow-sm mr-2" style="height: 24px; width: 36px; object-fit: cover;">
                        @endif
                        <h5 class="text-secondary mb-0">
                            {{ $port->country->name }}
                        </h5>
                    </div>
                @endif
                
                <div class="d-flex flex-wrap gap-3">
                    <span class="mr-4">
                        <strong>UN/LOCODE:</strong> <code class="text-dark bg-light px-2 py-1 rounded">{{ $port->port_code ?? 'Not Available' }}</code>
                    </span>
                    <span class="mr-4">
                        <strong>Status:</strong> 
                        @if($port->status)
                            @php
                                $badgeClass = match($port->status) {
                                    'Open' => 'success',
                                    'Limited' => 'warning',
                                    'Congested' => 'warning',
                                    'Closed' => 'danger',
                                    default => 'secondary',
                                };
                            @endphp
                            <span class="badge badge-{{ $badgeClass }}">{{ $port->status }}</span>
                        @else
                            <span class="text-muted">Not Available</span>
                        @endif
                    </span>
                    <span class="mr-4">
                        <strong>Risk:</strong> 
                        @if($port->congestion_level !== null)
                            @php
                                $riskBadgeClass = match(true) {
                                    $port->congestion_level >= 80 => 'danger',
                                    $port->congestion_level >= 50 => 'warning',
                                    $port->congestion_level >= 20 => 'info',
                                    default => 'success',
                                };
                            @endphp
                            <span class="badge badge-{{ $riskBadgeClass }}">{{ $port->congestion_label }} Risk</span>
                        @else
                            <span class="text-muted">Not Available</span>
                        @endif
                    </span>
                    <span class="text-muted">
                        <i class="fas fa-clock mr-1"></i> Last Updated: {{ $port->updated_at ? $port->updated_at->format('d M Y, H:i') : 'Not Available' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- ── Left Column: Port & Country Info ─────────────────────────────────────────── --}}
    <div class="col-lg-6 mb-4">
        
        {{-- Port Information Card --}}
        <div class="card shadow mb-4 h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Port Information</h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tbody>
                        <tr>
                            <td class="text-muted w-50">Port Name</td>
                            <td class="font-weight-bold">{{ $port->port_name ?? 'Not Available' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">UN/LOCODE</td>
                            <td><code class="text-dark bg-light px-2 py-1 rounded">{{ $port->port_code ?? 'Not Available' }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Country</td>
                            <td>
                                @if($port->country)
                                    <a href="{{ route('admin.countries.show', $port->country) }}" class="text-primary text-decoration-none">
                                        {{ $port->country->name }}
                                    </a>
                                @else
                                    Not Available
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">City</td>
                            <td>{{ $port->city ?? 'Not Available' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Latitude</td>
                            <td>{{ $port->latitude !== null ? number_format($port->latitude, 6) : 'Not Available' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Longitude</td>
                            <td>{{ $port->longitude !== null ? number_format($port->longitude, 6) : 'Not Available' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Capacity</td>
                            <td>{{ $port->capacity ? number_format($port->capacity) . ' TEU' : 'Not Available' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Congestion Level</td>
                            <td>
                                @if($port->congestion_level !== null)
                                    {{ $port->congestion_level }}% ({{ $port->congestion_label }})
                                @else
                                    Not Available
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Data Source</td>
                            <td>{{ $port->source ?? 'Not Available' }}</td>
                        </tr>
                    </tbody>
                </table>
                
                @if($port->description)
                    <hr>
                    <div class="mt-3">
                        <span class="text-muted d-block mb-1">Description</span>
                        <p class="small text-dark">{{ $port->description }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-6 mb-4">
        
        {{-- Map Card --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Map Location</h6>
            </div>
            <div class="card-body p-0">
                @if($port->latitude !== null && $port->longitude !== null)
                    <div id="port-map" style="height: 300px; width: 100%; border-bottom-left-radius: 0.35rem; border-bottom-right-radius: 0.35rem;"></div>
                @else
                    <div class="d-flex justify-content-center align-items-center bg-light text-muted" style="height: 300px; width: 100%; border-bottom-left-radius: 0.35rem; border-bottom-right-radius: 0.35rem;">
                        <div>
                            <i class="fas fa-map-marker-alt fa-3x mb-3 d-block text-center"></i>
                            <p>Coordinates Not Available</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Country Information Card --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Country Information</h6>
            </div>
            <div class="card-body">
                @if($port->country)
                    <table class="table table-borderless table-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="text-muted w-50">Name</td>
                                <td class="font-weight-bold">{{ $port->country->name ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">ISO Codes</td>
                                <td>
                                    <span class="badge badge-light border">{{ $port->country->iso2 ?? 'N/A' }}</span>
                                    <span class="badge badge-light border">{{ $port->country->iso3 ?? 'N/A' }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">Capital</td>
                                <td>{{ $port->country->capital ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Region</td>
                                <td>{{ $port->country->region ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Subregion</td>
                                <td>{{ $port->country->subregion ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Area</td>
                                <td>{{ $port->country->area ? number_format($port->country->area) . ' km²' : 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Population</td>
                                <td>{{ $port->country->population ? number_format($port->country->population) : 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Currency</td>
                                <td>
                                    @if($port->country->currency)
                                        {{ $port->country->currency->name }} ({{ $port->country->currency->code }})
                                    @else
                                        Not Available
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">Calling Code</td>
                                <td>{{ $port->country->calling_code ? '+' . $port->country->calling_code : 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Internet Domain</td>
                                <td>{{ $port->country->internet_domain ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Timezone</td>
                                <td>{{ $port->country->timezone ?? 'Not Available' }}</td>
                            </tr>
                        </tbody>
                    </table>
                @else
                    <p class="text-muted text-center my-4">Country information is not available for this port.</p>
                @endif
            </div>
        </div>

    </div>
</div>

@endsection

@push('styles')
    @if($port->latitude !== null && $port->longitude !== null)
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        .leaflet-container {
            z-index: 1;
        }
    </style>
    @endif
@endpush

@push('scripts')
    @if($port->latitude !== null && $port->longitude !== null)
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var lat = {{ $port->latitude }};
            var lng = {{ $port->longitude }};
            
            var map = L.map('port-map').setView([lat, lng], 10);
            
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            
            var marker = L.marker([lat, lng]).addTo(map);
            marker.bindPopup("<b>{{ $port->port_name }}</b><br>{{ $port->city ? $port->city . ', ' : '' }}{{ $port->country ? $port->country->name : '' }}").openPopup();
        });
    </script>
    @endif
@endpush