@extends('layout')

@section('title', 'Browse')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="mb-6 text-center">
        <h1 class="text-2xl font-semibold text-gray-900">Research Repository</h1>
        <p class="text-sm text-gray-600">Koleksi penelitian dan karya ilmiah dalam repositori</p>
    </div>

    <div class="px-4">
        <!-- Filter Section -->
        <div class="p-4 mb-6 bg-white border border-gray-200 rounded-lg shadow-sm">
            <form method="GET" action="{{ route('browse.index') }}" class="flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
                <div class="relative flex-1">
                    <input type="text" name="q" placeholder="Cari Judul, Penulis, atau Kata Kunci"
                        class="w-full py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        value="{{ request('q','') }}">
                    <svg class="absolute w-5 h-5 text-gray-400 left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" />
                    </svg>
                </div>

                <select name="category" class="w-full py-2 text-sm border border-gray-300 rounded-lg md:w-44 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Kategori</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->category_name }}
                        </option>
                    @endforeach
                </select>

                <select name="year" class="w-full py-2 text-sm border border-gray-300 rounded-lg md:w-36 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Tahun</option>
                    @foreach($years as $year)
                        <option value="{{ $year }}" {{ (string)request('year') === (string)$year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endforeach
                </select>

                <div class="flex justify-center gap-2">
                    <button type="submit"
                        class="px-5 py-2 text-sm font-medium text-white transition-colors bg-blue-600 rounded-lg hover:bg-blue-700">
                        Filter
                    </button>

                    @if(request()->hasAny(['q','category','year']))
                        <a href="{{ route('browse.index') }}"
                        class="px-5 py-2 text-sm font-medium text-gray-700 transition-colors bg-gray-200 rounded-lg hover:bg-gray-300">
                            Reset
                        </a>
                    @endif
                </div>

            </form>
        </div>

        <!-- Count -->
        <p class="mb-3 text-sm text-gray-600">
            Menampilkan <span class="font-semibold">{{ $projects->count() }}</span> dari
            <span class="font-semibold">{{ $projects->total() }}</span> penelitian
        </p>

        <!-- Research List -->
        <div class="space-y-4">
            @forelse($projects 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') ?? '-' }}</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 ?? 'Tanpa kategori' }}
                        </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">
                        @foreach($p->keywords as $keyword)
                            <span class="font-medium px-2 py-0.5 text-[11px] text-blue-700 bg-blue-50 border rounded-full">
                                #{{ $keyword }}
                            </span>
                        @endforeach
                    </div>
                @endif

            </article>
            @empty
            <div class="py-12 text-center text-gray-600">
                <i class="w-16 h-16 mx-auto mb-4 text-gray-400 fas fa-exclamation-triangle"></i>
                <h3 class="mb-2 text-lg font-medium">Belum ada penelitian ditemukan</h3>
                <p>Coba ubah filter pencarian atau kata kunci</p>
            </div>
            @endforelse
        </div>

        @if($projects->hasPages())
        <div class="mt-8">
            @include('partials.pagination', ['data' => $projects])
        </div>
        @endif
    </div>
</div>
@endsection