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

        <div class="col-sm-12 ">
            <div class="col-sm-12">
                <h3>Course Invite to Learners</h3>
                <hr>
                <nav class="text-justify">

                    <div class="col-sm-12" style="padding: 0">
                        <span class="clo-sm-3" title="Course Profile" style="padding: 0">
                            <a href="" style="cursor:default;">
                                <span class="number badge" style="background-color: gray">1</span>
                                <span class="text-left label" style="color: #000;font-size: 14px;font-weight: normal">Course Profile</span>
                                <span class="nav-arrow" id="cborder" style="margin-right: 2px"><img src="<?php echo base_url(); ?>image/border.jpg"></span>
                            </a>
                        </span>


                        <span class="clo-sm-3" title="Add work Files" style="padding: 0">
                            <a href="" style="cursor:default;padding: 0">
                                <span class="number badge" style="background-color: gray;">2</span>
                                <span class="text-left label" style="color: #000;font-size: 14px;font-weight: normal;padding: 0">Add work Files</span>
                                <span class="nav-arrow" id="cborder" style="margin-right: 2px;padding: 0"><img src="<?php echo base_url(); ?>image/border.jpg"></span>
                            </a>
                        </span>
                        <span class="clo-sm-3" title="Invite Learners" style="padding: 0">
                            <a href="" style="cursor:default;">
                                <span class="number badge" style="background-color: green">3</span>
                                <span class="text-left label" style="color: #000;font-size: 14px;font-weight: normal">Invite Learners</span>
                                <span class="nav-arrow" id="cborder" style="margin-right: 2px"><img src="<?php echo base_url(); ?>image/border.jpg"></span>
                            </a>
                        </span>

                        <span class="clo-sm-3" title="Review and Publish" style="padding: 0">
                            <a href="" style="cursor:default;">
                                <span class="number badge" style="background-color: gray ">4</span>
                                <span class="text-left label" style="color: #000;font-size: 14px;font-weight: normal">Review and Publish</span>

                            </a>
                        </span>

                    </div>

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

            <div class="col-sm-12"><br>
                <p>
                    <?php
                    $message = $this->session->userdata('message');
                    $this->session->unset_userdata('message');
                    if ($message) {
                        echo $message;
                    }
                    ?>
                </p>
            </div>


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

                <form class="cmxform" id="formID2" action="<?php echo base_url() . 'group-invitation/' . $group_details->url; ?>" method="post" name="courseForm" enctype="multipart/form-data" >

                    <div class="col-sm-12">
                        <div class="col-sm-12"><br></div>
                        <div class="form-group col-sm-12">
                            <?php if ($group_details->group_permission == 1) { ?>
                                <div class="form-group col-sm-12">
                                    <label for="course_name">Invite Learners::</label><span class="required"> * </span>
                                    <textarea type="text" 
                                              data-errormessage-value-missing="Email address is Required!" 
                                              class="form-control validate[required, custom[multipleEmail]] text-input"
                                              id="to_address" 
                                              name="to_address"
                                              value="<?php echo set_value('invitation_email'); ?>" 
                                              placeholder="Separate multiple email addresses with a comma (,)"></textarea>
                                </div>



                            <?php } else if ($group_details->group_permission == 3) { ?>
                                
                                <?php
                                $selected_student = array(0);
                                $to_address = '';
                                ?>
                                <input class="col-sm-12" type="hidden" name="to_address" id="to_address" value="" >
                                <div class="col-sm-12 text-left"><h4> To:</h4></div>
                                
                                <div class="col-sm-12 column">
                                    <select required  name="name_email" style="width: 280px;padding: 8px;" id="tokenize_placeholder" 
                                            class="tokenize-sample" multiple="multiple" style="margin: 0px; padding: 0px; border: 0px; display: none;">
                                                <?php
                                                foreach ($link_person as $v_person) {
                                                    ?>
                                            <option value="<?php echo $v_person->requested_person_id ?>" selected="<?php echo $selected_student[$v_person->person_id] ?>">
                                                <?php echo $v_person->person_first_name . ' (' . $v_person->person_email . ')'; ?>
                                            </option>
                                        <?php } ?>
                                    </select>
                                </div>

                            <?php } else if ($group_details->group_permission == 4) { ?>

                                <input class="col-sm-12" type="hidden" name="to_address" id="to_address" value="" >
                                <div class="col-sm-1 column"><h4> To:</h4></div>
                                <div class="col-sm-11 column">

                                    <select required  name="name_email" style="width: 280px;padding: 8px;" id="tokenize_placeholder" 
                                            class="tokenize-sample" multiple="multiple" style="margin: 0px; padding: 0px; border: 0px; display: none;">
                                                <?php foreach ($group as $v_group) { ?>
                                            <option value="<?php echo $v_group->group_id ?>"><?php echo $v_group->group_name . ' (' . $v_group->group_public_id . ')'; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>

                            <?php } else if ($group_details->group_permission == 5) { ?>
                                
                                <input class="col-sm-12" type="hidden" name="to_address" id="to_address" value="" >
                                <div class="col-sm-1 column"><h4> To:</h4></div>
                                <div class="col-sm-11 column">
                                    <select required  name="name_email" style="width: 280px;padding: 8px;" id="tokenize_placeholder" 
                                            class="tokenize-sample" multiple="multiple" style="margin: 0px; padding: 0px; border: 0px; display: none;">
                                                <?php foreach ($all_tt_user as $v_person) { ?>
                                            <option value="<?php echo $v_person->person_id ?>"><?php echo $v_person->person_first_name . ' (' . $v_person->person_email . ')'; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>


                            <?php } else { ?>
                                <input class="col-sm-12" type="hidden" name="to_address" id="to_address" value="" >
                                <div class="col-sm-1 column"><h4> To:</h4></div>
                                <div class="col-sm-11 column">

                                    <select required  name="name_email" style="width: 280px;padding: 8px;" id="tokenize_placeholder" 
                                            class="tokenize-sample" multiple="multiple" style="margin: 0px; padding: 0px; border: 0px; display: none;">
                                                <?php foreach ($all_tt_user as $v_person) { ?>
                                            <option value="<?php echo $v_person->person_id ?>"><?php echo $v_person->person_first_name . ' (' . $v_person->person_email . ')'; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            <?php } ?>

                            <script type="text/javascript">
                                $('select#tokenize_placeholder').tokenize({placeholder: "Please Type Person Email or Name"});
                            </script>
                            <div class="form-group col-sm-5 required" id="course_url_status"><?php echo form_error('course_url'); ?></div>
                            <div class="col-sm-4 required" id=""><?php echo form_error('course_name'); ?></div>
                        </div>


                        <div class="col-sm-12">
                            <div class="input-group">
                                <label for="course_url">Invitation Message:</label><span class="required"> * </span>
                                <textarea data-errormessage-value-missing="Course Level is Required!" 
                                          class="form-control texteditor validate[required] text-input" 
                                          type="text" rows="7"  cols="65" 
                                          name="invitation_message" id="invitation_message" 
                                          placeholder="Hi,I would like you to enroll in my online course on TalhaTraining.Regards, #Teacher Name"  
                                          value="<?php echo set_value('course_url'); ?>"></textarea>
                            </div>
                        </div>

                        <div class="col-sm-12 form-group"><br> 
                            <div class="col-sm-3 col-sm-offset-9">
                                <input type="button" class="col-sm-1 btn green-btn btn-small" value="Preview Email" onclick="preview3();" />
                            </div>
                            <br><br> 
                        </div>

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

                        </div>

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

                        <div class="col-sm-4">
                            <input type="submit" class="green-btn btn btn-default" name="btn" value="Invite Learner">
                        </div>
                        
                        <div class="col-sm-4">

                            <a href="<?php echo base_url() . 'skip-group-invitation/' . $group_details->url; ?>" class="green-btn btn btn-default" >Skip Group Invitation</a>
                        </div>



                    </div>
                </form>

            </div>

        </div><!-- /.row gray -->


    </div>
</div>

<script>

    function _(el) {
        return document.getElementById(el);
    }


    function preview3() {

        var invitationMessage = tinyMCE.get('invitation_message').getContent({format: 'raw', no_events: 1});

        var formdata = new FormData();
        formdata.append("message", invitationMessage);
        xmlhttp.open("POST", "<?php echo base_url() . 'preview_group_email/' . $group_details->url; ?>");

        xmlhttp.addEventListener("load", function () {
            _("email_preview").innerHTML = xmlhttp2.responseText;
        }, false);

        xmlhttp.send(formdata);
        document.getElementById('email_preview').innerHTML = xmlhttp.responseText;
    }
</script>