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

        <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">
                                <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">
                            </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">
                        <!-- 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"
                                       {{ old('create_user') ? 'checked' : '' }}>
                                <div>
                                    <span class="font-medium text-purple-800">Buat Akun Login</span>
                                    <p class="text-xs text-purple-600 mt-1">Centang untuk membuatkan akun login sistem untuk guru ini</p>
                                </div>
                            </label>
                        </div>

                        <!-- User Fields -->
                        <div id="user_account_fields" class="{{ 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') == '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' ? '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>
                                    <!-- Kepala Sekolah Option -->
                                    <label class="relative cursor-pointer">
                                        <input type="radio" name="role" value="kepala_sekolah" class="peer sr-only"
                                               {{ old('role') == 'kepala_sekolah' ? 'checked' : '' }}>
                                        <div class="p-4 rounded-xl border-2 border-gray-200 hover:border-gray-300 peer-checked:border-purple-500 peer-checked:bg-purple-50 transition-all">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-user-tie text-purple-600"></i>
                                                </div>
                                                <div>
                                                    <p class="font-semibold text-gray-800">Kepala Sekolah</p>
                                                    <p class="text-xs text-gray-500">Akses khusus Kepala Sekolah</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 <span class="text-red-500">*</span>
                                    </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="Minimal 6 karakter">
                                        <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 <span class="text-red-500">*</span>
                                    </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">
                                        <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>

                            <!-- Info -->
                            <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
                                <p class="text-xs text-blue-700">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Email akan digenerate otomatis dari nama guru jika tidak diisi di data pribadi.
                                </p>
                            </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') }}" 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') }}" 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="">Pilih</option>
                                    <option value="L" {{ old('jk') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                    <option value="P" {{ old('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">
                                    <option value="">Pilih</option>
                                    @foreach(['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu'] as $a)
                                        <option value="{{ $a }}" {{ old('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') }}" 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') }}" 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') }}"
                                       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') }}"
                                       class="w-full px-4 py-2.5 border rounded-lg @error('email') border-red-500 @enderror focus:ring-2 focus:ring-primary"
                                       placeholder="email@smkn1.sch.id">
                                @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') }}</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') == $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', 'aktif') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="pensiun" {{ old('status') == 'pensiun' ? 'selected' : '' }}>Pensiun</option>
                                    <option value="cuti" {{ old('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">
                        <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>
                    </div>
                    <div class="p-6">
                        <div id="mapel-container">
                            <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 focus:ring-2 focus:ring-primary">
                                        <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 focus:ring-2 focus:ring-primary">
                                        <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>
                        </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>Simpan
            </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) {
                preview.src = e.target.result;
                preview.classList.remove('hidden');
                placeholder.classList.add('hidden');
            };
            reader.readAsDataURL(file);
        } else {
            preview.classList.add('hidden');
            placeholder.classList.remove('hidden');
        }
    });

    // 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