<!-- Topbar Start -->
<style>
    .app-topbar .logo-topbar {
        padding-left: 0 !important;
    }

    /* Ensure the last visible item is flush */
    .app-topbar .topbar-menu>div:last-child>.topbar-item:last-child {
        padding-right: 0 !important;
    }
</style>
<header class="app-topbar">

    <div class="topbar-menu px-0">
        <div class="d-flex align-items-center gap-2">
            <!-- Topbar Brand Logo -->
            <div class="logo-topbar">
                <!-- Logo light -->
                <a href="index.php" class="logo-light">
                    <span class="logo-lg">
                        <img src="assets/images/logo-black.png" alt="logo">
                    </span>
                    <span class="logo-sm">
                        <img src="assets/images/logo-sm.png" alt="small logo">
                    </span>
                </a>

                <!-- Logo Dark -->
                <a href="index.html" class="logo-dark">
                    <span class="logo-lg">
                        <img src="assets/images/logo-black.png" alt="dark logo">
                    </span>
                    <span class="logo-sm">
                        <img src="assets/images/logo-sm.png" alt="small logo">
                    </span>
                </a>
            </div>

            <!-- Sidebar Menu Toggle Button -->
            <button class="sidenav-toggle-button btn btn-default btn-icon">
                <i class="ti ti-menu-4 fs-22"></i>
            </button>

            <!-- Horizontal Menu Toggle Button -->
            <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                <i class="ti ti-menu-4 fs-22"></i>
            </button>

            <!-- Shortcuts Dropdown -->
            <div class="topbar-item d-none d-md-flex">
                <div class="dropdown">
                    <button class="topbar-link btn fw-medium btn-link dropdown-toggle drop-arrow-none"
                        data-lang="mega-menu" data-bs-toggle="dropdown" data-bs-offset="0,17" type="button"
                        aria-haspopup="false" aria-expanded="false">
                        Quick Actions <i class="ti ti-chevron-down ms-1 fs-16"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-xl p-0">
                        <div class="p-3">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <h5 class="mb-2 fw-semibold fs-sm dropdown-header text-uppercase">Quick Actions</h5>
                                    <div class="d-grid gap-2">
                                        <a href="shipment-create.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-primary-subtle text-primary rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-plus fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">Create Booking</h6>
                                                <span class="text-muted fs-12">New domestic shipment</span>
                                            </div>
                                        </a>
                                        <a href="shipment-bulk.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-success-subtle text-success rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-file-spreadsheet fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">Bulk Upload</h6>
                                                <span class="text-muted fs-12">Import multiple orders</span>
                                            </div>
                                        </a>
                                        <a href="tracking.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-info-subtle text-info rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-truck-delivery fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">Track Shipment</h6>
                                                <span class="text-muted fs-12">Check order status</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-2 fw-semibold fs-sm dropdown-header text-uppercase">Management</h5>
                                    <div class="d-grid gap-2">
                                        <a href="client-list.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-warning-subtle text-warning rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-users fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">Client List</h6>
                                                <span class="text-muted fs-12">Manage customers</span>
                                            </div>
                                        </a>
                                        <a href="shipment-list.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-danger-subtle text-danger rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-list fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">Booking List</h6>
                                                <span class="text-muted fs-12">View all shipments</span>
                                            </div>
                                        </a>
                                        <a href="mis-reports.php"
                                            class="dropdown-item p-2 rounded d-flex align-items-center">
                                            <span
                                                class="avatar-sm bg-dark-subtle text-dark rounded-circle me-3 d-flex align-items-center justify-content-center">
                                                <i class="ti ti-chart-bar fs-18"></i>
                                            </span>
                                            <div>
                                                <h6 class="m-0 fs-14">MIS Reports</h6>
                                                <span class="text-muted fs-12">Performance analytics</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- .d-flex-->

        <div class="d-flex align-items-center gap-2">

            <!-- Search -->
            <div class="app-search d-none d-xl-flex me-2">
                <input type="search" class="form-control topbar-search rounded-pill" name="search"
                    placeholder="Quick Search...">
                <i data-lucide="search" class="app-search-icon text-muted"></i>
            </div>

            <!-- Language Dropdown -->
            <div class="topbar-item">
                <div class="dropdown">
                    <button class="topbar-link fw-bold" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button"
                        aria-haspopup="false" aria-expanded="false">
                        <img src="assets/images/flags/us.svg" alt="user-image" class="rounded" height="20"
                            id="selected-language-image">
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="en" title="English">
                            <img src="assets/images/flags/us.svg" alt="English" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">English</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="de" title="German">
                            <img src="assets/images/flags/de.svg" alt="German" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">Deutsch</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="it" title="Italian">
                            <img src="assets/images/flags/it.svg" alt="Italian" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">Italiano</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="es" title="Spanish">
                            <img src="assets/images/flags/es.svg" alt="Spanish" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">Español</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="ru" title="Russian">
                            <img src="assets/images/flags/ru.svg" alt="Russian" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">Русский</span>
                        </a>
                        <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="hi" title="Hindi">
                            <img src="assets/images/flags/in.svg" alt="Hindi" class="me-1 rounded" height="18"
                                data-translator-image>
                            <span class="align-middle">हिन्दी</span>
                        </a>
                    </div> <!-- end dropdown-menu-->
                </div> <!-- end dropdown-->
            </div> <!-- end topbar item-->

            <!-- Theme Mode Dropdown -->
            <div class="topbar-item">
                <div class="dropdown">
                    <button class="topbar-link" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button"
                        aria-haspopup="false" aria-expanded="false">
                        <i data-lucide="layout-grid" class="fs-xxl"></i>
                    </button>

                    <div class="dropdown-menu dropdown-menu-lg p-2 dropdown-menu-end">
                        <div class="row align-items-center g-1">
                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title text-bg-light rounded-circle">
                                            <img src="assets/images/logos/google.svg" alt="Google Logo" height="18">
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Google</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title text-bg-light rounded-circle">
                                            <img src="assets/images/logos/figma.svg" alt="Figma Logo" height="18">
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Figma</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title text-bg-light rounded-circle">
                                            <img src="assets/images/logos/slack.svg" alt="Slack Logo" height="18">
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Slack</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title text-bg-light rounded-circle">
                                            <img src="assets/images/logos/dropbox.svg" alt="Dropbox Logo" height="18">
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Dropbox</span>
                                </a>
                            </div>

                            <div class="col-4 text-center">
                                <a href="javascript:void(0);" class="btn btn-sm rounded-circle btn-icon btn-danger">
                                    <i data-lucide="circle-plus" class="fs-18"></i>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ti ti-calendar fs-18"></i>
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Calendar</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ti ti-message-circle fs-18"></i>
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Chat</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ti ti-folder fs-18"></i>
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Files</span>
                                </a>
                            </div>

                            <div class="col-4">
                                <a href="javascript:void(0);"
                                    class="dropdown-item border border-dashed rounded text-center py-2">
                                    <span class="avatar-sm d-block mx-auto mb-1">
                                        <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ti ti-users fs-18"></i>
                                        </span>
                                    </span>
                                    <span class="align-middle fw-medium">Team</span>
                                </a>
                            </div>

                        </div>
                    </div>

                </div> <!-- end dropdown-->
            </div> <!-- end topbar item-->

            <!-- Theme Mode Dropdown -->
            <div class="topbar-item">
                <div class="dropdown">
                    <button class="topbar-link" data-bs-toggle="dropdown" data-bs-offset="0,24" type="button"
                        aria-haspopup="false" aria-expanded="false">
                        <i data-lucide="sun" class="fs-xxl"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end thememode-dropdown">

                        <li>
                            <label class="dropdown-item">
                                <i data-lucide="sun" class="align-middle me-1 fs-16"></i>
                                <span class="align-middle">Light</span>
                                <input class="form-check-input" type="radio" name="data-bs-theme" value="light">
                            </label>
                        </li>

                        <li>
                            <label class="dropdown-item">
                                <i data-lucide="moon" class="align-middle me-1 fs-16"></i>
                                <span class="align-middle">Dark</span>
                                <input class="form-check-input" type="radio" name="data-bs-theme" value="dark">
                            </label>
                        </li>

                        <li>
                            <label class="dropdown-item">
                                <i data-lucide="monitor-cog" class="align-middle me-1 fs-16"></i>
                                <span class="align-middle">System</span>
                                <input class="form-check-input" type="radio" name="data-bs-theme" value="system">
                            </label>
                        </li>

                    </ul> <!-- end dropdown-menu-->
                </div> <!-- end dropdown-->
            </div> <!-- end topbar item-->

            <!-- FullScreen -->
            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link" type="button" data-toggle="fullscreen">
                    <i data-lucide="maximize" class="fs-xxl fullscreen-off"></i>
                    <i data-lucide="minimize" class="fs-xxl fullscreen-on"></i>
                </button>
            </div>

            <!-- Light/Dark Mode Button -->
            <div class="topbar-item d-none">
                <button class="topbar-link" id="light-dark-mode" type="button">
                    <i data-lucide="moon" class="fs-xxl mode-light-moon"></i>
                </button>
            </div>

            <!-- Monocrome Mode Button -->
            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link" type="button" id="monochrome-mode">
                    <i data-lucide="palette" class="fs-xxl"></i>
                </button>
            </div>

            <!-- User Dropdown -->
            <div class="topbar-item nav-user">
                <div class="dropdown">
                    <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown"
                        data-bs-offset="0,19" href="#!" aria-haspopup="false" aria-expanded="false">
                        <?php
                        $user_image = isset($_SESSION['user_image']) && !empty($_SESSION['user_image'])
                            ? $_SESSION['user_image']
                            : 'assets/images/users/user-1.jpg';
                        ?>
                        <img src="<?php echo htmlspecialchars($user_image); ?>" width="32"
                            class="rounded-circle me-lg-2 d-flex" alt="user-image"
                            onerror="this.src='assets/images/users/user-1.jpg'">
                        <div class="d-lg-flex align-items-center gap-1 d-none">
                            <h5 class="my-0"><?php echo htmlspecialchars(get_logged_user_name()); ?></h5>
                            <i class="ti ti-chevron-down align-middle"></i>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <!-- Header -->
                        <div class="dropdown-header noti-title">
                            <h6 class="text-overflow m-0">Welcome back 👋!</h6>
                            <?php if (isset($_SESSION['user_email'])): ?>
                                <small class="text-muted"><?php echo htmlspecialchars($_SESSION['user_email']); ?></small>
                            <?php endif; ?>
                        </div>

                        <!-- My Profile -->
                        <a href="user-profile.php" class="dropdown-item">
                            <i class="ti ti-user-circle me-1 fs-17 align-middle"></i>
                            <span class="align-middle">My Profile</span>
                        </a>

                        <!-- Change Password -->
                        <a href="change-password.php" class="dropdown-item">
                            <i class="ti ti-key me-1 fs-17 align-middle"></i>
                            <span class="align-middle">Change Password</span>
                        </a>

                        <!-- Account Settings -->
                        <a href="account-settings.php" class="dropdown-item">
                            <i class="ti ti-settings-2 me-1 fs-17 align-middle"></i>
                            <span class="align-middle">Account Settings</span>
                        </a>


                        <!-- Divider -->
                        <div class="dropdown-divider"></div>

                        <!-- Support -->
                        <a href="support.php" class="dropdown-item">
                            <i class="ti ti-headset me-1 fs-17 align-middle"></i>
                            <span class="align-middle">Support Center</span>
                        </a>

                        <!-- Lock Screen -->
                        <a href="lock-screen.php" class="dropdown-item">
                            <i class="ti ti-lock me-1 fs-17 align-middle"></i>
                            <span class="align-middle">Lock Screen</span>
                        </a>

                        <!-- Divider -->
                        <div class="dropdown-divider"></div>

                        <!-- Logout -->
                        <a href="logout.php" class="dropdown-item fw-semibold text-danger"
                            onclick="return confirm('Are you sure you want to logout?');">
                            <i class="ti ti-logout-2 me-1 fs-17 align-middle"></i>
                            <span class="align-middle">Log Out</span>
                        </a>
                    </div>

                </div>
            </div>

            <!-- Button Trigger Customizer Offcanvas -->
            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas"
                    type="button">
                    <i class="ti ti-settings icon-spin fs-24"></i>
                </button>
            </div>
        </div>
    </div>
</header>
<!-- Topbar End -->

<?php include 'horizontal-menu.php'; ?>