@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.residents.index') }}" class="hover:text-text-primary transition-colors">Penghuni</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Daftar Baru</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Daftarkan Penghuni</h1>
        <p class="text-text-secondary">Lengkapi data diri calon penghuni untuk membuat akun dan profil mereka.</p>
    </div>

    <form action="{{ route('owner.residents.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        @csrf
        
        <!-- Main Form: Resident Profile -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Data Diri Penghuni</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="full_name" class="block text-sm font-medium text-text-secondary mb-1">Nama Lengkap (Sesuai KTP)</label>
                        <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" placeholder="Contoh: Muhammad Akhdan" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                        <x-input-error :messages="$errors->get('full_name')" class="mt-2" />
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="email" class="block text-sm font-medium text-text-secondary mb-1">Alamat Email</label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="email@contoh.com" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                            <x-input-error :messages="$errors->get('email')" class="mt-2" />
                        </div>
                        <div>
                            <label for="phone" class="block text-sm font-medium text-text-secondary mb-1">Nomor WhatsApp</label>
                            <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="0812..." class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                            <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="nik" class="block text-sm font-medium text-text-secondary mb-1">NIK (KTP)</label>
                            <input type="text" id="nik" name="nik" value="{{ old('nik') }}" placeholder="16 digit nomor induk" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                            <x-input-error :messages="$errors->get('nik')" class="mt-2" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-text-secondary mb-1">Jenis Kelamin</label>
                            <div class="flex gap-4 p-1 bg-surface-2 rounded-xl w-fit">
                                <label class="flex items-center gap-2 px-4 py-1.5 rounded-lg cursor-pointer transition-all has-[:checked]:bg-white has-[:checked]:shadow-sm">
                                    <input type="radio" name="gender" value="male" class="sr-only" {{ old('gender') == 'male' ? 'checked' : '' }} required>
                                    <span class="text-xs font-bold text-text-secondary">Laki-laki</span>
                                </label>
                                <label class="flex items-center gap-2 px-4 py-1.5 rounded-lg cursor-pointer transition-all has-[:checked]:bg-white has-[:checked]:shadow-sm">
                                    <input type="radio" name="gender" value="female" class="sr-only" {{ old('gender') == 'female' ? 'checked' : '' }} required>
                                    <span class="text-xs font-bold text-text-secondary">Perempuan</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="birth_place" class="block text-sm font-medium text-text-secondary mb-1">Tempat Lahir</label>
                            <input type="text" id="birth_place" name="birth_place" value="{{ old('birth_place') }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                        <div>
                            <label for="birth_date" class="block text-sm font-medium text-text-secondary mb-1">Tanggal Lahir</label>
                            <input type="date" id="birth_date" name="birth_date" value="{{ old('birth_date') }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                    </div>

                    <div>
                        <label for="origin_address" class="block text-sm font-medium text-text-secondary mb-1">Alamat Asal (Sesuai KTP)</label>
                        <textarea id="origin_address" name="origin_address" rows="3" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">{{ old('origin_address') }}</textarea>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="occupation" class="block text-sm font-medium text-text-secondary mb-1">Pekerjaan</label>
                            <input type="text" id="occupation" name="occupation" value="{{ old('occupation') }}" placeholder="Mahasiswa / Karyawan" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                        <div>
                            <label for="institution" class="block text-sm font-medium text-text-secondary mb-1">Nama Instansi / Kampus</label>
                            <input type="text" id="institution" name="institution" value="{{ old('institution') }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Data Orang Tua / Wali</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="guardian_name" class="block text-sm font-medium text-text-secondary mb-1">Nama Wali</label>
                        <input type="text" id="guardian_name" name="guardian_name" value="{{ old('guardian_name') }}" placeholder="Nama Ayah/Ibu" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="guardian_phone" class="block text-sm font-medium text-text-secondary mb-1">Nomor WhatsApp Wali</label>
                            <input type="text" id="guardian_phone" name="guardian_phone" value="{{ old('guardian_phone') }}" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                        </div>
                        <div>
                            <label for="guardian_relationship" class="block text-sm font-medium text-text-secondary mb-1">Hubungan</label>
                            <select id="guardian_relationship" name="guardian_relationship" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none">
                                <option value="Ayah">Ayah</option>
                                <option value="Ibu">Ibu</option>
                                <option value="Kakak">Kakak</option>
                                <option value="Lainnya">Lainnya</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Form: Documents & Initial Setup -->
        <div class="space-y-6">
            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Dokumen KTP</h3>
                </div>
                <div class="p-6">
                    <div class="aspect-[16/9] w-full bg-slate-50 border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-center p-4 group hover:border-primary-300 transition-colors cursor-pointer relative">
                        <svg class="w-10 h-10 text-text-muted mb-2 group-hover:text-primary-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        <p class="text-[10px] font-bold text-text-muted uppercase tracking-wider">Klik untuk Upload Foto KTP</p>
                        <input type="file" name="ktp_file" class="absolute inset-0 opacity-0 cursor-pointer">
                    </div>
                    <p class="mt-2 text-[10px] text-text-muted text-center italic">Foto harus terlihat jelas dan tidak buram.</p>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-border bg-surface/30">
                    <h3 class="text-base font-bold text-text-primary">Penempatan Awal</h3>
                </div>
                <div class="p-6">
                    <label for="property_id" class="block text-sm font-medium text-text-secondary mb-1">Target Properti</label>
                    <select id="property_id" name="property_id" class="w-full border border-border rounded-xl px-4 py-2.5 text-sm focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 transition-all outline-none" required>
                        <option value="">-- Pilih Properti --</option>
                        @foreach($properties as $property)
                            <option value="{{ $property->id }}" {{ old('property_id') == $property->id ? 'selected' : '' }}>{{ $property->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-3 text-[10px] text-amber-600 bg-amber-50 p-3 rounded-lg border border-amber-100 italic">
                        <strong>Catatan:</strong> Pendaftaran ini hanya mencatat data penghuni. Untuk menetapkan kamar, silakan buat "Kontrak Baru" setelah data penghuni disimpan.
                    </p>
                </div>
            </div>

            <div class="pt-2">
                <button type="submit" class="w-full bg-primary-500 text-white font-bold py-3 px-4 rounded-xl hover:bg-primary-600 transition-all shadow-lg shadow-primary-500/20 active:scale-[0.98]">
                    Daftarkan Penghuni
                </button>
                <a href="{{ route('owner.residents.index') }}" class="block w-full text-center text-sm font-bold text-text-muted mt-4 hover:text-text-primary transition-colors">Batal</a>
            </div>
        </div>
    </form>
@endsection