<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button"  onclick="$('#addgroupmembermodal').modal('show');" class="btn btn-primary waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                </div>
                <h4 class="page-title">Members of Group : (<?php echo $group->program_group;?>):</h4>
            </div>
        </div>

        
        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    <h4 class="header-title m-t-0 m-b-30">Filters:</h4>
                    <form action="<?php echo base_url();?>coaching_group_members/<?php echo $group->id_program_groups;?>" method="post">
                        <input type="hidden" name="csrf_test_name" id="members_csrf" value=""/>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="row">
                                            <div class="col-lg-12"> <label class="control-label">Select Status:</label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12"> 
                                                <select  class="form-control" id="group_status" name="group_status">
                                                    <option  <?php if($group_status==='All'){echo 'selected="selected"';}?> value="All">All</option>
                                                    <option  <?php if($group_status==='Active'){echo 'selected="selected"';}?> value="Active">Active</option>
                                                    <option  <?php if($group_status==='InActive'){echo 'selected="selected"';}?> value="InActive">InActive</option>                                                   
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="row">
                                            <div class="col-lg-12"> <label class="control-label">Get Members</label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" > 
                                                <button onclick="$('#members_csrf').val($('#cook').val());"  type="submit" class="btn btn-pink btn-bordred waves-effect w-md waves-light m-b-5">Run</button>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><i id="cog" class="fa fa-spin fa-cog" style="display:none; font-size:26px;width: auto;margin-right: 10px;"></i></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="row" >
            <div class="col-sm-12">
                <div class="card-box ">
                    <h4 class="header-title m-t-0 m-b-30"></h4>
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <td>ID</td>
                                        <td>Member</td>
                                        <td>Contact </td>
                                        <td>Added On</td>
                                        <td>Added By</td>
                                        <td>Status</td>
                                        <td>Action</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($group_members as $member){?>
                                    <tr>
                                        <td><?php echo $member->id_program_group_members;?></td>
                                        <td><?php echo $member->customer_name;?></td>
                                        <td><?php echo $member->customer_cell;?></td>
                                        <td><?php echo $member->added_on;?></td>
                                        <td><?php echo $member->added_by;?></td>
                                        <td class='<?php if($member->member_status == 'InActive') {echo "text-danger"; }else{echo "text-success";}?>'> <?php echo $member->member_status;?></td>                                        
                                        <td><button onclick="openedit(<?php echo $member->id_program_group_members.','.$member->program_enrollment_id.','.$member->program_group_id.',\''.$member->member_status.'\',\''.$member->customer_name.'\'';?>);" class="btn btn-sm btn-primary"><i class="fa fa-icon fa-keyboard-o"></i></button>
                                    </tr>
                                    <?php } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="addgroupmembermodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addgroupmembermodal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md"  >
                
                <div class="modal-content">
                    <form id="addgroupmemberform" method="POST" action="<?php echo base_url();?>coaching_controller/addgroupmember">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Edit Group</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <label class="form-label">Member Name / Cell:</label>
                                    </div>
                                    <div class="col-md-8">                                        
                                        <input class="form-control" id="add_member_name" name="add_member_name">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <label class="form-label">Group Name:</label>
                                    </div>
                                    <div class="col-md-8">                                        
                                        <select class="form-control" name="add_program_group_id" id="add_program_group_id" >
                                            <?php foreach($groups as $g){?>
                                            <?php if($g->id_program_groups == $group->id_program_groups){?>
                                            <option value="<?php echo $g->id_program_groups;?>"><?php echo $g->program_group.' - '.$g->program_service_name;?></option>
                                            <?php } ?>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12"> 
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <label class="form-label">Group Status:</label>
                                    </div>
                                    <div class="col-md-8">      
                                        <select  class="form-control" id="add_program_member_status" name="add_program_member_status">
                                            <option value="Active">Active</option>
                                            <option value="InActive">InActive</option>                                                   
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" onclick="$('#addgroupmembermodal').modal('hide');"  class="btn btn-default waves-effect waves-light pull-right m-l-5"><i class="fa fa-close"></i> Close</button>
                                <button type="button" onclick="addgroupmember();" class="btn btn-custom waves-effect waves-light pull-right">Save</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
                            
        <div id="editgroupmodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editgroupmodal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md"  >                
                <div class="modal-content">
                    <form id="editgroupform" method="POST" action="<?php echo base_url();?>coaching_controller/editgroupmember">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Edit Group</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <label class="form-label">Group Member ID:</label>
                                        </div>
                                        <div class="col-md-8">                                       
                                           <input class="form-control" readonly="readonly" type="text" name="id_program_group_members" id="edit_id_program_group_members">
                                           <input type="hidden" name="program_enrollment_id" id="edit_program_enrollment_id">                                       
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <label class="form-label">Member Name:</label>
                                        </div>
                                        <div class="col-md-8">                                        
                                            <input readonly="readonly" class="form-control" id="edit_member_name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <label class="form-label">Group Name:</label>
                                        </div>
                                        <div class="col-md-8">                                        
                                            <select class="form-control" name="edit_program_group_id" id="edit_program_group_id" >
                                                <?php foreach($groups as $g){?>
                                                <option value="<?php echo $g->id_program_groups;?>"><?php echo $g->program_group.' - '.$g->program_service_name;?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12"> 
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <label class="form-label">Group Status:</label>
                                        </div>
                                        <div class="col-md-8">      
                                            <select  class="form-control" id="edit_program_group_status" name="edit_program_group_status">
                                                <option value="Active">Active</option>
                                                <option value="InActive">InActive</option>                                                   
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" onclick="$('#editgroupmodal').modal('hide');"  class="btn btn-default waves-effect waves-light pull-right m-l-5"><i class="fa fa-close"></i> Close</button>
                                    <button type="button" onclick="editgroupmember();" class="btn btn-custom waves-effect waves-light pull-right">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>     
                </div>                       
            </div>  
        </div>
<script>

    $(document).ready(function(){
        enable_customers();
        
        $('#datatable-buttons').DataTable({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "stateSave": true,
            "dom": "Bfrtlip",
            "buttons": [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans"}, {
                    extend: "excel",
                    className: "btn-sm btn-warning btn-trans"
                }, {extend: "pdf", className: "btn-sm btn-purple btn-trans"}],
            "responsive": !0,
            "order": [[ 1, 'asc' ]],
            "displayLength": 25

        });
        
    });

    function addgroupmember(){
        
        var customerid = 0;
        var data = $("#add_member_name").select2('data');
        
        
        $.ajax({
                url: $("#addgroupmemberform").attr('action') || window.location.pathname,
                type: "POST",
                data: $("#addgroupmemberform").serialize()+ "&customer_id=" + data.id_customers+"&id_program_enrollment=" + data.id_program_enrollment,                 
                cache: false,
                async: true,
                success: function(data) {
                    //console.log(data);
                    if (data != "error"){
                        //location.href = '<?php echo base_url();?>coaching_members/5';
                        location.reload();
                    }
                }
                
        });
        

    }

    function openedit(id, enrollment_id, group_id, status,member_name){
        
        $("#edit_id_program_group_members").val(id);        
        $("#edit_program_enrollment_id").val(enrollment_id);                
        $("#edit_program_group_id").val(group_id);
        $("#edit_member_name").val(member_name);
        
        $("#edit_program_group_status").val(status);
        
        $("#editgroupmodal").modal('show');
        
    }

    function editgroupmember(){
        
        $.ajax({
                url: $("#editgroupform").attr('action') || window.location.pathname,
                type: "POST",
                data: $("#editgroupform").serialize(),                 
                cache: false,
                async: true,
                success: function(data) {
                    //console.log(data);
                    if (data != "error"){
                        //location.href = '<?php //echo base_url();?>coaching_members/5';
                       location.reload();
                    }
                }
                
        });
        

    }


    function enable_customers(){
       $("#add_member_name").select2({
            ajax: {
              url: '<?php echo base_url();?>coaching_controller/searchnameforco',
              dataType: 'json',
              quietMillis: 1000,
              data: function (term, page) {
                  
                return {
                    customername: term, // search term
                    groupid: $("#add_program_group_id").val(),
                    page_limit: 30, // page size
                    page: page // page number
                };
              },
              results: function (data, page) {
                 
                    var more = (page * 30) < data.length;
                    return {results: data, more: more};
                }
              },
            escapeMarkup: function (m) { return m; }, // let our custom formatter work
            minimumInputLength: 3,
            formatResult: function (option) {
               return option.customer_name+" | "+option.customer_cell ;
            },
            formatSelection: function (option) {
                
                return option.customer_name+" | "+option.customer_cell;
            }
          });
         
    }

</script>