@extends("layouts.app", ["title" => "Family Health Profile"])

@section("content_body")
    @include("shared.partials.page-title", ["subtitle" => "Healthcare", "title" => "Digital Family Health Profile"])

    <div class="row">
        <!-- Sidebar Info Card (Left Column) -->
        <div class="col-md-4">
            <!-- Family Health Score Card -->
            <div class="card shadow-sm border-0 mb-4 bg-light">
                <div class="card-body text-center">
                    <h5 class="text-uppercase text-muted fs-11 mb-2">CuraLink Family Health Score</h5>
                    
                    @php
                        $score = $family->family_health_score ?? 0;
                        $riskLevel = $family->family_health_risk_level ?? 'Low Risk';
                        $gaugeColors = [
                            'Low Risk' => ['text-success', 'bg-success-subtle', 'border-success'],
                            'Moderate Risk' => ['text-info', 'bg-info-subtle', 'border-info'],
                            'High Risk' => ['text-warning', 'bg-warning-subtle', 'border-warning'],
                            'Very High Risk' => ['text-danger', 'bg-danger-subtle', 'border-danger'],
                        ];
                        $colors = $gaugeColors[$riskLevel] ?? ['text-secondary', 'bg-secondary-subtle', 'border-secondary'];
                    @endphp

                    <div class="d-inline-flex align-items-center justify-content-center border border-4 rounded-circle mb-2 {{ $colors[2] }}" style="width: 110px; height: 110px; background-color: #fff;">
                        <span class="fs-28 font-bold {{ $colors[0] }}">{{ $score }}</span>
                    </div>

                    <div class="mt-2">
                        <span class="badge {{ $colors[0] }} {{ $colors[1] }} px-3 py-1.5 fs-13 border">{{ $riskLevel }}</span>
                    </div>

                    <p class="text-muted fs-11 mt-2 mb-0 px-2">
                        Evaluated automatically based on household disease burden, age distribution, lifestyle risks, and environmental factors.
                    </p>
                </div>
            </div>

            <!-- General Family Card -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <div class="text-center mb-3">
                        @php
                            $contactUser = $family->users()->whereHas('roles', fn($q) => $q->where('slug', 'family-contact'))->first();
                            $contactPatient = null;
                            if ($contactUser) {
                                $contactPatient = $family->patients()->where('name', $contactUser->name)->first();
                            }
                            if (!$contactPatient && $family->head_name) {
                                $contactPatient = $family->patients()->where('name', $family->head_name)->first();
                            }
                        @endphp

                        <div class="avatar-lg rounded-circle d-inline-flex align-items-center justify-content-center overflow-hidden mb-2 border border-2 border-primary shadow-sm" style="width: 72px; height: 72px; background-color: #f8f9fa; margin: 0 auto;">
                            @if($contactPatient && $contactPatient->avatar_path)
                                <img src="{{ asset('storage/' . $contactPatient->avatar_path) }}" alt="{{ $contactPatient->name }}" class="img-fluid w-100 h-100" style="object-fit: cover;">
                            @else
                                <i data-lucide="home" class="text-primary" style="width: 36px; height: 36px;"></i>
                            @endif
                        </div>
                        <h4 class="mb-1">{{ $family->name }}</h4>
                        <p class="text-muted mb-2">Household Code: <code>{{ $family->family_code }}</code></p>
                        <p class="text-muted mb-3">Family Number: <code>{{ $family->family_number ?? 'N/A' }}</code></p>

                        @if ($healthProfile['subscription_active'])
                            <span class="badge bg-success-subtle text-success px-2 py-1 fs-11">Subscription: Active</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger px-2 py-1 fs-11 mb-2 d-inline-block">Subscription: Inactive</span>
                            <div>
                                <a href="{{ route('payments.create', ['family_id' => $family->id]) }}" class="btn btn-warning btn-xs">
                                    <i data-lucide="wallet" class="me-1" style="width: 12px; height: 12px;"></i> Pay Subscription
                                </a>
                            </div>
                        @endif
                    </div>

                    <hr class="my-3">

                    <!-- Head of Household -->
                    <h5 class="text-primary mb-2"><i class="bi bi-person-fill-check me-2"></i>Household Head</h5>
                    @if($family->head_name)
                        <ul class="list-unstyled mb-3 fs-13">
                            <li class="mb-2"><strong>Name:</strong> {{ $family->head_name }}</li>
                            <li class="mb-2"><strong>NRC Number:</strong> {{ $family->head_national_id ?? 'N/A' }}</li>
                            <li class="mb-2"><strong>Phone Number:</strong> {{ $family->head_phone ?? 'N/A' }}</li>
                            <li class="mb-2"><strong>Gender:</strong> {{ ucfirst($family->head_gender ?? 'N/A') }}</li>
                            <li class="mb-2"><strong>DOB/Age:</strong> {{ $family->head_date_of_birth?->format('Y-m-d') ?? 'N/A' }} 
                                @if($family->head_date_of_birth) ({{ $family->head_date_of_birth->age }} yrs) @endif
                            </li>
                            <li class="mb-2"><strong>Occupation:</strong> {{ $family->head_occupation ?? 'N/A' }}</li>
                            <li class="mb-0"><strong>Education:</strong> {{ $family->head_educational_level ?? 'N/A' }}</li>
                        </ul>
                    @else
                        <p class="text-muted fs-12">No head of household profile details registered.</p>
                    @endif

                    <hr class="my-3">

                    <!-- Location & Demographics -->
                    <h5 class="text-primary mb-2"><i class="bi bi-geo-alt-fill me-2"></i>Household Address</h5>
                    <ul class="list-unstyled mb-3 fs-13">
                        <li class="mb-2"><strong>Village/Compound:</strong> {{ $family->village->name }}</li>
                        <li class="mb-2"><strong>Ward:</strong> {{ $family->village->ward->name ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>Constituency:</strong> {{ $family->village->ward->constituency->name ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>District:</strong> {{ $family->village->ward->constituency->district->name ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>Province:</strong> {{ $family->village->ward->constituency->district->province->name ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>Registered By:</strong> {{ $family->registeredBy->name ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>Date Registered:</strong> {{ $family->registration_date?->format('Y-m-d') ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>GPS Location:</strong> <code>{{ $family->gps_location ?? 'N/A' }}</code></li>
                        <li class="mb-2"><strong>Allocated Doctor:</strong> 
                            @if ($family->doctor)
                                <a href="{{ route('doctors.show', $family->doctor->id) }}">{{ $family->doctor->user->name }}</a>
                            @else
                                <span class="text-danger">None Allocated</span>
                            @endif
                        </li>
                    </ul>

                    <hr class="my-3">

                    <!-- Health Codes -->
                    <h5 class="text-primary mb-2"><i class="bi bi-folder2-open me-2"></i>Health Index Codes</h5>
                    <ul class="list-unstyled mb-3 fs-13">
                        <li class="mb-2"><strong>Circunscripción No:</strong> {{ $family->circunscripcion_number ?? 'N/A' }}</li>
                        <li class="mb-2"><strong>CDR Number:</strong> {{ $family->cdr_number ?? 'N/A' }}</li>
                        <li class="mb-0"><strong>EBS Team Number:</strong> {{ $family->ebs_number ?? 'N/A' }}</li>
                    </ul>

                    <hr class="my-3">

                    <!-- Family Portal login -->
                    <h5 class="text-primary mb-2"><i class="bi bi-key-fill me-2"></i>Family Portal Account</h5>
                    @php
                        $contactUser = $family->users()->whereHas('roles', fn($q) => $q->where('slug', 'family-contact'))->first();
                    @endphp
                    @if($contactUser)
                        <div class="alert alert-success py-2 px-3 fs-12 mb-0">
                            <i class="bi bi-check-circle-fill me-1"></i> Account Active<br>
                            <strong>Name:</strong> {{ $contactUser->name }}<br>
                            <strong>Email:</strong> <code>{{ $contactUser->email }}</code>
                        </div>
                    @else
                        <div class="alert alert-warning py-2 px-3 fs-12 mb-2">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i> No Login Account Created
                        </div>
                        <button class="btn btn-outline-primary btn-sm w-100 fs-12" data-bs-toggle="collapse" data-bs-target="#createPortalUserCollapse">
                            Create Portal Account
                        </button>
                        <div class="collapse mt-2" id="createPortalUserCollapse">
                            <form action="{{ route('families.create-contact-user', $family->id) }}" method="POST" class="border p-2 rounded bg-light">
                                @csrf
                                <div class="mb-2">
                                    <label class="form-label fs-11">Name</label>
                                    <input type="text" name="name" class="form-control form-control-sm fs-12" value="{{ $family->head_name ?? $family->name }}" required>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label fs-11">Email</label>
                                    <input type="email" name="email" class="form-control form-control-sm fs-12" placeholder="email@example.com" required>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label fs-11">Password</label>
                                    <input type="password" name="password" class="form-control form-control-sm fs-12" placeholder="Min 8 characters" required>
                                </div>
                                <button type="submit" class="btn btn-primary btn-xs w-100">Save & Enable Portal</button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Main Details Dashboard Area (Right Column) -->
        <div class="col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="header-title">Family Health Assessment Records</h4>
                        <div class="d-flex gap-2">
                            <a href="{{ route('families.pdf', $family->id) }}" class="btn btn-danger btn-sm">
                                <i data-lucide="file-text" class="me-1" style="width: 14px; height: 14px;"></i> Download PDF Profile
                            </a>
                            <a href="{{ route('families.edit', $family->id) }}" class="btn btn-warning btn-sm">
                                <i data-lucide="edit-3" class="me-1" style="width: 14px; height: 14px;"></i> Edit Family Profile
                            </a>
                        </div>
                    </div>

                    <ul class="nav nav-pills bg-light p-1 rounded-3 mb-3 border d-inline-flex flex-wrap" id="familyTabs" role="tablist" style="gap: 4px;">
                        <li class="nav-item">
                            <a class="nav-link rounded active py-2 font-semibold" id="members-tab" data-bs-toggle="tab" href="#members-pane" role="tab">
                                <i class="bi bi-people-fill me-1"></i> Composition ({{ $family->patients->count() }})
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded py-2 font-semibold" id="socioeconomics-tab" data-bs-toggle="tab" href="#socioeconomics-pane" role="tab">
                                <i class="bi bi-house-door-fill me-1"></i> Socioeconomics & Evalu
                            </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-pulse-fill me-1"></i> Risks & 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> Situation (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> Care Plan
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded py-2 font-semibold" id="visits-tab" data-bs-toggle="tab" href="#visits-pane" role="tab">
                                <i class="bi bi-house-fill me-1"></i> Visits
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded py-2 font-semibold" id="family-tree-tab" data-bs-toggle="tab" href="#family-tree-pane" role="tab">
                                <i class="bi bi-diagram-3-fill me-1"></i> Family Tree
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded py-2 font-semibold" id="attachments-tab" data-bs-toggle="tab" href="#attachments-pane" role="tab">
                                <i class="bi bi-file-earmark-medical-fill me-1"></i> Documents ({{ $family->attachments->count() }})
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="familyTabsContent">
                        <!-- TAB 1: Household Members Composition (Section 2) -->
                        <div class="tab-pane fade show active" id="members-pane" role="tabpanel">
                            <!-- Statistics Widget Grid -->
                            <div class="row g-2 mb-3">
                                <div class="col-md-3 col-6">
                                    <div class="card card-body text-center shadow-none border mb-0 p-2">
                                        <h6 class="text-uppercase text-muted fs-10 mb-1">Household Size</h6>
                                        <h4 class="text-primary my-0">{{ $healthProfile['household_size'] }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="card card-body text-center shadow-none border mb-0 p-2">
                                        <h6 class="text-uppercase text-muted fs-10 mb-1">Chronic Cases</h6>
                                        <h4 class="text-danger my-0">{{ $healthProfile['chronic_diseases_count'] }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="card card-body text-center shadow-none border mb-0 p-2">
                                        <h6 class="text-uppercase text-muted fs-10 mb-1">Pregnancies</h6>
                                        <h4 class="text-warning my-0">{{ $healthProfile['pregnancy_status_count'] }}</h4>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="card card-body text-center shadow-none border mb-0 p-2">
                                        <h6 class="text-uppercase text-muted fs-10 mb-1">Seniors (60+)</h6>
                                        <h4 class="text-info my-0">{{ $healthProfile['elderly_residents_count'] }}</h4>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="text-secondary mb-0"><i class="bi bi-people-fill me-2"></i>SECTION 2: FAMILY COMPOSITION</h5>
                                <a href="{{ route('patients.create', ['family_id' => $family->id]) }}" class="btn btn-primary btn-xs">
                                    <i data-lucide="plus" class="me-1" style="width: 12px; height: 12px;"></i> Add Member
                                </a>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover table-centered fs-13 mb-0">
                                    <thead>
                                        <tr class="table-light">
                                            <th>Name</th>
                                            <th>Sex</th>
                                            <th>Age</th>
                                            <th>Relationship</th>
                                            <th>Occupation</th>
                                            <th>Dispensarización</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($family->patients as $patient)
                                            <tr>
                                                <td>
                                                    <strong>{{ $patient->name }}</strong><br>
                                                    <small class="text-muted">NRC: {{ $patient->national_id ?? 'N/A' }}</small>
                                                </td>
                                                <td>{{ ucfirst($patient->gender) }}</td>
                                                <td>{{ $patient->date_of_birth->age }} yrs <br><small class="text-muted">{{ $patient->date_of_birth->format('Y-m-d') }}</small></td>
                                                <td>{{ ucfirst($patient->relationship_to_head ?? 'Member') }}</td>
                                                <td>{{ $patient->occupation ?? 'N/A' }}</td>
                                                <td>
                                                    @if ($patient->is_pregnant)
                                                        <span class="badge bg-warning me-1 mb-1">Pregnant</span>
                                                    @endif
                                                    @if($patient->dispensary_group)
                                                        @php
                                                            $dispColors = ['Group I' => 'bg-success', 'Group II' => 'bg-info', 'Group III' => 'bg-danger', 'Group IV' => 'bg-purple'];
                                                            $dColor = $dispColors[$patient->dispensary_group] ?? 'bg-secondary';
                                                        @endphp
                                                        <span class="badge {{ $dColor }} me-1 mb-1">{{ $patient->dispensary_group }}</span>
                                                    @endif
                                                    @if($patient->dispensary_chronic_conditions)
                                                        <br><small class="text-danger font-semibold">{{ $patient->dispensary_chronic_conditions }}</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('patients.show', $patient->id) }}" class="btn btn-info btn-xs text-white" title="View Electronic Health Record"><i class="bi bi-folder-heart"></i> EHR</a>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted">No family members registered yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 2: Structure & Socioeconomics (Section 3 & 4 + Evaluations) -->
                        <div class="tab-pane fade" id="socioeconomics-pane" role="tabpanel">
                            <div class="row fs-13 mb-4">
                                <div class="col-md-6 mb-3">
                                    <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-diagram-3-fill me-2"></i>SECTION 3: FAMILY STRUCTURE</h5>
                                    <strong>Family Type:</strong> {{ $family->family_type ?? 'N/A' }} <br>
                                    <strong class="d-block mt-2">Family Life Cycle Stage:</strong> {{ $family->family_lifecycle_stage ?? 'N/A' }}
                                </div>
                                <div class="col-md-6 mb-3">
                                    <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-house-door-fill me-2"></i>SECTION 4: SOCIOECONOMIC CONDITIONS</h5>
                                    <div class="row g-2">
                                        <div class="col-6"><strong>House Type:</strong> {{ $family->house_type ?? 'N/A' }}</div>
                                        <div class="col-6"><strong>Ownership:</strong> {{ $family->house_ownership ?? 'N/A' }}</div>
                                        <div class="col-6"><strong>Water Source:</strong> {{ $family->water_source ?? 'N/A' }} ({{ $family->water_distance ?? 'N/A' }})</div>
                                        <div class="col-6"><strong>Sanitation:</strong> {{ $family->toilet_facility ?? 'N/A' }} ({{ $family->waste_disposal ?? 'N/A' }})</div>
                                        <div class="col-6"><strong>Electricity Access:</strong> {{ $family->electricity_access ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Family Health & Living Conditions Evaluations (Model 54-50) -->
                            <div class="border-top pt-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h5 class="text-secondary mb-0"><i class="bi bi-clipboard2-check-fill me-2"></i>FAMILY LIVING CONDITIONS EVALUATIONS (Model 54-50)</h5>
                                    <button type="button" class="btn btn-primary btn-xs" data-bs-toggle="modal" data-bs-target="#logEvaluationModal">
                                        <i class="bi bi-plus-circle me-1"></i> Log Evaluation
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-centered mb-0 fs-12">
                                        <thead>
                                            <tr class="table-light">
                                                <th>Date</th>
                                                <th>Housing</th>
                                                <th>Crowding</th>
                                                <th>Equipment</th>
                                                <th>Income</th>
                                                <th>Functioning</th>
                                                <th>Health Status</th>
                                                <th>Interventions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($family->evaluations as $eval)
                                                <tr>
                                                    <td><strong>{{ $eval->evaluation_date->format('Y-m-d') }}</strong></td>
                                                    <td>
                                                        <span class="badge @if($eval->housing_condition === 'good') bg-success @elseif($eval->housing_condition === 'regular') bg-warning @else bg-danger @endif">{{ ucfirst($eval->housing_condition) }}</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge @if($eval->crowding_index === 'good') bg-success @elseif($eval->crowding_index === 'regular') bg-warning @else bg-danger @endif">{{ ucfirst($eval->crowding_index) }}</span>
                                                        @if($eval->bedroom_count)<br><small class="text-muted">{{ $eval->bedroom_count }} beds</small>@endif
                                                    </td>
                                                    <td>
                                                        <span class="badge @if($eval->basic_equipment === 'good') bg-success @elseif($eval->basic_equipment === 'regular') bg-warning @else bg-danger @endif">{{ ucfirst($eval->basic_equipment) }}</span>
                                                    </td>
                                                    <td>{{ ucfirst(str_replace('_', ' ', $eval->income_satisfaction)) }}</td>
                                                    <td>
                                                        <span class="badge @if($eval->family_functioning === 'functional') bg-success @elseif($eval->family_functioning === 'risk_of_dysfunction') bg-warning @else bg-danger @endif">{{ ucfirst(str_replace('_', ' ', $eval->family_functioning)) }}</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge @if($eval->health_evaluation_status === 'healthy') bg-success @else bg-danger @endif">@if($eval->health_evaluation_status === 'healthy') Healthy @else Problems @endif</span>
                                                    </td>
                                                    <td>
                                                        @forelse($eval->intervention_type ?? [] as $intv)
                                                            <span class="badge bg-info text-white me-1">{{ ucfirst($intv) }}</span>
                                                        @empty
                                                            <span class="text-muted">None</span>
                                                        @endforelse
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8" class="text-center text-muted">No evaluations logged yet.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- TAB 3: Risks & Family History (Section 6, 8, 9) -->
                        <div class="tab-pane fade" id="lifestyle-pane" role="tabpanel">
                            <!-- Section 6: Hereditary Conditions -->
                            <div class="mb-4">
                                <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-heart-pulse-fill me-2"></i>SECTION 6: FAMILY HEREDITARY DISEASES</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-2">
                                        <strong>Conditions present in family:</strong>
                                        <div class="mt-1">
                                            @forelse($family->family_diseases ?? [] as $fd)
                                                <span class="badge bg-danger-subtle text-danger me-1 mb-1">{{ $fd }}</span>
                                            @empty
                                                <span class="text-muted fs-13">None recorded</span>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Diseases Details:</strong>
                                        <p class="text-muted fs-13 bg-light p-2 rounded">{{ $family->family_diseases_details ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Section 8: Lifestyle -->
                            <div class="mb-4">
                                <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-activity me-2"></i>SECTION 8: BEHAVIOURAL ASSESSMENT</h5>
                                <div class="row fs-13">
                                    <div class="col-md-4 mb-2">
                                        <strong>Alcohol Consumption:</strong> <span class="badge bg-light text-dark border">{{ $family->family_alcohol_use ?? 'N/A' }}</span>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <strong>Physical Activity:</strong> <span class="badge bg-light text-dark border">{{ $family->family_physical_activity ?? 'N/A' }}</span>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <strong>Common Family Foods:</strong>
                                        <div class="mt-1">
                                            @forelse($family->family_common_foods ?? [] as $food)
                                                <span class="badge bg-light text-dark border me-1 mb-1">{{ $food }}</span>
                                            @empty
                                                <span class="text-muted fs-13">None specified</span>
                                            @endforelse
                                        </div>
                                    </div>
                                    @if(!empty($family->family_diet_frequency))
                                        <div class="col-12 mb-2">
                                            <strong>Intake Frequencies:</strong>
                                            <div class="row g-2 mt-1">
                                                @foreach($family->family_diet_frequency as $k => $v)
                                                    <div class="col-md-4"><small class="text-muted">{{ ucfirst(str_replace('_', ' ', $k)) }}:</small> <strong>{{ $v }}</strong></div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Section 9: Mental & Social Wellbeing -->
                            <div>
                                <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-people-fill me-2"></i>SECTION 9: MENTAL HEALTH & SOCIAL WELLBEING</h5>
                                <div class="row fs-13">
                                    <div class="col-md-6 mb-2">
                                        <strong>Stressors / Mental Risks:</strong>
                                        <div class="mt-1">
                                            @forelse($family->mental_social_risks ?? [] as $ms)
                                                <span class="badge bg-warning-subtle text-warning me-1 mb-1 border border-warning">{{ $ms }}</span>
                                            @empty
                                                <span class="text-muted">None logged</span>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <strong>Social Support Systems:</strong>
                                        <div class="mt-1">
                                            @forelse($family->social_support_systems ?? [] as $ss)
                                                <span class="badge bg-success-subtle text-success me-1 mb-1 border border-success">{{ $ss }}</span>
                                            @empty
                                                <span class="text-muted">None logged</span>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- TAB 4: Situation Analysis / ASIS (Section 10) -->
                        <div class="tab-pane fade" id="asis-pane" role="tabpanel">
                            <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-graph-up-arrow me-2"></i>SECTION 10: HEALTH SITUATION ANALYSIS (ASIS)</h5>
                            
                            <div class="row fs-13 mb-3">
                                <div class="col-md-6 mb-3">
                                    <strong>Determinants Affecting Family Health:</strong>
                                    <div class="mt-2">
                                        @forelse($family->asis_determinants ?? [] as $det)
                                            <span class="badge bg-danger-subtle text-danger border border-danger me-1 mb-1">{{ $det }}</span>
                                        @empty
                                            <span class="text-muted">No determinants flagged</span>
                                        @endforelse
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <strong>Identified Health Problems:</strong>
                                    <ul class="list-group list-group-flush mt-1 ps-3">
                                        @forelse($family->asis_health_problems ?? [] as $p)
                                            @if($p) <li class="py-1">{{ $p }}</li> @endif
                                        @empty
                                            <span class="text-muted">No health problems specified</span>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>

                            <div class="mb-3">
                                <h6 class="font-semibold text-secondary mb-2">Ranked Priority Problems & Interventions</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped fs-13 mb-0">
                                        <thead>
                                            <tr class="table-light">
                                                <th>Priority Problem</th>
                                                <th>Risk Level</th>
                                                <th>Intervention Required</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($family->asis_priority_problems ?? [] as $pr)
                                                <tr>
                                                    <td><strong>{{ $pr['problem'] ?? 'N/A' }}</strong></td>
                                                    <td>
                                                        @php
                                                            $rColors = ['High' => 'bg-danger', 'Medium' => 'bg-warning', 'Low' => 'bg-success'];
                                                            $rColor = $rColors[$pr['risk_level'] ?? ''] ?? 'bg-secondary';
                                                        @endphp
                                                        <span class="badge {{ $rColor }}">{{ $pr['risk_level'] ?? 'N/A' }}</span>
                                                    </td>
                                                    <td>{{ $pr['intervention'] ?? 'N/A' }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="3" class="text-center text-muted">No priority problems logged</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- TAB 5: Family Care Plan (Section 11) -->
                        <div class="tab-pane fade" id="plan-pane" role="tabpanel">
                            <h5 class="text-secondary border-bottom pb-2"><i class="bi bi-calendar-check-fill me-2"></i>SECTION 11: FAMILY CARE PLAN</h5>
                            
                            <div class="row fs-13 mb-3">
                                <div class="col-md-6 mb-2">
                                    <strong>Preventive Care Actions:</strong>
                                    <div class="mt-1">
                                        @forelse($family->care_plan_preventive_actions ?? [] as $pa)
                                            <span class="badge bg-success-subtle text-success me-1 mb-1 border border-success">{{ $pa }}</span>
                                        @empty
                                            <span class="text-muted">None specified</span>
                                        @endforelse
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <strong>Community Interventions:</strong>
                                    <div class="mt-1">
                                        @forelse($family->care_plan_community_interventions ?? [] as $ci)
                                            <span class="badge bg-info-subtle text-info me-1 mb-1 border border-info">{{ $ci }}</span>
                                        @empty
                                            <span class="text-muted">None specified</span>
                                        @endforelse
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3">
                                <h6 class="font-semibold text-secondary mb-2">Clinical Follow-up Actions Plan</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped fs-13 mb-0">
                                        <thead>
                                            <tr class="table-light">
                                                <th>Family Member</th>
                                                <th>Condition / Objective</th>
                                                <th>Follow-up Date</th>
                                                <th>Responsible Healthcare Worker</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($family->care_plan_clinical_followups ?? [] as $fl)
                                                <tr>
                                                    @if(is_array($fl))
                                                        <td><strong>{{ is_array($fl['member'] ?? null) ? implode(', ', $fl['member']) : ($fl['member'] ?? 'N/A') }}</strong></td>
                                                        <td>{{ is_array($fl['condition'] ?? null) ? implode(', ', $fl['condition']) : ($fl['condition'] ?? 'N/A') }}</td>
                                                        <td>{{ is_array($fl['date'] ?? null) ? implode(', ', $fl['date']) : ($fl['date'] ?? 'N/A') }}</td>
                                                        <td>{{ is_array($fl['worker'] ?? null) ? implode(', ', $fl['worker']) : ($fl['worker'] ?? 'N/A') }}</td>
                                                    @else
                                                        <td colspan="4">{{ is_array($fl) ? implode(', ', $fl) : $fl }}</td>
                                                    @endif
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">No clinical follow-ups logged</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- TAB 6: Home Visit History -->
                        <div class="tab-pane fade" id="visits-pane" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="text-secondary mb-0"><i class="bi bi-house-fill me-2"></i>SECTION 13: HOME VISIT HISTORY</h5>
                                <a href="{{ route('visits.create', ['family_id' => $family->id]) }}" class="btn btn-success btn-xs">
                                    <i data-lucide="calendar" class="me-1" style="width: 12px; height: 12px;"></i> Schedule Visit
                                </a>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover table-centered mb-0 fs-13">
                                    <thead>
                                        <tr class="table-light">
                                            <th>Scheduled Date</th>
                                            <th>Practitioner</th>
                                            <th>Status</th>
                                            <th>Completed At</th>
                                            <th>Purpose / Notes</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($family->homeVisits as $visit)
                                            <tr>
                                                <td><strong>{{ $visit->scheduled_at->format('Y-m-d H:i') }}</strong></td>
                                                <td>{{ $visit->doctor->user->name }}</td>
                                                <td>
                                                    @if($visit->status === 'completed')
                                                        <span class="badge bg-success">Completed</span>
                                                    @elseif($visit->status === 'missed')
                                                        <span class="badge bg-danger">Missed</span>
                                                    @else
                                                        <span class="badge bg-warning">Scheduled</span>
                                                    @endif
                                                </td>
                                                <td>{{ $visit->completed_at ? $visit->completed_at->format('Y-m-d H:i') : 'N/A' }}</td>
                                                <td><small class="text-muted" title="{{ $visit->notes }}">{{ Str::limit($visit->notes, 40) ?? 'N/A' }}</small></td>
                                                <td>
                                                    <a href="{{ route('visits.show', $visit->id) }}" class="btn btn-light btn-xs">Details</a>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">No visits scheduled or completed yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 7: Attachments & Documents -->
                        <div class="tab-pane fade" id="attachments-pane" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                                <h5 class="text-secondary mb-0"><i class="bi bi-file-earmark-medical-fill me-2"></i>ATTACHMENTS & SUPPORTING DOCUMENTS</h5>
                                <button type="button" class="btn btn-primary btn-xs" data-bs-toggle="modal" data-bs-target="#uploadFamilyDocumentModal">
                                    <i class="bi bi-plus-circle me-1"></i> Upload Document
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover table-centered fs-13 mb-0">
                                    <thead>
                                        <tr class="table-light">
                                            <th>Document</th>
                                            <th>Description</th>
                                            <th>Size</th>
                                            <th>Uploaded By</th>
                                            <th>Uploaded At</th>
                                            <th class="text-end">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($family->attachments as $attachment)
                                            <tr>
                                                <td>
                                                    <a href="{{ route('attachments.download', $attachment->id) }}" class="font-bold text-primary">
                                                        @php
                                                            $ext = pathinfo($attachment->file_name, PATHINFO_EXTENSION);
                                                            $icon = match(strtolower($ext)) {
                                                                'pdf' => 'bi-file-pdf-fill text-danger',
                                                                'jpg', 'jpeg', 'png', 'gif', 'webp' => 'bi-file-image-fill text-success',
                                                                'doc', 'docx' => 'bi-file-word-fill text-primary',
                                                                'xls', 'xlsx' => 'bi-file-excel-fill text-success',
                                                                default => 'bi-file-earmark-fill text-secondary'
                                                            };
                                                        @endphp
                                                        <i class="bi {{ $icon }} me-1 fs-15"></i>{{ $attachment->file_name }}
                                                    </a>
                                                </td>
                                                <td>{{ $attachment->description ?? 'N/A' }}</td>
                                                <td>{{ number_format($attachment->file_size / 1024, 1) }} KB</td>
                                                <td>{{ $attachment->uploader->name }}</td>
                                                <td>{{ $attachment->created_at->format('Y-m-d H:i') }}</td>
                                                <td class="text-end">
                                                    <div class="d-flex justify-content-end gap-1">
                                                        <a href="{{ route('attachments.download', $attachment->id) }}" class="btn btn-outline-info btn-xs" title="Download"><i class="bi bi-download"></i></a>
                                                        <form action="{{ route('attachments.destroy', $attachment->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this document?');" class="d-inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-outline-danger btn-xs" title="Delete"><i class="bi bi-trash"></i></button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">No documents uploaded yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 8: Visual Family Tree -->
                        <div class="tab-pane fade" id="family-tree-pane" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                                <h5 class="text-secondary mb-0"><i class="bi bi-diagram-3-fill me-2"></i>FAMILY TREE VISUALIZATION</h5>
                            </div>

                            <style>
                                .family-tree-wrapper {
                                    position: relative;
                                    padding: 30px 15px;
                                    background: #fdfdfd;
                                    border-radius: 12px;
                                    border: 1px solid #e9ebf0;
                                    overflow-x: auto;
                                }
                                .tree-container {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    min-width: 600px;
                                }
                                .tree-row {
                                    display: flex;
                                    justify-content: center;
                                    position: relative;
                                    width: 100%;
                                }
                                .tree-row-parents {
                                    margin-bottom: 40px;
                                }
                                .tree-row-parents.has-kids::after {
                                    content: '';
                                    position: absolute;
                                    bottom: -40px;
                                    left: 50%;
                                    width: 2px;
                                    height: 40px;
                                    background: #cbd5e1;
                                    transform: translateX(-50%);
                                }
                                .tree-row-children {
                                    padding-top: 30px;
                                    display: flex;
                                    justify-content: center;
                                    position: relative;
                                    width: 100%;
                                }
                                .tree-row-children::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: 50%;
                                    width: 2px;
                                    height: 30px;
                                    background: #cbd5e1;
                                    transform: translateX(-50%);
                                }
                                .tree-child-item {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    position: relative;
                                    padding: 0 20px;
                                }
                                .tree-child-item::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 2px;
                                    background: #cbd5e1;
                                }
                                .tree-child-item:first-child::before {
                                    left: 50%;
                                    width: 50%;
                                }
                                .tree-child-item:last-child::before {
                                    right: 50%;
                                    width: 50%;
                                }
                                .tree-child-item:only-child::before {
                                    display: none;
                                }
                                .tree-child-item::after {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: 50%;
                                    width: 2px;
                                    height: 30px;
                                    background: #cbd5e1;
                                    transform: translateX(-50%);
                                }
                                .tree-node-box {
                                    background: #ffffff;
                                    border: 1px solid #e2e8f0;
                                    border-radius: 10px;
                                    padding: 15px;
                                    width: 220px;
                                    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
                                    transition: all 0.2s ease-in-out;
                                    z-index: 10;
                                    position: relative;
                                }
                                .tree-node-box:hover {
                                    transform: translateY(-4px);
                                    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
                                    border-color: #02a0fc;
                                }
                                .tree-node-box.node-male {
                                    border-top: 4px solid #02a0fc;
                                }
                                .tree-node-box.node-female {
                                    border-top: 4px solid #f06292;
                                }
                                .tree-node-box.node-other {
                                    border-top: 4px solid #64748b;
                                }
                                .tree-node-box.node-head {
                                    outline: 2px solid #f59e0b;
                                    outline-offset: 2px;
                                }
                                .tree-node-box.node-deceased {
                                    background-color: #f8fafc;
                                    border-color: #cbd5e1;
                                    opacity: 0.85;
                                }
                                .spouse-linker {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: relative;
                                }
                                .spouse-connection {
                                    width: 30px;
                                    height: 2px;
                                    background: #cbd5e1;
                                }
                                .node-avatar {
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-weight: bold;
                                    font-size: 14px;
                                    flex-shrink: 0;
                                }
                            </style>

                            @php
                                $head = $family->patients->first(function($p) use ($family) {
                                    $rel = strtolower($p->relationship_to_head ?? '');
                                    return $rel === 'self' || $rel === 'head' || strtolower($p->name) === strtolower($family->head_name ?? '');
                                });

                                if (!$head) {
                                    $head = $family->patients->first();
                                }

                                $spouse = null;
                                if ($head) {
                                    $spouse = $family->patients->first(function($p) use ($head) {
                                        $rel = strtolower($p->relationship_to_head ?? '');
                                        return ($rel === 'spouse' || $rel === 'wife' || $rel === 'husband') && $p->id !== $head->id;
                                    });
                                }

                                $children = $family->patients->filter(function($p) use ($head, $spouse) {
                                    $rel = strtolower($p->relationship_to_head ?? '');
                                    $isChildRel = ($rel === 'child' || $rel === 'son' || $rel === 'daughter' || $rel === 'stepchild');
                                    $notHeadOrSpouse = (!$head || $p->id !== $head->id) && (!$spouse || $p->id !== $spouse->id);
                                    return $isChildRel && $notHeadOrSpouse;
                                });

                                $others = $family->patients->filter(function($p) use ($head, $spouse, $children) {
                                    if ($head && $p->id === $head->id) return false;
                                    if ($spouse && $p->id === $spouse->id) return false;
                                    if ($children->contains('id', $p->id)) return false;
                                    return true;
                                });
                            @endphp

                            <div class="family-tree-wrapper">
                                <div class="tree-container">
                                    
                                    <!-- Generation 1: Parents -->
                                    <div class="tree-row tree-row-parents {{ $children->isNotEmpty() ? 'has-kids' : '' }}">
                                        <div class="spouse-linker">
                                            @if ($head)
                                                @php
                                                    $isDeceased = ($head->removal_reason === 'deceased');
                                                    $avatarBg = $head->gender === 'female' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info';
                                                    $initials = strtoupper(substr($head->first_name ?? $head->name, 0, 1) . substr($head->first_surname ?? '', 0, 1));
                                                @endphp
                                                <div class="tree-node-box node-head {{ $isDeceased ? 'node-deceased' : '' }} {{ $head->gender === 'female' ? 'node-female' : ($head->gender === 'male' ? 'node-male' : 'node-other') }}">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <div class="node-avatar {{ $avatarBg }} me-2">
                                                            @if ($head->avatar_path)
                                                                <img src="{{ asset('storage/' . $head->avatar_path) }}" alt="" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                            @else
                                                                {{ $initials ?: '?' }}
                                                            @endif
                                                        </div>
                                                        <div class="text-start text-truncate" style="max-width: 140px;">
                                                            <a href="{{ route('patients.show', $head->id) }}" class="font-bold text-dark fs-13 d-block text-truncate" title="{{ $head->name }}">
                                                                {{ $head->name }}
                                                            </a>
                                                            <small class="text-warning font-semibold text-uppercase fs-9">Head</small>
                                                        </div>
                                                    </div>
                                                    <div class="text-start fs-11 border-top pt-2">
                                                        <div><strong>Age:</strong> {{ $head->date_of_birth->age }} yrs ({{ ucfirst($head->gender) }})</div>
                                                        @if ($head->dispensary_group)
                                                            <span class="badge bg-info-subtle text-info mt-1">{{ $head->dispensary_group }}</span>
                                                        @endif
                                                        @if ($isDeceased)
                                                            <span class="badge bg-secondary text-white mt-1">Deceased</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            @else
                                                <div class="tree-node-box border-dashed text-center p-3" style="width: 220px;">
                                                    <span class="text-muted fs-12">No Head Registered</span>
                                                </div>
                                            @endif

                                            @if ($spouse)
                                                <div class="spouse-connection"></div>
                                                @php
                                                    $isDeceased = ($spouse->removal_reason === 'deceased');
                                                    $avatarBg = $spouse->gender === 'female' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info';
                                                    $initials = strtoupper(substr($spouse->first_name ?? $spouse->name, 0, 1) . substr($spouse->first_surname ?? '', 0, 1));
                                                @endphp
                                                <div class="tree-node-box {{ $isDeceased ? 'node-deceased' : '' }} {{ $spouse->gender === 'female' ? 'node-female' : ($spouse->gender === 'male' ? 'node-male' : 'node-other') }}">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <div class="node-avatar {{ $avatarBg }} me-2">
                                                            @if ($spouse->avatar_path)
                                                                <img src="{{ asset('storage/' . $spouse->avatar_path) }}" alt="" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                            @else
                                                                {{ $initials ?: '?' }}
                                                            @endif
                                                        </div>
                                                        <div class="text-start text-truncate" style="max-width: 140px;">
                                                            <a href="{{ route('patients.show', $spouse->id) }}" class="font-bold text-dark fs-13 d-block text-truncate" title="{{ $spouse->name }}">
                                                                {{ $spouse->name }}
                                                            </a>
                                                            <small class="text-muted fs-10">Spouse</small>
                                                        </div>
                                                    </div>
                                                    <div class="text-start fs-11 border-top pt-2">
                                                        <div><strong>Age:</strong> {{ $spouse->date_of_birth->age }} yrs ({{ ucfirst($spouse->gender) }})</div>
                                                        @if ($spouse->dispensary_group)
                                                            <span class="badge bg-info-subtle text-info mt-1">{{ $spouse->dispensary_group }}</span>
                                                        @endif
                                                        @if ($isDeceased)
                                                            <span class="badge bg-secondary text-white mt-1">Deceased</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Generation 2: Children -->
                                    @if ($children->isNotEmpty())
                                        <div class="tree-row tree-row-children">
                                            @foreach ($children as $child)
                                                @php
                                                    $isDeceased = ($child->removal_reason === 'deceased');
                                                    $avatarBg = $child->gender === 'female' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info';
                                                    $initials = strtoupper(substr($child->first_name ?? $child->name, 0, 1) . substr($child->first_surname ?? '', 0, 1));
                                                @endphp
                                                <div class="tree-child-item">
                                                    <div class="tree-node-box {{ $isDeceased ? 'node-deceased' : '' }} {{ $child->gender === 'female' ? 'node-female' : ($child->gender === 'male' ? 'node-male' : 'node-other') }}">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <div class="node-avatar {{ $avatarBg }} me-2">
                                                                @if ($child->avatar_path)
                                                                    <img src="{{ asset('storage/' . $child->avatar_path) }}" alt="" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                                @else
                                                                    {{ $initials ?: '?' }}
                                                                @endif
                                                            </div>
                                                            <div class="text-start text-truncate" style="max-width: 140px;">
                                                                <a href="{{ route('patients.show', $child->id) }}" class="font-bold text-dark fs-13 d-block text-truncate" title="{{ $child->name }}">
                                                                    {{ $child->name }}
                                                                </a>
                                                                <small class="text-muted fs-10">{{ ucfirst($child->relationship_to_head ?? 'Child') }}</small>
                                                            </div>
                                                        </div>
                                                        <div class="text-start fs-11 border-top pt-2">
                                                            <div><strong>Age:</strong> {{ $child->date_of_birth->age }} yrs ({{ ucfirst($child->gender) }})</div>
                                                            @if ($child->dispensary_group)
                                                                <span class="badge bg-info-subtle text-info mt-1">{{ $child->dispensary_group }}</span>
                                                            @endif
                                                            @if ($isDeceased)
                                                                <span class="badge bg-secondary text-white mt-1">Deceased</span>
                                                            @endif
                                                            
                                                            <!-- Parents health indicators on child card -->
                                                            @if ($child->father_name || $child->mother_name)
                                                                <div class="mt-2 text-muted border-top pt-1 fs-9">
                                                                    @if ($child->father_name)
                                                                        <div class="text-truncate">
                                                                            F: {{ $child->father_name }}
                                                                            @if ($child->father_alive === false)
                                                                                <i class="bi bi-x-circle-fill text-danger" title="Deceased - Cause: {{ $child->father_cause_of_death ?? 'Unknown' }}"></i>
                                                                            @else
                                                                                <i class="bi bi-check-circle-fill text-success" title="Alive"></i>
                                                                            @endif
                                                                        </div>
                                                                    @endif
                                                                    @if ($child->mother_name)
                                                                        <div class="text-truncate">
                                                                            M: {{ $child->mother_name }}
                                                                            @if ($child->mother_alive === false)
                                                                                <i class="bi bi-x-circle-fill text-danger" title="Deceased - Cause: {{ $child->mother_cause_of_death ?? 'Unknown' }}"></i>
                                                                            @else
                                                                                <i class="bi bi-check-circle-fill text-success" title="Alive"></i>
                                                                            @endif
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                </div>
                            </div>

                            <!-- Generation 3 / Other Relatives -->
                            @if ($others->isNotEmpty())
                                <div class="mt-4">
                                    <h6 class="text-secondary border-bottom pb-2 font-semibold"><i class="bi bi-people-fill me-2"></i>OTHER HOUSEHOLD MEMBERS</h6>
                                    <div class="d-flex flex-wrap justify-content-center gap-3">
                                        @foreach ($others as $other)
                                            @php
                                                $isDeceased = ($other->removal_reason === 'deceased');
                                                $avatarBg = $other->gender === 'female' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info';
                                                $initials = strtoupper(substr($other->first_name ?? $other->name, 0, 1) . substr($other->first_surname ?? '', 0, 1));
                                            @endphp
                                            <div class="tree-node-box {{ $isDeceased ? 'node-deceased' : '' }} {{ $other->gender === 'female' ? 'node-female' : ($other->gender === 'male' ? 'node-male' : 'node-other') }}" style="width: 220px;">
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="node-avatar {{ $avatarBg }} me-2">
                                                        @if ($other->avatar_path)
                                                            <img src="{{ asset('storage/' . $other->avatar_path) }}" alt="" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                                        @else
                                                            {{ $initials ?: '?' }}
                                                        @endif
                                                    </div>
                                                    <div class="text-start text-truncate" style="max-width: 140px;">
                                                        <a href="{{ route('patients.show', $other->id) }}" class="font-bold text-dark fs-13 d-block text-truncate" title="{{ $other->name }}">
                                                            {{ $other->name }}
                                                        </a>
                                                        <small class="text-muted fs-10">{{ ucfirst($other->relationship_to_head ?? 'Member') }}</small>
                                                    </div>
                                                </div>
                                                <div class="text-start fs-11 border-top pt-2">
                                                    <div><strong>Age:</strong> {{ $other->date_of_birth->age }} yrs ({{ ucfirst($other->gender) }})</div>
                                                    @if ($other->dispensary_group)
                                                        <span class="badge bg-info-subtle text-info mt-1">{{ $other->dispensary_group }}</span>
                                                    @endif
                                                    @if ($isDeceased)
                                                        <span class="badge bg-secondary text-white mt-1">Deceased</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Logging Family Evaluation -->
    <div class="modal fade" id="logEvaluationModal" tabindex="-1" aria-labelledby="logEvaluationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('families.evaluations.store', $family->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title text-primary" id="logEvaluationModalLabel"><i class="bi bi-clipboard2-check-fill me-1"></i>Log Family Health Evaluation (Model 54-50)</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body fs-13">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="evaluation_date" class="form-label font-semibold">Evaluation Date *</label>
                                <input type="date" class="form-control" id="evaluation_date" name="evaluation_date" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="housing_condition" class="form-label font-semibold">Housing Structural Conditions *</label>
                                <select class="form-select" id="housing_condition" name="housing_condition" required>
                                    <option value="good">Good (Buena - solid, well maintained)</option>
                                    <option value="regular">Regular (Requires repair)</option>
                                    <option value="bad">Bad (Mala - unsafe housing)</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="crowding_index" class="form-label font-semibold">Crowding Index (Hacinamiento) *</label>
                                <select class="form-select" id="crowding_index" name="crowding_index" required>
                                    <option value="good">Good (Bueno - low crowding, separate rooms)</option>
                                    <option value="regular">Regular (Separate rooms, but no gender separation)</option>
                                    <option value="bad">Bad (Malo - high crowding, shared rooms)</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="bedroom_count" class="form-label font-semibold">Number of Bedrooms</label>
                                <input type="number" class="form-control" id="bedroom_count" name="bedroom_count" min="0" placeholder="e.g. 2">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="basic_equipment" class="form-label font-semibold">Basic Domestic Equipment *</label>
                                <select class="form-select" id="basic_equipment" name="basic_equipment" required>
                                    <option value="good">Good (TV, radio, fridge, iron + more)</option>
                                    <option value="regular">Regular (Has tv/radio, fridge, iron)</option>
                                    <option value="bad">Bad (Lacks some basic equipment)</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="income_satisfaction" class="form-label font-semibold">Income Satisfaction *</label>
                                <select class="form-select" id="income_satisfaction" name="income_satisfaction" required>
                                    <option value="satisfied">Satisfied</option>
                                    <option value="moderately_satisfied">Moderately Satisfied</option>
                                    <option value="dissatisfied">Dissatisfied</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="family_functioning" class="form-label font-semibold">Family Functioning *</label>
                                <select class="form-select" id="family_functioning" name="family_functioning" required>
                                    <option value="functional">Functional (Good relations & basic functions)</option>
                                    <option value="risk_of_dysfunction">Risk of Dysfunction</option>
                                    <option value="dysfunctional">Dysfunctional</option>
                                </select>
                            </div>
                        </div>

                        <hr class="my-2">

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="health_evaluation_status" class="form-label font-semibold">Family Health Status *</label>
                                <select class="form-select" id="health_evaluation_status" name="health_evaluation_status" required>
                                    <option value="healthy">Healthy (Sin problemas)</option>
                                    <option value="with_problems">With Health Problems (Con problemas)</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block font-semibold">Difficulties causing Health Problems (Select all that apply)</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="health_evaluation_details[]" id="diff_material" value="material_conditions">
                                    <label class="form-check-label" for="diff_material">Material Conditions</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="health_evaluation_details[]" id="diff_health" value="member_health">
                                    <label class="form-check-label" for="diff_health">Member Health</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="health_evaluation_details[]" id="diff_func" value="family_functioning">
                                    <label class="form-check-label" for="diff_func">Functioning</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label d-block font-semibold">Forms of Intervention (Select all that apply)</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="intervention_type[]" id="int_edu" value="educational">
                                <label class="form-check-label" for="int_edu">Educational Intervention (Intervención Educativa)</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="intervention_type[]" id="int_thera" value="therapeutic">
                                <label class="form-check-label" for="int_thera">Therapeutic Intervention (Intervención Terapéutica)</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="special_notes" class="form-label font-semibold">Special Notes & Observations</label>
                            <textarea class="form-control" id="special_notes" name="special_notes" rows="3" placeholder="Log any remarks or notes..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Evaluation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Upload Family Document Modal -->
    <div class="modal fade" id="uploadFamilyDocumentModal" tabindex="-1" aria-labelledby="uploadFamilyDocumentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('attachments.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="attachable_id" value="{{ $family->id }}">
                    <input type="hidden" name="attachable_type" value="family">

                    <div class="modal-header">
                        <h5 class="modal-title text-primary" id="uploadFamilyDocumentModalLabel"><i class="bi bi-plus-circle me-1"></i>Upload Supporting Document</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="familyDocFile" class="form-label">Select Document / Image</label>
                            <input type="file" class="form-control" id="familyDocFile" name="file" required>
                            <div class="form-text text-muted">Max file size: 10MB. Allowed types: PDF, Word, Excel, text, images.</div>
                        </div>
                        <div class="mb-3">
                            <label for="familyDocDescription" class="form-label">Description / Notes</label>
                            <input type="text" class="form-control" id="familyDocDescription" name="description" placeholder="e.g. Proof of Residence, Tenancy Agreement, Registration Doc" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection