@extends('layouts.app')

@section('title', 'Edit Pegawai')
@section('subtitle', 'Perbarui data pegawai dan 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">Edit</span>
    </li>
@endsection

@section('content')
    <form action="{{ route('employees.update', $employee) }}" method="POST" enctype="multipart/form-data" class="space-y-6"
        x-data="{ hasRetirement: {{ $employee->retirement_date ? 'true' : 'false' }} }">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            <!-- Left Column -->
            <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', $employee->nip) }}" readonly
                                class="w-full px-4 py-3 bg-secondary-100 border border-secondary-200 rounded-xl text-sm text-secondary-600 cursor-not-allowed">
                            <p class="mt-1 text-xs text-secondary-500">NIP tidak dapat diubah</p>
                        </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', $employee->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">
                        </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', $employee->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">
                        </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', $employee->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">
                        </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">
                                @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-medium text-secondary-700 mb-2">Jabatan <span
                                    class="text-rose-500">*</span></label>
                            <input type="text" name="position" value="{{ old('position', $employee->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">
                        </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', $employee->employment_status) == 'permanent' ? 'selected' : '' }}>
                                    Pegawai Tetap</option>
                                <option value="contract"
                                    {{ old('employment_status', $employee->employment_status) == 'contract' ? 'selected' : '' }}>
                                    Kontrak</option>
                                <option value="intern"
                                    {{ old('employment_status', $employee->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', $employee->join_date->format('Y-m-d')) }}" 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>
                            <label class="block text-sm font-medium text-secondary-700 mb-2">Status Saat Ini <span
                                    class="text-rose-500">*</span></label>
                            <select name="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="active"
                                    {{ old('status', $employee->status) == 'active' ? 'selected' : '' }}>Aktif</option>
                                <option value="retiring"
                                    {{ old('status', $employee->status) == 'retiring' ? 'selected' : '' }}>Akan Pensiun
                                </option>
                                <option value="retired"
                                    {{ old('status', $employee->status) == 'retired' ? 'selected' : '' }}>Sudah Pensiun
                                </option>
                                <option value="extended"
                                    {{ old('status', $employee->status) == 'extended' ? 'selected' : '' }}>Diperpanjang
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Retirement Info -->
                <div
                    class="glass-card rounded-2xl p-6 border-l-4 {{ $employee->retirement_date ? 'border-amber-400' : 'border-secondary-200' }}">
                    <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" name="is_retiring" value="1" 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', $employee->retirement_date?->format('Y-m-d')) }}"
                                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', $employee->retirement_type) == 'pension' ? 'selected' : '' }}>
                                    Pensiun</option>
                                <option value="resign"
                                    {{ old('retirement_type', $employee->retirement_type) == 'resign' ? 'selected' : '' }}>
                                    Resign</option>
                                <option value="termination"
                                    {{ old('retirement_type', $employee->retirement_type) == 'termination' ? 'selected' : '' }}>
                                    Pemutusan</option>
                                <option value="end_contract"
                                    {{ old('retirement_type', $employee->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</label>
                            @if ($employee->retirement_document)
                                <div class="mb-3 p-3 bg-primary-50 rounded-lg flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-file-pdf text-rose-500 mr-2"></i>
                                        <span
                                            class="text-sm text-secondary-700">{{ basename($employee->retirement_document) }}</span>
                                    </div>
                                    <a href="{{ asset('storage/' . $employee->retirement_document) }}" target="_blank"
                                        class="text-sm text-primary-600 hover:text-primary-700">
                                        <i class="fas fa-download"></i>
                                    </a>
                                </div>
                            @endif
                            <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">
                            <p class="mt-1 text-xs text-secondary-500">Upload dokumen baru untuk mengganti yang lama
                                (opsional)</p>
                        </div>
                    </div>
                </div>

                <!-- Current Access -->
                <div class="glass-card rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center">
                            <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">Akses Saat Ini</h3>
                                <p class="text-sm text-secondary-500">{{ $employee->accessDetails->count() }} akses aktif
                                </p>
                            </div>
                        </div>
                        <a href="{{ route('employees.show', $employee) }}"
                            class="text-sm text-primary-600 hover:text-primary-700 font-medium">
                            Kelola Akses <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="space-y-2">
                        @forelse ($employee->accessDetails as $access)
                            <div
                                class="flex items-center justify-between p-3 bg-white/40 rounded-lg border border-white/50">
                                <div class="flex items-center">
                                    <div
                                        class="w-8 h-8 rounded-lg bg-{{ $access->accessCatalog->criticality_color }}-100 text-{{ $access->accessCatalog->criticality_color }}-600 flex items-center justify-center mr-3">
                                        <i
                                            class="fas {{ $access->accessCatalog->category === 'physical' ? 'fa-usb' : ($access->accessCatalog->category === 'digital' ? 'fa-database' : 'fa-key') }} text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-secondary-800">
                                            {{ $access->accessCatalog->name }}</p>
                                        <p class="text-xs text-secondary-500">{{ $access->accessCatalog->code }} • Expire:
                                            {{ $access->current_expiry_date->format('d M Y') }}</p>
                                    </div>
                                </div>
                                <span
                                    class="px-2 py-1 rounded-full text-xs font-medium
                                {{ $access->status === 'active' ? 'bg-emerald-100 text-emerald-700' : '' }}
                                {{ $access->status === 'extended' ? 'bg-amber-100 text-amber-700' : '' }}
                                {{ $access->status === 'revoked' ? 'bg-gray-100 text-gray-700' : '' }}">
                                    {{ ucfirst($access->status) }}
                                </span>
                            </div>
                        @empty
                            <div class="text-center py-6 text-secondary-400">
                                <i class="fas fa-inbox text-2xl mb-2"></i>
                                <p class="text-sm">Belum ada akses yang diberikan</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <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">Informasi Update</h3>

                    <div class="space-y-4 mb-6">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-secondary-500">Dibuat</span>
                            <span class="text-secondary-700">{{ $employee->created_at->format('d M Y H:i') }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-secondary-500">Oleh</span>
                            <span class="text-secondary-700">{{ $employee->creator->name ?? 'Unknown' }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-secondary-500">Terakhir Update</span>
                            <span class="text-secondary-700">{{ $employee->updated_at->format('d M Y H:i') }}</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 transition-all flex items-center justify-center">
                            <i class="fas fa-save mr-2"></i>
                            Simpan Perubahan
                        </button>
                        <a href="{{ route('employees.show', $employee) }}"
                            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-eye mr-2"></i>
                            Lihat Detail
                        </a>
                        <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">
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script>
        // Initialize Select2 for all select elements
        $(document).ready(function() {
            $('.select2').select2({
                theme: 'default',
                width: '100%',
                placeholder: "Pilih salah satu..."
            });

            // Custom styling for Select2 to match the theme
            $('.select2-container').css({
                'border-radius': '0.75rem',
                'border-color': '#e5e7eb',
                'box-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)'
            });

            $('.select2-selection').css({
                'border-radius': '0.75rem',
                'border': 'none',
                'height': '2.75rem',
                'display': 'flex',
                'align-items': 'center'
            });

            $('.select2-selection__rendered').css({
                'color': '#374151',
                'font-size': '0.875rem'
            });

            $('.select2-selection__arrow').css({
                'height': '2.75rem'
            });
        });
    </script>
@endsection
@section('styles')
    <style>
        .select2-container--default .select2-selection--single {
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            height: 2.75rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #374151;
            line-height: 2.75rem;
            padding-left: 1rem;
            padding-right: 2.5rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 2.75rem;
            right: 1rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #6b7280 transparent transparent transparent;
            border-width: 0.375rem 0.375rem 0 0.375rem;
        }

        .select2-container--default .select2-results__option--selected {
            background-color: #f3f4f6;
            color: #111827;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #f3f4f6;
            color: #111827;
        }
    </style>
@endsection
@section('scripts')
    <script>
        // Initialize Select2 for all select elements
        $(document).ready(function() {
            $('.select2').select2({
                theme: 'default',
                width: '100%',
                placeholder: "Pilih salah satu..."
            });

            // Custom styling for Select2 to match the theme
            $('.select2-container').css({
                'border-radius': '0.75rem',
                'border-color': '#e5e7eb',
                'box-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)'
            });

            $('.select2-selection').css({
                'border-radius': '0.75rem',
                'border': 'none',
                'height': '2.75rem',
                'display': 'flex',
                'align-items': 'center'
            });

            $('.select2-selection__rendered').css({
                'color': '#374151',
                'font-size': '0.875rem'
            });

            $('.select2-selection__arrow').css({
                'height': '2.75rem'
            });
        });
    </script>
@endsection
@section('styles')
    <style>
        .select2-container--default .select2-selection--single {
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            height: 2.75rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #374151;
            line-height: 2.75rem;
            padding-left: 1rem;
            padding-right: 2.5rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 2.75rem;
            right: 1rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #6b7280 transparent transparent transparent;
            border-width: 0.375rem 0.375rem 0 0.375rem;
        }

        .select2-container--default .select2-results__option--selected {
            background-color: #f3f4f6;
            color: #111827;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #f3f4f6;
            color: #111827;
        }
    </style>
@endsection