@if ($surveys)
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="header-title mb-0" aria-label="Survey Details">
                    ID Number: {{ $surveys->structure_id ?? 'N/A' }} - {{ $surveys->pap_name ?? 'Unknown' }}
                </h4>
            </div>

            <div class="card-body">
                <dl class="row mb-0">

                    {{-- Display Family Photo --}}
                    @if (!empty($surveys->SurveyUserResidential) && count($surveys->SurveyUserResidential) > 0)
                        @php
                            $displayedFamilyPhoto = false;
                        @endphp
                        @foreach ($surveys->SurveyUserResidential as $docs)
                            @if (!$displayedFamilyPhoto && !empty($docs['family_photo']))
                                @php
                                    $imagePath = asset(
                                        "storage/uploads/survey/project_{$docs['project_id']}/survey_{$docs['survey_id']}/docs/{$docs['family_photo']}",
                                    );
                                    $fileType = pathinfo($imagePath, PATHINFO_EXTENSION);
                                @endphp

                                <div class="row">
                                    <div class="col-sm-3"><strong>Family Photo:</strong></div>
                                    <div class="col-sm-9">
                                        <a href="javascript:void(0);" class="open-preview" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="View File" data-file-url="{{ $imagePath }}"
                                            data-file-type="{{ $fileType }}">
                                            <img src="{{ $imagePath }}" alt="Family" class="img-thumbnail"
                                                width="150"
                                                onerror="this.onerror=null; this.src='/assets/images/no-image.png';"
                                            >
                                        </a>
                                    </div>
                                </div>

                                @php
                                    $displayedFamilyPhoto = true;
                                @endphp
                            @endif
                        @endforeach
                    @else
                        <div class="row">
                            <div class="col-sm-12"><strong>No documents available.</strong></div>
                        </div>
                    @endif

                    <hr class="my-3">

                    {{-- Display Household Members in Two Columns --}}
                    @if (!empty($surveys->SurveyUserResidentialHouseholdMembers) && count($surveys->SurveyUserResidentialHouseholdMembers) > 0)
                        @foreach ($surveys->SurveyUserResidentialHouseholdMembers as $index => $member)
                            <div class="row">
                                <div class="col-12">
                                    <h5><strong>{{ $index + 1 }}. Household Member Details:</strong></h5>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Name:</strong></div>
                                        <div class="col-sm-7">{{ $member['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Relation:</strong></div>
                                        <div class="col-sm-7">{{ $member['relation']['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Age:</strong></div>
                                        <div class="col-sm-7">{{ $member['age'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Gender:</strong></div>
                                        <div class="col-sm-7">{{ $member['gender']['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Gender Other:</strong></div>
                                        <div class="col-sm-7">{{ $member['gender_other'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Marital Status:</strong></div>
                                        <div class="col-sm-7">{{ $member['maritalStatus']['name'] ?? 'N/A' }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-5"><strong>Education:</strong></div>
                                        <div class="col-sm-7">{{ $member['education']['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Education Other:</strong></div>
                                        <div class="col-sm-7">{{ $member['education_other'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Aadhar Number:</strong></div>
                                        <div class="col-sm-7">{{ $member['aadhaar_number'] ?? 'N/A' }}</div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Occupation:</strong></div>
                                        <div class="col-sm-7">{{ $member['occupation']['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Occupation Other:</strong></div>
                                        <div class="col-sm-7">{{ $member['occupation_other'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Monthly Income Range:</strong></div>
                                        <div class="col-sm-7">{{ $member['monthyRange']['range'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Secondary (if any other-part time):</strong></div>
                                        <div class="col-sm-7">{{ $member['secondary_part_time_income'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Hand/Illn:</strong></div>
                                        <div class="col-sm-7">{{ $member['Hand_llln'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Skill/ Vocational Training:</strong></div>
                                        <div class="col-sm-7">{{ $member['training']['name'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Skill/ Vocational Training Other:</strong></div>
                                        <div class="col-sm-7">{{ $member['training_other'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Distance from Place of Employment:</strong></div>
                                        <div class="col-sm-7">{{ $member['distance_place_employment'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Work Location:</strong></div>
                                        <div class="col-sm-7">{{ $member['work_location'] ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-2">
                        @endforeach
                    @else
                        <div class="row">
                            <div class="col-sm-12"><strong>No household members available.</strong></div>
                        </div>
                    @endif
                </dl>
            </div>
        </div>
    </div>
@else
    <div class="col-12">
        <div class="alert alert-warning text-center">
            No survey found for this project.
        </div>
    </div>
@endif