@php
    // Convert string to array of ints
    $columnsToShow = collect(explode(',', $show_columns ?? ''))
        ->map(fn($c) => (int) trim($c))
        ->filter();
@endphp

<div style="margin-bottom:20px;max-width:90%; margin-right:auto; margin-left:auto;">
    <h4>{{ $title }}</h4>
    <table class="table dataTable table-bordered datatable_from_edit table-condensed th-padding">
        <thead>
            <tr>
                {{-- Always show first name --}}
                @if (!empty($gender))
                    <th class="col-3 text-right">الجنس</th>
                @endif
                @if ($columnsToShow->contains(1))
                    <th class="col-3 text-right">الإسم الأول</th>
                @endif

                @if ($columnsToShow->contains(2))
                    <th class="col-3 text-right">إسم الأب</th>
                @endif

                @if ($columnsToShow->contains(3))
                    <th class="col-3 text-right">إسم الجد</th>
                @endif

                @if ($columnsToShow->contains(5))
                    <th class="col-3 text-right">إسم الجد ٢</th>
                @endif
                @if ($columnsToShow->contains(4))
                    <th class="col-3 text-right">إسم العائلة</th>
                @endif

                <th class="col-3 text-right">تاريخ الميلاد</th>

                <th class="col-3 text-right">تاريخ الوفاة</th>

                @if (empty($viewOnly) || $viewOnly === false)
                    <th class="text-right"></th>
                @endif
            </tr>
        </thead>
        <tbody>
            @php
                if ($relationKey == 'sibling') {
                    $records = $familyregisteration
                        ->relationRecord()
                        ->where('family_relation', $relationKey)
                        ->orderBy('sequence', 'asc')
                        ->get();
                } else {
                    $records = $familyregisteration
                        ->relationRecord()
                        ->where('family_relation', $relationKey)
                        ->orderBy('id', 'asc')
                        ->get();
                }
            @endphp

            @if ($records->isNotEmpty())

                @foreach ($records as $record)
                    <tr>
                        @if (!empty($gender))
                            <td class="col-3 text-right">{{ $record->gender == '0' ? 'ذكر' : 'انثى' }} </td>
                        @endif
                        @if ($columnsToShow->contains(1))
                            <td class="col-3 text-right">{{ $record->name }}</td>
                        @endif
                        @if ($columnsToShow->contains(2))
                            <td class="col-3 text-right">{{ $record->father_name }}</td>
                        @endif
                        @if ($columnsToShow->contains(3))
                            <td class="col-3 text-right">{{ $record->grand_father_name }}</td>
                        @endif
                        @if ($columnsToShow->contains(5))
                            @if (!empty($fifthvalue))
                                <td class="col-3 text-right">{{ $record->next_g_grand_father_one }}</td>
                            @endif
                        @endif
                        @if ($columnsToShow->contains(4))
                            <td class="col-3 text-right">{{ $record->g_grand_father_name }}</td>
                        @endif
                        <td class="col-3 text-right">{{ $record->dob }}</td>

                        <td class="col-3 text-right">{{ $record->dod }}</td>

                        @if (empty($viewOnly) || $viewOnly === false)
                            <td>
                                <ul class="nav quick-section">
                                    <li class="quicklinks actions">
                                        <a id="gear-icon" class="context_menu_btn dropdown-toggle pull-right"
                                            href="#" data-toggle="dropdown">
                                            <i class="fa fa-gear"></i>
                                        </a>
                                        <ul aria-labelledby="user-options" role="menu"
                                            class="dropdown-menu custom-listing-menu">
                                            <li>
                                                <a href="#" class="open-edit-modal" data-toggle="modal"
                                                    data-target="#{{ $modalId }}"
                                                    data-relation="{{ $relationKey }}"
                                                    data-record='@json($record, JSON_HEX_APOS | JSON_HEX_QUOT)'>
                                                    تحرير
                                                </a>


                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        @endif
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="8" class="text-center">لا يوجد بيانات</td>
                </tr>
            @endif
        </tbody>
    </table>
</div>
@if (empty($viewOnly) || $viewOnly === false)
    <!-- Edit relation details modal -->

    <div class="modal fade" id="{{ $modalId }}" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        @if ($modalId === 'grandparentsEditModal')
                            تحرير {{ $title }}
                        @else
                            تحرير إسم {{ $title }}
                        @endif
                    </h4>

                </div>

                <form class="labels-align-verticle" id="form_edit_family_{{ $relationKey }}" method="POST"
                    action="{{ route('admin.familyregisteration.editfamilyRelation') }}">
                    @csrf

                    <div class="modal-body">
                        <input type="hidden" name="family_id" id="family_id_{{ $relationKey }}">

                        {{-- الجنس (if $gender exists) --}}
                        @if (!empty($gender))
                            <div class="form-group " style="margin-bottom:15px;display:block;">
                                <label class="control-label" style="margin-left:10px;">الجنس</label>
                                <select name="gender" id="gender_field_{{ $relationKey }}" class="form-control "
                                    style="width:auto; min-width:120px;">
                                    <option value="0">ذكر</option>
                                    <option value="1">أنثى</option>
                                </select>
                            </div>
                        @endif

                        {{-- All fields in one single row --}}
                        <div class="row">
                            <div class="flex-row" style="display:flex;gap:10px; margin-bottom:5px">
                                @if ($columnsToShow->contains(1))
                                    <div>
                                        <label class="control-label">الإسم الأول</label>
                                        <input type="text" name="name" id="name_field_{{ $relationKey }}"
                                            class="form-control " required>
                                    </div>
                                @endif
                                @if ($columnsToShow->contains(2))
                                    <div>
                                        <label class="control-label">إسم الأب</label>
                                        <input type="text" name="father_name"
                                            id="father_name_field_{{ $relationKey }}" class="form-control ">
                                    </div>
                                @endif
                                @if ($columnsToShow->contains(3))
                                    <div>
                                        <label class="control-label">إسم الجد</label>
                                        <input type="text" name="grand_father_name"
                                            id="grand_father_name_field_{{ $relationKey }}" class="form-control ">
                                    </div>
                                @endif
                                @if ($columnsToShow->contains(5))
                                    @if (!empty($fifthvalue))
                                        <div>
                                            <label class="control-label">إسم الجد ٢</label>
                                            <input type="text" name="next_g_grand_father_one"
                                                id="next_g_grand_father_one_field_{{ $relationKey }}"
                                                class="form-control ">
                                        </div>
                                    @endif
                                @endif
                                @if ($columnsToShow->contains(4))
                                    <div>
                                        <label class="control-label">إسم العائلة</label>
                                        <input type="text" name="g_grand_father_name"
                                            id="g_grand_father_name_field_{{ $relationKey }}" class="form-control ">
                                    </div>
                                @endif
                            </div>
                        </div>
                        <!-- DOB Section -->
                        <div class="row">
                            <div style="align-items: center;" id="family_request_edit-dob">
                                <label style="margin-right: 17px;">تاريخ الميلاد</label>
                                <div class="col-md-6 col-xs-12 make-right">
                                    {{-- Calendar type --}}
                                    <div class="calendar-switch" style="margin-bottom: 2px;">
                                        <label style="display:inline-block; margin-left:15px;">
                                            <input type="radio" name="family_request_edit-birth_calendar_type"
                                                value="greg" {{ $calendarType == 'greg' ? 'checked' : '' }}>
                                            ميلادي
                                        </label>
                                        <label style="display:inline-block; margin-left:15px;">
                                            <input type="radio" name="family_request_edit-birth_calendar_type"
                                                value="hijri" {{ $calendarType == 'hijri' ? 'checked' : '' }}>
                                            هجري
                                        </label>
                                    </div>

                                    {{-- Date type --}}
                                    <div class="infoType" style="margin-bottom: 2px;">
                                        <label style="display:inline-block; margin-left:15px;">
                                            <input type="radio" name="family_request_edit-birth_date_type"
                                                value="calendar" {{ $dateType == 'calendar' ? 'checked' : '' }}>
                                            تقويم
                                        </label>
                                        <label style="display:inline-block; margin-left:15px;">
                                            <input type="radio" name="family_request_edit-birth_date_type"
                                                value="year" {{ $dateType == 'year' ? 'checked' : '' }}>
                                            سنة
                                        </label>
                                    </div>

                                    {{-- Date fields --}}
                                    <div class="date-fields" id="family_request_calendar">
                                        <div id="family_request_dob_calendar_{{ $relationKey }}">
                                            <select class="form-control dob-edit-year-dropdown"
                                                name="family_request-year_dob"
                                                style="{{ $dateType == 'year' ? '' : 'display:none;' }}"
                                                data-selected-year="{{ $dateType == 'year' ? $dob : '' }}">
                                            </select>

                                            <!-- Gregorian -->
                                            <input readonly type="text"
                                                class="form-control birth_edit_normal_calendar"
                                                name="family_request-birth_georj_date"
                                                value="{{ $calendarType == 'greg' && $dateType == 'calendar' ? $dob : '' }}"
                                                placeholder="تاريخ الميلاد (ميلادي)" autocomplete="off">

                                            <!-- Hijri -->
                                            <input readonly type="text"
                                                class="form-control birth_edit_hijri_calendar"
                                                name="family_request-hijri_birth_date"
                                                value="{{ $calendarType == 'hijri' && $dateType == 'calendar' ? $dob : '' }}"
                                                placeholder="تاريخ الميلاد (هجري)" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Living Status Section -->
                        <div class="row">
                            <div class="flex-row" style="align-items: center;"
                                id="family_request_edit-living-status">
                                <label style="margin-right: 17px;">حالة الحياة</label>
                                <div class="col-md-6 col-xs-12 make-right">
                                    <select class="form-control living-status"
                                        name="{{ $relationKey }}_living_status"
                                        data-child-id="{{ $relationKey }}">
                                        <option value="alive">على قيد الحياة</option>
                                        <option value="deceased">متوفي</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- DOD Section -->
                        <div class="row">
                            <div class="flex-row" style="align-items: center;" id="family_request_edit-dod">
                                <div id="dod-section-{{ $relationKey }}" style="display:none;">
                                    <label style="margin-right: 17px;">تاريخ الوفاة</label>
                                    <div class="col-md-6 col-xs-12 make-right dod-section">
                                        {{-- Calendar type --}}
                                        <div class="calendar-switch" style="margin-bottom: 8px;">
                                            <label style="display:inline-block; margin-left:15px;">
                                                <input type="radio" name="family_request_edit-death_calendar_type"
                                                    value="greg" {{ $calendarType == 'greg' ? 'checked' : '' }}>
                                                ميلادي
                                            </label>
                                            <label style="display:inline-block; margin-left:15px;">
                                                <input type="radio" name="family_request_edit-death_calendar_type"
                                                    value="hijri" {{ $calendarType == 'hijri' ? 'checked' : '' }}>
                                                هجري
                                            </label>
                                        </div>
                                        {{-- Date type --}}
                                        <div class="infoType" style="margin-bottom: 8px;">
                                            <label style="display:inline-block; margin-left:15px;">
                                                <input type="radio" name="family_request_edit-death_date_type"
                                                    value="calendar" {{ $dateType == 'calendar' ? 'checked' : '' }}>
                                                تقويم
                                            </label>
                                            <label style="display:inline-block; margin-left:15px;">
                                                <input type="radio" name="family_request_edit-death_date_type"
                                                    value="year" {{ $dateType == 'year' ? 'checked' : '' }}>
                                                سنة
                                            </label>
                                        </div>
                                        {{-- Date fields --}}
                                        <div class="date-fields" id="family_request_calendar">
                                            <div id="family_request_dod_calendar_{{ $relationKey }}">
                                                <select class="form-control dod-edit-year-dropdown"
                                                    name="family_request-year_dod"
                                                    style="{{ $dateType == 'year' ? '' : 'display:none;' }}"
                                                    data-selected-year="{{ $dateType == 'year' ? isset($dod) : '' }}">
                                                </select>
                                                <!-- Gregorian -->
                                                <input readonly type="text"
                                                    class="form-control death_edit_normal_calendar"
                                                    name="family_request-death_georj_date"
                                                    placeholder="تاريخ الوفاة (ميلادي)" autocomplete="off">
                                                <!-- Hijri -->
                                                <input readonly type="text"
                                                    class="form-control death_edit_hijri_calendar"
                                                    name="family_request-death_hijri_date"
                                                    placeholder="تاريخ الوفاة (هجري)" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- end dod --}}
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons"
                            id="submit_family_edit_form_{{ $relationKey }}">
                            تحديث
                        </button>
                    </div>
                </form>

            </div>

        </div>
    </div>
    </div>
@endif