<?php 
session_start();
if(!isset($_SESSION['id_user'])){
    header("Location:index.php");
    exit;
}
include "config.php";
$role = strtolower(trim($_SESSION['role'])); 
$full_name = $_SESSION['full_name'];
$initials = strtoupper(implode('', array_map(fn($w) => $w[0], explode(' ', trim($full_name)))));
$initials = substr($initials, 0, 2);
$greeting = (date('H') < 12) ? 'Bondia' : ((date('H') < 18) ? 'Botarde' : 'Bonoite');
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EmeraldFinance | Dashboard</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=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --emerald-dark: #062419;
  --emerald-main: #0a4732;
  --emerald-light: #166e51;
  --emerald-pale: #1db484;
  --emerald-soft: #f0f7f4;
  
  --gold-dark: #aa8528;
  --gold-main: #c9a84c;
  --gold-light: #f5e6bb;
  --gold-pale: #fdf7e8;

  --bg-main: #f8faf9;
  --bg-sidebar: #062419;
  --surface: #ffffff;
  --border: rgba(10, 71, 50, 0.08);
  --text-title: #041a12;
  --text-body: #3a4d46;
  --text-muted: #788c83;
  
  --shadow-sm: 0 2px 8px rgba(6, 36, 25, 0.04);
  --shadow-md: 0 12px 24px rgba(6, 36, 25, 0.06);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-body);
  min-height: 100vh;
  display: flex;
}

/* ── LAYOUT STRUCTURE ── */
.sidebar {
  width: 280px;
  background-color: var(--bg-sidebar);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 10;
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.main-content {
  margin-left: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── SIDEBAR COMPONENTS ── */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 3rem;
}

.brand-logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--gold-main), var(--gold-dark));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

.brand-logo svg { width: 20px; height: 20px; fill: none; stroke: var(--emerald-dark); stroke-width: 2.5; }
.brand-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #ffffff; font-weight: 600; line-height: 1.2; }
.brand-title span { color: var(--gold-main); display: block; font-size: 0.8rem; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }

.user-profile-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1rem;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: auto;
}

.user-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--emerald-light), var(--emerald-main));
  border: 2px solid var(--gold-main);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; color: #fff;
}

.user-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.user-name { font-weight: 600; font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.7rem; color: var(--gold-main); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.btn-logout-sidebar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.2);
  color: #ff7675; text-decoration: none;
  padding: 12px; border-radius: 12px;
  font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s ease;
}
.btn-logout-sidebar:hover { background: #e74c3c; color: #fff; }
.btn-logout-sidebar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── TOPBAR COMPONENTS ── */
.topbar {
  height: 80px;
  background: rgba(248, 250, 249, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 3rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 9;
}

.system-title { font-size: 0.95rem; font-weight: 600; color: var(--emerald-main); display: flex; align-items: center; gap: 8px; }
.system-title::before { content: ''; width: 6px; height: 6px; background: var(--gold-main); border-radius: 50%; }

.topbar-right { display: flex; align-items: center; gap: 1rem; }
.time-badge { font-size: 0.8rem; font-weight: 600; color: var(--emerald-light); background: var(--emerald-soft); padding: 6px 16px; border-radius: 30px; border: 1px solid rgba(10,71,50,0.05); letter-spacing: 0.5px; }

/* ── CONTAINER PAGE ── */
.content-body {
  padding: 3rem;
  flex: 1;
}

/* ── HERO BANNER ── */
.hero-banner {
  background: linear-gradient(135deg, var(--emerald-dark), var(--emerald-main));
  border-radius: 24px;
  padding: 2.5rem 3rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 3rem;
  display: flex; justify-content: space-between; align-items: center;
}

.hero-banner::after {
  content: ''; position: absolute; right: -5%; top: -20%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.hero-text h1 { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.hero-text h1 em { font-style: italic; color: var(--gold-main); }
.hero-text p { font-size: 0.95rem; color: rgba(255,255,255,0.7); font-weight: 400; }

.hero-widget {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1rem 1.5rem; border-radius: 16px;
  backdrop-filter: blur(4px); text-align: right;
}
.widget-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-main); font-weight: 700; margin-bottom: 4px; }
.widget-val { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.5px; }

/* ── SECTIONS & CARDS ── */
.section-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 1.5rem;
}
.section-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }
.section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.grid-menus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 4rem;
}

.card-link {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  position: relative; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: var(--shadow-sm);
}

.card-link:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 71, 50, 0.15);
  box-shadow: var(--shadow-md);
}

.card-icon-wrapper {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}

.icon-box {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--emerald-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--emerald-main); transition: all 0.3s ease;
}
.card-link:hover .icon-box { background: var(--emerald-main); color: #ffffff; }

.icon-box svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.arrow-box { color: var(--text-muted); opacity: 0.5; transition: all 0.3s ease; }
.card-link:hover .arrow-box { transform: translate(3px, -3px); color: var(--gold-dark); opacity: 1; }
.arrow-box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.card-link h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-title); margin-bottom: 8px; }
.card-link p { font-size: 0.88rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1.5rem; flex: 1; }

.card-tag {
  align-self: flex-start;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 6px;
  background: #f1f3f2; color: var(--text-muted);
}

/* Featured / Gold Variant */
.card-link.featured {
  background: linear-gradient(180deg, #ffffff 0%, var(--gold-pale) 100%);
  border-color: rgba(201, 168, 76, 0.2);
}
.card-link.featured .icon-box { background: var(--gold-light); color: var(--gold-dark); }
.card-link.featured:hover .icon-box { background: var(--gold-dark); color: #ffffff; }
.card-link.featured .card-tag { background: rgba(201,168,76,0.15); color: var(--gold-dark); }

/* ── FOOTER STRIP ── */
.footer-strip {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--text-muted);
}
.status-indicator { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.status-dot { width: 8px; height: 8px; background-color: #2ecc71; border-radius: 50%; box-shadow: 0 0 8px #2ecc71; }

/* ── ANIMASI ENTRANCE ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-banner, .section-header, .grid-menus { animation: fadeInUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
.section-header { animation-delay: 0.1s; }
.grid-menus { animation-delay: 0.15s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sidebar { width: 72px; padding: 2rem 0.5rem; align-items: center; }
  .brand-title, .user-info, .btn-logout-sidebar span { display: none; }
  .main-content { margin-left: 72px; }
  .user-profile-box { padding: 0.5rem; justify-content: center; }
  .topbar, .content-body { padding-left: 2rem; padding-right: 2rem; }
}

@media (max-width: 768px) {
  body { flex-direction: column; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 1.5rem; flex-direction: row; justify-content: space-between; }
  .brand { margin-bottom: 0; }
  .user-profile-box { margin-bottom: 0; display: none; }
  .main-content { margin-left: 0; }
  .topbar { padding: 0 1.5rem; }
  .content-body { padding: 1.5rem; }
  .hero-banner { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2rem; }
  .hero-widget { text-align: left; width: 100%; }
}
</style>
</head>
<body>

<!-- SIDEBAR NAVIGATION -->
<aside class="sidebar">
  <a href="dashboard.php" class="brand">
    <div class="brand-logo">
      <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
    </div>
    <div class="brand-title">
      MSSI Timor-Leste
      <span>Finansas</span>
    </div>
  </a>

  <div class="user-profile-box">
    <div class="user-avatar"><?= htmlspecialchars($initials) ?></div>
    <div class="user-info">
      <div class="user-name"><?= htmlspecialchars($full_name) ?></div>
      <div class="user-role"><?= htmlspecialchars($role) ?></div>
    </div>
  </div>

  <a href="logout.php" class="btn-logout-sidebar">
    <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
    <span>Sair (Logout)</span>
  </a>
</aside>

<!-- MAIN CONTENT AREA -->
<div class="main-content">
  
  <!-- TOPBAR -->
  <header class="topbar">
    <div class="system-title">Sistema Arkivu Finansas</div>
    <div class="topbar-right">
      <div class="time-badge" id="nav-clock">--:--:--</div>
    </div>
  </header>

  <!-- CONTENT CONTAINER -->
  <main class="content-body">
    
    <!-- HERO BANNER -->
    <section class="hero-banner">
      <div class="hero-text">
        <h1><?= htmlspecialchars($greeting) ?>,<br><em><?= htmlspecialchars($full_name) ?></em></h1>
        <p>Informasaun Transaksaun Pagamento no Jestaun Dokumentu Finanseiru.</p>
      </div>
      <div class="hero-widget">
        <div class="widget-label">Data Sistema</div>
        <div class="widget-val"><?= date('d M Y') ?></div>
      </div>
    </section>

    <!-- DINAMIS MENU GRID BERDASARKAN ROLE -->
    <?php if(in_array($role, ['admin'])): ?>
      <div class="section-header">
        <span class="section-title">Operasaun Finansas — Admin</span>
        <div class="section-line"></div>
      </div>
      <div class="grid-menus">
        <a class="card-link" href="admin/upload.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Submete Dokumentu</h3>
          <p>Hatama dokumentu finansas foun ba sistema hodi hetan prosesu validasaun no aprovosaun ofisial.</p>
          <span class="card-tag">Upload · Prosesu</span>
        </a>

        <a class="card-link" href="admin/daftar_dokumen.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Lista Pedido Dokumentu</h3>
          <p>Haree no monitorizasaun dokumentu hotu ne'ebé submete ona, inklui progresu, estadu, no data modifikasaun.</p>
          <span class="card-tag">Monitorizasaun · Log</span>
        </a>
      </div>

    <?php elseif(in_array($role, ['dfo'])): ?>
      <div class="section-header">
        <span class="section-title">Validasaun &amp; Kontrolu — DFO</span>
        <div class="section-line"></div>
      </div>
      <div class="grid-menus">
        <a class="card-link" href="/arsip-pagamento/<?= $role ?>/verifikasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Verifikasaun Integridade</h3>
          <p>Analiza no valida dokumentu finansas husi ekipa admin ho prosedura kontrolu kualidade nian.</p>
          <span class="card-tag">Verifikasaun · Valida</span>
        </a>

        <a class="card-link featured" href="/arsip-pagamento/<?= $role ?>/arsipkonfirmasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Arkivu CPV – OBl</h3>
          <p>Konfirma no arkiva pedido CPV (Cash Payment Voucher) sira ne'ebé presiza aprovosaun ofisial final.</p>
          <span class="card-tag">Arkivu · Konfirmasaun</span>
        </a>
      </div>

    <?php elseif(in_array($role, ['dct'])): ?>
      <div class="section-header">
        <span class="section-title">Validasaun &amp; Kontrolu — DCT</span>
        <div class="section-line"></div>
      </div>
      <div class="grid-menus">
        <a class="card-link" href="/arsip-pagamento/<?= $role ?>/dctverifikasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Verifikasaun Integridade</h3>
          <p>Analiza no valida dokumentu finansas husi ekipa admin ho prosedura kontrolu kualidade.</p>
          <span class="card-tag">Verifikasaun · Valida</span>
        </a>

        <a class="card-link featured" href="/arsip-pagamento/<?= $role ?>/dctarsipkonfirmasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Arkivu CPV – OBl</h3>
          <p>Konfirma no arkiva pedido CPV sira ne'ebé presiza aprovosaun ofisial final.</p>
          <span class="card-tag">Arkivu · Konfirmasaun</span>
        </a>
      </div>

    <?php elseif(in_array($role, ['arsip'])): ?>
      <div class="section-header">
        <span class="section-title">Arkivaria &amp; Repositóriu</span>
        <div class="section-line"></div>
      </div>
      <div class="grid-menus">
        <a class="card-link" href="/arsip-pagamento/arsip/arsipverifikasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Verifikasaun Arkivu</h3>
          <p>Garantia katak arkivu hotu-hotu iha kualidade, autentisidade no integridade ne'ebé loos tuir kritéria.</p>
          <span class="card-tag">Kualidade · Autentisidade</span>
        </a>

        <a class="card-link" href="/arsip-pagamento/arsip/dataarsipkonfirmasi.php">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Repositóriu Arkivu</h3>
          <p>Aksesu ba baze de dadus arkivu finansas hotu ne'ebé rai ona iha sistema sentral repo.</p>
          <span class="card-tag">Database · Aksesu</span>
        </a>
      </div>

    <?php elseif(in_array($role, ['director'])): ?>
      <div class="section-header">
        <span class="section-title">Insiitu Ezekutivu — Diretor</span>
        <div class="section-line"></div>
      </div>
      <div class="grid-menus" style="grid-template-columns: 1fr;">
        <a class="card-link featured" href="/arsip-pagamento/director/laporan.php" style="max-width: 500px;">
          <div class="card-icon-wrapper">
            <div class="icon-box">
              <svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            </div>
            <div class="arrow-box">
              <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
            </div>
          </div>
          <h3>Relatóriu Finansas</h3>
          <p>Haree resumu relatóriu ezekutivu, estatístika, no análize tendénsia finansas jerál husi sistema.</p>
          <span class="card-tag">Analytics · Relatóriu</span>
        </a>
      </div>
    <?php endif; ?>

    <!-- FOOTER STRIP -->
    <footer class="footer-strip">
      <div class="status-indicator">
        <div class="status-dot"></div>
        <span>Sistema Ativu — MSSI Secure Session</span>
      </div>
      <div>Plataforma Arkivu Finanseiru &copy; <?= date('Y') ?> MSSI Timor-Leste</div>
    </footer>

  </main>
</div>

<script>
function updateClock() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2,'0');
  const m = String(now.getMinutes()).padStart(2,'0');
  const s = String(now.getSeconds()).padStart(2,'0');
  const el = document.getElementById('nav-clock');
  if(el) el.textContent = h + ':' + m + ':' + s;
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>