@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 Workers in Two Columns --}}
                    @if (!empty($surveys->commercialEmployees) && count($surveys->commercialEmployees) > 0)
                        @foreach ($surveys->commercialEmployees as $index => $member)
                            <div class="row">
                                <div class="col-12">
                                    <h5><strong>{{ $index + 1 }}. Worker Details:</strong></h5>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Employee Name:</strong></div>
                                        <div class="col-sm-7">{{ $member['emp_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>
                                    @if ($member['gender_other'])
                                        <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>
                                    @endif


                                    <div class="row">
                                        <div class="col-sm-5"><strong>Literacy Status:</strong></div>
                                        <div class="col-sm-7">{{ $member['literacy_status'] ?? 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Class Attended:</strong></div>
                                        <div class="col-sm-7">{{ $member['class_attended'] ?? 'N/A' }}</div>
                                    </div>


                                </div>

                                <div class="col-sm-6">

                                    <div class="row">
                                        <div class="col-sm-5"><strong>Monthly Income Range:</strong></div>
                                        <div class="col-sm-7">{{ $member['monthlyRange']['range'] ?? 'N/A' }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-5"><strong>Travel Time From Residence:</strong></div>
                                        <div class="col-sm-7">{{ $member['travel_time_from_residence'] ?? 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-5"><strong>Nature of Work:</strong></div>
                                        <div class="col-sm-7">{{ $member['nature_of_work'] ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-2">
                        @endforeach
                    @else
                        <div class="row">
                            <div class="col-sm-12"><strong>No workers 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