<?php
include_once('../libs/main.php');
include_once('checkLogin.php');
?>

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

<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">
                    <table id="list" class="display table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Clinic Name</th>
                                <th>Total Members</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="memberModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
            Reward Members - <span id="clinicTitle"></span>
        </h5>
        <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="table-responsive">
          <table id="memberList" class="table table-striped table-bordered" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>

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


<script type="application/javascript">
let memberTable;

$(document).ready(function() {

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

});

/* Clinic click */
$(document).on('click', '.viewMembers', function () {

    let cid  = $(this).data('cid');
    let name = $(this).data('name');

    $('#clinicTitle').text(name);
    $('#memberModal').modal('show');

    if ($.fn.DataTable.isDataTable('#memberList')) {
        memberTable.ajax
            .url('clinicMember.php?act=members&cid=' + cid)
            .load();
    } else {
        memberTable = $('#memberList').DataTable({
            processing: true,
            serverSide: true,
            ajax: 'clinicMember.php?act=members&cid=' + cid,
            pageLength: 10
        });
    }
});
</script>
