@extends('layouts.app')

@section('title', 'Arsip: ' . $monthName)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">
                    <i class="fas fa-archive text-blue-600 mr-2"></i>
                    Arsip: {{ $monthName }}
                </h1>
                <p class="text-gray-600">Dokumen untuk bulan {{ $monthName }}</p>
            </div>
            <a href="{{ route('documents.index', ['category' => $category]) }}" 
               class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
        
        <!-- Category Tabs -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6">
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('documents.archive', ['year' => $year, 'month' => $month, 'category' => 'warta_jemaat']) }}" 
                   class="px-4 py-2 rounded-lg font-medium transition-colors {{ $category === 'warta_jemaat' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                    <i class="fas fa-newspaper mr-2"></i>Warta Jemaat
                </a>
                <a href="{{ route('documents.archive', ['year' => $year, 'month' => $month, 'category' => 'tata_ibadah']) }}" 
                   class="px-4 py-2 rounded-lg font-medium transition-colors {{ $category === 'tata_ibadah' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                    <i class="fas fa-book-open mr-2"></i>Tata Ibadah
                </a>
            </div>

            @if($category === 'tata_ibadah' && isset($tataIbadahSubcategories) && $tataIbadahSubcategories->count() > 0)
            <div class="mt-4 flex flex-wrap gap-2">
                <a href="{{ route('documents.archive', ['year' => $year, 'month' => $month, 'category' => 'tata_ibadah']) }}" 
                   class="px-3 py-1.5 rounded-md text-sm transition-colors {{ !$subcategory ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                    Semua
                </a>
                @foreach($tataIbadahSubcategories as $sub)
                <a href="{{ route('documents.archive', ['year' => $year, 'month' => $month, 'category' => 'tata_ibadah', 'subcategory' => $sub->slug]) }}" 
                   class="px-3 py-1.5 rounded-md text-sm transition-colors {{ $subcategory === $sub->slug ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                    {{ $sub->name }}
                </a>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    <!-- Archive List -->
    @if(isset($archives) && $archives->count() > 0)
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-lg font-bold text-gray-900 mb-4">
            <i class="fas fa-calendar-alt text-blue-600 mr-2"></i>Arsip Lainnya
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            @foreach($archives as $archive)
            <a href="{{ route('documents.archive', ['year' => $archive->year, 'month' => $archive->month, 'category' => $category, 'subcategory' => $subcategory]) }}" 
               class="bg-gray-50 hover:bg-blue-50 border border-gray-200 rounded-lg p-3 transition-colors {{ $archive->year == $year && $archive->month == $month ? 'bg-blue-100 border-blue-500' : '' }}">
                <div class="text-sm font-semibold text-gray-900">
                    {{ \Carbon\Carbon::create($archive->year, $archive->month, 1)->locale('id')->translatedFormat('F Y') }}
                </div>
                <div class="text-xs text-gray-500 mt-1">
                    {{ $archive->count }} dokumen
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    @if($documents->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($documents as $document)
        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
            <div class="p-6">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
                            {{ $document->title }}
                        </h3>
                        <div class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
                                {{ $document->category_label }}
                            </span>
                            @if($document->subcategory)
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
                                {{ $document->subcategory_label }}
                            </span>
                            @endif
                        </div>
                        @if($document->document_date)
                        <div class="text-sm text-gray-600 mb-2">
                            <i class="fas fa-calendar-alt mr-1"></i>
                            {{ $document->document_date->locale('id')->translatedFormat('d F Y') }}
                        </div>
                        @endif
                    </div>
                    <i class="fas fa-file-pdf text-red-600 text-2xl"></i>
                </div>

                @if($document->description)
                <p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ $document->description }}</p>
                @endif

                <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
                    <span><i class="fas fa-eye mr-1"></i>{{ $document->views }} views</span>
                    <span><i class="fas fa-download mr-1"></i>{{ $document->downloads }} downloads</span>
                    <span><i class="fas fa-file mr-1"></i>{{ $document->formatted_file_size }}</span>
                </div>

                <div class="flex space-x-2">
                    <a href="{{ route('documents.share', $document->id) }}" 
                       class="flex-1 bg-purple-600 text-white text-center px-4 py-2 rounded-md hover:bg-purple-700 transition-colors">
                        <i class="fas fa-share-alt mr-1"></i>Share
                    </a>
                    <a href="{{ route('documents.show', $document->id) }}" 
                       class="flex-1 bg-blue-600 text-white text-center px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-eye mr-1"></i>Lihat
                    </a>
                    <a href="{{ route('documents.download', $document->id) }}" 
                       class="flex-1 bg-green-600 text-white text-center px-4 py-2 rounded-md hover:bg-green-700 transition-colors">
                        <i class="fas fa-download mr-1"></i>Download
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $documents->links() }}
    </div>
    @else
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <i class="fas fa-inbox text-gray-400 text-6xl mb-4"></i>
        <h3 class="text-xl font-semibold text-gray-700 mb-2">Belum ada dokumen</h3>
        <p class="text-gray-500">Tidak ada dokumen untuk bulan {{ $monthName }}.</p>
    </div>
    @endif
</div>
@endsection