<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap" />
<link rel="stylesheet" type="text/css" href="{assetPath file='all.min.css'}?v={$versionHash}" />
<link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/standard_cart/custom-style.css?v={$versionHash}-hostique-01" />
<link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/standard_cart/custom.css?v={$versionHash}-hostique-90" />
<script type="text/javascript" src="{assetPath file='scripts.min.js'}?v={$versionHash}"></script>

<div class="hostique-order-topbar-shell">
    <div class="hostique-order-topbar">
        <div class="hostique-order-topbar__brand">
            <a class="hostique-order-topbar__brand-link hostique-brand" href="{$WEB_ROOT}/clientarea.php" aria-label="Hostique">
                {include file="$template/includes/hostique-logo-lockup.tpl" hostiqueLogoClass="hostique-logo-lockup--order" hostiqueLogoAlt="Hostique Control Panel"}
            </a>
        </div>

        <div class="hostique-order-topbar__search">
            <div class="hostique-order-topbar__search-field">
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="text" class="form-control" placeholder="{$LANG.search|default:'Search'}" aria-label="{$LANG.search|default:'Search'}" />
            </div>
        </div>

        <div class="hostique-order-topbar__actions">
            <button class="hostique-order-control" type="button" data-toggle="modal" data-target="#modalChooseLanguage" aria-label="{lang key='chooselanguage'}">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
            </button>
            <div class="dropdown">
                <button class="hostique-order-control hostique-order-control--theme" type="button" data-toggle="dropdown" aria-expanded="false" aria-label="Choose theme">
                    <span class="theme-swatch current-theme-swatch blue"></span>
                    <span class="current-theme-name">Blue</span>
                    <i class="fas fa-chevron-down header-control-btn__chevron" aria-hidden="true"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right dashboard-theme-menu">
                    <div class="dashboard-theme-menu__header">
                        <strong>Appearance</strong>
                    </div>
                    <div class="dashboard-theme-menu__options">
                        <button class="theme-option" data-theme="green" type="button" aria-label="Green theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch green"></span></span>
                            <span class="theme-option__copy"><strong>Green</strong><small>Fresh</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                        <button class="theme-option" data-theme="blue" type="button" aria-label="Blue theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch blue"></span></span>
                            <span class="theme-option__copy"><strong>Blue</strong><small>Default</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                        <button class="theme-option" data-theme="purple" type="button" aria-label="Purple theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch purple"></span></span>
                            <span class="theme-option__copy"><strong>Purple</strong><small>Bold</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                        <button class="theme-option" data-theme="red" type="button" aria-label="Red theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch red"></span></span>
                            <span class="theme-option__copy"><strong>Red</strong><small>Vivid</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                        <button class="theme-option" data-theme="yellow" type="button" aria-label="Yellow theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch yellow"></span></span>
                            <span class="theme-option__copy"><strong>Yellow</strong><small>Warm</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                        <button class="theme-option" data-theme="black" type="button" aria-label="Black theme">
                            <span class="theme-option__swatch-wrap"><span class="theme-swatch black"></span></span>
                            <span class="theme-option__copy"><strong>Black</strong><small>Dark</small></span>
                            <span class="theme-option__check"><i class="fas fa-check"></i></span>
                        </button>
                    </div>
                </div>
            </div>
            {if $loggedin}
                <div class="dropdown hostique-order-user-menu">
                    <button class="hostique-order-control hostique-order-control--user" type="button" data-toggle="dropdown" aria-expanded="false" aria-label="{lang key='clientareatitle'}">
                        <span class="hostique-order-user-menu__avatar">
                            {if $clientsdetails.firstname}{$clientsdetails.firstname|substr:0:1|upper}{elseif $loggedinuser.firstname}{$loggedinuser.firstname|substr:0:1|upper}{else}U{/if}
                        </span>
                        <span class="hostique-order-user-menu__meta">
                            <strong>{if $clientsdetails.firstname}{$clientsdetails.firstname} {$clientsdetails.lastname}{elseif $loggedinuser.firstname}{$loggedinuser.firstname} {$loggedinuser.lastname}{else}{lang key='clientareatitle'}{/if}</strong>
                            <small>{lang key='clientareatitle'}</small>
                        </span>
                        <i class="fas fa-chevron-down header-control-btn__chevron" aria-hidden="true"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right hostique-order-user-menu__dropdown">
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M9 4v16"></path><path d="M13 9h4"></path><path d="M13 13h4"></path></svg>
                            </span>
                            <span>{lang key='clientareatitle'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=services">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"></rect><path d="M8 20h8"></path></svg>
                            </span>
                            <span>{lang key='navservices'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=domains">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"></path></svg>
                            </span>
                            <span>{lang key='navdomains'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=invoices">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 10h18"></path></svg>
                            </span>
                            <span>{lang key='navinvoices'}</span>
                        </a>
                        <a class="dropdown-item d-lg-none" href="{$WEB_ROOT}/supporttickets.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><path d="M18 10a6 6 0 1 0-12 0v5a2 2 0 0 0 2 2h2v-5H8"></path><path d="M16 17h2a2 2 0 0 0 2-2v-5"></path><path d="M12 19v2"></path></svg>
                            </span>
                            <span>{lang key='navtickets'}</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item hostique-order-user-menu__logout" href="{$WEB_ROOT}/logout.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><path d="M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"></path><path d="M10 17l5-5-5-5"></path><path d="M15 12H4"></path></svg>
                            </span>
                            <span>{lang key='logout'}</span>
                        </a>
                    </div>
                </div>
            {else}
                <a class="hostique-order-control" href="{$WEB_ROOT}/index.php?rp=/login" aria-label="{lang key='login'}">
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.25"></circle><path d="M5 20a7 7 0 0 1 14 0"></path></svg>
                </a>
            {/if}
            <a class="hostique-order-control hostique-order-control--cart" href="{$WEB_ROOT}/cart.php?a=view" aria-label="{lang key='carttitle'}">
                <svg viewBox="0 0 24 24"><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle><path d="M3 4h2l2.1 10.2a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 7H7"></path></svg>
                {assign var="orderCartCount" value=$cartitems|default:$cartitemcount|default:0}
                {if $orderCartCount > 0}
                    <span class="hostique-order-control__badge">{$orderCartCount}</span>
                {/if}
            </a>
        </div>
    </div>
</div>

<script>
(function () {
    var themeMap = {
        green: { hue: "160", sat: "84%", primaryLightness: "32%", primary: "#0d9766", primaryRgb: "13, 151, 102", accent: "#1bb79b", accentRgb: "27, 183, 155", gradient: "linear-gradient(135deg, #0d9766 0%, #1bb79b 100%)", primaryHover: "#0c8e60", primaryActive: "#096f4b", hoverGradient: "linear-gradient(135deg, #0c8e60 0%, #19aa91 100%)" },
        blue: { hue: "217", sat: "92%", primaryLightness: "53%", primary: "#156cff", primaryRgb: "21, 108, 255", accent: "#00a3ff", accentRgb: "0, 163, 255", gradient: "linear-gradient(135deg, #156cff 0%, #00a3ff 100%)", primaryHover: "#0f5ee4", primaryActive: "#0a47b3", hoverGradient: "linear-gradient(135deg, #0f5ee4 0%, #0092e6 100%)" },
        purple: { hue: "267", sat: "68%", primaryLightness: "51%", primary: "#6d2bd7", primaryRgb: "109, 43, 215", accent: "#b03ced", accentRgb: "176, 60, 237", gradient: "linear-gradient(135deg, #6d2bd7 0%, #b03ced 100%)", primaryHover: "#5f24c3", primaryActive: "#4f1ca7", hoverGradient: "linear-gradient(135deg, #5f24c3 0%, #9d35e3 100%)" },
        red: { hue: "349", sat: "61%", primaryLightness: "51%", primary: "#cf334d", primaryRgb: "207, 51, 77", accent: "#f26b7a", accentRgb: "242, 107, 122", gradient: "linear-gradient(135deg, #cf334d 0%, #f26b7a 100%)", primaryHover: "#b82d44", primaryActive: "#962539", hoverGradient: "linear-gradient(135deg, #b82d44 0%, #e75f70 100%)" },
        yellow: { hue: "38", sat: "82%", primaryLightness: "40%", primary: "#b87412", primaryRgb: "184, 116, 18", accent: "#e9a72f", accentRgb: "233, 167, 47", gradient: "linear-gradient(135deg, #b87412 0%, #e9a72f 100%)", primaryHover: "#a5660f", primaryActive: "#874f08", hoverGradient: "linear-gradient(135deg, #a5660f 0%, #d99a29 100%)" },
        black: { hue: "220", sat: "22%", primaryLightness: "13%", primary: "#111827", primaryRgb: "17, 24, 39", accent: "#374151", accentRgb: "55, 65, 81", gradient: "linear-gradient(135deg, #111827 0%, #374151 100%)", primaryHover: "#0b1220", primaryActive: "#050a14", hoverGradient: "linear-gradient(135deg, #0b1220 0%, #2f3947 100%)" }
    };
    var themeLabels = { green: "Green", blue: "Blue", purple: "Purple", red: "Red", yellow: "Yellow", black: "Black" };

    function applyOrderTheme(themeName) {
        var theme = themeMap[themeName] || themeMap.blue;
        var root = document.documentElement;

        if (window.HostiqueBranding && typeof window.HostiqueBranding.applyThemeBranding === "function") {
            window.HostiqueBranding.applyThemeBranding(themeName);
        } else {
            root.style.setProperty("--hue", theme.hue);
            root.style.setProperty("--sat", theme.sat);
            root.style.setProperty("--primary-lightness", theme.primaryLightness);
            root.style.setProperty("--brand-primary", theme.primary);
            root.style.setProperty("--brand-primary-rgb", theme.primaryRgb);
            root.style.setProperty("--brand-primary-hover", theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-primary-active", theme.primaryActive || theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-accent", theme.accent);
            root.style.setProperty("--brand-accent-rgb", theme.accentRgb);
            root.style.setProperty("--primary", theme.primary);
            root.style.setProperty("--primary-rgb", theme.primaryRgb);
            root.style.setProperty("--accent", theme.accent);
            root.style.setProperty("--accent-rgb", theme.accentRgb);
            root.style.setProperty("--gradient-primary", theme.gradient);
            root.style.setProperty("--gradient-primary-hover", theme.hoverGradient);
            root.style.setProperty("--primary-hover", theme.primaryHover || theme.primary);
        }

        document.body.setAttribute("data-theme", themeName);

        document.querySelectorAll(".current-theme-swatch").forEach(function (node) {
            node.className = "theme-swatch current-theme-swatch " + themeName;
        });

        document.querySelectorAll(".current-theme-name").forEach(function (node) {
            node.textContent = themeLabels[themeName] || "Theme";
        });

        document.querySelectorAll(".theme-option").forEach(function (button) {
            var active = button.getAttribute("data-theme") === themeName;
            button.classList.toggle("active", active);
            button.setAttribute("aria-pressed", active ? "true" : "false");
        });

        try {
            localStorage.setItem("hostique-theme", themeName);
        } catch (e) {}
    }

    var initialTheme = "blue";
    var themeMigrationKey = "hostique-theme-default-blue-v1";
    try {
        var storedTheme = localStorage.getItem("hostique-theme") || localStorage.getItem("cloudhosting-theme");
        var migratedDefault = localStorage.getItem(themeMigrationKey);

        if (!migratedDefault && (!storedTheme || storedTheme === "green")) {
            localStorage.setItem("hostique-theme", "blue");
            localStorage.setItem(themeMigrationKey, "true");
            initialTheme = "blue";
        } else {
            initialTheme = storedTheme || initialTheme;
        }
    } catch (e) {}

    applyOrderTheme(initialTheme);

    document.addEventListener("click", function (event) {
        var option = event.target.closest(".theme-option");
        if (!option) {
            return;
        }

        applyOrderTheme(option.getAttribute("data-theme") || "blue");
    });
})();
</script>
