@extends('app')
<style type="text/css">
    #mrc_searchbar4,
    #mrc_searchbar5,
    #mrc_searchbar6,
    #mrc_searchbar7,
    #mrc_searchbar8 {
        width: 85px;
    }

    #mrc_searchbar3 {
        width: 69px;
    }

    #mrc_searchbar10 {
        width: 90px;
    }

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

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

    #mrc_searchbar0 {
        display: none;
    }

    #mrc_searchbar9,
    #mrc_searchbar17 {
        display: none;
    }

    #mrc_searchbar13 {
        width: 116px;
    }

    #mrc_searchbar12 {
        width: 116px;
    }

    #mrc_searchbar11 {
        width: 90px;
    }

    #mrc_searchbar16 {
        width: 101px;
    }

    #mrc_searchbar17 {
        width: 93px;
    }
</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">
                    <div class='row control markaction'
                        style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                        <div class="col-sm-3 col-xs-12">
                            @if (Auth::user()->hasRole('superadmin'))
                                <a id="del" href="javascript:void(0)" class="btn btn-wider btn-danger pull-right"
                                    data-msg="هل أنت متأكد من الحذف؟"
                                    data-url="{{ URL::to('admin/memberrequestclone/bulkdelete') }}">حذف</a>
                            @endif
                        </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 style="background-color: transparent;"></th>
                                <th width="1%"></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="1%"></th>
                                <th width="1%"></th>
                                <th width="5%"></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 width="1%">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="1%">*</th>
                                <th width="2%">المدينة</th>

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

                                <th width="2%">الفرع</th>
                                <th width="3%">الهالتف المتحرك</th>
                                <th width="1%">نوع</th>
                                <th width="1%">حالة</th>
                                <th width="5%">التاريخ</th>
                                <th width="2%">
                                    <div style="width: 10px;"></div>
                                </th>

                            </tr>
                        </tfoot>





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

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




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


            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="">1-غير محدد</option><option value="فرع ابراهيم حمد البسام">2-فرع ابراهيم حمد البسام</option><option value="فرع سليمان حمد البسام">3-فرع سليمان حمد البسام</option><option value="فرع عبدالقادر حمد البسام">4-فرع عبدالقادر حمد البسام</option><option value="فرع محمد حمد البسام">5-فرع محمد حمد البسام</option><option value="فرع عبدالرحمن حمد البسام">6-فرع عبدالرحمن حمد البسام</option><option value="فرع عبدالعزيز حمد البسام">7-فرع عبدالعزيز حمد البسام</option></select>');

                    $(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 {
                    $(this).html('<input class="searchbars" id="mrc_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": [
                    [0, "desc"]
                ],

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

                    {
                        data: 'uni_id',
                        name: 'uni_id'
                    },
                    {
                        data: 'gender',
                        name: 'member_request_clones.gender'
                    },
                    {
                        data: 'name',
                        name: 'member_request_clones.name'
                    },
                    {
                        data: 'father_name',
                        name: 'member_request_clones.father_name'
                    },
                    {
                        data: 'grand_father_name',
                        name: 'member_request_clones.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: 'status'
                    },
                    {
                        data: 'created_at',
                        name: 'member_request_clones.created_at'
                    },
                    {
                        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],
                        "orderable": false
                    },
                    {
                        "width": "2%",
                        "targets": [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                    },
                    {
                        "width": "0",
                        "targets": [16]
                    }

                ],

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



        });
    </script>
@endsection