@extends('layout')

@section('title', 'Dashboard')

@section('content')
    <div class="relative p-1 mb-8 overflow-hidden border border-transparent shadow-sm rounded-xl bg-gradient-to-r from-primary-50 via-white to-primary-50">
        <div class="p-6 bg-white border-l-4 rounded-lg md:flex md:items-center md:justify-between border-primary-500">
            <div class="flex flex-col items-center md:flex-row md:items-center">

                <div class="flex items-center justify-center flex-shrink-0 w-20 h-20 mb-4 rounded-full md:mb-0 md:mr-4 bg-primary-100 text-primary-600">
                    @if (!empty($setting?->logo))
                        <img src="{{ asset('storage/' . $setting->logo) }}" 
                            alt="Logo Instansi" 
                            class="object-contain w-20 h-20">
                    @else
                        <div class="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full">
                            <i class="text-3xl text-gray-400 fas fa-image"></i>
                        </div>
                    @endif
                </div>

                <div class="text-center md:text-left">
                    <h2 class="text-2xl font-extrabold text-gray-900">
                        Selamat Datang di <span class="text-primary-700">{{ $setting->institution_name ?? 'Badan Riset dan Inovasi Daerah (BRIDA) Provinsi Jawa Timur' }}</span>
                    </h2>
                    <p class="mt-1 text-base font-bold text-primary-700">
                        Layanan Pengetahuan Terintegrasi Badan Riset dan Inovasi Daerah Provinsi Jawa Timur
                    </p>
                    <p class="mt-1 text-sm text-gray-600">
                        Temukan, kelola, dan bagikan koleksi penelitian & karya ilmiah dengan mudah di satu tempat yang aman dan modern.
                    </p>
                </div>
            </div>

            <div class="flex justify-center mt-4 md:mt-0 md:ml-4 md:justify-end">
                <a href="{{ route('browse.index') }}"
                class="inline-flex items-center px-4 py-2 text-sm font-semibold text-white transition-colors rounded-lg shadow bg-primary-600 hover:bg-primary-700">
                    Jelajahi Koleksi
                    <i class="ml-2 fas fa-arrow-right"></i>
                </a>
            </div>
        </div>

    </div>

    <div class="grid grid-cols-1 gap-5 mb-8 sm:grid-cols-2 lg:grid-cols-4">
        <div class="p-6 transition-all duration-200 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-primary-50">
                    <i class="text-4xl fas fa-project-diagram text-primary-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total Koleksi</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($totalProjects) }}</p>
                </div>
            </div>
            <div class="flex items-center mt-4 text-sm text-green-600">
                <i class="mr-1 fas fa-arrow-up"></i>
                <span>{{ $monthlyGrowth->isNotEmpty() ? $monthlyGrowth->last()['count'] : 0 }} bulan ini</span>
            </div>
        </div>

        <div class="p-6 transition-all duration-200 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-green-50">
                    <i class="text-4xl text-green-600 fas fa-tags"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Kategori</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($totalCategories) }}</p>
                </div>
            </div>
            <div class="flex items-center mt-4 text-sm text-blue-600">
                <i class="mr-1 fas fa-book-open"></i>
                <span>{{ $categoryStats->isNotEmpty() ? $categoryStats->first()['count'] : 0 }} penelitian</span>
            </div>
        </div>

        <div class="p-6 transition-all duration-200 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-purple-50">
                    <i class="text-4xl text-purple-600 fas fa-users"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Peneliti</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($totalAuthors) }}</p>
                </div>
            </div>
            <div class="flex items-center mt-4 text-sm text-purple-600">
                <i class="mr-1 fas fa-check-circle"></i>
                <span>Aktif dalam sistem</span>
            </div>
        </div>

        <div class="p-6 transition-all duration-200 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-amber-50">
                    <i class="text-4xl fas fa-users-cog text-amber-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Admin</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($totalUsers) }}</p>
                </div>
            </div>
            <div class="flex items-center mt-4 text-sm text-amber-600">
                <i class="mr-1 fas fa-user-check"></i>
                <span>Terdaftar di sistem</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div class="p-6 bg-white border border-gray-200 rounded-xl">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Pertumbuhan Koleksi</h3>
                    <p class="text-sm text-gray-600">Statistik penambahan penelitian 6 bulan terakhir</p>
                </div>
            </div>
            <div class="h-64">
                <canvas id="growthChart"></canvas>
            </div>
        </div>

        <div class="p-6 bg-white border border-gray-200 rounded-xl">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Distribusi Kategori</h3>
                    <p class="text-sm text-gray-600">Persebaran penelitian berdasarkan kategori</p>
                </div>
            </div>
            <div class="h-64">
                <canvas id="categoryChart"></canvas>
            </div>
        </div>

        <div class="p-6 bg-white border border-gray-200 rounded-xl lg:col-span-2">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Koleksi Terbaru</h3>
                    <p class="text-sm text-gray-600">Penelitian terbaru yang ditambahkan ke repositori</p>
                </div>
                <a href="{{ route('browse.index') }}" class="text-sm font-medium text-primary-700 hover:text-primary-800">
                    Lihat semua →
                </a>
            </div>
            <div class="space-y-4">
                @forelse($recentProjects as $p)
                <article class="w-full p-5 transition-all bg-white border border-gray-200 rounded-lg shadow-sm hover:border-blue-200 hover:shadow-md">
                    <a href="{{ route('browse.show', $p->id) }}" class="block mb-2 group">
                        <h3 class="text-lg font-semibold text-gray-900 transition-colors group-hover:text-blue-600">
                            {{ $p->title }}
                        </h3>
                    </a>

                    <div class="flex flex-wrap items-center gap-4 mb-2 text-xs text-gray-600">
                        <div class="flex items-center gap-1">
                            <i class="text-gray-400 fas fa-users"></i>
                            <span>{{ $p->authors->pluck('full_name')->implode(', ') }}</span>
                        </div>

                        <div class="flex items-center gap-1">
                            <i class="text-gray-400 fas fa-calendar"></i>
                            <span>{{ $p->publish_date?->format('Y') ?? 'Tidak tersedia' }}</span>
                        </div>

                        <div class="flex items-center gap-1">
                            <i class="text-gray-400 fas fa-folder"></i>
                            <span class="px-2 py-0.5 text-[11px] font-medium text-blue-700 bg-blue-50 rounded-full">
                                {{ $p->category->category_name }}
                            </span>
                        </div>
                    </div>

                    @if(!empty($p->abstract))
                        <p class="mb-3 text-sm text-justify text-gray-700 line-clamp-2">
                            {{ Str::limit(strip_tags($p->abstract), 230) }}
                        </p>
                    @endif

                    @if(!empty($p->keywords))
                        <div class="flex flex-wrap gap-1 mt-2">
                            @foreach($p->keywords as $keyword)
                                <span class="px-2 py-0.5 text-[11px] font-medium text-blue-700 bg-blue-50 border border-blue-100 rounded-full">
                                    #{{ $keyword }}
                                </span>
                            @endforeach
                        </div>
                    @endif

                </article>
                @empty
                <div class="py-10 text-center">
                    <h3 class="mb-2 text-base font-semibold text-gray-900">Tidak ada penelitian ditemukan</h3>
                    <p class="text-sm text-gray-600">Coba ubah filter pencarian atau kata kunci</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script nonce="{{ $cspNonce }}">
        window.monthlyGrowth = @json($monthlyGrowth);
        window.categoryStats = @json($categoryStats);
    </script>
@endpush