<%- include('partials/header-sidebar') %>
<link href="website-assets/img/favicon.png" rel="icon" />

<div class="page-wrapper">
  <div class="content">
    <div class="row">
      <!-- Schools -->
      <!-- <div class="col-lg-4 col-sm-6 col-12">
                    <div class="dash-count">
                        <div class="dash-counts">
                            <h4 id="schoolCount" class="skeleton">...</h4>
                            <h5>Schools</h5>
                        </div>
                        <div class="dash-imgs">
                            <i data-feather="layers"></i>
                        </div>
                    </div>
                </div> -->

      <!-- Departments -->
      <!-- <div class="col-lg-4 col-sm-6 col-12">
                    <div class="dash-count das1">
                        <div class="dash-counts">
                            <h4 id="departmentCount" class="skeleton">...</h4>
                            <h5>Departments</h5>
                        </div>
                        <div class="dash-imgs">
                            <i data-feather="grid"></i>
                        </div>
                    </div>
                </div> -->

      <!-- Programs -->
      <!-- <div class="col-lg-4 col-sm-6 col-12">
                    <div class="dash-count das2">
                        <div class="dash-counts">
                            <h4 id="programCount" class="skeleton">...</h4>
                            <h5>Programs</h5>
                        </div>
                        <div class="dash-imgs">
                            <i data-feather="book-open"></i>
                        </div>
                    </div>
                </div> -->

      <!-- Program Types -->
      <!-- <div class="col-lg-4 col-sm-6 col-12">
                    <div class="dash-count das3">
                        <div class="dash-counts">
                            <h4 id="programTypeCount" class="skeleton">...</h4>
                            <h5>Program Types</h5>
                        </div>
                        <div class="dash-imgs">
                            <i data-feather="tag"></i>
                        </div>
                    </div>
                </div> -->

      <!-- Staff Profiles -->
      <!-- <div class="col-lg-4 col-sm-6 col-12">
                    <div class="dash-count das1">
                        <div class="dash-counts">
                            <h4 id="staffCount" class="skeleton">...</h4>
                            <h5>Staff Profiles</h5>
                        </div>
                        <div class="dash-imgs">
                            <i data-feather="users"></i>
                        </div>
                    </div>
                </div> -->

      <!-- Gallery Images -->
      <div class="col-lg-6 col-sm-6 col-12">
        <div class="dash-count das2">
          <div class="dash-counts">
            <h4 id="galleryCount" class="skeleton">...</h4>
            <h5>Gallery Images</h5>
          </div>
          <div class="dash-imgs">
            <i data-feather="image"></i>
          </div>
        </div>
      </div>

      <!-- Events -->
      <div class="col-lg-6 col-sm-6 col-12">
        <div class="dash-count das3">
          <div class="dash-counts">
            <h4 id="eventCount" class="skeleton">...</h4>
            <h5>Events</h5>
          </div>
          <div class="dash-imgs">
            <i data-feather="calendar"></i>
          </div>
        </div>
      </div>

      <!-- News -->
      <div class="col-lg-6 col-sm-6 col-12">
        <div class="dash-count">
          <div class="dash-counts">
            <h4 id="newsCount" class="skeleton">...</h4>
            <h5>News Posts</h5>
          </div>
          <div class="dash-imgs">
            <i data-feather="file-text"></i>
          </div>
        </div>
      </div>

      <!-- AI Tools -->
      <div class="col-lg-6 col-sm-6 col-12">
        <div class="dash-count das1">
          <div class="dash-counts">
            <h4 id="aiCount" class="skeleton">...</h4>
            <h5>AI Faqs</h5>
          </div>
          <div class="dash-imgs">
            <i data-feather="cpu"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<%- include("partials/footer") %>

<style>
  .skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    color: transparent;
    min-height: 28px;
    position: relative;
  }

  .skeleton::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", async () => {
    try {
      const res = await fetch("/api/dashboard-summary", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      const { success, data } = await res.json();

      if (success) {
        const fields = [
          "schoolCount",
          "departmentCount",
          "programCount",
          "programTypeCount",
          "staffCount",
          "galleryCount",
          "eventCount",
          "newsCount",
          "aiCount",
        ];

        fields.forEach((field) => {
          const el = document.getElementById(field);
          if (el) {
            el.classList.remove("skeleton");
            el.textContent = data[field];
          }
        });
      }
    } catch (err) {
      console.error("Error fetching dashboard data", err);
    }
  });
</script>
