@extends('layouts.admin')

@section('title', 'Tambah Anggota')

@section('content')
    <x-page-header title="Tambah Anggota Baru" />

    <x-card class="max-w-3xl mx-auto">
        <form action="{{ route('admin.anggota.member.store') }}" method="POST" class="space-y-8">
            @csrf

            {{-- Section 1: Data Identitas --}}
            <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-md text-sm mr-2">1</span>
                    Data Identitas
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <x-input-label for="nama" value="Nama Lengkap" />
                        <x-text-input id="nama" name="nama" type="text" class="mt-1 block w-full" :value="old('nama')" placeholder="Masukkan nama lengkap" required autofocus />
                        <x-input-error class="mt-2" :messages="$errors->get('nama')" />
                    </div>

                    <div>
                        <x-input-label for="jenis_anggota" value="Jenis Anggota" />
                        <select id="jenis_anggota" name="jenis_anggota" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" required onchange="toggleProdi()">
                            <option value="" disabled {{ old('jenis_anggota') ? '' : 'selected' }}>-- Pilih Jenis --</option>
                            <option value="Mahasiswa" {{ old('jenis_anggota') == 'Mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                            <option value="Siswa" {{ old('jenis_anggota') == 'Siswa' ? 'selected' : '' }}>Siswa</option>
                            <option value="Dosen" {{ old('jenis_anggota') == 'Dosen' ? 'selected' : '' }}>Dosen</option>
                            <option value="Umum" {{ old('jenis_anggota') == 'Umum' ? 'selected' : '' }}>Umum</option>
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('jenis_anggota')" />
                    </div>

                    <div>
                        <x-input-label for="no_identitas" value="No. Identitas (NIM/NISN/NIP)" />
                        <x-text-input id="no_identitas" name="no_identitas" type="text" class="mt-1 block w-full" :value="old('no_identitas')" placeholder="NIM / NISN / NIP" required />
                        <x-input-error class="mt-2" :messages="$errors->get('no_identitas')" />
                    </div>

                    <div>
                        <x-input-label for="no_ktp" id="label_no_ktp" value="No. KTP / NIK" />
                        <x-text-input id="no_ktp" name="no_ktp" type="text" class="mt-1 block w-full" :value="old('no_ktp')" placeholder="16 digit NIK" maxlength="20" required />
                        <p id="help_no_ktp" class="text-xs text-gray-500 mt-1">Masukkan 16 digit NIK KTP</p>
                        <x-input-error class="mt-2" :messages="$errors->get('no_ktp')" />
                    </div>

                    <div id="prodi-field">
                        <x-input-label for="prodi" value="Program Studi / Jurusan" />
                        <x-text-input id="prodi" name="prodi" type="text" class="mt-1 block w-full" :value="old('prodi')" placeholder="Contoh: Teknik Informatika" />
                        <x-input-error class="mt-2" :messages="$errors->get('prodi')" />
                    </div>
                </div>
            </div>

            {{-- Section 2: Data Kontak --}}
            <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <span class="bg-green-100 text-green-700 px-2 py-1 rounded-md text-sm mr-2">2</span>
                    Data Kontak
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <x-input-label for="no_hp" value="No. HP" />
                        <x-text-input id="no_hp" name="no_hp" type="text" class="mt-1 block w-full" :value="old('no_hp')" placeholder="08xxxxxxxxx" required />
                        <x-input-error class="mt-2" :messages="$errors->get('no_hp')" />
                    </div>

                    <div class="md:col-span-2">
                        <x-input-label for="alamat" value="Alamat Lengkap" />
                        <textarea id="alamat" name="alamat" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" placeholder="Masukkan alamat lengkap" required>{{ old('alamat') }}</textarea>
                        <x-input-error class="mt-2" :messages="$errors->get('alamat')" />
                    </div>
                </div>
            </div>

            {{-- Section 3: Data Penanggung Jawab --}}
            <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <span class="bg-orange-100 text-orange-700 px-2 py-1 rounded-md text-sm mr-2">3</span>
                    Data Penanggung Jawab / Wali
                </h3>
                <p class="text-xs text-gray-500 mb-4">Digunakan sebagai penjamin apabila terjadi kehilangan atau kerusakan buku.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <x-input-label for="nama_wali" value="Nama Wali / Penjamin" />
                        <x-text-input id="nama_wali" name="nama_wali" type="text" class="mt-1 block w-full" :value="old('nama_wali')" placeholder="Nama orang tua / wali" required />
                        <x-input-error class="mt-2" :messages="$errors->get('nama_wali')" />
                    </div>

                    <div>
                        <x-input-label for="no_hp_wali" value="No. HP Wali" />
                        <x-text-input id="no_hp_wali" name="no_hp_wali" type="text" class="mt-1 block w-full" :value="old('no_hp_wali')" placeholder="08xxxxxxxxx" required />
                        <x-input-error class="mt-2" :messages="$errors->get('no_hp_wali')" />
                    </div>

                    <div>
                        <x-input-label for="hubungan_wali" value="Hubungan" />
                        <select id="hubungan_wali" name="hubungan_wali" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" required>
                            <option value="" disabled {{ old('hubungan_wali') ? '' : 'selected' }}>-- Pilih Hubungan --</option>
                            <option value="Orang Tua" {{ old('hubungan_wali') == 'Orang Tua' ? 'selected' : '' }}>Orang Tua</option>
                            <option value="Saudara" {{ old('hubungan_wali') == 'Saudara' ? 'selected' : '' }}>Saudara</option>
                            <option value="Dosen Wali" {{ old('hubungan_wali') == 'Dosen Wali' ? 'selected' : '' }}>Dosen Wali</option>
                            <option value="Lainnya" {{ old('hubungan_wali') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('hubungan_wali')" />
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200">
                <a href="{{ route('admin.anggota.member.index') }}" class="text-gray-600 hover:text-gray-900 font-medium text-sm">
                    Batal
                </a>
                <x-primary-button>
                    Simpan Anggota
                </x-primary-button>
            </div>
        </form>
    </x-card>

    <script>
        function toggleProdi() {
            const jenis = document.getElementById('jenis_anggota').value;
            const prodiField = document.getElementById('prodi-field');
            const labelNoKtp = document.getElementById('label_no_ktp');
            const helpNoKtp = document.getElementById('help_no_ktp');
            const inputNoKtp = document.getElementById('no_ktp');

            if (jenis === 'Umum') {
                prodiField.style.display = 'none';
                document.getElementById('prodi').value = '';
            } else {
                prodiField.style.display = 'block';
            }

            // Logika Dynamic Form untuk Identitas Siswa / Pelajar
            if (jenis === 'Siswa') {
                labelNoKtp.innerText = 'No. Identitas (NISN / KIA)';
                helpNoKtp.innerText = 'Masukkan Nomor Induk Siswa Nasional atau Kartu Identitas Anak';
                inputNoKtp.placeholder = '10-16 digit NISN / KIA';
            } else {
                labelNoKtp.innerText = 'No. Identitas KTP';
                helpNoKtp.innerText = 'Masukkan 16 digit NIK KTP';
                inputNoKtp.placeholder = '16 digit NIK';
            }
        }
        // Run on load
        document.addEventListener('DOMContentLoaded', toggleProdi);
    </script>
@endsection