<?php
include "../config/koneksi.php";
include "../middleware/auth.php";
include "../config/komplain_workflow.php";

sikompro_require_role('pelaksana');

$userId = (int) $_SESSION['user_id'];
$profileUser = komplain_user_profile($conn, $userId);

if (isset($_POST['mark_all_read'])) {
    komplain_mark_notifications_read($conn, 'pelaksana');
    header("Location: notif.php?msg=semua_dibaca");
    exit;
}

$viewFilter = isset($_GET['filter']) && strtolower(trim((string) $_GET['filter'])) === 'unread' ? 'unread' : 'all';
$notifCount = komplain_notification_count($conn, 'pelaksana');
$notifications = komplain_recent_notifications($conn, 'pelaksana', 50, null, $viewFilter === 'unread');
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notifikasi Pelaksana | PT. ALVINDO</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../assets/sikompro-ux.css">
<style>
.notif-page{
  background:
    radial-gradient(circle at top left, var(--sikompro-page-bg-accent, rgba(14,165,233,.18)), transparent 34%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--sikompro-page-bg-accent, rgba(14,165,233,.18)) 70%, transparent), transparent 30%),
    linear-gradient(180deg, var(--sikompro-page-bg-top, #06111f) 0%, var(--sikompro-page-bg-bottom, #0f1f3d) 100%);
  color:var(--sikompro-ink, #eef5ff);
}
.notif-page .content-wrapper{background:transparent !important;color:var(--sikompro-ink, #eef5ff)}
.notif-page .hero,
.notif-page .card{
  border:1px solid var(--sikompro-line, rgba(148,163,184,.16));
  border-radius:20px;
  box-shadow:0 16px 34px rgba(2,8,23,.16);
  background:var(--sikompro-surface, rgba(9,17,32,.94));
  color:var(--sikompro-ink, #eef5ff);
}
.notif-page .hero{padding:24px;margin-bottom:18px}
.notif-page .hero p,
.notif-page .notif-time,
.notif-page .text-muted{
  color:var(--sikompro-muted, rgba(226,232,240,.78)) !important;
}
.notif-page .notif-item.unread{
  background:color-mix(in srgb, var(--sikompro-surface) 88%, var(--sikompro-page-bg-accent) 12%);
}
.notif-page .main-header .nav-link[data-widget="pushmenu"],
.notif-page [data-theme-toggle],
.notif-page .mobile-dashboard-nav a,
.notif-page .mobile-dashboard-nav button,
.notif-page .dashboard-back-button{
  position:relative;
  z-index:25;
  pointer-events:auto;
  touch-action:manipulation;
}
.notif-page .btn{position:relative;z-index:4}
@media (max-width:576px){
  .notif-page .hero{padding:18px}
  .notif-page .content-wrapper{padding:12px!important}
  .notif-page .hero .btn{width:100%;margin-bottom:8px}
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed dashboard-shell notif-page">
<div class="wrapper">
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="dashboard.php" class="brand-link text-center">PT. ALVINDO</a>
<div class="sidebar">
<div class="sidebar-profile">
<img src="<?= komplain_profile_photo_url($profileUser) ?>" alt="Foto profil">
<div class="mt-2 font-weight-bold"><?= htmlspecialchars($profileUser['username']) ?></div>
<small><?= htmlspecialchars(ucfirst($profileUser['role'])) ?></small>
</div>
<ul class="nav nav-pills nav-sidebar flex-column">
<li class="nav-item"><a href="dashboard.php" class="nav-link"><i class="nav-icon fas fa-home"></i> Dashboard</a></li>
<li class="nav-item"><a href="data_komplain.php?filter=total" class="nav-link"><i class="nav-icon fas fa-table"></i> Data Komplain</a></li>
<li class="nav-item"><a href="data_absensi.php" class="nav-link"><i class="nav-icon fas fa-users"></i> Data Absensi</a></li>
<li class="nav-item"><a href="gaji.php" class="nav-link"><i class="nav-icon fas fa-money-bill-wave"></i> Gaji</a></li>
<li class="nav-item"><a href="users.php" class="nav-link"><i class="nav-icon fas fa-user-cog"></i> Akses User</a></li>
<li class="nav-item"><a href="profil.php" class="nav-link"><i class="nav-icon fas fa-user-circle"></i> Profil Pengguna</a></li>
<li class="nav-item"><a href="notif.php" class="nav-link active"><i class="nav-icon fas fa-bell"></i> Notifikasi</a></li>
<li class="nav-item"><a href="cetak_pdf.php" class="nav-link"><i class="nav-icon fas fa-print"></i> Cetak PDF</a></li>
<li class="nav-item"><a href="../middleware/logout.php" class="nav-link"><i class="nav-icon fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</div>
</aside>
<div class="content-wrapper p-3">
<a href="dashboard.php" class="dashboard-back-button mb-3"><i class="fas fa-arrow-left"></i><span>Kembali</span></a>
<div class="hero d-flex justify-content-between align-items-center flex-wrap" style="gap:12px;">
<div>
<h4 class="mb-1">Notifikasi Pelaksana</h4>
<p class="mb-0">Lihat komplain baru, revisi teknisi, dan hasil yang menunggu tindak lanjut.</p>
</div>
<div class="d-flex" style="gap:10px; flex-wrap:wrap;">
<a href="dashboard.php" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Dashboard</a>
<a href="notif.php?filter=all" class="btn btn-light <?= $viewFilter === 'all' ? 'active' : '' ?>"><i class="fas fa-list"></i> Semua</a>
<a href="notif.php?filter=unread" class="btn btn-warning <?= $viewFilter === 'unread' ? 'active' : '' ?>"><i class="fas fa-bell"></i> Belum Dibaca</a>
<form method="post" class="d-inline">
<button type="submit" name="mark_all_read" class="btn btn-primary"><i class="fas fa-check-double"></i> Tandai Semua Dibaca (<?= $notifCount ?>)</button>
</form>
</div>
</div>

<?php if (isset($_GET['msg'])): ?>
<div class="alert alert-success"><?= htmlspecialchars($_GET['msg']) ?></div>
<?php endif; ?>

<?php if (empty($notifications)): ?>
<div class="card">
<div class="card-body text-center text-muted py-5">
<i class="fas fa-bell fa-2x mb-3"></i>
<div>Belum ada notifikasi untuk pelaksana.</div>
</div>
</div>
<?php else: ?>
<?php foreach ($notifications as $notif): ?>
<div class="card notif-item <?= (int) $notif['is_read'] === 0 ? 'unread' : '' ?>">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start flex-wrap" style="gap:10px;">
<div>
<h5 class="mb-1"><?= htmlspecialchars($notif['judul']) ?></h5>
<div class="text-muted"><?= nl2br(htmlspecialchars($notif['pesan'])) ?></div>
</div>
<div class="d-flex align-items-center" style="gap:8px; flex-wrap:wrap;">
<span class="badge badge-<?= (int) $notif['is_read'] === 0 ? 'warning' : 'success' ?>"><?= (int) $notif['is_read'] === 0 ? 'Baru' : 'Dibaca' ?></span>
<?php $targetUrl = komplain_notification_target_url($notif, 'pelaksana'); ?>
<?php if ($targetUrl !== ''): ?>
<a class="btn btn-sm btn-outline-primary" href="<?= htmlspecialchars($targetUrl) ?>"><i class="fas fa-eye"></i> Buka Komplain</a>
<?php endif; ?>
</div>
</div>
<div class="notif-time mt-2"><?= htmlspecialchars($notif['created_at']) ?></div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php include '../partials/mobile_nav.php'; ?>
<script src="../assets/sikompro-theme.js?v=20260722.11"></script>
</body>
</html>



