@extends('layout')

@section('title', $research->title)

@section('content')
<div class="p-6 bg-white shadow-lg rounded-xl">
    <div class="mb-8">
        <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900">{{ $research->title }}</h1>
        
        <div class="flex flex-wrap gap-6 mb-4 text-gray-600">
            <div class="flex items-center">
                <span class="text-sm font-medium">Kategori:</span>
                <span class="ml-2 text-gray-800">{{ $research->category->category_name ?? '-' }}</span>
            </div>
            <div class="flex items-center">
                <span class="text-sm font-medium">Diterbitkan:</span>
                <span class="ml-2 text-gray-800">
                    {{ $research->publish_date?->translatedFormat('d M Y') ?? '-' }}
                </span>
            </div>
        </div>
        
        <div class="inline-flex items-center px-3 py-1 text-sm text-blue-700 rounded-full bg-blue-50">
            <span class="w-2 h-2 mr-2 bg-blue-500 rounded-full"></span>
            Diterbitkan
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-1">
            <div class="p-6 bg-white border border-gray-200 rounded-lg">
                <h2 class="mb-4 text-lg font-semibold text-gray-900">Tim Penulis</h2>
                <ul class="space-y-3">
                    @foreach($research->authors as $author)
                        <li class="flex items-start">
                            <span class="inline-flex items-center justify-center w-6 h-6 mt-1 mr-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-full">
                                {{ $author->author_order }}
                            </span>
                            <div>
                                <p class="font-medium text-gray-800">{{ $author->full_name }}</p>
                                <p class="mt-1 text-sm text-gray-600">{{ $author->affiliation }}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="p-6 bg-white border border-gray-200 rounded-lg">
                <h2 class="mb-4 text-lg font-semibold text-gray-900">Abstrak</h2>
                @if(!empty($research->abstract))
                    <div class="prose prose-gray max-w-none">
                        <p class="leading-relaxed text-justify text-gray-700">
                            {{ $research->abstract }}
                        </p>
                    </div>
                @endif
            </div>
        </div>

        <div class="space-y-6 lg:col-span-2">
            <div class="p-6 bg-white border border-gray-200 rounded-lg">
                <h2 class="mb-4 text-lg font-semibold text-gray-900">Keywords</h2>
                <div class="flex flex-wrap gap-2">
                    @if(!empty($research->keywords))
                        <div class="flex flex-wrap gap-2">
                            @foreach($research->keywords as $keyword)
                                <span class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded-md">
                                    {{ $keyword }}
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
            
            <div class="p-6 bg-white border border-gray-200 rounded-lg">
                <h2 class="mb-4 text-lg font-semibold text-gray-900">Dokumen Penelitian</h2>

                @if($research->files && $research->files->count())
                    <div class="space-y-3">
                        @foreach($research->files as $file)
                            <div class="flex flex-col p-3 transition-colors border border-gray-200 rounded-lg hover:bg-gray-50">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="flex items-center">
                                        <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-100 rounded-lg">
                                            <span class="text-sm font-medium text-gray-600">
                                                @if(Str::endsWith($file->file_name, '.pdf'))
                                                    PDF
                                                @elseif(Str::endsWith($file->file_name, '.txt'))
                                                    TXT
                                                @else
                                                    DOC
                                                @endif
                                            </span>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">
                                                {{ $file->formatted_section }}
                                            </p>
                                        </div>
                                    </div>
                                    <a href="{{ asset('storage/research_files/' . $file->file_name) }}" 
                                    class="px-4 py-2 text-sm text-white transition-colors bg-blue-600 rounded-md hover:bg-blue-700"
                                    target="_blank">
                                        Preview
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="py-6 text-center border border-gray-200 rounded-lg">
                        <p class="text-gray-500">Tidak ada dokumen tersedia.</p>
                    </div>
                @endif
            </div>

        </div>
    </div>

    <div class="flex justify-center mt-8">
        <a href="{{ route('research.index') }}"
           class="px-6 py-2 mr-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
            Kembali
        </a>
    </div>
</div>
@endsection