@extends('layout')

@section('title', 'Kategori')

@section('content')
<div class="p-2">
    {{-- Header --}}
    <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-2xl font-bold text-gray-900 md:text-3xl">Kategori Penelitian</h1>
            <p class="text-sm text-gray-600 md:text-base">Kelola kategori penelitian untuk organisasi data repository</p>
        </div>
        <a href="{{ route('research_categories.create') }}"
           class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white transition-colors bg-blue-600 rounded-lg md:px-6 md:py-3 md:mt-0 hover:bg-blue-700">
            <i class="mr-2 fas fa-plus-circle"></i> Tambah
        </a>
    </div>

    {{-- Flash success --}}
    @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

    {{-- Responsive Table --}}
    <div class="hidden overflow-x-auto bg-white border border-gray-200 rounded-lg shadow-sm md:block">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nama Kategori</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Deskripsi</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Jumlah Penelitian</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-right text-gray-500 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($categories as $c)
                <tr class="transition-colors duration-150 hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <span class="text-sm font-medium text-gray-900">{{ $c->category_name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-700">
                        <div class="max-w-xs truncate">{{ $c->description ?: '-' }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full">
                            {{ $c->projects_count }} penelitian
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
                        <div class="flex justify-end space-x-2">
                            <a href="{{ route('research_categories.edit',$c->id) }}"
                               class="inline-block px-4 py-2 text-sm font-medium text-blue-700 rounded-lg bg-blue-50 hover:bg-blue-100">
                                Edit
                            </a>
                            <form action="{{ route('research_categories.destroy',$c->id) }}"
                                method="POST"
                                class="inline js-delete-form"
                                data-confirm="Hapus kategori penelitian ini?">
                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                    class="inline-block px-4 py-2 text-sm font-medium text-red-700 rounded-lg bg-red-50 hover:bg-red-100">
                                    Hapus
                                </button>
                            </form>

                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                        <i class="mb-3 text-4xl text-gray-300 fas fa-folder-open"></i>
                        <p class="text-lg font-medium">Belum ada kategori penelitian</p>
                        <p class="mt-1 text-sm">Mulai dengan menambahkan kategori pertama Anda</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Card view for mobile --}}
    <div class="space-y-4 md:hidden">
        @forelse($categories as $c)
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="flex items-center mb-2">
                <h3 class="text-base font-semibold text-gray-900">{{ $c->category_name }}</h3>
            </div>
            <p class="mb-2 text-sm text-gray-600">{{ $c->description ?: '-' }}</p>
            <p class="inline-flex px-2 py-1 mb-3 text-xs text-blue-700 rounded-full bg-blue-50">
                {{ $c->projects_count }} penelitian
            </p>
            <div class="flex gap-2">
                <a href="{{ route('research_categories.edit',$c->id) }}"
                   class="flex-1 px-3 py-2 text-sm font-medium text-center text-blue-700 rounded-lg bg-blue-50 hover:bg-blue-100">Edit</a>
                <form action="{{ route('research_categories.destroy',$c->id) }}"
                    method="POST"
                    class="flex-1 js-delete-form"
                    data-confirm="Hapus kategori penelitian ini?">
                    @csrf
                    @method('DELETE')

                    <button type="submit"
                        class="w-full px-3 py-2 text-sm font-medium text-center text-red-700 rounded-lg bg-red-50 hover:bg-red-100">
                        Hapus
                    </button>
                </form>

            </div>
        </div>
        @empty
        <div class="py-12 text-center text-gray-600">
            <i class="w-12 h-12 mx-auto mb-3 text-gray-400 fas fa-folder-open"></i>
            <h3 class="text-base font-medium">Belum ada kategori penelitian</h3>
            <p class="text-sm">Tambahkan kategori pertama Anda</p>
        </div>
        @endforelse
    </div>

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