<style>
    .nicEdit-selectTxt{
        height: 20px !important;
        margin-top:-5px !important;
    }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('select').select2();

        $.each($(".select2-container"), function (i, n) {
            $(n).next().show().fadeTo(0,0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
            $(n).prepend($(n).next());
            $(n).delay(500).queue(function () {
                $(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
                $(this).dequeue();
            });
        });

        <?php if(isset($datatbls)): ?>
        //Data table configurations
        var oTable = $("#test").dataTable({
            "iDisplayLength": 10,
            "aLengthMenu": [5,10,25,50,100],
            "sPaginationType": "full_numbers",
            "aoColumns": [  null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null
                        ] 
        });
        oTable.fnSort( [ [1,'asc'] ] );
        //Data table configurations end
        <?php endif; ?>


        //Save content according to topic
        $('#saveCont').live('click',function(){
            if($("#ugContentUpdate").validationEngine('validate')){
                var nicE = new nicEditors.findEditor('nicEditor');
                var newArr = new Array();

                newArr[0] = $(".ugtopic").select2("val"); 
                newArr[1] = $('#title').val(); 
                newArr[2] = nicE.getContent();
                var data = JSON.stringify(newArr);

                $.ajax({
                    url: "<?php echo base_url(); ?>userguide/add/",
                    async: false,
                    type: "POST",
                    //data: 'ugID='+newArr[0]+'&title='+newArr[1]+"&cont="+newArr[2],
                    data: ({'ugID': newArr[0], 'title': newArr[1], 'cont': newArr[2]}),
                    dataType: "html",
                    success: function(data) {
                        alertBox(1,data);
                        //location.reload();
                    }
                });
            }
        });
    });

    function gatherInfo(){
            var val = $(".ugtopic").select2("val");
            if(val != ""){
                $.ajax({
                    url: "<?php echo base_url(); ?>userguide/getContent/",
                    async: false,
                    type: "POST",
                    data: 'ugID='+val,
                    dataType: "html",
                    success: function(data) {
                        if(data != "false"){
                            var obj = jQuery.parseJSON(data);
                            if(typeof obj['cont'][0].ID !== 'undefined' ){    
                                var nicE = new nicEditors.findEditor('nicEditor');
                                nicE.setContent(obj['cont'][0].content);
                                $('#title').val(obj['cont'][0].title);
                                
                                serial = 1;
                                //reset relatedTopic table data
                                msgCont = $('#trInfosTopic').html();
                                $('#listTopic tbody').html('<tr id="trInfosTopic">'+msgCont+'</tr>');
                                console.log('um here');
                                if(obj['relatedTopic'] != null){    
                                    jQuery.each(obj['relatedTopic'],function(i,v){
                                        $('<tr><td class="span1"><input class="topicID" type="hidden" value="'+v.ID+'" />' + serial +'</td>'+
                                            '<td class="span10">'+v.name+
                                            '</td>'+
                                            '<td class="span1">'+
                                                '<button onclick="deleteTopic(this,'+v.ID+')" class="btn btn-mini btn-danger" type="button"><i class="icon-trash"></i></button>'+
                                            '</td>'+
                                        '</tr>'
                                        ).insertBefore('#trInfosTopic');
                                        serial++;
                                    });
                                }

                                var serial = 1;
                                //reset video table data
                                var msgCont = $('#trInfosVideo').html();
                                $('#listVideo tbody').html('<tr id="trInfosVideo">'+msgCont+'</tr>');
                                if(obj['videoLink'] != null){    
                                    jQuery.each(obj['videoLink'],function(i,v){
                                        $('<tr><td class="span1"><input class="videoID" type="hidden" value="'+v.ID+'" />' + serial +'</td>'+
                                            '<td class="span5">'+v.title+   
                                            '<td class="span5">'+v.videoLink+
                                            '</td>'+
                                            '<td class="span1">'+
                                                '<button onclick="deleteVideo(this,'+v.ID+')" class="btn btn-mini btn-danger" type="button"><i class="icon-trash"></i></button>'+
                                            '</td>'+
                                        '</tr>'
                                        ).insertBefore('#trInfosVideo');
                                        serial++;
                                    });
                                }

                                
                            }
                        }else{
                            var nicE = new nicEditors.findEditor('nicEditor');
                            
                            nicE.setContent('');
                            $('#title').val('');
                            //reset video table data
                            var msgCont = $('#trInfosVideo').html();
                            $('#listVideo tbody').html('<tr id="trInfosVideo">'+msgCont+'</tr>');
                            
                            msgCont = $('#trInfosTopic').html();
                            $('#listTopic tbody').html('<tr id="trInfosTopic">'+msgCont+'</tr>');
                        }
                        //location.reload();
                    }
                });
            }
        
        }

/************************Related Topic start******************************/
    //Add row to add new video link
    function addRowTopic(){
        $('<tr><td class="span1">' + ($("#listTopic tbody tr").length) +'</td>'+
            '<td class="span10">'+
                '<select class="span5 selectTopic">'+
                    '<option value = "">---Select Page---</option>'+
                <?php 
                    foreach($ugTopic as $row):
                ?>
                        '<option value="<?php echo $row->fldid; ?>"><?php echo $this->lang->line($row->name); ?></option>'+
                <?php 
                    endforeach; ?>
                '</select>'+
            '</td>'+
            '<td class="span1">'+
                        '<button onclick = "saveTopic(this)" class="btn btn-mini btn-primary" type="button"><i class="icon-ok-circle"></i></button>'+
                        '<button onclick="delRowTopic(this)" id="btnCancelCharge" class="btn btn-mini" type="button"><i class="icon-remove-circle"></i></button>'+
                '</td>'+
        '</tr>'
        ).insertBefore('#trInfosTopic');
        $('.selectTopic').select2({ width: '100%' });

    }
    //Save topic 
    function saveTopic(me){
        var td=me.parentNode;
        var tr=td.parentNode;
        var root = $('body').attr('data-baseurl');
        var topicID = $('.selectTopic').select2('val');
        var ugID = $('.ugtopic').select2('val');
        if(ugID != '' && topicID != ''){
            $.ajax({
                url: "<?php echo base_url(); ?>userguide/addTopic/",
                async: false,
                type: "POST",
                data: 'ugID='+ugID+'&topicID='+topicID,
                dataType: "html",
                success: function(data) {
                    var obj = jQuery.parseJSON(data);
                    if(obj.success){

                        var serial = ($('#listTopic tbody tr').length)-1;
                        $('<tr><td class="span1"><input class="topicID" type="hidden" value="'+obj.id+'" />' + serial +'</td>'+
                            '<td class="span10">'+obj.info+
                            '</td>'+
                            '<td class="span1">'+
                                '<button onclick="deleteTopic(this,'+obj.id+')" class="btn btn-mini btn-danger" type="button"><i class="icon-trash"></i></button>'+
                            '</td>'+
                        '</tr>'
                        ).insertBefore('#trInfosTopic');

                        var tBody=tr.parentNode;
                        tBody.removeChild(tr);
                        msg (1,"alert alert-success", obj.success);
                        //alertBox(1,obj.success);
                    }
                }
            });
        }else{
            alert("Please Select Topic and Related page");
        }
        
    }
    //Cancel video row
    function delRowTopic(me){
        var td=me.parentNode;
        var tr=td.parentNode;
        var tBody=tr.parentNode;
        tBody.removeChild(tr);
    }

    //Delete video link
    function deleteTopic(me,id){
        var td=me.parentNode;
        var tr=td.parentNode;
        var tBody=tr.parentNode;
        $.ajax({
                url: "<?php echo base_url(); ?>userguide/delTopic/",
                async: false,
                type: "POST",
                data: 'topicID='+id,
                dataType: "html",
                success: function(data) {
                    if(data != "false"){
                        tBody.removeChild(tr); 
                        msg (1,"alert alert-success", "Related Topic deleted successfully");
                        rearrangeTopicSerial();
                    }else{
                        msg (1,"alert alert-error", "Error occured during delete process");
                    }
                }
            });
    }

    //Re-arrange video link serial
    function rearrangeTopicSerial(){
        var serial = 1;
        $('#listTopic tbody tr').each(function(){
            var topicID = $('.topicID',this).val();
            if(typeof topicID != "undefined"){
                $('td:nth-child(1)',this).html('<input class="topicID" type="hidden" value="'+topicID+'" />' + serial++);
            }
        });
    }
/************************Related Topic end******************************/
/************************Video link start******************************/
    //Add row to add new video link
    function addRowVideo(){
        $('<tr><td class="span1">' + ($("#listVideo tbody tr").length) +'</td>'+
            '<td class="span5"><input id="videoTtitle" type="text" value="" placeholder="<?php echo $this->lang->line('videoTitle'); ?>"></td>'+
			'<td class="span5">'+
                '<select class="span5 selectVideo">'+
                    '<option value = "">---Select Video---</option>'+
                <?php 
                    $dir = explode("\\",dirname(__FILE__));
                    $files = scandir(implode("\\",array_slice($dir, 0, array_search("application", $dir))).'\ug_video\\'); 
                    for($i=2;$i<sizeof($files);$i++):
                ?>
                            '<option value="<?php echo $files[$i]; ?>"><?php echo $files[$i]; ?></option>'+
                <?php 
                    endfor; ?>
                '</select>'+
            '</td>'+
            '<td class="span1">'+
                        '<button onclick = "saveVideo(this)" class="btn btn-mini btn-primary" type="button"><i class="icon-ok-circle"></i></button>'+
                        '<button onclick="delRowVideo(this)" id="btnCancelCharge" class="btn btn-mini" type="button"><i class="icon-remove-circle"></i></button>'+
                '</td>'+
        '</tr>'
        ).insertBefore('#trInfosVideo');
        $('.selectVideo').select2({ width: '100%' });

    }
    //Save video link
    function saveVideo(me){
        var td=me.parentNode;
        var tr=td.parentNode;
        var videoTitle = $('#videoTtitle').val();
        var videoLink = '/ug_video/'+$('.selectVideo').select2('val');
        var ugID = $('.ugtopic').select2('val');
        if(ugID != '' && videoLink != '' && videoTitle != ''){
            $.ajax({
                url: "<?php echo base_url(); ?>userguide/addVideo/",
                async: false,
                type: "POST",
                data: 'ugID='+ugID+'&videoLink='+videoLink+'&videoTitle='+videoTitle,
                dataType: "html",
                success: function(data) {
                    var obj = jQuery.parseJSON(data);
                    if(obj.success){
                        var serial = ($('#listVideo tbody tr').length)-1;
                        $('<tr><td class="span1"><input class="videoID" type="hidden" value="'+obj.id+'" />' + serial +'</td>'+
                            '<td class="span5">'+videoTitle+
                            '<td class="span5">'+videoLink+
                            '</td>'+
                            '<td class="span1">'+
                                '<button onclick="deleteVideo(this,'+obj.id+')" class="btn btn-mini btn-danger" type="button"><i class="icon-trash"></i></button>'+
                            '</td>'+
                        '</tr>'
                        ).insertBefore('#trInfosVideo');

                        var tBody=tr.parentNode;
                        tBody.removeChild(tr);
                        msg (2,"alert alert-success", obj.success);
                        //alertBox(1,obj.success);
                    }
                }
            });
        }else{
            alert("Please Select Topic and Video");
        }
        
    }
    //Cancel video row
    function delRowVideo(me){
        var td=me.parentNode;
        var tr=td.parentNode;
        var tBody=tr.parentNode;
        tBody.removeChild(tr);
    }

    //Delete video link
    function deleteVideo(me,id){
        var td=me.parentNode;
        var tr=td.parentNode;
        var tBody=tr.parentNode;
        $.ajax({
                url: "<?php echo base_url(); ?>userguide/delVideo/",
                async: false,
                type: "POST",
                data: 'vidID='+id,
                dataType: "html",
                success: function(data) {
                    if(data != "false"){
                        tBody.removeChild(tr); 
                        msg (2,"alert alert-success", "Video Link deleted successfully");
                        rearrangeSerial();
                    }else{
                        msg (2,"alert alert-error", "Error occured during delete process");
                    }
                }
            });
    }

    //Re-arrange video link serial
    function rearrangeSerial(){
        var serial = 1;
        $('#listVideo tbody tr').each(function(){
            var vidID = $('.videoID',this).val();
            if(typeof vidID != "undefined"){
                $('td:nth-child(1)',this).html('<input class="videoID" type="hidden" value="'+vidID+'" />' + serial++);
            }
        });
    }
/************************Video link end******************************/
    function msg(n,type, message){
        $("#msg_div"+n +" p").html(message);
        $("#msg_div"+n).attr("class","alert " + type);
    }
    //Alert message box
    function alertBox(mode,msg){
        $('.sambox .alert').removeClass('alert-error').removeClass('alert-success');
        if(mode == 1)
            $('.sambox .alert').addClass('alert-success').html("<strong>Success! </strong>"+msg);
        else if(mode == 2)
            $('.sambox .alert').addClass('alert-error').html("<strong>Error! </strong>"+msg);
        else
            $('.sambox .alert').html("<strong>Worning! </strong>"+msg);
        $('.sambox').show();

        $('.sambox').effect( "pulsate", {times:3}, 5000,function(){
            setTimeout(function(){
                $('.sambox').fadeOut();
            },10000);   
        });


        $('html,body').animate({
           scrollTop: $('.sambox').offset().top
        });
    }
    
</script>

<div id="content">                        
    <div class="wrap">
        <!--Header start here-->
        <div class="head">
            <div class="info">
                <h1><?php echo element('compName', $this->session->userdata('logged_in')) ?> [ 
                    <?php echo element('compNo', $this->session->userdata('logged_in')) ?> ]</h1>
                <ul class="breadcrumb">
                    <li><a href="#"><?php echo $this->lang->line('dashboard') ?></a> <span class="divider">-</span></li>
                    <li><a href="#"><?php echo $this->lang->line('module') ?></a> <span class="divider">-</span></li>
                    <li class="active"><?php echo $this->lang->line('title') ?></li>
                </ul>
            </div>
            <div class="search">
                <form action="<?php echo base_url() ?>admin/search" method="post">
                    <input name="search_text" type="text" placeholder="search..."/>                                
                    <button type="submit"><span class="i-magnifier"></span></button>
                </form>
            </div>                        
        </div>
        <!--Header end here-->
        
        <!--Main content start here-->
        <div class="content">
            <div class="wrap">                    
                <div class="row-fluid">
                    <div class="span12">
                        <?php if(!empty($ugTopic)): ?>
                        <div class="block">
                            <div class="content sambox" style="display: none;">                                                
                                <div class="row-fluid">
                                    <div class="span12">        
                                        <div class="alert">            
                                            <strong>Success! </strong>
                                        </div>       
                                    </div>
                                </div>
                            </div>
                            <div class="head">
                                <h2><?php echo $this->lang->line('userGuide') ?></h2>
                            </div>
                            <div class="content">
                                <div class="controls-row"><!-- Row 4-->
                                    <div class="span12 tal">
                                        <div class="span1 tal"><?php echo form_label($this->lang->line('slctTopic'));?></div>
                                        <div class="span6">
                                            <?php
                                                $preselcat = isset($ugtopic)?$ugtopic:'';
                                                $options[''] = '--Select Topic--';
                                                foreach($ugTopic as $row){
                                                    $options[$row->fldid] = $this->lang->line($row->name);
                                                }
                                                $js='onchange="gatherInfo()" class="span12 ugtopic"';
                                                echo form_dropdown('ugtopic', $options, $preselcat, $js);
                                            ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="footer"></div>
                        </div>
                        <?php endif; ?>
                        <form id = "ugContentUpdate">
                        <div class="block">
                            <div class="head">
                                <h2><?php echo $this->lang->line('userGuideCont') ?></h2>
                            </div>
                            <div class="content">
                                <div class="controls-row"><!-- Row 4-->
                                    <div class="span12 tal">
                                        <div class="span1 tal"><?php echo form_label($this->lang->line('contTitle'));?></div>
                                        <div class="span8">
                                            <?php
                                                $preselcat = isset($ugtopic)?$ugtopic:'';
                                                $data = array(
                                                        'name'        => 'title',
                                                        'id'          => 'title',
                                                        'maxlength'   => '200',
                                                        "placeholder" => "Content Title"
                                                    );
                                                $js=' class="span12 title validate[required]"';
                                                echo form_input($data,'',$js);
                                            ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="controls-row"><!-- Row 4-->
                                    <div class="span12 tal">
                                        <div class="span1 tal"><?php echo form_label($this->lang->line('content'));?></div>
                                        <div class="span11" style="background:#fff;border:1px solid #dae1e8;">
                                            <?php
                                                $preselcat = isset($ugtopic)?$ugtopic:'';
                                                $data = array(
                                                        'name'        => 'content',
                                                        'id'          => 'nicEditor',
                                                        'style'       => 'height:400px;',
                                                        "placeholder" => "Content Detail"
                                                    );
                                                $js=' class="span12 content validate[required]"';
                                                echo form_textarea($data,'',$js);
                                            ?>
                                        </div>
                                    </div>
                                </div>

                                <!-- <div class="controls-row"><!-- Row 4-->
                                <!--    <div class="span12 tal">
                                        <div class="span1 tal"><?php echo form_label($this->lang->line('videoLink'));?></div>
                                        <div class="span8">
                                            <?php
                                                $preselcat = isset($ugtopic)?$ugtopic:'';
                                                $data = array(
                                                        'name'        => 'videoLink',
                                                        'id'          => 'videoLink',
                                                        'maxlength'   => '200',
                                                        "placeholder" => "Video Link"
                                                    );
                                                $js=' class="span12 videoLink validate[required]"';
                                                echo form_input($data,'',$js);
                                            ?>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                            <div class="footer">
                                <div class="side fr">
                                    <div class="btn-group">
                                        <button id="saveCont" class="btn btn-primary" type="button"> 
                                                <i class="icon-ok-circle"></i><?php echo $this->lang->line('saveCont'); ?>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>                       
                        </form>      
                    </div>
                </div> 
                <div class="row-fluid scRow">                            
                    <div class="span12 scCol">
                        <div class="block" id="grid_block_4">
                            <div class="head">
                                <h2><?php echo $this->lang->line('relTopic') ?></h2>
                                <ul class="buttons">
                                    <li><a class="block_toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                            <span class="i-arrow-down-3"></span></a></li>
                                </ul>                                        
                            </div><!-- head -->
                            <div class="content np">
                                <table data-currentRow="0" id="listTopic" cellpadding="0" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th><?php echo $this->lang->line('page') ?></th>
                                            <th><?php echo $this->lang->line('action') ?></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="trInfosTopic">
                                            <td colspan="8">
                                                <div id="msg_div1" class="alert alert-info">
                                                    <h4><?php echo $this->lang->line('lastMessage') ?></h4>
                                                    <p style="padding-top:10px;"><?php echo $this->lang->line('noMessage') ?></p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="footer">
                                    <div class="side fr">
                                        <div class="btn-group">
                                            <button style="margin-right:6px;" onclick="$('#SaleDetailForm').validationEngine('hide');" class="btn btn-mini" type="button" name="validat">Hide prompts</button>
                                            <button id="addRowCharge" onclick="addRowTopic()" class="btn btn-mini btn-primary" type="button">
                                                <i class="icon-plus-sign"></i><?php echo $this->lang->line('addNewTopic') ?></button>

                                        </div><!-- btn group -->      
                                    </div><!-- side fr -->      
                                </div><!-- footer -->      
                            </div><!-- content -->
                        </div><!-- grid block 1-->
                    </div><!-- scCol -->
                </div><!-- row-fluid scRow-->
                <div class="row-fluid scRow">                            
                    <div class="span12 scCol">
                        <div class="block" id="grid_block_4">
                            <div class="head">
                                <h2><?php echo $this->lang->line('videoLink') ?></h2>
                                <ul class="buttons">
                                    <li><a class="block_toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                            <span class="i-arrow-down-3"></span></a></li>
                                </ul>                                        
                            </div><!-- head -->
                            <div class="content np">
                                <table data-currentRow="0" id="listVideo" cellpadding="0" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th><?php echo $this->lang->line('videoTitle') ?></th>
                                            <th><?php echo $this->lang->line('videoUrl') ?></th>
                                            <th><?php echo $this->lang->line('action') ?></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="trInfosVideo">
                                            <td colspan="8">
                                                <div id="msg_div2" class="alert alert-info">
                                                    <h4><?php echo $this->lang->line('lastMessage') ?></h4>
                                                    <p style="padding-top:10px;"><?php echo $this->lang->line('noMessage') ?></p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="footer">
                                    <div class="side fr">
                                        <div class="btn-group">
                                            <button style="margin-right:6px;" onclick="$('#SaleDetailForm').validationEngine('hide');" class="btn btn-mini" type="button" name="validat">Hide prompts</button>
                                            <button id="addRowCharge" onclick="addRowVideo()" class="btn btn-mini btn-primary" type="button">
                                                <i class="icon-plus-sign"></i><?php echo $this->lang->line('addNewVideo') ?></button>

                                        </div><!-- btn group -->      
                                    </div><!-- side fr -->      
                                </div><!-- footer -->      
                            </div><!-- content -->
                        </div><!-- grid block 1-->
                    </div><!-- scCol -->
                </div><!-- row-fluid scRow-->                             
            </div>
        </div>
        
    </div>
</div>
<div class="dialog" id="row_delete" style="display: none;" title="Are you sure to Delete?">
    <p><?php echo $this->lang->line('message1') ?></p>
</div>   
<div class="dialog" id="row_edit" style="display: none;" title="Are you sure to Edit ?">
    <p><?php echo $this->lang->line('message2') ?></p>
</div>

