<div class="breadcrumb">
    <h1>Patient Overview</h1>
    <ul>
        <li><a href="<?php echo SITE_URL.ADMIN_DIR ?>">Dashboard</a></li>
        <li>Patient Overview</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>

<form action="" method="post">
<div class="row">
    <div class="col-lg-12 col-md-12">
        <div class="card mb-5">
            <div class="card-body">
                <div class="row row-xs">
                    
                    <div class="col-md-2 mt-3 mt-md-0"  id="div_status">
                      <label for="status">Status</label>
                        <select id="status" class="form-control">
                            <option value="">Select</option>
                            <option value="Allocated">Allocated</option>
                            <option value="Earned">Earned</option>
                            <option value="Claimed">Claimed</option>
                            <option value="Redeemed">Redeemed</option>
                        </select>
                    </div>

                    

                    <div class="col-md-2 mt-3 mt-md-0">
                        <label for="">&nbsp;</label>
                        <button type="submit" name="submit" class="btn btn-primary btn-block">Search</button>
                    </div>
                    <div class="col-md-2 mt-3 mt-md-0">
                        <label for="">&nbsp;</label>
                        <button type="reset" name="reset" class="btn btn-primary btn-block" onClick="window.location.reload()">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>


<div class="row mb-4">
    <div class="col-md-12 mb-4">
        <div class="card text-left">

            <div class="card-body">
                <div class="table-responsive">
                  <form id="listFrm" name="listFrm" action="" method="post">       
                    <input type="hidden" id="action" name="action" value="">
                    <table id="list" class="display table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Patient Name</th>
                                <th>Status</th>
                                <th>Total Points</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="application/javascript">
$(document).ready(function() {
    $('#list').DataTable( { 
          "ajax": "PatientOverview.php?act=load",
          "processing": true,
          "serverSide": true,
          "pageLength": 25,
                "aaSorting": [],
                  "aoColumnDefs": [
                      { 'bSortable': false, 'aTargets': [] }
                  ],
          language: {
              "processing" : "<div class='loader-bubble loader-bubble-primary m-5'></div>",
              "sEmptyTable" :  "No records found."
          }
          
      } );

    $("form").on("submit", function(e) {
        e.preventDefault();

        var status  = $("#status").val();

        $('#list').DataTable().destroy();
        $('#list').DataTable({ 
            "ajax": "PatientOverview.php?act=load"
                    +"&status="+status,
            "processing": true,
            "serverSide": true,
            "pageLength": 25,
            "aaSorting": [],
            "language": {
                "processing" : "<div class='loader-bubble loader-bubble-primary m-5'></div>",
                "sEmptyTable" :  "No records found."
            }
        });
    });

});
</script>
