@inject('request', 'Illuminate\Http\Request')
<!-- Main Header -->

<style>
    /* Compact header bar — max 60px rail */
    .modern-header {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        height: 64px;
        max-height: 64px;
        min-height: 64px;
        box-sizing: border-box;
        overflow: visible;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01);
        position: sticky;
        top: 0;
        z-index: 1000;
        transition: all 0.3s ease;
    }

    .modern-header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
        opacity: 0.8;
        z-index: 2;
        transform: scaleX(0);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modern-header:hover::after {
        transform: scaleX(1);
    }

    .modern-header__shell {
        position: relative;
        z-index: 1;
        height: 100%;
        max-height: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }

    .modern-header__shell > .tw-flex {
        width: 100%;
        min-height: 0;
        align-items: center;
    }

    /* Base Button Styling - Soft UI Pattern (fits 60px bar) */
    .header-btn {
        border-radius: 12px;
        padding: 8px 12px;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.25;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        box-sizing: border-box;
        position: relative;
        outline: none !important;
        border: 1px solid transparent;
        cursor: pointer;
        background: #f8fafc;
        color: #475569;
    }

    .header-btn:hover {
        transform: translateY(-2px);
        background: #f1f5f9;
        color: #1e293b;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
    }

    .header-btn:focus,
    .header-btn:active {
        outline: none !important;
        transform: scale(0.95);
    }

    .header-btn svg,
    .header-btn i,
    .header-btn img {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
    }

    .header-btn:hover svg,
    .header-btn:hover i {
        transform: scale(1.1) translateY(-1px);
    }

    .header-btn-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .modern-header .header-btn-icon svg,
    .modern-header .header-btn > svg {
        width: 18px !important;
        height: 18px !important;
    }

    .modern-header .header-btn-icon img {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain;
    }

    .modern-header .header-btn i.fas,
    .modern-header .header-btn i.far {
        font-size: 0.9rem;
        line-height: 1;
    }

    /* --- Soft UI Color Variants --- */
    
    /* Purple */
    .header-btn-purple {
        background: rgba(126, 34, 206, 0.1) !important;
        color: #7e22ce !important;
        border-color: rgba(126, 34, 206, 0.1) !important;
    }
    .header-btn-purple:hover {
        background: rgba(126, 34, 206, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(126, 34, 206, 0.25) !important;
    }

    /* Green */
    .header-btn-green {
        background: rgba(21, 128, 61, 0.1) !important;
        color: #15803d !important;
        border-color: rgba(21, 128, 61, 0.1) !important;
    }
    .header-btn-green:hover {
        background: rgba(21, 128, 61, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(21, 128, 61, 0.25) !important;
    }

    /* Pink */
    .header-btn-pink {
        background: rgba(190, 24, 93, 0.1) !important;
        color: #be185d !important;
        border-color: rgba(190, 24, 93, 0.1) !important;
    }
    .header-btn-pink:hover {
        background: rgba(190, 24, 93, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(190, 24, 93, 0.25) !important;
    }

    /* Orange */
    .header-btn-orange {
        background: rgba(194, 65, 12, 0.1) !important;
        color: #c2410c !important;
        border-color: rgba(194, 65, 12, 0.1) !important;
    }
    .header-btn-orange:hover {
        background: rgba(194, 65, 12, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(194, 65, 12, 0.25) !important;
    }

    /* Cyan */
    .header-btn-cyan {
        background: rgba(14, 116, 144, 0.1) !important;
        color: #0e7490 !important;
        border-color: rgba(14, 116, 144, 0.1) !important;
    }
    .header-btn-cyan:hover {
        background: rgba(14, 116, 144, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(14, 116, 144, 0.25) !important;
    }

    /* Red */
    .header-btn-red {
        background: rgba(185, 28, 28, 0.1) !important;
        color: #b91c1c !important;
        border-color: rgba(185, 28, 28, 0.1) !important;
    }
    .header-btn-red:hover {
        background: rgba(185, 28, 28, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(185, 28, 28, 0.25) !important;
    }

    /* Blue */
    .header-btn-blue {
        background: rgba(29, 78, 216, 0.1) !important;
        color: #1d4ed8 !important;
        border-color: rgba(29, 78, 216, 0.1) !important;
    }
    .header-btn-blue:hover {
        background: rgba(29, 78, 216, 0.15) !important;
        box-shadow: 0 8px 20px -4px rgba(29, 78, 216, 0.25) !important;
    }

    /* --- Special Components --- */

    /* Special POS Button */
    .pos-button {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        border-radius: 12px;
        padding: 8px 20px;
        min-height: 40px;
        box-sizing: border-box;
        color: #ffffff !important;
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.25;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.4);
        position: relative;
        overflow: hidden;
        outline: none !important;
        border: none;
        text-decoration: none;
    }

    .pos-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
        transition: all 0.6s ease;
    }

    .pos-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px -2px rgba(234, 88, 12, 0.55);
    }

    .pos-button:hover::after {
        left: 100%;
    }

    .modern-header .pos-button svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0;
    }

    /* Special Date Button */
    .date-button {
        background: rgba(71, 85, 105, 0.05);
        border: 1px solid rgba(71, 85, 105, 0.1);
        border-radius: 12px;
        padding: 8px 16px;
        min-height: 40px;
        box-sizing: border-box;
        color: #475569;
        font-weight: 700;
        font-size: 0.8rem;
        font-family: 'Inter', sans-serif;
        line-height: 1.25;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .date-button:hover {
        background: rgba(71, 85, 105, 0.1);
        color: #1e293b;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
    }

    /* User Profile */
    .user-profile-btn {
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.6);
        border-radius: 12px;
        padding: 6px;
        min-height: 40px;
        box-sizing: border-box;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .user-profile-btn:hover {
        background: #f8fafc;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .user-profile-btn img {
        border-radius: 8px;
        width: 28px !important;
        height: 28px !important;
        transition: all 0.2s ease;
        object-fit: cover;
    }

    /* Notification Button Base (uses standard red header-btn pattern) */
    .notification-btn {
        position: relative;
    }
    
    .notification-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ef4444;
        color: white;
        border-radius: 8px;
        padding: 1px 5px;
        font-size: 0.65rem;
        font-weight: 700;
        min-width: 18px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(239, 68, 68, 0.45);
        border: 2px solid #ffffff;
        animation: subtle-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        z-index: 10;
        line-height: 1.2;
    }

    @keyframes subtle-pulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: .9;
            transform: scale(1.05);
        }
    }

    .modern-header summary {
        list-style: none;
    }

    .modern-header summary::-webkit-details-marker {
        display: none;
    }

    .modern-header .user-menu-dropdown .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        margin-top: 6px;
    }

    .modern-header .user-menu-dropdown.user-menu-dropdown--rtl .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }

    .modern-header .user-menu-dropdown .caret {
        display: none;
    }

    @media (max-width: 768px) {
        .modern-header {
            height: auto;
            max-height: none;
            min-height: 0;
            background: #ffffff;
            backdrop-filter: blur(10px) saturate(130%);
            -webkit-backdrop-filter: blur(10px) saturate(130%);
        }

        .modern-header__shell {
            max-height: none;
            height: auto;
            min-height: 44px;
            padding: 8px 8px !important;
        }

        .modern-header__shell > .tw-flex {
            flex-wrap: nowrap;
            align-items: center !important;
            gap: 6px !important;
        }

        /* Keep only left controls and action rail on mobile */
        .modern-header__shell > .tw-flex > :not(:first-child):not(:last-child) {
            display: none !important;
        }

        .modern-header .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end.tw-gap-2 {
            flex-wrap: nowrap !important;
            gap: 6px !important;
            overflow-x: auto;
            overflow-y: visible;
            justify-content: flex-start;
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            position: relative;
            z-index: 20;
            touch-action: manipulation;
        }

        .modern-header .tw-flex.tw-flex-wrap.tw-items-center.tw-justify-end.tw-gap-2::-webkit-scrollbar {
            display: none;
        }

        /* Keep right-side controls tappable and dropdowns above cards */
        .modern-header .notifications-menu,
        .modern-header .user-profile-btn,
        .modern-header .user-menu-dropdown,
        .modern-header details.tw-dw-dropdown {
            position: relative;
            z-index: 30;
        }

        .modern-header .notifications-menu .dropdown-menu,
        .modern-header .user-menu-dropdown .dropdown-menu,
        .modern-header details.tw-dw-dropdown > ul {
            z-index: 10050 !important;
        }

        /* Bootstrap user menu (same pattern as notifications — reliable on iOS) */
        .modern-header .user-menu-dropdown .dropdown-menu {
            position: absolute !important;
            right: 0 !important;
            left: auto !important;
            min-width: 190px;
            max-width: calc(100vw - 16px);
            margin-top: 6px;
        }

        .modern-header .user-menu-dropdown.user-menu-dropdown--rtl .dropdown-menu {
            left: 0 !important;
            right: auto !important;
        }

        .header-btn {
            padding: 6px 8px;
            font-size: 0.76rem;
            border-radius: 10px;
            min-width: 34px;
            min-height: 34px;
        }

        .header-btn-icon {
            width: 18px;
            height: 18px;
        }

        .pos-button {
            padding: 6px 12px;
            font-size: 0.76rem;
            border-radius: 999px;
            line-height: 1;
            box-shadow: 0 4px 10px -2px rgba(234, 88, 12, 0.35);
        }

        .pos-button svg {
            display: none !important;
        }

        .date-button {
            padding: 6px 10px;
            border-radius: 12px;
            font-size: 0.72rem;
            white-space: nowrap;
        }

        .user-profile-btn {
            padding: 4px;
            border-radius: 12px;
        }

        .user-profile-btn img {
            width: 30px !important;
            height: 30px !important;
        }

        /* Hide secondary desktop actions in mobile app-style header */
        #btnCalculator,
        #view_todays_profit,
        #header_shortcut_dropdown,
        .clock_in_btn,
        .clock_out_btn {
            display: none !important;
        }
    }
</style>

<div class="modern-header no-print">
    <div class="modern-header__shell">
        <div class="tw-flex tw-items-center tw-justify-between tw-gap-4">
            <div class="tw-flex tw-items-center tw-gap-3">
                <button type="button" 
                    class="header-btn header-btn-blue small-view-button xl:tw-w-20 lg:tw-hidden">
                    <span class="tw-sr-only">
                        Sidebar Menu
                    </span>
                    <div class="header-btn-icon">
                    <svg aria-hidden="true" class="tw-size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M4 6l16 0" />
                        <path d="M4 12l16 0" />
                        <path d="M4 18l16 0" />
                    </svg>
                    </div>
                </button>

                <button type="button"
                    class="header-btn header-btn-blue side-bar-collapse tw-hidden lg:tw-inline-flex">
                    <span class="tw-sr-only">
                        Collapse Sidebar
                    </span>
                    <div class="header-btn-icon">
                        <img src="{{ asset('img/icon/menu-flex.svg') }}" alt="" style="width: 20px; height: 20px;">
                    </div>
                </button>
            </div>

            @php
                $searchbox_mod = Module::find('Searchbox');
                $searchbox_installed = (new \App\Utils\ModuleUtil())->isModuleInstalled('Searchbox');
            @endphp
            @if ($searchbox_installed && $searchbox_mod && $searchbox_mod->isEnabled())
                @include('searchbox::inject.header_desktop')
            @endif

            {{-- Showing active package for SaaS Superadmin --}}
            @if(Module::has('Superadmin'))
                @includeIf('superadmin::layouts.partials.active_subscription')
            @endif

            {{-- When using superadmin, this button is used to switch users --}}
            @if(!empty(session('previous_user_id')) && !empty(session('previous_username')))
                <a href="{{route('sign-in-as-user', session('previous_user_id'))}}" class="btn btn-flat btn-danger m-8 btn-sm mt-10"><i class="fas fa-undo"></i> @lang('lang_v1.back_to_username', ['username' => session('previous_username')] )</a>
            @endif


            <div class="tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2">
                @if (Module::has('Essentials'))
                    @includeIf('essentials::layouts.partials.header_part')
                @endif
                <details class="tw-dw-dropdown tw-relative tw-inline-block tw-text-left">
                    <summary class="header-btn header-btn-purple tw-cursor-pointer">
                        <div class="header-btn-icon">
                        <svg aria-hidden="true" class="tw-size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
                            <path d="M9 12h6" />
                            <path d="M12 9v6" />
                        </svg>
                        </div>
                        <span class="tw-hidden lg:tw-inline">@lang('lang_v1.add')</span>
                    </summary>
                    <ul class="tw-dw-menu tw-dw-dropdown-content tw-dw-z-[1] tw-dw-bg-base-100 tw-dw-rounded-box tw-w-48 tw-absolute tw-left-0 tw-z-10 tw-mt-2 tw-origin-top-right tw-bg-white tw-rounded-lg tw-shadow-lg tw-ring-1 tw-ring-gray-200 focus:tw-outline-none"
                        role="menu" tabindex="-1">
                        <div class="tw-p-2" role="none">
                            <a href="{{ route('calendar') }}"
                                class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-600 tw-transition-all tw-duration-200 tw-rounded-lg hover:tw-text-gray-900 hover:tw-bg-gray-100"
                                role="menuitem" tabindex="-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar"
                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <rect x="4" y="5" width="16" height="16" rx="2" />
                                    <line x1="16" y1="3" x2="16" y2="7" />
                                    <line x1="8" y1="3" x2="8" y2="7" />
                                    <line x1="4" y1="11" x2="20" y2="11" />
                                    <line x1="11" y1="15" x2="12" y2="15" />
                                    <line x1="12" y1="15" x2="12" y2="18" />
                                </svg>
                                @lang('lang_v1.calendar')
                            </a>
                            @if (Module::has('Essentials'))
                                <a href="#"
                                    data-href="{{ action([\Modules\Essentials\Http\Controllers\ToDoController::class, 'create']) }}"
                                    data-container="#task_modal"
                                    class="btn-modal tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-600 tw-transition-all tw-duration-200 tw-rounded-lg hover:tw-text-gray-900 hover:tw-bg-gray-100"
                                    role="menuitem" tabindex="-1">
                                    <svg aria-hidden="true" class="tw-w-5 tw-h-5" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path
                                            d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
                                        <path d="M9 12l2 2l4 -4" />
                                    </svg>
                                    @lang('essentials::lang.add_to_do')
                                </a>
                            @endif

                   




                            @if (auth()->user()->hasRole('Admin#' . auth()->user()->business_id))
                                <a href="#" id="start_tour"
                                    class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-600 tw-transition-all tw-duration-200 tw-rounded-lg hover:tw-text-gray-900 hover:tw-bg-gray-100"
                                    role="menuitem" tabindex="-1">
                                    <svg aria-hidden="true" class="tw-w-5 tw-h-5" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                        <path d="M12 17l0 .01" />
                                        <path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" />
                                    </svg>
                                    Application Tour
                                </a>
                            @endif
                        </div>
                    </ul>

                </details>

                {{-- Admin Settings Dropdown --}}
                @if (auth()->user()->hasRole('Admin#'.auth()->user()->business_id))
                    <div class="btn-group">
                        <button id="header_shortcut_dropdown" type="button" class="header-btn header-btn-orange" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="header-btn-icon">
                                <i class="fas fa-cogs" aria-hidden="true"></i>
                            </div>
                            <span class="tw-hidden xl:tw-inline">@lang('lang_v1.settings')</span>
                        </button>

                        <ul class="dropdown-menu">
                            <li>
                                <a href="{{ url('/log-viewer') }}" target="_blank">
                                    <i class="fas fa-clipboard-list" aria-hidden="true"></i> System Logs
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('commands.optimize.clear') }}">
                                    <i class="fas fa-cog" aria-hidden="true"></i> Optimize:Clear
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('commands.route.clear') }}">
                                    <i class="fas fa-cogs" aria-hidden="true"></i> Optimize:Route
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/reports/product-stock-details') }}" target="_blank">
                                    <i class="fas fa-search" aria-hidden="true"></i> Product Mismatch
                                </a>
                            </li>
                        </ul>
                    </div>
                @endif


            {{-- Admin menu --}}
            

                {{-- data-toggle="popover" remove this for on hover show --}}

                <button id="btnCalculator" title="@lang('lang_v1.calculator')" 
                    data-content='@include('layouts.partials.calculator')'
                    type="button" data-trigger="click" data-html="true" data-placement="bottom" 
                    class="header-btn header-btn-green tw-hidden md:tw-inline-flex popover-default">
                    <div class="header-btn-icon">
                    <svg aria-hidden="true" class="tw-size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M4 3m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
                        <path d="M8 7m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                        <path d="M8 14l0 .01" />
                        <path d="M12 14l0 .01" />
                        <path d="M16 14l0 .01" />
                        <path d="M8 17l0 .01" />
                        <path d="M12 17l0 .01" />
                        <path d="M16 17l0 .01" />
                    </svg>
                    </div>
                    <span class="tw-hidden lg:tw-inline">@lang('lang_v1.calculator')</span>
                </button>

                @if (in_array('pos_sale', $enabled_modules))
                    @can('sell.create')
                        <a href="{{ action([\App\Http\Controllers\SellPosController::class, 'create']) }}"
                            class="pos-button sm:tw-inline-flex">
                            <svg aria-hidden="true" class="tw-size-5 tw-hidden md:tw-block" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                <path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                            </svg>
                            @lang('sale.pos_sale')
                        </a>
                    @endcan
                @endif
                @if (Module::has('Repair'))
                    {{-- @includeIf('repair::layouts.partials.header') --}}
                @endif
                @can('profit_loss_report.view')
                    <button type="button" id="view_todays_profit" title="{{ __('home.todays_profit') }}"
                        data-toggle="tooltip" data-placement="bottom"
                        class="header-btn header-btn-green tw-hidden sm:tw-inline-flex">
                        <div class="header-btn-icon">
                        <svg aria-hidden="true" class="tw-size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
                            <path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
                            <path d="M18 12l.01 0" />
                            <path d="M6 12l.01 0" />
                        </svg>
                        </div>
                        <span class="tw-hidden xl:tw-inline">{{ __('home.todays_profit') }}</span>
                    </button>
                @endcan

                <button type="button"
                    class="date-button tw-hidden lg:tw-inline-flex">
                    {{ @format_date('now') }}
                </button>

                @include('layouts.partials.header-notifications')



                    <div class="dropdown user-menu-dropdown tw-relative tw-inline-block tw-list-none tw-text-{{ App::getLocale() == 'ar' ? 'right' : 'left' }} {{ App::getLocale() == 'ar' ? 'user-menu-dropdown--rtl' : '' }}">
                        <a href="#"
                            class="dropdown-toggle user-profile-btn tw-cursor-pointer"
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false">
                            <span class="tw-hidden md:tw-block"></span>
                            <img src="{{ asset('img/icon/user-profile.png') }}" alt="">
                        </a>

                     <ul class="dropdown-menu user-menu-panel tw-p-2 tw-w-48"
                        role="menu" tabindex="-1">
                        <div class="tw-px-4 tw-pt-3 tw-pb-1" role="none">
                            <p class="tw-text-sm" role="none">
                                Signed in as
                            </p>
                            <p class="tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate" role="none">
                                {{ Auth::User()->first_name }} {{ Auth::User()->last_name }}
                            </p>
                        </div>

                        <li>
                            <a href="{{ action([\App\Http\Controllers\UserController::class, 'getProfile']) }}"
                                class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-600 tw-transition-all tw-duration-200 tw-rounded-lg hover:tw-text-gray-900 hover:tw-bg-gray-100"
                                role="menuitem" tabindex="-1">
                                <svg aria-hidden="true" class="tw-w-5 tw-h-5" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                    <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
                                    <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
                                </svg>
                                @lang('lang_v1.profile')
                            </a>
                        </li>
                        <li>
                            <a href="{{ action([\App\Http\Controllers\Auth\LoginController::class, 'logout']) }}"
                                class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-600 tw-transition-all tw-duration-200 tw-rounded-lg hover:tw-text-gray-900 hover:tw-bg-gray-100"
                                role="menuitem" tabindex="-1">
                                <svg aria-hidden="true" class="tw-w-5 tw-h-5" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path
                                        d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
                                    <path d="M9 12h12l-3 -3" />
                                    <path d="M18 15l3 -3" />
                                </svg>
                                @lang('lang_v1.sign_out')
                            </a>
                        </li>
                    </ul>
                    </div>
            </div>
        </div>
    </div>
</div>