@extends('simaju.layouts.main')
@section('title', 'Upload Dokumen Guru')
@section('page-title', 'Upload Dokumen Guru')
@section('page-subtitle', 'Upload Promes, Prota, atau Analisis Kaldik')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-8">
        <form action="{{ route('simaju.dokumen-guru.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-6">
                <!-- Guru Selection -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Nama Guru <span class="text-red-500">*</span></label>
                    <select name="guru_id" required class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('guru_id') border-red-500 @enderror">
                        <option value="">-- Pilih Guru --</option>
                        @foreach($gurus as $g)
                            <option value="{{ $g->id }}" {{ old('guru_id') == $g->id ? 'selected' : '' }}>{{ $g->nama }}</option>
                        @endforeach
                    </select>
                    @error('guru_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Jenis Dokumen -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Jenis Dokumen <span class="text-red-500">*</span></label>
                    <select name="jenis_dokumen" required class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('jenis_dokumen') border-red-500 @enderror">
                        <option value="">-- Pilih Jenis --</option>
                        <option value="promes" {{ old('jenis_dokumen') == 'promes' ? 'selected' : '' }}>📘 Program Semester (Promes)</option>
                        <option value="prota" {{ old('jenis_dokumen') == 'prota' ? 'selected' : '' }}>📗 Program Tahunan (Prota)</option>
                        <option value="analisis_kaldik" {{ old('jenis_dokumen') == 'analisis_kaldik' ? 'selected' : '' }}>📊 Analisis Kalender Pendidikan</option>
                    </select>
                    @error('jenis_dokumen')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Nama Dokumen -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Nama Dokumen <span class="text-red-500">*</span></label>
                    <input type="text" name="nama_dokumen" value="{{ old('nama_dokumen') }}" required class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('nama_dokumen') border-red-500 @enderror" placeholder="Contoh: Promes Matematika Kelas X Semester 1">
                    @error('nama_dokumen')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- File Upload -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">File Dokumen <span class="text-red-500">*</span></label>
                    <input type="file" name="file" required accept=".pdf,.doc,.docx,.xls,.xlsx,.zip,.rar" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('file') border-red-500 @enderror">
                    <p class="text-xs text-gray-500 mt-1">Format: PDF, DOC, DOCX, XLS, XLSX, ZIP, RAR (Max: 10MB)</p>
                    @error('file')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Tahun Ajaran & Semester -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Tahun Ajaran <span class="text-red-500">*</span></label>
                        <input type="text" name="tahun_ajaran" value="{{ old('tahun_ajaran', $tahunSekarang . '/' . ($tahunSekarang + 1)) }}" required class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('tahun_ajaran') border-red-500 @enderror" placeholder="2023/2024">
                        @error('tahun_ajaran')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Semester</label>
                        <select name="semester" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                            <option value="">-- Pilih Semester --</option>
                            <option value="Ganjil" {{ old('semester') == 'Ganjil' ? 'selected' : '' }}>Ganjil</option>
                            <option value="Genap" {{ old('semester') == 'Genap' ? 'selected' : '' }}>Genap</option>
                        </select>
                    </div>
                </div>

                <!-- Keterangan -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Keterangan</label>
                    <textarea name="keterangan" rows="3" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all" placeholder="Keterangan tambahan (opsional)">{{ old('keterangan') }}</textarea>
                </div>

                <!-- Buttons -->
                <div class="flex gap-3 pt-4">
                    <a href="{{ route('simaju.dokumen-guru.index') }}" class="flex-1 px-4 py-3 border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all text-center font-bold">
                        Batal
                    </a>
                    <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all font-bold shadow-lg">
                        <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                        Upload Dokumen
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection