<?php include("admin/inc/config.php"); ?>

<header class="trucker__header-area-home-1">
    <!-- <div class="trucker__header-topbar">
      <div class="trucker__container">
        <div class="trucker__header-wrapper">
          <div class="trucker__topbar-left">
            <a href="mailto:trucker@yourdomain.com"
              class="trucker__header-topbar-info trucker__fs-15 trucker__fw-400 trucker__white"><i
                class="fa-sharp fa-light fa-envelope"></i> trucker@yourdomain.com</a>
            <a href="tel:880-61234567890"
              class="trucker__header-topbar-info trucker__fs-15 trucker__fw-400 trucker__white"><i
                class="fa-light fa-phone"></i> +880-61234567890</a>
          </div>
          <div class="trucker__topbar-right">
            <div class="trucker__topbar-lan-select">
              <select class="trucker__language-selection">
                <option value="bangla">Bangla</option>
                <option value="english">English</option>
                <option value="japanis">Japanis</option>
                <option value="arabic">Arabic</option>
              </select>
            </div>
            <div class="trucker__topbar-social-media">
              <a href="#" class="trucker__white"><i class="fa-brands fa-facebook-f"></i></a>
              <a href="#" class="trucker__white"><i class="fa-brands fa-youtube"></i></a>
              <a href="#" class="trucker__white"><i class="fa-brands fa-linkedin-in"></i></a>
              <a href="#" class="trucker__white"><i class="fa-brands fa-twitter"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="trucker__header-menu">
      <div class="trucker__container">
        <div class="trucker__menu-wrapper">
          <div class="trucker__logo">
            <a href="index.html">
              <img src="assets/images/logo/logo.png" class="logo" alt="Trucker - Transport Courier & Logistics Html Template">
            </a>
          </div>
          <div class="trucker__menu__inner">
            <nav>
              <ul class="trucker__menu">
                <li><a href="index.php"
                    class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Home</a>
                  <!-- <ul class="trucker__sub-menu">
                    <li><a href="index.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Home One</a>
                    </li>
                    <li><a href="index-two.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Home
                        Two</a></li>
                  </ul> -->
                </li>
                <!-- <li><a href="about.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">About</a></li>
                <li><a href="#"
                    class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue trucker__submenu-open-here">Pages</a>
                  <ul class="trucker__sub-menu">
                    <li><a href="team.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Team</a></li>
                    <li><a href="team-details.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Team
                        Details</a></li>
                    <li><a href="pricing.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Pricing</a>
                    </li>
                    <li><a href="faq.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Faq</a></li>
                    <li><a href="404.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">404</a></li>
                  </ul>
                </li>
                <li><a href="#"
                    class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue trucker__submenu-open-here">Services</a>
                  <ul class="trucker__sub-menu">
                    <li><a href="service.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Service</a>
                    </li>
                    <li><a href="service-details.html"
                        class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Service Details</a></li>
                  </ul>
                </li>
                <li><a href="#"
                    class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue trucker__submenu-open-here">Blogs</a>
                  <ul class="trucker__sub-menu">
                    <li><a href="blog-standard.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Blog
                        Standard</a></li>
                    <li><a href="blog-details.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Blog
                        Details</a></li>
                  </ul>
                </li>
                <li><a href="contact.html" class="trucker__fs-16 trucker__fw-500 trucker__deep-sea-blue">Contact</a>
                </li> -->
              </ul>
            </nav>
          </div>
          <div class="trucker__header-menu-right">
            <div class="trucker-search-mobile-menu-btn">
              <a href="javascript:void(0)" class="trucker__search-icon trucker__deep-sea-blue search-trigger"
                aria-label="Open search"><i class="fa-solid fa-magnifying-glass"></i></a>
              <a href="javascript:void(0)" class="trucker__mobile-menu-bar">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M7.5 5.6159C7.5 6.65134 6.66054 7.49071 5.625 7.49071C4.58946 7.49071 3.75 6.65134 3.75 5.6159C3.75 4.58047 4.58946 3.74109 5.625 3.74109C6.66054 3.74109 7.5 4.58047 7.5 5.6159ZM7.5 14.99C7.5 16.0254 6.66054 16.8648 5.625 16.8648C4.58946 16.8648 3.75 16.0254 3.75 14.99C3.75 13.9546 4.58946 13.1152 5.625 13.1152C6.66054 13.1152 7.5 13.9546 7.5 14.99ZM5.625 26.2388C6.66054 26.2388 7.5 25.3994 7.5 24.364C7.5 23.3286 6.66054 22.4892 5.625 22.4892C4.58946 22.4892 3.75 23.3286 3.75 24.364C3.75 25.3994 4.58946 26.2388 5.625 26.2388ZM16.875 14.99C16.875 16.0254 16.0355 16.8648 15 16.8648C13.9645 16.8648 13.125 16.0254 13.125 14.99C13.125 13.9546 13.9645 13.1152 15 13.1152C16.0355 13.1152 16.875 13.9546 16.875 14.99ZM15 7.49071C16.0355 7.49071 16.875 6.65134 16.875 5.6159C16.875 4.58047 16.0355 3.74109 15 3.74109C13.9645 3.74109 13.125 4.58047 13.125 5.6159C13.125 6.65134 13.9645 7.49071 15 7.49071ZM16.875 24.364C16.875 25.3994 16.0355 26.2388 15 26.2388C13.9645 26.2388 13.125 25.3994 13.125 24.364C13.125 23.3286 13.9645 22.4892 15 22.4892C16.0355 22.4892 16.875 23.3286 16.875 24.364ZM24.375 16.8648C25.4105 16.8648 26.25 16.0254 26.25 14.99C26.25 13.9546 25.4105 13.1152 24.375 13.1152C23.3395 13.1152 22.5 13.9546 22.5 14.99C22.5 16.0254 23.3395 16.8648 24.375 16.8648ZM26.25 5.6159C26.25 6.65134 25.4105 7.49071 24.375 7.49071C23.3395 7.49071 22.5 6.65134 22.5 5.6159C22.5 4.58047 23.3395 3.74109 24.375 3.74109C25.4105 3.74109 26.25 4.58047 26.25 5.6159ZM24.375 26.2388C25.4105 26.2388 26.25 25.3994 26.25 24.364C26.25 23.3286 25.4105 22.4892 24.375 22.4892C23.3395 22.4892 22.5 23.3286 22.5 24.364C22.5 25.3994 23.3395 26.2388 24.375 26.2388Z"
                    fill="#2A9D8F" />
                </svg>
              </a>
            </div>


            <!-- <div class="search-popup">
                <button class="close-search" aria-label="Close search">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                </button>
                <div class="search-container">
                <form class="search-form" id="searchForm">
                    <input type="text" class="search-input" placeholder="Search..." autocomplete="off">
                    <button type="submit" class="search-submit">Search</button>
                </form>
                </div>
            </div> -->


            <div class="search-popup">
  <button class="close-search" aria-label="Close search">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
  <div class="search-container">
    <form class="search-form" id="searchForm">
      <input type="text" class="search-input" id="grno" placeholder="Enter GRNO..." autocomplete="off">
      <button type="submit" class="search-submit">Search</button>
    </form>
    <div id="statusResult"></div> <!-- This will show the status -->
  </div>
</div>

            <!-- <div class="trucker__header-btn">
              <a href="#" class="trucker__btn-style-1">Track Order <i class="fa-light fa-arrow-up-right"></i></a>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </header>



    <!-- Start Mobile Menu -->
    <div class="trucker__mobile-menu">
    <div class="trucker__menu-header">
      <div class="trucker__logo">
        <a href="index.html">
          <img src="assets/images/logo/logo.png" alt="Trucker - Transport Courier & Logistics Html Template">
        </a>
      </div>
      <button class="trucker__close-btn"><i class="fa-sharp fa-light fa-xmark"></i></button>
    </div>

    <div class="trucker__mobile-menu-search">
      <form action="#">
        <input type="text" placeholder="Search Here">
        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
      </form>
    </div>

    <div class="trucker__mobile-menu-btn">
      <a href="#" class="trucker__btn-style-1">Track Order <i class="fa-light fa-arrow-up-right"></i></a>
    </div>

    <nav>
      <ul class="trucker__nav-list">
        <li class="trucker__nav-item">
          <a href="index.php" class="trucker__nav-link" onclick="return false;">
            Home
            <!-- <span class="trucker__toggle-btn"></span> -->
          </a>
          <!-- <ul class="trucker__submenu">
            <li class="trucker__submenu-item"><a href="index.html" class="trucker__submenu-link">Home One</a></li>
            <li class="trucker__submenu-item"><a href="index-two.html" class="trucker__submenu-link">Home Two</a></li>
          </ul> -->
        </li>
        <!-- <li class="trucker__nav-item">
          <a href="about.html" class="trucker__nav-link">About</a>
        </li>
        <li class="trucker__nav-item">
          <a href="#" class="trucker__nav-link" onclick="return false;">
            Pages
            <span class="trucker__toggle-btn"></span>
          </a>
          <ul class="trucker__submenu">
            <li class="trucker__submenu-item"><a href="team.html" class="trucker__submenu-link">Team</a></li>
            <li class="trucker__submenu-item"><a href="team-details.html" class="trucker__submenu-link">Team Details</a>
            </li>
            <li class="trucker__submenu-item"><a href="pricing.html" class="trucker__submenu-link">Pricing</a></li>
            <li class="trucker__submenu-item"><a href="faq.html" class="trucker__submenu-link">Faq</a></li>
            <li class="trucker__submenu-item"><a href="404.html" class="trucker__submenu-link">404</a></li>
          </ul>
        </li>
        <li class="trucker__nav-item">
          <a href="#" class="trucker__nav-link" onclick="return false;">
            Services
            <span class="trucker__toggle-btn"></span>
          </a>
          <ul class="trucker__submenu">
            <li class="trucker__submenu-item"><a href="service.html" class="trucker__submenu-link">Service</a></li>
            <li class="trucker__submenu-item"><a href="service-details.html" class="trucker__submenu-link">Service
                Details</a></li>
          </ul>
        </li>
        <li class="trucker__nav-item">
          <a href="#" class="trucker__nav-link" onclick="return false;">
            Blog
            <span class="trucker__toggle-btn"></span>
          </a>
          <ul class="trucker__submenu">
            <li class="trucker__submenu-item"><a href="blog-standard.html" class="trucker__submenu-link">Blog
                Standard</a></li>
            <li class="trucker__submenu-item"><a href="blog-details.html" class="trucker__submenu-link">Blog Details</a>
            </li>
          </ul>
        </li>
        <li class="trucker__nav-item">
          <a href="contact.html" class="trucker__nav-link">Contact Us</a>
        </li> -->
      </ul>
    </nav>
    <div class="mobile-menu-contact-info">
      <a href="mailto:trucker@yourdomain.com"
        class="trucker__header-topbar-info trucker__fs-15 trucker__fw-400 trucker__white"><i
          class="fa-sharp fa-light fa-envelope"></i> trucker@yourdomain.com</a>
      <a href="tel:880-61234567890" class="trucker__header-topbar-info trucker__fs-15 trucker__fw-400 trucker__white"><i
          class="fa-light fa-phone"></i> +880-61234567890</a>
    </div>
    <div class="mobile-menu-social-media">
      <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
      <a href="#"><i class="fa-brands fa-youtube"></i></a>
      <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
      <a href="#"><i class="fa-brands fa-twitter"></i></a>
    </div>
    <div class="trucker__mobile-menu-copyright">
      <p class="trucker__mobile-menu-copyright-text">© 2025 <a href="#">website_stock</a> . All Rights Reserved.</p>
    </div>
  </div>
  <!-- End Mobile Menu -->


  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#searchForm").submit(function(e){
        e.preventDefault();
        var grno = $("#grno").val().trim();

        if(grno === "") {
            alert("Please enter a GRNO.");
            return;
        }

        $.ajax({
            url: "search.php",
            type: "POST",
            data: { grno: grno },
            dataType: "json",
            success: function(response) {
                $("#statusResult").html("<p><strong>Status:</strong> " + response.status + "</p>");
            },
            error: function() {
                $("#statusResult").html("<p style='color: red;'>Error fetching data</p>");
            }
        });
    });
});
</script>