<div class="col-sm-8">
    <div class="row ">
        <div class="col-sm-12 " >
            <div class="col-sm-12">
                <h3>Create Certificate</h3>
                <hr>

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

                            <span class="clo-sm-3" title="Add work Files" style="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">Assign Certificate</span>
                            </span>

                        </div>
                    </center>

                </nav>

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

            </div>

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

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

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

                    <?php echo validation_errors(); ?>

                    <form id="formID2" action="<?php //echo base_url(); ?>save-certificate" method="post" name="certificateForm" enctype="multipart/form-data" >

                        <div class="form-group col-sm-6 ">
                            <div class="input-group">
                                <input type="text"
                                       data-errormessage-value-missing="Certificate Name is Required!"
                                       class="form-control validate[required]"
                                       name="certificate_name" id="certificate_name"
                                       value="<?php //echo set_value('certificate_name'); ?>"
                                       placeholder="Please Type Certificate name.."
                                       aria-describedby="basic-addon1" >
                                <span class="input-group-addon" id="basic-addon1"><i class="fa  fa-adn"></i></span>
                            </div>
                        </div>

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

                        <div class="form-group col-sm-12" >
                            <div class="input-group screen1280" id="" > 
                                <textarea class="form-control resoulation1280" rows="4"  
                                          name="certificate_description[]" id="certificate_description1"
                                          placeholder="Please Type Your Certificate Description" ><?php //echo set_value('certificate_description'); ?></textarea>
                            </div>

                            <div class="input-group screen1024" id="" >
                                <textarea   class="form-control  resoulation1024 " rows="4"
                                            name="certificate_description[]" id="certificate_description2"
                                            placeholder="Please Type Your Certificate Description"><?php //echo set_value('certificate_description'); ?></textarea>
                            </div>
                            <div class="input-group screenMobile" id="" >
                                <textarea   class="form-control  resoulationMobile " rows="4"
                                            name="certificate_description[]" id="certificate_description3"
                                            placeholder="Please Type Your Certificate Description"><?php //echo set_value('certificate_description'); ?></textarea>
                            </div>

                            <div class="input-group screenMobile_max499" id="" >
                                <textarea   class="form-control  resoulationMobile_max499 " rows="4"
                                            name="certificate_description[]" id="certificate_description4"
                                            placeholder="Please Type Your Certificate Description"><?php //echo set_value('certificate_description'); ?></textarea>
                            </div>
                        </div>

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

                        <div class="form-group col-sm-6 ">
                            <script>
                                $(":file").filestyle({icon: false});
                            </script>
                            <input type="file" class="filestyle" data-icon="false" onchange="readURL(this, 'photo_0');" name="company_image">
                            <span class="pull-left">[ Upload Image ]</span>
                        </div>
                        <div class="form-group col-sm-6 ">
                            <div id="image" style="float:left;width: 150px; height: 50px;" > </div>
                        </div>

                        <input style="float:left;" type='hidden' name="image_path" id="image_path" value="<?php //echo set_value('image_path'); ?>"/>

                        <script>

                            function readURL(input, objID) {
                                var node = document.createElement("img");
                                var parentDIV = document.getElementById("image");
                                parentDIV.appendChild(node);
                                document.getElementById("image").appendChild(node);
                                node.setAttribute("id", objID);
                                node.setAttribute("src", "");

                                var file = input.files[0];
                                if (file.size > 300000) {
                                    serverPage = '<?php echo base_url(); ?>super_admin/load_image_field';  // passing person_email Field value 
                                    xmlhttp.open("GET", serverPage);
                                    xmlhttp.onreadystatechange = function ()
                                    {
                                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                        {
                                            document.getElementById('image').innerHTML = 'Maximum File Size 300 KB and Resulation 1024x1024';
                                            document.getElementById('image_field').innerHTML = xmlhttp.responseText;
                                        }
                                    }
                                    xmlhttp.send(null);
                                } else {
                                    var list = document.getElementById("image");
                                    list.removeChild(list.childNodes[0]);
                                    if (input.files && input.files[0]) {
                                        var reader = new FileReader();
                                        reader.onload = function (e) {
                                            $('#' + objID)
                                                    .attr('src', e.target.result)
                                                    .width(50)
                                                    .height(50);
                                            document.getElementById('image_path').value = e.target.result;
                                        };
                                        reader.readAsDataURL(input.files[0]);
                                    }
                                }
                            }
                        </script>

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

                        <div class="form-group col-sm-6 ">
                            <select data-errormessage-value-missing="Certificate Share Status is Required!"
                                    class="form-control validate[required]" 
                                    name="certificate_share_status" id="certificate_permission_status" >
                                <option value=""> -Certificate Share Status - </option>
                                <option value="1">public</option>
                                <option value="2">Talha Training User</option>
                                <option value="3">My Link</option>
                                <option value="4">My Teacher</option>
                                <option value="5">Group</option>
                            </select>
                        </div>

                        <div class="form-group col-sm-6 text-left">
                            <select data-errormessage-value-missing="Certificate status is Required!"
                                    class="form-control validate[required]"  
                                    id="certificate_status" 
                                    name="certificate_status" >
                                <option value=""> -Select Certificate  Status - </option>
                                <option value="1">Published</option>
                                <option value="0">UnPublished</option>
                                <option value="2">Archived</option>
                            </select>
                        </div>

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

                        <div class="col-sm-4"></div>
                        <div class="col-sm-4">
                            <input type="submit" class="green-btn btn btn-default" value="Create Certificate !"><br/><br/>
                        </div>
                        <div class="col-sm-4"></div>

                    </form>

                </div>
            </div>

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

    </div>

</div>

<script type="text/javascript">
    document.forms['certificateForm'].elements['certificate_share_status'].value = '<?php echo set_value('certificate_share_status'); ?>';
    document.forms['certificateForm'].elements['certificate_status'].value = '<?php echo set_value('certificate_status'); ?>';
</script>