<header class="page-header" role="banner">
    <!-- we need this logo when user switches to nav-function-top -->
    <div class="page-logo">
        <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
            <img src="assets/img/logo.png" alt="" aria-roledescription="logo">
            <span class="page-logo-text mr-1">Don Publications</span>
            <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
            <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
        </a>
    </div>
    <!-- DOC: nav menu layout change shortcut -->
    <div class="hidden-md-down dropdown-icon-menu position-relative">
        <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation">
            <i class="ni ni-menu"></i>
        </a>
        <ul>
            <li>
                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
                    <i class="ni ni-minify-nav"></i>
                </a>
            </li>
            <li>
                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation">
                    <i class="ni ni-lock-nav"></i>
                </a>
            </li>
        </ul>
    </div>
    <!-- DOC: mobile button appears during mobile width -->
    <div class="hidden-lg-up">
        <a href="#" class="header-btn btn press-scale-down" data-action="toggle" data-class="mobile-nav-on">
            <i class="ni ni-menu"></i>
        </a>
    </div>
    <div class="search">
        <form class="app-forms hidden-xs-down" role="search" action="" autocomplete="off">
            <input type="text" id="search-field" placeholder="Search for invoice" class="form-control" tabindex="1">
            <a href="#" onclick="return false;" class="btn-danger btn-search-close js-waves-off d-none" data-action="toggle" data-class="mobile-search-on">
                <i class="fal fa-times"></i>
            </a>
        </form>
    </div>
    <div class="ml-auto d-flex">
        <!-- activate app search icon (mobile) -->
        <div class="hidden-sm-up">
            <a href="#" class="header-icon" data-action="toggle" data-class="mobile-search-on" data-focus="search-field" title="Search">
                <i class="fal fa-search"></i>
            </a>
        </div>
        <!-- app settings -->
        <!-- app message -->
        <!-- app notification -->
        <div>
                <a href="#" class="header-icon" data-toggle="dropdown" title="new requests">
                    <i class="fal fa-bell"></i>
                    <?php if($system_request_notification):?>
                        <span class="badge badge-icon update-notification-counter"><span styl="color:#FF4341 !important;">!</span></span>
                    <?php endif ?>
                    
                </a>
            <div class="dropdown-menu dropdown-menu-animated dropdown-xl">
                <div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top mb-2">
                    <h4 class="m-0 text-center color-white">
                        <small class="mb-0 opacity-80">User Notifications</small>
                    </h4>
                </div>
                <ul class="nav nav-tabs nav-tabs-clean" role="tablist">
                    <!-- <li class="nav-item">
                        <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-messages" data-i18n="drpdwn.messages">Messages</a>
                    </li> -->
                    <li class="nav-item">
                        <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-feeds" data-i18n="drpdwn.feeds">Requests</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-events" data-i18n="drpdwn.events">Events</a>
                    </li> -->
                </ul>
                <div class="tab-content tab-notification">
                    <div class="tab-pane active p-3 text-center">
                        <h5 class="mt-4 pt-4 fw-500">
                            <span class="d-block fa-3x pb-4 text-muted">
                                <i class="ni ni-arrow-up text-gradient opacity-70"></i>
                            </span> Select a tab above to activate
                            <small class="mt-3 fs-b fw-400 text-muted">
                                This blank page message helps protect your privacy, or you can show the first message here automatically through
                                <a href="#">settings page</a>
                            </small>
                        </h5>
                    </div>
                    <div class="tab-pane" id="tab-messages" role="tabpanel">
                        <div class="custom-scroll h-100">
                            <ul class="notification">
                                <!-- <li class="unread">
                                    <a href="#" class="d-flex align-items-center">
                                        <span class="status mr-2">
                                            <span class="profile-image rounded-circle d-inline-block" style="background-image:url('assets/img/demo/avatars/avatar-c.png')"></span>
                                        </span>
                                        <span class="d-flex flex-column flex-1 ml-1">
                                            <span class="name">Melissa Ayre <span class="badge badge-primary fw-n position-absolute pos-top pos-right mt-1">INBOX</span></span>
                                            <span class="msg-a fs-sm">Re: New security codes</span>
                                            <span class="msg-b fs-xs">Hello again and thanks for being part...</span>
                                            <span class="fs-nano text-muted mt-1">56 seconds ago</span>
                                        </span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-feeds" role="tabpanel">
                        <div class="custom-scroll h-100">
                            <ul class="notification update-notification">
                                <?php if($system_request_notification):?>
                                    <?php foreach($system_request_notification as $srn):?>
                                <li class="unread">
                                    <div class="d-flex align-items-center show-child-on-hover">
                                        <span class="d-flex flex-column flex-1">
                                            <span class="name d-flex align-items-center"><?php echo $srn['notification_title'] ?> <span class="badge badge-success fw-n ml-1">New <?php echo $srn['type'] ?></span></span>
                                            <span class="msg-a fs-sm">
                                                <?php echo $srn['notification_message'] ?>
                                            </span>
                                            <span class="fs-nano text-muted mt-1"><?php echo time_elapsed_string($srn['notification_created_at'],false) ?></span>
                                        </span>
                                        <div class="show-on-hover-parent position-absolute pos-right requests_btn_section pos-bottom p-3">
                                        <?php if($srn['type']=="Request"):?>
                                        <a href="item_request_approval.php" class="btn btn-xs btn-info" title="View"  id="view_orders-<?php echo $srn['notification_id'] ?>" ><i class="fal fa-eye"></i> View</a>
                                        <?php endif?>
                                        </div>
                                        <div class="show-on-hover-parent position-absolute pos-right requests_info_section d-none pos-bottom p-3"></div>
                                    </div>
                                </li>
                                    <?php endforeach ?>
                                <?php endif ?>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-events" role="tabpanel">
                        <div class="d-flex flex-column h-100">
                            <div class="h-auto">
                            </div>
                            <div class="flex-1 custom-scroll">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="py-2 px-3 bg-faded d-block rounded-bottom text-right border-faded border-bottom-0 border-right-0 border-left-0">
                    <!-- <a href="#" class="fs-xs fw-500 ml-auto">view all notifications</a> -->
                </div>
            </div>
        </div>
        <!-- app user menu -->
        <!-- app user menu -->
        <div>
            <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" class="header-icon d-flex align-items-center justify-content-center ml-2">
                <img src="pictures/<?php echo $_SESSION['employee_picture'] ?>" class="dp profile-image rounded-circle" alt="Dr. Codex Lantern">
                <!-- you can also add username next to the avatar with the codes below:
									<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
									<i class="ni ni-chevron-down hidden-xs-down"></i> -->
            </a>
            <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
                <div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
                    <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                        <span class="mr-2">
                            <img src="pictures/<?php echo $_SESSION['employee_picture'] ?>" class="dp rounded-circle profile-image" alt="Dr. Codex Lantern">
                        </span>
                        <div class="info-card-text">
                            <div class="fs-lg text-truncate text-truncate-lg"><?php echo $_SESSION['employee_name'] ?></div>
                            <span class="text-truncate text-truncate-md opacity-80"><?php echo $_SESSION['employee_email'] ?></span>
                        </div>
                    </div>
                </div>
                <div class="dropdown-divider m-0"></div>
                <a href="profile.php" class="dropdown-item">
                    <span data-i18n="drpdwn.profile">Profile</span>
                </a>
                <a href="login/change_password.php" class="dropdown-item">
                    <span data-i18n="drpdwn.change_password">Change Password</span>
                </a>
                <a href="#" class="dropdown-item" data-action="app-fullscreen">
                    <span data-i18n="drpdwn.fullscreen">Fullscreen</span>
                    <i class="float-right text-muted fw-n">F11</i>
                </a>
                <a href="#" class="dropdown-item" data-action="app-print">
                    <span data-i18n="drpdwn.print">Print</span>
                    <i class="float-right text-muted fw-n">Ctrl + P</i>
                </a>
                <div class="dropdown-divider m-0"></div>
                <a class="dropdown-item fw-500 pt-3 pb-3" href="login/logout.php">
                    <span data-i18n="login/logout.php">Logout</span>
                    <span class="float-right fw-n">&commat;<?php echo $_SESSION['employee_email'] ?></span>
                </a>
            </div>
        </div>
    </div>
</header>


<!-- Modal center Small -->
<!-- <div class="modal fade" id="view_item_request" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body" style="">
                <center><h5 class="modal-title" style="font-weight:bolder">Item Request Details</h5></center>
                <hr>
                        <div class="row">
                            <div class="col-md-2" style=""></div>
                            <div class="col-md-8" style="">
                            <ol class="order_content"></ol><hr>
                            <center>
                            <div class="summary">
                            
                            </div>
                            </center>
                            </div>
                            <div class="col-md-2" style=""></div>
                        </div>
            </div>
        </div>
    </div>
</div> -->