@csrf

<div class="card border-0 shadow-none">
    <div class="card-body p-0">
        <ul class="nav nav-pills bg-light p-1 rounded-3 mb-3 border d-inline-flex flex-wrap" id="familyFormTabs" role="tablist" style="gap: 4px;">
            <li class="nav-item">
                <a class="nav-link rounded active py-2 font-semibold" id="id-tab" data-bs-toggle="tab" href="#id-pane" role="tab">
                    <i class="bi bi-card-heading me-1"></i> 1. Identification & Head
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded py-2 font-semibold" id="socio-tab" data-bs-toggle="tab" href="#socio-pane" role="tab">
                    <i class="bi bi-house-gear-fill me-1"></i> 2. Structure & Socioeconomics
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded py-2 font-semibold" id="lifestyle-tab" data-bs-toggle="tab" href="#lifestyle-pane" role="tab">
                    <i class="bi bi-heart-fill me-1"></i> 3. Lifestyle & History
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded py-2 font-semibold" id="asis-tab" data-bs-toggle="tab" href="#asis-pane" role="tab">
                    <i class="bi bi-graph-up-arrow me-1"></i> 4. Situation Analysis (ASIS)
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded py-2 font-semibold" id="plan-tab" data-bs-toggle="tab" href="#plan-pane" role="tab">
                    <i class="bi bi-calendar-check-fill me-1"></i> 5. Family Care Plan
                </a>
            </li>
        </ul>

        <div class="tab-content" id="familyFormTabsContent">
            <!-- TAB 1: Identification & Head Info -->
            <div class="tab-pane fade show active" id="id-pane" role="tabpanel">
                <h5 class="text-primary mb-3"><i class="bi bi-info-circle me-1"></i>General Identification</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="name" class="form-label">Family / Household Name *</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $family->name ?? '') }}" required placeholder="e.g. Tembo Family">
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="family_number" class="form-label">Family Number</label>
                        <input type="number" min="1" class="form-control @error('family_number') is-invalid @enderror" id="family_number" name="family_number" value="{{ old('family_number', $family->family_number ?? '') }}" placeholder="Leave blank to auto-generate">
                        @error('family_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="registration_date" class="form-label">Date Registered</label>
                        <input type="date" class="form-control @error('registration_date') is-invalid @enderror" id="registration_date" name="registration_date" value="{{ old('registration_date', isset($family->registration_date) ? $family->registration_date->format('Y-m-d') : date('Y-m-d')) }}">
                        @error('registration_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="registered_by_id" class="form-label">Registered By (Healthcare Worker)</label>
                        <select class="form-select @error('registered_by_id') is-invalid @enderror" id="registered_by_id" name="registered_by_id" data-choices>
                            <option value="">Select Worker</option>
                            @foreach ($users as $u)
                                <option value="{{ $u->id }}" {{ old('registered_by_id', $family->registered_by_id ?? '') == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                            @endforeach
                        </select>
                        @error('registered_by_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="village_id" class="form-label">Village / Community *</label>
                        <select class="form-select @error('village_id') is-invalid @enderror" id="village_id" name="village_id" required data-choices>
                            <option value="">Select Village</option>
                            @foreach ($villages as $village)
                                <option value="{{ $village->id }}" {{ old('village_id', $family->village_id ?? '') == $village->id ? 'selected' : '' }}>
                                    {{ $village->name }} ({{ $village->ward->name ?? 'N/A' }})
                                </option>
                            @endforeach
                        </select>
                        @error('village_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="doctor_id" class="form-label">Allocate Doctor</label>
                        <select class="form-select @error('doctor_id') is-invalid @enderror" id="doctor_id" name="doctor_id" data-choices>
                            <option value="">Leave Unallocated</option>
                            @foreach ($doctors as $doc)
                                <option value="{{ $doc->id }}" {{ old('doctor_id', $family->doctor_id ?? '') == $doc->id ? 'selected' : '' }}>
                                    {{ $doc->user->name }} ({{ $doc->district->name }})
                                </option>
                            @endforeach
                        </select>
                        @error('doctor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="gps_location" class="form-label">GPS Coordinates</label>
                        <input type="text" class="form-control @error('gps_location') is-invalid @enderror" id="gps_location" name="gps_location" value="{{ old('gps_location', $family->gps_location ?? '') }}" placeholder="e.g. -15.3875, 28.3228">
                        @error('gps_location') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="phone" class="form-label">Family Contact Phone</label>
                        <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone', $family->phone ?? '') }}" placeholder="e.g. +26097xxxxxx">
                        @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <h5 class="text-primary mt-3 mb-3"><i class="bi bi-person-fill me-1"></i>Head of Household Details</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="head_name" class="form-label">Head Full Name</label>
                        <input type="text" class="form-control @error('head_name') is-invalid @enderror" id="head_name" name="head_name" value="{{ old('head_name', $family->head_name ?? '') }}" placeholder="Full Name">
                        @error('head_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="head_national_id" class="form-label">Head NRC Number</label>
                        <input type="text" class="form-control @error('head_national_id') is-invalid @enderror" id="head_national_id" name="head_national_id" value="{{ old('head_national_id', $family->head_national_id ?? '') }}" placeholder="e.g. 123456/10/1">
                        @error('head_national_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="head_phone" class="form-label">Head Phone Number</label>
                        <input type="text" class="form-control @error('head_phone') is-invalid @enderror" id="head_phone" name="head_phone" value="{{ old('head_phone', $family->head_phone ?? '') }}" placeholder="Head Phone">
                        @error('head_phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="head_gender" class="form-label">Head Gender</label>
                        <select class="form-select @error('head_gender') is-invalid @enderror" id="head_gender" name="head_gender">
                            <option value="">Select Gender</option>
                            <option value="male" {{ old('head_gender', $family->head_gender ?? '') == 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('head_gender', $family->head_gender ?? '') == 'female' ? 'selected' : '' }}>Female</option>
                        </select>
                        @error('head_gender') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="head_date_of_birth" class="form-label">Head Date of Birth</label>
                        <input type="date" class="form-control @error('head_date_of_birth') is-invalid @enderror" id="head_date_of_birth" name="head_date_of_birth" value="{{ old('head_date_of_birth', isset($family->head_date_of_birth) ? $family->head_date_of_birth->format('Y-m-d') : '') }}">
                        @error('head_date_of_birth') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="head_occupation" class="form-label">Head Occupation</label>
                        <select class="form-select @error('head_occupation') is-invalid @enderror" id="head_occupation" name="head_occupation">
                            <option value="">Select Occupation</option>
                            @foreach(['Farmer', 'Civil servant', 'Business owner', 'Student', 'Informal employment', 'Unemployed', 'Other'] as $occ)
                                <option value="{{ $occ }}" {{ old('head_occupation', $family->head_occupation ?? '') == $occ ? 'selected' : '' }}>{{ $occ }}</option>
                            @endforeach
                        </select>
                        @error('head_occupation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="head_educational_level" class="form-label">Head Education Level</label>
                        <select class="form-select @error('head_educational_level') is-invalid @enderror" id="head_educational_level" name="head_educational_level">
                            <option value="">Select Education</option>
                            @foreach(['No formal education', 'Primary', 'Secondary', 'Tertiary'] as $edu)
                                <option value="{{ $edu }}" {{ old('head_educational_level', $family->head_educational_level ?? '') == $edu ? 'selected' : '' }}>{{ $edu }}</option>
                            @endforeach
                        </select>
                        @error('head_educational_level') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <h5 class="text-primary mt-3 mb-3"><i class="bi bi-geo-alt-fill me-1"></i>Detailed Address</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="circunscripcion_number" class="form-label">Circunscripción Number</label>
                        <input type="text" class="form-control @error('circunscripcion_number') is-invalid @enderror" id="circunscripcion_number" name="circunscripcion_number" value="{{ old('circunscripcion_number', $family->circunscripcion_number ?? '') }}" placeholder="e.g. 12">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="cdr_number" class="form-label">CDR Number</label>
                        <input type="text" class="form-control @error('cdr_number') is-invalid @enderror" id="cdr_number" name="cdr_number" value="{{ old('cdr_number', $family->cdr_number ?? '') }}" placeholder="e.g. 4">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="ebs_number" class="form-label">EBS Number</label>
                        <input type="text" class="form-control @error('ebs_number') is-invalid @enderror" id="ebs_number" name="ebs_number" value="{{ old('ebs_number', $family->ebs_number ?? '') }}" placeholder="e.g. 3">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="street" class="form-label">Street / Calle</label>
                        <input type="text" class="form-control" id="street" name="street" value="{{ old('street', $family->street ?? '') }}" placeholder="Street">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="cross_streets" class="form-label">Cross Streets / Entrecalles</label>
                        <input type="text" class="form-control" id="cross_streets" name="cross_streets" value="{{ old('cross_streets', $family->cross_streets ?? '') }}" placeholder="Cross Streets">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="house_number" class="form-label">House Number</label>
                        <input type="text" class="form-control" id="house_number" name="house_number" value="{{ old('house_number', $family->house_number ?? '') }}" placeholder="House No">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label for="apartment_number" class="form-label">Apartment</label>
                        <input type="text" class="form-control" id="apartment_number" name="apartment_number" value="{{ old('apartment_number', $family->apartment_number ?? '') }}" placeholder="Apt No">
                    </div>
                </div>

                <div class="mb-3">
                    <label for="address" class="form-label">Residential Landmarks / General Address</label>
                    <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="2" placeholder="Describe landmarks...">{{ old('address', $family->address ?? '') }}</textarea>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input type="hidden" name="active" value="0">
                        <input type="checkbox" class="form-check-input" id="active" name="active" value="1" {{ old('active', $family->active ?? 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="active">Active Household Status</label>
                    </div>
                </div>
            </div>

            <!-- TAB 2: Structure & Socioeconomics -->
            <div class="tab-pane fade" id="socio-pane" role="tabpanel">
                <h5 class="text-primary mb-3"><i class="bi bi-diagram-3-fill me-1"></i>Section 3: Family Structure Assessment</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="family_type" class="form-label">Type of Family</label>
                        <select class="form-select" id="family_type" name="family_type">
                            <option value="">Select Type</option>
                            @foreach(['Nuclear family', 'Extended family', 'Single-parent family', 'Child-headed household', 'Elderly-headed household', 'Polygamous household', 'Other'] as $ft)
                                <option value="{{ $ft }}" {{ old('family_type', $family->family_type ?? '') == $ft ? 'selected' : '' }}>{{ $ft }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="family_lifecycle_stage" class="form-label">Family Life Cycle Stage</label>
                        <select class="form-select" id="family_lifecycle_stage" name="family_lifecycle_stage">
                            <option value="">Select Stage</option>
                            @foreach(['Newly formed family', 'Family with young children', 'Family with adolescents', 'Family launching children into adulthood', 'Older adult family', 'End-of-life stage'] as $fl)
                                <option value="{{ $fl }}" {{ old('family_lifecycle_stage', $family->family_lifecycle_stage ?? '') == $fl ? 'selected' : '' }}>{{ $fl }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <h5 class="text-primary mt-3 mb-3"><i class="bi bi-house-door-fill me-1"></i>Section 4: Socioeconomic Assessment</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="house_type" class="form-label">Type of House</label>
                        <select class="form-select" id="house_type" name="house_type">
                            <option value="">Select Type</option>
                            @foreach(['Brick house', 'Concrete house', 'Mud house', 'Other'] as $ht)
                                <option value="{{ $ht }}" {{ old('house_type', $family->house_type ?? '') == $ht ? 'selected' : '' }}>{{ $ht }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="house_ownership" class="form-label">Ownership</label>
                        <select class="form-select" id="house_ownership" name="house_ownership">
                            <option value="">Select Ownership</option>
                            @foreach(['Owned', 'Rented', 'Family-owned', 'Informal settlement'] as $ho)
                                <option value="{{ $ho }}" {{ old('house_ownership', $family->house_ownership ?? '') == $ho ? 'selected' : '' }}>{{ $ho }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="electricity_access" class="form-label">Electricity Access</label>
                        <select class="form-select" id="electricity_access" name="electricity_access">
                            <option value="">Select Electricity</option>
                            @foreach(['Grid electricity', 'Solar', 'Generator', 'None'] as $el)
                                <option value="{{ $el }}" {{ old('electricity_access', $family->electricity_access ?? '') == $el ? 'selected' : '' }}>{{ $el }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="water_source" class="form-label">Main Water Source</label>
                        <select class="form-select" id="water_source" name="water_source">
                            <option value="">Select Water Source</option>
                            @foreach(['Piped water', 'Borehole', 'Protected well', 'Unprotected well', 'River/stream'] as $ws)
                                <option value="{{ $ws }}" {{ old('water_source', $family->water_source ?? '') == $ws ? 'selected' : '' }}>{{ $ws }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="water_distance" class="form-label">Distance to Water Source</label>
                        <select class="form-select" id="water_distance" name="water_distance">
                            <option value="">Select Distance</option>
                            @foreach(['<500m', '500m–1km', '>1km'] as $wd)
                                <option value="{{ $wd }}" {{ old('water_distance', $family->water_distance ?? '') == $wd ? 'selected' : '' }}>{{ $wd }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="toilet_facility" class="form-label">Toilet Facility</label>
                        <select class="form-select" id="toilet_facility" name="toilet_facility">
                            <option value="">Select Toilet</option>
                            @foreach(['Flush toilet', 'VIP latrine', 'Pit latrine', 'No toilet'] as $tf)
                                <option value="{{ $tf }}" {{ old('toilet_facility', $family->toilet_facility ?? '') == $tf ? 'selected' : '' }}>{{ $tf }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="waste_disposal" class="form-label">Waste Disposal</label>
                        <select class="form-select" id="waste_disposal" name="waste_disposal">
                            <option value="">Select Disposal</option>
                            @foreach(['Collected', 'Burned', 'Dumped', 'Other'] as $wd)
                                <option value="{{ $wd }}" {{ old('waste_disposal', $family->waste_disposal ?? '') == $wd ? 'selected' : '' }}>{{ $wd }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- TAB 3: Lifestyle & History -->
            <div class="tab-pane fade" id="lifestyle-pane" role="tabpanel">
                <h5 class="text-primary mb-3"><i class="bi bi-heart-pulse-fill me-1"></i>Section 6: Hereditary Conditions (Antecedentes Familiares)</h5>
                <div class="mb-3">
                    <label class="form-label d-block">Does the family have history of:</label>
                    <div class="row">
                        @php
                            $hConditions = ['Hypertension', 'Diabetes', 'Stroke', 'Heart disease', 'Cancer', 'Mental illness', 'Sickle cell disease', 'Asthma', 'Kidney disease'];
                            $famConds = old('family_diseases', $family->family_diseases ?? []);
                        @endphp
                        @foreach($hConditions as $hc)
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="family_diseases[]" value="{{ $hc }}" id="fam_dis_{{ Str::slug($hc) }}" {{ in_array($hc, $famConds) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="fam_dis_{{ Str::slug($hc) }}">{{ $hc }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="mb-3">
                    <label for="family_diseases_details" class="form-label">Family Diseases Details</label>
                    <textarea class="form-control" id="family_diseases_details" name="family_diseases_details" rows="2" placeholder="Elaborate on diagnosed diseases, relationships, ages of onset...">{{ old('family_diseases_details', $family->family_diseases_details ?? '') }}</textarea>
                </div>

                <h5 class="text-primary mt-4 mb-3"><i class="bi bi-activity me-1"></i>Section 8: Family Lifestyle & Behaviour</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="family_alcohol_use" class="form-label">Alcohol Consumption</label>
                        <select class="form-select" id="family_alcohol_use" name="family_alcohol_use">
                            <option value="">Select Level</option>
                            @foreach(['None', 'Occasional', 'Regular', 'Harmful use'] as $al)
                                <option value="{{ $al }}" {{ old('family_alcohol_use', $family->family_alcohol_use ?? '') == $al ? 'selected' : '' }}>{{ $al }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="family_physical_activity" class="form-label">Physical Activity</label>
                        <select class="form-select" id="family_physical_activity" name="family_physical_activity">
                            <option value="">Select Activity</option>
                            @foreach(['Active', 'Moderate', 'Sedentary'] as $pa)
                                <option value="{{ $pa }}" {{ old('family_physical_activity', $family->family_physical_activity ?? '') == $pa ? 'selected' : '' }}>{{ $pa }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label d-block">Common Family Foods</label>
                    <div class="row">
                        @php
                            $foods = ['Nshima', 'Rice', 'Potatoes', 'Vegetables', 'Beef', 'Chicken', 'Fish', 'Beans', 'Porridge'];
                            $famFoods = old('family_common_foods', $family->family_common_foods ?? []);
                        @endphp
                        @foreach($foods as $f)
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="family_common_foods[]" value="{{ $f }}" id="food_{{ Str::slug($f) }}" {{ in_array($f, $famFoods) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="food_{{ Str::slug($f) }}">{{ $f }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row bg-light p-3 rounded mb-3">
                    <h6 class="font-semibold text-secondary mb-2">Frequency of Food Intakes</h6>
                    @foreach(['vegetables' => 'Vegetables', 'fruits' => 'Fruits', 'processed_foods' => 'Processed Foods', 'sugary_drinks' => 'Sugary Drinks', 'salt_intake' => 'Salt Intake'] as $key => $label)
                        <div class="col-md-4 mb-2">
                            <label for="diet_freq_{{ $key }}" class="form-label fs-12">{{ $label }}</label>
                            <select class="form-select form-select-sm" id="diet_freq_{{ $key }}" name="family_diet_frequency[{{ $key }}]">
                                <option value="">Select Frequency</option>
                                @foreach(['Daily', 'Weekly', 'Occasional', 'Never', 'High', 'Moderate', 'Low'] as $fr)
                                    <option value="{{ $fr }}" {{ old("family_diet_frequency.{$key}", $family->family_diet_frequency[$key] ?? '') == $fr ? 'selected' : '' }}>{{ $fr }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>

                <h5 class="text-primary mt-4 mb-3"><i class="bi bi-people-fill me-1"></i>Section 9: Mental Health & Social Wellbeing</h5>
                <div class="mb-3">
                    <label class="form-label d-block">Social / Mental Stressors Present:</label>
                    <div class="row">
                        @php
                            $stressors = ['Domestic violence risk', 'Depression symptoms', 'Anxiety', 'Substance abuse', 'Bereavement', 'Social isolation', 'Financial stress'];
                            $famStres = old('mental_social_risks', $family->mental_social_risks ?? []);
                        @endphp
                        @foreach($stressors as $st)
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="mental_social_risks[]" value="{{ $st }}" id="stres_{{ Str::slug($st) }}" {{ in_array($st, $famStres) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="stres_{{ Str::slug($st) }}">{{ $st }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label d-block">Main Social Support Systems:</label>
                    <div class="row">
                        @php
                            $supports = ['Extended family', 'Religious community', 'Community groups', 'None'];
                            $famSupp = old('social_support_systems', $family->social_support_systems ?? []);
                        @endphp
                        @foreach($supports as $su)
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="social_support_systems[]" value="{{ $su }}" id="supp_{{ Str::slug($su) }}" {{ in_array($su, $famSupp) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="supp_{{ Str::slug($su) }}">{{ $su }}</label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- TAB 4: Situation Analysis (ASIS) -->
            <div class="tab-pane fade" id="asis-pane" role="tabpanel">
                <h5 class="text-primary mb-3"><i class="bi bi-graph-up-arrow me-1"></i>Section 10: Family Health Situation Analysis (ASIS)</h5>
                
                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Determinants Affecting Health</label>
                        <div class="bg-light p-2 rounded">
                            @php
                                $dets = ['Poverty', 'Housing', 'Nutrition', 'Education', 'Environment', 'Employment', 'Access to healthcare'];
                                $famDets = old('asis_determinants', $family->asis_determinants ?? []);
                            @endphp
                            @foreach($dets as $d)
                                <div class="form-check mb-1">
                                    <input type="checkbox" class="form-check-input" name="asis_determinants[]" value="{{ $d }}" id="det_{{ Str::slug($d) }}" {{ in_array($d, $famDets) ? 'checked' : '' }}>
                                    <label class="form-check-label fs-13" for="det_{{ Str::slug($d) }}">{{ $d }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Main Health Problems Identified</label>
                        <div id="asis_problems_container">
                            @php
                                $probs = old('asis_health_problems', $family->asis_health_problems ?? []);
                                if (empty($probs)) $probs = [''];
                            @endphp
                            @foreach($probs as $idx => $p)
                                <div class="d-flex mb-2 align-items-center problem-row">
                                    <input type="text" class="form-control form-control-sm me-2" name="asis_health_problems[]" value="{{ $p }}" placeholder="e.g. Hypertension control, Water sanitization">
                                    <button type="button" class="btn btn-sm btn-danger remove-prob-btn"><i class="bi bi-trash"></i></button>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-info mt-1" id="add_problem_btn"><i class="bi bi-plus-circle me-1"></i>Add Health Problem</button>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Priority Problems Ranked</label>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered fs-13" id="priority_table">
                            <thead>
                                <tr class="table-light">
                                    <th>Priority Problem Description</th>
                                    <th>Risk Level</th>
                                    <th>Intervention Required</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $priorities = old('asis_priority_problems', $family->asis_priority_problems ?? []);
                                @endphp
                                @forelse($priorities as $index => $pr)
                                    <tr>
                                        <td><input type="text" class="form-control form-control-sm" name="asis_priority_problems[{{ $index }}][problem]" value="{{ $pr['problem'] ?? '' }}" required></td>
                                        <td>
                                            <select class="form-select form-select-sm" name="asis_priority_problems[{{ $index }}][risk_level]" required>
                                                <option value="Low" {{ ($pr['risk_level'] ?? '') == 'Low' ? 'selected' : '' }}>Low</option>
                                                <option value="Medium" {{ ($pr['risk_level'] ?? '') == 'Medium' ? 'selected' : '' }}>Medium</option>
                                                <option value="High" {{ ($pr['risk_level'] ?? '') == 'High' ? 'selected' : '' }}>High</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control form-control-sm" name="asis_priority_problems[{{ $index }}][intervention]" value="{{ $pr['intervention'] ?? '' }}"></td>
                                        <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row-btn"><i class="bi bi-trash"></i></button></td>
                                    </tr>
                                @empty
                                    <!-- Fallback single empty row -->
                                    <tr class="empty-priority-row">
                                        <td colspan="4" class="text-center text-muted">No priorities set yet. Click below to add.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <button type="button" class="btn btn-sm btn-info" id="add_priority_btn"><i class="bi bi-plus-circle me-1"></i>Add Priority Problem</button>
                </div>
            </div>

            <!-- TAB 5: Family Care Plan -->
            <div class="tab-pane fade" id="plan-pane" role="tabpanel">
                <h5 class="text-primary mb-3"><i class="bi bi-calendar-check-fill me-1"></i>Section 11: Family Care Plan</h5>
                
                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Preventive Actions</label>
                        <div class="bg-light p-2 rounded">
                            @php
                                $prevActions = ['Health education', 'Screening', 'Vaccination', 'Nutrition counselling', 'Lifestyle modification'];
                                $famPrev = old('care_plan_preventive_actions', $family->care_plan_preventive_actions ?? []);
                            @endphp
                            @foreach($prevActions as $pa)
                                <div class="form-check mb-1">
                                    <input type="checkbox" class="form-check-input" name="care_plan_preventive_actions[]" value="{{ $pa }}" id="prev_{{ Str::slug($pa) }}" {{ in_array($pa, $famPrev) ? 'checked' : '' }}>
                                    <label class="form-check-label fs-13" for="prev_{{ Str::slug($pa) }}">{{ $pa }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Community Interventions</label>
                        <div class="bg-light p-2 rounded">
                            @php
                                $commInts = ['Home visit required', 'Referral required', 'Community health worker involvement', 'Social support referral'];
                                $famComm = old('care_plan_community_interventions', $family->care_plan_community_interventions ?? []);
                            @endphp
                            @foreach($commInts as $ci)
                                <div class="form-check mb-1">
                                    <input type="checkbox" class="form-check-input" name="care_plan_community_interventions[]" value="{{ $ci }}" id="comm_{{ Str::slug($ci) }}" {{ in_array($ci, $famComm) ? 'checked' : '' }}>
                                    <label class="form-check-label fs-13" for="comm_{{ Str::slug($ci) }}">{{ $ci }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Clinical Follow-up actions per member</label>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered fs-13" id="followup_table">
                            <thead>
                                <tr class="table-light">
                                    <th>Family Member</th>
                                    <th>Condition / Objective</th>
                                    <th>Target Follow-up Date</th>
                                    <th>Responsible Worker</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $followups = old('care_plan_clinical_followups', $family->care_plan_clinical_followups ?? []);
                                @endphp
                                @forelse($followups as $index => $fl)
                                    <tr>
                                        <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[{{ $index }}][member]" value="{{ $fl['member'] ?? '' }}" required></td>
                                        <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[{{ $index }}][condition]" value="{{ $fl['condition'] ?? '' }}" required></td>
                                        <td><input type="date" class="form-control form-control-sm" name="care_plan_clinical_followups[{{ $index }}][date]" value="{{ $fl['date'] ?? '' }}"></td>
                                        <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[{{ $index }}][worker]" value="{{ $fl['worker'] ?? '' }}"></td>
                                        <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row-btn"><i class="bi bi-trash"></i></button></td>
                                    </tr>
                                @empty
                                    <tr class="empty-followup-row">
                                        <td colspan="5" class="text-center text-muted">No specific clinical follow-up actions logged.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <button type="button" class="btn btn-sm btn-info" id="add_followup_btn"><i class="bi bi-plus-circle me-1"></i>Add Follow-up Entry</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mt-4 border-top pt-3">
    <button type="submit" class="btn btn-primary px-4">Save Household Health Record</button>
    <a href="{{ route('families.index') }}" class="btn btn-light ms-2">Cancel</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Dynamic Health Problems row adding
    const probContainer = document.getElementById('asis_problems_container');
    const addProbBtn = document.getElementById('add_problem_btn');

    addProbBtn.addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'd-flex mb-2 align-items-center problem-row';
        row.innerHTML = `
            <input type="text" class="form-control form-control-sm me-2" name="asis_health_problems[]" placeholder="e.g. Problem description">
            <button type="button" class="btn btn-sm btn-danger remove-prob-btn"><i class="bi bi-trash"></i></button>
        `;
        probContainer.appendChild(row);
    });

    probContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-prob-btn')) {
            const rows = probContainer.querySelectorAll('.problem-row');
            if (rows.length > 1) {
                e.target.closest('.problem-row').remove();
            } else {
                // Clear input if only one row left
                probContainer.querySelector('input').value = '';
            }
        }
    });

    // Dynamic Priorities adding
    const priorityTable = document.getElementById('priority_table').querySelector('tbody');
    const addPriorityBtn = document.getElementById('add_priority_btn');
    let priorityIndex = {{ count($priorities) }};

    addPriorityBtn.addEventListener('click', function() {
        const emptyRow = priorityTable.querySelector('.empty-priority-row');
        if (emptyRow) emptyRow.remove();

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td><input type="text" class="form-control form-control-sm" name="asis_priority_problems[${priorityIndex}][problem]" required></td>
            <td>
                <select class="form-select form-select-sm" name="asis_priority_problems[${priorityIndex}][risk_level]" required>
                    <option value="Low">Low</option>
                    <option value="Medium" selected>Medium</option>
                    <option value="High">High</option>
                </select>
            </td>
            <td><input type="text" class="form-control form-control-sm" name="asis_priority_problems[${priorityIndex}][intervention]"></td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row-btn"><i class="bi bi-trash"></i></button></td>
        `;
        priorityTable.appendChild(tr);
        priorityIndex++;
    });

    // Dynamic Follow-up adding
    const followupTable = document.getElementById('followup_table').querySelector('tbody');
    const addFollowupBtn = document.getElementById('add_followup_btn');
    let followupIndex = {{ count($followups) }};

    addFollowupBtn.addEventListener('click', function() {
        const emptyRow = followupTable.querySelector('.empty-followup-row');
        if (emptyRow) emptyRow.remove();

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[${followupIndex}][member]" required></td>
            <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[${followupIndex}][condition]" required></td>
            <td><input type="date" class="form-control form-control-sm" name="care_plan_clinical_followups[${followupIndex}][date]"></td>
            <td><input type="text" class="form-control form-control-sm" name="care_plan_clinical_followups[${followupIndex}][worker]"></td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row-btn"><i class="bi bi-trash"></i></button></td>
        `;
        followupTable.appendChild(tr);
        followupIndex++;
    });

    // Delegated table row deletion
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-row-btn')) {
            const row = e.target.closest('tr');
            const tbody = row.parentNode;
            row.remove();

            if (tbody.children.length === 0) {
                if (tbody.id === 'priority_table') {
                    tbody.innerHTML = `<tr class="empty-priority-row"><td colspan="4" class="text-center text-muted">No priorities set yet. Click below to add.</td></tr>`;
                } else {
                    tbody.innerHTML = `<tr class="empty-followup-row"><td colspan="5" class="text-center text-muted">No specific clinical follow-up actions logged.</td></tr>`;
                }
            }
        }
    });
});
</script>