@extends('app')
<style type="text/css">
    #mr_searchbar14,
    #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('familyregisteration-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('familyregisteration-destroy'))
                                    <a id="del" href="javascript:void(0)" class="btn btn-wider btn-danger"
                                        data-msg="هل أنت متأكد من الحذف؟"
                                        data-url="{{ route('admin.familyregisteration.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;">الإستمارات المستلمة (العامة)</span>
                        </div>

                        <div class="col-sm-5 col-xs-12">
                            @if (Auth::user()->can('familyregisteration-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" action="{{ route('admin.familyregisteration.export') }}" class="inline" id="bulkExportForm">
        @csrf
        <input type="hidden" name="ids_export" id="ids_export" value="">
    </form>


    <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 id="form_edit_status" method="POST"
                    action="{{ route('admin.familyregisteration.editrequeststatus') }}" class="labels-align-verticle">
                    @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" id="submit_edit_status_form" class="btn btn-primary btn-cons"
                            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 id="form_row_edit" method="POST" action="{{ route('admin.familyregisteration.editrow') }}"
                    class="labels-align-verticle">
                    @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 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 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="number_field1" 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" 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>

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

                                {{-- Family Type --}}
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="family_type_field" name="family_type"
                                            class="form-control" readonly maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="family_type_field" class="form-label text-right">مصدر التسجيل</label>
                                    </div>
                                </div>

                                {{-- 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">
                                        </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" id="submit_row_edit_form" class="btn btn-primary btn-cons"
                            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.familyregisteration.bulkcitycountry') }}" class="labels-align-verticle">
                    @csrf

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

                                {{-- Hidden IDs --}}
                                <input type="hidden" name="ids_array" id="ids_city_country" class="form-control">

                                {{-- Country --}}
                                <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 --}}
                                <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" id="submit_city_country_form" class="btn btn-primary btn-cons"
                            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.familyregisteration.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">
                                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                                        <input type="hidden" name="ids_array" id="ids_status" class="form-control" />

                                        <select name="gender" id="genderdropdown" 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 - O</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_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.familyregisteration.bulkedit') }}"
                    class="labels-align-verticle">
                    @csrf

                    <input type="hidden" name="parent_id" id="new_node_parent_id">

                    <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="hidden" name="source_name" id="source_name" class="form-control">
                                        <input type="hidden" name="ids_array" id="ids_array" class="form-control">

                                        <input type="text" name="data_field" id="data_field_id" class="form-control"
                                            maxlength="15" required />
                                    </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"
                            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">
        var request_city = "";
        $('#genderdropdown').select2({
            dir: "rtl",
            placeholder: "اضغط"
        });
        $(document).on("click", "#request", function(e) {
            var request = $(this).data('request');
            $('#city_select').empty();

            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 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 request_id = request.id;

            $('#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(city).trigger('change');
            $("#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").val(email);
            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);
        });



        var x = 0;
        $('#datatable-example thead tr.datatable-filter-row th').each(function() {
            if (x == 3) {
                $(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 == 12) {
                $(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/familyregisteration/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);

                    }
                });
            };
        }
        // 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/familyregisteration/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.next_g_grand_father_one'
                },
                {
                    data: 'next_g_grand_father_one',
                    name: 'family_registerations.next_g_grand_father_two'
                },

                {
                    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');
                $("#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() {
            console.log("exp btn clicked");

            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/memberrequests/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');
        };
        // alert($("#country_select").html()); 
        $('#city_select').select2();
        $('#country_select').select2().on("change", function(e) {
            // mostly used event, fired to the original element when the value changes

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

        });
        // 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