<style>
.new-design-navbar {
    background-color: #5856D6;
    color: white;
    padding: 0 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 50px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    position: relative;
    z-index: 1030;
}

.new-design-navbar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

.new-design-navbar .navbar-left-section,
.new-design-navbar .navbar-right-section {
    display: flex;
    align-items: center;
    height: 100%;
}

.new-design-navbar .bars-toggle {
    color: white;
    text-decoration: none;
    margin-right: 15px;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
}
.new-design-navbar .bars-toggle:hover {
    background-color: rgba(255,255,255,0.1);
}
.new-design-navbar .bars-toggle .material-icons {
    font-size: 24px;
    vertical-align: middle;
}

.new-design-navbar .navbar-brand {
    color: white !important;
    display: flex;
    align-items: center;
    font-size: 1.1rem; /* Adjust size */
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.new-design-navbar .navbar-brand:hover {
    opacity: 0.9;
}
.new-design-navbar .navbar-brand img {
    margin-right: 8px;
}

.new-design-navbar .navbar-brand .material-icons {
    margin-right: 8px;
    font-size: 22px;
    vertical-align: middle;
}

.new-design-navbar .navbar-right-section .nav-item {
    display: flex;
    align-items: center;
    margin-left: 15px;
    padding: 0 8px;
    height: 100%;
    cursor: default;
    font-size: 0.9rem;
}
.new-design-navbar .navbar-right-section .nav-item .material-icons {
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle;
}

.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px;
}
.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle:hover {
    background-color: rgba(255,255,255,0.1);
}

.new-design-navbar .navbar-right-section .nav-item.dropdown > a .material-icons:last-child { /* Dropdown arrow */
    margin-left: 2px;
    margin-right: 0;
    font-size: 22px;
}

/* Dropdown Menu Styling */
.new-design-navbar .dropdown-menu {
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 2px !important;
}
.new-design-navbar .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    white-space: nowrap;
}
.new-design-navbar .dropdown-menu > li > a:hover,
.new-design-navbar .dropdown-menu > li > a:focus {
    background-color: #f5f5f5;
    color: #333;
}
.new-design-navbar .dropdown-menu > li > a .material-icons {
    margin-right: 12px;
    color: #777;
    font-size: 18px;
    vertical-align: middle;
}
.new-design-navbar .dropdown-menu .hidden {
    display: none;
}

.material-icons {
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* Responsive Styles */
@media (max-width: 768px) {
    .new-design-navbar .navbar-center-section {
        /* display: none; */
    }

    .new-design-navbar .navbar-right-section .connection-status-text,
    .new-design-navbar .navbar-right-section .user-name-text {
        display: none;
    }

    .new-design-navbar .navbar-right-section .nav-item {
        margin-left: 8px;
        padding: 0 5px;
    }

    .new-design-navbar .navbar-brand {
        font-size: 1rem;
    }

    .new-design-navbar .bars-toggle {
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .new-design-navbar .navbar-brand-text {
        display: none;
    }
    .new-design-navbar .navbar-brand img {
        margin-right: 0;
    }
}

</style>

<%# Top Bar - New Design %>
<% if !request.path_info.include?('second_display') %>
<nav class="navbar new-design-navbar mb-1" style="position: sticky;">
    <div class="container-fluid">
        <div class="navbar-left-section d-flex justify-content-between">
            <% if current_login_employee.role != "waiter" %>
                <a href="javascript:void(0);" class="bars bars-toggle">
                </a>
            <% end %>
            <%# Brand Name and Icon %>
            <a class="navbar-brand" href="<%= root_path %>">
                <img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo" />
                <%# <span class="navbar-brand-text">SX Restaurant</span> %>
            </a>
        </div>
        <div class="navbar-center-section">
            <%= Shop.current_shop.name %>
        </div>
        <div class="navbar-right-section">
            <%# Connection Status %>
            <div class="nav-item" id="connection-status-item">
                <i class="material-icons">wifi</i>
                <span class="connection-status-text">Connecting...</span>
            </div>

            <%# User Dropdown %>
            <div class="nav-item dropdown">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <i class="material-icons">person</i>
                    <span class="user-name-text"><%= current_login_employee.name %></span>
                </a>
                <ul class="dropdown-menu">
                    <% if current_login_employee.role == "administrator" %>
                    <li>
                        <a href="<%= settings_shops_path %>" class="waves-effect waves-block">
                            <i class="material-icons">store</i>
                            <span>Shop Info</span>
                        </a>
                    </li>
                    <% end %>
                    <li>
                        <a href="javascript:void(0);" class="team_viewer waves-effect waves-block">
                           <i class="material-icons">touch_app</i>
                            <span>Team Viewer</span>
                        </a>
                    </li>
                    <% if current_login_employee.role == "cashier" %>
                    <li>
                        <a href="/origami/second_display" class="waves-effect waves-block" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;">
                            <i class="material-icons">desktop_windows</i>
                            <span>Second Display</span>
                        </a>
                    </li>
                      <% food_court = Lookup.find_by_lookup_type_and_value("food_court", "1") %>
                      <% if food_court && ShiftSale.current_open_shift(current_user) %>
                      <li>
                          <a href="javascript:void(0);" class="close_cashier waves-effect waves-block">
                              <i class="material-icons">highlight_off</i>
                              <span>Close Cashier</span>
                          </a>
                      </li>
                      <% end %>
                    <% end %>
                    <li>
                        <a href="javascript:void(0);" class="delete logout waves-effect waves-block" data-ref="<%= logout_path %>" data-method="delete">
                            <i class="material-icons">exit_to_app</i>
                            <span>Logout</span>
                        </a>
                         <span class="hidden" id="delete_text">
                            <h6>Are you sure you want to Logout ?</h6>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<script type="text/javascript">
    $(function(){
        $('.delete.logout').click(function(e){
            e.preventDefault();
            var method    = $(this).attr('data-method');
            var url       = $(this).attr('data-ref');
            var html_text = $(this).siblings("#delete_text").html();
            swal({
                title: "Confirmation",
                text: html_text,
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, logout!",
                html: true
            }, function (isConfirm) {
                if (isConfirm) {
                  $.ajax({
                    type: method,
                    url: url,
                    headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
                    success: function(data) {
                        if (data.url) {
                           location.href = data.url;
                        } else {
                           location.reload();
                        }
                    },
                    error: function() {
                        swal("Error", "Could not process logout.", "error");
                    }
                 });
                }
            });
        });

        // TEAM VIEWER
        $(".team_viewer").on('click',function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                data: {},
                dataType: 'json',
                url: "<%= 's' %>",
                headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
                success: function(data){
                    if(!data.status){
                        window.open('https://www.teamviewer.com', '_blank');
                    }
                },
                error: function() {
                    window.open('https://www.teamviewer.com', '_blank');
                }
            });
        });

        // CLOSE CASHIER
        $('.close_cashier').on('click',function(e){
            e.preventDefault();
            var linkURL = '/foodcourt/shift/cashier/close';
            var countText = '';
            var alertText = '';

            $.ajax({
                url: '/foodcourt/current_shift_order_count', // Ensure this path is correct
                method: 'GET',
                success: function(data) {
                    // Assuming data is a number or an object like { count: X }
                    var pendingOrders = 0;
                    if (typeof data === 'number') {
                        pendingOrders = data;
                    } else if (data && typeof data.count === 'number') {
                        pendingOrders = data.count;
                    } else {
                         // Try to parse if it's a stringified number, as in original code
                        pendingOrders = parseInt(data) || 0;
                    }

                    if (pendingOrders > 0) {
                        alertText = "<h5><span style=\"color: #CC0000\">We have " + pendingOrders + " pending orders and sales.</span></h5><br>Are you sure you want to close cashier?";
                    } else {
                        alertText = "Are you sure you want to close cashier?";
                    }

                    swal({
                      title: "Alert!",
                      text: alertText,
                      type: "warning",
                      showCancelButton: true,
                      confirmButtonText: "Yes, close it!",
                      html: true
                    }, function(isConfirm) {
                        if (isConfirm) {
                            window.location.href = linkURL; // If this needs to be a POST/DELETE, use AJAX
                        }
                    });
                },
                error: function() {
                    swal("Error", "Could not check pending orders. Please try again.", "error");
                }
            });
        });
    });

    // Check Internet Connection status
    document.addEventListener('DOMContentLoaded', function() {
      function updateConnectionStatus() {
        const $statusTextEl = $('.connection-status-text');
        const $icon = $('#connection-status-item i');

        if ($statusTextEl.length === 0) return;

        $statusTextEl.text("Connecting").css("color", "white");
        $icon.css("color", "white");

        const img = new Image();
        img.onload = function () {
          $statusTextEl.text("Online").css("color", "lightgreen");
          $icon.css("color", "lightgreen");
        };
        img.onerror = function () {
          $statusTextEl.text("Offline").css("color", "#ffcdd2");
          $icon.css("color", "#ffcdd2");
        };
        img.src = "https://www.google.com/favicon.ico?_=" + new Date().getTime(); // avoid cache
      }

      updateConnectionStatus();
      setInterval(updateConnectionStatus, 10000);
    });

    // navbar dropdown menu handler
    document.addEventListener('DOMContentLoaded', function () {
        const dropdownToggles = document.querySelectorAll('.new-design-navbar .dropdown-toggle');

        dropdownToggles.forEach(function (toggle) {
            const menu = toggle.nextElementSibling;

            if (!menu || !menu.classList.contains('dropdown-menu')) {
                // console.warn('Dropdown menu not found or incorrectly structured for toggle:', toggle);
                return;
            }

            toggle.addEventListener('click', function (event) {
                event.preventDefault();
                event.stopPropagation();

                const isCurrentlyOpen = menu.classList.contains('show');
                const allMenusInNavbar = toggle.closest('.new-design-navbar').querySelectorAll('.dropdown-menu');

                allMenusInNavbar.forEach(function(otherMenu) {
                    if (otherMenu !== menu && otherMenu.classList.contains('show')) {
                        otherMenu.classList.remove('show');
                        const otherToggle = otherMenu.previousElementSibling;
                        if (otherToggle && otherToggle.classList.contains('dropdown-toggle')) {
                              otherToggle.setAttribute('aria-expanded', 'false');
                        }
                    }
                });

                if (isCurrentlyOpen) {
                    menu.classList.remove('show');
                    toggle.setAttribute('aria-expanded', 'false');
                } else {
                    menu.classList.add('show');
                    toggle.setAttribute('aria-expanded', 'true');
                }
            });
        });
    });

    // close dropdown menu when click away
    document.addEventListener('click', function (event) {
        const openMenus = document.querySelectorAll('.new-design-navbar .dropdown-menu.show');
        openMenus.forEach(function(menu) {
            const toggle = menu.previousElementSibling;
            if (!menu.contains(event.target) && toggle && !toggle.contains(event.target)) {
                menu.classList.remove('show');
                if (toggle.classList.contains('dropdown-toggle')) {
                    toggle.setAttribute('aria-expanded', 'false');
                }
            }
        });
    });
</script>
<% end %>
