@extends('layouts.landing')

@section('title', 'Global Ports - DaisyRisk Global Supply Chain Intelligence')

@section('content')
<div class="ports-page-container">

    {{-- ========== HEADER ========== --}}
    <div class="ports-header-block">
        <div class="header-left">
            <h1>Global Ports</h1>
            <p class="subtitle">Explore international ports monitored by DaisyRisk. Select a port to view detailed information and monitoring data.</p>
        </div>
        <div class="header-right">
            <span class="monitored-badge">{{ number_format(\App\Models\Port::count()) }} Ports Monitored</span>
        </div>
    </div>

    {{-- ========== SEARCH & FILTER BAR ========== --}}
    <div class="filter-bar-card">
        <form method="GET" class="filter-form">
            {{-- Search input --}}
            <div class="search-input-wrapper">
                <span class="search-icon">🔍</span>
                <input type="text" 
                       name="search" 
                       value="{{ $search }}"
                       placeholder="Cari berdasarkan nama pelabuhan, kota, atau negara..." 
                       class="form-control filter-search-input">
            </div>

            {{-- Country Select filter --}}
            <div class="region-select-wrapper">
                <select name="country" onchange="this.form.submit()" class="form-select filter-region-select">
                    <option value="">Semua Negara</option>
                    @foreach($countries as $countryOption)
                        <option value="{{ $countryOption->id }}" {{ (string)$selectedCountry === (string)$countryOption->id ? 'selected' : '' }}>
                            {{ $countryOption->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Status Select filter --}}
            <div class="region-select-wrapper">
                <select name="status" onchange="this.form.submit()" class="form-select filter-region-select">
                    <option value="">Semua Status</option>
                    <option value="Open" {{ $selectedStatus === 'Open' ? 'selected' : '' }}>Open</option>
                    <option value="Limited" {{ $selectedStatus === 'Limited' ? 'selected' : '' }}>Limited</option>
                    <option value="Congested" {{ $selectedStatus === 'Congested' ? 'selected' : '' }}>Congested</option>
                    <option value="Closed" {{ $selectedStatus === 'Closed' ? 'selected' : '' }}>Closed</option>
                </select>
            </div>

            {{-- Filter & Reset Buttons --}}
            <div class="form-actions-wrapper">
                <button type="submit" class="dr-btn dr-btn-primary dr-btn-primary-custom">Filter</button>
                @if($search || $selectedCountry || $selectedStatus)
                    <a href="{{ route('landing.ports') }}" class="dr-btn dr-btn-secondary dr-btn-secondary-custom">Reset</a>
                @endif
            </div>
        </form>
    </div>

    {{-- ========== PORTS CATALOG GRID ========== --}}
    @if($ports->count() > 0)
        <div class="ports-catalog-grid">
            @foreach($ports as $port)
                <div class="port-catalog-card" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="switchTab('login')">
                    {{-- Port Identity Details --}}
                    <div class="port-card-identity">
                        <h3>{{ $port->port_name }}</h3>
                        
                        @php
                            $statusColor = match($port->status ?? 'Open') {
                                'Open' => 'background-color: #DEF7EC; color: #03543F;',
                                'Limited' => 'background-color: #FEF3C7; color: #92400E;',
                                'Congested' => 'background-color: #FFEDD5; color: #9A3412;',
                                'Closed' => 'background-color: #FDE8E8; color: #9B1C1C;',
                                default => 'background-color: #F1F5F9; color: #475569;'
                            };
                            $statusLabel = $port->status ?? 'Unknown';
                        @endphp
                        <span class="status-badge" style="{{ $statusColor }}">{{ $statusLabel }}</span>
                    </div>

                    {{-- Metadata list --}}
                    <div class="port-metadata-list">
                        <div class="metadata-row">
                            <span class="metadata-label">Country</span>
                            <span class="metadata-value">{{ $port->country->name ?? '-' }}</span>
                        </div>
                        <div class="metadata-row">
                            <span class="metadata-label">City</span>
                            <span class="metadata-value">{{ $port->city ?: '-' }}</span>
                        </div>
                        <div class="metadata-row">
                            <span class="metadata-label">Coordinates</span>
                            <span class="metadata-value">
                                @if($port->latitude && $port->longitude)
                                    <a href="https://www.google.com/maps?q={{ $port->latitude }},{{ $port->longitude }}&z=15" 
                                       class="map-link" 
                                       target="_blank" 
                                       rel="noopener noreferrer" 
                                       onclick="event.stopPropagation();">
                                        📍 View on Map
                                    </a>
                                @elseif($port->country && $port->country->latitude && $port->country->longitude)
                                    <a href="https://www.google.com/maps?q={{ $port->country->latitude }},{{ $port->country->longitude }}" 
                                       class="map-link" 
                                       target="_blank" 
                                       rel="noopener noreferrer" 
                                       onclick="event.stopPropagation();">
                                        📍 View on Map
                                    </a>
                                @else
                                    N/A
                                @endif
                            </span>
                        </div>
                    </div>

                    {{-- CTA Details Button --}}
                    <div class="port-card-footer">
                        <span class="view-details-link">
                            View Details <span class="arrow">→</span>
                        </span>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ========== PAGINATION ========== --}}
        @if($ports->hasPages())
            <div class="pagination-container">
                {{-- Previous --}}
                @if ($ports->onFirstPage())
                    <span class="pagination-btn disabled">← Sebelumnya</span>
                @else
                    <a href="{{ $ports->appends(request()->query())->previousPageUrl() }}" class="pagination-btn">← Sebelumnya</a>
                @endif

                {{-- Pages links --}}
                <div class="pagination-pages-list">
                    @foreach ($ports->appends(request()->query())->getUrlRange(max(1, $ports->currentPage() - 2), min($ports->lastPage(), $ports->currentPage() + 2)) as $page => $url)
                        @if ($page == $ports->currentPage())
                            <span class="pagination-number active">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="pagination-number">{{ $page }}</a>
                        @endif
                    @endforeach
                </div>

                {{-- Next --}}
                @if ($ports->hasMorePages())
                    <a href="{{ $ports->appends(request()->query())->nextPageUrl() }}" class="pagination-btn">Selanjutnya →</a>
                @else
                    <span class="pagination-btn disabled">Selanjutnya →</span>
                @endif
            </div>
        @endif

    @else
        {{-- ========== EMPTY STATE ========== --}}
        <div class="ports-empty-state-card">
            <div class="empty-icon">⚓</div>
            <h3>No ports match your search.</h3>
            <p>Cobalah untuk memperbarui filter atau kata kunci pencarian Anda untuk menemukan pelabuhan yang diinginkan.</p>
            <a href="{{ route('landing.ports') }}" class="dr-btn dr-btn-primary dr-btn-primary-custom">Lihat Semua Pelabuhan</a>
        </div>
    @endif

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Prevent content from being hidden behind the fixed landing navbar
        function adjustNavbarPadding() {
            var navbar = document.getElementById('nbar');
            var container = document.querySelector('.ports-page-container');
            if (navbar && container) {
                var navHeight = navbar.offsetHeight;
                // Base padding + navbar height
                container.style.paddingTop = (navHeight + 32) + 'px';
            }
        }
        
        adjustNavbarPadding();
        window.addEventListener('resize', adjustNavbarPadding);
    });
</script>

<style>
    /* Override body background to ensure Landing Page cream background */
    body {
        background-color: #FFFEF9 !important;
    }

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

    .ports-page-container {
        animation: fadeInUp 0.5s ease-out;
        font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: #0F172A;
        width: 100%;
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 32px;
        padding-bottom: 64px;
    }

    /* Header block */
    .ports-header-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .header-left h1 {
        font-size: 2.75rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0 0 8px 0;
        letter-spacing: -0.025em;
        line-height: 1.1;
    }

    .header-left .subtitle {
        font-size: 1.05rem;
        color: #64748B;
        margin: 0;
        line-height: 1.6;
        max-width: 650px;
        font-weight: 400;
    }

    .monitored-badge {
        background-color: rgba(248, 184, 78, 0.12);
        color: #D97706; /* DaisyRisk Orange Tone */
        font-weight: 700;
        font-size: 0.95rem;
        padding: 10px 20px;
        border-radius: 9999px; /* Pill shape */
        border: 1px solid rgba(248, 184, 78, 0.25);
        box-shadow: 0 2px 8px rgba(248, 184, 78, 0.08);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Search & filter form styling - spanning full area */
    .filter-bar-card {
        background-color: #FFFFFF;
        border: 1px solid #E8E5D8; /* DaisyRisk thin neutral border */
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 40px; /* Spacious spacing to grid */
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02); /* Soft shadow */
    }

    .filter-form {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
    }

    .search-input-wrapper {
        flex-grow: 1;
        position: relative;
        min-width: 280px;
    }

    .search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #94A3B8;
        font-size: 1.1rem;
    }

    .filter-search-input {
        width: 100%;
        padding: 12px 16px 12px 48px;
        font-size: 1rem;
        border: 1px solid #E8E5D8;
        border-radius: 12px;
        color: #0F172A;
        background-color: #FFFFFF;
        outline: none;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .filter-search-input::placeholder {
        color: #94A3B8;
        font-weight: 400;
    }

    .filter-search-input:focus {
        border-color: #F8B84E;
        background-color: #FFFFFF;
        box-shadow: 0 0 0 4px rgba(248, 184, 78, 0.15);
    }

    .region-select-wrapper {
        width: 220px;
        min-width: 160px;
    }

    .filter-region-select {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        border: 1px solid #E8E5D8;
        border-radius: 12px;
        color: #0F172A;
        background-color: #FFFFFF;
        cursor: pointer;
        outline: none;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .filter-region-select:focus {
        border-color: #F8B84E;
        background-color: #FFFFFF;
        box-shadow: 0 0 0 4px rgba(248, 184, 78, 0.15);
    }

    .form-actions-wrapper {
        display: flex;
        gap: 12px;
    }
    
    .dr-btn-primary-custom {
        background-color: #F59E0B !important;
        color: #FFFFFF !important;
        border: none !important;
        padding: 12px 24px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25) !important;
    }
    
    .dr-btn-primary-custom:hover {
        background-color: #D97706 !important;
        box-shadow: 0 6px 14px rgba(245, 158, 11, 0.35) !important;
        transform: translateY(-1px) !important;
    }

    .dr-btn-secondary-custom {
        background-color: #F8FAFC !important;
        color: #475569 !important;
        border: 1px solid #E8E5D8 !important;
        padding: 12px 24px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
    }
    
    .dr-btn-secondary-custom:hover {
        background-color: #F1F5F9 !important;
        color: #0F172A !important;
    }

    /* Grid layout catalog */
    .ports-catalog-grid {
        display: grid;
        /* Desktop: up to 5 cards based on width, minimum 260px wide */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 28px;
        margin-bottom: 56px;
    }

    .port-catalog-card {
        background-color: #FFFFFF;
        border: 1px solid #E8E5D8;
        border-radius: 20px; 
        padding: 24px;      
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03); 
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .port-catalog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08); 
        border-color: #CBD5E1;
    }

    /* Identity details styling */
    .port-card-identity {
        margin-bottom: 24px;
        text-align: left;
    }

    .port-card-identity h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: #0F172A;
        margin: 0 0 12px 0;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .status-badge {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 800;
        padding: 4px 12px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Metadata rows */
    .port-metadata-list {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex-grow: 1;
    }

    .metadata-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }

    .metadata-label {
        color: #64748B;
        font-weight: 500;
    }

    .metadata-value {
        color: #0F172A;
        font-weight: 700;
        text-align: right;
    }

    .map-link {
        color: #3B82F6;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
    }
    
    .map-link:hover {
        color: #2563EB;
        text-decoration: underline;
    }

    /* Footer view button link styling */
    .port-card-footer {
        border-top: 1px solid #E8E5D8;
        padding-top: 18px;
        text-align: left;
    }

    .view-details-link {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--primary-orange, #F59E0B);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s ease;
    }

    .view-details-link .arrow {
        transition: transform 0.2s ease;
    }

    .port-catalog-card:hover .view-details-link {
        color: #D97706;
    }

    .port-catalog-card:hover .view-details-link .arrow {
        transform: translateX(4px);
    }

    /* Pagination container */
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 40px;
        padding-top: 32px;
        border-top: 1px solid #E8E5D8;
        flex-wrap: wrap;
        gap: 16px;
    }

    .pagination-btn {
        display: inline-flex;
        align-items: center;
        background-color: #FFFFFF;
        border: 1px solid #E8E5D8;
        color: #0F172A;
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    }

    .pagination-btn:hover:not(.disabled) {
        border-color: #CBD5E1;
        background-color: #F8FAFC;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
    }

    .pagination-btn.disabled {
        color: #94A3B8;
        background-color: #F8FAFC;
        cursor: not-allowed;
        box-shadow: none;
    }

    .pagination-pages-list {
        display: flex;
        gap: 8px;
    }

    .pagination-number {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        font-weight: 700;
        color: #64748B;
        text-decoration: none;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }

    .pagination-number:hover {
        background-color: #F1F5F9;
        color: #0F172A;
        border-color: #E2E8F0;
    }

    .pagination-number.active {
        background-color: #F59E0B;
        color: #FFFFFF;
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
    }

    /* Empty state */
    .ports-empty-state-card {
        background-color: #FFFFFF;
        border: 1px solid #E8E5D8;
        border-radius: 24px;
        padding: 64px 32px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }

    .empty-icon {
        font-size: 4rem;
        margin-bottom: 24px;
    }

    .ports-empty-state-card h3 {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0F172A;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }

    .ports-empty-state-card p {
        font-size: 1.05rem;
        color: #64748B;
        max-width: 520px;
        margin: 0 auto 32px auto;
        line-height: 1.6;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
        .ports-page-container {
            padding-left: 32px;
            padding-right: 32px;
        }
        .ports-catalog-grid {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .ports-page-container {
            padding-left: 24px;
            padding-right: 24px;
        }
        .pagination-container {
            justify-content: center;
        }
    }

    @media (max-width: 640px) {
        .ports-page-container {
            padding-left: 16px;
            padding-right: 16px;
        }
        .ports-catalog-grid {
            grid-template-columns: 1fr;
        }
        .filter-form {
            flex-direction: column;
            align-items: stretch;
        }
        .region-select-wrapper,
        .search-input-wrapper {
            width: 100%;
        }
        .form-actions-wrapper {
            justify-content: stretch;
        }
        .dr-btn-primary-custom, .dr-btn-secondary-custom {
            flex-grow: 1;
            text-align: center;
        }
    }
</style>
@endsection