<!-- AdminLTE CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- CountUp.js for animated counters -->
<script src="https://cdn.jsdelivr.net/npm/countup.js@2.6.2/dist/countUp.min.js"></script>

<style>
  /* Card hover effect */
  .info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
  }
  .info-box {
    border-radius: 12px;
    overflow: hidden;
  }
  .info-box-icon {
    border-radius: 12px 0 0 12px;
  }
  .table-hover tbody tr {
    transition: background-color 0.3s;
  }
  .table-hover tbody tr.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  .table-hover tbody tr.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-in;
  }
  .card {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
  .card-header {
    border-radius: 12px 12px 0 0;
  }
</style>

<div class="content">
  <section>
    <div class="container-fluid">
      <!-- Info Boxes -->
      <div class="row g-3">
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="info-box bg-success text-white">
            <span class="info-box-icon"><i class="fa fa-upload"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Uploaded</span>
              <span class="info-box-number" id="countUploaded"><?= count($complete_document); ?></span>
              <div class="mt-2">
                <a href="#" class="text-white small d-block">Company-wise View</a>
                <a href="#" class="text-white small d-block">Yearly View</a>
                <a href="#" class="text-white small d-block">All Files</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="info-box bg-warning text-dark">
            <span class="info-box-icon"><i class="fa fa-clock"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Pending</span>
              <span class="info-box-number" id="countPending">0</span>
            </div>
          </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
          <div class="info-box bg-danger text-white">
            <span class="info-box-icon"><i class="fa fa-exclamation-triangle"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Due</span>
              <span class="info-box-number" id="countDue">0</span>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
          <div class="info-box bg-info text-white">
            <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Upcoming</span>
              <span class="info-box-number" id="countUpcoming">0</span>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
          <div class="info-box bg-purple text-white">
            <span class="info-box-icon"><i class="fa fa-clock-rotate-left"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Uploaded After Due</span>
              <span class="info-box-number" id="countLate">0</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Table & Chart -->
      <div class="row mt-4">
        <div class="col-lg-8">
          <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
              <h3 class="card-title"><i class="fa fa-file-alt"></i> Documents List</h3>
              <div class="d-flex flex-wrap align-items-center gap-2">
                <select id="statusFilter" class="form-control form-control-sm">
                  <option value="all">All</option>
                  <option value="uploaded">Uploaded</option>
                  <option value="pending">Pending</option>
                  <option value="due">Due</option>
                  <option value="upcoming">Upcoming</option>
                  <option value="late">Uploaded After Due</option>
                </select>
                <input id="searchInput" type="search" placeholder="Search file..." class="form-control form-control-sm" />
                <button id="exportCsv" class="btn btn-light btn-sm"><i class="fa fa-download"></i> Export CSV</button>
              </div>
            </div>
            <div class="card-body table-responsive p-0" style="max-height: 420px;">
              <table class="table table-striped table-hover text-sm">
                <thead class="bg-light">
                  <tr>
                    <th>File</th>
                    <th>Authority</th>
                    <th>Year</th>
                    <th>Month</th>
                    <th>Upload Date</th>
                    <th>Due Date</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody id="tableBody"></tbody>
              </table>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center">
              <div id="tableInfo" class="text-muted small"></div>
              <div>
                <button id="prevPage" class="btn btn-outline-secondary btn-sm">Prev</button>
                <button id="nextPage" class="btn btn-outline-secondary btn-sm">Next</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="card">
            <div class="card-header bg-info text-white">
              <h3 class="card-title"><i class="fa fa-chart-pie"></i> Status Breakdown</h3>
            </div>
            <div class="card-body">
              <canvas id="statusChart" height="280"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<script>
  // Live counters with CountUp.js
  const counters = ['countUploaded', 'countPending', 'countDue', 'countUpcoming', 'countLate'];
  counters.forEach(id => {
    const el = document.getElementById(id);
    const countUp = new CountUp(id, parseInt(el.textContent || 0), { duration: 1.5, separator: ',' });
    if (!countUp.error) countUp.start();
  });

  // Table filtering and search with fade animation
  const tableBody = document.getElementById('tableBody');
  const searchInput = document.getElementById('searchInput');
  const statusFilter = document.getElementById('statusFilter');

  let documents = [
    // Example data, replace with PHP-generated data
    {file: 'Doc1.pdf', authority:'Admin', year:2025, month:'Oct', upload:'2025-10-01', due:'2025-10-05', status:'uploaded'},
    {file: 'Doc2.pdf', authority:'HR', year:2025, month:'Oct', upload:'2025-10-03', due:'2025-10-07', status:'pending'},
    {file: 'Doc3.pdf', authority:'Admin', year:2025, month:'Sep', upload:'2025-09-20', due:'2025-09-25', status:'late'}
  ];

  function renderTable(data){
    tableBody.innerHTML = '';
    data.forEach(doc=>{
      const tr = document.createElement('tr');
      tr.classList.add('fade-in');
      tr.innerHTML = `
        <td>${doc.file}</td>
        <td>${doc.authority}</td>
        <td>${doc.year}</td>
        <td>${doc.month}</td>
        <td>${doc.upload}</td>
        <td>${doc.due}</td>
        <td>${doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}</td>
      `;
      tableBody.appendChild(tr);
    });
  }

  function filterTable(){
    const query = searchInput.value.toLowerCase();
    const status = statusFilter.value;
    const filtered = documents.filter(d=>{
      const matchesStatus = status==='all'||d.status===status;
      const matchesSearch = Object.values(d).some(v=>v.toString().toLowerCase().includes(query));
      return matchesStatus && matchesSearch;
    });
    renderTable(filtered);
  }

  searchInput.addEventListener('input', filterTable);
  statusFilter.addEventListener('change', filterTable);

  // Initial render
  renderTable(documents);
</script>
