@extends('layouts.register')

@section('styles')
<style>
    .form-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.7); font-weight: 600; }
    .form-control, .form-select { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; font-size: 0.9rem; }
    .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.15) !important; border-color: #fff !important; box-shadow: none !important; }
    select option { background: #1e3a8a !important; color: #fff !important; }
    
    .member-card { background: rgba(255, 255, 255, 0.05); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 20px 20px 20px; margin-bottom: 25px; position: relative; transition: all 0.3s ease; }
    .member-number { position: absolute; top: -12px; left: 20px; background: #fff; color: #1e3a8a; padding: 2px 15px; border-radius: 20px; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; }
    .btn-remove { position: absolute; top: -12px; right: 15px; background: #ff4d4d; color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: 0.3s; }
    .btn-remove:hover { background: #cc0000; transform: scale(1.1); }
    
    .form-control[readonly] { background: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.6) !important; border-color: rgba(255, 255, 255, 0.1) !important; cursor: not-allowed; }
</style>
@endsection

@section('content')
@include('auth.register.partials.progress', ['step' => 3])

<div class="text-center mb-4 text-white">
    <h5 class="fw-bold">DATA ANGGOTA KELUARGA</h5>
    <p class="small opacity-75">Masukkan data Istri, Anak, atau Anggota lain yang tertera di KSK.</p>
</div>

@if ($errors->any())
    <div class="alert alert-danger mx-auto" style="max-width: 800px;">
        <ul class="mb-0 small">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('register.step3.store') }}" id="formStep3">
    @csrf
    
    <div id="family-container">
        {{-- ANGGOTA #1: KEPALA KELUARGA --}}
        <div class="member-card border-info border-opacity-50 shadow">
            <span class="member-number">ANGGOTA #1 (KEPALA KELUARGA / ANDA)</span>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label text-info">Nama Lengkap</label>
                    <input type="text" name="anggota[1][nama]" class="form-control" value="{{ strtoupper($user->profile->nama_lengkap) }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-info">NIK</label>
                    <input type="text" name="anggota[1][nik]" class="form-control" value="{{ $user->profile->nik }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-info">Hubungan Keluarga</label>
                    <input type="text" name="anggota[1][status_keluarga]" class="form-control" value="KEPALA KELUARGA" readonly>
                </div>

                <input type="hidden" name="anggota[1][urutan]" value="1">
                <input type="hidden" name="anggota[1][tempat_lahir]" value="{{ $user->profile->tempat_lahir }}">
                <input type="hidden" name="anggota[1][tanggal_lahir]" value="{{ $user->profile->tanggal_lahir }}">
                <input type="hidden" name="anggota[1][jenis_kelamin]" value="{{ $user->profile->jenis_kelamin }}">
                <input type="hidden" name="anggota[1][agama]" value="{{ $user->profile->agama }}">
                <input type="hidden" name="anggota[1][pendidikan]" value="{{ $user->profile->pendidikan }}">
                <input type="hidden" name="anggota[1][pekerjaan]" value="{{ $user->profile->pekerjaan }}">
                <input type="hidden" name="anggota[1][golongan_darah]" value="{{ $user->profile->golongan_darah ?? 'TIDAK TAHU' }}">
                <input type="hidden" name="anggota[1][kewarganegaraan]" value="{{ $user->profile->kewarganegaraan ?? 'WARGA NEGARA INDONESIA' }}">
                <input type="hidden" name="anggota[1][status_perkawinan]" value="{{ $user->profile->status_perkawinan }}">
            </div>
        </div>

        @php 
            $oldAnggota = old('anggota', $savedAnggota ?? []); 
            ksort($oldAnggota);
        @endphp

        @foreach($oldAnggota as $index => $data)
            @if($index > 1)
                <div class="member-card shadow-lg" id="member-{{ $index }}">
                    <span class="member-number">ANGGOTA #{{ $index }}</span>
                    <button type="button" class="btn-remove" onclick="removeMember({{ $index }})"><i class="bi bi-x"></i></button>
                    
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Nama Lengkap</label>
                            <input type="text" name="anggota[{{ $index }}][nama]" class="form-control uppercase-input" required value="{{ $data['nama'] }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">NIK (16 Digit)</label>
                            <input type="text" name="anggota[{{ $index }}][nik]" class="form-control" maxlength="16" minlength="16" required value="{{ $data['nik'] }}" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Hubungan Keluarga</label>
                            <select name="anggota[{{ $index }}][status_keluarga]" class="form-select" required>
                                @foreach(['ISTERI', 'ANAK', 'MENANTU', 'CUCU', 'ORANG TUA', 'MERTUA', 'FAMILI LAIN'] as $rel)
                                    <option value="{{ $rel }}" {{ ($data['status_keluarga'] ?? '') == $rel ? 'selected' : '' }}>{{ $rel }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-3 col-6">
                            <label class="form-label">Tempat Lahir</label>
                            <input type="text" name="anggota[{{ $index }}][tempat_lahir]" class="form-control uppercase-input" required value="{{ $data['tempat_lahir'] }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label class="form-label">Tanggal Lahir</label>
                            <input type="date" name="anggota[{{ $index }}][tanggal_lahir]" class="form-control" required value="{{ $data['tanggal_lahir'] }}">
                        </div>
                        <div class="col-md-3 col-6">
                            <label class="form-label">Jenis Kelamin</label>
                            <select name="anggota[{{ $index }}][jenis_kelamin]" class="form-select" required>
                                <option value="LAKI-LAKI" {{ ($data['jenis_kelamin'] ?? '') == 'LAKI-LAKI' ? 'selected' : '' }}>LAKI-LAKI</option>
                                <option value="PEREMPUAN" {{ ($data['jenis_kelamin'] ?? '') == 'PEREMPUAN' ? 'selected' : '' }}>PEREMPUAN</option>
                            </select>
                        </div>
                        <div class="col-md-3 col-6">
                            <label class="form-label">Agama</label>
                            <select name="anggota[{{ $index }}][agama]" class="form-select" required>
                                @foreach(['ISLAM', 'KRISTEN', 'KATOLIK', 'HINDU', 'BUDHA', 'KONGHUCU'] as $agm)
                                    <option value="{{ $agm }}" {{ ($data['agama'] ?? '') == $agm ? 'selected' : '' }}>{{ $agm }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Pendidikan</label>
                            <select name="anggota[{{ $index }}][pendidikan]" class="form-select" required>
                                @foreach(['TIDAK/BELUM SEKOLAH', 'SD/SEDERAJAT', 'SLTP/SEDERAJAT', 'SLTA/SEDERAJAT', 'DIPLOMA I/II/III', 'STRATA I', 'STRATA II', 'STRATA III'] as $pnd)
                                    <option value="{{ $pnd }}" {{ ($data['pendidikan'] ?? '') == $pnd ? 'selected' : '' }}>{{ $pnd }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pekerjaan</label>
                            <select name="anggota[{{ $index }}][pekerjaan]" class="form-select" required>
                                @foreach(['BELUM/TIDAK BEKERJA', 'PELAJAR/MAHASISWA', 'MENGURUS RUMAH TANGGA', 'KARYAWAN SWASTA', 'WIRASWASTA', 'PEGAWAI NEGERI SIPIL', 'TNI', 'POLRI', 'GURU', 'LAINNYA'] as $pkj)
                                    <option value="{{ $pkj }}" {{ (strtoupper($data['pekerjaan'] ?? '')) == $pkj ? 'selected' : '' }}>{{ $pkj }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status Kawin</label>
                            <select name="anggota[{{ $index }}][status_perkawinan]" class="form-select" required>
                                @foreach(['BELUM KAWIN', 'KAWIN', 'CERAI HIDUP', 'CERAI MATI'] as $stk)
                                    <option value="{{ $stk }}" {{ ($data['status_perkawinan'] ?? '') == $stk ? 'selected' : '' }}>{{ $stk }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2 col-6">
                            <label class="form-label">Goldar</label>
                            <select name="anggota[{{ $index }}][golongan_darah]" class="form-select">
                                @foreach(['TIDAK TAHU', 'A', 'B', 'AB', 'O'] as $gd)
                                    <option value="{{ $gd }}" {{ ($data['golongan_darah'] ?? '') == $gd ? 'selected' : '' }}>{{ $gd }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 col-6">
                            <label class="form-label">WNI/WNA</label>
                            <select name="anggota[{{ $index }}][kewarganegaraan]" class="form-select">
                                <option value="WARGA NEGARA INDONESIA" {{ ($data['kewarganegaraan'] ?? '') == 'WARGA NEGARA INDONESIA' ? 'selected' : '' }}>WNI</option>
                                <option value="WARGA NEGARA ASING" {{ ($data['kewarganegaraan'] ?? '') == 'WARGA NEGARA ASING' ? 'selected' : '' }}>WNA</option>
                            </select>
                        </div>

                        <input type="hidden" name="anggota[{{ $index }}][urutan]" value="{{ $index }}">
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    <div class="text-center mb-5">
        <button type="button" class="btn btn-outline-light btn-sm rounded-pill px-4 shadow-sm" onclick="addMember()">
            <i class="bi bi-plus-circle me-2"></i>Tambah Anggota Keluarga
        </button>
    </div>

    @include('auth.register.partials.buttons', ['backRoute' => route('register.step2')])
</form>
@endsection

@section('scripts')
<script>
let memberCount = {{ (count($oldAnggota) > 0) ? max(array_keys($oldAnggota)) : 1 }};

const listPekerjaan = ['BELUM/TIDAK BEKERJA', 'PELAJAR/MAHASISWA', 'MENGURUS RUMAH TANGGA', 'KARYAWAN BUMN', 'KARYAWAN BUMD', 'KARYAWAN SWASTA', 'WIRASWASTA', 'PENSIUNAN', 'PEGAWAI NEGERI SIPIL', 'TENTARA NASIONAL INDONESIA', 'KEPOLISIAN RI', 'GURU', 'DOSEN', 'DOKTER', 'BIDAN', 'PERAWAT'];
const listPendidikan = ['SD/SEDERAJAT', 'TIDAK/BELUM SEKOLAH', 'SLTA/SEDERAJAT', 'SLTP/SEDERAJAT', 'BELUM TAMAT SD/SEDERAJAT', 'DIPLOMA IV', 'DIPLOMA I/II', 'AKADEMI/DIPLOMA III/S. MUDA', 'STRATA I', 'STRATA II', 'STRATA III'];
const listStatusKawin = ['BELUM KAWIN', 'KAWIN', 'CERAI HIDUP', 'CERAI MATI'];

function addMember() {
    memberCount++;
    const container = document.getElementById('family-container');
    
    // Dropdown Pendidikan
    let pendidikanOptions = `<option value="" disabled selected>PILIH PENDIDIKAN</option>` + 
                            listPendidikan.map(p => `<option value="${p}">${p}</option>`).join('');
    
    // Dropdown Pekerjaan
    let pekerjaanOptions = `<option value="" disabled selected>PILIH PEKERJAAN</option>` + 
                           listPekerjaan.map(p => `<option value="${p}">${p}</option>`).join('');
    
    // Dropdown Status Kawin
    let kawinOptions = `<option value="" disabled selected>PILIH STATUS</option>` + 
                       listStatusKawin.map(s => `<option value="${s}">${s}</option>`).join('');

    const html = `
    <div class="member-card shadow-lg" id="member-${memberCount}" style="opacity:0; transform: translateY(20px);">
        <span class="member-number">ANGGOTA #${memberCount}</span>
        <button type="button" class="btn-remove" onclick="removeMember(${memberCount})"><i class="bi bi-x"></i></button>
        
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Nama Lengkap</label>
                <input type="text" name="anggota[${memberCount}][nama]" class="form-control uppercase-input" required placeholder="NAMA SESUAI KSK...">
            </div>
            <div class="col-md-4">
                <label class="form-label">NIK (16 Digit)</label>
                <input type="text" name="anggota[${memberCount}][nik]" class="form-control" maxlength="16" minlength="16" required oninput="this.value = this.value.replace(/[^0-9]/g, '');" placeholder="3578...">
            </div>
            <div class="col-md-4">
                <label class="form-label">Hubungan Keluarga</label>
                <select name="anggota[${memberCount}][status_keluarga]" class="form-select" required>
                    <option value="" disabled selected>PILIH HUBUNGAN</option>
                    <option value="ISTERI" ${memberCount === 2 ? 'selected' : ''}>ISTERI</option>
                    <option value="ANAK" ${memberCount > 2 ? 'selected' : ''}>ANAK</option>
                    <option value="MENANTU">MENANTU</option>
                    <option value="CUCU">CUCU</option>
                    <option value="ORANG TUA">ORANG TUA</option>
                    <option value="MERTUA">MERTUA</option>
                    <option value="FAMILI LAIN">FAMILI LAIN</option>
                </select>
            </div>

            <div class="col-md-3 col-6">
                <label class="form-label">Tempat Lahir</label>
                <input type="text" name="anggota[${memberCount}][tempat_lahir]" class="form-control uppercase-input" required>
            </div>
            <div class="col-md-3 col-6">
                <label class="form-label">Tanggal Lahir</label>
                <input type="date" name="anggota[${memberCount}][tanggal_lahir]" class="form-control" required>
            </div>
            <div class="col-md-3 col-6">
                <label class="form-label">Jenis Kelamin</label>
                <select name="anggota[${memberCount}][jenis_kelamin]" class="form-select" required>
                    <option value="" disabled selected>PILIH</option>
                    <option value="LAKI-LAKI">LAKI-LAKI</option>
                    <option value="PEREMPUAN">PEREMPUAN</option>
                </select>
            </div>
            <div class="col-md-3 col-6">
                <label class="form-label">Agama</label>
                <select name="anggota[${memberCount}][agama]" class="form-select" required>
                    <option value="" disabled selected>PILIH</option>
                    <option value="ISLAM">ISLAM</option>
                    <option value="KRISTEN">KRISTEN</option>
                    <option value="KATOLIK">KATOLIK</option>
                    <option value="HINDU">HINDU</option>
                    <option value="BUDHA">BUDHA</option>
                    <option value="KONGHUCU">KONGHUCU</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Pendidikan</label>
                <select name="anggota[${memberCount}][pendidikan]" class="form-select" required>
                    ${pendidikanOptions}
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Pekerjaan</label>
                <select name="anggota[${memberCount}][pekerjaan]" class="form-select" required>
                    ${pekerjaanOptions}
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Status Kawin</label>
                <select name="anggota[${memberCount}][status_perkawinan]" class="form-select" required>
                    ${kawinOptions}
                </select>
            </div>

            <div class="col-md-2 col-6">
                <label class="form-label">Goldar</label>
                <select name="anggota[${memberCount}][golongan_darah]" class="form-select">
                    <option value="TIDAK TAHU" selected>TIDAK TAHU</option>
                    <option value="A">A</option><option value="B">B</option><option value="AB">AB</option><option value="O">O</option>
                </select>
            </div>
            <div class="col-md-2 col-6">
                <label class="form-label">WNI/WNA</label>
                <select name="anggota[${memberCount}][kewarganegaraan]" class="form-select">
                    <option value="WARGA NEGARA INDONESIA" selected>WNI</option>
                    <option value="WARGA NEGARA ASING">WNA</option>
                </select>
            </div>
            <input type="hidden" name="anggota[${memberCount}][urutan]" value="${memberCount}">
        </div>
    </div>`;
    container.insertAdjacentHTML('beforeend', html);
    const newCard = document.getElementById(`member-${memberCount}`);
    setTimeout(() => {
        newCard.style.opacity = '1';
        newCard.style.transform = 'translateY(0)';
    }, 10);
    initUppercase();
}

function removeMember(id) {
    const el = document.getElementById(`member-${id}`);
    if(el) {
        el.style.opacity = '0';
        el.style.transform = 'scale(0.9)';
        setTimeout(() => el.remove(), 300);
    }
}

function initUppercase() {
    document.querySelectorAll('.uppercase-input').forEach(input => {
        input.addEventListener('input', function() {
            this.value = this.value.toUpperCase();
        });
        if(input.value) input.value = input.value.toUpperCase();
    });
}

document.getElementById('formStep3').addEventListener('submit', function() {
    const btn = document.getElementById('btnSubmit');
    if(btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
    }
});

document.addEventListener('DOMContentLoaded', initUppercase);
</script>
@endsection