<div class="row">
                <div class="col-md-12" id = "formulir">

<script type="text/javascript">

$(document).ready(function(){


  $("#requestpreview").click(function(e){
       e.preventDefault();
       $("#loading").css('display', '');
       if($("#osp").is(":checked")) { 
        var outstanding = "osp";
       }
       else
       {
        var outstanding = "goal";
       }
       var datefrom = $('#datefromselector').val();
       var dateto = $('#datetoselector').val();
       var reporttype = $("#reporttypeselector option:selected").val();
       var rekening = $("#rekeningselector option:selected").val();
       var ticketnumber = $('#ticketnumberselector').val();
         $.ajax({
           type: "POST",
           url: "<?php echo base_url();?>c_modules/preview", 
           data: {
            datefrom:datefrom,
            dateto:dateto,
            reporttype:reporttype,
            rekening:rekening,
            ticketnumber:ticketnumber
           },
           dataType: "text",  
           success: function(data){
                $("#loading").css('display', 'none');
                $("#datagrid").html(data);
                }
            });
       // $("#datagrid").html(reporttype);
  })
})


</script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
  $(function() {
  // $( "#datefromselector" ).datepicker({ format: 'dd-mm-yyyy' });
  // $( "#datetoselector" ).datepicker({ format: 'dd-mm-yyyy' });

});
</script>

<h1>Reports <?php if($this->session->userdata('privilege') == 'Admin') {echo $this->session->userdata('brandgroup');}?></h1>


<form role="form" method="post" action="<?php echo base_url('c_modules/reports'); ?>">

<div id = "errmsg" class = "mt-4">
         <?php if (!empty($this->session->flashdata('reportcrd'))){ echo $this->session->flashdata('reportcrd');} ?>      
</div>


<div class="row">
  <div class="col-md-3">
    <div class="form-group">
       <label>Date From (mm/dd/yyyy):  </label>
       <div class="input-group date">
        <div class="input-group-addon">
               <span class="glyphicon glyphicon-th"></span>
           </div>
           <p><input type="date" id="datefromselector" name = "datefromselector" value = "<?php echo date("Y-m-d")?>"></p>
       </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
       <label>Date To (mm/dd/yyyy): </label>
       <div class="input-group date">
        <div class="input-group-addon">
               <span class="glyphicon glyphicon-th"></span>
        </div>
           <p><input type="date" id="datetoselector" name = "datetoselector" value = "<?php echo date("Y-m-d")?>"></p>
       </div>
    </div>
  </div>
  
  <div class="col-md-3">
    <div class="form-group">
      <label>Nomor Rekening</label>
      <select id = "rekeningselector" name="rekeningselector" class="form-control mainform" style="width: 100%;">
        <?php 
            foreach($rekeninglist as $row)
            { 
         ?>
            <option  value="<?php echo $row->sourceaccount;?>"><?php echo $row->bank." - ". $row->sourceaccount . " - " .$row->namarekening  ;?></option>
        <?php }?>
      </select>
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <label>Report Type</label>
      <select id = "reporttypeselector" name="reporttypeselector" class="form-control mainform">
          <option selected = "selected" value = "withdrawals"> All WD Approvals </option>
          <option value = "ctn">Check Ticket Number Withdrawals</option>
          <option value = "mtn">Manual Ticket Number Withdrawals</option>
          <option value = "depositspermata"> All QR Depo</option>
        </select>
    </div>
  </div>



</div>

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label for="inputUsername">Tiket Number (For Report 'Check Ticket Number')</label>
      <input type="text" class="form-control mainform" id="ticketnumberselector" name="ticketnumberselector">
    </div>
  </div>
</div>  
</form>
<div class="card-footer">
  
  <button id = "requestpreview"  class="btn btn-primary">Preview</button>
  <div id = "loading" style = "display:none">
    <div class="spinner-grow text-muted"></div>
    <div class="spinner-grow text-primary"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-warning"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-secondary"></div>
    <div class="spinner-grow text-dark"></div>
    <div class="spinner-grow text-light"></div>
  </div>
</div>



</div>
</div>

<div class="row">
    <div class="col-md-12" id = "datagrid">
    </div>
</div>