@extends('app')

<style type="text/css">
    #fm_searchbar18,
    #fm_searchbar17,
    #fm_searchbar0 {
        display: none;
    }

    #fm_searchbar13,
    #fm_searchbar14 {
        width: 50px;
    }

    .dataTables_filter {
        display: none;
    }
</style>

@section('content')
    @if (session('flash_message'))
        <div class="alert {{ session('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! session('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 familymember-grid">
                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px; background-color: #fff;">
                        <div class="col-sm-3 col-xs-12">
                            <div class="pull-right markaction">
                                @can('familymembers-edit')
                                    <!-- <a href="javascript:void(0)" class="btn btn-default btn-wider" id="edit_bulk_name" >الإسم الأول</a> -->
                                @endcan
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">الدليل</span>
                        </div>

                        <div class="col-sm-3 col-xs-12">

                        </div>
                    </div>

                    <table class="table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0"
                        width="100%">
                        <thead class="datatable-filter-row">
                            <tr>
                                <th width="1%"></th>
                                <th width="5%" style="background-color: transparent;"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="4%"></th>
                                <th width="3%"></th>
                                <th width="5%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="1%"></th>
                                <th width="1%"></th>
                                <th width="1%"></th>
                                <th width="1%"></th>
                                <th width="2%"></th>
                                <th width="1%"></th>
                            </tr>
                        </thead>

                        <tfoot>
                            <tr style="color: white;">
                                <th width="1%"><input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" /></th>
                                <th width="5%">الهوية</th>
                                <th width="4%">الرقم</th>
                                <th width="4%">الإسم الأول</th>
                                <th width="4%">الأب</th>
                                <th width="4%">الجد ١</th>
                                <th width="4%">الجد ٢</th>
                                <th width="4%">الجد ٣</th>
                                <th width="4%">الجد ٤</th>
                                <th width="3%">الجنس</th>
                                <th width="5%">الهالتف المتحرك</th>
                                <th width="2%">المدينة</th>
                                <th width="2%">البلد</th>
                                <th width="1%">الإستمارة</th>
                                <th width="1%">الجيل</th>
                                <th width="1%">الحياة</th>
                                <th width="1%">التسجيل</th>
                                <th width="2%">التاريخ التحديث</th>
                                <th width="1%"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

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

    <!-- 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 class="labels-align-verticle" id="form_edit" method="POST"
                    action="{{ route('admin.familymembers.bulkedit') }}">
                    @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-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="name" class="form-control" required id="name">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">اسم</label>
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="father_name" class="form-control" id="father_name">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 1</label>
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="grand_father_name" class="form-control"
                                            id="grand_father_name">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 2</label>
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="g_grand_father_name" class="form-control"
                                            id="g_grand_father_name">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 3</label>
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="next_g_grand_father_one" class="form-control"
                                            id="next_g_grand_father_one">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 4</label>
                                </div>
                            </div>
                        </div>

                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="next_g_grand_father_two" class="form-control"
                                            id="next_g_grand_father_two">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 5</label>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="ids_array" class="form-control" id="ids_array">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">أغلق</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            id="submit_edit_form">عرض</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Name Modal -->
    <div class="modal fade" id="myModalEditName" 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_bulk_name" method="POST"
                    action="{{ route('admin.familymembers.bulkeditname') }}">
                    @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-6 col-md-offset-2 col-xs-12">
                                        <input type="text" name="name" class="form-control" required
                                            id="name">
                                    </div>
                                    <label class="col-md-3 col-xs-12 control-label text-left">الإسم الأول</label>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="ids_array" class="form-control" id="name_ids_array">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <input type="submit" value="تحديث" class="btn btn-primary btn-cons"
                            id="submit_edit_form_name">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Tree Node Modal -->
    <div id="editTreeNodeModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

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

    <!-- Edit Row Modal -->
    <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.familymembers.editrow') }}">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="id_field" name="request_id" class="form-control"
                            placeholder="Enter Message">

                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <select id="alivedropdown" name="alive" style="width: 100%;"
                                                    class="form-control selectbox">
                                                    <option value="0">متوفي</option>
                                                    <option value="1">على قيد الحياة</option>
                                                </select>
                                            </div>
                                            <label class="col-md-3 col-sm-12">الحياة</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <input type="text" name="ref_id" id="ref_id_field"
                                                    class="form-control" pattern="\d*" placeholder="أدخل معرف المرجع"
                                                    {{ $editable ?? '' }}>
                                            </div>
                                            <label class="col-md-3 col-sm-12">الإستمارة</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <select id="modifieddropdown" name="modified_flag" style="width: 100%;"
                                                    class="form-control selectbox" {{ $editable ?? '' }}>
                                                    <option value="0">لا</option>
                                                    <option value="1">نعم</option>
                                                </select>
                                            </div>
                                            <label class="col-md-3 col-sm-12">التسجيل</label>
                                        </div>
                                    </div>
                                </div>

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

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

                            <div class="col-md-6 col-xs-12">
                                <div class="row form-group">
                                    <div class="input-with-icon right col-md-9 col-sm-12">
                                        <input type="text" name="id" id="family_member_id" class="form-control"
                                            readonly required>
                                    </div>
                                    <div class="col-md-3 col-sm-12"><label class="control-label">الهوية</label></div>
                                </div>

                                <div class="row form-group">
                                    <div class="input-with-icon right col-md-9 col-sm-12">
                                        <input type="text" name="nodeID" id="node_id" class="form-control"
                                            readonly required>
                                    </div>
                                    <label class="col-md-3 col-sm-12">الرقم</label>
                                </div>

                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <input type="text" id="name_field" name="name"
                                                    class="form-control" required placeholder="Enter Name"
                                                    {{ $editable ?? '' }}>
                                            </div>
                                            <label class="col-md-3 col-sm-12">الإسم الأول</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <select id="genderdropdown" name="gender" style="width: 100%;" required
                                                    class="form-control selectbox" {{ $editable ?? '' }}>
                                                    <option value="0">ذكر</option>
                                                    <option value="1">انثى</option>
                                                </select>
                                            </div>
                                            <label class="col-md-3 col-sm-12">الجنس</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row margin-bottom">
                                    <div class="col-md-12 col-xs-12">
                                        <div class="form-group row">
                                            <div class="input-with-icon right col-md-9 col-sm-12">
                                                <input type="tel" name="mobile" id="mobile_field" maxlength="12"
                                                    class="form-control" placeholder="966XXXXXXXXX">
                                            </div>
                                            <label class="col-md-3 col-sm-12">الهالتف المتحرك</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">الغاء</button>
                        <input type="submit" value="حفظ" class="btn btn-primary btn-cons" id="submit_row_edit_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        jQuery(document).ready(function($) {
            // Fire preload in the background without awaiting
            (async function() {
                $('#progressbar').show();
                try {
                    preloadDaleel();
                    $('#progressbar').hide(); // don't await, runs in background
                } catch (e) {
                    $('#progressbar').hide();
                    console.error("Background preload failed:", e);
                }
            })();
        });


        jQuery(document).ready(function($) {
            $('.selectbox').select2({
                dir: "rtl",
                placeholder: "اضغط"
            });
            var request_city = "";

            $(document).on("click", "#request", function(e) {
                var request = $(this).data('request');
                $('#city_select').empty();

                var name = request.name;
                var father1 = request.father_name;
                var father2 = request.grand_father_name;
                var father3 = request.g_grand_father_name;
                var gender = request.gender;
                var request_id = request.id;
                var mobile = request.mobile;
                var nodeid = request.nodeID;
                var ref_id = request.ref_id;
                var modified = request.modified_flag;
                var country = request.country;
                var city = request.city;

                $("#name_field").val(name);
                $('#father1_field').val(father1);
                $('#father2_field').val(father2);
                $('#father3_field').val(father3);
                $('#family_member_id').val(request_id);
                $('#node_id').val(nodeid);
                $('#id_field').val(request_id);
                $('#genderdropdown').select2('val', gender);
                $('#alivedropdown').select2('val', request.alive);
                $('#modifieddropdown').select2('val', modified);
                $('#mobile_field').val(mobile);
                $('#ref_id_field').val(ref_id == 0 ? '' : ref_id);
                $('#country_select').select2({
                    dir: "rtl",
                    placeholder: "اضغط"
                }).val(country).trigger('change');
                request_city = request.city;
                $('#city_select').select2({
                    dir: "rtl",
                    placeholder: "اضغط"
                }).val(city).trigger('change');
            });

            // Bulk source editing
            $("#submit_edit_form").click(function() {
                $('#progressbar').show();
                $.post($('#form_edit').attr('action'), $('#form_edit').serialize())
                    .done(function(result) {
                        location.reload();
                        $(window).load(function() {
                            $('#progressbar').hide();
                        });
                    });
            });

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

                if (ids.length > 0) {
                    $('#myModal').modal('show');
                    $(".modal-title").text($(this).text());
                    $(".source_label").text($(this).text());
                    $("#ids_array").val(ids);
                } else {
                    showErrorMessage('Nothing Selected');
                }
            });

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

                if (ids.length > 0) {
                    $('#myModalEditName').modal('show');
                    $("#name_ids_array").val(ids);
                } else {
                    showErrorMessage('Nothing Selected');
                }
            });

            $(document).on('submit', '.deleteaction', function() {
                var ret = confirm("Are you sure you want to delete?");

                if (ret) {
                    $("#progressbar").show();
                    return true;
                }
                return false;
            });

            // Countries and cities data
            var countries_object = @json($countries);
            var cities_object = @json($city);

            var countries_option = '';
            var cities_option = '';

            countries_option += '<option value="">' + "الكل" + '</option>';
            cities_option += '<option value="">' + "الكل" + '</option>';

            $.each(countries_object, function(country, id) {
                countries_option += '<option value="' + id + '">' + country + '</option>';
            });

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

            var x = 0;
            $('#datatable-example thead th').each(function() {
                var title = $('#datatable-example thead th').eq($(this).index()).text();

                if (x == 9) {
                    $(this).html(
                        '<select id="dropdowngender" name="gender" class="form-control"><option value="">الكل</option><option value="0">ذكر</option><option value="1">انثى</option></select>'
                    );
                } else if (x == 15) {
                    $(this).html(
                        '<select id="alive" name="alive" class="form-control"><option value="">الكل</option><option value="0">متوفي</option><option value="1">على قيد الحياة</option></select>'
                    );
                } else if (x == 16) {
                    $(this).html(
                        '<select id="modified" name="modified_flag" class="form-control"><option value="">الكل</option><option value="0">لا</option><option value="1">نعم</option></select>'
                    );
                } else if (x == 12) {
                    $(this).html(
                        '<select id="countries_table" name="country" class="form-control"></select>');
                    $('#countries_table').html(countries_option);
                } else if (x == 11) {
                    $(this).html('<select id="cities_table" name="city" class="form-control"></select>');
                    $('#cities_table').html(cities_option);
                } else {
                    $(this).html('<input class="searchbars" id="fm_searchbar' + x + '" type="text"/>');
                }
                x++;
            });

            var table = $('#datatable-example').DataTable({
                stateSave: false,
                processing: true,
                serverSide: true,
                scrollX: true,
                "iDisplayLength": 50,
                "dom": '<"top"fpil<"clear">>rt<"bottom"pi<"clear">>',
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "emptyTable": "لا يوجد محتوى",
                    "zeroRecords": "لم يصل البحث إلى أي نتيجة",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                "order": [
                    [1, "desc"]
                ],
                ajax: {
                    "url": "{{ route('admin.familymembers.datatable') }}",
                    "type": "POST",
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'nodeID',
                        name: 'nodeID'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'father_name',
                        name: 'father_name'
                    },
                    {
                        data: 'grand_father_name',
                        name: 'grand_father_name'
                    },
                    {
                        data: 'g_grand_father_name',
                        name: 'g_grand_father_name'
                    },
                    {
                        data: 'next_g_grand_father_one',
                        name: 'next_g_grand_father_one'
                    },
                    {
                        data: 'next_g_grand_father_two',
                        name: 'next_g_grand_father_two'
                    },
                    {
                        data: 'gender',
                        name: 'gender'
                    },
                    {
                        data: 'mobile',
                        name: 'mobile'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'country',
                        name: 'country'
                    },
                    {
                        data: 'ref_id',
                        name: 'ref_id'
                    },
                    {
                        data: 'generation',
                        name: 'generation'
                    },
                    {
                        data: 'alive',
                        name: 'alive'
                    },
                    {
                        data: 'credentials_issued',
                        name: 'credentials_issued'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                "columnDefs": [{
                        "targets": [0, 18],
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
                        "orderable": false
                    }
                ]
            });

            $('.dataTables_scrollFoot').prependTo('.dataTables_scrollHeadInner');
            $('#datatable-example tfoot tr').prependTo('#datatable-example thead');

            // Apply the search
            table.columns().eq(0).each(function(colIdx) {
                $('input', table.column(colIdx).header()).on('keyup change', function() {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });
            });

            table.columns().eq(0).each(function(colIdx) {
                $('select', table.column(colIdx).header()).on('keyup change', function() {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });
            });

            // Restore state
            var state = table.state.loaded();
            if (state) {
                table.columns().eq(0).each(function(colIdx) {
                    var colSearch = state.columns[colIdx].search;

                    if (colSearch.search) {
                        if ($.isNumeric(colSearch.search) && (colIdx == 9 || colIdx == 15 || colIdx == 16 ||
                                colIdx == 11 || colIdx == 12)) {
                            $('select', table.column(colIdx).header()).val(colSearch.search);
                        } else {
                            $('input', table.column(colIdx).header()).val(colSearch.search);
                        }
                    }
                });

                table.draw();
            }

            $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium");
            $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12");
            $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example input').click(function() {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });

            $(".select2-wrapper").select2({
                minimumResultsForSearch: -1
            });
            $('div.dataTables_length select').select2();
            $('.selectbox').select2({
                dir: "rtl",
                placeholder: "اضغط"
            });

            function getCities() {
                var country = $("#country_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>";
                            });

                            $('#city_select').html(options);
                            var is_present = "";
                            if (is_present == '') {
                                is_present = city_id;
                            }

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

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

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

            // On page reload fetch previously selected city
            getCities();
        });

        function editTreeNode(id) {
            $('#progressbar').show();

            $.get('/admin/familytree/' + id + '/edit', function(response) {
                $('#editTreeNodeModal .modal-content').html(response);
                $('#editTreeNodeModal').modal('show');
                $('#progressbar').hide();
            });
        }

        function submitEditNodeForm(form) {
            var mobile = $(form).find('input[name=mobile]').val();
            var filter = /^\d{10,15}$/;

            if (mobile != '' && !filter.test(mobile)) {
                $(form).find('.mobile-number-info').removeClass('hidden');
                return false;
            }

            $('#progressbar').show();
            var action = $(form).attr('action');
            var formData = $(form).serialize();

            $.ajax({
                type: 'PUT',
                url: action,
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#datatable-example').DataTable().ajax.reload();
                    $('#editTreeNodeModal').modal('hide');
                    $('#progressbar').hide();
                }
            });
        }
    </script>
@endsection