@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
    .select2-container .select2-selection--single { height: 42px; border-radius: 0.75rem; border-color: #e2e8f0; background-color: #f8fafc; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; font-size: 0.875rem; color: #334155; padding-left: 1rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
    .select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
</style>

<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="mb-6 flex items-center space-x-3">
        <a href="{{ route('admin.employees.index') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
            <svg class="w-6 h-6" 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>
        </a>
        <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Edit Data Karyawan</h2>
    </div>

    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-50 text-red-700 rounded-xl border border-red-100 text-sm font-bold">
            <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <form action="{{ route('admin.employees.update', $employee->id) }}" method="POST" enctype="multipart/form-data" class="p-6 sm:p-8 space-y-6">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">NIK <span class="text-red-500">*</span></label>
                    <input type="text" name="nik" value="{{ old('nik', $employee->nik) }}" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">No. KTP</label>
                    <input type="text" name="identity_number" value="{{ old('identity_number', $employee->identity_number) }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Inisial</label>
                    <input type="text" name="initial" value="{{ old('initial', $employee->initial) }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm uppercase">
                </div>

                <div class="lg:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Nama Depan <span class="text-red-500">*</span></label>
                    <input type="text" name="first_name" value="{{ old('first_name', $employee->first_name) }}" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Nama Belakang</label>
                    <input type="text" name="last_name" value="{{ old('last_name', $employee->last_name) }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>

                <div class="lg:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Email Perusahaan <span class="text-red-500">*</span></label>
                    <input type="email" name="email" value="{{ old('email', $employee->email) }}" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">No. HP / WA</label>
                    <input type="text" name="phone" value="{{ old('phone', $employee->phone) }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Jenis Kelamin <span class="text-red-500">*</span></label>
                    <select name="gender" class="select2 w-full text-sm" required>
                        <option value="L" {{ old('gender', $employee->gender) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                        <option value="P" {{ old('gender', $employee->gender) == 'P' ? 'selected' : '' }}>Perempuan</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Tanggal Lahir</label>
                    <input type="date" name="date_of_birth" value="{{ old('date_of_birth', $employee->date_of_birth ? \Carbon\Carbon::parse($employee->date_of_birth)->format('Y-m-d') : '') }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Tanggal Bergabung</label>
                    <input type="date" name="join_date" value="{{ old('join_date', $employee->join_date ? \Carbon\Carbon::parse($employee->join_date)->format('Y-m-d') : '') }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Departemen <span class="text-red-500">*</span></label>
                    <select name="department_id" id="deptSelect" class="select2 w-full text-sm" required>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id', $employee->department_id) == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan <span class="text-red-500">*</span></label>
                    <select name="position_id" id="posSelect" class="select2 w-full text-sm" required>
                        <option value="">-- Pilih Jabatan --</option>
                    </select>
                </div>

                <div class="bg-slate-50 p-4 border border-slate-200 rounded-xl">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Hak Akses Sistem Utama <span class="text-red-500">*</span></label>
                    <select name="role" class="select2 w-full text-sm" required>
                        <option value="karyawan" {{ $employee->hasRole('admin') ? '' : 'selected' }}>Trainee (Karyawan)</option>
                        @if(auth()->user()->hasRole('superadmin'))
                            <option value="admin" {{ $employee->hasRole('admin') ? 'selected' : '' }}>Administrator</option>
                        @endif
                    </select>
                    
                    <label class="flex items-center space-x-2 cursor-pointer mt-4">
                        <input type="checkbox" name="is_trainer" value="1" {{ $employee->hasRole('trainer') ? 'checked' : '' }} class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500">
                        <span class="text-sm font-semibold text-slate-700">Tetapkan sebagai Trainer / Pemateri</span>
                    </label>
                </div>

                <div class="bg-slate-50 p-4 border border-slate-200 rounded-xl">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Status Karyawan <span class="text-red-500">*</span></label>
                    <label class="flex items-center space-x-2 cursor-pointer mt-2">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $employee->is_active ?? true) ? 'checked' : '' }} class="w-4 h-4 text-emerald-600 border-slate-300 rounded focus:ring-emerald-500">
                        <span class="text-sm font-semibold text-slate-700">Akun Aktif</span>
                    </label>
                    <p class="text-[11px] text-slate-500 mt-2">Hilangkan centang jika karyawan resign.</p>
                </div>
            </div>

            <div class="border-t border-slate-100 pt-6 mt-6">
                <h3 class="text-sm font-bold text-slate-700 mb-1">Materi SOP / Training Matrix</h3>
                <p class="text-xs text-slate-500 mb-4">Perbarui materi dan status pelatihan untuk karyawan ini.</p>

                <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 max-h-[400px] overflow-y-auto">
                    <table class="w-full text-left text-sm text-slate-600">
                        <thead class="border-b border-slate-200 text-slate-500 uppercase text-xs sticky top-0 bg-slate-50">
                            <tr>
                                <th class="py-2 w-12 text-center">Pilih</th>
                                <th class="py-2">Nama Materi / Dokumen SOP</th>
                                <th class="py-2 w-48 text-center">Status Training</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            @foreach($subjects as $subject)
                            @php
                                $hasTraining = $employee->trainings->contains('id', $subject->id);
                                $currentStatus = $hasTraining ? $employee->trainings->find($subject->id)->pivot->status : 'belum_training';
                            @endphp
                            <tr class="hover:bg-white transition-colors">
                                <td class="py-3 text-center">
                                    <input type="checkbox" name="trainings[{{ $subject->id }}][selected]" value="1" 
                                           {{ $hasTraining ? 'checked' : '' }}
                                           class="w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
                                </td>
                                <td class="py-3 font-bold text-slate-700">{{ $subject->name }}</td>
                                <td class="py-3">
                                    <select name="trainings[{{ $subject->id }}][status]" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs font-bold focus:ring-blue-500">
                                        <option value="belum_training" class="text-amber-600" {{ $currentStatus == 'belum_training' ? 'selected' : '' }}>Belum Training</option>
                                        <option value="passed" class="text-emerald-600" {{ $currentStatus == 'passed' ? 'selected' : '' }}>Lulus (Passed)</option>
                                    </select>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-slate-200">
                <h3 class="text-lg font-bold text-slate-800 mb-2">Training Matrix & Kompetensi</h3>
                <p class="text-sm text-slate-500 mb-4">Pilih materi/SOP wajib untuk karyawan ini dan perbarui status pelatihannya.</p>

                <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 max-h-[400px] overflow-y-auto">
                    <table class="w-full text-left text-sm text-slate-600">
                        <thead class="border-b border-slate-200 text-slate-500 uppercase text-xs sticky top-0 bg-slate-50">
                            <tr>
                                <th class="py-2 w-12 text-center">Pilih</th>
                                <th class="py-2">Nama Materi / Dokumen SOP</th>
                                <th class="py-2 w-48 text-center">Status Training</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            @foreach($subjects as $subject)
                            @php
                                // Mengecek apakah relasi dengan pivot sudah ada di database
                                $hasTraining = $employee->trainings->contains('id', $subject->id);
                                $currentStatus = $hasTraining ? $employee->trainings->find($subject->id)->pivot->status : 'belum_training';
                            @endphp
                            <tr class="hover:bg-white transition-colors">
                                <td class="py-3 text-center">
                                    <input type="checkbox" name="trainings[{{ $subject->id }}][selected]" value="1" 
                                           {{ $hasTraining ? 'checked' : '' }}
                                           class="w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
                                </td>
                                <td class="py-3 font-bold text-slate-700">{{ $subject->name }}</td>
                                <td class="py-3">
                                    <select name="trainings[{{ $subject->id }}][status]" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs font-bold focus:ring-blue-500">
                                        <option value="belum_training" class="text-amber-600" {{ $currentStatus == 'belum_training' ? 'selected' : '' }}>Belum Training</option>
                                        <option value="passed" class="text-emerald-600" {{ $currentStatus == 'passed' ? 'selected' : '' }}>Lulus (Passed)</option>
                                    </select>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="border-t border-slate-100 pt-6 mt-6">
                <label class="block text-sm font-bold text-slate-700 mb-2">Reset Password (Opsional)</label>
                <input type="password" name="password" placeholder="Kosongkan jika tidak ingin mengubah password" class="w-full md:w-1/2 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm">
            </div>

            <div class="pt-6 flex justify-end space-x-3 border-t border-slate-100 mt-8">
                <a href="{{ route('admin.employees.index') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
                <button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md transition-all">Perbarui Karyawan</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.select2').select2({ width: '100%' });

        const mapping = @json($deptPosMapping ?? []);
        const posSelect = $('#posSelect');
        const deptSelect = $('#deptSelect');
        const defaultPos = "{{ old('position_id', $employee->position_id) }}";

        function updatePositionDropdown() {
            let deptId = deptSelect.val();
            posSelect.empty();
            posSelect.append(new Option('-- Pilih Jabatan --', ''));
            
            if (deptId && mapping[deptId]) {
                mapping[deptId].forEach(function(pos) {
                    let selected = (pos.id == defaultPos);
                    posSelect.append(new Option(pos.name, pos.id, false, selected));
                });
            } else {
                @foreach($positions as $p)
                    posSelect.append(new Option("{{ $p->name }}", "{{ $p->id }}", false, ("{{ $p->id }}" == defaultPos)));
                @endforeach
            }
            posSelect.trigger('change.select2');
        }

        deptSelect.on('change', updatePositionDropdown);
        updatePositionDropdown();
    });
</script>
@endsection