<?php
session_start();

if (!isset($_SESSION["user_id"]) || $_SESSION["role"] !== "staff") {
    header("Location: ../auth/login.php");
    exit;
}

require_once '../config/database.php';

$userId    = (int)$_SESSION["user_id"];
$companyId = (int)$_SESSION["company_id"];

function safeVal($pdo, $sql, $params = [], $default = 0) {
    try { $s = $pdo->prepare($sql); $s->execute($params); return $s->fetchColumn() ?? $default; }
    catch (Throwable $e) { return $default; }
}

$m = (int)date('n');
$y = (int)date('Y');

$latestSalary   = safeVal($pdo,
    "SELECT net_pay FROM hr_salary WHERE staff_id=? AND month=? AND year=? LIMIT 1",
    [$userId, $m, $y], null);
$pendingLeave   = safeVal($pdo,
    "SELECT COUNT(*) FROM hr_leave WHERE staff_id=? AND status='pending'",[$userId]);
$approvedLeave  = safeVal($pdo,
    "SELECT COUNT(*) FROM hr_leave WHERE staff_id=? AND status='approved' AND YEAR(start_date)=?",
    [$userId, $y]);
$attendanceDays = safeVal($pdo,
    "SELECT COUNT(*) FROM hr_attendance WHERE staff_id=? AND MONTH(work_date)=? AND YEAR(work_date)=? AND status='present'",
    [$userId, $m, $y]);
$latestPayslip  = safeVal($pdo,
    "SELECT id FROM hr_payslips WHERE staff_id=? ORDER BY year DESC, month DESC LIMIT 1",
    [$userId], null);

/* staff info */
$staffInfo = $pdo->prepare("
    SELECT u.name, u.email, cs.position, cs.department, cs.joined_date
    FROM users u
    JOIN company_staff cs ON cs.user_id = u.id
    WHERE u.id = ? AND cs.company_id = ?
");
$staffInfo->execute([$userId, $companyId]);
$info = $staffInfo->fetch(PDO::FETCH_ASSOC) ?: [];
?>
<!DOCTYPE html>
<html lang="lo">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HR Portal — <?= htmlspecialchars($_SESSION["company_name"]) ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="../assets/lang.js" defer></script>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #2563eb; --surface: #ffffff; --bg: #f0f4f8;
            --border: #e2e8f0; --text: #0f172a; --muted: #64748b;
            --green: #16a34a; --green-lt: #dcfce7;
            --red: #dc2626; --red-lt: #fee2e2;
            --amber: #d97706; --amber-lt: #fef3c7;
            --blue-lt: #dbeafe; --purple-lt: #ede9fe;
            --radius: 16px; --shadow: 0 2px 14px rgba(15,23,42,.09);
        }
        body { font-family: "Noto Sans Lao","Inter",Arial,sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

        /* top bar */
        .top-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 6px rgba(15,23,42,.06); }
        .brand { display: flex; align-items: center; gap: 10px; }
        .brand-logo { width: 34px; height: 34px; background: linear-gradient(135deg,#1e3a5f,#2563eb); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
        .brand-text { font-size: 13px; font-weight: 700; color: var(--text); }
        .brand-sub  { font-size: 11px; color: var(--muted); }
        .top-right { display: flex; align-items: center; gap: 10px; }
        .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#1e3a5f,#2563eb); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
        .logout-link { display: inline-flex; align-items: center; gap: 5px; background: var(--red-lt); color: var(--red); border: 1.5px solid #fca5a5; padding: 6px 13px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; transition: all .15s; }
        .logout-link:hover { background: var(--red); color: #fff; }

        .lang-bar { display: flex; align-items: center; gap: 5px; }
        .lang-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; transition: all .15s; }
        .lang-btn:hover { border-color: var(--primary); color: var(--primary); }
        .lang-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

        .page-body { padding: 28px 32px; max-width: 1100px; margin: auto; }

        /* hero */
        .hero { background: linear-gradient(135deg,#0f2444 0%,#1e3a5f 55%,#1d4ed8 100%); border-radius: 20px; padding: 28px 32px; margin-bottom: 24px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 8px 32px rgba(15,23,42,.18); position: relative; overflow: hidden; }
        .hero::before { content:""; position: absolute; width: 260px; height: 260px; right: -50px; top: -70px; border-radius: 50%; background: rgba(255,255,255,.07); }
        .hero-left h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
        .hero-left .sub { font-size: 13px; color: rgba(255,255,255,.7); }
        .staff-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 14px 20px; min-width: 140px; text-align: center; position: relative; z-index: 1; }
        .staff-badge .val { font-size: 24px; font-weight: 800; display: block; }
        .staff-badge .lbl { font-size: 12px; color: rgba(255,255,255,.75); }

        /* stat row */
        .stat-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-bottom: 24px; }
        .stat-card { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
        .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
        .si-blue { background: var(--blue-lt); } .si-green { background: var(--green-lt); } .si-amber { background: var(--amber-lt); } .si-purple { background: var(--purple-lt); }
        .stat-info .val { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
        .stat-info .lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }

        /* section title */
        .section-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; }

        /* menu grid */
        .menu-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-bottom: 24px; }
        .menu-card { background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; }
        .menu-card::before { content:""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent,var(--primary)); opacity: 0; transition: opacity .18s; }
        .menu-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(15,23,42,.13); }
        .menu-card:hover::before { opacity: 1; }
        .card-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--icon-bg,var(--blue-lt)); }
        .menu-card h3 { font-size: 14px; font-weight: 700; }
        .menu-card p  { font-size: 12px; color: var(--muted); line-height: 1.5; }
        .c-blue   { --accent:#2563eb; --icon-bg:#dbeafe; }
        .c-green  { --accent:#16a34a; --icon-bg:#dcfce7; }
        .c-amber  { --accent:#d97706; --icon-bg:#fef3c7; }
        .c-purple { --accent:#7c3aed; --icon-bg:#ede9fe; }
        .c-pink   { --accent:#db2777; --icon-bg:#fce7f3; }

        .footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

        @media (max-width: 700px) { .page-body { padding: 16px; } .top-bar { padding: 10px 16px; } .hero { padding: 20px; } }
    </style>
</head>
<body>

<div class="top-bar">
    <div class="brand">
        <div class="brand-logo">7D</div>
        <div>
            <div class="brand-text"><?= htmlspecialchars($_SESSION["company_name"]) ?></div>
            <div class="brand-sub">Staff HR Portal</div>
        </div>
    </div>
    <div class="top-right">
        <div class="lang-bar">
            <button class="lang-btn" id="btn-lo" onclick="setLang('lo')">🇱🇦 ລາວ</button>
            <button class="lang-btn" id="btn-en" onclick="setLang('en')">🇬🇧 EN</button>
        </div>
        <div class="avatar"><?= strtoupper(mb_substr($_SESSION["name"], 0, 1)) ?></div>
        <a href="change_password.php" style="display:inline-flex;align-items:center;gap:5px;background:#eff6ff;color:#2563eb;border:1.5px solid #93c5fd;padding:6px 13px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:700;transition:all .15s;" onmouseover="this.style.background='#2563eb';this.style.color='#fff'" onmouseout="this.style.background='#eff6ff';this.style.color='#2563eb'">🔑 <span data-lo="ປ່ຽນລະຫັດ" data-en="Change PW">ປ່ຽນລະຫັດ</span></a>
        <a class="logout-link" href="../auth/logout.php">🚪 <span data-lo="ອອກ" data-en="Logout">ອອກ</span></a>
    </div>
</div>

<div class="page-body">

    <!-- Hero -->
    <div class="hero">
        <div class="hero-left">
            <h1>👋 <?= htmlspecialchars($_SESSION["name"]) ?></h1>
            <div class="sub">
                <?= htmlspecialchars($info['position'] ?? '') ?>
                <?php if ($info['department']): ?> · <?= htmlspecialchars($info['department']) ?><?php endif; ?>
            </div>
            <div class="sub" style="margin-top:6px;">
                📅 <?= date('F Y') ?>
            </div>
        </div>
        <div class="staff-badge">
            <?php if ($latestSalary !== null): ?>
                <span class="val">₭ <?= number_format((float)$latestSalary, 0) ?></span>
                <span class="lbl" data-lo="ເງິນເດືອນເດືອນນີ້" data-en="This Month Salary">ເງິນເດືອນເດືອນນີ້</span>
            <?php else: ?>
                <span class="val">—</span>
                <span class="lbl" data-lo="ຍັງບໍ່ມີຂໍ້ມູນ" data-en="No salary record yet">ຍັງບໍ່ມີຂໍ້ມູນ</span>
            <?php endif; ?>
        </div>
    </div>

    <!-- Stats -->
    <div class="stat-row">
        <div class="stat-card">
            <div class="stat-icon si-green">✅</div>
            <div class="stat-info">
                <div class="val"><?= $attendanceDays ?></div>
                <div class="lbl" data-lo="ມາວຽກເດືອນນີ້" data-en="Days Present">ມາວຽກເດືອນນີ້</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon si-amber">📋</div>
            <div class="stat-info">
                <div class="val"><?= $pendingLeave ?></div>
                <div class="lbl" data-lo="ລໍຖ້າອະນຸມັດ" data-en="Leave Pending">ລໍຖ້າອະນຸມັດ</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon si-blue">🏖️</div>
            <div class="stat-info">
                <div class="val"><?= $approvedLeave ?></div>
                <div class="lbl" data-lo="ລາພັກປີນີ້" data-en="Leave Approved">ລາພັກປີນີ້</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon si-purple">🧾</div>
            <div class="stat-info">
                <div class="val"><?= $latestPayslip ? "✓" : "—" ?></div>
                <div class="lbl" data-lo="ໃບແຈ້ງລ່າສຸດ" data-en="Latest Payslip">ໃບແຈ້ງລ່າສຸດ</div>
            </div>
        </div>
    </div>

    <!-- Menu -->
    <div class="section-title" data-lo="ເມນູຂ້ອຍ" data-en="My HR">ເມນູຂ້ອຍ / My HR</div>

    <div class="menu-grid">
        <a class="menu-card c-blue" href="my_salary.php">
            <div class="card-icon">💵</div>
            <h3 data-lo="ເງິນເດືອນຂ້ອຍ" data-en="My Salary">ເງິນເດືອນຂ້ອຍ</h3>
            <p  data-lo="ເບິ່ງຂໍ້ມູນເງິນເດືອນ, OT ຂອງຂ້ອຍ" data-en="View your salary and OT history.">ເບິ່ງຂໍ້ມູນເງິນເດືອນ, OT ຂອງຂ້ອຍ</p>
        </a>
        <a class="menu-card c-green" href="my_attendance.php">
            <div class="card-icon">🕐</div>
            <h3 data-lo="ການເຂົ້າວຽກ" data-en="My Attendance">ການເຂົ້າວຽກ</h3>
            <p  data-lo="ເບິ່ງປະຫວັດການເຂົ້າ-ອອກວຽກ" data-en="View your check-in and check-out history.">ເບິ່ງປະຫວັດການເຂົ້າ-ອອກວຽກ</p>
        </a>
        <a class="menu-card c-amber" href="my_leave.php">
            <div class="card-icon">🏖️</div>
            <h3 data-lo="ການລາພັກ" data-en="My Leave">ການລາພັກ</h3>
            <p  data-lo="ຂໍລາພັກ ແລະ ຕິດຕາມສະຖານະ" data-en="Submit leave requests and check status.">ຂໍລາພັກ ແລະ ຕິດຕາມສະຖານະ</p>
        </a>
        <a class="menu-card c-purple" href="my_allowances.php">
            <div class="card-icon">🎁</div>
            <h3 data-lo="ເບ້ຍຂ້ອຍ" data-en="My Allowances">ເບ້ຍຂ້ອຍ</h3>
            <p  data-lo="ເບິ່ງເບ້ຍຂົນສົ່ງ, ທີ່ພັກ ແລະ ອື່ນໆ" data-en="View transport, housing and other allowances.">ເບິ່ງເບ້ຍຂົນສົ່ງ, ທີ່ພັກ ແລະ ອື່ນໆ</p>
        </a>
        <a class="menu-card c-pink" href="my_payslips.php">
            <div class="card-icon">🧾</div>
            <h3 data-lo="ໃບແຈ້ງເງິນເດືອນ" data-en="My Payslips">ໃບແຈ້ງເງິນເດືອນ</h3>
            <p  data-lo="ດາວໂຫລດໃບແຈ້ງເງິນເດືອນລາຍເດືອນ" data-en="View and download monthly payslips.">ດາວໂຫລດໃບແຈ້ງເງິນເດືອນລາຍເດືອນ</p>
        </a>
    </div>

    <div class="footer-row">
        <span><?= htmlspecialchars($_SESSION["company_name"]) ?> &copy; <?= date("Y") ?></span>
        <span>Powered by <strong style="color:var(--primary);">Seven Digital</strong></span>
    </div>

</div>
</body>
</html>