@extends('simaju.layouts.main')
@section('title', 'Tambah Anggota')
@section('page-title', 'Tambah Anggota')
@section('page-subtitle', 'Daftarkan anggota baru perpustakaan')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Elegant Header -->
        <div class="relative bg-gradient-to-br from-purple-600 via-violet-600 to-indigo-700 px-8 py-8">
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white rounded-full -ml-24 -mb-24"></div>
            </div>
            <div class="relative flex items-center gap-5">
                <div class="w-16 h-16 bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-user-plus text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Anggota Baru</h2>
                    <p class="text-purple-100">Lengkapi informasi data anggota perpustakaan</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form action="{{ route('perpustakaan.anggota.store') }}" method="POST" class="p-8" id="anggotaForm">
            @csrf

            <!-- Section: Pilih Jenis & Sumber Data -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-filter text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Pilih Jenis Anggota & Sumber Data</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Jenis Anggota -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-3">
                            Jenis Anggota <span class="text-red-500">*</span>
                        </label>
                        <div class="grid grid-cols-3 gap-4">
                            <label class="relative flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-500 transition-all">
                                <input type="radio" name="jenis_anggota" value="siswa" class="peer sr-only" required onchange="toggleDataSource()">
                                <div class="flex items-center gap-3 w-full peer-checked:text-purple-600">
                                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center peer-checked:bg-purple-600">
                                        <i class="fas fa-user-graduate text-purple-600 peer-checked:text-white"></i>
                                    </div>
                                    <span class="font-semibold">Siswa</span>
                                </div>
                                <div class="absolute inset-0 border-2 border-purple-600 rounded-xl opacity-0 peer-checked:opacity-100"></div>
                            </label>
                            
                            <label class="relative flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-500 transition-all">
                                <input type="radio" name="jenis_anggota" value="guru" class="peer sr-only" required onchange="toggleDataSource()">
                                <div class="flex items-center gap-3 w-full peer-checked:text-purple-600">
                                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center peer-checked:bg-purple-600">
                                        <i class="fas fa-chalkboard-teacher text-purple-600 peer-checked:text-white"></i>
                                    </div>
                                    <span class="font-semibold">Guru</span>
                                </div>
                                <div class="absolute inset-0 border-2 border-purple-600 rounded-xl opacity-0 peer-checked:opacity-100"></div>
                            </label>
                            
                            <label class="relative flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-500 transition-all">
                                <input type="radio" name="jenis_anggota" value="umum" class="peer sr-only" required onchange="toggleDataSource()">
                                <div class="flex items-center gap-3 w-full peer-checked:text-purple-600">
                                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center peer-checked:bg-purple-600">
                                        <i class="fas fa-users text-purple-600 peer-checked:text-white"></i>
                                    </div>
                                    <span class="font-semibold">Umum</span>
                                </div>
                                <div class="absolute inset-0 border-2 border-purple-600 rounded-xl opacity-0 peer-checked:opacity-100"></div>
                            </label>
                        </div>
                        @error('jenis_anggota')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Pilih Siswa -->
                    <div id="siswaSelect" class="md:col-span-2 hidden">
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Pilih Siswa <span class="text-red-500">*</span>
                        </label>
                        <select name="siswa_id" id="siswa_id" class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 transition-all" onchange="populateFromSiswa()">
                            <option value="">-- Pilih Siswa --</option>
                            @foreach($siswas as $siswa)
                                <option value="{{ $siswa->id }}" 
                                        data-nama="{{ $siswa->nama }}"
                                        data-email="{{ $siswa->email }}"
                                        data-telepon="{{ $siswa->telepon }}"
                                        data-alamat="{{ $siswa->alamat }}"
                                        data-jk="{{ $siswa->jk }}"
                                        data-tgl-lahir="{{ $siswa->tanggal_lahir }}">
                                    {{ $siswa->nis }} - {{ $siswa->nama }} @if($siswa->kelas)({{ $siswa->kelas->nama_kelas }})@endif
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Pilih Guru -->
                    <div id="guruSelect" class="md:col-span-2 hidden">
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Pilih Guru <span class="text-red-500">*</span>
                        </label>
                        <select name="guru_id" id="guru_id" class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 transition-all" onchange="populateFromGuru()">
                            <option value="">-- Pilih Guru --</option>
                            @foreach($gurus as $guru)
                                <option value="{{ $guru->id }}"
                                        data-nama="{{ $guru->nama }}"
                                        data-email="{{ $guru->email }}"
                                        data-telepon="{{ $guru->telepon }}"
                                        data-alamat="{{ $guru->alamat }}"
                                        data-jk="{{ $guru->jk }}"
                                        data-tgl-lahir="{{ $guru->tanggal_lahir }}">
                                    {{ $guru->nip }} - {{ $guru->nama }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Section: Informasi Identitas -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-id-card text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Identitas</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- No Anggota -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Nomor Anggota <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-hashtag text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="text" 
                                   name="no_anggota" 
                                   value="{{ old('no_anggota') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('no_anggota') border-red-500 @enderror" 
                                   placeholder="Contoh: AGT001" 
                                   required>
                        </div>
                        @error('no_anggota')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                        <p class="mt-1.5 text-xs text-gray-500">Format: AGT001, AGT002, dst.</p>
                    </div>

                    <!-- Nama Anggota -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Nama Lengkap <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="text" 
                                   name="nama_anggota" 
                                   value="{{ old('nama_anggota') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('nama_anggota') border-red-500 @enderror" 
                                   placeholder="Masukkan nama lengkap" 
                                   required>
                        </div>
                        @error('nama_anggota')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Section: Informasi Kontak -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-address-book text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Kontak</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Email -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Email <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-envelope text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="email" 
                                   name="email" 
                                   value="{{ old('email') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('email') border-red-500 @enderror" 
                                   placeholder="nama@email.com" 
                                   required>
                        </div>
                        @error('email')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- No Telepon -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            No. Telepon <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-phone text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="tel" 
                                   name="no_telepon" 
                                   value="{{ old('no_telepon') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('no_telepon') border-red-500 @enderror" 
                                   placeholder="08123456789" 
                                   required>
                        </div>
                        @error('no_telepon')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Alamat (Full Width) -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Alamat Lengkap <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute top-4 left-4 pointer-events-none">
                                <i class="fas fa-map-marker-alt text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <textarea name="alamat" 
                                      rows="3"
                                      class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all resize-none @error('alamat') border-red-500 @enderror" 
                                      placeholder="Jl. Contoh No. 123, RT/RW, Kelurahan, Kecamatan, Kota" 
                                      required>{{ old('alamat') }}</textarea>
                        </div>
                        @error('alamat')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Section: Informasi Pribadi -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-teal-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-user-circle text-teal-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Pribadi</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Jenis Kelamin -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-3">
                            Jenis Kelamin <span class="text-red-500">*</span>
                        </label>
                        <div class="grid grid-cols-2 gap-4">
                            <label class="relative flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-500 transition-all">
                                <input type="radio" name="jenis_kelamin" value="Laki-laki" class="peer sr-only" required {{ old('jenis_kelamin') == 'Laki-laki' ? 'checked' : '' }}>
                                <div class="flex items-center gap-3 w-full peer-checked:text-purple-600">
                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center peer-checked:bg-purple-600">
                                        <i class="fas fa-mars text-blue-600 peer-checked:text-white"></i>
                                    </div>
                                    <span class="font-semibold">Laki-laki</span>
                                </div>
                                <div class="absolute inset-0 border-2 border-purple-600 rounded-xl opacity-0 peer-checked:opacity-100"></div>
                            </label>
                            
                            <label class="relative flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-500 transition-all">
                                <input type="radio" name="jenis_kelamin" value="Perempuan" class="peer sr-only" required {{ old('jenis_kelamin') == 'Perempuan' ? 'checked' : '' }}>
                                <div class="flex items-center gap-3 w-full peer-checked:text-purple-600">
                                    <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center peer-checked:bg-purple-600">
                                        <i class="fas fa-venus text-pink-600 peer-checked:text-white"></i>
                                    </div>
                                    <span class="font-semibold">Perempuan</span>
                                </div>
                                <div class="absolute inset-0 border-2 border-purple-600 rounded-xl opacity-0 peer-checked:opacity-100"></div>
                            </label>
                        </div>
                        @error('jenis_kelamin')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Tanggal Lahir -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Tanggal Lahir <span class="text-gray-400 text-xs">(Opsional)</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-birthday-cake text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="date" 
                                   name="tanggal_lahir" 
                                   value="{{ old('tanggal_lahir') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('tanggal_lahir') border-red-500 @enderror">
                        </div>
                        @error('tanggal_lahir')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Section: Informasi Keanggotaan -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-violet-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-user-tag text-violet-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Keanggotaan</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Jenis Anggota -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Jenis Anggota <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select name="jenis_anggota" 
                                    class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all appearance-none @error('jenis_anggota') border-red-500 @enderror" 
                                    required>
                                <option value="">-- Pilih Jenis --</option>
                                <option value="siswa" {{ old('jenis_anggota') == 'siswa' ? 'selected' : '' }}>Siswa</option>
                                <option value="guru" {{ old('jenis_anggota') == 'guru' ? 'selected' : '' }}>Guru</option>
                                <option value="umum" {{ old('jenis_anggota') == 'umum' ? 'selected' : '' }}>Umum</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400"></i>
                            </div>
                        </div>
                        @error('jenis_anggota')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Tanggal Bergabung -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Tanggal Bergabung <span class="text-red-500">*</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-calendar text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="date" 
                                   name="tanggal_bergabung" 
                                   value="{{ old('tanggal_bergabung', date('Y-m-d')) }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('tanggal_bergabung') border-red-500 @enderror" 
                                   required>
                        </div>
                        @error('tanggal_bergabung')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Tanggal Berakhir -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Tanggal Berakhir <span class="text-gray-400 text-xs">(Opsional)</span>
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-calendar-times text-gray-400 group-focus-within:text-purple-500 transition-colors"></i>
                            </div>
                            <input type="date" 
                                   name="tanggal_berakhir" 
                                   value="{{ old('tanggal_berakhir') }}" 
                                   class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all @error('tanggal_berakhir') border-red-500 @enderror">
                        </div>
                        @error('tanggal_berakhir')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Status <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select name="status" 
                                    class="w-full px-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all appearance-none @error('status') border-red-500 @enderror" 
                                    required>
                                <option value="aktif" {{ old('status', 'aktif') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="nonaktif" {{ old('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                <option value="suspend" {{ old('status') == 'suspend' ? 'selected' : '' }}>Suspend</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400"></i>
                            </div>
                        </div>
                        @error('status')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>{{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Info Box -->
            <div class="bg-gradient-to-r from-purple-50 to-indigo-50 border-2 border-purple-200 rounded-2xl p-5 mb-8">
                <div class="flex gap-4">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-lightbulb text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-sm font-bold text-purple-900 mb-2">Tips Pendaftaran Anggota</h4>
                        <ul class="text-sm text-purple-800 space-y-1">
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                                <span>Pastikan nomor anggota unik dan tidak digunakan sebelumnya</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                                <span>Email dan nomor telepon akan digunakan untuk notifikasi</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-check-circle text-purple-600 mt-0.5"></i>
                                <span>Status 'Aktif' memungkinkan anggota melakukan peminjaman</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t-2 border-gray-100">
                <button type="submit" 
                        class="flex-1 px-8 py-4 bg-gradient-to-r from-purple-600 via-violet-600 to-indigo-600 text-white font-bold rounded-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-3">
                    <i class="fas fa-save text-xl"></i>
                    <span class="text-lg">Simpan Anggota</span>
                </button>
                <a href="{{ route('perpustakaan.anggota.index') }}" 
                   class="flex-1 px-8 py-4 bg-gray-100 text-gray-700 font-bold text-center rounded-xl hover:bg-gray-200 transition-all duration-200 flex items-center justify-center gap-3">
                    <i class="fas fa-arrow-left"></i>
                    <span class="text-lg">Kembali</span>
                </a>
            </div>
        </form>
    </div>
</div>

<script>
function toggleDataSource() {
    const jenis = document.querySelector('input[name="jenis_anggota"]:checked').value;
    const siswaSelect = document.getElementById('siswaSelect');
    const guruSelect = document.getElementById('guruSelect');
    
    // Hide both
    siswaSelect.classList.add('hidden');
    guruSelect.classList.add('hidden');
    
    // Reset selections
    document.getElementById('siswa_id').value = '';
    document.getElementById('guru_id').value = '';
    
    // Show appropriate select
    if (jenis === 'siswa') {
        siswaSelect.classList.remove('hidden');
    } else if (jenis === 'guru') {
        guruSelect.classList.remove('hidden');
    }
}

function populateFromSiswa() {
    const select = document.getElementById('siswa_id');
    const option = select.options[select.selectedIndex];
    
    if (option.value) {
        document.querySelector('input[name="nama_anggota"]').value = option.dataset.nama;
        document.querySelector('input[name="email"]').value = option.dataset.email || '';
        document.querySelector('input[name="no_telepon"]').value = option.dataset.telepon || '';
        document.querySelector('textarea[name="alamat"]').value = option.dataset.alamat || '';
        
        const jk = option.dataset.jk === 'L' ? 'Laki-laki' : 'Perempuan';
        document.querySelector('input[name="jenis_kelamin"][value="'+jk+'"]').checked = true;
        
        if (option.dataset.tglLahir) {
            document.querySelector('input[name="tanggal_lahir"]').value = option.dataset.tglLahir;
        }
    }
}

function populateFromGuru() {
    const select = document.getElementById('guru_id');
    const option = select.options[select.selectedIndex];
    
    if (option.value) {
        document.querySelector('input[name="nama_anggota"]').value = option.dataset.nama;
        document.querySelector('input[name="email"]').value = option.dataset.email || '';
        document.querySelector('input[name="no_telepon"]').value = option.dataset.telepon || '';
        document.querySelector('textarea[name="alamat"]').value = option.dataset.alamat || '';
        
        const jk = option.dataset.jk === 'L' ? 'Laki-laki' : 'Perempuan';
        document.querySelector('input[name="jenis_kelamin"][value="'+jk+'"]').checked = true;
        
        if (option.dataset.tglLahir) {
            document.querySelector('input[name="tanggal_lahir"]').value = option.dataset.tglLahir;
        }
    }
}
</script>
@endsection