@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::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()->can('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">
                            <a href="{{ URL('/admin/events') }}"><i class="icon-custom-right" style="font-size: 24px !important;"></i></a>

                        </div>

                    </div>
                    <div class="text-center form-group">
                        <h2>{{$event->arabic_title}}</h2>
                        <span>{{$event->event_id}}</span>
                    </div>

                    <div class="row" style="margin-top: 20px ; margin-bottom: 20px">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="col-lg-10 col-lg-push-1 col-md-10 col-md-push-1 col-sm-10 col-sm-push-1 col-xs-10 col-xs-push-1"
                                 style="font-size: 16px ; text-align: center">
                                @foreach($data as $key => $value)
                                    <div class="col-lg-2 col-md-2 col-sm-2 sol-xs-2">
                                        <p style="color: saddlebrown;font-weight: bold;font-size: 18px">{{'فرع' .' '.$key}}</p>
                                        <span style="font-weight: bold;color: #282828;display: block;margin-top: -10px;font-size: 22px">{{$value}}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-bottom: 5px">
                        <div class="col-md-12 col-sm-12">
                            <div class='control'>
                                <div class="pull-right markaction">

                                    <a href="{{ route('admin.event.attendees.csvdownload' , $event_id)}}"
                                       onclick="$('#progressbar').show();setTimeout(function() {$('#progressbar').hide();}, 20000);"
                                       class="btn btn-info">تحميل CSV</a>
                                    <a href="{{route('admin.event.attendees.exceldownload' , $event_id)}}"
                                       onclick="$('#progressbar').show();setTimeout(function() {$('#progressbar').hide();}, 20000);"
                                       class="btn btn-info">تحميل Excel</a>
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger"
                                       data-url="{{ URL::to('admin/events/attendees/bulkdelete') }}">حذف Delete</a>
                                </div>
                            </div>
                        </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="5%"></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="5%">تسجيل الدخول من</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">

        function showAttendeesProfilePopup(event_id,family_tree_id){
            $('#progressbar').show();
            $.get('/admin/events/'+event_id+'/attendees/'+family_tree_id+'/profile-popup',{},function(response){
                $('#daleelProfilePopup .modal-content').html(response);
                $('#daleelProfilePopup .modal-dialog').css({'width': '570px'});
                $('#daleelProfilePopup').modal('show');
                $('#progressbar').hide();
            });
        }

        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==9){
                    $(this).html('<select id="dropdowngender" name="gender" class="form-control">@if($event->gender == 0)<option value="">الكل</option>@endif @if($event->gender == 0 || $event->gender == 1)<option value="0">ذكر</option>@endif @if($event->gender == 0 || $event->gender == 2)<option value="1">انثى</option>@endif</select>');
                    // $(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": "{!! URL::to('admin/events/'.$event_id.'/attendees_datatable?'.(isset($_SERVER['QUERY_STRING']) ? $_SERVER['QUERY_STRING'] : '')) !!}",
                    "type": "POST"
                },
                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: 'checked_in_by', name: 'checked_in_by'},

                    {data: 'actions', name: 'actions'}
                ],
                "columnDefs": [
                    {
                        "targets": [2,11,12,13,14,15],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "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 "); // 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