@extends('layouts.app')

@section('title', 'Warta dan Tata Ibadah')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
            <i class="fas fa-file-pdf text-red-600 mr-2"></i>
            Warta dan Tata Ibadah
        </h1>
        
        <!-- 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.index', ['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.index', ['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.index', ['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.index', ['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

            <!-- Filter by Month -->
            <div class="mt-4">
                <form method="GET" action="{{ route('documents.index') }}" class="flex flex-wrap gap-2">
                    <input type="hidden" name="category" value="{{ $category }}">
                    @if($subcategory)
                    <input type="hidden" name="subcategory" value="{{ $subcategory }}">
                    @endif
                    <select name="year" 
                            class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Pilih Tahun</option>
                        @foreach($availableYears as $availableYear)
                        <option value="{{ $availableYear }}" {{ $year == $availableYear ? 'selected' : '' }}>
                            {{ $availableYear }}
                        </option>
                        @endforeach
                    </select>
                    <select name="month" 
                            class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Pilih Bulan</option>
                        <option value="1" {{ $month == '1' ? 'selected' : '' }}>Januari</option>
                        <option value="2" {{ $month == '2' ? 'selected' : '' }}>Februari</option>
                        <option value="3" {{ $month == '3' ? 'selected' : '' }}>Maret</option>
                        <option value="4" {{ $month == '4' ? 'selected' : '' }}>April</option>
                        <option value="5" {{ $month == '5' ? 'selected' : '' }}>Mei</option>
                        <option value="6" {{ $month == '6' ? 'selected' : '' }}>Juni</option>
                        <option value="7" {{ $month == '7' ? 'selected' : '' }}>Juli</option>
                        <option value="8" {{ $month == '8' ? 'selected' : '' }}>Agustus</option>
                        <option value="9" {{ $month == '9' ? 'selected' : '' }}>September</option>
                        <option value="10" {{ $month == '10' ? 'selected' : '' }}>Oktober</option>
                        <option value="11" {{ $month == '11' ? 'selected' : '' }}>November</option>
                        <option value="12" {{ $month == '12' ? 'selected' : '' }}>Desember</option>
                    </select>
                    <button type="submit" 
                            class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-filter mr-1"></i>Filter Bulan
                    </button>
                    @if($month && $year)
                    <a href="{{ route('documents.index', ['category' => $category, 'subcategory' => $subcategory]) }}" 
                       class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors">
                        <i class="fas fa-times mr-1"></i>Reset
                    </a>
                    @endif
                </form>
                @if($month && $year)
                <p class="text-sm text-gray-600 mt-2">
                    <i class="fas fa-info-circle mr-1"></i>
                    Menampilkan dokumen untuk: {{ \Carbon\Carbon::create($year, $month, 1)->locale('id')->translatedFormat('F Y') }}
                </p>
                @endif
            </div>
        </div>
    </div>

    @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">Dokumen akan muncul di sini setelah diupload oleh administrator.</p>
    </div>
    @endif

    <!-- Archive Section - Moved to Bottom -->
    @if(isset($archives) && $archives->count() > 0)
    <div class="bg-white rounded-lg shadow-md p-6 mt-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">
            <i class="fas fa-archive text-blue-600 mr-2"></i>Arsip Per Bulan
        </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">
                <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
</div>
@endsection