<script>
    //Create a boolean variable to check for a valid Internet Explorer instance.
    var xmlhttp = false;
    //Check if we are using IE.
    try {
        //If the Javascript version is greater than 5.
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        //alert ("You are using Microsoft Internet Explorer.");
    } catch (e) {

        //If not, then use the older active x object.
        try {
            //If we are using Internet Explorer.
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            //alert ("You are using Microsoft Internet Explorer");
        } catch (E) {
            //Else we must be using a non-IE browser.
            xmlhttp = false;
        }
    }
    //If we are using a non-IE browser, create a javascript instance of the object.
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
        //alert ("You are not using Microsoft Internet Explorer");
    }
</script>
<style>
    #group_desription{
        overflow-wrap: break-word;
    }
    #group_more_desription{
        overflow-wrap: break-word;
    }
</style>
<?php
$person_id = $this->session->userdata('user_id');
if (isset($group_info)) {
    ?>

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

        <div class="row ">
            <div class="col-sm-12 ">
                <div class="col-sm-12 gray">
                    <div class="col-sm-6 text-left">
                        <span class="text-left h3"><?php echo $group_info->group_name . ' '; ?>
                            <?php if ($group_info->group_permission == 1) { //Public User?>
                                <i  class="fa fa-unlock"></i>
                            <?php } else if ($group_info->group_permission == 2) { //All TalhaTraining User?>
                                <label class="" >
                                    <img class="pull-left" 
                                         title="TalhaTraining User" 
                                         style="width: 15px; margin-top: -5px;" 
                                         src="<?php echo base_url() . 'image/logo.png' ?>" >
                                </label>
                            <?php } else if ($group_info->group_permission == 3) { //My Link?>
                                <i  class="fa fa-lock"></i>
                            <?php } else if ($group_info->group_permission == 4) { //Only Group?>
                                <i  class="fa fa-lock"></i>
                            <?php } ?>
                        </span>



                    </div>
                    <div class="col-sm-6 ">
                        <label class="text-right col-sm-9" style="padding-top: 10px;">
                            <?php echo count($count_group_member) . ' Members'; ?>
                        </label>
                        <?php
                        if ($group_info->group_created_by == $person_id) {
                            echo 'Group Author';
                        } else {
                            if (isset($group_member_info->group_member_status)) {
                                if ($group_member_info->group_member_status == 1) {
                                    ?>
                                    <a href="<?php echo base_url() . 'group/leave_group/' . $group_info->group_public_id; ?>">
                                        <span class="btn btn-success" title="Leave Group"> <i class="fa fa-times"></i> </span>
                                    </a>
                                <?php } else if ($group_member_info->group_member_status == 2) { ?>
                                    <a href="<?php echo base_url() . 'join-group/' . $group_info->group_public_id; ?>">
                                        <span class="btn btn-success" title="Join Request"><i class="fa fa-plus"></i>  </span>
                                    </a>
                                <?php } else if ($group_member_info->group_member_status == 3) { ?>
                                    <a href="<?php echo base_url() . 'group/cancel_group_request/' . $group_info->group_public_id; ?>">
                                        <span class="btn btn-success" title="Cancel Request"><i class="fa fa-times"></i>   </span>
                                    </a>
                                <?php } else if ($group_member_info->group_member_status == 4) { ?>
                                    <a href="<?php echo base_url() . 'join-group/' . $group_info->group_public_id; ?>">
                                        <span class="btn btn-success" title="Join Request"><i class="fa fa-plus"></i>  </span>
                                    </a>
                                <?php } else {
                                    ?>
                                    <a href="<?php echo base_url() . 'join-group/' . $group_info->group_public_id; ?>">
                                        <span class="btn btn-success" title="Join Request"><i class="fa fa-plus"></i>  </span>
                                    </a>
                                    <?php
                                }
                            } else {
                                ?>
                                <a href="<?php echo base_url() . 'join-group/' . $group_info->group_public_id; ?>">
                                    <span class="btn btn-success" title="Join Request"><i class="fa fa-plus"></i>  </span>
                                </a>
                                <?php
                            }
                        }
                        ?>
                    </div>
                </div>
                <div class="col-sm-12"><br></div> 
                <div class="col-sm-12 gray">
                    <div class="col-sm-12 white" >

                        <div class="col-sm-12 gray">
                            <div class="col-sm-12" style="border-bottom: 1px solid #8DC741;margin-bottom: 20px;">
                                <strong class="pull-left h3" style="color: #a70b0c;">Group Description</strong>
                            </div>
                            <div class="col-sm-12">
                                <div class="col-sm-12">

                                    <div id="group_desription" style="display: block;" class="text-justify col-sm-12" >
                                        <p><?php
//                                       echo $description = n;
//                                    echo substr($description , 0,40)."..."; 
                                            echo mb_substr($group_info->group_description, 0, 300, 'utf-8');
                                            ?>
                                        </p>
                                        <a href="javascript:;" onclick="MoreDescription()" class="text-right" id="more_description" style="display: block">More..</a>
                                    </div>


                                    <div  id="group_more_desription" style="display: none;" class="text-justify col-sm-12" >
                                        <?php echo $group_info->group_description; ?>
                                    </div>



                                </div>

                                <script>
                                    function MoreDescription() {

                                        document.getElementById('group_more_desription').setAttribute('style', 'display:block');

                                        document.getElementById('group_desription').setAttribute('style', 'display:none');
                                    }
                                </script>

                            </div>

                        </div>

                        <div class="col-sm-12"><br></div>
                        <div class="col-sm-12 gray text-center">
                            <div class="col-sm-12" style="border-bottom: 1px solid #8DC741;margin-bottom: 20px;">
                                <strong class="pull-left h3" style="color: #a70b0c;">Member (<?php echo count($count_group_member); ?>)</strong>
                            </div>
                           
                                <div class="col-sm-12" id="member">
                                    <?php
                                    $j = 0;
                                    foreach ($group_member_list as $v_group_member) {
                                        $j++;
                                        ?>
                                        <div class="col-sm-2">
                                            <a href="<?php echo base_url() . $v_group_member->url . '/profile'; ?>">
                                                <?php if ($v_group_member->person_image_thumb) { ?>
                                                    <div><img src="<?php echo base_url() . 'content-library/' . $v_group_member->url . '/' . $v_group_member->person_image_thumb; ?>" style="width: 50px; height: 50px;"></div>
                                                <?php } else { ?>
                                                    <div><img src="<?php echo base_url() ?>image/no_profile_picture.png" class="img-responsive" style="width: 50px;height: 50px" alt="Profile Image"></div>
                                                <?php } ?>
                                                <h5 class="text-center">
                                                    <?php 
                                                        //echo $v_group_member->person_first_name . ' ' . $v_group_member->person_last_name; 
                                                        if(strlen($v_group_member->person_first_name) && strlen($v_group_member->person_last_name) < 20){
                                                            echo $v_group_member->person_first_name . ' ' . $v_group_member->person_last_name;
                                                            }
                                                        else{
                                                            echo substr($v_group_member->person_first_name, 0, 20).' '.substr($v_group_member->person_last_name, 0, 15).'...';
                                                            }
                                                    ?>
                                                </h5>
                                            </a>    
                                        </div>
                                        <?php
                                    }
                                    ?>
                                </div>

                           

                                <div class="col-sm-12 text-right">
                                    <?php $totall_group_member = count($count_group_member); ?>
                                    <input type="hidden" id="member_counter" value="<?php echo $j; ?>">
                                    <input type="hidden" id="totall_group_member" value="<?php echo $totall_group_member; ?>">
                                   
                                    <?php
                          if ($totall_group_member >= $j) {
                              ?>
                                     <div id="moreMem" style="display:block;">
                                    <a href="javascript:;"
                                       onclick="MoreMember('<?php echo $group_info->group_id ?>','<?php echo base_url(); ?>')"> 
                                        More.. </a>
                                     </div>
                          <?php }?>
                            </div>
                  
                        <script>
                            function MoreMember(groupId,BaseUrl)
                            {

                                var xmlhttp1 = false;
                                try {
                                    xmlhttp1 = new ActiveXObject("Msxml2.XMLHTTP");
                                } catch (e) {

                                    try {
                                        xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
                                    } catch (E) {
                                        xmlhttp1 = false;
                                    }
                                }
                                if (!xmlhttp1 && typeof XMLHttpRequest != 'undefined') {
                                    xmlhttp1 = new XMLHttpRequest();
                                }
                                var url = '<?php echo base_url() . 'public-group-member-view'; ?>';
                               var member_counter= document.getElementById("member_counter").value;
                                var formdata = new FormData();

                                formdata.append("member_counter", member_counter);
                                formdata.append("group_id", groupId);

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

                                    viewMemeberInfo(xmlhttp1.responseText,BaseUrl);


                                }, false);

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


                            }
                            function viewMemeberInfo(jsonMemberInfo,BaseUrl) {
                               // alert(jsonMemberInfo);
                                var personListArray = JSON.parse(jsonMemberInfo);
                                var output = '';
                                for (var i = 0; i < personListArray.length; i++) {
                                     output += '<div class="col-sm-2">';
                                    output += '<a href="' + BaseUrl + personListArray[i].url + '/profile">';
                                    if(personListArray[i].person_image_thumb){
                                     output +='<div><img src="'+BaseUrl+'content-library/'+ personListArray[i].url+'/'+personListArray[i].person_image_thumb+'" style="width: 50px; height: 50px;"></div>';
                                    }else { 
                                     output += '<div><img src="'+BaseUrl+'image/no_profile_picture.png" class="img-responsive" style="width: 50px;height: 50px" alt="Profile Image"></div>';
                                        }
                                      output +=  ' <h5 class="text-center">'+ personListArray[i].person_first_name +' ' + personListArray[i].person_last_name +'</h5></a> </div>';
                                               
                            }
                            document.getElementById("member").innerHTML = output;
                            document.getElementById("member_counter").value = personListArray.length;

                                var totalMember = document.getElementById("totall_group_member").value;
                                if (totalMember <= personListArray.length) {
                                    document.getElementById("moreMem").style.display = 'none';
                                }
                            }

                        </script>

                    </div>

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

                    <!--                                <div class="col-sm-12 gray text-center">
                                                        <div class="col-sm-12" style="border-bottom: 1px solid #8DC741;margin-bottom: 20px;">
                                                            <strong class="pull-left h3" style="color: #a70b0c;">Quiz (<?php echo count($group_quiz); ?>)</strong>
                                                        </div>
                                                        <div class="col-sm-12" id="quiz">
                    <?php
                    //$i = 0;
                    // foreach ($group_quiz as $v_quiz) {
                    ?>
                                                                <div class="col-sm-6">
                                                                    <a href="<?php //echo base_url().'quiz/'.$v_quiz->url;   ?>"> 
                                                                        <h5 class="text-center"><strong><?php //echo $v_quiz->quiz_name;    ?></strong></h5>
                                                                    </a>    
                                                                </div>
                    <?php
                    //  $i++;
                    //  if ($i > 3) {
                    //    break;
                    //  }
                    // }
                    ?>
                                                        </div>
                    
                                                        <div class="col-sm-12" id="ShowMoreQuiz">
                    
                                                        </div>
                    
                                                        <div class="col-sm-12" ><br></div>
                    
                                                        <div class="col-sm-12 text-right">
                    <?php // if (count($group_quiz) >= 10) {   ?>
                                                                <a href="#" onclick="MoreQuiz('ShowMoreQuiz')"> More.. </a>
                    <?php //}   ?>
                                                        </div>
                    
                                                        <script>
                                                            var quizCounter = 4;
                                                            var groupID = <?php // echo $group_info->group_id;     ?>;
                                                            function MoreQuiz(ShowMoreQuiz)
                                                            {
                                                                serverPage = '<?php //echo base_url();     ?>group-more-quiz/' + groupID + '/' + quizCounter;
                    //                                            alert(ShowMoreQuiz);
                                                                //                                            alert(serverPage);
                                                                xmlhttp.open("GET", serverPage);
                                                                xmlhttp.onreadystatechange = function ()
                                                                {
                    //                                                alert(xmlhttp.readyState);
                    //                                                alert(xmlhttp.status);
                                                                    //                                                alert(xmlhttp.responseText);
                                                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                                                    {
                                                                        var parent = document.getElementById('ShowMoreQuiz');
                                                                        var div1 = document.createElement('div');
                                                                        var data1 = xmlhttp.responseText;
                                                                        div1.innerHTML = data1;
                                                                        parent.appendChild(div1);
                                                                    }
                                                                }
                                                                xmlhttp.send(null);
                    
                                                                quizCounter += 4;
                    
                                                            }
                    
                                                            //          
                                                        </script>
                    
                                                    </div>-->
                    <div class="col-sm-12"><br></div>

                    <!--                                <div class="col-sm-12 gray text-center">
                                                        <div class="col-sm-12" style="border-bottom: 1px solid #8DC741;margin-bottom: 20px;">
                                                            <strong class="pull-left h3" style="color: #a70b0c;">Popular Quiz (<?php echo count($group_popular_quiz); ?>)</strong>
                                                        </div>
                                                        <div class="col-sm-12" id="popular_quiz">
                    
                    <?php
                    // $i = 0;
                    // foreach ($group_popular_quiz as $v_quiz) {
                    ?>
                                                                <div class="col-sm-6">
                                                                    <a href="#"> 
                                                                        <h5 class="text-center"><strong><?php // echo $v_quiz->quiz_name;    ?></strong></h5>
                                                                    </a>    
                                                                </div>
                    <?php
                    //$i++;
                    /// if ($i > 3) {
                    //     break;
                    //   }
                    // }
                    ?>
                                                        </div>
                    
                                                        <div  class="col-sm-12" id="ShowMorePopularQuiz"></div>
                    
                    
                                                        <div class="col-sm-12" ><br></div>
                    
                                                        <div class="col-sm-12 text-right">
                    <?php //if (count($group_quiz) >= 10) {   ?>
                                                                <a href="#" onclick="morePopularQuiz('ShowMorePopularQuiz')"> More.. </a>
                    <?php //}   ?>
                                                        </div>
                    
                                                        <script>
                                                            var popularQuizCounter = 4;
                                                            var groupID = <?php //echo $group_info->group_id;     ?>;
                                                            function morePopularQuiz(ShowMoreQuiz)
                                                            {
                                                                serverPage = '<?php // echo base_url();     ?>group-more-popular-quiz/' + groupID + '/' + popularQuizCounter;
                                                                xmlhttp.open("GET", serverPage);
                                                                xmlhttp.onreadystatechange = function ()
                                                                {
                                                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                                                    {
                                                                        var parent = document.getElementById('ShowMorePopularQuiz');
                                                                        var div1 = document.createElement('div');
                                                                        var data1 = xmlhttp.responseText;
                                                                        div1.innerHTML = data1;
                                                                        parent.appendChild(div1);
                                                                    }
                                                                }
                                                                xmlhttp.send(null);
                    
                                                                popularQuizCounter += 4;
                    
                                                            }
                    
                                                            //          
                                                        </script>
                    
                    
                    
                                                    </div>-->
                    <div class="col-sm-12"><br></div>


                </div>
            </div>

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

        </div>
    </div>

</div>
<?php } ?>