@extends('simaju.layouts.main')
@section('title', 'Tambah Kokurikuler')
@section('page-title', 'Tambah Kokurikuler')
@section('page-subtitle', 'Tambahkan kokurikuler baru ke sistem')

@section('content')
<!-- Back Button -->
<div class="mb-6">
    <a href="{{ route('simaju.kokurikuler.index') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-300 shadow-sm hover:shadow-md text-gray-700">
        <i class="fas fa-arrow-left"></i>
        <span>Kembali ke Daftar</span>
    </a>
</div>

<!-- Main Form Card -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
    <!-- Header with Gradient -->
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 p-6">
        <div class="flex items-center gap-4 text-white">
            <div class="bg-white bg-opacity-20 rounded-xl p-3">
                <i class="fas fa-plus-square text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold">Form Tambah Kokurikuler</h2>
                <p class="text-emerald-100 text-sm mt-1">Lengkapi informasi kokurikuler dengan benar dan detail</p>
            </div>
        </div>
    </div>

    <!-- Form Body -->
    <form action="{{ route('simaju.kokurikuler.store') }}" method="POST" class="p-8">
        @csrf

        <!-- Section: Informasi Dasar -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Informasi Dasar</h3>
                    <p class="text-sm text-gray-500">Data utama kokurikuler</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Nama -->
                <div class="group md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Nama Kokurikuler <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-book-open text-gray-400"></i>
                        </div>
                        <input type="text" name="nama" value="{{ old('nama') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 @error('nama') border-red-500 @enderror" 
                               placeholder="Contoh: Pramuka, PMR, Patroli Keamanan" required>
                    </div>
                    @error('nama')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Jenis -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Jenis <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-tag text-gray-400"></i>
                        </div>
                        <select name="jenis" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 @error('jenis') border-red-500 @enderror" required>
                            <option value="">Pilih Jenis</option>
                            <option value="wajib" {{ old('jenis', 'wajib') == 'wajib' ? 'selected' : '' }}>Wajib</option>
                            <option value="pilihan" {{ old('jenis') == 'pilihan' ? 'selected' : '' }}>Pilihan</option>
                        </select>
                    </div>
                    @error('jenis')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Pembina -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Pembina
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-chalkboard-teacher text-gray-400"></i>
                        </div>
                        <select name="pembina_id" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 @error('pembina_id') border-red-500 @enderror">
                            <option value="">Pilih Pembina</option>
                            @foreach($gurus as $guru)
                            <option value="{{ $guru->id }}" {{ old('pembina_id') == $guru->id ? 'selected' : '' }}>{{ $guru->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    @error('pembina_id')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Status -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Status <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-toggle-on text-gray-400"></i>
                        </div>
                        <select name="status" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 @error('status') border-red-500 @enderror" required>
                            <option value="aktif" {{ old('status', 'aktif') == 'aktif' ? 'selected' : '' }}>✓ Aktif</option>
                            <option value="nonaktif" {{ old('status') == 'nonaktif' ? 'selected' : '' }}>⊗ Non-Aktif</option>
                        </select>
                    </div>
                    @error('status')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Tempat -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Tempat
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-map-marker-alt text-gray-400"></i>
                        </div>
                        <input type="text" name="tempat" value="{{ old('tempat') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 @error('tempat') border-red-500 @enderror" 
                               placeholder="Contoh: Aula, Lapangan">
                    </div>
                    @error('tempat')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Jadwal -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Jadwal Kegiatan</h3>
                    <p class="text-sm text-gray-500">Atur waktu pelaksanaan kokurikuler</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Hari -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Hari
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-calendar-day text-gray-400"></i>
                        </div>
                        <select name="hari" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-300 @error('hari') border-red-500 @enderror">
                            <option value="">Pilih Hari</option>
                            <option value="Senin" {{ old('hari') == 'Senin' ? 'selected' : '' }}>Senin</option>
                            <option value="Selasa" {{ old('hari') == 'Selasa' ? 'selected' : '' }}>Selasa</option>
                            <option value="Rabu" {{ old('hari') == 'Rabu' ? 'selected' : '' }}>Rabu</option>
                            <option value="Kamis" {{ old('hari') == 'Kamis' ? 'selected' : '' }}>Kamis</option>
                            <option value="Jumat" {{ old('hari') == 'Jumat' ? 'selected' : '' }}>Jumat</option>
                            <option value="Sabtu" {{ old('hari') == 'Sabtu' ? 'selected' : '' }}>Sabtu</option>
                        </select>
                    </div>
                    @error('hari')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Jam Mulai -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Jam Mulai
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-clock text-gray-400"></i>
                        </div>
                        <input type="time" name="jam_mulai" value="{{ old('jam_mulai') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-300 @error('jam_mulai') border-red-500 @enderror">
                    </div>
                    @error('jam_mulai')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>

                <!-- Jam Selesai -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Jam Selesai
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-clock text-gray-400"></i>
                        </div>
                        <input type="time" name="jam_selesai" value="{{ old('jam_selesai') }}" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-300 @error('jam_selesai') border-red-500 @enderror">
                    </div>
                    @error('jam_selesai')
                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-8"></div>

        <!-- Section: Deskripsi -->
        <div class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-file-alt"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Deskripsi Kegiatan</h3>
                    <p class="text-sm text-gray-500">Informasi detail tentang kokurikuler</p>
                </div>
            </div>

            <!-- Deskripsi -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Deskripsi
                </label>
                <textarea name="deskripsi" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all duration-300 @error('deskripsi') border-red-500 @enderror" 
                          placeholder="Jelaskan tentang kokurikuler ini...">{{ old('deskripsi') }}</textarea>
                @error('deskripsi')
                <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                    <i class="fas fa-exclamation-circle"></i>
                    {{ $message }}
                </p>
                @enderror
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center gap-4 pt-6 border-t border-gray-200">
            <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 font-semibold">
                <i class="fas fa-save"></i>
                <span>Simpan Kokurikuler</span>
            </button>
            <a href="{{ route('simaju.kokurikuler.index') }}" class="inline-flex items-center gap-2 px-8 py-3 bg-white border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-300 font-semibold">
                <i class="fas fa-times"></i>
                <span>Batal</span>
            </a>
        </div>
    </form>
</div>

<!-- Help Card -->
<div class="mt-6 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl p-6 border border-emerald-200">
    <div class="flex items-start gap-4">
        <div class="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
            <i class="fas fa-lightbulb"></i>
        </div>
        <div>
            <h4 class="font-bold text-emerald-900 mb-2">Tips Pengisian Form</h4>
            <ul class="text-sm text-emerald-800 space-y-1">
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-emerald-600 mt-0.5"></i>
                    <span>Pilih jenis kokurikuler sesuai sifatnya (Wajib atau Pilihan)</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-emerald-600 mt-0.5"></i>
                    <span>Tentukan pembina yang bertanggung jawab atas kegiatan ini</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-emerald-600 mt-0.5"></i>
                    <span>Atur jadwal hari dan jam pelaksanaan untuk memudahkan koordinasi</span>
                </li>
                <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-emerald-600 mt-0.5"></i>
                    <span>Buat deskripsi yang jelas agar siswa memahami tujuan kegiatan</span>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection