@extends('layouts.app')
@section('title', isset($family) ? __('Edit Family') : __('Add Family'))
@section('page-title', isset($family) ? __('Edit Family') : __('Add Family'))
@section('content')
<div class="mb-4">
    <a href="{{ route('admin.families.index') }}" class="text-green-600 hover:text-green-800 text-sm">&larr; {{ __('Back') }}</a>
</div>

<form method="POST" action="{{ isset($family) ? route('admin.families.update', $family) : route('admin.families.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($family)) @method('PUT') @endif

    {{-- Basic Info --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 mb-6">
        <h3 class="font-bold text-lg mb-4">{{ app()->getLocale() === 'bn' ? 'মৌলিক তথ্য' : 'Basic Information' }}</h3>
        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Head of Family') }} ({{ __('Bangla') }}) *</label>
                <input type="text" name="head_name_bn" value="{{ old('head_name_bn', $family->head_name_bn ?? '') }}" required
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                @error('head_name_bn') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Head of Family') }} ({{ __('English') }})</label>
                <input type="text" name="head_name_en" value="{{ old('head_name_en', $family->head_name_en ?? '') }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('NID Number') }} *</label>
                <input type="text" name="head_nid" value="{{ old('head_nid', $family->head_nid ?? '') }}" required
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                @error('head_nid') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Phone') }}</label>
                <input type="text" name="head_phone" value="{{ old('head_phone', $family->head_phone ?? '') }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Monthly Income') }} (৳)</label>
                <input type="number" name="monthly_income" value="{{ old('monthly_income', $family->monthly_income ?? '') }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ app()->getLocale() === 'bn' ? 'ছবি' : 'Photo' }}</label>
                <input type="file" name="head_photo" accept="image/*"
                       class="w-full text-sm file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-sm file:bg-green-50 file:text-green-700">
            </div>
        </div>
    </div>

    {{-- Location --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 mb-6">
        <h3 class="font-bold text-lg mb-4">{{ app()->getLocale() === 'bn' ? 'অবস্থান' : 'Location' }}</h3>
        <div class="grid md:grid-cols-2 gap-4" x-data="cascadeDropdown()">
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Division') }} *</label>
                <select x-model="divisionId" @change="loadDistricts()" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    <option value="">{{ __('Select Division') }}</option>
                    @foreach(\App\Models\Division::all() as $div)
                        <option value="{{ $div->id }}">{{ $div->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('District') }} *</label>
                <select x-model="districtId" @change="loadUpazilas()" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    <option value="">{{ __('Select District') }}</option>
                    <template x-for="d in districts" :key="d.id"><option :value="d.id" x-text="d.name"></option></template>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Upazila') }} *</label>
                <select x-model="upazilaId" @change="loadUnions()" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    <option value="">{{ __('Select Upazila') }}</option>
                    <template x-for="u in upazilas" :key="u.id"><option :value="u.id" x-text="u.name"></option></template>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">{{ __('Union') }} *</label>
                <select name="union_id" x-model="unionId" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm" required>
                    <option value="">{{ __('Select Union') }}</option>
                    <template x-for="un in unions" :key="un.id"><option :value="un.id" x-text="un.name"></option></template>
                </select>
                @error('union_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="col-span-2">
                <label class="block text-sm font-medium mb-1">{{ __('Address') }} ({{ __('Bangla') }})</label>
                <textarea name="address_bn" rows="2" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">{{ old('address_bn', $family->address_bn ?? '') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">GPS Lat</label>
                <input type="number" step="any" name="gps_lat" value="{{ old('gps_lat', $family->gps_lat ?? '') }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">GPS Lng</label>
                <input type="number" step="any" name="gps_lng" value="{{ old('gps_lng', $family->gps_lng ?? '') }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
            </div>
        </div>
    </div>

    {{-- Members (Dynamic) --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 mb-6" x-data="memberForm()">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-lg">{{ __('Family Members') }}</h3>
            <button type="button" @click="addMember()" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">+ {{ app()->getLocale() === 'bn' ? 'সদস্য যোগ' : 'Add Member' }}</button>
        </div>
        <template x-for="(member, index) in members" :key="index">
            <div class="border dark:border-gray-700 rounded-lg p-4 mb-4">
                <div class="flex justify-between items-center mb-3">
                    <span class="font-semibold text-sm" x-text="'{{ app()->getLocale() === 'bn' ? 'সদস্য' : 'Member' }} #' + (index + 1)"></span>
                    <button type="button" @click="removeMember(index)" x-show="members.length > 1" class="text-red-500 text-sm hover:text-red-700">&times; {{ app()->getLocale() === 'bn' ? 'মুছুন' : 'Remove' }}</button>
                </div>
                <div class="grid md:grid-cols-3 gap-3">
                    <div>
                        <input type="text" :name="'members['+index+'][name_bn]'" x-model="member.name_bn" placeholder="{{ __('Name') }} *" required class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    </div>
                    <div>
                        <select :name="'members['+index+'][relation_to_head]'" x-model="member.relation_to_head" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                            <option value="self">{{ app()->getLocale() === 'bn' ? 'নিজে' : 'Self' }}</option>
                            <option value="spouse">{{ app()->getLocale() === 'bn' ? 'স্বামী/স্ত্রী' : 'Spouse' }}</option>
                            <option value="son">{{ app()->getLocale() === 'bn' ? 'ছেলে' : 'Son' }}</option>
                            <option value="daughter">{{ app()->getLocale() === 'bn' ? 'মেয়ে' : 'Daughter' }}</option>
                            <option value="father">{{ app()->getLocale() === 'bn' ? 'পিতা' : 'Father' }}</option>
                            <option value="mother">{{ app()->getLocale() === 'bn' ? 'মাতা' : 'Mother' }}</option>
                            <option value="other">{{ app()->getLocale() === 'bn' ? 'অন্যান্য' : 'Other' }}</option>
                        </select>
                    </div>
                    <div>
                        <select :name="'members['+index+'][gender]'" x-model="member.gender" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                            <option value="male">{{ __('Male') }}</option>
                            <option value="female">{{ __('Female') }}</option>
                            <option value="other">{{ __('Other') }}</option>
                        </select>
                    </div>
                    <div>
                        <input type="date" :name="'members['+index+'][dob]'" x-model="member.dob" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm" placeholder="{{ app()->getLocale() === 'bn' ? 'জন্ম তারিখ' : 'DOB' }}">
                    </div>
                    <div>
                        <input type="text" :name="'members['+index+'][nid]'" x-model="member.nid" placeholder="{{ __('NID Number') }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    </div>
                    <div>
                        <input type="number" :name="'members['+index+'][income]'" x-model="member.income" placeholder="{{ __('Monthly Income') }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    </div>
                </div>
            </div>
        </template>
    </div>

    <div class="flex justify-end space-x-3">
        <a href="{{ route('admin.families.index') }}" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-6 py-2 rounded-lg text-sm font-semibold transition">{{ __('Cancel') }}</a>
        <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-semibold transition">{{ __('Save') }}</button>
    </div>
</form>

@push('scripts')
<script>
function cascadeDropdown() {
    return {
        divisionId: '{{ old('division_id', '') }}',
        districtId: '{{ old('district_id', '') }}',
        upazilaId: '{{ old('upazila_id', '') }}',
        unionId: '{{ old('union_id', $family->union_id ?? '') }}',
        districts: [],
        upazilas: [],
        unions: [],
        async loadDistricts() {
            if (!this.divisionId) { this.districts = []; return; }
            const res = await fetch(`/api/divisions/${this.divisionId}/districts`);
            this.districts = await res.json();
            this.districtId = ''; this.upazilas = []; this.unions = [];
        },
        async loadUpazilas() {
            if (!this.districtId) { this.upazilas = []; return; }
            const res = await fetch(`/api/districts/${this.districtId}/upazilas`);
            this.upazilas = await res.json();
            this.upazilaId = ''; this.unions = [];
        },
        async loadUnions() {
            if (!this.upazilaId) { this.unions = []; return; }
            const res = await fetch(`/api/upazilas/${this.upazilaId}/unions`);
            this.unions = await res.json();
            this.unionId = '';
        }
    };
}

function memberForm() {
    return {
        members: [{ name_bn: '', relation_to_head: 'self', gender: 'female', dob: '', nid: '', income: 0 }],
        addMember() {
            this.members.push({ name_bn: '', relation_to_head: 'other', gender: 'male', dob: '', nid: '', income: 0 });
        },
        removeMember(index) {
            this.members.splice(index, 1);
        }
    };
}
</script>
@endpush
@endsection