@extends('layouts.app')

@section('title', 'Tambah Pegawai')
@section('subtitle', 'Tambah data pegawai baru dengan akses sistem')

@section('breadcrumb')
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <a href="{{ route('employees.index') }}" class="text-sm font-medium text-secondary-500 hover:text-primary-600">Pegawai</a>
    </li>
    <li class="flex items-center">
        <i class="fas fa-chevron-right text-xs text-secondary-400 mx-2"></i>
        <span class="text-sm font-medium text-secondary-700">Tambah Baru</span>
    </li>
@endsection

@section('content')
<form action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" x-data="{ hasRetirement: false }">
    @csrf
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Left Column: Basic Info -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- Personal Information -->
            <div class="glass-card rounded-2xl p-6">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center mr-3">
                        <i class="fas fa-user text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-secondary-800">Informasi Pribadi</h3>
                        <p class="text-sm text-secondary-500">Data dasar pegawai</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">NIP <span class="text-rose-500">*</span></label>
                        <input type="text" name="nip" value="{{ old('nip') }}" required
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all @error('nip') border-rose-500 @enderror"
                               placeholder="Contoh: 198501012010011001">
                        @error('nip')<p class="mt-1 text-xs text-rose-500">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Nama Lengkap <span class="text-rose-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all @error('name') border-rose-500 @enderror"
                               placeholder="Nama lengkap pegawai">
                        @error('name')<p class="mt-1 text-xs text-rose-500">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Email <span class="text-rose-500">*</span></label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all @error('email') border-rose-500 @enderror"
                               placeholder="email@company.com">
                        @error('email')<p class="mt-1 text-xs text-rose-500">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Nomor Telepon</label>
                        <input type="text" name="phone" value="{{ old('phone') }}"
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all"
                               placeholder="08123456789">
                    </div>
                </div>
            </div>

            <!-- Employment Info -->
            <div class="glass-card rounded-2xl p-6">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
                        <i class="fas fa-briefcase text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-secondary-800">Informasi Kepegawaian</h3>
                        <p class="text-sm text-secondary-500">Data jabatan dan status</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Departemen <span class="text-rose-500">*</span></label>
                        <select name="department_id" required
                                class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all @error('department_id') border-rose-500 @enderror">
                            <option value="">Pilih Departemen</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                    {{ $dept->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('department_id')<p class="mt-1 text-xs text-rose-500">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Jabatan <span class="text-rose-500">*</span></label>
                        <input type="text" name="position" value="{{ old('position') }}" required
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all"
                               placeholder="Contoh: Staff IT">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Status Kepegawaian <span class="text-rose-500">*</span></label>
                        <select name="employment_status" required
                                class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                            <option value="permanent" {{ old('employment_status') == 'permanent' ? 'selected' : '' }}>Pegawai Tetap</option>
                            <option value="contract" {{ old('employment_status') == 'contract' ? 'selected' : '' }}>Kontrak</option>
                            <option value="intern" {{ old('employment_status') == 'intern' ? 'selected' : '' }}>Magang</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Tanggal Masuk <span class="text-rose-500">*</span></label>
                        <input type="date" name="join_date" value="{{ old('join_date') }}" required
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                    </div>
                </div>
            </div>

            <!-- Retirement Info -->
            <div class="glass-card rounded-2xl p-6 border-l-4 border-amber-400">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
                            <i class="fas fa-calendar-times text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-secondary-800">Informasi Pensiun/Resign</h3>
                            <p class="text-sm text-secondary-500">Data pengakhiran masa kerja</p>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" x-model="hasRetirement" class="sr-only peer">
                        <div class="w-11 h-6 bg-secondary-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
                        <span class="ml-3 text-sm font-medium text-secondary-700">Aktifkan</span>
                    </label>
                </div>

                <div x-show="hasRetirement" x-transition class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Tanggal Pensiun/Resign</label>
                        <input type="date" name="retirement_date" value="{{ old('retirement_date') }}"
                               class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Tipe Pengakhiran</label>
                        <select name="retirement_type"
                                class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all">
                            <option value="">Pilih Tipe</option>
                            <option value="pension" {{ old('retirement_type') == 'pension' ? 'selected' : '' }}>Pensiun</option>
                            <option value="resign" {{ old('retirement_type') == 'resign' ? 'selected' : '' }}>Resign</option>
                            <option value="termination" {{ old('retirement_type') == 'termination' ? 'selected' : '' }}>Pemutusan</option>
                            <option value="end_contract" {{ old('retirement_type') == 'end_contract' ? 'selected' : '' }}>Akhir Kontrak</option>
                        </select>
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-secondary-700 mb-2">Dokumen Pendukung (SK/Surat)</label>
                        <div class="relative">
                            <input type="file" name="retirement_document" accept=".pdf,.jpg,.jpeg,.png"
                                   class="w-full px-4 py-3 bg-white/60 border border-secondary-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                        </div>
                        <p class="mt-1 text-xs text-secondary-500">Format: PDF, JPG, PNG (Max 2MB)</p>
                    </div>
                </div>
            </div>

            <!-- Access Selection -->
            <div class="glass-card rounded-2xl p-6">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center mr-3">
                        <i class="fas fa-key text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-secondary-800">Hak Akses</h3>
                        <p class="text-sm text-secondary-500">Pilih akses yang diberikan ke pegawai</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($accessCatalogs->groupBy('category') as $category => $catalogs)
                        <div class="bg-white/40 rounded-xl p-4 border border-white/50">
                            <h4 class="text-sm font-semibold text-secondary-700 mb-3 capitalize flex items-center">
                                <span class="w-2 h-2 rounded-full bg-primary-400 mr-2"></span>
                                {{ $catalogs->first()->getCategoryLabelAttribute() }}
                            </h4>
                            <div class="space-y-2">
                                @foreach($catalogs as $catalog)
                                    <label class="flex items-center p-2 rounded-lg hover:bg-white/60 cursor-pointer transition-colors">
                                        <input type="checkbox" name="access_ids[]" value="{{ $catalog->id }}"
                                               {{ in_array($catalog->id, old('access_ids', [])) ? 'checked' : '' }}
                                               class="w-4 h-4 text-primary-600 bg-white border-secondary-300 rounded focus:ring-primary-500 focus:ring-2">
                                        <div class="ml-3">
                                            <p class="text-sm font-medium text-secondary-700">{{ $catalog->name }}</p>
                                            <p class="text-xs text-secondary-500">{{ $catalog->code }}</p>
                                        </div>
                                        @if($catalog->criticality_level === 'critical')
                                            <span class="ml-auto px-2 py-0.5 bg-rose-100 text-rose-600 text-xs rounded-full">Critical</span>
                                        @endif
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Right Column: Summary & Actions -->
        <div class="space-y-6">
            <div class="glass-card rounded-2xl p-6 sticky top-24">
                <h3 class="text-lg font-bold text-secondary-800 mb-4">Ringkasan</h3>
                
                <div class="space-y-4 mb-6">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-secondary-500">Status</span>
                        <span class="px-2 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-medium">Baru</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-secondary-500">Akses Dipilih</span>
                        <span class="font-medium text-secondary-700" x-text="document.querySelectorAll('input[name=\'access_ids[]\']:checked').length + ' item'">0 item</span>
                    </div>
                </div>

                <div class="space-y-3">
                    <button type="submit" class="w-full px-5 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 transition-all flex items-center justify-center">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Pegawai
                    </button>
                    <a href="{{ route('employees.index') }}" class="w-full px-5 py-3 bg-white hover:bg-secondary-50 text-secondary-700 font-medium rounded-xl border border-secondary-200 transition-all flex items-center justify-center">
                        <i class="fas fa-times mr-2"></i>
                        Batal
                    </a>
                </div>

                <div class="mt-6 pt-6 border-t border-secondary-100">
                    <p class="text-xs text-secondary-500 leading-relaxed">
                        <i class="fas fa-info-circle mr-1 text-primary-500"></i>
                        Pegawai akan otomatis masuk monitoring sistem setelah disimpan.
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
    // Update counter when checkboxes change
    document.querySelectorAll('input[name="access_ids[]"]').forEach(checkbox => {
        checkbox.addEventListener('change', updateCounter);
    });

    function updateCounter() {
        const count = document.querySelectorAll('input[name="access_ids[]"]:checked').length;
        document.querySelector('[x-text]').textContent = count + ' item';
    }
</script>
@endpush
@endsection