@extends('layouts.app')

@section('title', 'Form Data List')

@section('content')
<div class="page-wrapper">
    <div class="container-fluid" id="top-tabl">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-3">
                            <h4 class="card-title">قائمة بيانات النموذج</h4>
                            <button class="btn btn-success rounded-2" data-toggle="modal" data-target="#fieldSelectionModal">طباعة التقارير</button>
                        </div>

                        <!-- Filter Form -->
                        <form method="GET" action="{{ route('form_data.index') }}" class="mb-4">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <input type="text" name="monthly_income" class="form-control" placeholder="ادخل الدخل الشهري" value="{{ request('monthly_income') }}">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="region" class="form-control" placeholder="ادخل المنطقة" value="{{ request('region') }}">
                                </div>
                            </div>

                            <!-- Second row with the second set of fields -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <input type="number" name="children_below_2" class="form-control" placeholder="عدد الأبناء أقل من 2" value="{{ request('children_below_2') }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="number" name="children_from_2_6" class="form-control" placeholder="عدد الأبناء من 2 إلى 6 سنوات" value="{{ request('children_from_2_6') }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="number" name="children_primary" class="form-control" placeholder="عدد الأبناء في الابتدائية" value="{{ request('children_primary') }}">
                                </div>
                            </div>

                            <!-- Third row with the third set of fields -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <input type="number" name="children_secondary" class="form-control" placeholder="عدد الأبناء في المتوسطة" value="{{ request('children_secondary') }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="number" name="children_high_school" class="form-control" placeholder="عدد الأبناء في الثانوية" value="{{ request('children_high_school') }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="number" name="children_university" class="form-control" placeholder="عدد الأبناء في الجامعة" value="{{ request('children_university') }}">
                                </div>
                            </div>

                            <!-- Fourth row with health condition and buttons -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <select name="health_conditions" class="form-control">
                                        <option value="" disabled selected>اختر الحالة الصحية</option>
                                        <option value="جيدة" {{ request('health_conditions') == 'جيدة' ? 'selected' : '' }}>جيدة</option>
                                        <option value="مريض ضغط" {{ request('health_conditions') == 'مريض ضغط' ? 'selected' : '' }}>مريض ضغط</option>
                                        <option value="مريض سكر" {{ request('health_conditions') == 'مريض سكر' ? 'selected' : '' }}>مريض سكر</option>
                                        <option value="مريض القلب" {{ request('health_conditions') == 'مريض القلب' ? 'selected' : '' }}>مريض القلب</option>
                                        <option value="معاق" {{ request('health_conditions') == 'معاق' ? 'selected' : '' }}>معاق</option>
                                    </select>
                                </div>
                                <div class="col-md-6 d-flex gap-2">
                                    <button type="submit" class="btn btn-primary rounded-2">بحث</button>
                                    <a href="{{ route('form_data.index') }}" class="btn btn-secondary rounded-2">مسح حقول الادخال</a>
                                    <a href="{{ route('form_data.create') }}" class="btn btn-primary rounded-2">انشاء جديد</a>
                                </div>
                            </div>
                        </form>

                        <!-- Table -->
                        <div class="table-responsive">
                            <table id="printTable" class="table table-bordered table-striped no-wrap text-lg-end" dir="rtl">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاسم الكامل</th>
                                        <th>نوع الهوية</th>
                                        <th>رقم الهوية</th>
                                        <th>رقم الجواز</th>
                                        <th>رقم الجوال</th>
                                        <th>رقم الهاتف</th>
                                        <th>رقم الوتس اب</th>
                                        <th>المنطقة</th>
                                        <th>الحي</th>
                                        <th>رقم الوحدة</th>
                                        <th>اقرب معلم للبيت</th>
                                        <th>حالة السكن</th>
                                        <th>قيمة الايجار الشهري</th>
                                        <th>نوع السكن</th>
                                        <th>الوظيفة</th>
                                        <th>الدخل الشهري</th>
                                        <th>الحالة الاجتماعية</th>
                                        <th>اسم الزوج/الزوجة المتوفى/ة</th>
                                        <th>عدد أفراد الأسرة</th>
                                        <th>ذكور</th>
                                        <th>إناث</th>
                                        <th>عدد الأبناء أقل من سنتين</th>
                                        <th>عدد الأبناء من 2 الى 6 سنوات</th>
                                        <th>عدد الأبناء في المرحلة الابتدائية</th>
                                        <th>عدد الأبناء في المرحلة المتوسطة</th>
                                        <th>عدد الأبناء في المرحلة الثانوية</th>
                                        <th>عدد الأبناء في المرحلة الجامعية</th>
                                        <th>غير ذلك</th>
                                        <th>الحالات الصحية</th>
                                        <th>ملاحظات</th>
                                        <th>نوع المهارة المستعد التدريب عليها</th>
                                        <th>الاسم عاقل الحارة</th>
                                        <th>رقم جوال عاقل الحارة</th>
                                        <th>منشىء او ناشىء هذا الأسرة</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($formDatas as $formData)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ implode(' ', array_filter([$formData->first_name, $formData->middle_name, $formData->last_name, $formData->fourth_name])) }}</td>
                                            <td>{{ $formData->number_type }}</td>
                                            <td>{{ $formData->personality }}</td>
                                            <td>{{ $formData->passport }}</td>
                                            <td>{{ $formData->mobile_number }}</td>
                                            <td>{{ $formData->phone_number }}</td>
                                            <td>{{ $formData->whatsup_number }}</td>
                                            <td>{{ $formData->region }}</td>
                                            <td>{{ $formData->neighborhood }}</td>
                                            <td>{{ $formData->unit_number }}</td>
                                            <td>{{ $formData->reference_point }}</td>
                                            <td>{{ $formData->housing_status }}</td>
                                            <td>{{ $formData->monthly_rent }}</td>
                                            <td>{{ $formData->residence_type }}</td>
                                            <td>{{ $formData->occupation }}</td>
                                            <td>{{ number_format($formData->monthly_income, 2) }}</td>
                                            <td>{{ $formData->marital_status }}</td>
                                            <td>
                                                @if($formData->marital_status === 'ارمل/ة')
                                                    {{ $formData->widowed_name }}
                                                @else
                                                    ------------
                                                @endif
                                            </td>
                                            <td>{{ $formData->family_members }}</td>
                                            <td>{{ $formData->males }}</td>
                                            <td>{{ $formData->females }}</td>
                                            <td>{{ $formData->children_below_2 }}</td>
                                            <td>{{ $formData->children_from_2_6 }}</td>
                                            <td>{{ $formData->children_primary }}</td>
                                            <td>{{ $formData->children_secondary }}</td>
                                            <td>{{ $formData->children_high_school }}</td>
                                            <td>{{ $formData->children_university }}</td>
                                            <td>{{ $formData->other }}</td>
                                            <td>{{ $formData->health_conditions }}</td>
                                            <td>{{ $formData->notes }}</td>
                                            <td>{{ $formData->attachments }}</td>
                                            <td>{{ $formData->The_wise_man_heat }}</td>
                                            <td>{{ $formData->number_mobile_wise }}</td>
                                            <td>{{ $formData->user->name ?? 'No User' }}</td>
                                            <td>
                                                <a href="{{ route('form_data.show', $formData->id) }}" class="btn btn-info rounded-2 btn-sm">View</a>
                                                <a href="{{ route('form_data.edit', $formData->id) }}" class="btn btn-warning rounded-2 btn-sm">Edit</a>
                                                <form action="{{ route('form_data.destroy', $formData->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger rounded-2 btn-sm" onclick="return confirm('Are you sure?')">Delete</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="38" class="text-center">No data available.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <br/>
                           
                        </div>
                         
                    </div>
                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                      {{-- {{ $formDatas->links() }} --}}
                     {{ $formDatas->onEachSide(1)->links('pagination::bootstrap-5') }}
                     </div>
                </div>
            </div>
        </div>
    </div>
     
     
    <!-- Add JSON data for JavaScript -->
    <script id="formDataJson" type="application/json">
        @json($formDatas->map(function($item) {
            $data = $item->toArray();
            $data['monthly_income'] = number_format($item->monthly_income, 2);
            return $data;
        }))
    </script>

    <!-- Field Selection Modal (same as before) -->
    <!-- Modal for Field Selection -->
    <div class="modal fade" id="fieldSelectionModal" tabindex="-1" aria-labelledby="fieldSelectionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="fieldSelectionModalLabel">اختر الحقول للطباعة</h5>
            {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
            <button type="button" class="btn-close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
               
           
            </div>
            <div class="modal-body">
                <form id="fieldSelectionForm">
                    <table class="table table-striped table-bordered text-lg-end" dir="rtl">
                      <thead>
                        <tr>
                          <th scope="col">اختر</th>
                          <th scope="col">الحقل</th>
                        </tr>
                      </thead>
                      <tbody>
                        <!-- Note: The checkbox IDs here have "Sel" appended to distinguish them from table cells -->
                        <!-- Field 1 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="1" id="field1Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field1Sel">#</label>
                          </td>
                        </tr>
                        <!-- Field 2 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="2" id="field2Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field2Sel">الاسم الكامل</label>
                          </td>
                        </tr>
                        
                        <!-- Field 6 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="6" id="field6Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field6Sel">نوع الهوية</label>
                          </td>
                        </tr>
                        <!-- Field 7 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="7" id="field7Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field7Sel">رقم الهوية</label>
                          </td>
                        </tr>
                        <!-- Field 8 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="8" id="field8Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field8Sel">رقم الجواز</label>
                          </td>
                        </tr>
                        <!-- Field 9 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="9" id="field9Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field9Sel">رقم الجوال</label>
                          </td>
                        </tr>
                        <!-- Field 10 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="10" id="field10Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field10Sel">رقم الهاتف</label>
                          </td>
                        </tr>
                        <!-- Field 11 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="11" id="field11Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field11Sel">رقم الوتس اب</label>
                          </td>
                        </tr>
                        <!-- Field 12 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="12" id="field12Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field12Sel">المنطقة</label>
                          </td>
                        </tr>
                        <!-- Field 13 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="13" id="field13Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field13Sel">الحي</label>
                          </td>
                        </tr>
                        <!-- Field 14 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="14" id="field14Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field14Sel">رقم الوحدة</label>
                          </td>
                        </tr>
                        <!-- Field 15 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="15" id="field15Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field15Sel">اقرب معلم للبيت</label>
                          </td>
                        </tr>
                        <!-- Field 16 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="16" id="field16Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field16Sel">حالة السكن</label>
                          </td>
                        </tr>
                        <!-- Field 17 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="17" id="field17Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field17Sel">قيمة الايجار الشهري</label>
                          </td>
                        </tr>
                        <!-- Field 18 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="18" id="field18Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field18Sel">نوع السكن</label>
                          </td>
                        </tr>
                        <!-- Field 19 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="19" id="field19Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field19Sel">الوظيفة</label>
                          </td>
                        </tr>
                        <!-- Field 20 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="20" id="field20Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field20Sel">الدخل الشهري</label>
                          </td>
                        </tr>
                        <!-- Field 21 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="21" id="field21Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field21Sel">الحالة الاجتماعية</label>
                          </td>
                        </tr>
                        <!-- Field 22 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="22" id="field22Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field22Sel">اسم الزوج/الزوجة المتوفى/ة</label>
                          </td>
                        </tr>
                        <!-- Field 23 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="23" id="field23Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field23Sel">عدد أفراد الأسرة</label>
                          </td>
                        </tr>
                        <!-- Field 24 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="24" id="field24Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field24Sel">ذكور</label>
                          </td>
                        </tr>
                        <!-- Field 25 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="25" id="field25Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field25Sel">إناث</label>
                          </td>
                        </tr>
                        <!-- Field 26 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="26" id="field26Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field26Sel">عدد الأبناء أقل من سنتين</label>
                          </td>
                        </tr>
                        <!-- Field 27 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="27" id="field27Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field27Sel">عدد الأبناء من 2 الى 6 سنوات</label>
                          </td>
                        </tr>
                        <!-- Field 28 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="28" id="field28Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field28Sel">عدد الأبناء في المرحلة الابتدائية</label>
                          </td>
                        </tr>
                        <!-- Field 29 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="29" id="field29Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field29Sel">عدد الأبناء في المرحلة المتوسطة</label>
                          </td>
                        </tr>
                        <!-- Field 30 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="30" id="field30Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field30Sel">عدد الأبناء في المرحلة الثانوية</label>
                          </td>
                        </tr>
                        <!-- Field 31 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="31" id="field31Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field31Sel">عدد الأبناء في المرحلة الجامعية</label>
                          </td>
                        </tr>
                        <!-- Field 32 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="32" id="field32Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field32Sel">غير ذلك</label>
                          </td>
                        </tr>
                        <!-- Field 33 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="33" id="field33Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field33Sel">الحالات الصحية</label>
                          </td>
                        </tr>
                        <!-- Field 34 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="34" id="field34Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field34Sel">ملاحظات</label>
                          </td>
                        </tr>
                        <!-- Field 35 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="35" id="field35Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field35Sel">نوع المهارة المستعد التدريب عليها</label>
                          </td>
                        </tr>
                        <!-- Field 36 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="36" id="field36Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field36Sel">الاسم عاقل الحارة</label>
                          </td>
                        </tr>
                        <!-- Field 37 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="37" id="field37Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field37Sel">رقم جوال عاقل الحارة</label>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </form>
            </div>
            
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                <button type="button" class="btn btn-primary" onclick="handlePrint()">طباعة</button>
            </div>
            
        </div>
        </div>
    </div>
  

    <style>
      @media print {
          * {
              direction: rtl !important;
              text-align: right !important;
              font-family: 'Tahoma', sans-serif;
          }
          
          body { 
              visibility: hidden;
              margin: 20px;
          }
          
          table {
              visibility: visible;
              width: 100%;
              font-size: 10px;
              border-collapse: collapse;
              table-layout: auto;
          }
          
          th, td {
              padding: 8px 4px;
              border: 1px solid #ddd;
              word-wrap: break-word;
          }
          
          th {
              background-color: #f5f5f5;
              font-weight: bold;
          }
      }
  </style>

<script>
  function handlePrint() {
      // Get selected columns
      const checkboxes = document.querySelectorAll('#fieldSelectionForm input[type="checkbox"]:checked');
      const selectedIds = Array.from(checkboxes).map(c => parseInt(c.value));
      
      // Create temporary print table
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
          <html>
              <head>
                  <title>Print Report</title>
                  
                  <style>
                      @media print {
                          body {
                            direction: rtl !important;
                            text-align: right !important;
                            font-family: 'Tahoma', sans-serif;
                           visibility: hidden;
                          }
                          table { 
                              visibility: visible; 
                              width: 100%; 
                              font-size: 8px; 
                              border-collapse: collapse;
                          }
                          th, td {
                              padding: 2px;
                              border: 1px solid #ddd;
                              text-align: right;
                          }
                      }
                  </style>
              </head>
              <body>
                <h2 style="text-align: center;">قائمة بيانات النموذج</h2>
                  <table>
                      ${generateTableHeader(selectedIds)}
                      ${generateTableBody(selectedIds)}
                  </table>

                  <h2 style="text-align: center;">قائمة بيانات النموذج</h2>
              </body>
          </html>
      `);
      
      printWindow.document.close();
      printWindow.print();
      printWindow.close();
  }
  
  function generateTableHeader(selectedIds) {
      const headers = selectedIds.map(id => {
          const col = columnConfig.find(c => c.id === id);
          return `<th>${col?.label || ''}</th>`;
      }).join('');
      return `<thead><tr>${headers}</tr></thead>`;
  }
  
  function generateTableBody(selectedIds) {
    const formDatas = JSON.parse(document.getElementById('formDataJson').textContent);
    const rows = formDatas.map((data, index) => {
        const cells = selectedIds.map(id => {
            const col = columnConfig.find(c => c.id === id);
            if (!col) return '<td></td>';
            
            let content = '';
            if (col.id === 1) {
                content = index + 1; // Row number
            } else if (col.field === 'full_name') {
                // Combine names manually if full_name is not provided in JSON
                const names = [
                    data.first_name,
                    data.middle_name,
                    data.last_name,
                    data.fourth_name
                ];
                content = names.filter(name => name).join(' ') || '---';
            } else {
                content = data[col.field] || '---';
            }
            return `<td>${content}</td>`;
        }).join('');
        return `<tr>${cells}</tr>`;
    }).join('');
    
    return `<tbody>${rows}</tbody>`;
}
  
  // Column configuration (complete version)
  const columnConfig = [
      { id: 1,  field: null, label: '#' },
      { id: 2,  field: 'full_name', label: 'الاسم الكامل' }, // Combined full name
      { id: 6,  field: 'number_type', label: 'نوع الهوية' },
      { id: 7,  field: 'personality', label: 'رقم الهوية' },
      { id: 8,  field: 'passport', label: 'رقم الجواز' },
      { id: 9,  field: 'mobile_number', label: 'رقم الجوال' },
      { id: 10, field: 'phone_number', label: 'رقم الهاتف' },
      { id: 11, field: 'whatsup_number', label: 'رقم الوتس اب' },
      { id: 12, field: 'region', label: 'المنطقة' },
      { id: 13, field: 'neighborhood', label: 'الحي' },
      { id: 14, field: 'unit_number', label: 'رقم الوحدة' },
      { id: 15, field: 'reference_point', label: 'اقرب معلم للبيت' },
      { id: 16, field: 'housing_status', label: 'حالة السكن' },
      { id: 17, field: 'monthly_rent', label: 'قيمة الايجار الشهري' },
      { id: 18, field: 'residence_type', label: 'نوع السكن' },
      { id: 19, field: 'occupation', label: 'الوظيفة' },
      { id: 20, field: 'monthly_income', label: 'الدخل الشهري' },
      { id: 21, field: 'marital_status', label: 'الحالة الاجتماعية' },
      { id: 22, field: 'widowed_name', label: 'اسم الزوج/الزوجة المتوفى/ة' },
      { id: 23, field: 'family_members', label: 'عدد أفراد الأسرة' },
      { id: 24, field: 'males', label: 'ذكور' },
      { id: 25, field: 'females', label: 'إناث' },
      { id: 26, field: 'children_below_2', label: 'عدد الأبناء أقل من سنتين' },
      { id: 27, field: 'children_from_2_6', label: 'عدد الأبناء من 2 الى 6 سنوات' },
      { id: 28, field: 'children_primary', label: 'عدد الأبناء في المرحلة الابتدائية' },
      { id: 29, field: 'children_secondary', label: 'عدد الأبناء في المرحلة المتوسطة' },
      { id: 30, field: 'children_high_school', label: 'عدد الأبناء في المرحلة الثانوية' },
      { id: 31, field: 'children_university', label: 'عدد الأبناء في المرحلة الجامعية' },
      { id: 32, field: 'other', label: 'غير ذلك' },
      { id: 33, field: 'health_conditions', label: 'الحالات الصحية' },
      { id: 34, field: 'notes', label: 'ملاحظات' },
      { id: 35, field: 'attachments', label: 'نوع المهارة المستعد التدريب عليها' },
      { id: 36, field: 'The_wise_man_heat', label: 'الاسم عاقل الحارة' },
      { id: 37, field: 'number_mobile_wise', label: 'رقم جوال عاقل الحارة' }
  ];
  </script>


</div>
@endsection