<div class="col-sm-10">

    <div class="row gray">

        <div class="col-sm-12 ">

            <div class="col-sm-6 col-sm-offset-3">
                <form action="#" method="post">
                    <div class="input-group">
                        <input type="text" class="form-control"  placeholder="Search here..." aria-describedby="basic-addon1" oninput="searchgroup(this.value)">
                        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <div class="row ">
        <div class="col-sm-12 ">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <h3 class="text-left"> Group list</h3>
                </div>

                <div id="join_group" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Join Group</h4>
                            </div>
                            <div class="modal-body">

                                <form action="my_group.html">

                                    <div class="col-sm-6 col-sm-offset-3">
                                        <br><br>


                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Please Type Group Code.." >
                                            <span class="input-group-addon" ><i class="fa fa-group"></i></span>
                                        </div>
                                    </div>   

                                    <div class="col-sm-12"><br> <br></div>



                                    <div class="col-sm-3"></div>
                                    <div class="col-sm-6">

                                        <input type="submit" class="green-btn btn btn-default" value="Join Group !"><br/><br/>
                                    </div>
                                    <div class="col-sm-3"></div>
                                </form>
                            </div>
                            <div class="col-sm-12"><hr></div>
                            <div class="modal-footer">

                                <button type="button" class="btn btn-danger pull-right" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="col-sm-12"><hr></div>
            <div id="search">
            <div class="col-sm-12 padding-zero">


                <div class="col-sm-12 gray_ttc text-center" style="border-bottom: 2px solid #8CC73F;padding: 5px 0 5px 0;font-weight: bold">

                    <div class="col-sm-2" style="padding: 0">Group name</div>
                    <div class="col-sm-2" style="padding: 0">Type</div>
                    <div class="col-sm-2" style="padding: 0">Member</div>
                    <div class="col-sm-2" style="padding: 0">Request</div>
                    <div class="col-sm-2" style="padding: 0">Permission</div>
                    <div class="col-sm-2" style="padding: 0">Action</div>
                </div>
                <div class="col-sm-12"><br></div> 
                <?php
                if($groups){
                foreach($groups as $val) {
                   
                    $serial++; 
                    ?>
                <div class="col-sm-12 gray text-center" >

                    <div class="col-sm-2" style="padding: 5px 0 0 0"><a href="<?php echo base_url()?>individual-group-details/<?php echo $url_info[$val->group_id]->url; ?>"><?php echo $val->group_name ;?></a></div>
                    <div class="col-sm-2" style="padding: 5px 0 0 0  "><?php if($type_name[ $val->group_id]){echo $type_name[ $val->group_id]->group_type_name;}else{ echo "No type";}?></div>
                    <div class="col-sm-2" style="padding: 5px 0 0 0  ">
                     <a href="<?php echo base_url()?>member-information/<?php echo $url_info[$val->group_id]->url;?>">
                         <?php
                       echo $total_member[$val->group_id]->total; ?></a></div>
                    <input type="hidden" id="group_id" name="group_id" value="<?php echo $val->group_id; ?>" >
                    <input type="hidden" name="group_status" id="group_status<?php echo $val->group_id; ?>" value="<?php echo $val-> group_permission;?>">
                    <div class="col-sm-2" style="padding: 5px 0 0 0  "><a href="<?php echo base_url() ?>pending-member-information/<?php echo $url_info[$val->group_id]->url;?>">
                        <?php
                       
                               echo $total_member_pending[$val->group_id]->total_pending; ?></a></div>
                    <?php
                    $person_id = $this->session->userdata('user_id');
                    if($person_info->person_role==6 || ($person_info->person_role==1 &&$val->group_created_by == $person_id)) { ?>
                    <div class="col-sm-2" style="padding: 5px 0 0 0">
                        <?php if($val-> group_permission==1){?>
                        <a id="public<?php echo $val->group_id; ?>" href="javascript:;" onclick="change_status_public(<?php echo $val->group_id; ?>)"><i  style="color: #80c12c" class="fa fa-globe" title="Public"></i></a>
                    <a id="only_group<?php echo $val->group_id; ?>" style="display:none;" onclick="change_status_group(<?php echo $val->group_id; ?>)"><i  style="color: #80c12c" class="fa fa-users" title="only_group" ></i></a>
                <?php } else if($val-> group_permission==4){?>
                    <a id="public<?php echo $val->group_id; ?>" style="display:none;" onclick="change_status_public(<?php echo $val->group_id; ?>)"><i  style="color: #80c12c" class="fa fa-globe" title="Public"></i></a>
                    <a id="only_group<?php echo $val->group_id; ?>" href="javascript:;" onclick="change_status_group(<?php echo $val->group_id; ?>)"><i  style="color: #80c12c" class="fa fa-users" title="only_group" ></i></a>
                <?php } ?>
                    </div>
                <?php } else{?>
                    <div class="col-sm-2" style="padding: 5px 0 0 0">
                         <?php if($val-> group_permission==1){?>
                     <a ><i  style="color: #80c12c" class="fa fa-globe" title="Public"></i></a>
                         <?php }else if($val-> group_permission==4){?>
                    <a ><i  style="color: #80c12c" class="fa fa-users" title="only_group" ></i></a> 
                         <?php }?>
                    </div>
                <?php }?>
                <?php if($person_info->person_role==6 || ($person_info->person_role==1 &&$val->group_created_by == $person_id)) { ?>
                    <div class="col-sm-2" style="padding: 5px 0 0 0  ">
                        <a href="<?php echo base_url() ?>edit-group/<?php echo $url_info[$val->group_id]->url;?>" ><i class="fa  fa-edit" title="Edit"></i></a>
                        <input id="group_status_id<?php echo $val->group_id; ?>" type="hidden" value="<?php echo $val->group_status ;?>">
                        <?php if($val->group_status ==0){ ?>
                        <a href="javascript:;" id="active<?php echo $val->group_id; ?>"   onclick="active('<?php echo $val->group_id; ?>');" ><i class="fa  fa-user-plus" title="Active"></i></a>
                        <a href="javascript:;" id="inactive<?php echo $val->group_id; ?>" onclick="inactive('<?php echo $val->group_id; ?>');"style="display:none;"><i class="fa  fa-user-times" title="inactive"></i></a>
                          <?php } else if($val-> group_status ==1){ ?>
                        <a href="javascript:;" id="active<?php echo $val->group_id; ?>"   onclick="active('<?php echo $val->group_id; ?>');"style="display:none;"><i class="fa  fa-user-plus" title="Active"></i></a>
                        <a href="javascript:;" id="inactive<?php echo $val->group_id; ?>" onclick="inactive('<?php echo $val->group_id; ?>'); "  ><i class="fa  fa-user-times" title="inactive"></i></a>
                         
                          <?php } ?>
                       <?php  if($val-> group_status ==2){ ?>
                        <a href="javascript:;" id="archive<?php echo $val->group_id; ?>"   onclick="archieve('<?php echo $val->group_id; ?>')"><i class="fa fa-archive" title="Archive"></i></a>
                       <?php }?>
                        <a href="javascript:;" onclick="remove_group(<?php echo $val->group_id; ?>)"><i class="fa fa-trash-o" title="Delete"></i></a>
                    </div>
                <?php } ?>
                </div>

                <?php } } ?>

                
                 <?php
                // echo $total_limit_value->total_type;
                 if($total_group){
                    
                $total_page = ceil($total_group->total_group / 10);
                if ($total_page > 1) {
                    ?>
                    <nav class="course-pagination">
                        <ul class="pagination">
                            <?php
                            if ($page > 2) {
                                ?>
                                <li>
                                    <a href="<?php echo base_url() . 'super-admin-manage-group' ?>" aria-label="Previous">
                                        <span aria-hidden="true" title="First Page">&laquo;&laquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?php echo base_url() . 'super-admin-manage-group/'. ($page - 1); ?>" aria-label="Previous">
                                        <span aria-hidden="true" title="Previous Page">&laquo;</span>
                                    </a>
                                </li>
                            <?php } elseif ($page > 1) { ?>
                                <li>
                                    <a href="<?php echo base_url() . 'super-admin-manage-group/'. ($page - 1); ?>" aria-label="Previous">
                                        <span aria-hidden="true" title="Previous Page">&laquo;</span>
                                    </a>
                                </li>
                                <?php
                            }
                            for ($i = 0; $total_page > $i; $i++) {
                                echo '<li><a href="' . base_url() . 'super-admin-manage-group/'. ($i + 1) . '">' . ($i + 1) . '</a></li>';
                            }
                            if ($total_page != $page) {
                                ?>
                                <li>
                                    <a href="<?php echo base_url() . 'super-admin-manage-group/'. ($page + 1); ?>" aria-label="Next">
                                        <span aria-hidden="true" title="Next Page">&raquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?php echo base_url() . 'super-admin-manage-group/'. $total_page; ?>" aria-label="Next">
                                        <span aria-hidden="true" title="Last Page">&raquo;&raquo;</span>
                                    </a>
                                </li>
                            <?php } ?>
                        </ul>
                    </nav>
                <?php }} ?>


            </div>
            </div>

        </div>

    </div>


    <div class="col-sm-12 gray text-left">
        <label><a href="<?php echo base_url('super-admin')?>">Dashboard </a>->>Manage Group</label>
    </div>    


</div>

<script>
 function change_status_public(group_id){
     swal({
                title: "", text: "Do you really want to change the status group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
      var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
        var url='<?php echo base_url(); ?>' +'change-status-public';
            
           var formdata = new FormData();
            formdata.append("group_id", group_id);
        
        xmlhttp4.addEventListener("load", function () {
            
                 document.getElementById('group_status'+group_id).value=4;
                 document.getElementById('public'+group_id).setAttribute('style', 'display:none');
                 document.getElementById('only_group'+group_id).setAttribute('style', 'display:inline');
            
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;
 }
      });
   
    
} 
 function change_status_group(group_id){
  swal({
                title: "", text: "Do you really want to change the status group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
      var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'change-status-group';
            
           
            var formdata = new FormData();
            formdata.append("group_id", group_id);
          
       
         
            
        
        
        xmlhttp4.addEventListener("load", function () {
            
                 document.getElementById('group_status'+group_id).value=4;
                 document.getElementById('public'+group_id).setAttribute('style','display:inline' );
                 document.getElementById('only_group'+group_id).setAttribute('style', 'display:none');
            
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;

    }
      });
    
} 
function active(group_id){
 swal({
                title: "", text: "Do you really want to active the group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
     var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'change-active-value';
            
           
            var formdata = new FormData();
            formdata.append("group_id", group_id);
          
       
         
            
        
        
        xmlhttp4.addEventListener("load", function () {
            
                 document.getElementById('group_status_id'+group_id).value=1;
                 document.getElementById('active'+group_id).setAttribute('style','display:none' );
                 document.getElementById('inactive'+group_id).setAttribute('style', 'display:inline');
                    document.getElementById('archive'+group_id).setAttribute('style', 'display:inline');
            
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;
 }
      });
    
}
function inactive(group_id){
 swal({
                title: "", text: "Do you really want to inactive the group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
     var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'change-inactive-value';
            
           
            var formdata = new FormData();
            formdata.append("group_id", group_id);
          
       
         
            
        
        
        xmlhttp4.addEventListener("load", function () {
            
                 document.getElementById('group_status_id'+group_id).value=0;
                document.getElementById('inactive'+group_id).setAttribute('style','display:none' );
                 document.getElementById('active'+group_id).setAttribute('style', 'display:inline');
                 document.getElementById('archive'+group_id).setAttribute('style', 'display:inline');
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;

     }
      });
}
function archieve(group_id){
 swal({
                title: "", text: "Do you really want to archieve the group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
    var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'change-archieve-value';
            
           
            var formdata = new FormData();
            formdata.append("group_id", group_id);
          
       
         
            
        
        
        xmlhttp4.addEventListener("load", function () {
            
                 document.getElementById('group_status_id'+group_id).value=2;
                document.getElementById('inactive'+group_id).setAttribute('style','display:none' );
                 document.getElementById('active'+group_id).setAttribute('style', 'display:active');
                 document.getElementById('archive'+group_id).setAttribute('style', 'display:none');
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;
     }
      });
}
function remove_group(group_id){
swal({
                title: "", text: "Do you really want to delete the group??",
                showCancelButton: true,
                confirmButtonColor: '#8CC73F',
                confirmButtonText: 'Yes',
                cancelButtonText: "No", closeOnConfirm: true,
                closeOnCancel: true
            },
            function (isConfirm) {
                if (isConfirm) {
                    
                    var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'delete-group-backend';
            
           
            var formdata = new FormData();
            formdata.append("group_id", group_id);
            xmlhttp4.addEventListener("load", function () {
                //alert( xmlhttp4.responseText);
           if( xmlhttp4.responseText==1){
               swal('you can not delete this group.');
              
           }
           else{
               window.location='<?php echo base_url(); ?>' + 'super-admin-manage-group';
           }
           
                
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;
                    
                    }
      });

}
function searchgroup(value){
         var xmlhttp4 = false;
        try {
            xmlhttp4 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp4 = false;
            }
        }
        if (!xmlhttp4 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp4 = new XMLHttpRequest();
        }
        
       
           
        var url='<?php echo base_url(); ?>' +'super-admin-search-manage-group';
            
           
            var formdata = new FormData();
            formdata.append("value", value);
          
       
         
            
        
        
        xmlhttp4.addEventListener("load", function () {
          
          
         document.getElementById("search").innerHTML=xmlhttp4.responseText;    
           
            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

            xmlhttp4.open("POST", url);
            xmlhttp4.send(formdata);

            return true;
}

</script>