<?php
// ADMIN_BASE_URL example:
// define('ADMIN_BASE_URL', 'http://localhost/nwx/admin/');
?>

<!-- Begin Header -->
<header class="app-header" id="appHeader">
    <div class="container-fluid w-100">
        <div class="d-flex align-items-center">

            <!-- LEFT -->
            <div class="me-auto">
                <div class="d-inline-flex align-items-center gap-5">
                    <a href="index.php" class="fs-18 fw-semibold">
                        <img height="30" class="header-sidebar-logo-default d-none" src="<?= ADMIN_BASE_URL ?>assets/images/logo-dark.png" alt="Logo">
                        <img height="30" class="header-sidebar-logo-light d-none" src="<?= ADMIN_BASE_URL ?>assets/images/logo-light.png" alt="Logo">
                        <img height="30" class="header-sidebar-logo-small d-none" src="<?= ADMIN_BASE_URL ?>assets/images/logo-md.png" alt="Logo">
                        <img height="30" class="header-sidebar-logo-small-light d-none" src="<?= ADMIN_BASE_URL ?>assets/images/logo-md-light.png" alt="Logo">
                    </a>

                    <!-- SIDEBAR TOGGLE -->
                    <button type="button"
                            class="vertical-toggle btn btn-light-light text-muted icon-btn fs-5 rounded-pill"
                            id="toggleSidebar">
                        <i class="bi bi-arrow-bar-left header-icon"></i>
                    </button>

                    <!-- HORIZONTAL TOGGLE -->
                    <button type="button"
                            class="horizontal-toggle btn btn-light-light text-muted icon-btn fs-5 rounded-pill d-none"
                            id="toggleHorizontal">
                        <i class="ri-menu-2-line header-icon"></i>
                    </button>
                </div>
            </div>

            <!-- RIGHT -->
            <div class="flex-shrink-0 d-flex align-items-center gap-1">

                <!-- SEARCH BUTTON -->
                <button type="button"
                        class="btn header-btn d-none d-md-block"
                        data-bs-toggle="modal"
                        data-bs-target="#exampleModal">
                    <i class="bi bi-search"></i>
                </button>

                <!-- DARK MODE -->
                <div class="dark-mode-btn" id="toggleMode">
                    <button class="btn header-btn active" id="lightModeBtn">
                        <i class="bi bi-brightness-high"></i>
                    </button>
                    <button class="btn header-btn" id="darkModeBtn">
                        <i class="bi bi-moon-stars"></i>
                    </button>
                </div>

                <!-- PROFILE DROPDOWN -->
                <div class="dropdown pe-dropdown-mega d-none d-md-block">
                    <button class="header-profile-btn btn gap-1 text-start"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false">

                        <span class="header-btn btn position-relative avatar-md">
                            <img src="<?= ADMIN_BASE_URL ?>assets/images/avatar/avatar-10.jpg"
                                 class="img-fluid avatar-md rounded-circle"
                                 alt="Avatar">
                            <span class="position-absolute translate-middle badge border border-light rounded-circle bg-success">
                                <span class="visually-hidden">online</span>
                            </span>
                        </span>

                        <div class="d-none d-lg-block pe-2">
                            <span class="d-block mb-0 fs-13 fw-semibold"
                                  id="headerEmployeeName">Loading...</span>
                            <span class="d-block mb-0 fs-12 text-muted"
                                  id="headerEmployeeRole">Loading...</span>
                        </div>
                    </button>

                    <div class="dropdown-menu dropdown-mega-sm header-dropdown-menu p-3">

                        <div class="border-bottom pb-2 mb-2 d-flex align-items-center gap-2">
                            <img src="<?= ADMIN_BASE_URL ?>assets/images/avatar/avatar-10.jpg"
                                 class="avatar-md" alt="">
                            <div>
                                <h6 class="mb-0 lh-base" id="dropdownEmployeeName">Loading...</h6>
                                <p class="mb-0 fs-13 text-muted" id="dropdownEmployeeEmail">Loading...</p>
                            </div>
                        </div>

                        <ul class="list-unstyled mb-1 border-bottom pb-1">
                            <li>
                                <a class="dropdown-item" href="profile.php">
                                    <i class="bi bi-person me-1"></i> View Profile
                                </a>
                            </li>
                        </ul>

                        <ul class="list-unstyled mb-0">
                            <li>
                                <a class="dropdown-item" href="logout.php">
                                    <i class="bi bi-box-arrow-right me-1"></i> Sign Out
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
                <!-- END PROFILE -->

            </div>
        </div>
    </div>
</header>
<!-- END Header -->

<!-- SEARCH MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 bg-transparent">
            <div class="d-flex justify-content-between align-items-center bg-body">
                <div class="d-flex align-items-center border-0 px-3">
                    <i class="bi bi-search me-2"></i>
                    <input class="d-flex w-full py-3 bg-transparent border-0 focus-ring"
                           placeholder="Search Here.."
                           autocomplete="off">
                </div>
                <button type="button" class="btn-close pe-3" data-bs-dismiss="modal"></button>
            </div>
        </div>
    </div>
</div>

<!-- HEADER DATA SCRIPT -->
<script>
document.addEventListener('DOMContentLoaded', function () {

    fetch('<?= ADMIN_BASE_URL ?>api/auth/me.php', {
        credentials: 'include',
        headers: { 'Accept': 'application/json' }
    })
    .then(res => res.json())
    .then(response => {

        // ✅ MATCHES YOUR API
        if (response.status !== 'success') {
            console.error('ME API error:', response);
            return;
        }

        const emp = response.data.employee;
        const fullName = emp.first_name + ' ' + emp.last_name;

        document.getElementById('headerEmployeeName').textContent = fullName;
        document.getElementById('headerEmployeeRole').textContent = emp.role_name;
        document.getElementById('dropdownEmployeeName').textContent = fullName;
        document.getElementById('dropdownEmployeeEmail').textContent = emp.email;

        // Optional dashboard greeting
        if (document.getElementById('employeeName')) {
            document.getElementById('employeeName').textContent = fullName;
        }
    })
    .catch(err => {
        console.error('Header profile fetch failed:', err);
    });

});
</script>

<script>
let searchTimer = null;

document.getElementById('globalSearchInput')?.addEventListener('input', function () {
    const query = this.value.trim();
    const resultsBox = document.getElementById('searchResults');

    if (query.length < 2) {
        resultsBox.innerHTML = '';
        return;
    }

    clearTimeout(searchTimer);

    searchTimer = setTimeout(() => {
        fetch(`<?= ADMIN_BASE_URL ?>api/search/global.php?q=${encodeURIComponent(query)}`, {
            credentials: 'include'
        })
        .then(res => res.json())
        .then(response => {
            if (response.status !== 'success') return;

            let html = '';

            if (response.data.employees?.length) {
                html += `<h6 class="mt-3">Employees</h6><ul class="list-group">`;
                response.data.employees.forEach(emp => {
                    html += `
                        <li class="list-group-item">
                            <a href="employee-view.php?id=${emp.id}">
                                ${emp.first_name} ${emp.last_name}
                                <small class="text-muted">(${emp.email})</small>
                            </a>
                        </li>`;
                });
                html += `</ul>`;
            }

            if (response.data.blogs?.length) {
                html += `<h6 class="mt-3">Blogs</h6><ul class="list-group">`;
                response.data.blogs.forEach(blog => {
                    html += `
                        <li class="list-group-item">
                            <a href="blog-edit.php?id=${blog.id}">
                                ${blog.title}
                            </a>
                        </li>`;
                });
                html += `</ul>`;
            }

            resultsBox.innerHTML = html || '<p class="text-muted mt-3">No results found</p>';
        });
    }, 300); // debounce
});
</script>

