<?php
$stmt = $conn->query("SELECT * FROM companies ORDER BY id DESC LIMIT 1");
$company = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="iq-top-navbar" >
            <div class="iq-navbar-custom" style="background-color:#f5f1e6">
               <div class="iq-sidebar-logo">
                  <div class="top-logo">
                     <a href="index.php" class="logo">
                     <div class="iq-light-logo">
                  <!--<img src="images/logo.gif" class="img-fluid" alt="">-->
            <?php if (!empty($company['name'])): ?>
         <?= htmlspecialchars($company['name']) ?>
      <?php endif; ?>
               </div>
               <div class="iq-dark-logo">
                  <img src="images/logo-dark.gif" class="img-fluid" alt="">
               </div>
                     <?php if (!empty($company['name'])): ?>
<span> 
         <?= htmlspecialchars($company['name']) ?></span>
      <?php endif; ?>
                     </a>
                  </div>
               </div>
               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="navbar-left">
                  <ul id="topbar-data-icon" class="d-flex p-0 topbar-menu-icon">
                     <!-- <li class="nav-item">
                         <a href="index.html" class="nav-link font-weight-bold search-box-toggle"><i class="ri-home-4-line"></i></a>
                     </li> -->
                     <!-- <li><a href="chat.html" class="nav-link"><i class="ri-message-line"></i></a></li>
                     <li><a href="e-commerce-product-list.html" class="nav-link"><i class="ri-file-list-line"></i></a></li>
                     <li><a href="profile.html" class="nav-link"><i class="ri-question-answer-line"></i></a></li>
                     <li><a href="todo.html" class="nav-link router-link-exact-active router-link-active"><i class="ri-chat-check-line"></i></a></li>
                     <li><a href="app/index.html" class="nav-link"><i class="ri-inbox-line"></i></a></li> -->
                  </ul>
                  <div class="iq-search-bar d-none d-md-block">
                     <!-- <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="Type here to search...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                        <div class="searchbox-datalink">
                          <h6 class="pl-3 pt-3 pb-3">Pages</h6>
                           <ul class="m-0 pl-3 pr-3 pb-3">
                              <li class="iq-bg-primary-hover rounded"><a href="index.html" class="nav-link router-link-exact-active router-link-active pr-2"><i class="ri-home-4-line pr-2"></i>Dashboard</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="dashboard-1.html" class="nav-link router-link-exact-active router-link-active pr-2"><i class="ri-home-3-line pr-2"></i>Dashboard-1</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="chat.html" class="nav-link"><i class="ri-message-line pr-2"></i>Chat</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="calendar.html" class="nav-link"><i class="ri-calendar-2-line pr-2"></i>Calendar</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="profile.html" class="nav-link"><i class="ri-profile-line pr-2"></i>Profile</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="todo.html" class="nav-link"><i class="ri-chat-check-line pr-2"></i>Todo</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="app/index.html" class="nav-link"><i class="ri-mail-line pr-2"></i>Email</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="e-commerce-product-list.html" class="nav-link"><i class="ri-message-line pr-2"></i>Product Listing</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="e-commerce-product-detail.html" class="nav-link"><i class="ri-file-list-line pr-2"></i>Product Details</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="pages-faq.html" class="nav-link"><i class="ri-compasses-line pr-2"></i>Faq</a></li>
                              <li class="iq-bg-primary-hover rounded"><a href="form-wizard.html" class="nav-link"><i class="ri-clockwise-line pr-2"></i>Form-wizard</a></li>
                           </ul>
                        </div>
                     </form> -->
                  </div>
                  
               </div>
               
               <script>
        function openMiniCalculator() {
            // Define the features for the new window
            var features = 'width=500,height=500,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no';

            // Open the new window with the specified URL and features
            var calculatorWindow = window.open('includes/calculator.html', '_blank', features);

            // Focus on the new window if it's already open
            if (calculatorWindow) {
                calculatorWindow.focus();
            }
        }
    </script>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"  aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <a href="index.php" class="dashboard-button">
       <?php if (!empty($company['name'])): ?>
         <h4>
         <?= htmlspecialchars($company['name']) ?>
         </h4>
      <?php endif; ?>
</a>

<style>
    .dashboard-button {
        display: inline-block;
        text-decoration: none;
        padding: 5px 30px; /* Adjust size of the button */
        border-radius: 0px;
        font-size: 18px;
        font-weight: 800;
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(45deg, rgb(207, 131, 18), #6A1B9A, rgb(212, 155, 0), #00BCD4, #8BC34A);
        background-size: 400% 400%; /* For animation effect */
        animation: gradientAnimation 5s ease infinite; /* Animation for gradient effect */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .dashboard-button h4 {
        margin: 0;
        color: white; /* Ensures text remains white */
        font-weight: 900; /* Ensures bold text */
    }

    /* Gradient animation */
    @keyframes gradientAnimation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    /* Hover effect */
    .dashboard-button:hover {
        transform: scale(1.1); /* Enlarge the button slightly */
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* Shiny effect */
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
        .dashboard-button {
            padding: 8px 20px;  /* Reduce padding */
            font-size: 16px;  /* Slightly smaller font size */
        }

        .dashboard-button h4 {
            font-size: 16px;  /* Ensure the heading is also smaller */
        }
    }

    @media (max-width: 480px) {
        .dashboard-button {
            padding: 6px 15px;  /* Further reduce padding for very small screens */
            font-size: 14px;  /* Even smaller font size */
        }

        .dashboard-button h4 {
            font-size: 14px;  /* Smaller heading for small screens */
        }
    }
</style>

                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-arrow-left-s-line"></i></div>
                        <div class="hover-circle"><i class="ri-arrow-right-s-line"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">
                     <li class="nav-item" onclick="openMiniCalculator()">
                           <a href="#" class="search-toggle iq-waves-effect" title="Calculator">
                           <ion-icon name="calculator-outline" style="font-size: 24px;"></ion-icon>
                           </a>
                        </li>
                        <li class="nav-item">
                           <a class="" href="pos.php" title="POS"><ion-icon name="cart-outline" style="font-size: 24px;"></ion-icon> POS</a>
                        </li>                     
                        <li class="nav-item dropdown">
                           <a href="#" class="search-toggle iq-waves-effect" title="Notifcations">
                             <div id="lottie-mail"></div>
                              <span class="bg-primary count-mail" style="font-size: 24px;"></span>
                           </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">All Messages<small class="badge  badge-light float-right pt-1">5</small></h5>
                                    </div>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="images/user/05.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">Lorem Ipsum generators</h6>
                                             <small class="float-left font-size-12">5 Dec</small>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                      <li>
                        <a href="logout.php" class="iq-waves-effect d-flex align-items-center bg-primary rounded">
                           <!-- <img src="images/user/1.jpg" class="img-fluid rounded mr-3" alt="user"> -->
                           <div class="caption">
                              <h6 class="mb-0 line-height text-white">Sign out<i class="ri-login-box-line ml-2"></i></h6>
                              <!-- <span class="font-size-12 text-white">Available</span> -->
                           </div>
                        </a>
                        <!-- <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <span class="text-white font-size-12">Available</span>
                                 </div>
                              
                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="btn btn-primary dark-btn-primary" href="logout.php" role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div> -->
                        </div>
                     </li>
                  </ul>
               </nav>
               

            </div>
         </div>