<style type="text/css">
.buttons-html5, .buttons-print{background: orange; color:#fff; border:0px; float: left; margin-right: 5px; margin-top: 7px}
.DTFC_LeftBodyWrapper{margin-top: -7px;}
table.dataTable{margin-top: 0px !important}
</style>

<div class="row" id="filter-content" style="display:none">
  <div class="col-md-12">
    <div class="portlet light">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-filter"></i>Filter Data
        </div>
      </div>
      <div class="portlet-body form">
        <form id="form-filter" class="horizontal-form">
          <div class="form-body">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group" id="form_no_reg">
                  <label for="no_reg" class="control-label">Nama Pasien</label>
                  <input type="text" id="no_reg" name="no_reg" class="form-control" placeholder="Nomor Registrasi">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group" id="form_tgl_reg">
                  <label for="tgl_reg" class="control-label">Status Transaksi</label>
                  <input type="text" id="tgl_reg" name="tgl_reg" class="form-control" placeholder="Tanggal Registrasi">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group" id="form_no_rekam_medis">
                  <label for="no_rekam_medis" class="control-label">Tgl Keluar Pasien</label>
                  <input type="text" id="no_rekam_medis" name="no_rekam_medis" class="form-control" placeholder="Nomor Rekam Medis">
                </div>
              </div>
            </div>
          </div>
          <div class="form-actions right">
            <a class="btn yellow-lemon btn-sm" id="reset-filter">
              <i class="fa fa-refresh"></i> Reset Filter
            </a>
            <button class="btn green-jungle btn-sm" id="tampilkan">
              <i class="fa fa-search"></i> Tampilkan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="row" id="portlet-content">
  <div class="col-md-12">
    <div class="portlet light" style="position:relative">
      <div class="portlet-title col-md-3">
        <div class="caption">
          <i class="fa fa-th-list"></i>Data Tagihan Pasien 
        </div>
      </div>
      <div class="col-md-9" id="tombol-added" style="margin-bottom:5px; padding:0px; border-bottom:0px" id="tombol-action" style="display:none">
        <div style="float:right; overflow:hidden; margin-top:5px;">
          <a class="btn red-soft btn-sm" id="filter">
            <i class="fa fa-filter"></i> Filter Data
          </a>
          
        </div>
      </div>
      

      <div class="portlet-body" id="page-content" style="">
                <div class="table-responsive" style="border:0px;">


                    <table id="example" class="table table-bordered table-striped table-hover datatable" >
                      <thead>

                        <tr style="background: #5578eb; color:#fff;">
                            <th class="text-left" style="min-width: 30px"><i class="fa fa-th-large"></i></th>
                            <th class="text-left" style="min-width: 100px">Tgl Bayar</th>
                            <th class="text-left" style="min-width: 60px">No RM</th>
                            <th class="text-left" style="min-width: 140px">Nama Pasien</th>
                            <th class="text-left" style="min-width: 100px">Invoice Total</th>
                            <th class="text-left" style="min-width: 100px">Balance due</th>
                            <th class="text-left" style="min-width: 450px">Deskripsi</th>
                                  
                            <th class="text-center">Status</th>                 
                        </tr>
                      </thead>
                      <tbody>
                       
                            <?php 
                            $btn = anchor('#', "<i class='fa fa-check'></i>", array('class'=>"btn-xs btn-info", 'data-toggle'=>"m-tooltip", 'title'=>'Edit'));
                            $vw = anchor('#', "<i class='fa fa-print'></i>",  array('class'=>"btn-xs btn-warning", 'data-toggle'=>"m-tooltip", 'title'=>'View','target'=>'_Blank'));
                            ?>
                            <tr>
                              <td class="col-md-1">
                                  <?=$btn?> <?=$vw?>
                              </td>
                              <td><?=date('Y-m-d h:i:s')?></td>
                              <td>BBMC-122</td>
                              <td>I Putu Agus Edy Saputra</td>
                              <td class="text-left"><?=$this->Content_m->currency(103000)?></td>
                              <td class="text-left"><a href="#" style="color:blue"><?=$this->Content_m->currency(103000)?></a></td>
                              <td>Administrasi, Pemeriksaan Dokter Umum UGD, Perawatan, Sarana, Obat</td>
                              
                              <td class="col-md-1 text-center"><?=$this->Content_m->paid_status(103000)?></td>
                            </tr>
                         

                      </tbody>     
                    </table>




                </div>
            </div>






     
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    var buttonCommon = {
        exportOptions: {
            format: {
                body: function ( data, row, column, node ) {
                    return (column === 5) ? data.replace( /\n/g, '"&CHAR(10)&CHAR(13)&"' ) : data.replace(/(&nbsp;|<([^>]+)>)/ig, "\n");;
                }
            }
        },
        customize: function( xlsx ) {
          var sheet = xlsx.xl.worksheets['sheet1.xml'];
          $('row c', sheet).attr( 's', '55' );
       }
    };
 
    $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        dom: 'lBfrtip',
        buttons: [
            $.extend( true, {}, buttonCommon, {
                extend: 'excelHtml5',
                text: 'Print Table Data',
                title:''
            } )
        ],
        lengthMenu: [ [10, 50, 200, -1], [10, 50, 200, 'All Data'] ],
        fixedColumns: {
            leftColumns: 1
        },
        fnInitComplete: function(oSettings, json) {
          $('#dataTables_processing').css('display','none');
          $('#page-content').css('display','block');
          $('#fillter-content').css('display','block');
        }

    } );
} );

$('.tooltips').tooltip({ container: 'body' }) 
$(".date" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "-60:+0",
    dateFormat: 'yy-mm-dd'
});
</script>


