@extends('simaju.layouts.main')
@section('title', 'Tambah Absensi Manual')
@section('page-title', 'Tambah Absensi Manual')
@section('page-subtitle', 'Input Absensi Sakit, Izin, atau Alpha')

@section('content')
<div class="max-w-3xl mx-auto">
    <!-- Info Card -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 rounded-lg p-6 mb-6 shadow-md">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm font-semibold text-blue-800">
                    Formulir ini digunakan untuk mencatat absensi guru yang <span class="font-bold">sakit</span>, <span class="font-bold">izin</span>, atau <span class="font-bold">tanpa keterangan (alpha)</span>.
                </p>
                <p class="text-xs text-blue-600 mt-2">
                    Hanya admin yang dapat mengisi formulir ini.
                </p>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5">
            <h3 class="text-2xl font-bold text-white flex items-center">
                <svg class="w-7 h-7 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Form Absensi Manual
            </h3>
            <p class="text-blue-100 mt-1 text-sm">Isi data dengan lengkap dan akurat</p>
        </div>

        <form action="{{ route('simaju.absensi-guru.store-manual') }}" method="POST" class="p-6 md:p-8">
            @csrf

            <!-- Guru Selection -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-3">
                    Pilih 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-xl 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 $guru)
                        <option value="{{ $guru->id }}" {{ old('guru_id') == $guru->id ? 'selected' : '' }}>
                            {{ $guru->nama }} ({{ $guru->nip }})
                        </option>
                    @endforeach
                </select>
                @error('guru_id')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            <!-- Tanggal -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-3">
                    Tanggal <span class="text-red-500">*</span>
                </label>
                <input type="date" name="tanggal" value="{{ old('tanggal', $tanggal) }}" required class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('tanggal') border-red-500 @enderror">
                @error('tanggal')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            <!-- Status -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-3">
                    Status Absensi <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Sakit -->
                    <label class="relative flex items-center p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-purple-500 transition-all group @error('status_masuk') border-red-500 @enderror">
                        <input type="radio" name="status_masuk" value="sakit" required class="sr-only peer" {{ old('status_masuk') == 'sakit' ? 'checked' : '' }}>
                        <div class="w-full text-center peer-checked:text-purple-600">
                            <div class="w-12 h-12 mx-auto mb-2 bg-purple-100 rounded-full flex items-center justify-center group-hover:bg-purple-200 peer-checked:bg-purple-500">
                                <svg class="w-6 h-6 text-purple-600 peer-checked:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                </svg>
                            </div>
                            <p class="font-bold text-sm">Sakit</p>
                        </div>
                        <div class="absolute inset-0 border-2 border-purple-500 rounded-xl hidden peer-checked:block"></div>
                    </label>

                    <!-- Izin -->
                    <label class="relative flex items-center p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-blue-500 transition-all group">
                        <input type="radio" name="status_masuk" value="izin" required class="sr-only peer" {{ old('status_masuk') == 'izin' ? 'checked' : '' }}>
                        <div class="w-full text-center peer-checked:text-blue-600">
                            <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 peer-checked:bg-blue-500">
                                <svg class="w-6 h-6 text-blue-600 peer-checked:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                            </div>
                            <p class="font-bold text-sm">Izin</p>
                        </div>
                        <div class="absolute inset-0 border-2 border-blue-500 rounded-xl hidden peer-checked:block"></div>
                    </label>

                    <!-- Alpha / Tanpa Keterangan -->
                    <label class="relative flex items-center p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-red-500 transition-all group">
                        <input type="radio" name="status_masuk" value="alpha" required class="sr-only peer" {{ old('status_masuk') == 'alpha' ? 'checked' : '' }}>
                        <div class="w-full text-center peer-checked:text-red-600">
                            <div class="w-12 h-12 mx-auto mb-2 bg-red-100 rounded-full flex items-center justify-center group-hover:bg-red-200 peer-checked:bg-red-500">
                                <svg class="w-6 h-6 text-red-600 peer-checked:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </div>
                            <p class="font-bold text-sm">Alpha</p>
                            <p class="text-xs text-gray-500 mt-1">Tanpa Keterangan</p>
                        </div>
                        <div class="absolute inset-0 border-2 border-red-500 rounded-xl hidden peer-checked:block"></div>
                    </label>
                </div>
                @error('status_masuk')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            <!-- Keterangan -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-3">
                    Keterangan (Opsional)
                </label>
                <textarea name="keterangan" rows="4" placeholder="Contoh: Sakit demam, perlu istirahat 2 hari..." class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none @error('keterangan') border-red-500 @enderror">{{ old('keterangan') }}</textarea>
                <p class="text-xs text-gray-500 mt-2">Tuliskan detail tambahan jika diperlukan (maksimal 500 karakter)</p>
                @error('keterangan')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('simaju.absensi-guru.index') }}" class="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-100 font-semibold transition-all text-center">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Kembali
                </a>
                <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold transition-all shadow-lg transform hover:scale-105 text-center">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Simpan Absensi
                </button>
            </div>
        </form>
    </div>
</div>
@endsection