<?php
session_start();
include 'config.php';

$allowed_roles = ['superadmin', 'hr', 'md'];
if (!isset($_SESSION['role']) || !in_array($_SESSION['role'], $allowed_roles)) {
    header("Location: login.php");
    exit();
}

$current_user_role = strtoupper($_SESSION['role']);
$username          = $_SESSION['username'] ?? 'MD';

$emp_stmt = $conn->query("SELECT id, CONCAT(first_name,' ',last_name) AS name FROM users WHERE role='employee' ORDER BY first_name");
$employees = $emp_stmt->fetch_all(MYSQLI_ASSOC);

$selected_date  = $_GET['report_date'] ?? date('Y-m-d');
$selected_emp   = $_GET['emp_id'] ?? 'all';
$search_keyword = $_GET['search'] ?? '';

$sql = "SELECT dr.*, CONCAT(u.first_name,' ',u.last_name) AS emp_name, u.photo
        FROM daily_reports dr JOIN users u ON dr.user_id = u.id
        WHERE dr.report_date = ?";
$params = [$selected_date]; $types = "s";

if ($selected_emp !== 'all') { $sql .= " AND dr.user_id = ?"; $params[] = $selected_emp; $types .= "i"; }
if (!empty($search_keyword)) {
    $sql .= " AND (dr.`Name of the Client` LIKE ? OR dr.Hits LIKE ? OR dr.Missed LIKE ? OR dr.Morning LIKE ?)";
    $like = "%$search_keyword%";
    $params = array_merge($params, [$like,$like,$like,$like]); $types .= "ssss";
}
$sql .= " ORDER BY dr.created_at DESC";

$stmt = $conn->prepare($sql);
$stmt->bind_param($types, ...$params);
$stmt->execute();
$reports = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>MPC · Daily Reports</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f172a;--ink-2:#334155;--muted:#94a3b8;--border:#e2e8f0;
  --surface:#ffffff;--bg:#f1f5f9;--sidebar-bg:#0f172a;--sidebar-w:260px;
  --l3:#059669;--radius:12px;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06);
  --shadow-md:0 4px 6px rgba(15,23,42,.07),0 12px 32px rgba(15,23,42,.10);
  font-family:'Sora',system-ui,sans-serif;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);position:fixed;inset:0 auto 0 0;z-index:200;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1);scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.sidebar.hidden{transform:translateX(-100%)}
.sidebar-brand{padding:24px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.brand-logo{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#6366f1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.brand-name{font-size:15px;font-weight:700;color:#fff}.brand-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:1.5px;text-transform:uppercase;margin-top:1px}
.nav-section{padding:0 12px 6px}.nav-item{list-style:none}
.nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:rgba(255,255,255,.65);text-decoration:none;font-size:13px;font-weight:500;transition:background .15s,color .15s}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}.nav-link.active{background:rgba(59,130,246,.2);color:#60a5fa}
.nav-link i{width:16px;text-align:center;font-size:13px}.nav-link.danger{color:#f87171}.nav-link.danger:hover{background:rgba(248,113,113,.12);color:#fca5a5}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.06)}
.content{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column;transition:margin .3s cubic-bezier(.4,0,.2,1)}
.content.expanded{margin-left:0}
.topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:100}
.hamburger-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);font-size:15px;flex-shrink:0;transition:background .15s}
.hamburger-btn:hover{background:var(--bg)}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.topbar-breadcrumb .current{color:var(--ink);font-weight:600}
.topbar-spacer{flex:1}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:500}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.page{padding:24px;flex:1}
.page-header{margin-bottom:20px}
.page-title{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.4px}
.page-subtitle{font-size:13px;color:var(--muted);margin-top:2px}

/* FILTER BAR */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)}
.filter-group{display:flex;flex-direction:column;gap:4px}.filter-group.grow{flex:1;min-width:180px}
.filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.filter-select,.filter-input{height:36px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font-size:13px;font-family:'Sora',sans-serif;color:var(--ink);background:var(--bg);outline:none;transition:border-color .15s;min-width:140px}
.filter-select:focus,.filter-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12);background:var(--surface)}
.filter-btn{height:36px;padding:0 16px;border-radius:8px;border:none;cursor:pointer;font-size:12px;font-weight:600;font-family:'Sora',sans-serif;display:flex;align-items:center;gap:6px;transition:background .15s}
.btn-primary-sm{background:#0f172a;color:#fff}.btn-primary-sm:hover{background:#1e293b}
.btn-ghost-sm{background:var(--bg);color:var(--ink-2);border:1px solid var(--border)}.btn-ghost-sm:hover{background:var(--border)}

/* REPORT CARDS */
.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.report-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .2s,transform .2s}
.report-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rc-header{background:var(--ink);padding:16px;display:flex;align-items:center;gap:14px}
.rc-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.2);flex-shrink:0}
.rc-name{font-size:14px;font-weight:700;color:#fff}
.rc-loc{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;display:flex;align-items:center;gap:4px}
.rc-body{padding:16px}
.section-chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:6px;margin-top:10px}
.chip-default{background:#f1f5f9;color:var(--muted)}
.chip-hits{background:#d1fae5;color:#065f46}
.chip-missed{background:#fee2e2;color:#991b1b}
.chip-carry{background:#fef3c7;color:#92400e}
.section-text{font-size:12px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap;padding:0 0 4px}
.loc-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:#2563eb;color:#fff;font-size:11px;font-weight:600;text-decoration:none;margin-bottom:12px;transition:background .15s}
.loc-btn:hover{background:#1d4ed8;color:#fff}
.rc-ts{font-size:10px;color:var(--muted);text-align:right;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.empty-state{text-align:center;padding:60px 24px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.empty-state i{font-size:40px;margin-bottom:12px;opacity:.4;display:block}
.empty-state p{font-size:14px}

@media(max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar:not(.hidden){transform:none}.content{margin-left:0}.page{padding:16px}}
</style>
</head>
<body>
<div class="layout">

<!-- SIDEBAR -->
<nav class="sidebar" id="sidebar">
  <div class="sidebar-brand">
    <div class="brand-logo">M</div>
    <div><div class="brand-name">MPC</div><div class="brand-sub">MD Portal</div></div>
  </div>
  <nav class="nav-section">
    <ul style="list-style:none">
      <li class="nav-item"><a href="dashboard_md.php"               class="nav-link"><i class="fas fa-sitemap"></i> Organisation</a></li>
      <li class="nav-item"><a href="payroll_md_dashboard.php"       class="nav-link"><i class="fas fa-money-bill"></i> Payroll</a></li>
      <li class="nav-item"><a href="daily_reports_dashboard_md.php" class="nav-link active"><i class="fas fa-chart-line"></i> Reports</a></li>
      <li class="nav-item"><a href="md_leave_approval.php"          class="nav-link"><i class="fas fa-umbrella-beach"></i> Leave Approval</a></li>
      <li class="nav-item"><a href="mdmobile.php"                   class="nav-link"><i class="fas fa-mobile-alt"></i> Attendance</a></li>
      <li class="nav-item"><a href="tasks_md.php"                   class="nav-link"><i class="fas fa-tasks"></i> Tasks</a></li>
    </ul>
  </nav>
  <div class="sidebar-footer">
    <a href="logout.php" class="nav-link danger"><i class="fas fa-sign-out-alt"></i> Logout</a>
  </div>
</nav>

<!-- CONTENT -->
<div class="content" id="content">
  <div class="topbar">
    <button class="hamburger-btn" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button>
    <div class="topbar-breadcrumb">
      <span>Reports</span>
      <i class="fas fa-chevron-right" style="font-size:10px;color:var(--border)"></i>
      <span class="current">Daily Reports</span>
    </div>
    <div class="topbar-spacer"></div>
    <div class="topbar-user">
      <div class="topbar-avatar"><?= strtoupper(substr($username,0,1)) ?></div>
      <?= htmlspecialchars($username) ?>
    </div>
  </div>

  <div class="page">
    <div class="page-header">
      <div class="page-title">Daily Reports</div>
      <div class="page-subtitle">Employee activity reports — <?= date('d M Y', strtotime($selected_date)) ?> &nbsp;·&nbsp; <?= count($reports) ?> record<?= count($reports)!=1?'s':'' ?> found</div>
    </div>

    <!-- Filter -->
    <form method="get">
      <div class="filter-bar">
        <div class="filter-group">
          <span class="filter-label">Date</span>
          <input type="date" name="report_date" value="<?= htmlspecialchars($selected_date) ?>" class="filter-input" style="min-width:160px">
        </div>
        <div class="filter-group">
          <span class="filter-label">Employee</span>
          <select name="emp_id" class="filter-select">
            <option value="all">All Employees</option>
            <?php foreach($employees as $e): ?>
            <option value="<?= $e['id'] ?>" <?= $selected_emp==$e['id']?'selected':'' ?>><?= htmlspecialchars($e['name']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="filter-group grow">
          <span class="filter-label">Search</span>
          <input type="text" name="search" value="<?= htmlspecialchars($search_keyword) ?>" class="filter-input" placeholder="Client, hits, missed…">
        </div>
        <div style="display:flex;gap:6px;align-items:flex-end">
          <button type="submit" class="filter-btn btn-primary-sm"><i class="fas fa-search"></i> Search</button>
          <a href="daily_reports_dashboard_md.php" class="filter-btn btn-ghost-sm" style="text-decoration:none"><i class="fas fa-undo"></i> Reset</a>
        </div>
      </div>
    </form>

    <!-- Reports -->
    <?php if (empty($reports)): ?>
    <div class="empty-state">
      <i class="fas fa-file-alt"></i>
      <p style="font-weight:600;margin-bottom:4px">No reports found</p>
      <p style="font-size:12px">Try a different date or employee filter.</p>
    </div>
    <?php else: ?>
    <div class="reports-grid">
      <?php foreach($reports as $r):
        $map = ($r['latitude'] && $r['longitude']) ? "https://maps.google.com/?q={$r['latitude']},{$r['longitude']}" : "";
      ?>
      <div class="report-card">
        <div class="rc-header">
          <img src="<?= $r['photo'] ?: 'uploads/default-profile.png' ?>" class="rc-avatar"
               onerror="this.src='https://ui-avatars.com/api/?name=<?= urlencode($r['emp_name']) ?>&background=334155&color=ffffff&size=56'">
          <div>
            <div class="rc-name"><?= htmlspecialchars($r['emp_name']) ?></div>
            <?php if (!empty($r['Location'])): ?>
            <div class="rc-loc"><span style="width:5px;height:5px;border-radius:50%;background:#10b981;flex-shrink:0;display:inline-block"></span><?= htmlspecialchars($r['Location']) ?></div>
            <?php endif; ?>
          </div>
        </div>
        <div class="rc-body">
          <?php if ($map): ?>
          <a href="<?= $map ?>" target="_blank" class="loc-btn"><i class="fas fa-map-marker-alt"></i> View Location</a>
          <?php endif; ?>

          <?php if (!empty($r['Morning'])): ?>
          <div class="section-chip chip-default"><i class="fas fa-sun" style="margin-right:4px"></i>Morning Plan</div>
          <div class="section-text"><?= nl2br(htmlspecialchars($r['Morning'])) ?></div>
          <?php endif; ?>

          <?php if (!empty($r['Hits'])): ?>
          <div class="section-chip chip-hits"><i class="fas fa-check-circle" style="margin-right:4px"></i>Hits</div>
          <div class="section-text"><?= nl2br(htmlspecialchars($r['Hits'])) ?></div>
          <?php endif; ?>

          <?php if (!empty($r['Missed'])): ?>
          <div class="section-chip chip-missed"><i class="fas fa-times-circle" style="margin-right:4px"></i>Missed</div>
          <div class="section-text"><?= nl2br(htmlspecialchars($r['Missed'])) ?></div>
          <?php endif; ?>

          <?php if (!empty($r['carry forward'])): ?>
          <div class="section-chip chip-carry"><i class="fas fa-forward" style="margin-right:4px"></i>Carry Forward</div>
          <div class="section-text"><?= nl2br(htmlspecialchars($r['carry forward'])) ?></div>
          <?php endif; ?>

          <div class="rc-ts"><i class="fas fa-clock" style="margin-right:4px"></i><?= date('d M Y h:i A', strtotime($r['created_at'])) ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>
</div>
</div>

<script>
function toggleSidebar(){
  document.getElementById('sidebar').classList.toggle('hidden');
  document.getElementById('content').classList.toggle('expanded');
}
</script>
</body>
</html>
<?php $conn->close(); ?>