@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">Edit Profil</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Edit Profil Penghuni</h1>
        <p class="text-text-secondary">Ubah informasi data diri untuk penghuni <strong>{{ $resident->user->name }}</strong>.</p>
    </div>

    <form action="{{ route('owner.residents.update', $resident) }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        @csrf
        @method('PUT')
        
        <!-- Main Form -->
        <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', $resident->user->name) }}" 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 class="block text-sm font-medium text-text-secondary mb-1">Alamat Email</label>
                            <div class="px-4 py-2.5 bg-surface-2 border border-border rounded-xl text-sm font-semibold text-text-muted">
                                {{ $resident->user->email }}
                            </div>
                            <p class="mt-1 text-[10px] text-text-muted italic">Email tidak dapat diubah.</p>
                        </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', $resident->user->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" 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', $resident->nik) }}" 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', $resident->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', $resident->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', $resident->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', $resident->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', $resident->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', $resident->occupation) }}" 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', $resident->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>

        <!-- Sidebar: Documents & Actions -->
        <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">Foto KTP</h3>
                </div>
                <div class="p-6">
                    @if($resident->ktp_photo)
                        <div class="mb-4 aspect-[16/9] rounded-xl overflow-hidden border border-border">
                            <img src="{{ asset('storage/' . $resident->ktp_photo) }}" class="w-full h-full object-cover">
                        </div>
                    @endif
                    <input type="file" name="ktp_file" class="block w-full text-xs text-text-muted
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-xs file:font-semibold
                        file:bg-primary-50 file:text-primary-700
                        hover:file:bg-primary-100 transition-all
                    ">
                    <p class="mt-2 text-[10px] text-text-muted">Upload ulang jika ingin mengganti foto KTP.</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]">
                    Simpan Perubahan
                </button>
                <a href="{{ route('owner.residents.show', $resident) }}" 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