@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard Overview')

@section('content')

<!-- Stats Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
    @php
    $statCards = [
        ['value' => $stats['total_books'], 'label' => 'Total Buku', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253', 'color' => 'blue', 'bg' => 'bg-blue-50', 'iconBg' => 'bg-blue-100', 'iconColor' => 'text-blue-600', 'valueColor' => 'text-blue-700'],
        ['value' => $stats['total_categories'], 'label' => 'Total Kategori', 'icon' => 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z', 'color' => 'emerald', 'bg' => 'bg-emerald-50', 'iconBg' => 'bg-emerald-100', 'iconColor' => 'text-emerald-600', 'valueColor' => 'text-emerald-700'],
        ['value' => $stats['total_trainings'], 'label' => 'Pelatihan Aktif', 'icon' => 'M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347', 'color' => 'orange', 'bg' => 'bg-orange-50', 'iconBg' => 'bg-orange-100', 'iconColor' => 'text-orange-600', 'valueColor' => 'text-orange-700'],
        ['value' => $stats['draft_trainings'], 'label' => 'Draft Pelatihan', 'icon' => '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', 'color' => 'amber', 'bg' => 'bg-amber-50', 'iconBg' => 'bg-amber-100', 'iconColor' => 'text-amber-600', 'valueColor' => 'text-amber-700'],
    ];
    @endphp
    @foreach($statCards as $card)
    <div class="bg-white rounded-2xl p-5 border border-gray-100 hover:shadow-lg hover:shadow-gray-200/60 hover:-translate-y-0.5 transition-all duration-300">
        <div class="flex items-start justify-between mb-3">
            <div class="{{ $card['iconBg'] }} w-11 h-11 rounded-xl flex items-center justify-center">
                <svg class="w-5 h-5 {{ $card['iconColor'] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $card['icon'] }}"/></svg>
            </div>
        </div>
        <div class="text-3xl font-heading font-extrabold {{ $card['valueColor'] }}">{{ $card['value'] }}</div>
        <div class="text-gray-400 text-xs font-medium mt-1">{{ $card['label'] }}</div>
    </div>
    @endforeach
</div>

<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
    @php
    $actions = [
        ['route' => 'admin.books.create', 'label' => 'Tambah Buku Baru', 'desc' => 'Tambahkan buku ke katalog', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253', 'gradient' => 'from-blue-500 to-blue-600'],
        ['route' => 'admin.categories.create', 'label' => 'Tambah Kategori', 'desc' => 'Buat kategori baru', 'icon' => 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z', 'gradient' => 'from-emerald-500 to-emerald-600'],
        ['route' => 'admin.trainings.create', 'label' => 'Tambah Pelatihan', 'desc' => 'Program pelatihan baru', 'icon' => 'M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347', 'gradient' => 'from-orange-500 to-orange-600'],
    ];
    @endphp
    @foreach($actions as $action)
    <a href="{{ route($action['route']) }}"
       class="group bg-white border border-gray-100 rounded-2xl p-5 hover:shadow-lg hover:shadow-gray-200/60 hover:-translate-y-0.5 transition-all duration-300 flex items-center gap-4">
        <div class="w-12 h-12 bg-gradient-to-br {{ $action['gradient'] }} rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg group-hover:scale-105 transition-transform">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $action['icon'] }}"/></svg>
        </div>
        <div>
            <h3 class="font-heading font-bold text-gray-800 text-sm group-hover:text-gray-900">{{ $action['label'] }}</h3>
            <p class="text-gray-400 text-xs mt-0.5">{{ $action['desc'] }}</p>
        </div>
        <svg class="w-4 h-4 text-gray-300 ml-auto group-hover:text-gray-500 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
    </a>
    @endforeach
</div>

<!-- Recent Books -->
<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <div>
            <h2 class="font-heading font-bold text-gray-800">Buku Terbaru</h2>
            <p class="text-gray-400 text-xs mt-0.5">5 buku terakhir yang ditambahkan</p>
        </div>
        <a href="{{ route('admin.books.index') }}" class="text-sm text-[#ff6b2b] hover:text-[#ea5a1b] font-semibold flex items-center gap-1 transition-colors">
            Lihat Semua
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50/80">
                    <th class="text-left px-6 py-3 text-gray-400 font-semibold text-xs uppercase tracking-wider">Judul</th>
                    <th class="text-left px-6 py-3 text-gray-400 font-semibold text-xs uppercase tracking-wider">Kategori</th>
                    <th class="text-left px-6 py-3 text-gray-400 font-semibold text-xs uppercase tracking-wider">Status</th>
                    <th class="text-left px-6 py-3 text-gray-400 font-semibold text-xs uppercase tracking-wider">Tanggal</th>
                    <th class="text-left px-6 py-3 text-gray-400 font-semibold text-xs uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($recentBooks as $book)
                <tr class="hover:bg-gray-50/50 transition-colors">
                    <td class="px-6 py-3.5">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-12 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
                                <img src="{{ $book->cover_url }}" alt="" class="w-full h-full object-cover">
                            </div>
                            <span class="font-semibold text-gray-800">{{ Str::limit($book->title, 40) }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-3.5 text-gray-400">{{ $book->category->name ?? '-' }}</td>
                    <td class="px-6 py-3.5">
                        <div class="flex items-center gap-1.5">
                            @if($book->is_published)
                                <span class="inline-flex items-center gap-1 bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-lg text-xs font-semibold">
                                    <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
                                    Published
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 bg-gray-100 text-gray-500 px-2.5 py-1 rounded-lg text-xs font-semibold">
                                    <span class="w-1.5 h-1.5 bg-gray-400 rounded-full"></span>
                                    Draft
                                </span>
                            @endif
                            @if($book->is_featured)
                                <span class="inline-flex items-center bg-amber-50 text-amber-600 px-2 py-1 rounded-lg text-xs font-semibold">★</span>
                            @endif
                        </div>
                    </td>
                    <td class="px-6 py-3.5 text-gray-400 text-xs">{{ $book->created_at->format('d M Y') }}</td>
                    <td class="px-6 py-3.5">
                        <a href="{{ route('admin.books.edit', $book) }}"
                           class="inline-flex items-center gap-1 text-[#ff6b2b] hover:text-[#ea5a1b] text-xs font-semibold transition-colors">
                            <svg class="w-3.5 h-3.5" 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
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection