<style type="text/css">
    #txtcontent{
        height: 400px;
    }
    .dataTables_paginate.paging_bootstrap {
        width: 100%;
    }
    .pagination{
        width: 100%;
    }
</style>
<div class="page-content">
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="#">Settings</a>
            </li>
            <li class="active">Query Builder</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->
    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
                Query Builder
            </h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <!-- End Page Body -->
    <div class="page-body">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <div class="widget">
                            <div class="widget-body">
                    <div class="form-group">
                       <a type="button" class="btn btn-success shiny" href="<?php echo base_url();?>settings/reports" class="btn btn-default"><i class="fa fa-arrow-left"></i></a>
                   </div>
                                <div class = "row center">
                                    <div class="col-lg-12 col-sm-12 col-xs-12">
                                        <div class="widget center">
<div>
    <div id="horizontal-form">
        
        <form class="form-horizontal" role="form" method="POST" action="<?php echo site_url('settings/reports/queryexecute')?>">
            <div class="col-xs-12 col-md-4" style="height: 350px;overflow: auto;margin-bottom: 10px;">
                
                
                
<!--[if gte IE 9 ]><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/_styles.css" media="screen"><!--<![endif]-->
<ol class="tree">
    <?php
    if($tablenames) {
        $sn=1;
        foreach($tablenames as $tablerec) {
    ?>
        <li>
            
            <label for="folder<?php echo $sn; ?>"><i class="fa fa-table" style="font-size: 15px;"></i> <?php echo strtoupper($tablerec->table_name); ?></label>
            <input type="checkbox" id="folder<?php echo $sn; ?>" /> 
            <ol>
                <?php
                $fieldnames = $this->common->customquery("SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME='".strtoupper($tablerec->table_name."' AND TABLE_SCHEMA='SALECULATOR'"));
                    if($fieldnames) {
                        foreach($fieldnames as $fields) {
                ?>
                <li class="file"><?php echo $fields->COLUMN_NAME; ?></li>
                <?php
                        }
                    }
                ?>
            </ol>
        </li>
    <?php
            $sn++;
        }
    }
    ?>
</ol>    
            </div>
            <div class="col-xs-12 col-md-8" style="margin-bottom: 10px;">
                <textarea id="query" name="query" class="form-control" placeholder="Query here..." style="height: 300px;"><?php echo $executedquery; ?></textarea>
                <input type="submit" align="center" value="Execute" class="btn btn-success" style="margin-top: 18px;">
            </div>
            <div class="col-xs-12 col-md-12" style="margin-bottom: 10px;margin-top: 15px;overflow: auto;">
                <table id="example" class="table table-bordered" width="100%"></table>
            </div>
        </form>
    </div>
</div>
                                        </div>
                                    </div> 
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page Content -->
<script type="text/javascript">
$(document).ready( function () {
    jQuery.fn.putCursorAtEnd = function() {
        return this.each(function() {
            // Cache references
            var $el = $(this),
            el = this;
            // Only focus if input isn't already
            if (!$el.is(":focus")) {
                $el.focus();
            }
            // If this function exists... (IE 9+)
            if (el.setSelectionRange) {
                // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
                var len = $el.val().length * 2;
                // Timeout seems to be required for Blink
                setTimeout(function() {
                  el.setSelectionRange(len, len);
                }, 1);
            } else {
                // As a fallback, replace the contents with itself
                // Doesn't work in Chrome, but Chrome supports setSelectionRange
                $el.val($el.val());
            }
            // Scroll to the bottom, in case we're in a tall textarea
            // (Necessary for Firefox and Chrome)
            this.scrollTop = 999999;
        });
      };
    
    
    var searchInput = $("#query");
    searchInput.putCursorAtEnd() // should be chainable
      .on("focus", function() { // could be on any event
        searchInput.putCursorAtEnd()
    });

    var dataSet = [
    <?php
        if(isset($executedqueryrec)) {
            if($executedqueryrec) {
                $firstrec       =   $executedqueryrec[0];
                $filedstitles   =   array_keys($firstrec);
                foreach($executedqueryrec as $executerec) {
                    echo '[ ';
                    foreach($filedstitles as $filedhead) {
                        echo "'".(string)strip_tags($executerec["$filedhead"])."',";
                    }
                    echo '], ';
                }
            }
        }
    ?>
];

    $('#example').DataTable( {
        data: dataSet,
        columns: [
            <?php
            if(isset($executedqueryrec)) {
                if($executedqueryrec) {
                    $firstrec       =   $executedqueryrec[0];
                    $filedstitles   =   array_keys($firstrec);
                    foreach($filedstitles as $filedhead) {
            ?>
                { title: "<?php echo $filedhead; ?>" },
            <?php
                    }
                }
            }
            ?>
        ]
    } );
} );



function boldText() {
  var txtarea = document.getElementById("query");
  var start = txtarea.selectionStart;
  var end = txtarea.selectionEnd;
  var sel = txtarea.value.substring(start, end);
  var finText = txtarea.value.substring(0, start) + '[b]' + sel + '[/b]' + txtarea.value.substring(end);
  txtarea.value = finText;
  txtarea.focus();
  txtarea.selectionEnd= end + 7;
}

</script>