<%- include('includes/header',  {username: admin[0].name,email: admin[0].email } ) %>
<link rel="stylesheet" href="/css/notificatihistory.css">
  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">See All Notification</h4>

            </div>


          </div>

        </div>
      </div>
      <div class="datatables">


        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="zero_config" class="table table-striped table-bordered text-nowrap align-middle">
                <thead>
                  <tr>
                    <th>Message</th>
                    <th>User</th>
                    <th>Subject</th>
                    <th>CreatedAt</th>
                    <th class="action-col">Action</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>


      </div>
<!-- Modal 1 (Default clean UI, no custom CSS applied) -->
<div id="notificationDetailsModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content shadow-sm border-0">

            <div class="modal-header bg-light-subtle">
                <h4 class="modal-title">Notification Details</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div class="mb-4">
                    <h5 class="fw-bold">To</h5>
                    <p class="fs-5" id="notifyUser"></p>
                    <small id="notifyEmail" class="text-muted"></small>
                </div>

                <div>
                    <h5 class="fw-bold">Message</h5>
                    <p class="fs-5" id="notifyMessage"></p>
                </div>

            </div>

            <div class="modal-footer">
                <button class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>

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


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

  <%- include('includes/allscripts') %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="/js/view/notificationhistory.js"></script>