@extends('admin.layouts.main')
@section('title', 'Dashboard')

@push('styles')
<style>
.quick-action { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--c-50); border:1px solid var(--c-200); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--c-700); transition:var(--tr); cursor:pointer; text-decoration:none; }
.quick-action:hover { background:var(--white); border-color:var(--blue); color:var(--blue); box-shadow:0 4px 12px rgba(37,99,235,.1); }
.quick-action i { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.country-bar { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--c-100); }
.country-bar:last-child { border-bottom:none; }
.cbar-flag { font-size:18px; line-height:1; }
.cbar-name { font-size:13px; font-weight:600; color:var(--c-900); flex:1; }
.cbar-count { font-size:12px; color:var(--c-500); }
.cbar-track { flex:1; height:6px; background:var(--c-100); border-radius:100px; overflow:hidden; }
.cbar-fill  { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--blue),#6366f1); }
</style>
@endpush

@section('content')
<div class="page-header d-flex align-items-center justify-content-between">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <p class="page-sub">Selamat datang kembali, <strong>{{ auth()->user()->name ?? 'Admin' }}</strong> · {{ now()->format('l, d F Y') }}</p>
    </div>
    <a href="{{ route('frontend.index') }}" target="_blank" class="btn-adm btn-primary-adm btn-adm-sm">
        <i class="fas fa-external-link-alt"></i> Lihat Website
    </a>
</div>

{{-- ===== STAT CARDS ===== --}}
<div class="row g-3 mb-4">
    @php $stats = [
        ['icon'=>'fas fa-briefcase','bg'=>'#dbeafe','color'=>'#2563eb','num'=>$totalJobs,'label'=>'Total Lowongan','sub'=>$activeJobs.' aktif','sub_class'=>'up','sub_icon'=>'fas fa-check-circle'],
        ['icon'=>'fas fa-book-open','bg'=>'#dcfce7','color'=>'#16a34a','num'=>$totalPrograms,'label'=>'Program Pelatihan','sub'=>\App\Models\TrainingProgram::where('is_active',true)->count().' aktif','sub_class'=>'up','sub_icon'=>'fas fa-check-circle'],
        ['icon'=>'fas fa-newspaper','bg'=>'#fffbeb','color'=>'#d97706','num'=>$totalBlogArticles,'label'=>'Artikel Blog','sub'=>\App\Models\BlogArticle::where('is_published',false)->count().' draft','sub_class'=>'warn','sub_icon'=>'fas fa-clock'],
        ['icon'=>'fas fa-star','bg'=>'#f5f3ff','color'=>'#7c3aed','num'=>$totalTestimonials,'label'=>'Testimoni','sub'=>\App\Models\Testimonial::where('is_approved',true)->count().' disetujui','sub_class'=>'up','sub_icon'=>'fas fa-check-circle'],
        ['icon'=>'fas fa-images','bg'=>'#fef2f2','color'=>'#dc2626','num'=>$totalSliders,'label'=>'Slider / Banner','sub'=>\App\Models\Slider::where('is_active',true)->count().' aktif','sub_class'=>'up','sub_icon'=>'fas fa-check-circle'],
        ['icon'=>'fas fa-exclamation-triangle','bg'=>'#fef3c7','color'=>'#d97706','num'=>$expiringJobs,'label'=>'Lowongan Expiring','sub'=>'Deadline ≤ 7 hari','sub_class'=>'warn','sub_icon'=>'fas fa-clock'],
    ]; @endphp
    @foreach($stats as $s)
    <div class="col-xl-2 col-lg-4 col-md-6 col-6">
        <div class="stat-card">
            <div class="stat-card-icon" style="background:{{ $s['bg'] }};">
                <i class="{{ $s['icon'] }}" style="color:{{ $s['color'] }};"></i>
            </div>
            <div>
                <div class="stat-card-num">{{ $s['num'] }}</div>
                <div class="stat-card-label">{{ $s['label'] }}</div>
                <div class="stat-card-change {{ $s['sub_class'] }}">
                    <i class="{{ $s['sub_icon'] }}" style="font-size:10px;"></i> {{ $s['sub'] }}
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-4 mb-4">
    {{-- ===== QUICK ACTIONS ===== --}}
    <div class="col-lg-4">
        <div class="adm-card h-100">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-bolt"></i> Aksi Cepat</div>
            </div>
            <div class="adm-card-body" style="display:flex;flex-direction:column;gap:8px;">
                <a href="{{ route('admin.jobs.create') }}" class="quick-action">
                    <i style="background:#dbeafe;color:#2563eb;" class="fas fa-plus-circle"></i> Tambah Lowongan Baru
                </a>
                <a href="{{ route('admin.programs.create') }}" class="quick-action">
                    <i style="background:#dcfce7;color:#16a34a;" class="fas fa-book-open"></i> Tambah Program Baru
                </a>
                <a href="{{ route('admin.blog.create') }}" class="quick-action">
                    <i style="background:#fffbeb;color:#d97706;" class="fas fa-pen"></i> Tulis Artikel Blog
                </a>
                <a href="{{ route('admin.testimonials.create') }}" class="quick-action">
                    <i style="background:#f5f3ff;color:#7c3aed;" class="fas fa-star"></i> Tambah Testimoni
                </a>
                <a href="{{ route('admin.sliders.create') }}" class="quick-action">
                    <i style="background:#fef2f2;color:#dc2626;" class="fas fa-images"></i> Upload Slider Baru
                </a>
                <a href="{{ route('admin.contact.index') }}" class="quick-action">
                    <i style="background:#f0fdfa;color:#0d9488;" class="fas fa-address-book"></i> Edit Info Kontak
                </a>
            </div>
        </div>
    </div>

    {{-- ===== JOBS BY COUNTRY ===== --}}
    <div class="col-lg-4">
        <div class="adm-card h-100">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-globe"></i> Lowongan per Negara</div>
                <a href="{{ route('admin.jobs.index') }}" class="btn-adm btn-outline-adm btn-adm-sm">Lihat Semua</a>
            </div>
            <div class="adm-card-body">
                @php
                    $flags = ['Malaysia'=>'🇲🇾','Singapore'=>'🇸🇬','Taiwan'=>'🇹🇼','Hong Kong'=>'🇭🇰','Jepang'=>'🇯🇵'];
                    $maxCount = $jobsByCountry->max() ?: 1;
                @endphp
                @foreach($jobsByCountry as $country => $count)
                <div class="country-bar">
                    <span class="cbar-flag">{{ $flags[$country] ?? '🌐' }}</span>
                    <span class="cbar-name">{{ $country }}</span>
                    <div class="cbar-track">
                        <div class="cbar-fill" style="width:{{ ($count/$maxCount)*100 }}%;"></div>
                    </div>
                    <span class="cbar-count">{{ $count }}</span>
                </div>
                @endforeach
                @if($jobsByCountry->isEmpty())
                <p style="color:var(--c-400);font-size:13px;text-align:center;padding:16px 0;">Belum ada data</p>
                @endif
            </div>
        </div>
    </div>

    {{-- ===== RECENT JOBS ===== --}}
    <div class="col-lg-4">
        <div class="adm-card h-100">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-briefcase"></i> Lowongan Terbaru</div>
                <a href="{{ route('admin.jobs.index') }}" class="btn-adm btn-outline-adm btn-adm-sm">Semua</a>
            </div>
            <div class="adm-card-body" style="padding:0;">
                @foreach($recentJobs as $job)
                <div style="padding:12px 20px;border-bottom:1px solid var(--c-100);display:flex;align-items:center;gap:10px;">
                    <div style="font-size:18px;line-height:1;">
                        @if($job->country_code=='MY')🇲🇾@elseif($job->country_code=='SG')🇸🇬@elseif($job->country_code=='TW')🇹🇼@elseif($job->country_code=='HK')🇭🇰@elseif($job->country_code=='JP')🇯🇵@else🌐@endif
                    </div>
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:13px;font-weight:700;color:var(--c-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $job->title }}</div>
                        <div style="font-size:11.5px;color:var(--c-500);">{{ $job->company_name }}</div>
                    </div>
                    <span class="abadge {{ $job->is_active ? 'abadge-green' : 'abadge-gray' }}" style="font-size:10px;">
                        {{ $job->is_active ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </div>
                @endforeach
                @if($recentJobs->isEmpty())
                <p style="color:var(--c-400);font-size:13px;text-align:center;padding:20px;">Belum ada lowongan</p>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ===== RECENT BLOG ===== --}}
<div class="adm-card">
    <div class="adm-card-header">
        <div class="adm-card-title"><i class="fas fa-newspaper"></i> Artikel Blog Terbaru</div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.blog.create') }}" class="btn-adm btn-primary-adm btn-adm-sm"><i class="fas fa-plus"></i> Tulis Baru</a>
            <a href="{{ route('admin.blog.index') }}" class="btn-adm btn-outline-adm btn-adm-sm">Lihat Semua</a>
        </div>
    </div>
    <div style="overflow-x:auto;">
        <table class="adm-table">
            <thead>
                <tr>
                    <th>Judul Artikel</th>
                    <th>Penulis</th>
                    <th>Status</th>
                    <th>Tanggal</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentBlogs as $article)
                <tr>
                    <td>
                        <div style="font-weight:600;color:var(--c-900);">{{ Str::limit($article->title, 55) }}</div>
                    </td>
                    <td>{{ $article->author ?? 'Admin' }}</td>
                    <td>
                        @if($article->is_published)
                            <span class="abadge abadge-green"><i class="fas fa-check" style="font-size:9px;"></i> Published</span>
                        @else
                            <span class="abadge abadge-amber"><i class="fas fa-clock" style="font-size:9px;"></i> Draft</span>
                        @endif
                    </td>
                    <td style="color:var(--c-500);font-size:12.5px;">{{ $article->created_at->format('d M Y') }}</td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-1">
                            <a href="{{ route('admin.blog.edit', $article->id) }}" class="btn-icon btn-icon-edit" title="Edit"><i class="fas fa-edit"></i></a>
                            <form action="{{ route('admin.blog.destroy', $article->id) }}" method="POST" id="del-blog-{{ $article->id }}">
                                @csrf @method('DELETE')
                                <button type="button" class="btn-icon btn-icon-del" onclick="confirmDelete('del-blog-{{ $article->id }}')" title="Hapus"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" style="text-align:center;color:var(--c-400);padding:24px;">Belum ada artikel</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection