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

    <div class="col-sm-12">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- TT three -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-3140114751019908"
             data-ad-slot="2044561420"
             data-ad-format="auto"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

    </div>

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

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


                <h3 style="color: #C9302C">
                    All Group
                </h3>

                <hr>


            </div>




            <div class="col-sm-12 gray_ttc text-left" style="border-bottom: 2px solid #8CC73F;padding-top: 10px;padding-bottom: 10px;font-weight: bold">
                <div class="col-sm-6">Group Name</div>

                <div class="col-sm-3">Member</div>
                <div class="col-sm-3">Action</div>
            </div>
            <div class="col-sm-12"><br></div>
            <div id="cat_group">
                <?php
                if ($group) {
                    foreach ($group as $val) {
                        ?>
                        <div class="col-sm-12 gray text-left" >

                            <div class="col-sm-6" style="padding-top: 10px ">
                                <a href="<?php echo base_url() . 'group/' . $val->url; ?>"><?php echo $val->group_name; ?></a><br>
                                BY
                                <?php if ($group_creator_info[$val->group_id]->person_role == 1 || $group_creator_info[$val->group_id]->person_role == 6) { ?>
                                    <?php echo $group_creator_info[$val->group_id]->person_first_name . " " . $group_creator_info[$val->group_id]->person_last_name; ?>
                                <?php } else {
                                    ?>
                                    <a href="<?php echo base_url() . $group_creator_info[$val->group_id]->url . '/profile' ?>"> <?php echo $group_creator_info[$val->group_id]->person_first_name . " " . $group_creator_info[$val->group_id]->person_last_name; ?></a>
                                <?php } ?>
                            </div>


                            <div class="col-sm-3" style="padding-top: 10px"><?php echo count($all_member[$val->group_id]); ?></div>
                            <?php $user_id = $this->session->userdata("user_id"); ?>
                            <div class="col-sm-3" style="padding-top: 10px"><a href="javascript:;" onclick="joinGroupRequext('<?php echo $user_id ?>', '<?php echo $val->group_id; ?>', '<?php echo $val->url; ?>')"><i class="fa fa-user-plus" title="Join Group"></i></a>
                                <br> <div id="error_join<?php echo $val->group_id; ?>" style="color:red;"></div>
                            </div>

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

                <li ><a href="#"></a></li>

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



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

                    <div class="col-sm-2"> &nbsp;</div>
                </div>

                <!-- /.row gray -->
                <?php
                // echo $total_limit_value->total_type;
                $totall_count = count($group_list);
                $total_page = ceil($totall_count / 10);
                if ($total_page > 1) {
                    ?>
                    <nav class="course-pagination">
                        <ul class="pagination">
                            <?php
                            if ($page > 2) {
                                ?>
                                <li>
                                    <a href="<?php echo base_url() . 'all-group' ?>" onaria-label="Previous">
                                        <span aria-hidden="true" title="First Page">&laquo;&laquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?php echo base_url() . 'all-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() . 'all-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() . 'all-group/' . ($i + 1) . '">' . ($i + 1) . '</a></li>';
                            }
                            if ($total_page != $page) {
                                ?>
                                <li>
                                    <a href="<?php echo base_url() . 'all-group/' . ($page + 1); ?>" aria-label="Next">
                                        <span aria-hidden="true" title="Next Page">&raquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?php echo base_url() . 'all-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>

<script>
    function AjaxInitialization(xmlhttp4) {
        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();
        }
        return xmlhttp4;
    }
    function joinGroupRequext(user_id, group_id, grpUrl) {


        if (user_id === '') {
            window.location.href = '<?php echo base_url(); ?>' + 'sign-in';
        } else {


            var xmlhttp4;
            xmlhttp4 = AjaxInitialization(xmlhttp4);

            var url = '<?php echo base_url(); ?>join-group-public';


            var formdata = new FormData();
            formdata.append("group_id", group_id);


            xmlhttp4.addEventListener("load", function () {
                //  alert(xmlhttp4.responseText);
                if (xmlhttp4.responseText == '1') {
                    document.getElementById("error_join" + group_id).innerHTML = "You have been already sent request or you are not authorized";
                } else if (xmlhttp4.responseText == '2') {
                    document.getElementById("error_join" + group_id).innerHTML = "your request has been sent.But you can not view the group untill you get membership of group. "
                } else if (xmlhttp4.responseText == '3') {

                    window.location.href = '<?php echo base_url() ?>' + 'group/' + grpUrl;
                }


            }, false);
            xmlhttp4.addEventListener("error", function () {
                alert("not upload");
            }, false);
            xmlhttp4.addEventListener("abort", function () {
                alert("Aborted");
            }, false);

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


        }


    }

    function Categorywisegroup() {
        var xmlhttp2;
        xmlhttp2 = AjaxInitialization(xmlhttp2);
        var vals = [];

        $(document).ready(function () {
            $('input:checkbox[name="checkbox2[]"]').each(function () {
                if (this.checked) {
                    vals.push(this.value);
                }
            });


        });
        var TypeId = vals;
        var url = "<?php echo base_url() . 'select-category-wise-group'; ?>";

        document.getElementById('selected_id').value = vals;
        var formdata = new FormData();
        formdata.append("type_id", TypeId);
        formdata.append("page", 0);

        xmlhttp2.addEventListener("load", function () {
            // alert(xmlhttp2.responseText);
            document.getElementById('cat_group').innerHTML = xmlhttp2.responseText;

        }, false);
        xmlhttp2.addEventListener("error", function () {
            alert("error");
        }, false);
        xmlhttp2.addEventListener("abort", function () {
            alert("Aborted");
        }, false);

        xmlhttp2.open("POST", url);
        xmlhttp2.send(formdata);
    }
    function more_View_catogorize_group(page) {
        var xmlhttp7;
        xmlhttp7 = AjaxInitialization(xmlhttp7);
        var vals = [];

        $(document).ready(function () {
            $('input:checkbox[name="checkbox2[]"]').each(function () {
                if (this.checked) {
                    vals.push(this.value);
                }
            });


        });
        var TypeId = vals;
        var url = "<?php echo base_url() . 'pagination-group-more-view'; ?>";

        document.getElementById('selected_id').value = vals;
        var formdata = new FormData();
        formdata.append("type_id", TypeId);
        formdata.append("page", page);

        xmlhttp7.addEventListener("load", function () {
            // alert(xmlhttp2.responseText);
            document.getElementById('cat_group').innerHTML = xmlhttp7.responseText;

        }, false);
        xmlhttp7.addEventListener("error", function () {
            alert("error");
        }, false);
        xmlhttp7.addEventListener("abort", function () {
            alert("Aborted");
        }, false);

        xmlhttp7.open("POST", url);
        xmlhttp7.send(formdata);
    }
    function more_view() {

        var xmlhttp5;
        xmlhttp5 = AjaxInitialization(xmlhttp5);

        var url = '<?php echo base_url(); ?>' + 'select-latest-group';

        var number = document.getElementById("counter").value;

        var formdata = new FormData();
        formdata.append("number", number);

        xmlhttp5.addEventListener("load", function () {


            viewPersonInfo(xmlhttp5.responseText, 1);//1-> latest group type



        }, false);
        xmlhttp5.addEventListener("error", function () {
            alert("error");
        }, false);
        xmlhttp5.addEventListener("abort", function () {
            alert("Aborted");
        }, false);

        xmlhttp5.open("POST", url);
        xmlhttp5.send(formdata);
    }
    function more_view_popular_group() {
        var xmlhttp1;
        xmlhttp1 = AjaxInitialization(xmlhttp1);

        var url = '<?php echo base_url(); ?>' + 'select-popular-group';
        var number_popular = document.getElementById("popular_counter").value;
        var formdata = new FormData();
        formdata.append("number_popular", number_popular);
        xmlhttp1.addEventListener("load", function () {
            //alert(xmlhttp1.responseText);
            // document.getElementById('popular_group').innerHTML = xmlhttp1.responseText;
            viewPersonInfo(xmlhttp1.responseText, 2); //2-> popular group type



        }, false);
        xmlhttp1.addEventListener("error", function () {
            alert("erorr");
        }, false);
        xmlhttp1.addEventListener("abort", function () {
            alert("Aborted");
        }, false);

        xmlhttp1.open("POST", url);
        xmlhttp1.send(formdata);
    }
    function viewPersonInfo(jsongroupInfo, value) {
        var groupTypeid;
        if (value == 1) {
            groupTypeid = document.getElementById("selected_id").value;
        } else if (value == 2) {
            groupTypeid = document.getElementById("selected_id").value;
        }
        if (groupTypeid) {

            var groupTypeidArray = groupTypeid.split(",");
            var groupListArray = JSON.parse(jsongroupInfo);
            var output = '';
            for (var i = 0; i < groupListArray.length; i++) {

                if (groupTypeidArray.indexOf(groupListArray[i].group_type_id) < 0) {

                    output += '<div class="checkbox checkbox-success">';
                    output += '<input id="checkbox2" name="checkbox2[]" class="styled"';
                    output += ' type="checkbox" onclick="Categorywisegroup()" value="';
                    output += groupListArray[i].group_type_id;
                    output += '"><label for="checkbox1">';
                    output += groupListArray[i].group_type_name;
                    output += '</label><br/>  </div>';

                } else {
                    output += '<div class="checkbox checkbox-success">';
                    output += '<input id="checkbox2" name="checkbox2[]" class="styled"';
                    output += ' type="checkbox" onclick="Categorywisegroup()" value="'
                    output += groupListArray[i].group_type_id;
                    output += '" checked><label for="checkbox1">';
                    output += groupListArray[i].group_type_name;
                    output += '</label><br/>  </div>';


                }
            }

        } else {
            var groupListArray = JSON.parse(jsongroupInfo);
            var output = '';
            for (var i = 0; i < groupListArray.length; i++) {
                output += '<div class="checkbox checkbox-success">';
                output += '<input id="checkbox2" name="checkbox2[]" class="styled"';
                output += ' type="checkbox" onclick="Categorywisegroup()" value="';
                output += groupListArray[i].group_type_id;
                output += '"><label for="checkbox1">';
                output += groupListArray[i].group_type_name;
                output += '</label><br/>  </div>';

            }
        }
        if (value == 1) {

            document.getElementById("latest_group").innerHTML = output;
            document.getElementById("counter").value = groupListArray.length;

            var totalPerson = document.getElementById("totall_type").value;
            if (totalPerson <= groupListArray.length) {
                document.getElementById("more_view").style.display = 'none';
            }
        } else if (value == 2) {
            document.getElementById("popular_group").innerHTML = output;
            document.getElementById("popular_count_type").value = groupListArray.length;

            var totalPerson = document.getElementById("popular_count_type").value;
            if (totalPerson <= groupListArray.length) {
                document.getElementById("more_view_popular").style.display = 'none';

            }
        }
    }
</script>