@extends('layout.master')

@section('title', 'Active Members')

@section('content')

    <section>
        <div class="row">
            <div class="col-12">

                <div class="card">

                    <div class="card-content">
                        <div class="card-header">
                             <h1>Active Members</h1>

                        </div>
                        <div class="card-body card-dashboard">
                            @include('inc.messages')
                            <table class="table table-bordered datatable" id="datatable" style="z-index: 3;">
                                <thead>
                                    <tr role="row" class="bg-primary white">
                                        <th class="border-primary border-darken-1"></th>
                                        <th class="border-primary border-darken-1">S. No.</th>
                                        <th class="border-primary border-darken-1">Full Name</th>
                                        <th class="border-primary border-darken-1">Guardian Name</th>
                                        <th class="border-primary border-darken-1">Member #</th>
                                        <th class="border-primary border-darken-1">Gender</th>
                                        <th class="border-primary border-darken-1">DOB</th>
                                        <th class="border-primary border-darken-1">CNIC</th>
                                        <th class="border-primary border-darken-1">Mobile #</th>
                                        <th class="border-primary border-darken-1">Contact #</th>
                                        <th class="border-primary border-darken-1">Email</th>
                                        <th class="border-primary border-darken-1">Picture</th>
                                        <th class="border-primary border-darken-1">Maritial Status</th>
                                        <th class="border-primary border-darken-1">Religion</th>
                                        <th class="border-primary border-darken-1">Nationality</th>
                                        <th class="border-primary border-darken-1">Blood Group</th>
                                        <th class="border-primary border-darken-1">Qualification</th>
                                        <th class="border-primary border-darken-1">Profession</th>
                                        <th class="border-primary border-darken-1">Income</th>
                                        <th class="border-primary border-darken-1">District</th>
                                        <th class="border-primary border-darken-1">Village</th>
                                        <th class="border-primary border-darken-1">City</th>
                                        <th class="border-primary border-darken-1">Country</th>
                                        <th class="border-primary border-darken-1">Address</th>
                                        <th class="border-primary border-darken-1">Action</th>
                                    </tr>
                                </thead>
                            </table>
                            <input type="hidden" id="current_member">

                            <div class="modal fade" id="info_modal" role="dialog" aria-labelledby="info_modal_title" aria-hidden="true">
                                <div class="modal-dialog modal-sm" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        </div>
                                        <div class="modal-body text-center">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
{{--
                            <div class="modal fade text-left" id="AddFatherModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="AddFatherModal"
                            aria-hidden="true">
                           <div class="modal-dialog modal-lg" role="document">
                               <div class="modal-content">
                                   <div class="modal-header bg-primary white">
                                       <h4 class="modal-title white">Add Father</h4>
                                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                           <span aria-hidden="true">&times;</span>
                                       </button>
                                   </div>
                                   <form id="add_father_form" class="form-horizontal" action="{{ route('member.add_father') }}" method="POST" novalidate="novalidate">
                                       @csrf
                                       <div class="modal-body">

                                           <div class="row justify-content-center">
                                               <div class="col-12 form-group">
                                                <select class="form-control select2" id="father_id" name="father_id" data-rule-required="true" data-msg-required="Vehicle Type is required">
                                                    @foreach($fathers as $father)
                                                        <option value="{{$father->id}}">{{$father->name}} ({{$father->member_number}})</option>
                                                    @endforeach
                                                </select>
                                               </div>
                                           </div>

                                       </div>
                                       <div class="modal-footer">
                                           <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                                           <button id="AddFatherBtn" type="submit" class="btn btn-info">Add</button>
                                       </div>
                                   </form>
                               </div>
                           </div>
                        </div> --}}


                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/selects/select2.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/icheck/icheck.css')}}">
    <style type="text/css">
    .dis-none{
        display: none !important;
    }
        table.dataTable {
            font-size: 12px;
        }

        table.dataTable thead tr th {
            padding-left: 0.5em;
            white-space: normal;
            word-wrap: break-word;
        }

        table.dataTable thead tr th:before,
        table.dataTable thead tr th:after {
            height: 20px;
            margin-bottom: -10px;
            bottom: 50% !important;
        }

        table.dataTable tbody tr td {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }

        table.dataTable tbody tr td.select-checkbox:before {
            top: 50%;
            border-color: #64a0d2;
        }

        table.dataTable tbody tr.selected td.select-checkbox:after {
            top: 50%;
            text-shadow: none;
        }

        .btn-group .dropdown-menu .dropdown-item {
            white-space: normal;
        }

        #toast-bottom-center.toast-container {
            text-align: center;
        }

        #toast-bottom-center.toast-container .toast {
            display: table;
            width: auto !important;
            text-align: left;
        }
    </style>
@endsection

@section('js')
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}" type="text/javascript"></script>

    <script src="{{asset('app-assets/vendors/js/forms/icheck/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('app-assets/js/scripts/forms/checkbox-radio.js')}}" type="text/javascript"></script>
    <script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('app-assets/vendors/js/forms/validation/jquery.validate.min.js')}}" type="text/javascript"></script>

    <script src="{{asset('app-assets/vendors/js/forms/validation/additional-methods.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('app-assets/vendors/js/forms/extended/inputmask/jquery.inputmask.bundle.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/datatable_buttons.js')}}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {


            $('#father_id').prepend('<option value="" selected="selected"></option>').select2({
                width: '100%',
                placeholder: 'Select Father*',
                dropdownParent:$('#addFatherForm')
            });

       var selected_rows = [];

            //table start

               var table =  $('.datatable').DataTable({
                   dom: '<"d-inline-block"l><"pull-right"B>tipr',

                        buttons: [
                        // {
                    //     extend: 'selectAll',
                    //     text: 'Select All',
                    //     className: 'btn btn-primary select_all',
                    //     action : function(e) {
                    //         e.preventDefault();
                    //         table.rows().nodes().each(function(index) {
                    //             var row = table.row(index);
                    //             if ($(row.node().firstChild).hasClass('select-checkbox') && !$(row.node()).hasClass('selected')) {
                    //                 id = parseInt(row.id());
                    //                     row.select();
                    //                     var index = $.inArray(id, selected_rows);
                    //                     if (index === -1) {
                    //                         selected_rows.push(id);
                    //                     }
                    //                     table.button('.activate_members').enable();
                    //             }
                    //         });
                    //     }
                    // },{
                    //     extend: 'selectNone',
                    //     text: 'Select None',
                    //     className: 'btn btn-primary select_none',
                    //     action : function(e) {
                    //         e.preventDefault();

                    //         table.rows().nodes().each(function(index) {
                    //             var row = table.row(index);

                    //             if ($(row.node().firstChild).hasClass('select-checkbox')) {
                    //                 row.deselect();

                    //                 id = parseInt(row.id());

                    //                 var index = $.inArray(id, selected_rows);

                    //                 if (index !== -1) {
                    //                     selected_rows.splice(index, 1);
                    //                 }

                    //             }
                    //         });

                    //         $('#submit_selected_status').attr('disabled', true);
                    //     }
                    // },{
                    //        text: '<i class="la la-plus"></i> Activate',
                    //        className: 'btn btn-primary activate_members',
                    //        enabled: true,
                    //        action: function (e, dt, node, config) {
                    //         //     $('#addCity').modal('show');
                    //         //    var $invoker = $(e.relatedTarget);
                    //         //    var action = 'addcity';

                    //         //    if(action === 'addcity'){
                    //         //         $.get( "city_management/form", function( data ) {
                    //         //            $("#addCityDiv").html(data);
                    //         //        });
                    //         //    }
                    //        }

                    //     },

                        {
                        extend: 'excel',
                        title: 'Active Members',
                        className: 'btn btn-primary',
                        text: '<i class="la la-file-excel-o"></i> Excel',
                        },'reset'

                        ],
                    select: {
                    info: false,
                    style: 'multi',
                    selector: 'td.select-checkbox',
                    className: 'selected bg-success bg-lighten-5 success'
                },
                    scrollX: true, scrollY: '500px',
                    lengthMenu: [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, 'All']],
                    pageLength: 50,
                    pagingType: 'full_numbers',
                    processing: true,
                    language: {
                        processing: data_table_loader
                    },
                    serverSide: true,
                    ajax: '{{ route('members.active.list') }}',
                   rowId: 'id',
                    order: [[1, 'desc']],
                    columns: [
                        {data: 'id', orderable: false, searchable: false, class: 'text-center align-middle select p-1', targets: 0, render: function (data, type, row) {return '';}},
                        {orderable: false, searchable: false, name: 'serial_number', class: 'align-middle serial_number', targets: 1, render: function (data, type, row) {return '';}},
                        {data: 'name', name: 'members.name', class: 'align-middle text-center name'},
                        {data: 'parent_name', name: 'members.parent_name', class: 'align-middle text-center parent_name'},
                        {data: 'member_number', name: 'members.member_number', class: 'align-middle text-center member_number'},
                        {data: 'gender', name: 'members.gender', class: 'align-middle text-center gender'},
                        {data: 'dob', name: 'members.dob', class: 'align-middle text-center dob'},
                        {data: 'cnic', name: 'members.cnic', class: 'align-middle text-center cnic'},
                        {data: 'mobile_number', name: 'members.mobile_number', class: 'align-middle text-center mobile_number'},
                        {data: 'phone', name: 'members.phone', class: 'align-middle text-center phone'},
                        {data: 'email', name: 'members.email', class: 'align-middle text-center email'},
                        {data: 'profile_pic', name: 'members.picture', class: 'align-middle text-center profile_pic'},
                        {data: 'maritial_status', name: 'members.maritial_status', class: 'align-middle text-center maritial_status'},
                        {data: 'religion', name: 'members.religion', class: 'align-middle text-center religion'},
                        {data: 'nationality', name: 'members.nationality', class: 'align-middle text-center nationality'},
                        {data: 'blood_group', name: 'members.blood_group', class: 'align-middle text-center blood_group'},
                        {data: 'qualification', name: 'members.qualification', class: 'align-middle text-center qualification'},
                        {data: 'profession', name: 'members.profession', class: 'align-middle text-center profession'},
                        {data: 'income', name: 'members.income', class: 'align-middle text-center income'},
                        {data: 'district', name: 'members.district', class: 'align-middle text-center district'},
                        {data: 'village', name: 'members.village', class: 'align-middle text-center village'},
                        {data: 'city', name: 'members.city', class: 'align-middle text-center city'},
                        {data: 'country', name: 'members.country', class: 'align-middle text-center country'},
                        {data: 'address', name: 'members.address', class: 'align-middle text-center address'},
                        {data: 'action', name: 'action', class: 'text-center align-middle action p-1', orderable: false, searchable: false}
                    ],
                   rowCallback: function(row, data, index) {
                       var info = table.page.info();

                       $('td:eq(1)', row).html(index + 1 + info.page * info.length);
                       console.log(info);
                       if ($.inArray(data.id, selected_rows) !== -1) {
                            table.row(row).select();
                        }
                        if(data.status == 0){
                         $('tr', row).addClass('select-checkbox disabled');

                         $('td:eq(0)', row).addClass('select-checkbox disabled');

                       }

                   },
                   initComplete: function() {
                       var search = $('<tr role="row" class="bg-primary white search"></tr>').appendTo(this.api().table().header());

                       var td = '<td style="padding:5px;" class="border-primary border-darken-1"><fieldset class="form-group m-0 position-relative has-icon-right"></fieldset></td>';
                       var input = '<input type="text" class="form-control form-control-sm input-sm primary">';
                       var icon = '<div class="form-control-position primary"><i class="la la-search"></i></div>';
                       var gender_select = '<select name="status_select" id="gender_select" class="select2 form-control">' +
                        '<option value="0">Male</option>' +
                        '<option value="1">Female</option>' +
                        '</select>';
                        var maritial_status_select = '<select name="status_select" id="maritial_status_select" class="select2 form-control">' +
                        '<option value="0">Married</option>' +
                        '<option value="1">Unmarried</option>' +
                        '</select>';
                      this.api().columns().every(function(column_id) {
                           var column = this;
                           var header = column.header();

                           if ($(header).is('.select') || $(header).is('.serial_number') || $(header).is('.action') || $(header).is('.profile_pic') ) {
                               $(td).appendTo($(search));
                           }
                           else if($(header).is('.gender')){
                            $(gender_select).appendTo($(search))
                                .on( 'change', function () {
                                    column.search($(this).val(), false, false, true).draw();
                                } ).wrap(td);
                        }
                        else if($(header).is('.maritial_status')){
                            $(maritial_status_select).appendTo($(search))
                                .on( 'change', function () {
                                    column.search($(this).val(), false, false, true).draw();
                                } ).wrap(td);
                        }
                           else {
                               var current = $(input).appendTo($(search)).on('change', function() {
                                   column.search($(this).val(), false, false, true).draw();
                               }).wrap(td).after(icon);

                               if (column.search()) {
                                   current.val(column.search());
                               }
                           }
                       });
                       $("#maritial_status_select").prepend('<option value="" selected></option>').select2({
                        placeholder: "Select Maritial Status",
                        width:'100%',
                        containerCssClass: 'select-xs',
                        dropdownCssClass: 'form-control-sm p-0'
                    });
                    $("#gender_select").prepend('<option value="" selected></option>').select2({
                        placeholder: "Select Gender",
                        width:'100%',
                        containerCssClass: 'select-xs',
                        dropdownCssClass: 'form-control-sm p-0'
                    });
                       this.api().table().columns.adjust();

                   }
                });
                $('#datatable tbody').on('click', 'tr td.select-checkbox', function() {
                    var id = parseInt($(this).parent('tr').attr('id'));
                    var index = $.inArray(id, selected_rows);
                    if (index === -1) {
                        selected_rows.push(id);
                    }
                    else {
                        selected_rows.splice(index, 1);
                    }

                    if (selected_rows.length > 0) {
                        table.button('.activate_members').enable();

                    }
                    else {
                        table.button('.activate_members').disable();

                    }
                    console.log(selected_rows);
                });



        $('#datatable tbody').on('click', 'tr td.profile_pic button', function() {
                var id = parseInt($(this).parents('tr').attr('id'));

                $('#info_modal .modal-body').html('');

                $.ajax({
                    url: '{!! route('members.profile_picture') !!}',
                    method: 'POST',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'id': id
                    }
                })
                    .done(function (data) {
                        if (data) {
                            var head = '';
                            var bag_numbers = '';
                            head = '<h4 class="modal-title" id="info_modal_title">Member Picture</h4>' +
                                '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                                '<span aria-hidden="true">×</span>\n' +
                                '</button>';

                                            bag_numbers = '<img src="{!! asset("'+data+'") !!}" style="width:250px;"/>';


                            $('#info_modal .modal-header').html(head);
                            $('#info_modal .modal-body').html(bag_numbers);

                            $('#info_modal').modal('show');
                        }
                    });
        });

        $('body').on('click','button.add_father',function () {
            $('#addFather').modal('show');

           var id = $(this).parents('tr').attr('id');


                $.get( ""+id+"/addfather", function( data ) {
                    $("#addFatherDiv").html(data);
                });

        //    $('#current_member').val(id);

        //    var id = parseInt($(this).parents('tr').attr('id'));

        //         $('#AddFatherModal').modal('show');

       });


       $('body').on('click','button.add_mother',function () {
            $('#addMother').modal('show');
               var id = $(this).parents('tr').attr('id');
                $.get( ""+id+"/addmother", function( data ) {
                    $("#addMotherDiv").html(data);
                });
       });
       $('body').on('click','button.add_wife',function () {
            $('#addWife').modal('show');
               var id = $(this).parents('tr').attr('id');
                $.get( ""+id+"/addwife", function( data ) {
                    $("#addWifeDiv").html(data);
                });
       });

       $('body').on('click','button.add_husband',function () {
            $('#addHusband').modal('show');
               var id = $(this).parents('tr').attr('id');
                $.get( ""+id+"/addhusband", function( data ) {
                    $("#addHusbandDiv").html(data);
                });
       });

       $('body').on('click','button.edit_member',function () {
               var id = $(this).parents('tr').attr('id');
                // $.get( ""+id+"/editmember");

                window.location = ''+id+'/editmember/';

       });
            $('input.icheck').iCheck({
                checkboxClass: 'icheckbox_squaret-red',
                radioClass: 'iradio_square-red'
            });
        });



    </script>

@endsection