@extends('app')
<style type="text/css">
    #mr_searchbar13,
    #mr_searchbar0 {
        display: none;
    }

    #branchDropdown,
    #requestTypeDropdown,
    #statusDropdown {
        width: 45px;
    }

    th < input#mr_searchbar10.searchbars {
        width: 100px;
    }
</style>
@section('content')
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}"
            style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif


    <div class="row">
        <div class="col-sm-12">
            <div class="grid simple vertical">

                <div class="grid-body no-border overflow-auto">
                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                        <div class="col-sm-5 col-xs-12">
                            <div class="pull-right markaction">
                                @if (Auth::user()->can('familyappregisteration-edit'))
                                    <a href="javascript:void(0)" class="btn btn-default btn-wider source"
                                        id="name">الإسم الأول</a>

                                    <a href="javascript:void(0)" class="btn btn-default btn-wider city-country"
                                        id="city-country">المدينة/البلد</a>
                                    <a href="javascript:void(0)" class="btn btn-default btn-wider status"
                                        id="status">حالة الإستمارة</a>
                                @endif

                                @if (Auth::user()->can('familyappregisteration-destroy'))
                                    <a id="del" href="javascript:void(0)" class="btn btn-wider btn-danger"
                                        data-msg="هل أنت متأكد من الحذف؟"
                                        data-url="{{ route('admin.familyappregisteration.bulkdelete') }}">حذف</a>
                                @endif
                            </div>
                            <span class="pull-right" style="padding-top: 10px"> *الذرية / الأخوة والأخوات &nbsp;</span>


                        </div>

                        <div class="col-sm-2 col-xs-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">الإستمارات المستلمة (App)</span>
                        </div>

                        {{-- <div class="col-sm-5 col-xs-12">
                            @if (Auth::user()->can('familyappregisteration-edit'))
                                <a href="javascript:void(0)" class="btn btn-default btn-wider bulkExport"
                                    id="bulkExportBtn">
                                    Download CSV
                                </a>
                            @endif
                        </div> --}}

                    </div>

                    <table class="table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0"
                        width="100%" style="position: relative;">
                        <thead>
                            <tr style="color: white;">
                                <th width="2%"><input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" /></th>
                                <th width="2%">رقم الإستمارة</th>
                                {{-- <th width="2%">مقدم الطلب</th> --}}
                                <th width="2%">الجنس</th>
                                <th width="2%">الإسم الأول</th>
                                <th width="2%">الأب</th>
                                <th width="2%">الجد ١</th>
                                <th width="2%">الجد ٢</th>
                                <th width="2%">الجد ٣</th>
                                <th width="2%">المدينة</th>
                                <th width="2%">البلد</th>


                                <th width="2%">الهالتف المتحرك</th>
                                <th width="2%">حالة </th>
                                <th width="2%">التاريخ</th>
                                <th width="2%"></th>
                            </tr>
                            <tr class="datatable-filter-row">
                                {{-- <th width="2%"></th> --}}
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                            </tr>
                        </thead>

                    </table>

                </div>
            </div>
        </div>
    </div>
    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" name="ids" id="ids" value="">
    </form>

    {{-- <form method="POST" class="inline" id="bulkExportForm" action="{{ route('admin.familyappregisteration.export') }}">
        @csrf
        <input type="hidden" name="ids_export" id="ids_export" value="">
    </form> --}}

    <!-- NoOriginalDataMessage modal  -->
    <div id="NoOriginalDataMessage" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content">لا توجد بيانات أصلية متاحة</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Delete modal --}}
    <div id="deleteContentModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content">هل أنت متأكد من الحذف؟</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">لا</button>
                    <button type="button" class="btn btn-primary confirm-delete">نعم</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="myEditStatusModal" 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">تحديث الحالة</h4>
                </div>

                <form class="labels-align-verticle" id="form_edit_status" method="POST"
                    action="{{ route('admin.familyappregisteration.editrequeststatus') }}">
                    @csrf

                    <div class="modal-body">
                        <input type="hidden" name="request_id" id="id_field" class="form-control">

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                                        <select name="status" id="statusdropdown" class="form-control" required
                                            style="width: 100%;">
                                            <option value=""></option>
                                            <option value="pending">Pending - P</option>
                                            <option value="ready_for_review">Ready for review - R</option>
                                            <option value="on_hold">On Hold - H</option>
                                        </select>
                                    </div>
                                    <label class="col-md-1 col-xs-12 control-label text-right source_label">الحالة</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            إلغاء
                        </button>

                        <button type="submit" class="btn btn-primary btn-cons" id="submit_edit_status_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <div class="modal fade" id="RowEditModal" 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">تحديث المعلومات</h4>
                </div>

                <form class="labels-align-verticle" id="form_row_edit" method="POST"
                    action="{{ route('admin.familyappregisteration.editrow') }}">
                    @csrf

                    <div class="modal-body">

                        <input type="hidden" id="edit_request_form_id" name="row_id" class="form-control">

                        <div class="row">
                            <div class="col-md-6 col-xs-12">

                                {{-- Country --}}
                                <div class="form-group row">
                                    <div class="input-with-icon right col-md-9 col-sm-12">
                                        <select required name="country" id="country_select"
                                            class="form-control select_country" style="width:100%">
                                            <option value="">اضغط</option>
                                            @foreach ($countries as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="country_select" class="form-label text-right">البلد</label>
                                    </div>
                                </div>

                                {{-- City --}}
                                <div class="form-group row">
                                    <input type="hidden" name="city_hidden" value="{{ $city }}">
                                    <div class="input-with-icon right col-md-9 col-sm-12">
                                        <select required name="city" id="city_select" class="form-control select_city"
                                            style="width:100%">
                                            <option value="">اضغط</option>
                                            @foreach ($city as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="city_select" class="form-label text-right">المدينة</label>
                                    </div>
                                </div>

                                {{-- Current Phone --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="tel" id="number_field" readonly class="form-control">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="number_field" class="form-label text-right">الهاتف المتحرك
                                            الحالي</label>
                                    </div>
                                </div>

                                {{-- New Phone --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="tel" id="phone_field" name="mobile_number" required
                                            class="form-control mobile_number" maxlength="15" minlength="10">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="number_field1" class="form-label text-right">الهاتف المتحرك
                                            الجديد</label>
                                    </div>
                                </div>

                                {{-- Email --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="email" id="email_field" name="email" class="form-control">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="email" class="form-label text-right">البريد الإلكتروني</label>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" name="username" class="form-control" id="username_field"
                                            minlength="8">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="username" class="form-label text-right">اسم المستخدم</label>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" name="password" class="form-control" id="password_field"
                                            required minlength="6" maxlength="10">
                                        <small id="password_error" class="text-danger" style="display:none;"></small>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="password" class="form-label text-right">كلمة المرور</label>
                                    </div>
                                </div>


                            </div>

                            <div class="col-md-6 col-xs-12">

                                {{-- Gender --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <select name="gender" id="genderdropdownrow"
                                            class="form-control per-row-genderdropdown" style="width:100%" required>
                                            <option value=""></option>
                                            <option value="0">ذكر</option>
                                            <option value="1">انثى</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="genderdropdownrow" class="form-label text-right">الجنس</label>
                                    </div>
                                </div>

                                {{-- Name --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="name_field" name="name" class="form-control"
                                            required maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="name_field" class="form-label text-right">الإسم الأول</label>
                                    </div>
                                </div>

                                {{-- Father --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="father_name_field" name="father_name"
                                            class="form-control" required maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="father_name_field" class="form-label text-right">الأب</label>
                                    </div>
                                </div>

                                {{-- Grandfather fields --}}
                                @for ($i = 1; $i <= 11; $i++)
                                    <div class="form-group row">
                                        <div class="col-md-9 col-xs-12">
                                            <input type="text" id="grand_father_name_{{ $i - 1 }}_field"
                                                name="grand_father_name_{{ $i - 1 }}" class="form-control"
                                                maxlength="15"@if ($i <= 3) required @endif>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <label for="grand_father_name_{{ $i - 1 }}_field"
                                                class="form-label text-right">
                                                الجد {{ $i }}
                                            </label>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            إلغاء
                        </button>

                        <button type="submit" class="btn btn-primary btn-cons" id="submit_row_edit_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="modal fade" id="myCityCountryModal" 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">تحديث البلد/المدينة</h4>
                </div>

                <form id="form_city_country" method="POST"
                    action="{{ route('admin.familyappregisteration.bulkcitycountry') }}" class="labels-align-verticle">
                    @csrf

                    <div class="modal-body">
                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">

                                <!-- Hidden input -->
                                <input type="hidden" name="ids_array" id="ids_city_country" class="form-control" />

                                <!-- Country dropdown -->
                                <div class="form-group row">
                                    <div class="right col-md-4 col-md-offset-4 col-sm-12">
                                        <select name="country" id="bulkcountry_select" class="form-control"
                                            style="width: 100%;" required>
                                            <option value="">اختر البلد</option>
                                            @foreach ($countries as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-1 col-sm-12">
                                        <label for="bulkcountry_select" class="form-label">البلد</label>
                                    </div>
                                </div>

                                <!-- City dropdown -->
                                <div class="form-group row">
                                    <div class="right col-md-4 col-md-offset-4 col-sm-12">
                                        <select name="city" id="bulkcity_select" class="form-control"
                                            style="width: 100%;" required>
                                            <option value="">اختر المدينة</option>
                                            @foreach ($city as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-1 col-sm-12">
                                        <label for="bulkcity_select" class="form-label">المدينة</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>

                        <button type="submit" class="btn btn-primary btn-cons" id="submit_city_country_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">تحديث</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <div class="modal fade" id="myStatusModal" 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">تحديث حالة الإستمارة</h4>
                </div>

                <form id="form_status" method="POST" action="{{ route('admin.familyappregisteration.bulkstatus') }}"
                    class="labels-align-verticle">
                    @csrf

                    <div class="modal-body">
                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">

                                    <!-- Hidden input -->
                                    <input type="hidden" name="ids_array" id="ids_status" class="form-control" />

                                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                                        <select name="gender" id="genderdropdown" class="form-control"
                                            style="width: 100%;" required>
                                            <option value="">اختر الحالة</option>
                                            <option value="pending">Pending - P</option>
                                            <option value="ready_for_review">Ready for review - R</option>
                                            <option value="on_hold">On Hold - O</option>
                                        </select>
                                    </div>

                                    <label class="col-md-1 col-xs-12 control-label text-right source_label test"
                                        id="RequestStatusEditModal">الحالة</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>

                        <button type="submit" class="btn btn-primary btn-cons" id="submit_edit_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">تحديث</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" 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"></h4>
                </div>

                <form id="form_edit" method="POST" action="{{ route('admin.familyappregisteration.bulkedit') }}"
                    class="labels-align-verticle">
                    @csrf

                    <!-- Hidden Fields -->
                    <input type="hidden" name="parent_id" id="new_node_parent_id">
                    <input type="hidden" name="source_name" id="source_name" class="form-control">
                    <input type="hidden" name="ids_array" id="ids_array" class="form-control">

                    <div class="modal-body">
                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">

                                    <div class="col-md-5 col-md-offset-3 col-xs-12">
                                        <input type="text" name="data_field" id="data_field_id" class="form-control"
                                            required maxlength="15">
                                    </div>

                                    <div class="col-md-2 col-xs-12">
                                        <label for="data_field_id" class="form-label text-right">الإسم الأول</label>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>

                        <button type="submit" class="btn btn-primary btn-cons" id="submit_edit_form_btn"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">تحديث</button>
                    </div>

                </form>
            </div>

        </div>
    </div>
@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $('#form_row_edit').on('submit', function(e) {

            let country = $('#country_select').val();
            let city = $('#city_select').val();

            let errors = [];

            if (!country || country === "") {
                errors.push("Please select Country");
                $('#country_select').css('border', '1px solid red');
            } else {
                $('#country_select').css('border', '');
            }

            if (!city || city === "") {
                errors.push("Please select City");
                $('#city_select').css('border', '1px solid red');
            } else {
                $('#city_select').css('border', '');
            }

            if (errors.length > 0) {
                e.preventDefault();
                alert("Required fields:\n" + errors.join("\n"));
            }
        });


        var request_city = "";
        var requestEditId = "";
        $('#genderdropdown').select2({
            dir: "rtl",
            placeholder: "اضغط"
        });
        let cityOrignalValue;
        $(document).on("click", "#request", function(e) {
            var request = $(this).data('request');
            var country = request.country;
            var city = request.city;
            var name = request.name;
            var family_type_ar = (request.family_type === "bassam_family") ? "البسام" : "البسام نسب من";
            var gender = request.gender;
            var req_email = request.email;
            var father = request.father_name;
            var grand_father = request.grand_father_name;
            var g_grand_father = request.g_grand_father_name;
            var father1 = request.next_g_grand_father_one;
            var father2 = request.next_g_grand_father_two;
            var father3 = request.next_g_grand_father_three;
            var father4 = request.next_g_grand_father_four;
            var father5 = request.next_g_grand_father_five;
            var father6 = request.next_g_grand_father_six;
            var father7 = request.next_g_grand_father_seven;
            var father8 = request.next_g_grand_father_eight;
            var father9 = request.next_g_grand_father_nine;
            var mobile_number = request.mobile;
            var username = request.username;
            var password = request.password;
            var request_id = request.id;
            requestEditId = request.id;
            cityOrignalValue = city;
            console.log("request = == ", request);
            $('#genderdropdownrow').select2({
                dir: 'rtl',
                placeholder: 'اضغط'
            }).val(gender).trigger('change');
            $("#name_field").val(name);
            $('#country_select').select2({
                dir: "rtl",
                placeholder: 'اضغط'
            }).val(country).trigger('change');
            // $('#city_select').select2({
            //     dir: "rtl",
            //     placeholder: 'اضغط'
            // }).val(request.city).trigger('change');
            getCities(city);

            $("#father_name_field").val(father);
            $("#family_type_field").val(family_type_ar);
            $("#grand_father_name_0_field").val(grand_father);
            $("#grand_father_name_1_field").val(g_grand_father);
            $("#grand_father_name_2_field").val(father1);
            $("#grand_father_name_3_field").val(father2);
            $("#grand_father_name_4_field").val(father3);
            $("#grand_father_name_5_field").val(father4);
            $("#grand_father_name_6_field").val(father5);
            $("#grand_father_name_7_field").val(father6);
            $("#grand_father_name_8_field").val(father7);
            $("#grand_father_name_9_field").val(father8);
            $("#grand_father_name_10_field").val(father9);
            // $("#grand_father_name_11_field").val(father10);

            $("#email_field").val(req_email);
            $("#password_field").val(password);
            $("#username_field").val(username);
            request_city = request.city;
            $('#number_field').val(mobile_number);
            $('#edit_request_form_id').val(request_id);
        });

        $(document).on("click", "#request_status", function(e) {
            var request = $(this).data();
            var request_id = request.id;
            $('#id_field').val(request_id);
        });

        $(document).ready(function() {

            let deleteUrl = null; // store the URL to delete

            // When delete link is clicked
            $(document).on('click', '.delete-item', function(e) {
                e.preventDefault();
                deleteUrl = $(this).data('url'); // get delete route
                $('#deleteContentModal').modal('show'); // show confirmation modal
            });

            // When user confirms delete
            $(document).on('click', '.confirm-delete', function() {
                if (!deleteUrl) return;

                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {

                        location.reload();
                    },
                    error: function(xhr) {
                        alert('حدث خطأ أثناء الحذف');
                    }
                });

                // Hide modal after clicking confirm
                $('#deleteContentModal').modal('hide');
            });

            $('#password_field').on('input', function() {
                const password = $(this).val();
                const errorEl = $('#password_error');
                const submitBtn = $('#submit_edit_form');

                // Regex to match Arabic characters or spaces
                const invalidPattern = /[\u0600-\u06FF\s]/;

                let errorMessage = '';

                if (password.length < 6) {
                    errorMessage = 'كلمة المرور يجب أن تحتوي على 6 أحرف على الأقل.'; // Min 6
                } else if (password.length > 10) {
                    errorMessage = 'كلمة المرور يجب ألا تتجاوز 10 أحرف.'; // Max 10
                } else if (invalidPattern.test(password)) {
                    errorMessage = 'كلمة المرور لا يمكن أن تحتوي على حروف عربية أو مسافات.';
                }

                if (errorMessage) {
                    errorEl.text(errorMessage).show();
                    submitBtn.prop('disabled', true);
                    $(this).addClass('is-invalid');
                } else {
                    errorEl.hide();
                    submitBtn.prop('disabled', false);
                    $(this).removeClass('is-invalid');
                }
            });

            $("#username_field").on("keypress", function(event) {
                var englishAlphabetAndWhiteSpace = /[A-Za-z0-9]/g;
                var key = String.fromCharCode(event.which);

                // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern
                if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 ||
                    englishAlphabetAndWhiteSpace.test(key)) {
                    return true;
                }
                // If we got this far, just return false because a disallowed key was typed.
                return false;
            });
            $(' #phone_field').on('keyup', function() {

                const phone = $('#phone_field').val();

                $.post('{{ route('admin.familyappregisteration.checkEmail_Phone') }}', {
                    _token: '{{ csrf_token() }}',

                    phone: phone,
                    id: requestEditId
                }, function(response) {


                    // Email check
                    if (response.ResultType === 0) {

                        $('#phone_field').addClass('error').css('color', '#f35958');
                        enable_disable_credentials(false);
                    } else {
                        $(' #phone_field').removeClass('error').css('color',
                            '#282323');
                        enable_disable_credentials(true);
                    }
                });
            });
            $('#email_field').on('keyup', function() {
                const email = $('#email_field').val();

                $.post('{{ route('admin.familyappregisteration.checkEmail_Phone') }}', {
                    _token: '{{ csrf_token() }}',
                    email: email,
                    id: requestEditId
                }, function(response) {


                    // Email check
                    if (response.ResultType === 0) {

                        $('#email_field').addClass('error').css('color', '#f35958');
                        enable_disable_credentials(false);
                    } else {
                        $('#email_field').removeClass('error').css('color',
                            '#282323');
                        enable_disable_credentials(true);
                    }
                });
            });
            $('#username_field').on("paste", function(e) {
                e.preventDefault();
            });

            $('#username_field, #password_field,#phone_field,#email_field').on('input', function() {
                enable_disable_credentials();
            });

            function enable_disable_credentials(source = true) {
                const username_length = $('#username_field').val().length;
                const password_length = $('#password_field').val().length;

                const valid_username = username_length > 7 && username_length < 16;
                const valid_password = password_length > 5 && password_length < 11;

                if (valid_username && valid_password && source) {
                    $('#submit_row_edit_form').prop('disabled', false);
                    $('#submit_edit_form').prop('disabled', false);
                } else {
                    $('#submit_row_edit_form').prop('disabled', true);
                    $('#submit_edit_form').prop('disabled', true);
                }
            }
            // Check username side by side
            $('#username_field').keyup(function(event) {

                $.post('/api/auth/checkusername_exceptthis', {
                    username: $(this).val(),
                    id: requestEditId
                }, function(response) {

                    if (response.ResultType == 0) {
                        $('#username_field').addClass('error');
                        $('#username_field').css('color', '#f35958');
                        enable_disable_credentials(false);
                    } else {
                        $('#username_field').removeClass('error');
                        $('#username_field').css('color', '#282323');
                        enable_disable_credentials(true);
                    }
                });
            });
        })

        var x = 0;
        $('#datatable-example thead tr.datatable-filter-row th').each(function() {
            if (x == 2) {
                $(this).html(
                    '<select id="genderDropdown_mb" name="Gender" class="form-control"><option value="">الكل</option><option value="0">ذكر</option><option value="1">انثى</option></select>'
                );
            } else if (x == 11) {
                $(this).html(
                    '<select id="statusDropdown" name="status" class="form-control"><option value="">الكل</option><option value="pending">Pending - P</option><option value="ready_for_review">Ready For Review - R</option><option value="completed">Completed - C</option><option value="on_hold">On Hold - H</option></select>'
                );
            } else {
                $(this).html('<input class="searchbars" id="mr_searchbar' + x +
                    '" type="text" placeholder="" />');
            }
            x++;
        });
        $('#country_select').select2({
            dir: "rtl",
            placeholder: "اضغط"
        }).on("change", function(e) {

            getCities();

            $('#city_select').select2({
                dir: "rtl",
                placeholder: "اضغط"
            }).val('').trigger('change');

        });

        // function getCities() {
        //     var country = $("#country_select").val();
        //     var city = $('#city_select').val();

        //     if (country != '') {
        //         $.ajax({
        //             type: "GET",
        //             cache: false,
        //             url: "/admin/familyappregisteration/getlocalcities/" + encodeURIComponent(country),
        //             success: function(response) {
        //                 var options = '';
        //                 var city_id = city;


        //                 $.each(response, function(city, id) {
        //                     options += "<option value='" + id + "'>" + city + "</option>";

        //                 });
        //                 $('#city_select').html(options);
        //                 var is_present = "";
        //                 if (is_present == '') {
        //                     is_present = city_id;
        //                 };
        //                 $('#city_select').val(is_present);
        //                 $('#city_select').prop('disabled', false);

        //             }
        //         });
        //     };
        // }
        function getCities(prefillCity = null) {
            var country = $("#country_select").val();

            if (country != '') {
                $.ajax({
                    type: "GET",
                    cache: false,
                    url: "/admin/familyappregisteration/getlocalcities/" + encodeURIComponent(country),
                    success: function(response) {
                        var options = '<option value="">اضغط</option>';

                        // Populate city options
                        $.each(response, function(cityName, cityId) {
                            options += "<option value='" + cityId + "'>" + cityName + "</option>";
                        });

                        $('#city_select').html(options);
                        $('#city_select').prop('disabled', false);

                        // Prefill city if provided
                        if (prefillCity) {
                            $('#city_select').val(prefillCity).trigger('change');
                        }
                    }
                });
            } else {
                // If no country selected, reset city
                $('#city_select').html('<option value="">اضغط</option>').prop('disabled', true);
            }
        }

        // Initialize DataTable
        var table = $('#datatable-example').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            "dom": '<"top"fpil<"clear">>rt<"bottom"pi<"clear">>',
            fixedColumns: {
                leftColumns: 2
            },
            language: {
                search: "",
                searchPlaceholder: "بحث",
                "emptyTable": "لا يوجد محتوى",
                "zeroRecords": "لم يصل البحث إلى أي نتيجة",
                processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
            },
            ajax: {
                "url": "{{ URL::to('admin/familyappregisteration/datatable') }}",
                "type": "POST"
            },
            columns: [{
                    data: 'check',
                    name: 'check'
                },
                {
                    data: 'request_id',
                    name: 'family_registerations.request_id'
                },
                // {
                //     data: 'family_type',
                //     name: 'family_registerations.family_type'
                // },
                {
                    data: 'gender',
                    name: 'family_registerations.gender'
                },
                {
                    data: 'name',
                    name: 'family_registerations.name'
                },
                {
                    data: 'father_name',
                    name: 'family_registerations.father_name'
                },
                {
                    data: 'grand_father_name',
                    name: 'family_registerations.grand_father_name'
                },
                {
                    data: 'g_grand_father_name',
                    name: 'family_registerations.g_grand_father_name'
                },
                {
                    data: 'next_g_grand_father_one',
                    name: 'family_registerations.next_g_grand_father_one'
                },

                {
                    data: 'city',
                    name: 'family_registerations.city'
                },
                {
                    data: 'country',
                    name: 'family_registerations.country'
                },
                {
                    data: 'mobile',
                    name: 'family_registerations.mobile'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'actions',
                    name: 'actions'
                }
            ],
            "iDisplayLength": 50,
            fixedColumns: {
                rightColumns: 4
            }
        });
        $('#datatable-example tfoot tr').prependTo('#datatable-example thead');
        // Apply search for inputs
        table.columns().every(function() {
            var column = this;
            $('input, select', this.header()).on('keyup change clear', function() {
                if (column.search() !== this.value) {
                    column.search(this.value).draw();
                }
            });
        });

        $(document).on("click", ".request_status_btn", function(e) {
            e.preventDefault();

            let id = $(this).data('id');
            let status = $(this).data('status');

            // Fill hidden input
            $('#id_field').val(id);

            // Init & set select2 with current status
            $("#statusdropdown").val(status).trigger('change');
        });

        $('body').append($('.modal'));
        var errorMessageStr = 'يجب إختيار إستمارة أو أكثر';
        $(".source").click(function() {

            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();

            if (ids.length > 0) {

                $('#data_field_id').val('');

                $('#myModal').modal('show');
                var source_name = this.id;
                $("#myModal .modal-title").text('تحديث ' + $(this).text());
                $(".source_label").text($(this).text());

                $("#ids_array").val(ids);
                $("#source_name").val(source_name);
            } else {
                showErrorMessage(errorMessageStr);
            }

        });

        $(".status").click(function() {
            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();

            if (ids.length > 0) {
                $('#genderdropdown').select2('val', '');
                $('#myStatusModal').modal('show');

                $('#RequestStatusEditModal').text('الحالة');

                $("#ids_status").val(ids);
            } else {
                showErrorMessage(errorMessageStr);
            }

        });

        $(".city-country").click(function() {
            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();

            if (ids.length > 0) {

                $('#bulkcountry_select').select2({
                    dir: "rtl",
                    placeholder: "اضغط"
                }).val('').trigger('change');

                $('#myCityCountryModal').modal('show');

                $("#ids_city_country").val(ids);
            } else {
                showErrorMessage(errorMessageStr);
            }

        });
        $(".bulkExport").click(function() {


            var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                return this.value;
            }).get();

            if (ids.length > 0) {
                $("#ids_export").val(ids);
                $('#bulkExportForm').submit(); // ✅ submit the form
            } else {
                $('#bulkExportForm').submit();
            }
        });


        function bulkgetCities() {
            var country = $("#bulkcountry_select").val();

            if (country != '') {
                $.ajax({
                    type: "GET",
                    cache: false,
                    url: "/admin/familyappregisteration/getlocalcities/" + encodeURIComponent(country),
                    success: function(response) {
                        var options = '';
                        var city_id = request_city;

                        $.each(response, function(city, id) {
                            options += "<option value='" + id + "'>" + city + "</option>";

                        });

                        $('#bulkcity_select').html(options);
                        var is_present = "";
                        if (is_present == '') {
                            is_present = city_id;
                        };
                        $('#bulkcity_select').val(is_present).trigger('change');
                        $('#bulkcity_select').prop('disabled', false);

                    }
                });
            } else {
                var options = '';
                $('#bulkcity_select').html(options);
            };
        }


        // Location Information, country and city
        var country_present = "";
        if (country_present == '') {
            $('#bulkcountry_select').select2({
                dir: "rtl",
                placeholder: "اضغط"
            }).val('').trigger('change');
            $('#bulkcity_select').select2({
                dir: "rtl",
                placeholder: "اضغط"
            }).val('').trigger('change');
        };
        // alert($("#country_select").html());

        $('#bulkcountry_select').on("change", function(e) {
            // mostly used event, fired to the original element when the value changes

            bulkgetCities();
            $('#bulkcity_select').prop('disabled', true);
            $('#bulkcity_select').val('').trigger('change');
        });
        // On page reload fetch previously selected city
        bulkgetCities();

        $('.selectbox').select2({
            dir: "rtl"
        });

        // Location Information, country and city
        var country_present = "";
        if (country_present == '') {
            $('#country_select').select2({
                dir: "rtl",
                placeholder: "اضغط"
            }).val('').trigger('change');
            $('#city_select').select2({
                dir: "rtl",
                placeholder: "اضغط"
            }).val('').trigger('change');
        };
        // When country changes
        $('#country_select').on('change', function() {

            // Reset & disable city dropdown
            $('#city_select')
                .html('<option value="">اضغط</option>')
                .val('')
                .trigger('change')
                .prop('disabled', true);

            // Load cities
            getCities();
        });

        // On page reload fetch previously selected city
        getCities();
        // ✅ Handle select all checkbox in header
        $(document).on("change", ".group-checkable", function() {
            var checked = $(this).is(":checked");

            // Toggle only visible checkboxes (DataTables paginated rows)
            $('#datatable-example tbody input.checkboxes[type="checkbox"]').prop("checked", checked);
        });

        // ✅ Sync header checkbox if a row is unchecked/checked manually
        $(document).on("change", "#datatable-example tbody input.checkboxes[type='checkbox']", function() {
            var total = $('#datatable-example tbody input.checkboxes[type="checkbox"]').length;
            var checked = $('#datatable-example tbody input.checkboxes[type="checkbox"]:checked').length;

            $(".group-checkable").prop("checked", total > 0 && total === checked);
        });
    </script>
@endsection