@extends('layouts.admin')

@section('title', 'Country Risk Scores — Admin DaisyRisk')
@section('page-title', 'Country Risk Scores')

@section('content')

{{-- ── Header ──────────────────────────────────────────────────── --}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">🌍 Country Risk Scores</h4>
        <p class="text-muted mb-0">Latest calculated supply chain risk score for monitored countries.</p>
    </div>
</div>

{{-- ── Filters ──────────────────────────────────────────────────── --}}
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" class="d-flex flex-column flex-md-row align-items-md-end gap-3 w-100">
            <div class="flex-grow-1">
                <label class="form-label fw-semibold">Search Country</label>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="Cari negara..."
                       class="form-control">
            </div>
            
            <div style="min-width: 200px;">
                <label class="form-label fw-semibold">Risk Level</label>
                <select name="risk_level" class="form-select">
                    <option value="">All Levels</option>
                    @foreach($levels as $level)
                        <option value="{{ $level }}" {{ request('risk_level') === $level ? 'selected' : '' }}>
                            {{ ucfirst($level) }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary d-inline-flex align-items-center gap-1">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    Filter
                </button>
                @if(request()->hasAny(['search', 'risk_level']))
                    <a href="{{ route('admin.risk_scores.index') }}" class="btn btn-outline-secondary">Reset</a>
                @endif
            </div>
        </form>
    </div>
</div>

{{-- ── Table ────────────────────────────────────────────────────── --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="fw-semibold">Country</th>
                        <th class="fw-semibold text-center">Total Score</th>
                        <th class="fw-semibold text-center">Currency</th>
                        <th class="fw-semibold text-center">Weather</th>
                        <th class="fw-semibold text-center">Disaster</th>
                        <th class="fw-semibold text-center">Economy</th>
                        <th class="fw-semibold text-center">Risk Level</th>
                        <th class="fw-semibold">Calculated</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($scores as $score)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($score->country?->flag_url)
                                        <img src="{{ $score->country->flag_url }}" alt="Flag"
                                             class="country-flag-img">
                                    @else
                                        <span class="country-flag-placeholder">🏳️</span>
                                    @endif
                                    <span class="fw-semibold text-dark">{{ $score->country?->name ?? '—' }}</span>
                                </div>
                            </td>
                            <td class="text-center font-weight-bold" style="color: #EF4444; font-size: 16px;">
                                {{ number_format($score->total_score, 1) }}
                            </td>
                            <td class="text-center text-muted">
                                {{ number_format($score->currency_score ?? 0, 1) }}
                            </td>
                            <td class="text-center text-muted">
                                {{ number_format($score->weather_score ?? 0, 1) }}
                            </td>
                            <td class="text-center text-muted">
                                {{ number_format($score->disaster_score ?? 0, 1) }}
                            </td>
                            <td class="text-center text-muted">
                                {{ number_format($score->economy_score ?? 0, 1) }}
                            </td>
                            <td class="text-center">
                                @php
                                    $levelLower = strtolower($score->risk_level);
                                    $badgeStyle = 'background-color: #6B7280; color: white;'; // Default gray
                                    
                                    if (str_contains($levelLower, 'critical')) {
                                        $badgeStyle = 'background-color: #EF4444; color: white;'; // Merah
                                    } elseif (str_contains($levelLower, 'high')) {
                                        $badgeStyle = 'background-color: #F97316; color: white;'; // Oranye
                                    } elseif (str_contains($levelLower, 'medium')) {
                                        $badgeStyle = 'background-color: #FACC15; color: #713F12;'; // Kuning
                                    } elseif (str_contains($levelLower, 'low')) {
                                        $badgeStyle = 'background-color: #10B981; color: white;'; // Hijau
                                    } elseif (str_contains($levelLower, 'minimal')) {
                                        $badgeStyle = 'background-color: #3B82F6; color: white;'; // Biru
                                    }
                                @endphp
                                <span class="badge px-3 py-2 custom-risk-badge" style="{{ $badgeStyle }}">
                                    {{ strtoupper($score->risk_level) }}
                                </span>
                            </td>
                            <td>
                                @if($score->calculated_at)
                                    <div class="fw-medium">{{ $score->calculated_at->format('d M Y') }}</div>
                                    <small class="text-muted">{{ $score->calculated_at->format('H:i') }}</small>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <div class="mb-3 text-muted">
                                    <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                    </svg>
                                </div>
                                <h6 class="text-muted">Tidak ada data Risk Score</h6>
                                <p class="text-muted small">Jalankan sinkronisasi untuk menghitung skor risiko pertama Anda.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ── Pagination ────────────────────────────────────────────────── --}}
@if($scores->hasPages())
<div class="d-flex justify-content-center mt-4">
    <nav aria-label="Risk Score pagination">
        {{ $scores->appends(request()->query())->links() }}
    </nav>
</div>
@endif

@endsection

@push('styles')
<style>
/* ══════════════════════════════════════════════════════════════
   RISK SCORE STYLES
   ══════════════════════════════════════════════════════════════ */
.table th {
    border-bottom: 2px solid #E5E7EB;
    font-weight: 600;
    color: var(--dark-color, #1A1A2E);
    padding: 16px 12px;
    vertical-align: middle;
}

.table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.table-hover tbody tr:hover {
    background-color: #F8FAFC;
    transition: background-color 0.2s ease;
}

.country-flag-img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #E5E7EB;
}

.country-flag-placeholder {
    display: inline-block;
    width: 28px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #E5E7EB;
    background: #F3F4F6;
    font-size: 12px;
}

.custom-risk-badge {
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .table-responsive {
        font-size: 13px;
    }
}
</style>
@endpush