<?php

// Only (re)start the session if it's safe to do so. If a page already closed
// its session early (session_write_close()) and started echoing HTML before
// including this file, calling session_start() again would try to resend the
// session cookie after output has begun and trigger a "headers already sent"
// warning. $_SESSION stays fully readable in memory either way, so it's safe
// to just skip the restart in that case.
if (session_status() === PHP_SESSION_NONE && !headers_sent()) {
    session_start();
}

$username = $_SESSION['username'] ?? 'Guest';
$role = strtolower(trim($_SESSION['role'] ?? ''));


$base = '/ivm/public/';

?>



<!-- SIDEBAR -->
<div id="sidebar"
class="sidebar fixed left-0 top-0 w-72 bg-gradient-to-b from-slate-900 via-blue-950 to-slate-950 text-white overflow-y-auto h-screen shadow-2xl border-r border-white/10 z-50">
    <!-- LOGO -->
    <div class="p-5 border-b border-white/10">

        <div class="flex items-center justify-between">

            <div class="flex items-center gap-3">

                <div class="w-12 h-12 rounded-2xl bg-blue-500/20 border border-blue-400/30 flex items-center justify-center text-2xl shadow-lg">
                    🏢
                </div>

                <div class="sidebar-info transition-all duration-300">

                    <h2 class="text-xl font-bold tracking-wide">
                        HR System
                    </h2>

                    <p class="text-xs text-blue-200 mt-1">
                        Staff Management
                    </p>

                </div>

            </div>

            <button
            onclick="toggleSidebar()"
            class="bg-white/10 hover:bg-white/20 border border-white/10 w-10 h-10 rounded-xl transition flex items-center justify-center">

                ☰

            </button>

        </div>

    </div>

    <!-- USER -->
    <div class="p-5 border-b border-white/10">

        <div class="flex items-center gap-3">

            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center font-bold text-lg shadow-lg">

                <?php echo strtoupper(substr($username, 0, 1)); ?>

            </div>

            <div class="sidebar-info transition-all duration-300 overflow-hidden">

                <p class="font-semibold text-white whitespace-nowrap">
                    <?php echo htmlspecialchars($username); ?>
                </p>

                <p class="text-xs text-blue-200 capitalize">
                    <?php echo htmlspecialchars($role); ?>
                </p>

            </div>

        </div>

    </div>

    <!-- MENU -->
    <div class="p-4 space-y-2">

        <!-- SECTION -->
        <p class="sidebar-info text-xs uppercase tracking-widest text-blue-300 mb-3 px-3">
            Main Menu
        </p>

        <!-- DASHBOARD -->
        <?php if($role === 'admin' || $role === 'superadmin'): ?>

            <a href="<?= $base ?>dashboard.php"
            class="sidebar-link flex items-center gap-4 px-4 py-3 rounded-2xl hover:bg-white/10 transition group">

                <span class="text-2xl">
                    📊
                </span>

                <span class="sidebar-info font-medium">
                    Dashboard
                </span>

            </a>

        <?php endif; ?>

        <!-- ATTENDANCE -->
<div>

    <button
    onclick="toggleSubmenu('attendance-sub', 'attendance-arrow')"
    class="w-full sidebar-link flex items-center justify-between px-4 py-3 rounded-2xl hover:bg-white/10 transition">

        <div class="flex items-center gap-4">

            <span class="text-2xl">
                🕒
            </span>

            <span class="sidebar-info font-medium">
                Attendance
            </span>

        </div>

        <span id="attendance-arrow"
        class="sidebar-info text-sm transition">
            ▼
        </span>

    </button>

    <div id="attendance-sub"
    class="hidden ml-4 mt-2 space-y-2">

        <?php if($role === 'superadmin'): ?>

            <a href="<?= $base ?>attendance.php"
            class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

                <span>📅</span>

                <span class="sidebar-info">
                    Daily Attendance
                </span>

            </a>

            <!-- ATTENDANCE RECORDS (ADMIN ONLY) -->
                <a href="<?= $base ?>attendance/attendance_records.php"
                class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

                    <span>📈</span>

                    <span class="sidebar-info">
                        Attendance Records
                    </span>

                </a>

                    <a href="<?= $base ?>shift.php"
                    class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

                        <span>⏰</span>

                        <span class="sidebar-info">
                            Shift
                        </span>

                    </a>

                    <?php endif; ?>

            </div>

        </div> 


<!-- DEPARTMENT -->
<div>

    <button
    onclick="toggleSubmenu('department-sub', 'department-arrow')"
    class="w-full sidebar-link flex items-center justify-between px-4 py-3 rounded-2xl hover:bg-white/10 transition">

        <div class="flex items-center gap-4">

            <span class="text-2xl">
                🏬
            </span>

            <span class="sidebar-info font-medium">
                Department
            </span>

        </div>

        <span id="department-arrow"
        class="sidebar-info text-sm transition">
            ▼
        </span>

    </button>

    <div id="department-sub"
    class="hidden ml-4 mt-2 space-y-2">

        <?php if(in_array($role, ['admin', 'superadmin', 'manager'])): ?>

        <a href="<?= $base ?>department/department_schedule.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>📁</span>
            <span class="sidebar-info">
                Schedule
            </span>

        </a>
          <?php endif; ?>
 <!-- Admin & Superadmin only -->
    <?php if(in_array($role, ['admin', 'superadmin'])): ?>

        <a href="<?= $base ?>department/departments.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                Departments
            </span>

        </a>

        <a href="<?= $base ?>department/department_settings.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                Staff Managment
            </span>

        </a>

        <?php endif; ?>

      

    </div>

</div>



<!-- ESS -->
<div>

    <button
    onclick="toggleSubmenu('employee-sub', 'employee-arrow')"
    class="w-full sidebar-link flex items-center justify-between px-4 py-3 rounded-2xl hover:bg-white/10 transition">

        <div class="flex items-center gap-4">

            <span class="text-2xl">
                🏬
            </span>

            <span class="sidebar-info font-medium">
                My portal
            </span>

        </div>

        <span id="employee-arrow"
        class="sidebar-info text-sm transition">
            ▼
        </span>

    </button>

    <div id="employee-sub"
    class="hidden ml-4 mt-2 space-y-2">

        <?php if(in_array($role, ['admin', 'superadmin', 'manager','staff'])): ?>

        <a href="<?= $base ?>ess/dashboard.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>📁</span>
            <span class="sidebar-info">
                Dashboard
            </span>

        </a>
           
        <a href="<?= $base ?>ess/my_schedule.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Schedule
            </span>

        </a>

        <a href="<?= $base ?>ess/my_attendance.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Attendance
            </span>

        </a>

        <a href="<?= $base ?>ess/my_leave.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Leave
            </span>

        </a>

        <a href="<?= $base ?>ess/my_overtime.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Overtime
            </span>

        </a>

        <a href="<?= $base ?>ess/my_payslips.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Payslips
            </span>

        </a>

        <a href="<?= $base ?>ess/my_loans.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Loans
            </span>

        </a>

        <a href="<?= $base ?>ess/my_assets.php"
        class="submenu-link flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/10 transition">

            <span>➕</span>
            <span class="sidebar-info">
                My Assets
            </span>

        </a>

        <?php endif; ?>

      

    </div>

</div>

         

        <!-- SETTINGS -->
        <?php if($role === 'superadmin'): ?>

        <a href="settings.php"
        class="sidebar-link flex items-center gap-4 px-4 py-3 rounded-2xl hover:bg-white/10 transition">

            <span class="text-2xl">
                ⚙️
            </span>

            <span class="sidebar-info font-medium">
                Settings
            </span>

        </a>

        <?php endif; ?>

        <!-- LOGOUT -->
        <div class="pt-6">

            <a href="<?= $base ?>logout.php"
            class="flex items-center gap-4 px-4 py-3 rounded-2xl bg-red-500/10 hover:bg-red-500/20 border border-red-400/20 transition">

                <span class="text-2xl">
                    🚪
                </span>

                <span class="sidebar-info font-medium text-red-100">
                    Logout
                </span>

            </a>

        </div>

    </div>

</div>

<style>

.sidebar-collapsed{
    width: 90px !important;
}

.sidebar-collapsed .sidebar-info{
    opacity:0;
    width:0;
    overflow:hidden;
}

.sidebar-collapsed .sidebar-link,
.sidebar-collapsed .submenu-link{
    justify-content:center;
}

.sidebar-collapsed #attendance-arrow{
    display:none;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.15);
    border-radius:20px;
}

@media print {

    #sidebar,
    .sidebar{
        display:none !important;
    }

}

.content-expanded{
    margin-left:288px;
    transition:all .3s ease;
}

.content-collapsed{
    margin-left:90px;
    transition:all .3s ease;
}

</style>

<script>

function toggleSubmenu(id, arrowId) {

    const sidebar =
        document.getElementById('sidebar');

    if (sidebar.classList.contains('sidebar-collapsed')) {
        return;
    }

    const submenu =
        document.getElementById(id);

    const arrow =
        document.getElementById(arrowId);

    if (submenu.classList.contains('hidden')) {

        submenu.classList.remove('hidden');

        arrow.style.transform = 'rotate(180deg)';

    } else {

        submenu.classList.add('hidden');

        arrow.style.transform = 'rotate(0deg)';
    }
}

function toggleSidebar() {

    const sidebar =
        document.getElementById('sidebar');

    sidebar.classList.toggle('sidebar-collapsed');

    const main =
        document.getElementById('main-content');

    if(main){

        if(sidebar.classList.contains('sidebar-collapsed')){

            main.classList.remove('content-expanded');
            main.classList.add('content-collapsed');

        }else{

            main.classList.remove('content-collapsed');
            main.classList.add('content-expanded');
        }
    }

    if (sidebar.classList.contains('sidebar-collapsed')) {

        document
            .querySelectorAll('[id$="-sub"]')
            .forEach(menu => {

                menu.classList.add('hidden');

            });

        document
            .querySelectorAll('[id$="-arrow"]')
            .forEach(arrow => {

                arrow.style.transform = 'rotate(0deg)';

            });
    }
}

</script>

<script src="<?= $base ?>components/ajax-nav.js" defer></script>