<?php
session_start();
if (!isset($_SESSION['role_id']) || $_SESSION['role_id'] > 2) {
    header("Location: ../../index.php");
    exit();
}
include('../../includes/config.php');
include('../../includes/header.php');
include('../../includes/footer.php');

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Reports Dashboard - Digital POS</title>
  <link rel="stylesheet" href="../../css/dashboard.css">
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
        integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    :root {
      --bg-color: #000;
      --overlay-bg: rgba(0, 0, 0, 0.6);
      --card-bg: rgba(0, 0, 0, 0.4);
      --hover-bg: rgba(255, 111, 0, 0.3);
      --text-color: white;
    }
    [data-theme="light"] {
      --bg-color: #f3f3f3;
      --overlay-bg: rgba(255, 255, 255, 0.6);
      --card-bg: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 159, 0, 0.2);
      --text-color: #222;
    }
    body, html {
      margin: 0;
      padding: 10;
      font-family: 'Segoe UI', sans-serif;
      background: var(--bg-color)
                  url('../../images/profile.jpg') no-repeat center center fixed;
      background-size: cover;
      color: var(--text-color);
    }
    .overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      z-index: -1;
    }
    .content {
      margin: 80px auto 40px;
      max-width: 1200px;
      padding: 40px;
      background: rgba(255,255,255,0.08);
      border-radius: 20px;
      backdrop-filter: blur(15px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    .toggle-theme {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--card-bg);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      color: var(--text-color);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .toggle-theme i {
      font-size: 18px;
    }
    .section-title {
      margin-top: 30px;
      font-size: 1.3rem;
      color: #ffa500;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding-bottom: 8px;
    }
    .report-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .report-card {
      background: var(--card-bg);
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: background 0.3s ease;
      border: 1px solid rgba(255,255,255,0.2);
      text-decoration: none;
      color: var(--text-color);
    }
    .report-card:hover {
      background: var(--hover-bg);
    }
    .report-card i {
      font-size: 28px;
      margin-bottom: 10px;
      color: #ffa500;
    }
    .report-card h4 {
      margin: 10px 0;
      color: #ffa500;
    }
    .report-card p {
      font-size: 14px;
      color: inherit;
    }
    @media (max-width: 768px) {
      .report-card h4 {
        font-size: 1.1rem;
      }
      .report-card p {
        font-size: 13px;
      }
    }
  </style>
</head>
<body data-theme="dark">
  <div class="overlay"></div>
  <button class="toggle-theme" title="Toggle Light/Dark">
    <i class="fas fa-sun"></i>
  </button>

  <div class="content">
    <h2>📈 Reports Dashboard</h2>

    <!-- Inventory Reports -->
    <h3 class="section-title"><i class="fas fa-boxes"></i> Inventory Reports</h3>
    <div class="report-grid">
      <a href="inventory_summary.php" class="report-card">
        <i class="fas fa-warehouse"></i>
        <h4>Inventory Summary</h4>
        <p>Total stock & status across products.</p>
      </a>
      <a href="stock_transfer_log.php" class="report-card">
        <i class="fas fa-exchange-alt"></i>
        <h4>Stock Transfers</h4>
        <p>Track branch-to-branch movements with export.</p>
      </a>
      <a href="stock_adjustments_log.php" class="report-card">
        <i class="fas fa-edit"></i>
        <h4>Stock Adjustments</h4>
        <p>Manual stock changes with history.</p>
      </a>
    </div>

    <!-- Sales Reports -->
    <h3 class="section-title"><i class="fas fa-chart-line"></i> Sales & Performance</h3>
    <div class="report-grid">
      <a href="sales_report.php" class="report-card">
        <i class="fas fa-receipt"></i>
        <h4>Sales Report</h4>
        <p>Analyze sales by custom ranges.</p>
      </a>
      <a href="store_daily_report.php" class="report-card">
        <i class="fas fa-store"></i>
        <h4>Store Daily Performance</h4>
        <p>Daily sales & transactions with charts.</p>
      </a>
      <a href="bestselling_products.php" class="report-card">
        <i class="fas fa-star"></i>
        <h4>Best-Selling Products</h4>
        <p>Top products by quantity & revenue.</p>
      </a>
      <a href="vat_summary.php" class="report-card">
        <i class="fas fa-percentage"></i>
        <h4>VAT Summary</h4>
        <p>VAT totals by product category.</p>
      </a>
    </div>

    <!-- Cashier Reports -->
    <h3 class="section-title"><i class="fas fa-user-check"></i> Cashier Reports</h3>
    <div class="report-grid">
      <a href="cashier_performance.php" class="report-card">
        <i class="fas fa-user-chart"></i>
        <h4>Cashier Performance</h4>
        <p>Top cashiers by sales & transactions.</p>
      </a>
    </div>

    <!-- Financial / Audit Reports -->
    <h3 class="section-title"><i class="fas fa-coins"></i> Finance & System</h3>
    <div class="report-grid">
      <a href="expenses_report.php" class="report-card">
        <i class="fas fa-money-bill-wave"></i>
        <h4>Expenses Report</h4>
        <p>Review expenses by store, type & period.</p>
      </a>
      <a href="audit_logs.php" class="report-card">
        <i class="fas fa-shield-alt"></i>
        <h4>Audit Logs</h4>
        <p>Track users, updates & login sessions.</p>
      </a>
      <a href="system_summary_report.php" class="report-card">
        <i class="fas fa-poll"></i>
        <h4>System Summary</h4>
        <p>Overview of stock, sales & user insights.</p>
      </a>
    </div>
  </div>

  <script>
    const btn = document.querySelector('.toggle-theme');
    btn.addEventListener('click', () => {
      const body = document.body;
      const current = body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
      body.setAttribute('data-theme', current);
      btn.innerHTML = current === 'dark' 
        ? '<i class="fas fa-sun"></i>' 
        : '<i class="fas fa-moon"></i>';
    });
  </script>
</body>
</html>
