<?php
require_once "config.php";

if (!isset($_SESSION['emp_id'])) {
    echo "<script>location.href='index';</script>";
}
$currentPageName = pathinfo(substr($_SERVER['PHP_SELF'], 1), PATHINFO_FILENAME);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf8" />
    <title>Employee - Jobaaj </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Coderthemes" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="https://cdn.nishtyainfotech.com/content/jobaaj/assets/img/jobaaj-favicon.ico">

    <!-- plugin css -->
    
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/colreorder/1.7.0/css/colReorder.bootstrap5.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/keytable/2.10.0/css/keyTable.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />



    <!-- plugins -->
    <link href="assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />

    <!-- select picker -->
    <link href="assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" />
    <link href="assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/multiselect/multi-select.css" rel="stylesheet" type="text/css" />

    <!-- App css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />

    <!-- <link href="assets/css/bootstrap-dark.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" /> -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<style>
    /* width */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #7e8ce9;
        border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #5369f8;
    }
</style>
<style>
    .btn-padding {
            padding: 0.2rem;
            /* padding-bottom: 0.2rem; */
        }
    .btn-filter {
            cursor: default !important;
            border-radius: 40px !important;
            background-color: #188758 !important;
        }

        .btn-filter i {
            cursor: pointer;
            margin-bottom:-2px
        }
    .cke_notifications_area{
        display: none;
    }
</style>
<style>
    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 20px;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background-color: white;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .slider-active {
        background-color: #2196F3;
        box-shadow: 0 0 1px #2196F3;
    }

    .slider-active:before {
        /* -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px); */
        right: auto;
        left: 4px;
        transition: 0.3s all ease-in-out;
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>

<style>
    .dataTables_processing{
        z-index: 99;
    }
    .dataTables_wrapper .top{
        display: flex;
        align-items: end;
        padding-bottom: 0.5rem;
    }
    .dataTables_wrapper .top label{
        margin: 0;
    }
    .dataTables_wrapper .top > div:nth-child(1){
        margin-right: 1rem;
    }
    .dataTables_wrapper .top > div:nth-child(3){
        flex:1;
    }
    div.dt-buttons {
        display: inline-flex !important;
        margin-bottom:0 !important;
    }
    .dataTables_wrapper .bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.5rem;
    }
    .dataTables_wrapper .bottom > .dataTables_info{
        padding: 0;
    }
    .dataTables_length select{
        font-weight: 400;
        color: #4b4b5a;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #e2e7f1;
        height: calc(1.5em + 0.5rem + 2px);
        padding: 0.25rem 0.5rem;
        font-size: .76562rem;
        /* line-height: 1.5; */
        border-radius: 0.2rem;
    }

    .dt-buttons button{
        font-weight: 400;
        /* color: #4b4b5a !important; */
        /* background-color: #fff !important; */
        /* background-clip: padding-box; */
        /* border: 2px solid #e2e7f1 !important; */
        /* height: calc(1.5em + 0.5rem + 2px); */
        padding: 0.5rem 0.5rem !important;
        font-size: .76562rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }
    /* .buttons-collection:hover, .buttons-collection:active{
        background-color: #fff;
        border: 1px solid #e2e7f1;
        color: #4b4b5a;
        box-shadow: none;
    } */
    @media only screen and (max-width:575px){
        .dataTables_wrapper .top{
            flex-direction: column;
            justify-content: start;
            align-items:start;
            gap:0.5rem;
        }
        .dataTables_wrapper .bottom{
            flex-direction: column;
            justify-content: start;
            align-items: start;
        }
    }
    </style>


<body>

    <script src="./cookieFunction.js"></script>

    <!-- Begin page -->
    <div id="wrapper">

        <div class="toast mb-0 px-3 text-dark" id="changesSuccessToast" style="position:fixed; top:5rem; right:0; z-index:9999; padding-top:0.7rem; padding-bottom:0.7rem; background:#aaebd3; max-width:fit-content; opacity:1; display:none;" role="alert">
            <strong>Hey ! <span id="userChangeSuccName"></span></strong> <span id="SuccessMSG"></span>
            <button type="button" class="btn btn-sm text-dark p-0" data-bs-dismiss="alert" aria-label="Close" onclick="$('#changesSuccessToast').fadeOut('slow');"><i data-feather="x"></i></button>
        </div>
        <div class="toast mb-0 px-3 text-white" id="changesFailedToast" style="position:fixed; top:5rem; right:0; z-index:9999; padding-top:0.7rem; padding-bottom:0.7rem; background:#ff8787; max-width:fit-content; opacity:1; display:none;" role="alert">
            <strong>Hey ! <span id="userChangeFailName"></span></strong> <span id="FailedMSG"></span>
            <button type="button" class="btn btn-sm text-white p-0" data-bs-dismiss="alert" aria-label="Close" onclick="$('#changesSuccessToast').fadeOut('slow');"><i data-feather="x"></i></button>
        </div>
        <script>
            function successMessage(message, name = '') {
                $("#userChangeSuccName").text(name)
                $("#SuccessMSG").text(message)
                $("#changesSuccessToast").fadeIn('slow');

                setTimeout(() => {
                    $("#changesSuccessToast").fadeOut('slow');
                }, 3000);
            }

            function failedMessage(message, name = '') {
                $("#userChangeFailName").text(name)
                $("#FailedMSG").text(message)
                $("#changesFailedToast").fadeIn('slow');

                setTimeout(() => {
                    $("#changesFailedToast").fadeOut('slow');
                }, 3000);
            }
        </script>

        <?php if(!isset($_COOKIE['birthday_strip'])){ ?>
            <?php
            $today_date = date("Y-m");
            $birthday = mysqli_query($db, "SELECT employee_id, name, dob FROM users where (COALESCE(working_status_date,'')='' or DATE_FORMAT(STR_TO_DATE(working_status_date, '%Y-%m-%d'),'%Y-%m')>='$today_date') ORDER BY name asc");
            $today = date("d-m");
            $top = 0;
            $birthdayBoy = false;
            while ($birth = mysqli_fetch_assoc($birthday)) {
                $dob = ($birth['dob']=='')? '1970' : $birth['dob'];
                $dob = date("d-m", strtotime($dob));
                if (!empty($birth['dob']) && $today == $dob && $_SESSION['emp_id']==$birth['employee_id']) {
                    $birthdayBoy = true;
                }
                if (!empty($birth['dob']) && $today == $dob && $_SESSION['emp_id']!=$birth['employee_id']) {
                    $top += 5;
            ?>
                <div class="toast mb-0 px-3 text-white" id="birthdayToast<?php echo $top; ?>" style="position:fixed; top:<?php echo $top; ?>rem; right:50%; z-index:99; padding-top:0.7rem; padding-bottom:0.6rem; background:#ff0023; max-width:fit-content; opacity:1; transform: translateX(50%); font-size:1rem;" role="alert">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center justify-content-start flex-wrap">
                            <strong>Hey&nbsp;!&nbsp;<span><?php echo str_replace(" ","&nbsp;",$_SESSION['user_name']); ?></span></strong> <span>Today&nbsp;is&nbsp;<strong><?php echo str_replace(" ","&nbsp;",$birth['name']); ?>'s&nbsp;Birthday</strong>, Wish&nbsp;him/her&nbsp;a <strong>HAPPY&nbsp;BIRTHDAY</strong></span>
                        </div>
                        <button type="button" class="btn btn-sm text-white p-0 ml-3" data-bs-dismiss="alert" aria-label="Close" onclick="$('#birthdayToast<?php echo $top; ?>').fadeOut('slow'); setCookie('birthday_strip','seen',1);"><i data-feather="x"></i></button>
                    </div>
                </div>
            <?php }} ?>
        <?php } ?>

        <?php if(!isset($_COOKIE['internship_end']) && $_SESSION['emp_id'] == 'NI04'){ ?>
            <?php
            $internship_end = mysqli_query($db, "SELECT * FROM `internship_letter` WHERE duration_end = CURRENT_DATE");
            $top = 0;
            if(mysqli_num_rows($internship_end)>0){ ?>
                <div class="toast mb-0 px-3 text-white" id="internshipEndToast" style="position:fixed; top:10rem; right:50%; z-index:99; padding-top:0.7rem; padding-bottom:0.6rem; background:#ff0023; max-width:fit-content; opacity:1; transform: translateX(50%); font-size:1rem;" role="alert">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex flex-column flex-wrap">
                            <strong>Hey&nbsp;!&nbsp;<span><?php echo str_replace(" ","&nbsp;",$_SESSION['user_name']); ?></span>, the below candidate(s) have their last day of internship today.</strong>
                            <div class="mt-3">
                                <ul>
                                    <?php while ($intern = mysqli_fetch_assoc($internship_end)) { ?>
                                        <li><?php echo str_replace(" ","&nbsp;",$intern['first_name']); ?> <?php echo str_replace(" ","&nbsp;",$intern['last_name']); ?>'s</li>
                                    <?php } ?>
                                </ul>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm text-white p-0 ml-3" data-bs-dismiss="alert" aria-label="Close" onclick="$('#internshipEndToast').fadeOut('slow'); setCookie('internship_end','seen',1);"><i data-feather="x"></i></button>
                    </div>
                </div>
        <?php } } ?>

        <?php if(!isset($_COOKIE['confetti']) && $birthdayBoy){ ?>
            <style>
                #birthday_cake{
                    position: fixed; 
                    top: 5rem; 
                    left: 50%; 
                    z-index: 99; 
                    width: 400px; 
                    transform:translateX(-50%); 
                    display:none;
                }
                @media screen and (max-width:575px){
                    #birthday_cake{
                        width: 100%;
                    }
                }
            </style>
            <img src="<?php echo $url; ?>birthday/birthday_cake.gif" id="birthday_cake" alt="">
            <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
            <script>
                var colors = ["#377DFF", "#efd430", "$ff0000"];
                let time = true;
                setTimeout(() => {
                    time = false;
                    $("#birthday_cake").fadeOut('slow');
                }, 20000);
                function frame() {
                    if (time) {
                    confetti({
                        particleCount: 3,
                        angle: 60,
                        spread: 80,
                        origin: {
                        x: 0,
                        y: 1
                        },
                        colors: colors,
                    });
                    confetti({
                        particleCount: 3,
                        angle: 120,
                        spread: 80,
                        origin: {
                        x: 1,
                        y: 1
                        },
                        colors: colors,
                    });
                    requestAnimationFrame(frame);
                    }

                }
                $("#birthday_cake").fadeIn('slow');
                frame();
                var sound = new Howl({
                    src: ['<?php echo $url; ?>birthday/Happy Birthday.mp3'],
                    html5: true,
                    volume: 1
                });
                sound.play();
                setCookie("confetti","seen",1);
            </script>
        <?php } ?>
        
        <!-- Topbar Start -->
        <div class="navbar navbar-expand flex-column flex-md-row navbar-custom">
            <div class="container-fluid">
                <!-- LOGO -->
                <a href="index" class="navbar-brand mr-0 mr-md-2 logo">
                    <span class="logo-lg">
                        <img src="https://cdn.nishtyainfotech.com/content/jobaaj/assets/svg/logos/jobaaj1.png" alt="" width="80" />
                        <!-- <span class="d-inline h5 ml-1 text-logo">Shreyu</span> -->
                    </span>
                    <span class="logo-sm">
                        <img src="https://cdn.nishtyainfotech.com/content/jobaaj/assets/svg/logos/jobaaj1.png" alt="" height="24">
                    </span>
                </a>

                <ul class="navbar-nav bd-navbar-nav flex-row list-unstyled menu-left mb-0">
                    <li class="">
                        <button class="button-menu-mobile open-left disable-btn">
                            <i data-feather="menu" class="menu-icon"></i>
                            <i data-feather="x" class="close-icon"></i>
                        </button>
                    </li>
                </ul>

                <ul class="navbar-nav flex-row ml-auto d-flex list-unstyled topnav-menu float-right mb-0">
                    <script>
                        function copy_text(id, msg='Copied Successfully!'){
                        console.log('clicked');
                            var copyText = document.getElementById(`${id}`).value;
                            navigator.clipboard.writeText(copyText)
                                .then(function() {
                                    successMessage(msg, '<?php echo $_SESSION['user_name']; ?>');
                                })
                                .catch(function(err) {
                                    failedMessage(`Error copying text: ${err}`,'<?php echo $_SESSION['user_name']; ?>');
                                });
                        }
                    </script>
                    <li class="dropdown notification-list d-flex align-items-center">
                        <!-- <a href="javascript:;" class="nav-link">
                            <div class="d-flex align-items-center justify-content-center"> -->
                                <style>
                                    .rainbow-button {
                                        display: inline-flex;
                                        align-items: center;
                                        justify-content: center;
                                        white-space: nowrap;
                                        border-radius: 0.375rem;
                                        font-size: 0.875rem;
                                        font-weight: 500;
                                        transition: all 0.2s ease;
                                        cursor: pointer;
                                        border: 0;
                                        position: relative;
                                        height: 2.5rem;
                                        padding: 0.5rem 1rem;
                                        
                                        /* Rainbow gradient backgrounds */
                                        background: linear-gradient(#0f0f0f, #12121333), linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)), linear-gradient(90deg, hsl(0, 100%, 63%), hsl(90, 100%, 63%), hsl(210, 100%, 63%), hsl(195, 100%, 63%), hsl(270, 100%, 63%));
                                        background-size: 200%;
                                        background-clip: padding-box, border-box, border-box;
                                        background-origin: border-box;
                                        border: calc(0.08 * 1rem) solid transparent;
                                        
                                        /* Animation */
                                        animation: rainbow-shift 3s linear infinite;
                                    }

                                    .rainbow-button:hover {
                                        transform: scale(1.05);
                                    }

                                    .rainbow-button:active {
                                        transform: scale(0.95);
                                    }

                                    .rainbow-button::before {
                                        content: '';
                                        position: absolute;
                                        bottom: -20%;
                                        left: 50%;
                                        z-index: 0;
                                        height: 20%;
                                        width: 60%;
                                        transform: translateX(-50%);
                                        background: linear-gradient(90deg, hsl(0,100%,63%), hsl(90,100%,63%), hsl(210,100%,63%), hsl(195,100%,63%), hsl(270,100%,63%));
                                        filter: blur(calc(0.8 * 1rem));
                                        animation: rainbow-shift 3s linear infinite;
                                    }

                                    .button-content {
                                        display: flex;
                                        align-items: center;
                                        position: relative;
                                        z-index: 0;
                                    }

                                    .github-icon {
                                        width: 1rem;
                                        height: 1rem;
                                        fill: white;
                                    }

                                    .button-text {
                                        margin-left: 0.25rem;
                                        color: white;
                                        padding: 0.25rem;
                                    }

                                    .star-section {
                                        margin-left: 0.5rem;
                                        display: flex;
                                        align-items: center;
                                        gap: 0.25rem;
                                        font-size: 0.875rem;
                                    }

                                    .star-icon {
                                        width: 1rem;
                                        height: 1rem;
                                        color: #6b7280;
                                        transition: color 0.2s ease;
                                    }

                                    .rainbow-button:hover .star-icon {
                                        color: #fcd34d;
                                    }

                                    .star-count {
                                        display: inline-block;
                                        font-variant-numeric: tabular-nums;
                                        letter-spacing: 0.05em;
                                        font-weight: 500;
                                        color: white;
                                    }

                                    @keyframes rainbow-shift {
                                        0% { background-position: 0% 50%; }
                                        100% { background-position: 200% 50%; }
                                    }
                                </style>
                                <a href="javascript:;" class="nav-link px-0" onclick="copy_text('refer_earn', 'Referral Link Copied Successfully!');" data-toggle="tooltip" data-placement="bottom" title="Refer your friends and earn ₹2,000 for every successful referral!">
                                    <button class="rainbow-button">
                                         <div class="button-content">
                                             <i class="uil uil-copy text-white"></i>
                                             <span class="button-text">Refer & Earn</span>
                                         </div>
                                         <input type="hidden" name="refer_earn" id="refer_earn" value="https://forms.jobaaj.com/forms_hiring/referral/<?php echo base64_encode(strtoupper(str_replace(" ","_", "REFER_".$_SESSION['user_name'])."_".$_SESSION['emp_id'])); ?>">
                                     </button>
                                </a>
                            <!-- </div>
                        </a> -->
                    </li>

                    <?php 
                        $curPageName = explode("/",$_SERVER['PHP_SELF']);
                        $curPageName = end($curPageName);
                        $curPageName = explode(".", $curPageName)[0];
                        // echo "<script>console.log('$curPageName');</script>";
                        if($curPageName!='404'){
    
                            $check_file = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM emp_files WHERE page='$curPageName'"));
                            // echo $check_file['id'];
                            $file_exist = mysqli_num_rows(mysqli_query($db, "SELECT * FROM files_permission WHERE `user_id`='$_SESSION[user_id]' and `permission` LIKE '%\"$check_file[id]\"%'"));
        
                            if($file_exist==0){
                                echo "<script>location.href='404';</script>";
                            }
                        }
                        
                        
                        $files_permissions = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM `files_permission` WHERE `user_id`='$_SESSION[user_id]'"))['permission'];
                        $files = json_decode($files_permissions, true);
                        // echo "<script>console.log(".json_encode($files).");</script>";
                        // print_r($files);
                        // exit();


                        $show_top_position_settings = false;
                        $top_position = mysqli_query($db, "SELECT id FROM `emp_files` WHERE position='top'");
                        while($t_p = mysqli_fetch_assoc($top_position)){
                            $file_exist = mysqli_num_rows(mysqli_query($db, "SELECT * FROM files_permission WHERE `user_id`='$_SESSION[user_id]' and `permission` LIKE '%\"$t_p[id]\"%'"));
        
                            if($file_exist>0){
                                $show_top_position_settings = true;
                                break;
                            }
                        }

                    if($show_top_position_settings){
                    ?>
                    <li class="dropdown notification-list" data-toggle="tooltip" data-placement="left" title="Settings">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                            aria-expanded="false">
                            <i data-feather="settings"></i>
                            <!-- <span class="noti-icon-badge"></span> -->
                        </a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-lg">

                            <!-- item-->
                            <div class="dropdown-item noti-title border-bottom">
                                <h4 class="m-0">
                                    <i class="uil uil-info-circle text-primary mr-1"></i> More Settings
                                </h4>
                            </div>

                            <div class="slimscroll noti-scroll">

                                <style>
                                    .dropdown-item:focus, .dropdown-item:hover{
                                        color: #5369f8;
                                        background-color: #f7f7ff;
                                    }
                                    .dropdown-item.active{
                                        border-left: 3px solid #5369f8;
                                        color: #5369f8;
                                        background-color: #f7f7ff;
                                    }
                                </style>

                                <?php

                                    foreach ($files as $parent => $children) {

                                        $parent_file = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM emp_files WHERE position='top' and id='$parent'"));
                                        if(empty($parent_file)){
                                            continue;
                                        }
                                        
                                        $probation='';
                                        if($parent_file['id']=='46'){
                                            $today_date = date("Y-m-d");
                                            $ps = mysqli_num_rows(mysqli_query($db, "SELECT * FROM users where probation_date!='' and probation_date<='$today_date' and (con_after_prob='' or con_after_prob is null)"));
                                            $probation = '<span class="btn btn-danger badge ml-3" style="font-size:10px;" id="" data-toggle="tooltip" data-placement="top" title="Total no of Probation Complete">'.$ps.'</span>';
                                        }

                                        $active = ($curPageName==$parent_file['page'])?'active':'';

                                        echo <<<EOT
                                            <a href="$parent_file[page]" class="dropdown-item notify-item border-bottom $active py-2">
                                                <p class="d-flex align-items-center mb-0">
                                                    <i $parent_file[icon] style="font-size:16px;"></i> 
                                                    <span style="font-size:14px;">$parent_file[name]</span>
                                                    $probation
                                                </p>
                                            </a>
                                        EOT;

                                    }
                                ?>
                            </div>

                        </div>
                    </li>
                    <?php } ?>
                    
                    <li data-toggle="tooltip" data-placement="left" title="Logout">
                        <a href="logout.php" class="nav-link">
                            <i data-feather="log-out"></i>
                        </a>
                    </li>

                </ul>
            </div>

        </div>
        <!-- end Topbar -->