@extends('app')
<style type="text/css">
    #fm_searchbar19,#fm_searchbar18,#fm_searchbar0{
        display: none;
    }
    #fm_searchbar13,#fm_searchbar14{
        width: 50px;
    }

    #fm_searchbar11{
        width: 130px !important;
    }

    .dataTables_filter {
        display: none;
    }
</style>
@section('content')

@if(Session::has('flash_message'))
<div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
    <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 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">
                            @if(Auth::user()->hasPermission('familymembers-edit'))
                                <!-- <a href="javascript:void(0)" class="btn btn-default btn-wider" id="edit_bulk_name" >الإسم الأول</a> -->
                            @endif
                        </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="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;">
                           @if(Auth::user()->hasPermission('familymembers-destroy'))
                            <th width="1%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                             @else
                             <th width="1%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disabled/></th>
                             @endif
                             <th width="5%">بالعربي ID</th>
                             <th width="5%">بالانجليزي ID</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::open([
'method' => 'POST',
'class' => 'inline',
'id'=> 'bulkaction'
]) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!}

<!-- 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::open(['class'=>'labels-align-verticle','id'=>'form_edit','method' => 'POST', 'route' => 'admin.familymembers.bulkedit']) !!}
      <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">
                        {!! Form::text('name', null, ['class' => 'form-control','required'=>true, '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">
                        {!! Form::text('father_name', null, ['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">
                        {!! Form::text('grand_father_name', null, ['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">
                        {!! Form::text('g_grand_father_name', null, ['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">
                        {!! Form::text('next_g_grand_father_one', null, ['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">
                        {!! Form::text('next_g_grand_father_two', null, ['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>
        {!! Form::hidden('ids_array', null, ['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::close() !!}
      </div>
    </div>
  </div>

  <!-- 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::open(['class'=>'labels-align-verticle','id'=>'form_edit_bulk_name','method' => 'POST', 'route' => 'admin.familymembers.bulkeditname']) !!}
      <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">
                        {!! Form::text('name', null, ['class' => 'form-control','required'=>true, 'id' => 'name']) !!}
                    </div>
                    <label class="col-md-3 col-xs-12 control-label text-left">الإسم الأول</label>
                </div>
            </div>
        </div>

        {!! Form::hidden('ids_array', null, ['class' => 'form-control', 'id' => 'name_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_name">تحديث</button> -->
        {!! Form::submit('تحديث', ['class' => 'btn btn-primary btn-cons','id' => 'submit_edit_form_name']) !!}

        </div>
        {!! Form::close() !!}
      </div>
    </div>
  </div>

    <!-- Edit node modal -->
    <div id="editTreeNodeModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
        </div>
    </div>
    <!-- /.edit node modal -->

  <!-- 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::open(['class'=>'labels-align-verticle','id'=>'form_row_deit','method' => 'POST', 'route' => 'admin.familymembers.editrow']) !!}

      <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">
                               {!! Form::select('country',[''=>'اضغط']+$countries->toArray(),null,['class'=>'form-control select_country selectbox','style'=>'width:100%','id'=>'country_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">
                               {!! Form::select('city',[''=>'اضغط']+$city->toArray(),null, ['class'=>'form-control select_city selectbox','style'=>'width:100%','id'=>'city_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">
                        {!! Form::text('id',null, ['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">
                        {!! Form::text('nodeID',null, ['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" name="mobile_field" 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>
       <!--  <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit_row_edit_form">عرض</button> -->
         {!! Form::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;'])!!}

        </div>
        {!! Form::close() !!}
      </div>
    </div>
  </div>

@endsection

@section('page_script')

<script type="text/javascript" language="javascript" class="init">
$.ajaxSetup({
        headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')},
    });
    jQuery(document).ready(function ($) {
        // $('.selectbox').select2({placeholder: 'Select'});
         $('.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');

        });

    //     $("#submit_row_edit_form").on("click",function(){

    //         var name = $("#name_field").val();
    //         var father_name = $('#father1_field').val();
    //         var grand_father_name = $('#father2_field').val();
    //         var g_grand_father_name = $('#father3_field').val();
    //         var request_id = $('#id_field').val();
    //         var gender = $('#genderdropdown').val();
    //         var alive = $('#alivedropdown').val();
    //         var mobile = $('#mobile_field').val();
    //         var ref_id = $('#ref_id_field').val();

    //     $.ajax({beforeSend: function(){
    //         $('#progressbar').show();
    //             },
    //             method: "GET",
    //             url: "{{ URL::to('admin/familymembers/editrow') }}",
    //             data: {
    //                 name:name,

    //                 father_name:father_name,
    //                 grand_father_name:grand_father_name,
    //                 g_grand_father_name:g_grand_father_name,

    //                 request_id:request_id,
    //                 gender:gender,
    //                 alive:alive,
    //                 mobile:mobile,
    //                 ref_id:ref_id
    //             }
    //         })
    //       .done(function( result ) {
    //         location.reload();
    //         $( window ).load(function() {
    //           $('#progressbar').hide();
    //         });
    //       });
    // });

        // ------------ bulk source editinig ----------------

        $( "#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 () {
            // e.preventDefault();
            var ret = confirm("Are you sure you want to delete?");

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

        //console.log(jQuery.parseJSON( '{{$countries}}' ));
        //For City Country Dropdown in Filter Columns of Web Request
        var countries_object = null;
        var cities_object = null;


         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==10){
        $(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==16){
                            $(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==17){
                                    $(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==13){
                                    $(this).html('<select id="countries_table" name="country" class="form-control"></select>');
                                    $('#countries_table').html(countries_option);
                                    }else if(x==12){
                                        $(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": "{{ URL::to('admin/familymembers/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'nodeID', name: 'nodeID'},
                {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": [1],
                    "visible": false
                },
                {
                    "targets": [0,19],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3, 4, 5, 6, 7 ,8, 9,10,11,12,13,14,15,16,17,18,19],
                    "orderable": false
                },
                {width: 260, targets: [2,3] }
            ]
        });


        $('.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 == 10 || colIdx == 16 || colIdx == 17 || colIdx == 12 || colIdx == 13)
                    {
                        $('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 "); // modify table search input
        $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
        $('#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();
            // console.log(request_city);
              if(country != ''){
                $.ajax({
                    type: "GET",
                    cache:false,
                    url: "/admin/memberrequests/getlocalcities/"+encodeURIComponent(country),
                    success: function(response)
                    {
                      // console.log("this is the response",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;
                        };
                       // console.log(is_present);
                      $('#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');
        };
        // 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
          // console.log($("#country_select").val());

          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,
            success: function(response){
                $('#datatable-example').DataTable().ajax.reload();
                $('#editTreeNodeModal').modal('hide');
                $('#progressbar').hide();
            }
        });
    }
</script>

@endsection