@extends('layouts.app')

@section('title', 'Admin - Upload Dokumen Baru')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <a href="{{ route('admin.documents.index') }}" 
           class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
            <i class="fas fa-arrow-left mr-2"></i>Kembali ke Daftar Dokumen
        </a>
        <h1 class="text-3xl font-bold text-gray-900">
            <i class="fas fa-upload text-blue-600 mr-2"></i>Upload Dokumen Baru
        </h1>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
        <form action="{{ route('admin.documents.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="mb-6">
                <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                    Judul Dokumen <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                       id="title" 
                       name="title" 
                       value="{{ old('title') }}"
                       required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('title') border-red-500 @enderror">
                @error('title')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="document_date" class="block text-sm font-medium text-gray-700 mb-2">
                    Tanggal Dokumen <span class="text-red-500">*</span>
                </label>
                <input type="date" 
                       id="document_date" 
                       name="document_date" 
                       value="{{ old('document_date', date('Y-m-d')) }}"
                       required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('document_date') border-red-500 @enderror">
                @error('document_date')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="category" class="block text-sm font-medium text-gray-700 mb-2">
                    Kategori <span class="text-red-500">*</span>
                </label>
                <select id="category" 
                        name="category" 
                        required
                        onchange="toggleSubcategory()"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('category') border-red-500 @enderror">
                    <option value="">Pilih Kategori</option>
                    @foreach(isset($allowedCategories) && count($allowedCategories) ? $allowedCategories : [['value' => 'warta_jemaat', 'label' => 'Warta Jemaat'], ['value' => 'tata_ibadah', 'label' => 'Tata Ibadah']] as $cat)
                    <option value="{{ $cat['value'] }}" {{ old('category') === $cat['value'] ? 'selected' : '' }}>{{ $cat['label'] }}</option>
                    @endforeach
                </select>
                @error('category')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6" id="subcategoryContainer" style="display: none;">
                <label for="subcategory" class="block text-sm font-medium text-gray-700 mb-2">
                    Subkategori Tata Ibadah <span class="text-red-500">*</span>
                </label>
                <select id="subcategory" 
                        name="subcategory"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('subcategory') border-red-500 @enderror">
                    <option value="">Pilih Subkategori</option>
                    @foreach($tataIbadahSubcategories ?? [] as $sub)
                    <option value="{{ $sub->slug }}" {{ old('subcategory') === $sub->slug ? 'selected' : '' }}>{{ $sub->name }}</option>
                    @endforeach
                </select>
                @error('subcategory')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="file" class="block text-sm font-medium text-gray-700 mb-2">
                    File PDF <span class="text-red-500">*</span>
                </label>
                <input type="file" 
                       id="file" 
                       name="file" 
                       accept=".pdf"
                       required
                       class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('file') border-red-500 @enderror">
                <p class="text-sm text-gray-500 mt-1">Maksimal 10MB, format PDF</p>
                @error('file')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                    Deskripsi (Opsional)
                </label>
                <textarea id="description" 
                          name="description" 
                          rows="4"
                          class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                @error('description')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end space-x-4">
                <a href="{{ route('admin.documents.index') }}" 
                   class="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition-colors">
                    Batal
                </a>
                <button type="submit" 
                        class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-upload mr-2"></i>Upload Dokumen
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function toggleSubcategory() {
    const category = document.getElementById('category').value;
    const subcategoryContainer = document.getElementById('subcategoryContainer');
    const subcategory = document.getElementById('subcategory');
    
    if (category === 'tata_ibadah') {
        subcategoryContainer.style.display = 'block';
        subcategory.required = true;
    } else {
        subcategoryContainer.style.display = 'none';
        subcategory.required = false;
        subcategory.value = '';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleSubcategory();
});
</script>
@endpush
@endsection