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

    #mr_searchbar4,
    #mr_searchbar5,
    #mr_searchbar6,
    #mr_searchbar7 {
        width: 85px;
    }

    #mr_searchbar2 {
        width: 67px;
    }

    #mr_searchbar8 {
        width: 85px;
    }


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

    th < input#mr_searchbar10.searchbars {
        width: 100px;
    }

    #mr_searchbar12 {
        width: 116px;
    }

    #mr_searchbar13 {
        width: 145px;
    }

    #mr_searchbar11 {
        width: 80px;
    }

    #mr_searchbar10 {
        width: 80px;
    }

    #mr_searchbar15 {
        width: 89px;
    }

    #mr_searchbar16 {
        width: 101px;
    }

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


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



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

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

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


                        </div>

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

                        <div class="col-sm-5 col-xs-12">
                            @if (Auth::user()->can('memberrequests-create'))
                                <a href="{{ URL::to('admin/register') }}" class="btn btn-primary">إضافة إستمارة</a>
                            @endif
                        </div>

                    </div>
                    <table class="table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0"
                        width="100%" style="position: relative;">
                        <thead class="datatable-filter-row">
                            <tr>
                                <th width="2%"></th>
                                <th></th>

                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="1%"></th>
                                <th width="2%"></th>

                                <th width="2%"></th>

                                <th width="2%"></th>
                                <th width="3%"></th>
                                <th width="2%"></th>
                                <th width="2%"></th>
                                <th width="5%"></th>
                                <th width="1%"></th>
                                <th width="2%">
                                    <div style="width: 10px;"></div>
                                </th>
                            </tr>

                        </thead>

                        <tfoot>
                            <tr style="color: white;">
                                <th width="2%"><input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" /></th>
                                <th>Id</th>

                                <th width="2%">رقم</th>
                                <th width="2%">الجنس</th>
                                <th width="2%">الإسم الأول</th>
                                <th width="2%">الأب</th>
                                <th width="2%">الجد ١</th>
                                <th width="2%">الجد ٢</th>
                                <th width="2%">الجد ٣</th>
                                <th width="2%">*</th>
                                <th width="2%">المدينة</th>

                                <th width="2%">البلد</th>

                                <th width="2%">الفرع</th>
                                <th width="3%">الهالتف المتحرك</th>
                                <th width="2%">نوع</th>
                                <th width="2%">حالة</th>
                                <th width="5%">التاريخ</th>
                                <th width="1%">آخر تحديث</th>
                                <th width="2%">
                                    <div style="width: 10px;"></div>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <form method="POST" class="inline" id="bulkaction" action="">
        @csrf
        <input type="hidden" name="ids" id="ids" value="">
    </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 id="form_edit" class="labels-align-verticle" method="POST"
                    action="{{ route('admin.memberrequests.bulkedit') }}">
                    @csrf

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

                    <div class="modal-body">
                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-5 col-md-offset-3 col-xs-12">
                                        <input type="text" name="data_field" id="data_field_id" class="form-control"
                                            required maxlength="15">
                                    </div>
                                    <div class="col-md-2 col-xs-12">
                                        <label for="data_field_id" class="form-label text-right">
                                            الإسم الأول
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

                        <button type="submit" id="submit_edit_form" class="btn btn-primary btn-cons"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 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 id="form_row_edit" class="labels-align-verticle" method="POST"
                    action="{{ route('admin.memberrequests.editrow') }}">
                    @csrf

                    <div class="modal-body">
                        <input type="hidden" id="id_fields" name="row_id" class="form-control"
                            placeholder="Enter Message">

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

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

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

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

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

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

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

                                <!-- Grandfather 1 -->
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="grand_father_name_field" name="grand_father_name"
                                            class="form-control" required maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="grand_father_name_field" class="form-label"
                                            style="margin-right:auto">الجد ١</label>
                                    </div>
                                </div>

                                <!-- Grandfather 2 -->
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="grand_father_name_1_field" name="grand_father_name_1"
                                            class="form-control" required maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="grand_father_name_1_field" class="form-label text-right"
                                            style="margin-right:auto">الجد ٢</label>
                                    </div>
                                </div>

                                <!-- Grandfather 3 -->
                                <div class="form-group row">
                                    <div class="col-md-9 col-xs-12">
                                        <input type="text" id="grand_father_name_2_field" name="grand_father_name_2"
                                            class="form-control" required maxlength="15">
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <label for="grand_father_name_2_field" class="form-label text-right"
                                            style="margin-right:auto">الجد ٣</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" id="submit_row_edit_form" class="btn btn-primary btn-cons"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End RowEditModal -->
    <!-- Status Modal -->
    <div class="modal fade" id="myStatusModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحديث حالة الإستمارة</h4>
                </div>

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

                    <div class="modal-body">
                        <div class="row margin-bottom">
                            <div class="col-md-12 col-xs-12">
                                <div class="form-group row">
                                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                                        <input type="hidden" name="ids_array" id="ids_status" class="form-control">

                                        <select name="gender" id="genderdropdown" class="form-control" required
                                            style="width:100%;">
                                            <option value=""></option>
                                            <option value="pending">Pending - p</option>
                                            <option value="ready_for_review">Ready for review - R</option>
                                            <option value="on_hold">On Hold - O</option>
                                        </select>
                                    </div>

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

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

                        <button type="submit" id="submit_edit_form" class="btn btn-primary btn-cons"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myEditStatusModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحديث الحالة</h4>
                </div>

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

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

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

                                    <div class="col-md-4 col-md-offset-4 col-xs-12">
                                        <select name="status" id="statusdropdown" class="form-control" required
                                            style="width: 100%;">
                                            <option value=""> </option>
                                            <option value="pending">Pending - P</option>
                                            <option value="ready_for_review">Ready for review - R</option>
                                            <option value="on_hold">On Hold - H</option>
                                        </select>
                                    </div>

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

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

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons" id="submit_edit_status_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myCityCountryModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحديث البلد/المدينة</h4>
                </div>

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

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

                                <div class="form-group row">
                                    <input type="hidden" name="ids_array" id="ids_city_country" class="form-control">

                                    <div class="right col-md-4 col-md-offset-4 col-sm-12">
                                        <select name="country" id="bulkcountry_select" class="form-control"
                                            style="width:100%;" required>
                                            <option value=""> </option>
                                            @foreach ($countries as $key => $country)
                                                <option value="{{ $key }}">{{ $country }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-1 col-sm-12">
                                        <label for="country" class="form-label">البلد</label>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="right col-md-4 col-md-offset-4 col-sm-12">
                                        <select name="city" id="bulkcity_select" class="form-control"
                                            style="width:100%;" required>
                                            <option value=""> </option>
                                            @foreach ($city as $key => $c)
                                                <option value="{{ $key }}">{{ $c }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-1 col-sm-12">
                                        <label for="city" class="form-label">المدينة</label>
                                    </div>
                                </div>

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

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons" id="submit_city_country_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- NoOriginalDataMessage modal  -->
    <div id="NoOriginalDataMessage" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content">العودة إلى الأصل</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        jQuery(document).ready(function($) {


            var request_city = "";
            $('#genderdropdown').select2({
                dir: "rtl",
                placeholder: "اضغط"
            });


            $(document).on("click", "#requests", function(e) {
                var id = $(this).data('id');
                var status = $(this).data('status');
                console.log("req clicked.", id);

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


            });


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

                var country = request.country;
                var city = request.city;
                var name = request.name;
                var gender = request.gender;
                var father1 = request.father_name;
                var father2 = request.grand_father_name;
                var father3 = request.grand_father_name_1;
                var father4 = request.grand_father_name_2;
                var mobile_number = request.mobile_number;
                var request_id = request.id;

                $('#genderdropdownrow').select2({
                    dir: 'rtl',
                    placeholder: 'اضغط'
                }).val(gender).trigger('change');
                $("#name_field").val(name);
                $('#country_select').select2({
                    dir: "rtl",
                    placeholder: 'اضغط'
                }).val(country).trigger('change');
                $('#city_select').select2({
                    dir: "rtl",
                    placeholder: 'اضغط'
                }).val(city).trigger('change');
                $("#father_name_field").val(father1);
                $("#grand_father_name_field").val(father2);
                $("#grand_father_name_1_field").val(father3);
                $("#grand_father_name_2_field").val(father4);
                request_city = request.city;
                console.log(request_city);
                $('#number_field').val(mobile_number);
                $('#id_field').val(request_id);


            });

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

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

                if (ids.length > 0) {

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

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

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

            });

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

                if (ids.length > 0) {
                    $('#genderdropdown').select2('val', '');
                    $('#myStatusModal').modal('show');
                    $("#ids_status").val(ids);
                } else {
                    showErrorMessage(errorMessageStr);
                }

            });

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

                if (ids.length > 0) {

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

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

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

            });


            $(".mobile_number").keypress(function(e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    //display error message
                    return false;
                }
            });




            // ---------------------------------------------

            // $(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;
            // });
            var x = 0;
            $('#datatable-example thead th').each(function() {

                var title = $('#datatable-example thead th').eq($(this).index()).text();
                if (x == 3) {
                    $(this).html(
                        '<select id="genderDropdown_mb" name="Gender" class="form-control"><option value="">الكل</option><option value="0">ذكر</option><option value="1">انثى</option></select>'
                    );
                } else if (x == 14) {
                    $(this).html(
                        '<select id="requestTypeDropdown" name="RequestType" class="form-control"><option value="">الكل</option><option value="admin">Admin - A</option><option value="public">Public - P</option></select>'
                    );
                } else if (x == 15) {
                    $(this).html(
                        '<select id="statusDropdown" name="Status" class="form-control"><option value="">الكل</option><option value="pending">Pending - P</option><option value="ready_for_review">Ready For Review - R</option><option value="completed">Completed - C</option><option value="on_hold">On Hold - H</option></select>'
                    );
                } else if (x == 12) {
                    $(this).html(
                        '<select id="branchDropdown" name="branch" class="form-control pull-left"><option value="">الكل</option><option value="غير محدد">U-غير محدد</option><option value="فرع ابراهيم حمد البسام">1-فرع ابراهيم حمد البسام</option><option value="فرع سليمان حمد البسام">2-فرع سليمان حمد البسام</option><option value="فرع عبدالقادر حمد البسام">3-فرع عبدالقادر حمد البسام</option><option value="فرع محمد حمد البسام">4-فرع محمد حمد البسام</option><option value="فرع عبدالرحمن حمد البسام">5-فرع عبدالرحمن حمد البسام</option><option value="فرع عبدالعزيز حمد البسام">6-فرع عبدالعزيز حمد البسام</option></select>'
                    );
                } else if (x == 2) {
                    $(this).html('<input class="searchbars" id="mr_searchbar' + x +
                        '" type="text" maxlength="6" placeholder="" />');

                } else {
                    $(this).html('<input class="searchbars" id="mr_searchbar' + x +
                        '" type="text" placeholder="" />');
                }
                x++;
            });
            //memberrequest datatable
            var table = $('#datatable-example').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,


                "dom": '<"top"fpil<"clear">>rt<"bottom"pi<"clear">>',
                fixedColumns: {
                    leftColumns: 2
                },
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "emptyTable": "لا يوجد محتوى",
                    "zeroRecords": "لم يصل البحث إلى أي نتيجة",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                resizableColumns: true,
                scrollCollapse: true,

                "order": [
                    [1, "desc"]
                ],

                ajax: {
                    "url": "{{ URL::to('admin/memberrequests/datatable') }}",
                    "type": "POST"
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },

                    {
                        data: 'uni_id',
                        name: 'uni_id'
                    },
                    {
                        data: 'gender',
                        name: 'member_requests.gender'
                    },
                    {
                        data: 'name',
                        name: 'member_requests.name'
                    },
                    {
                        data: 'father_name',
                        name: 'member_requests.father_name'
                    },
                    {
                        data: 'grand_father_name',
                        name: 'member_requests.grand_father_name'
                    },
                    {
                        data: 'grand_father_name_1',
                        name: 'grand_father_name_1'
                    },
                    {
                        data: 'grand_father_name_2',
                        name: 'grand_father_name_2'
                    },
                    {
                        data: 'children_sibling_count',
                        name: 'children_sibling_count'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },

                    {
                        data: 'country',
                        name: 'country'
                    },

                    {
                        data: 'family_tree_name',
                        name: 'family_trees.name'
                    },
                    {
                        data: 'mobile_number',
                        name: 'mobile_number'
                    },
                    {
                        data: 'request_type',
                        name: 'request_type'
                    },
                    {
                        data: 'status',
                        name: 'member_requests.status'
                    },
                    {
                        data: 'created_at',
                        name: 'member_requests.created_at'
                    },
                    {
                        data: 'updated_by',
                        name: 'users.username'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }

                ],


                "iDisplayLength": 50,
                "columnDefs": [{
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "searchable": false,
                        "targets": [9]
                    },

                    {
                        "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
                        "orderable": false
                    },
                    {
                        "width": "2%",
                        "targets": [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                    },
                    {
                        "width": "0",
                        "targets": [15]
                    }

                ],

                fixedColumns: {
                    rightColumns: 4
                }


            });



            $('#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();
                });
            });

            $('.dataTables_scrollFoot').prependTo('.dataTables_scrollHeadInner');







            $('#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');
            });

            $('div.dataTables_length select').select2();

            $(".select2-wrapper").select2({
                minimumResultsForSearch: -1
            });


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

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

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

                            });

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

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


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

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

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


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

                        }
                    });
                };
            }

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

            // Location Information, country and city
            var country_present = "";
            if (country_present == '') {
                $('#country_select').select2({
                    dir: "rtl",
                    placeholder: "اضغط"
                }).val('').trigger('change');
                $('#city_select').select2({
                    dir: "rtl",
                    placeholder: "اضغط"
                }).val('').trigger('change');
            };
            // alert($("#country_select").html()); 
            $('#city_select').select2();
            $('#country_select').select2().on("change", function(e) {
                // mostly used event, fired to the original element when the value changes
                // 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();

        });
    </script>
@endsection