@extends('simaju.layouts.main')
@section('title', 'Edit Guru')
@section('page-title', 'Edit Guru')
@section('content')
<div class="max-w-6xl mx-auto">
    <form action="{{ route('simaju.guru.update', $guru->id) }}" method="POST" enctype="multipart/form-data">
        @csrf @method('PUT')

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column - Foto & Akun -->
            <div class="space-y-6">
                <!-- Foto Profil -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-camera text-primary"></i>
                            Foto Profil
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="flex flex-col items-center">
                            <div class="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center mb-4 overflow-hidden">
                                @if($guru->foto)
                                    <img src="{{ asset('storage/fotos/' . $guru->foto) }}" alt="{{ $guru->nama }}" class="w-full h-full object-cover">
                                @else
                                    <i class="fas fa-user fa-4x text-gray-400" id="foto-placeholder"></i>
                                    <img id="foto-preview" src="" class="w-full h-full object-cover hidden">
                                @endif
                            </div>
                            <input type="file" name="foto" accept="image/*" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-primary hover:file:bg-blue-100">
                            <p class="text-xs text-gray-500 mt-2">Format: JPG, PNG, GIF (Max 2MB)</p>
                        </div>
                    </div>
                </div>

                <!-- Hak Akses / Akun Login -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-indigo-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-user-shield text-purple-600"></i>
                            Hak Akses / Akun Login
                        </h3>
                    </div>
                    <div class="p-6">
                        <!-- Existing Account Info -->
                        @if($guru->user)
                            <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-xl">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-check text-white"></i>
                                    </div>
                                    <div class="flex-1">
                                        <p class="font-semibold text-green-800">Akun Aktif</p>
                                        <p class="text-sm text-green-600">{{ $guru->user->email }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Toggle -->
                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="checkbox" name="create_user" value="1" id="create_user_toggle"
                                       class="w-5 h-5 mt-0.5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                                       {{ $guru->user || old('create_user') ? 'checked' : '' }}>
                                <div>
                                    <span class="font-medium text-purple-800">{{ $guru->user ? 'Update Akun' : 'Buat Akun Login' }}</span>
                                    <p class="text-xs text-purple-600 mt-1">Centang untuk {{ $guru->user ? 'mengupdate' : 'membuat' }} akun login sistem</p>
                                </div>
                            </label>
                        </div>

                        <!-- User Fields -->
                        <div id="user_account_fields" class="{{ $guru->user || old('create_user') ? '' : 'hidden' }}">
                            <!-- Role Selection -->
                            <div class="mb-6">
                                <label class="block text-sm font-medium text-gray-700 mb-3">
                                    <i class="fas fa-user-tag mr-1 text-gray-400"></i>
                                    Pilih Role <span class="text-red-500">*</span>
                                </label>
                                <div class="grid grid-cols-1 gap-3">
                                    <!-- Admin Option -->
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="role" value="admin" class="peer sr-only"
                                               {{ old('role', $guru->user->role ?? '') == 'admin' ? 'checked' : '' }}>
                                        <div class="p-4 rounded-xl border-2 border-gray-200 hover:border-gray-300 peer-checked:border-red-500 peer-checked:bg-red-50 transition-all">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-crown text-red-600"></i>
                                                </div>
                                                <div>
                                                    <p class="font-semibold text-gray-800">Admin</p>
                                                    <p class="text-xs text-gray-500">Akses penuh ke semua fitur sistem</p>
                                                </div>
                                            </div>
                                        </div>
                                    </label>

                                    <!-- Guru Option -->
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="role" value="guru" class="peer sr-only"
                                               {{ old('role', $guru->user->role ?? '') == 'guru' ? 'checked' : '' }}>
                                        <div class="p-4 rounded-xl border-2 border-gray-200 hover:border-gray-300 peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-chalkboard-teacher text-blue-600"></i>
                                                </div>
                                                <div>
                                                    <p class="font-semibold text-gray-800">Guru</p>
                                                    <p class="text-xs text-gray-500">Akses untuk guru (termasuk wali kelas)</p>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @error('role')
                                    <p class="text-red-500 text-sm mt-2 flex items-center gap-1">
                                        <i class="fas fa-exclamation-circle"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <!-- Password -->
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        <i class="fas fa-key mr-1 text-gray-400"></i>
                                        Password Baru
                                    </label>
                                    <div class="relative">
                                        <input type="password" name="password" id="password"
                                               class="w-full px-4 py-2.5 pr-10 border rounded-lg @error('password') border-red-500 @enderror focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                               placeholder="Kosongkan jika tidak diubah">
                                        <button type="button" onclick="togglePasswordVisibility('password')"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye" id="password-icon"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        <i class="fas fa-check-double mr-1 text-gray-400"></i>
                                        Konfirmasi Password Baru
                                    </label>
                                    <div class="relative">
                                        <input type="password" name="password_confirmation" id="password_confirmation"
                                               class="w-full px-4 py-2.5 pr-10 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                               placeholder="Ulangi password baru">
                                        <button type="button" onclick="togglePasswordVisibility('password_confirmation')"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye" id="password_confirmation-icon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Data Guru -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Data Pribadi -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-user text-primary"></i>
                            Data Pribadi
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">NIP <span class="text-red-500">*</span></label>
                                <input type="text" name="nip" value="{{ old('nip', $guru->nip) }}" required
                                       class="w-full px-4 py-2.5 border rounded-lg @error('nip') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                @error('nip') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input type="text" name="nama" value="{{ old('nama', $guru->nama) }}" required
                                       class="w-full px-4 py-2.5 border rounded-lg @error('nama') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                @error('nama') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
                                <select name="jk" required class="w-full px-4 py-2.5 border rounded-lg @error('jk') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                    <option value="L" {{ old('jk', $guru->jk) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                    <option value="P" {{ old('jk', $guru->jk) == 'P' ? 'selected' : '' }}>Perempuan</option>
                                </select>
                                @error('jk') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Agama <span class="text-red-500">*</span></label>
                                <select name="agama" required class="w-full px-4 py-2.5 border rounded-lg @error('agama') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                    @foreach(['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu'] as $a)
                                        <option value="{{ $a }}" {{ old('agama', $guru->agama) == $a ? 'selected' : '' }}>{{ $a }}</option>
                                    @endforeach
                                </select>
                                @error('agama') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tempat Lahir <span class="text-red-500">*</span></label>
                                <input type="text" name="tempat_lahir" value="{{ old('tempat_lahir', $guru->tempat_lahir) }}" required
                                       class="w-full px-4 py-2.5 border rounded-lg @error('tempat_lahir') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                @error('tempat_lahir') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
                                <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $guru->tanggal_lahir->format('Y-m-d')) }}" required
                                       class="w-full px-4 py-2.5 border rounded-lg @error('tanggal_lahir') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                @error('tanggal_lahir') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Telepon</label>
                                <input type="text" name="telepon" value="{{ old('telepon', $guru->telepon) }}"
                                       class="w-full px-4 py-2.5 border rounded-lg focus:ring-2 focus:ring-primary">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" name="email" value="{{ old('email', $guru->email) }}"
                                       class="w-full px-4 py-2.5 border rounded-lg @error('email') border-red-500 @enderror focus:ring-2 focus:ring-primary">
                                @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>
                            <textarea name="alamat" rows="2" class="w-full px-4 py-2.5 border rounded-lg focus:ring-2 focus:ring-primary">{{ old('alamat', $guru->alamat) }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Jabatan & Status -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-briefcase text-primary"></i>
                            Jabatan & Status
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Jabatan</label>
                                <select name="jabatan" class="w-full px-4 py-2.5 border rounded-lg focus:ring-2 focus:ring-primary">
                                    <option value="">Pilih Jabatan</option>
                                    @foreach($jabatanOptions as $key => $label)
                                        <option value="{{ $key }}" {{ old('jabatan', $guru->jabatan) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Status <span class="text-red-500">*</span></label>
                                <select name="status" required class="w-full px-4 py-2.5 border rounded-lg focus:ring-2 focus:ring-primary">
                                    <option value="aktif" {{ old('status', $guru->status) == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="pensiun" {{ old('status', $guru->status) == 'pensiun' ? 'selected' : '' }}>Pensiun</option>
                                    <option value="cuti" {{ old('status', $guru->status) == 'cuti' ? 'selected' : '' }}>Cuti</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mata Pelajaran -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-book text-primary"></i>
                            Mata Pelajaran yang Diampu
                        </h3>
                        <button type="button" onclick="addMapelRow()" 
                                class="inline-flex items-center px-4 py-2 bg-green-500 text-white text-sm font-medium rounded-lg hover:bg-green-600 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                            <i class="fas fa-plus mr-2"></i>Tambah
                        </button>
                    </div>
                    <div class="p-6">
                        <div id="mapel-container">
                            @forelse($guru->guruMapels as $index => $gm)
                                <div class="mapel-row flex flex-col md:flex-row gap-4 mb-4 p-4 bg-gray-50 rounded-lg">
                                    <div class="flex-1">
                                        <label class="block text-xs text-gray-500 mb-1">Mata Pelajaran</label>
                                        <select name="mata_pelajarans[]" class="w-full px-4 py-2.5 border rounded-lg">
                                            <option value="">Pilih Mapel</option>
                                            @foreach($mapelList as $m)
                                                <option value="{{ $m->id }}" {{ $gm->mata_pelajaran_id == $m->id ? 'selected' : '' }}>{{ $m->kode_mapel }} - {{ $m->nama_mapel }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-xs text-gray-500 mb-1">Kelas</label>
                                        <select name="kelas_ids[]" class="w-full px-4 py-2.5 border rounded-lg">
                                            <option value="">Pilih Kelas</option>
                                            @foreach($kelasList as $k)
                                                <option value="{{ $k->id }}" {{ $gm->kelas_id == $k->id ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="flex items-end">
                                        <button type="button" class="px-4 py-2.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors" onclick="removeMapelRow(this)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            @empty
                                <div class="mapel-row flex flex-col md:flex-row gap-4 mb-4 p-4 bg-gray-50 rounded-lg">
                                    <div class="flex-1">
                                        <label class="block text-xs text-gray-500 mb-1">Mata Pelajaran</label>
                                        <select name="mata_pelajarans[]" class="w-full px-4 py-2.5 border rounded-lg">
                                            <option value="">Pilih Mapel</option>
                                            @foreach($mapelList as $m)
                                                <option value="{{ $m->id }}">{{ $m->kode_mapel }} - {{ $m->nama_mapel }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-xs text-gray-500 mb-1">Kelas</label>
                                        <select name="kelas_ids[]" class="w-full px-4 py-2.5 border rounded-lg">
                                            <option value="">Pilih Kelas</option>
                                            @foreach($kelasList as $k)
                                                <option value="{{ $k->id }}">{{ $k->nama_kelas }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="flex items-end">
                                        <button type="button" class="px-4 py-2.5 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors" onclick="addMapelRow()">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit -->
        <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex justify-end gap-3">
            <a href="{{ route('simaju.guru.index') }}" class="px-6 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Batal
            </a>
            <button type="submit" class="px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors shadow-sm">
                <i class="fas fa-save mr-2"></i>Update
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // Toggle user account fields
    document.getElementById('create_user_toggle').addEventListener('change', function() {
        document.getElementById('user_account_fields').classList.toggle('hidden', !this.checked);
    });

    // Toggle password visibility
    function togglePasswordVisibility(inputId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById(inputId + '-icon');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    // Preview foto
    document.querySelector('input[name="foto"]').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const placeholder = document.getElementById('foto-placeholder');
        const preview = document.getElementById('foto-preview');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                if (preview) {
                    preview.src = e.target.result;
                    preview.classList.remove('hidden');
                }
                if (placeholder) {
                    placeholder.classList.add('hidden');
                }
            };
            reader.readAsDataURL(file);
        }
    });

    // Add mata pelajaran row
    function addMapelRow() {
        const container = document.getElementById('mapel-container');
        const mapelOptions = `{!! implode("", $mapelList->map(fn($m) => '<option value="'.$m->id.'">'.$m->kode_mapel.' - '.$m->nama_mapel.'</option>')->toArray()) !!}`;
        const kelasOptions = `{!! implode("", $kelasList->map(fn($k) => '<option value="'.$k->id.'">'.$k->nama_kelas.'</option>')->toArray()) !!}`;

        const newRow = document.createElement('div');
        newRow.className = 'mapel-row flex flex-col md:flex-row gap-4 mb-4 p-4 bg-gray-50 rounded-lg';
        newRow.innerHTML = `
            <div class="flex-1">
                <select name="mata_pelajarans[]" class="w-full px-4 py-2.5 border rounded-lg">
                    <option value="">Pilih Mapel</option>
                    ${mapelOptions}
                </select>
            </div>
            <div class="flex-1">
                <select name="kelas_ids[]" class="w-full px-4 py-2.5 border rounded-lg">
                    <option value="">Pilih Kelas</option>
                    ${kelasOptions}
                </select>
            </div>
            <div class="flex items-end">
                <button type="button" class="px-4 py-2.5 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors" onclick="removeMapelRow(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(newRow);
    }

    function removeMapelRow(btn) {
        btn.closest('.mapel-row').remove();
    }
</script>
@endpush