<script type="text/javascript">
$(document).ready(function() {
    $('#editabledatatable').dataTable( {
         "destroy": true,
        "ajax": "<?php echo base_url(); ?>settings/reports/getreportsettings",
        "columns": [
            { "data": "id",
              render: function (data, type, row, meta) {
               return meta.row + meta.settings._iDisplayStart + 1;
              } 
            },
            { "data": "REPORTNAME" },
            {
              "data": null,
              "mRender": function(data, type, full) {
                 return '<a class="btn btn-info shiny btn-xs" href="<?php echo base_url(); ?>settings/reports/editreport/' + data.ID + '">' + '<i class="fa fa-edit"></i>' + '</a>&nbsp;&nbsp;<a class="btn btn-danger shiny btn-xs" data-toggle="modal" data-target="#confirmmodal" onclick="return confirmFunction(this.id)" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-trash"></i>' + '</a>&nbsp;&nbsp;<a class="btn btn-maroon shiny btn-xs" id=' + data.ID + ' ' + ' href="<?php echo base_url(); ?>report/view/'+data.ID+'" target="_blank">' + '<i class="fa fa-eye"></i>' + '</a>';
               }
            }
        ]

    } );
} );

</script>

<script type="text/javascript">
  
function confirmFunction(id) {
    $("#okid").val(id);
}

  function deleteFunction() {
     id = $("#okid").val();
    $.ajax({
        url: base_url + 'settings/reports/deletereports/'+ id,
        success:function(data){
         location.reload(true);
          $("#confirmmodal").hide();
         $("#modal-success").show();

        }
    });
}
</script>
<style type="text/css">
    #content{
        height: 300px;
    }
</style>
            <!-- Page Content -->
            <div class="page-content">
        
                <!-- Page Header -->
                <div class="page-header position-relative">
                     <div class="header-title">
                        <h1>
                          Reports 
                        </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 -->
                <div class="page-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="widget">
                              
    <?php
        if ($this->session->flashdata('success_msg')) {
    ?>
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
       <?php echo $this->session->flashdata('success_msg'); $this->session->unset_userdata('success_msg');?>
    </div>
    <?php
        }
    ?>

            <div class="widget-body">
                <div class="table-toolbar">
                   <div class="form-group">
                       <a type="button" class="btn btn-success shiny" href="<?php echo base_url();?>settings/reports/add" class="btn btn-default"><i class="fa fa-plus"></i></a>
                   </div>
<div id="modal-success" class="modal modal-message modal-success" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="glyphicon glyphicon-check"></i>
                </div>
                <div class="modal-title">Deleted successfuly</div>

                
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>
            </div> <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div>


     <div id="confirmmodal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Are you sure?</h4>
      </div>
      <div class="modal-footer">
        <input type="hidden" id="okid" value="">
        <button type="button" class="btn btn-success" onclick="return deleteFunction()">Ok</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
</div>

</div>
                                 <div class="table-responsive"> 
                                    <table class="table table-striped table-hover table-bordered editable" id="editabledatatable">
                                        <thead>
                                            <tr role="row">
                                                <th>
                                                    ID
                                                </th>
                                                <th>
                                                    NAME
                                                </th>
                                                <th>
                                                    Action
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
                <!-- /Page Body -->
            </div>
            <!-- /Page Content -->
        </div>
        <!-- /Page Container -->
        <!-- Main Container -->

    </div>

