@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" 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">بحث</button>
                                    <a href="{{ route('form_data.index') }}" class="btn btn-secondary">مسح حقول الادخال</a>
                                    <a href="{{ route('form_data.create') }}" class="btn btn-primary">انشاء جديد</a>
                                </div>
                            </div>
                        </form>

                        <!-- Table -->
                        <div class="table-responsive">
                            <table id="printTable" class="table table-bordered table-striped no-wrap">
                                <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>ذكور</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>{{ $formData->first_name }}</td>
                                            <td>{{ $formData->middle_name }}</td>
                                            <td>{{ $formData->last_name }}</td>
                                            <td>{{ $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 btn-sm">View</a>
                                                <a href="{{ route('form_data.edit', $formData->id) }}" class="btn btn-warning 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 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/>
                            <!-- Pagination -->
                            <div class="d-flex justify-content-center">
                                {{ $formDatas->links() }}
                            </div>
                        </div>
                    </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">
        <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">
                      <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 3 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="3" id="field3Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field3Sel">الاسم الأوسط</label>
                          </td>
                        </tr>
                        <!-- Field 4 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="4" id="field4Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field4Sel">الاسم الثالث</label>
                          </td>
                        </tr>
                        <!-- Field 5 -->
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="5" id="field5Sel" checked>
                            </div>
                          </td>
                          <td>
                            <label class="form-check-label ms-2" for="field5Sel">الاسم الرابع</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="updateTable()">Apply</button>
            <button type="button" class="btn btn-primary" onclick="printSelectedFields()">طباعة</button>
            </div>
        </div>
        </div>
    </div>
  

    <style>
        @media print {
            /* [Existing Print Styles] */
            body * {
                visibility: hidden;
            }
            #printTable, #printTable * {
                visibility: visible;
            }
            #printTable {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                font-size: 7px; /* تقليل حجم الخط أكثر */
            }
            #printTable th,
            #printTable td {
                padding: 2px; /* تقليل الحشو أكثر */
                white-space: nowrap; /* منع النص من الانتقال لسطر جديد */
            }
            #printTable th {
                font-size: 8px; /* حجم خط أكبر قليلاً للعناوين */
            }
            .btn, .pagination {
                display: none !important;
            }
        }
    </style>

    <script>
        // Column mapping configuration
        const columnConfig = [
            { id: 1,  field: null,      label: '#' },
            { id: 2,  field: 'first_name', label: 'الاسم الأول' },
            { id: 3,  field: 'middle_name', label: 'الاسم الأوسط' },
            { id: 4,  field: 'last_name', label: 'الاسم الثالث' },
            { id: 5,  field: 'fourth_name', label: 'الاسم الرابع' },
            { 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: 'رقم جوال عاقل الحارة' }
        ];

        function updateTable() {
            const checkboxes = document.querySelectorAll('#fieldSelectionForm input[type="checkbox"]');
            const selected = Array.from(checkboxes)
                .filter(c => c.checked)
                .map(c => columnConfig.find(cc => cc.id === parseInt(c.value))
                .filter(cc => cc);

            const table = document.getElementById('printTable');
            const formDatas = JSON.parse(document.getElementById('formDataJson').textContent);

            // Rebuild headers
            const thead = table.querySelector('thead');
            thead.innerHTML = `<tr>${selected.map(c => `<th>${c.label}</th>`).join('')}</tr>`;

            // Rebuild body
            const tbody = table.querySelector('tbody');
            tbody.innerHTML = formDatas.map((data, index) => 
                `<tr>${selected.map(c => 
                    `<td>${c.field ? (data[c.field] || '---') : index + 1}</td>`
                ).join('')}</tr>`
            ).join('');
        }

        function printSelectedFields() {
            updateTable();
            window.print();
        }
    </script>
</div>
@endsection