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

@section('content')
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-8">
    <a href="{{ route('admin.posts.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['berita'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Berita</div>
    </a>

    <a href="{{ route('admin.posts.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['pengumuman'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Pengumuman</div>
    </a>

    <a href="{{ route('admin.potensi.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['potensi'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Potensi</div>
    </a>

    <a href="{{ route('admin.galeri.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['galeri'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Galeri</div>
    </a>

    <a href="{{ route('admin.perangkat.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['perangkat'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Perangkat</div>
    </a>

    <a href="{{ route('admin.peta.index') }}" class="card-admin hover:border-secondary border-2 border-transparent transition-all text-center group">
        <div class="w-10 h-10 bg-blue-50 text-secondary rounded-xl flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
        </div>
        <div class="text-2xl font-bold text-primary">{{ $stats['peta'] }}</div>
        <div class="text-xs text-gray-500 mt-0.5">Titik Peta</div>
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- Quick Links --}}
    <div class="card-admin">
        <h2 class="font-semibold text-text-main mb-4">Aksi Cepat</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <a href="{{ route('admin.posts.create') }}" class="btn-primary text-sm justify-center py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Tambah Berita
            </a>
            <a href="{{ route('admin.potensi.create') }}" class="btn-secondary text-sm justify-center py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Tambah Potensi
            </a>
            <a href="{{ route('admin.galeri.create') }}" class="btn-secondary text-sm justify-center py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                Upload Galeri
            </a>
            <a href="{{ route('admin.perangkat.create') }}" class="btn-secondary text-sm justify-center py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Tambah Perangkat
            </a>
            <a href="{{ route('admin.village-profile.edit') }}" class="btn-secondary text-sm justify-center py-2.5 sm:col-span-2">
                <svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002 2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                Edit Profil Desa
            </a>
        </div>
    </div>

    {{-- Artikel Terbaru --}}
    <div class="card-admin">
        <h2 class="font-semibold text-text-main mb-4">Artikel Terbaru</h2>
        @if($latestPosts->count() > 0)
        <div class="space-y-3">
            @foreach($latestPosts as $post)
            <div class="flex items-center justify-between gap-3 p-2.5 hover:bg-gray-50 rounded-xl transition-colors">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-text-main truncate">{{ $post->judul }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ $post->tipe === 'berita' ? 'Berita' : 'Pengumuman' }} — {{ $post->tanggal->format('d/m/Y') }}</p>
                </div>
                <a href="{{ route('admin.posts.edit', $post->id) }}" class="text-xs text-secondary hover:underline flex-shrink-0 font-semibold px-2 py-1 bg-blue-50 rounded-lg">Edit</a>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-sm text-gray-400">Belum ada artikel.</p>
        @endif
    </div>
</div>
@endsection
