@extends('layouts.admin')

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

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

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

            {{-- 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', $anggota->nama)" 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" x-data x-init="new TomSelect($el, { maxOptions: null })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required onchange="toggleProdi()">
                            <option value="" disabled>-- Pilih Jenis --</option>
                            @foreach(['Mahasiswa', 'Siswa', 'Dosen', 'Umum'] as $jenis)
                                <option value="{{ $jenis }}" {{ old('jenis_anggota', $anggota->jenis_anggota) == $jenis ? 'selected' : '' }}>{{ $jenis }}</option>
                            @endforeach
                        </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', $anggota->no_identitas)" 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', $anggota->no_ktp)" 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', $anggota->prodi)" />
                        <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="number" class="mt-1 block w-full" :value="old('no_hp', $anggota->no_hp)" 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 border border-gray-200 bg-gray-50 text-gray-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 p-3 shadow-sm hover:bg-white transition-all duration-200 outline-none" required>{{ old('alamat', $anggota->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', $anggota->nama_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="number" class="mt-1 block w-full" :value="old('no_hp_wali', $anggota->no_hp_wali)" 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" x-data x-init="new TomSelect($el, { maxOptions: null })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
                            <option value="" disabled>-- Pilih Hubungan --</option>
                            @foreach(['Orang Tua', 'Saudara', 'Dosen Wali', 'Lainnya'] as $hub)
                                <option value="{{ $hub }}" {{ old('hubungan_wali', $anggota->hubungan_wali) == $hub ? 'selected' : '' }}>{{ $hub }}</option>
                            @endforeach
                        </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>
                    Perbarui 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 = '';
                document.getElementById('prodi').removeAttribute('required');
            } else {
                prodiField.style.display = 'block';
                document.getElementById('prodi').setAttribute('required', 'required');
            }

            // 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';
            }
        }
        document.addEventListener('DOMContentLoaded', toggleProdi);
    </script>
@endsection