@extends('layouts.landing')

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

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

    {{-- ========== HEADER ========== --}}
    <div class="countries-header-block">
        <div class="header-left">
            <h1>Countries</h1>
            <p class="subtitle">Explore all countries monitored by DaisyRisk. Select a country to view its detailed supply chain risk analysis.</p>
        </div>
        <div class="header-right">
            <span class="monitored-badge">{{ $totalCountries }} Countries 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, kode ISO, atau ibu kota..." 
                       class="form-control filter-search-input">
            </div>

            {{-- Region Select filter --}}
            <div class="region-select-wrapper">
                <select name="region" onchange="this.form.submit()" class="form-select filter-region-select">
                    <option value="">Semua Wilayah (Region)</option>
                    @foreach($regions as $regionOption)
                        <option value="{{ $regionOption }}" {{ $selectedRegion === $regionOption ? 'selected' : '' }}>
                            {{ $regionOption }}
                        </option>
                    @endforeach
                </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 || $selectedRegion)
                    <a href="{{ route('landing.countries') }}" class="dr-btn dr-btn-secondary dr-btn-secondary-custom">Reset</a>
                @endif
            </div>
        </form>
    </div>

    {{-- ========== COUNTRIES CATALOG GRID ========== --}}
    @if($countries->count() > 0)
        <div class="countries-catalog-grid">
            @foreach($countries as $country)
                <div class="country-catalog-card" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="switchTab('login')">
                    {{-- Flag Image via FlagCDN --}}
                    <div class="country-flag-container">
                        <img src="https://flagcdn.com/w160/{{ strtolower($country->iso2) }}.png"
                             alt="{{ $country->name }} Flag"
                             class="flag-image"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="flag-placeholder" style="display: none;">
                            <span>🌍</span>
                        </div>
                    </div>

                    {{-- Country Identity Details --}}
                    <div class="country-card-identity">
                        <h3>{{ $country->name }}</h3>
                        <span class="region-tag">{{ $country->region ?? 'Unknown Region' }}</span>
                    </div>

                    {{-- Metadata list --}}
                    <div class="country-metadata-list">
                        <div class="metadata-row">
                            <span class="metadata-label">Capital</span>
                            <span class="metadata-value">{{ $country->capital ?: '-' }}</span>
                        </div>
                        <div class="metadata-row">
                            <span class="metadata-label">ISO Code</span>
                            <span class="metadata-value">{{ $country->iso2 }}</span>
                        </div>
                    </div>

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

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

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

                {{-- Next --}}
                @if ($countries->hasMorePages())
                    <a href="{{ $countries->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="countries-empty-state-card">
            <div class="empty-icon">🔍</div>
            <h3>No countries match your search.</h3>
            <p>Cobalah untuk memperbarui filter wilayah atau kata kunci pencarian Anda untuk menemukan negara yang diinginkan.</p>
            <a href="{{ route('landing.countries') }}" class="dr-btn dr-btn-primary dr-btn-primary-custom">Lihat Semua Negara</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('.countries-page-container');
            if (navbar && container) {
                var navHeight = navbar.offsetHeight;
                // Base padding (e.g. 32px) + 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); }
    }

    .countries-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 */
    .countries-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: 320px;
    }

    .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: 260px;
        min-width: 200px;
    }

    .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 */
    .countries-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;
    }

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

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

    /* Flag layout */
    .country-flag-container {
        width: 100%;
        height: 140px; /* Flag enlarged */
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 20px;
        background-color: #F8FAFC;
        border: 1px solid #E8E5D8;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flag-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .flag-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F1F5F9;
        font-size: 3rem;
    }

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

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

    .region-tag {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 800;
        color: #D97706; /* DaisyRisk accent */
        background-color: rgba(248, 184, 78, 0.12);
        padding: 4px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Metadata rows */
    .country-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;
    }

    /* Footer view button link styling */
    .country-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;
    }

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

    .country-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 */
    .countries-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;
    }

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

    .countries-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) {
        .countries-page-container {
            padding-left: 32px;
            padding-right: 32px;
        }
        .countries-catalog-grid {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
    }

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

    @media (max-width: 640px) {
        .countries-page-container {
            padding-left: 16px;
            padding-right: 16px;
        }
        .countries-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