@extends('layout')

@section('title','Data')

@section('content')
<div class="p-2">
    <div class="flex flex-col mb-8 text-center md:flex-row md:items-center md:justify-between md:text-left">
        <div>
            <h1 class="mb-2 text-3xl font-bold text-gray-900">Data Penelitian</h1>
            <p class="text-gray-600">Kelola data penelitian untuk repositori</p>
        </div>
        <a href="{{ route('research.create') }}"
           class="inline-flex items-center justify-center px-6 py-3 mt-4 text-sm font-medium text-white transition-colors bg-blue-600 rounded-lg md:mt-0 hover:bg-blue-700">
            <i class="mr-2 fas fa-plus-circle"></i> Tambah
        </a>
    </div>

    @if(session('success'))
        <div class="flex items-center p-4 mb-6 text-green-800 bg-green-100 border-l-4 border-green-500 rounded-lg">
            <i class="mr-3 text-green-500 fas fa-check-circle"></i>
            <span class="text-sm font-medium md:text-base">{{ session('success') }}</span>
        </div>
    @endif
    
    <div class="p-6 mb-8 bg-white border border-gray-200 rounded-lg shadow-sm">
        <form method="GET" action="{{ route('research.index') }}"
              class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="flex flex-wrap items-center w-full gap-4">

                <div class="relative flex-1 w-full sm:w-80">
                    <input type="text" name="q"
                           placeholder="Cari judul, penulis, atau kata kunci..."
                           class="w-full py-3 pl-12 pr-4 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ request('q','') }}">
                    <i class="absolute w-5 h-5 text-gray-400 fas fa-search left-4 top-3"></i>
                </div>

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

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

                <button type="submit"
                        class="w-full px-6 py-3 font-medium text-white transition-colors bg-blue-600 rounded-lg sm:w-auto hover:bg-blue-700">
                    Filter
                </button>

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

    <div class="flex items-center justify-between mb-3 text-xs text-gray-600">
        <span>Menampilkan {{ $projects->count() }} dari {{ $projects->total() }} penelitian</span>
    </div>

    <div class="space-y-6">
        @forelse($projects as $p)
            <div class="p-6 transition-all bg-white border border-gray-200 shadow-sm rounded-xl hover:shadow-md hover:border-blue-100">

                <div class="grid items-start gap-6 md:grid-cols-[1fr,auto]">

                    <article class="space-y-3">
                        <a href="{{ route('research.show', $p->id) }}" class="block 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 text-xs text-gray-600 gap-x-4 gap-y-2">
                            <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 ? \Carbon\Carbon::parse($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 ?? 'Tanpa kategori' }}
                                </span>
                            </div>
                        </div>

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

                        @if(!empty($p->keywords))
                            <div class="flex flex-wrap gap-1.5 pt-1">
                                @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>

                    <div class="flex flex-row justify-start gap-2 md:flex-col md:justify-center">
                        <a href="{{ route('research.show', $p->id) }}"
                           class="flex items-center justify-center gap-1 px-4 py-2 text-sm font-medium text-blue-700 transition rounded-lg bg-blue-50 hover:bg-blue-100">
                            Lihat
                        </a>

                        <a href="{{ route('research.edit', $p->id) }}"
                           class="flex items-center justify-center gap-1 px-4 py-2 text-sm font-medium text-green-700 transition rounded-lg bg-green-50 hover:bg-green-100">
                            Edit
                        </a>

                        <form action="{{ route('research.destroy', $p->id) }}"
                            method="POST"
                            class="js-delete-form"
                            data-confirm="Hapus penelitian ini?">
                            @csrf
                            @method('DELETE')

                            <button type="submit"
                                class="flex items-center justify-center w-full gap-1 px-4 py-2 text-sm font-medium text-red-700 transition rounded-lg bg-red-50 hover:bg-red-100">
                                Hapus
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @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>

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