<template>
    <nav class="bg-white">
        <!-- Primary Navigation Menu -->
        <div class="px-4 mx-auto sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex flex-1">
                    <!-- Logo -->
                    <div class="flex items-center shrink-0">
                        <Link :href="route('welcome-no-redirect')">
                            <JetApplicationMark class="block w-auto h-9" />
                        </Link>
                    </div>

                    <!-- Navigation Links -->
                    <div
                        class="hidden space-x-8 sm:-my-px lg:ml-10 lg:flex"
                        v-if="$page.props.current_user"
                    >
                        <!-- Engineer Links -->
                        <template v-if="$page.props.current_user.is_engineer">
                            <JetNavLink
                                :href="route('engineer.dashboard')"
                                :active="route().current('engineer.dashboard')"
                            >
                                {{ $t("Register.dashord") }}
                            </JetNavLink>

                            <JetNavLink
                                :href="route('projects.index')"
                                :active="route().current('projects.index')"
                            >
                                {{ $t("Register.projects") }}
                            </JetNavLink>

                            <JetNavLink
                                :href="route('engineer.proposals.index')"
                                :active="
                                    route().current('engineer.proposals.index')
                                "
                            >
                                {{ $t("proposals") }}
                            </JetNavLink>

                            <span class="relative inline-flex items-center">
                                <JetDropdown align="left" width="210">
                                    <template #trigger>
                                        <button
                                            class="flex items-center justify-center gap-1 text-sm font-medium text-gray-300 transition border-2 border-transparent rounded-full focus:outline-none focus:border-transparent"
                                        >
                                            {{ $t("Register.myservices") }}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                class="text-gray-300 icon icon-tabler icon-tabler-chevron-down"
                                                width="12"
                                                height="12"
                                                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"
                                                />
                                                <polyline
                                                    points="6 9 12 15 18 9"
                                                />
                                            </svg>
                                        </button>
                                    </template>

                                    <template #content>
                                        <JetDropdownLink
                                            :href="
                                                route('engineer.services.index')
                                            "
                                        >
                                            <span
                                                class="flex items-center justify-start gap-2.5"
                                            >
                                                <svg
                                                    width="33"
                                                    height="32"
                                                    viewBox="0 0 33 32"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <rect
                                                        x="0.887695"
                                                        width="32"
                                                        height="32"
                                                        rx="16"
                                                        fill="#F5F7F9"
                                                    />
                                                    <g
                                                        clip-path="url(#clip0_922_64135)"
                                                    >
                                                        <path
                                                            d="M16.8874 17.6663C17.8078 17.6663 18.554 16.9201 18.554 15.9997C18.554 15.0792 17.8078 14.333 16.8874 14.333C15.9669 14.333 15.2207 15.0792 15.2207 15.9997C15.2207 16.9201 15.9669 17.6663 16.8874 17.6663Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M25.2214 16.0003C22.9989 19.8895 20.2214 21.8337 16.888 21.8337C13.5547 21.8337 10.7772 19.8895 8.55469 16.0003C10.7772 12.1112 13.5547 10.167 16.888 10.167C20.2214 10.167 22.9989 12.1112 25.2214 16.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </g>
                                                    <defs>
                                                        <clipPath
                                                            id="clip0_922_64135"
                                                        >
                                                            <rect
                                                                width="20"
                                                                height="20"
                                                                fill="white"
                                                                transform="translate(6.8877 6)"
                                                            />
                                                        </clipPath>
                                                    </defs>
                                                </svg>

                                                {{ $t("Register.services") }}
                                            </span>
                                        </JetDropdownLink>

                                        <div
                                            class="border-t-[0.5px] border-gray-200/50"
                                        />

                                        <JetDropdownLink
                                            :href="
                                                route(
                                                    'engineer.services.index'
                                                ) + '?section=orders'
                                            "
                                        >
                                            <span
                                                class="flex items-center justify-start gap-2.5"
                                            >
                                                <svg
                                                    width="33"
                                                    height="33"
                                                    viewBox="0 0 33 33"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <rect
                                                        x="0.887695"
                                                        y="0.5"
                                                        width="32"
                                                        height="32"
                                                        rx="16"
                                                        fill="#F5F7F9"
                                                    />
                                                    <g
                                                        clip-path="url(#clip0_922_64140)"
                                                    >
                                                        <path
                                                            d="M11.8874 24.0003C12.8078 24.0003 13.554 23.2541 13.554 22.3337C13.554 21.4132 12.8078 20.667 11.8874 20.667C10.9669 20.667 10.2207 21.4132 10.2207 22.3337C10.2207 23.2541 10.9669 24.0003 11.8874 24.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M21.0544 24.0003C21.9748 24.0003 22.721 23.2541 22.721 22.3337C22.721 21.4132 21.9748 20.667 21.0544 20.667C20.1339 20.667 19.3877 21.4132 19.3877 22.3337C19.3877 23.2541 20.1339 24.0003 21.0544 24.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M21.054 20.6667H11.8874V9H10.2207"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M11.8877 10.667L16.8919 11.0245M22.8402 16.502L22.721 17.3337H11.8877"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M19.3877 11.5H24.3877M21.8877 9V14"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </g>
                                                    <defs>
                                                        <clipPath
                                                            id="clip0_922_64140"
                                                        >
                                                            <rect
                                                                width="20"
                                                                height="20"
                                                                fill="white"
                                                                transform="translate(6.8877 6.5)"
                                                            />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                {{ $t("Register.orders") }}
                                            </span>
                                        </JetDropdownLink>
                                    </template>
                                </JetDropdown>
                            </span>
                        </template>

                        <!-- Firm Links -->
                        <template v-else-if="$page.props.current_user.is_firm">
                            <JetNavLink
                                :href="route('firm.dashboard')"
                                :active="route().current('firm.dashboard')"
                            >
                                {{ $t("Register.dashord") }}
                            </JetNavLink>

                            <JetNavLink
                                :href="route('projects.index')"
                                :active="route().current('projects.index')"
                            >
                                {{ $t("Register.projects") }}
                            </JetNavLink>

                            <JetNavLink
                                :href="route('firm.proposals.index')"
                                :active="
                                    route().current('firm.proposals.index')
                                "
                            >
                                {{ $t("proposals") }}
                            </JetNavLink>

                            <span class="relative inline-flex items-center">
                                <JetDropdown align="left" width="210">
                                    <template #trigger>
                                        <button
                                            class="flex items-center justify-center gap-1 text-sm font-medium text-gray-300 transition border-2 border-transparent rounded-full focus:outline-none focus:border-transparent"
                                        >
                                            {{ $t("Register.myservices") }}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                class="text-gray-300 icon icon-tabler icon-tabler-chevron-down"
                                                width="12"
                                                height="12"
                                                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"
                                                />
                                                <polyline
                                                    points="6 9 12 15 18 9"
                                                />
                                            </svg>
                                        </button>
                                    </template>

                                    <template #content>
                                        <JetDropdownLink
                                            :href="route('firm.services.index')"
                                        >
                                            <span
                                                class="flex items-center justify-start gap-2.5"
                                            >
                                                <svg
                                                    width="33"
                                                    height="32"
                                                    viewBox="0 0 33 32"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <rect
                                                        x="0.887695"
                                                        width="32"
                                                        height="32"
                                                        rx="16"
                                                        fill="#F5F7F9"
                                                    />
                                                    <g
                                                        clip-path="url(#clip0_922_64135)"
                                                    >
                                                        <path
                                                            d="M16.8874 17.6663C17.8078 17.6663 18.554 16.9201 18.554 15.9997C18.554 15.0792 17.8078 14.333 16.8874 14.333C15.9669 14.333 15.2207 15.0792 15.2207 15.9997C15.2207 16.9201 15.9669 17.6663 16.8874 17.6663Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M25.2214 16.0003C22.9989 19.8895 20.2214 21.8337 16.888 21.8337C13.5547 21.8337 10.7772 19.8895 8.55469 16.0003C10.7772 12.1112 13.5547 10.167 16.888 10.167C20.2214 10.167 22.9989 12.1112 25.2214 16.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </g>
                                                    <defs>
                                                        <clipPath
                                                            id="clip0_922_64135"
                                                        >
                                                            <rect
                                                                width="20"
                                                                height="20"
                                                                fill="white"
                                                                transform="translate(6.8877 6)"
                                                            />
                                                        </clipPath>
                                                    </defs>
                                                </svg>

                                                {{ $t("Register.services") }}
                                            </span>
                                        </JetDropdownLink>

                                        <div
                                            class="border-t-[0.5px] border-gray-200/50"
                                        />

                                        <JetDropdownLink
                                            :href="
                                                route('firm.services.index') +
                                                '?section=orders'
                                            "
                                        >
                                            <span
                                                class="flex items-center justify-start gap-2.5"
                                            >
                                                <svg
                                                    width="33"
                                                    height="33"
                                                    viewBox="0 0 33 33"
                                                    fill="none"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <rect
                                                        x="0.887695"
                                                        y="0.5"
                                                        width="32"
                                                        height="32"
                                                        rx="16"
                                                        fill="#F5F7F9"
                                                    />
                                                    <g
                                                        clip-path="url(#clip0_922_64140)"
                                                    >
                                                        <path
                                                            d="M11.8874 24.0003C12.8078 24.0003 13.554 23.2541 13.554 22.3337C13.554 21.4132 12.8078 20.667 11.8874 20.667C10.9669 20.667 10.2207 21.4132 10.2207 22.3337C10.2207 23.2541 10.9669 24.0003 11.8874 24.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M21.0544 24.0003C21.9748 24.0003 22.721 23.2541 22.721 22.3337C22.721 21.4132 21.9748 20.667 21.0544 20.667C20.1339 20.667 19.3877 21.4132 19.3877 22.3337C19.3877 23.2541 20.1339 24.0003 21.0544 24.0003Z"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M21.054 20.6667H11.8874V9H10.2207"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M11.8877 10.667L16.8919 11.0245M22.8402 16.502L22.721 17.3337H11.8877"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                        <path
                                                            d="M19.3877 11.5H24.3877M21.8877 9V14"
                                                            stroke="#29419B"
                                                            stroke-width="1.5"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </g>
                                                    <defs>
                                                        <clipPath
                                                            id="clip0_922_64140"
                                                        >
                                                            <rect
                                                                width="20"
                                                                height="20"
                                                                fill="white"
                                                                transform="translate(6.8877 6.5)"
                                                            />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                {{ $t("Register.orders") }}
                                            </span>
                                        </JetDropdownLink>
                                    </template>
                                </JetDropdown>
                            </span>
                        </template>

                        <!-- User Links -->
                        <template v-else>
                            <JetNavLink
                                :href="route('client.dashboard')"
                                :active="route().current('client.dashboard')"
                            >
                                {{ $t("Register.dashord") }}
                            </JetNavLink>
                            <JetNavLink
                                :href="route('client.projects.index')"
                                :active="
                                    route().current('client.projects.index')
                                "
                            >
                                {{ $t("Register.my_projects") }}
                            </JetNavLink>
                            <JetNavLink
                                :href="route('services.index')"
                                :active="route().current('services.index')"
                            >
                                {{ $t("Register.services") }}
                            </JetNavLink>
                        </template>
                    </div>
                    <div
                        class="hidden gap-2.5 sm:-my-px sm:ml-10 sm:flex items-center justify-end flex-1"
                        v-else
                    >
                        <Button
                            size="landing"
                            :href="route('login')"
                            buttonStyle="light_blue"
                        >
                            {{ $t("Register.login") }}
                        </Button>
                        <span class="h-4 w-[1px] bg-blue-200"></span>
                        <Button size="landing_lg" :href="route('register')">
                            {{ $t("Register.register") }}
                        </Button>
                    </div>
                </div>

                <div
                    v-if="$page.props.current_user"
                    class="flex-row-reverse hidden gap-5 lg:flex lg:items-center"
                >
                    <div class="relative flex-1">
                        <JetDropdown
                            :align="$i18n.locale == 'en' ? 'right' : 'left'"
                            width="210"
                        >
                            <template #trigger>
                                <button
                                    v-if="
                                        $page.props.jetstream
                                            .managesProfilePhotos
                                    "
                                    class="flex items-center justify-center gap-1 text-sm text-gray-300 transition border-2 border-transparent rounded-full focus:outline-none focus:border-transparent"
                                >
                                    <img
                                        class="object-cover w-8 h-8 rounded-full no-magnify"
                                        :src="
                                            $page.props.current_user
                                                .profile_photo_url
                                        "
                                        :alt="$page.props.current_user.name"
                                    />
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        class="text-gray-300 icon icon-tabler icon-tabler-chevron-down"
                                        width="12"
                                        height="12"
                                        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"
                                        />
                                        <polyline points="6 9 12 15 18 9" />
                                    </svg>
                                </button>

                                <span v-else class="inline-flex rounded-md">
                                    <button
                                        type="button"
                                        class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition bg-white border border-transparent rounded-md hover:text-gray-700 focus:outline-none"
                                    >
                                        {{ $page.props.current_user.name }}

                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            class="text-gray-300 icon icon-tabler icon-tabler-chevron-down"
                                            width="12"
                                            height="12"
                                            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"
                                            />
                                            <polyline points="6 9 12 15 18 9" />
                                        </svg>
                                    </button>
                                </span>
                            </template>

                            <template #content>
                                <template
                                    v-if="
                                        $page.props.current_user?.is_engineer ||
                                        $page.props.current_user?.is_firm
                                    "
                                >
                                    <span
                                        class="px-4 text-xs font-semibold text-gray-200"
                                        >{{
                                            $t("Register.worker_information")
                                        }}</span
                                    >

                                    <JetDropdownLink
                                        v-if="
                                            $page.props.current_user.is_engineer
                                        "
                                        :href="route('engineer.profile', '')"
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="33"
                                                viewBox="0 0 33 33"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.666504"
                                                    y="0.25"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <path
                                                    d="M16.6666 15.4167C18.5075 15.4167 19.9999 13.9243 19.9999 12.0833C19.9999 10.2424 18.5075 8.75 16.6666 8.75C14.8256 8.75 13.3333 10.2424 13.3333 12.0833C13.3333 13.9243 14.8256 15.4167 16.6666 15.4167Z"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                                <path
                                                    d="M11.6665 23.75V22.0833C11.6665 21.1993 12.0177 20.3514 12.6428 19.7263C13.2679 19.1012 14.1158 18.75 14.9998 18.75H18.3332C19.2172 18.75 20.0651 19.1012 20.6902 19.7263C21.3153 20.3514 21.6665 21.1993 21.6665 22.0833V23.75"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>
                                            {{
                                                $t(
                                                    "Register.engineer_information"
                                                )
                                            }}
                                        </span>
                                    </JetDropdownLink>
                                    <JetDropdownLink
                                        v-if="$page.props.current_user.is_firm"
                                        :href="route('firm.profile', '')"
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="33"
                                                viewBox="0 0 33 33"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.666504"
                                                    y="0.25"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <path
                                                    d="M16.6666 15.4167C18.5075 15.4167 19.9999 13.9243 19.9999 12.0833C19.9999 10.2424 18.5075 8.75 16.6666 8.75C14.8256 8.75 13.3333 10.2424 13.3333 12.0833C13.3333 13.9243 14.8256 15.4167 16.6666 15.4167Z"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                                <path
                                                    d="M11.6665 23.75V22.0833C11.6665 21.1993 12.0177 20.3514 12.6428 19.7263C13.2679 19.1012 14.1158 18.75 14.9998 18.75H18.3332C19.2172 18.75 20.0651 19.1012 20.6902 19.7263C21.3153 20.3514 21.6665 21.1993 21.6665 22.0833V23.75"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>
                                            {{
                                                $t("Register.firm_information")
                                            }}
                                        </span>
                                    </JetDropdownLink>
                                    <div
                                        class="border-t-[0.5px] border-gray-200/50"
                                    />
                                </template>
                                <!-- Account Management -->
                                <span
                                    class="px-4 text-xs font-semibold text-gray-200"
                                    >{{
                                        $t("Register.account_information")
                                    }}</span
                                >
                                <JetDropdownLink
                                    v-if="
                                        !$page.props.current_user?.is_firm &&
                                        !$page.props.current_user?.is_engineer
                                    "
                                    :href="route('settings.show')"
                                >
                                    <span
                                        class="flex items-center justify-start gap-2.5"
                                    >
                                        <svg
                                            width="33"
                                            height="33"
                                            viewBox="0 0 33 33"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <rect
                                                x="0.666504"
                                                y="0.25"
                                                width="32"
                                                height="32"
                                                rx="16"
                                                fill="#F5F7F9"
                                            />
                                            <path
                                                d="M16.6666 15.4167C18.5075 15.4167 19.9999 13.9243 19.9999 12.0833C19.9999 10.2424 18.5075 8.75 16.6666 8.75C14.8256 8.75 13.3333 10.2424 13.3333 12.0833C13.3333 13.9243 14.8256 15.4167 16.6666 15.4167Z"
                                                stroke="#29419B"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M11.6665 23.75V22.0833C11.6665 21.1993 12.0177 20.3514 12.6428 19.7263C13.2679 19.1012 14.1158 18.75 14.9998 18.75H18.3332C19.2172 18.75 20.0651 19.1012 20.6902 19.7263C21.3153 20.3514 21.6665 21.1993 21.6665 22.0833V23.75"
                                                stroke="#29419B"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                        {{ $t("Register.my_profile") }}
                                    </span>
                                </JetDropdownLink>

                                <JetDropdownLink
                                    :href="route('settings.security.show')"
                                >
                                    <span
                                        class="flex items-center justify-start gap-2.5"
                                    >
                                        <svg
                                            width="33"
                                            height="33"
                                            viewBox="0 0 33 33"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <rect
                                                x="0.666504"
                                                y="0.25"
                                                width="32"
                                                height="32"
                                                rx="16"
                                                fill="#F5F7F9"
                                            />
                                            <path
                                                d="M20.8333 15.4167H12.4999C11.5794 15.4167 10.8333 16.1628 10.8333 17.0833V22.0833C10.8333 23.0038 11.5794 23.75 12.4999 23.75H20.8333C21.7537 23.75 22.4999 23.0038 22.4999 22.0833V17.0833C22.4999 16.1628 21.7537 15.4167 20.8333 15.4167Z"
                                                stroke="#29419B"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M16.6666 20.4167C17.1268 20.4167 17.4999 20.0436 17.4999 19.5833C17.4999 19.1231 17.1268 18.75 16.6666 18.75C16.2063 18.75 15.8333 19.1231 15.8333 19.5833C15.8333 20.0436 16.2063 20.4167 16.6666 20.4167Z"
                                                stroke="#29419B"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M13.3333 15.4167V12.0833C13.3333 11.1993 13.6844 10.3514 14.3096 9.72631C14.9347 9.10119 15.7825 8.75 16.6666 8.75C17.5506 8.75 18.3985 9.10119 19.0236 9.72631C19.6487 10.3514 19.9999 11.1993 19.9999 12.0833V15.4167"
                                                stroke="#29419B"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>

                                        {{
                                            $t("Register.security_information")
                                        }}
                                    </span>
                                </JetDropdownLink>

                                <div
                                    class="border-t-[0.5px] border-gray-200/50"
                                />

                                <!-- Authentication -->
                                <form @submit.prevent="logout">
                                    <JetDropdownLink as="button">
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="33"
                                                viewBox="0 0 33 33"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.666504"
                                                    y="0.75"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <path
                                                    d="M18.3332 13.4167V11.75C18.3332 11.308 18.1576 10.8841 17.845 10.5715C17.5325 10.2589 17.1085 10.0833 16.6665 10.0833H10.8332C10.3911 10.0833 9.96722 10.2589 9.65466 10.5715C9.3421 10.8841 9.1665 11.308 9.1665 11.75V21.75C9.1665 22.192 9.3421 22.616 9.65466 22.9285C9.96722 23.2411 10.3911 23.4167 10.8332 23.4167H16.6665C17.1085 23.4167 17.5325 23.2411 17.845 22.9285C18.1576 22.616 18.3332 22.192 18.3332 21.75V20.0833"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                                <path
                                                    d="M12.4998 16.75H24.1664L21.6664 14.25M21.6664 19.25L24.1664 16.75"
                                                    stroke="#29419B"
                                                    stroke-width="1.5"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>

                                            {{ $t("Register.logout") }}
                                        </span>
                                    </JetDropdownLink>
                                </form>
                            </template>
                        </JetDropdown>
                    </div>
                    <span class="h-4 w-[1px] bg-blue-200"></span>
                    <div
                        class="flex flex-row-reverse items-center justify-center gap-4"
                    >
                        <JetDropdown
                            :align="$i18n.locale == 'en' ? 'right' : 'left'"
                            width="400"
                            maxHeight="400"
                        >
                            <template #trigger>
                                <Button
                                    size="sq-rounded-default"
                                    buttonStyle="light_blue"
                                    class="relative"
                                    @click="clearNotifications"
                                >
                                    <svg
                                        width="20"
                                        height="20"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g clip-path="url(#clip0_4234_22191)">
                                            <path
                                                d="M8.33334 4.16667C8.33334 3.72464 8.50894 3.30072 8.8215 2.98816C9.13406 2.67559 9.55798 2.5 10 2.5C10.442 2.5 10.866 2.67559 11.1785 2.98816C11.4911 3.30072 11.6667 3.72464 11.6667 4.16667C12.6237 4.61919 13.4395 5.32361 14.0267 6.20442C14.6139 7.08523 14.9504 8.10923 15 9.16667V11.6667C15.0627 12.1848 15.2462 12.6809 15.5357 13.1151C15.8252 13.5493 16.2126 13.9095 16.6667 14.1667H3.33334C3.78746 13.9095 4.17485 13.5493 4.46433 13.1151C4.75381 12.6809 4.9373 12.1848 5.00001 11.6667V9.16667C5.04964 8.10923 5.38609 7.08523 5.9733 6.20442C6.56051 5.32361 7.37634 4.61919 8.33334 4.16667"
                                                stroke="#222222"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M7.5 14.1665V14.9998C7.5 15.6629 7.76339 16.2988 8.23223 16.7676C8.70107 17.2364 9.33696 17.4998 10 17.4998C10.663 17.4998 11.2989 17.2364 11.7678 16.7676C12.2366 16.2988 12.5 15.6629 12.5 14.9998V14.1665"
                                                stroke="#222222"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_4234_22191">
                                                <rect
                                                    width="20"
                                                    height="20"
                                                    fill="white"
                                                />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <span
                                        v-if="unreadNotificationsCount"
                                        class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                                    >
                                        {{ unreadNotificationsCount }}
                                    </span>
                                </Button>
                            </template>
                            <template #content>
                                <div class="flex flex-col w-full px-5">
                                    <div
                                        class="flex items-center justify-between w-full py-5"
                                    >
                                        <span
                                            class="text-sm font-medium text-blue-300"
                                        >
                                            {{ $t("profile.notifications") }}
                                        </span>
                                    </div>
                                    <hr />
                                    <ul
                                        class="flex flex-col gap-2 py-5 divide-y divide-blue-200"
                                    >
                                        <template
                                            v-if="
                                                $page.props.current_user
                                                    .allNotifications.length > 0
                                            "
                                        >
                                            <li
                                                class="flex gap-0.5 hover:bg-blue-100 rounded-md cursor-pointer px-1"
                                                v-for="notification in $page
                                                    .props.current_user
                                                    .allNotifications"
                                                :key="notification.id"
                                            >
                                                <span
                                                    v-if="!notification.read_at"
                                                    class="w-1.5 h-1.5 mt-4 bg-blue-300 rounded-full"
                                                ></span>
                                                <JetDropdownLink
                                                    class="flex-1"
                                                    :href="
                                                        notification.data
                                                            .relative_url
                                                    "
                                                >
                                                    <span
                                                        class="flex flex-col items-start justify-center gap-2.5"
                                                    >
                                                        <span
                                                            class="text-sm font-medium"
                                                            :class="{
                                                                'text-blue-300':
                                                                    !notification.read_at,
                                                                'text-gray-300':
                                                                    notification.read_at,
                                                            }"
                                                        >
                                                            {{
                                                                $i18n.locale ===
                                                                "en"
                                                                    ? notification
                                                                          .data
                                                                          .title
                                                                    : notification
                                                                          .data
                                                                          .title_ar
                                                            }}
                                                        </span>
                                                        <span
                                                            class="text-xs text-gray-200 line-clamp-3"
                                                        >
                                                            {{
                                                                $i18n.locale ===
                                                                "en"
                                                                    ? notification
                                                                          .data
                                                                          .description
                                                                    : notification
                                                                          .data
                                                                          .description_ar
                                                            }}
                                                        </span>
                                                        <span
                                                            class="text-gray-200/75 text-2xs"
                                                        >
                                                            {{
                                                                moment(
                                                                    notification.created_at
                                                                ).fromNow()
                                                            }}
                                                        </span>
                                                    </span>
                                                </JetDropdownLink>
                                            </li>
                                        </template>
                                        <li v-else class="flex gap-0.5 px-1">
                                            <span
                                                class="text-xs text-gray-200 line-clamp-3"
                                            >
                                                {{ $t("Register.no_thing") }}
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </JetDropdown>
                        <Button
                            v-if="$page.props.current_user.is_engineer"
                            size="sq-rounded-default"
                            buttonStyle="light_blue"
                            :href="route('engineer.chat')"
                            class="relative"
                        >
                            <svg
                                width="20"
                                height="20"
                                viewBox="0 0 20 20"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_4103_1903)">
                                    <path
                                        d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6.6665 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M13.3335 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_4103_1903">
                                        <rect
                                            width="20"
                                            height="20"
                                            fill="white"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                            <span
                                v-if="
                                    $page.props.current_user.unreadMessageCount
                                "
                                class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                            >
                                {{
                                    $page.props.current_user.unreadMessageCount
                                }}
                            </span>
                        </Button>
                        <Button
                            v-else-if="$page.props.current_user.is_firm"
                            size="sq-rounded-default"
                            buttonStyle="light_blue"
                            class="relative"
                            :href="route('firm.chat')"
                        >
                            <svg
                                width="20"
                                height="20"
                                viewBox="0 0 20 20"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_4103_1903)">
                                    <path
                                        d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6.6665 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M13.3335 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_4103_1903">
                                        <rect
                                            width="20"
                                            height="20"
                                            fill="white"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                            <span
                                v-if="
                                    $page.props.current_user.unreadMessageCount
                                "
                                class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                            >
                                {{
                                    $page.props.current_user.unreadMessageCount
                                }}
                            </span>
                        </Button>
                        <Button
                            v-else
                            size="sq-rounded-default"
                            buttonStyle="light_blue"
                            :href="route('client.chat')"
                            class="relative"
                        >
                            <svg
                                width="20"
                                height="20"
                                viewBox="0 0 20 20"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_4103_1903)">
                                    <path
                                        d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6.6665 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M13.3335 10V10.0083"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_4103_1903">
                                        <rect
                                            width="20"
                                            height="20"
                                            fill="white"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                            <span
                                v-if="
                                    $page.props.current_user.unreadMessageCount
                                "
                                class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                            >
                                {{
                                    $page.props.current_user.unreadMessageCount
                                }}
                            </span>
                        </Button>
                        <Button
                            size="sq-rounded-default"
                            buttonStyle="light_blue"
                            :href="route('user.wallet')"
                        >
                            <svg
                                width="20"
                                height="20"
                                viewBox="0 0 20 20"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_4103_1898)">
                                    <path
                                        d="M14.1668 6.66683V4.16683C14.1668 3.94582 14.079 3.73385 13.9228 3.57757C13.7665 3.42129 13.5545 3.3335 13.3335 3.3335H5.00016C4.55814 3.3335 4.13421 3.50909 3.82165 3.82165C3.50909 4.13421 3.3335 4.55814 3.3335 5.00016C3.3335 5.44219 3.50909 5.86611 3.82165 6.17867C4.13421 6.49123 4.55814 6.66683 5.00016 6.66683H15.0002C15.2212 6.66683 15.4331 6.75463 15.5894 6.91091C15.7457 7.06719 15.8335 7.27915 15.8335 7.50016V10.0002M15.8335 13.3335V15.8335C15.8335 16.0545 15.7457 16.2665 15.5894 16.4228C15.4331 16.579 15.2212 16.6668 15.0002 16.6668H5.00016C4.55814 16.6668 4.13421 16.4912 3.82165 16.1787C3.50909 15.8661 3.3335 15.4422 3.3335 15.0002V5.00016"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M16.6665 10V13.3333H13.3332C12.8911 13.3333 12.4672 13.1577 12.1547 12.8452C11.8421 12.5326 11.6665 12.1087 11.6665 11.6667C11.6665 11.2246 11.8421 10.8007 12.1547 10.4882C12.4672 10.1756 12.8911 10 13.3332 10H16.6665Z"
                                        stroke="#222222"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_4103_1898">
                                        <rect
                                            width="20"
                                            height="20"
                                            fill="white"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </Button>
                    </div>
                </div>

                <!-- Hamburger -->
                <div class="flex items-center -mr-2 lg:hidden">
                    <button
                        class="inline-flex items-center justify-center p-2 text-gray-300 transition rounded-md focus:outline-none"
                        @click="
                            showingNavigationDropdown =
                                !showingNavigationDropdown
                        "
                    >
                        <svg
                            v-if="!showingNavigationDropdown"
                            xmlns="http://www.w3.org/2000/svg"
                            class="block w-6 h-6"
                            aria-hidden="true"
                            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" />
                            <line x1="4" y1="6" x2="20" y2="6" />
                            <line x1="4" y1="12" x2="20" y2="12" />
                            <line x1="4" y1="18" x2="20" y2="18" />
                        </svg>
                        <svg
                            v-else
                            class="block w-6 h-6"
                            viewBox="0 0 20 21"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_2099_52789)">
                                <path
                                    d="M15.8337 5.59199L14.6587 4.41699L10.0003 9.07533L5.34199 4.41699L4.16699 5.59199L8.82533 10.2503L4.16699 14.9087L5.34199 16.0837L10.0003 11.4253L14.6587 16.0837L15.8337 14.9087L11.1753 10.2503L15.8337 5.59199Z"
                                    fill="currentColor"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_2099_52789">
                                    <rect
                                        width="20"
                                        height="20"
                                        fill="white"
                                        transform="translate(0 0.25)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Responsive Navigation Menu -->
        <div
            v-auto-animate
            v-if="showingNavigationDropdown"
            class="container lg:hidden"
        >
            <div
                v-if="$page.props.current_user"
                class="flex flex-col gap-3 pt-0 pb-4"
            >
                <JetResponsiveNavLink :href="profileUrl" class="mt-4">
                    <span
                        class="flex items-center flex-1 w-full gap-2 py-2 select-none max-w-none"
                    >
                        <span
                            v-if="$page.props.jetstream.managesProfilePhotos"
                            class="shrink-0"
                        >
                            <img
                                class="object-cover w-10 h-10 rounded-full no-magnify"
                                :src="
                                    $page.props.current_user.profile_photo_url
                                "
                                :alt="$page.props.current_user.name"
                            />
                        </span>

                        <span class="flex flex-col">
                            <span class="text-base font-medium text-gray-800">
                                {{ $page.props.current_user.name }}
                            </span>
                            <span class="text-sm font-medium text-gray-500">
                                {{ $page.props.current_user.email }}
                            </span>
                        </span>
                    </span>
                </JetResponsiveNavLink>

                <hr />
                <!-- Responsive Settings Options -->
                <div class="space-y-1">
                    <p class="mb-4">
                        <span class="font-medium text-gray-500">
                            {{ $t("Register.general") }}
                        </span>
                    </p>
                    <!-- Engineer Links -->
                    <template v-if="$page.props.current_user.is_engineer">
                        <JetResponsiveNavLink
                            :href="route('engineer.dashboard')"
                            :active="route().current('engineer.dashboard')"
                        >
                            {{ $t("Register.dashord") }}
                        </JetResponsiveNavLink>

                        <JetResponsiveNavLink
                            :href="route('projects.index')"
                            :active="route().current('projects.index')"
                        >
                            {{ $t("Register.projects") }}
                        </JetResponsiveNavLink>

                        <JetResponsiveNavLink
                            :href="route('engineer.proposals.index')"
                            :active="
                                route().current('engineer.proposals.index')
                            "
                        >
                            {{ $t("proposals") }}
                        </JetResponsiveNavLink>

                        <span class="relative inline-flex items-center w-full">
                            <JetDropdown
                                class="w-full"
                                align="bottom"
                                width="full"
                            >
                                <template #trigger>
                                    <button
                                        class="flex items-center justify-between w-full gap-1 px-4 py-1 font-medium text-blue-300 transition border-2 border-transparent rounded-full focus:outline-none focus:border-transparent"
                                    >
                                        {{ $t("Register.myservices") }}
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-chevron-down"
                                            width="12"
                                            height="12"
                                            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"
                                            />
                                            <polyline points="6 9 12 15 18 9" />
                                        </svg>
                                    </button>
                                </template>

                                <template #content>
                                    <JetDropdownLink
                                        :href="route('engineer.services.index')"
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="32"
                                                viewBox="0 0 33 32"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.887695"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <g
                                                    clip-path="url(#clip0_922_64135)"
                                                >
                                                    <path
                                                        d="M16.8874 17.6663C17.8078 17.6663 18.554 16.9201 18.554 15.9997C18.554 15.0792 17.8078 14.333 16.8874 14.333C15.9669 14.333 15.2207 15.0792 15.2207 15.9997C15.2207 16.9201 15.9669 17.6663 16.8874 17.6663Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M25.2214 16.0003C22.9989 19.8895 20.2214 21.8337 16.888 21.8337C13.5547 21.8337 10.7772 19.8895 8.55469 16.0003C10.7772 12.1112 13.5547 10.167 16.888 10.167C20.2214 10.167 22.9989 12.1112 25.2214 16.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_922_64135"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(6.8877 6)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                            {{ $t("Register.services") }}
                                        </span>
                                    </JetDropdownLink>

                                    <div
                                        class="border-t-[0.5px] border-gray-200/50"
                                    />

                                    <JetDropdownLink
                                        :href="
                                            route('engineer.services.index') +
                                            '?section=orders'
                                        "
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="33"
                                                viewBox="0 0 33 33"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.887695"
                                                    y="0.5"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <g
                                                    clip-path="url(#clip0_922_64140)"
                                                >
                                                    <path
                                                        d="M11.8874 24.0003C12.8078 24.0003 13.554 23.2541 13.554 22.3337C13.554 21.4132 12.8078 20.667 11.8874 20.667C10.9669 20.667 10.2207 21.4132 10.2207 22.3337C10.2207 23.2541 10.9669 24.0003 11.8874 24.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M21.0544 24.0003C21.9748 24.0003 22.721 23.2541 22.721 22.3337C22.721 21.4132 21.9748 20.667 21.0544 20.667C20.1339 20.667 19.3877 21.4132 19.3877 22.3337C19.3877 23.2541 20.1339 24.0003 21.0544 24.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M21.054 20.6667H11.8874V9H10.2207"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M11.8877 10.667L16.8919 11.0245M22.8402 16.502L22.721 17.3337H11.8877"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M19.3877 11.5H24.3877M21.8877 9V14"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_922_64140"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(6.8877 6.5)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                            {{ $t("Register.orders") }}
                                        </span>
                                    </JetDropdownLink>
                                </template>
                            </JetDropdown>
                        </span>
                    </template>

                    <!-- Firm Links -->
                    <template v-else-if="$page.props.current_user.is_firm">
                        <JetResponsiveNavLink
                            :href="route('firm.dashboard')"
                            :active="route().current('firm.dashboard')"
                        >
                            {{ $t("Register.dashord") }}
                        </JetResponsiveNavLink>

                        <JetResponsiveNavLink
                            :href="route('projects.index')"
                            :active="route().current('projects.index')"
                        >
                            {{ $t("Register.projects") }}
                        </JetResponsiveNavLink>

                        <JetResponsiveNavLink
                            :href="route('firm.proposals.index')"
                            :active="route().current('firm.proposals.index')"
                        >
                            {{ $t("proposals") }}
                        </JetResponsiveNavLink>

                        <span class="relative inline-flex items-center w-full">
                            <JetDropdown
                                class="w-full"
                                align="bottom"
                                width="full"
                            >
                                <template #trigger>
                                    <button
                                        class="flex items-center justify-between w-full gap-1 px-4 py-1 font-medium text-blue-300 transition border-2 border-transparent rounded-full focus:outline-none focus:border-transparent"
                                    >
                                        {{ $t("Register.myservices") }}
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-chevron-down"
                                            width="12"
                                            height="12"
                                            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"
                                            />
                                            <polyline points="6 9 12 15 18 9" />
                                        </svg>
                                    </button>
                                </template>

                                <template #content>
                                    <JetDropdownLink
                                        :href="route('firm.services.index')"
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="32"
                                                viewBox="0 0 33 32"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.887695"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <g
                                                    clip-path="url(#clip0_922_64135)"
                                                >
                                                    <path
                                                        d="M16.8874 17.6663C17.8078 17.6663 18.554 16.9201 18.554 15.9997C18.554 15.0792 17.8078 14.333 16.8874 14.333C15.9669 14.333 15.2207 15.0792 15.2207 15.9997C15.2207 16.9201 15.9669 17.6663 16.8874 17.6663Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M25.2214 16.0003C22.9989 19.8895 20.2214 21.8337 16.888 21.8337C13.5547 21.8337 10.7772 19.8895 8.55469 16.0003C10.7772 12.1112 13.5547 10.167 16.888 10.167C20.2214 10.167 22.9989 12.1112 25.2214 16.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_922_64135"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(6.8877 6)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                            {{ $t("Register.services") }}
                                        </span>
                                    </JetDropdownLink>

                                    <div
                                        class="border-t-[0.5px] border-gray-200/50"
                                    />

                                    <JetDropdownLink
                                        :href="
                                            route('firm.services.index') +
                                            '?section=orders'
                                        "
                                    >
                                        <span
                                            class="flex items-center justify-start gap-2.5"
                                        >
                                            <svg
                                                width="33"
                                                height="33"
                                                viewBox="0 0 33 33"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <rect
                                                    x="0.887695"
                                                    y="0.5"
                                                    width="32"
                                                    height="32"
                                                    rx="16"
                                                    fill="#F5F7F9"
                                                />
                                                <g
                                                    clip-path="url(#clip0_922_64140)"
                                                >
                                                    <path
                                                        d="M11.8874 24.0003C12.8078 24.0003 13.554 23.2541 13.554 22.3337C13.554 21.4132 12.8078 20.667 11.8874 20.667C10.9669 20.667 10.2207 21.4132 10.2207 22.3337C10.2207 23.2541 10.9669 24.0003 11.8874 24.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M21.0544 24.0003C21.9748 24.0003 22.721 23.2541 22.721 22.3337C22.721 21.4132 21.9748 20.667 21.0544 20.667C20.1339 20.667 19.3877 21.4132 19.3877 22.3337C19.3877 23.2541 20.1339 24.0003 21.0544 24.0003Z"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M21.054 20.6667H11.8874V9H10.2207"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M11.8877 10.667L16.8919 11.0245M22.8402 16.502L22.721 17.3337H11.8877"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M19.3877 11.5H24.3877M21.8877 9V14"
                                                        stroke="#29419B"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_922_64140"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(6.8877 6.5)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                            {{ $t("Register.orders") }}
                                        </span>
                                    </JetDropdownLink>
                                </template>
                            </JetDropdown>
                        </span>
                    </template>

                    <!-- User Links -->
                    <template v-else>
                        <JetResponsiveNavLink
                            :href="route('client.dashboard')"
                            :active="route().current('client.dashboard')"
                        >
                            {{ $t("Register.dashord") }}
                        </JetResponsiveNavLink>
                        <JetResponsiveNavLink
                            :href="route('client.projects.index')"
                            :active="route().current('client.projects.index')"
                        >
                            {{ $t("Register.my_projects") }}
                        </JetResponsiveNavLink>
                        <JetResponsiveNavLink
                            :href="route('services.index')"
                            :active="route().current('services.index')"
                        >
                            {{ $t("Register.services") }}
                        </JetResponsiveNavLink>
                    </template>
                </div>
                <hr />
                <!-- Actions -->
                <div class="space-y-1">
                    <p class="mb-4">
                        <span class="font-medium text-gray-500">
                            {{ $t("Register.actions") }}
                        </span>
                    </p>
                    <!-- Notifications -->
                    <div
                        class="relative flex items-center justify-start w-full"
                    >
                        <JetDropdown
                            class="w-full"
                            align="bottom"
                            width="full"
                            maxHeight="400"
                        >
                            <template #trigger>
                                <button
                                    class="w-full"
                                    @click="clearNotifications"
                                >
                                    <span
                                        class="flex items-center justify-start gap-2 px-4 font-medium"
                                    >
                                        <span
                                            class="relative p-1.5 bg-blue-200 rounded-full"
                                        >
                                            <svg
                                                width="20"
                                                height="20"
                                                viewBox="0 0 20 20"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <g
                                                    clip-path="url(#clip0_4234_22191)"
                                                >
                                                    <path
                                                        d="M8.33334 4.16667C8.33334 3.72464 8.50894 3.30072 8.8215 2.98816C9.13406 2.67559 9.55798 2.5 10 2.5C10.442 2.5 10.866 2.67559 11.1785 2.98816C11.4911 3.30072 11.6667 3.72464 11.6667 4.16667C12.6237 4.61919 13.4395 5.32361 14.0267 6.20442C14.6139 7.08523 14.9504 8.10923 15 9.16667V11.6667C15.0627 12.1848 15.2462 12.6809 15.5357 13.1151C15.8252 13.5493 16.2126 13.9095 16.6667 14.1667H3.33334C3.78746 13.9095 4.17485 13.5493 4.46433 13.1151C4.75381 12.6809 4.9373 12.1848 5.00001 11.6667V9.16667C5.04964 8.10923 5.38609 7.08523 5.9733 6.20442C6.56051 5.32361 7.37634 4.61919 8.33334 4.16667"
                                                        stroke="#222222"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M7.5 14.1665V14.9998C7.5 15.6629 7.76339 16.2988 8.23223 16.7676C8.70107 17.2364 9.33696 17.4998 10 17.4998C10.663 17.4998 11.2989 17.2364 11.7678 16.7676C12.2366 16.2988 12.5 15.6629 12.5 14.9998V14.1665"
                                                        stroke="#222222"
                                                        stroke-width="1.5"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_4234_22191"
                                                    >
                                                        <rect
                                                            width="20"
                                                            height="20"
                                                            fill="white"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                            <span
                                                v-if="unreadNotificationsCount"
                                                class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                                            >
                                                {{ unreadNotificationsCount }}
                                            </span>
                                        </span>
                                        <span
                                            class="flex items-center justify-between flex-1 gap-1"
                                        >
                                            {{ $t("profile.notifications") }}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                class="icon icon-tabler icon-tabler-chevron-down"
                                                width="12"
                                                height="12"
                                                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"
                                                />
                                                <polyline
                                                    points="6 9 12 15 18 9"
                                                />
                                            </svg>
                                        </span>
                                    </span>
                                </button>
                            </template>
                            <template #content>
                                <div class="flex flex-col w-full px-5">
                                    <div
                                        class="flex items-center justify-between w-full py-5"
                                    >
                                        <span
                                            class="text-sm font-medium text-blue-300"
                                        >
                                            {{ $t("profile.notifications") }}
                                        </span>
                                    </div>
                                    <hr />
                                    <ul
                                        class="flex flex-col gap-2 py-5 divide-y divide-blue-200"
                                    >
                                        <template
                                            v-if="
                                                $page.props.current_user
                                                    .allNotifications.length > 0
                                            "
                                        >
                                            <li
                                                class="flex gap-0.5 hover:bg-blue-100 rounded-md cursor-pointer px-1"
                                                v-for="notification in $page
                                                    .props.current_user
                                                    .allNotifications"
                                                :key="notification.id"
                                            >
                                                <span
                                                    v-if="!notification.read_at"
                                                    class="w-1.5 h-1.5 mt-4 bg-blue-300 rounded-full"
                                                ></span>
                                                <JetDropdownLink
                                                    class="flex-1"
                                                    :href="
                                                        notification.data
                                                            .relative_url
                                                    "
                                                >
                                                    <span
                                                        class="flex flex-col items-start justify-center gap-2.5"
                                                    >
                                                        <span
                                                            class="text-sm font-medium"
                                                            :class="{
                                                                'text-blue-300':
                                                                    !notification.read_at,
                                                                'text-gray-300':
                                                                    notification.read_at,
                                                            }"
                                                        >
                                                            {{
                                                                $i18n.locale ===
                                                                "en"
                                                                    ? notification
                                                                          .data
                                                                          .title
                                                                    : notification
                                                                          .data
                                                                          .title_ar
                                                            }}
                                                        </span>
                                                        <span
                                                            class="text-xs text-gray-200 line-clamp-3"
                                                        >
                                                            {{
                                                                $i18n.locale ===
                                                                "en"
                                                                    ? notification
                                                                          .data
                                                                          .description
                                                                    : notification
                                                                          .data
                                                                          .description_ar
                                                            }}
                                                        </span>
                                                        <span
                                                            class="text-gray-200/75 text-2xs"
                                                        >
                                                            {{
                                                                moment(
                                                                    notification.created_at
                                                                ).fromNow()
                                                            }}
                                                        </span>
                                                    </span>
                                                </JetDropdownLink>
                                            </li>
                                        </template>
                                        <li v-else class="flex gap-0.5 px-1">
                                            <span
                                                class="text-xs text-gray-200 line-clamp-3"
                                            >
                                                {{ $t("Register.no_thing") }}
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </JetDropdown>
                    </div>

                    <JetResponsiveNavLink :href="chatUrl()">
                        <span class="flex items-center gap-2 text-gray-300">
                            <Button
                                v-if="$page.props.current_user.is_engineer"
                                size="sq-rounded-default"
                                buttonStyle="light_blue"
                                class="relative"
                            >
                                <svg
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_4103_1903)">
                                        <path
                                            d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M10 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.6665 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M13.3335 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_4103_1903">
                                            <rect
                                                width="20"
                                                height="20"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span
                                    v-if="
                                        $page.props.current_user
                                            .unreadMessageCount
                                    "
                                    class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                                >
                                    {{
                                        $page.props.current_user
                                            .unreadMessageCount
                                    }}
                                </span>
                            </Button>
                            <Button
                                v-else-if="$page.props.current_user.is_firm"
                                size="sq-rounded-default"
                                buttonStyle="light_blue"
                                class="relative"
                            >
                                <svg
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_4103_1903)">
                                        <path
                                            d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M10 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.6665 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M13.3335 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_4103_1903">
                                            <rect
                                                width="20"
                                                height="20"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span
                                    v-if="
                                        $page.props.current_user
                                            .unreadMessageCount
                                    "
                                    class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                                >
                                    {{
                                        $page.props.current_user
                                            .unreadMessageCount
                                    }}
                                </span>
                            </Button>
                            <Button
                                v-else
                                size="sq-rounded-default"
                                buttonStyle="light_blue"
                                class="relative"
                            >
                                <svg
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_4103_1903)">
                                        <path
                                            d="M2.5 16.6668L3.58333 13.4168C2.64704 12.032 2.30833 10.3922 2.63018 8.80207C2.95204 7.21197 3.91255 5.77987 5.33314 4.77204C6.75373 3.76421 8.53772 3.24923 10.3534 3.32285C12.1691 3.39647 13.8929 4.05368 15.2044 5.17228C16.5159 6.29089 17.3257 7.79477 17.4834 9.4043C17.6411 11.0138 17.1358 12.6195 16.0616 13.9228C14.9873 15.226 13.4172 16.1382 11.6432 16.4896C9.86911 16.8411 8.01184 16.6079 6.41667 15.8335L2.5 16.6668"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M10 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.6665 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M13.3335 10V10.0083"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_4103_1903">
                                            <rect
                                                width="20"
                                                height="20"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span
                                    v-if="
                                        $page.props.current_user
                                            .unreadMessageCount
                                    "
                                    class="absolute text-[8px] text-white -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-red-300 ring-2 ring-white flex items-center justify-center"
                                >
                                    {{
                                        $page.props.current_user
                                            .unreadMessageCount
                                    }}
                                </span>
                            </Button>
                            <span>
                                {{ $t("Register.chat") }}
                            </span>
                        </span>
                    </JetResponsiveNavLink>

                    <JetResponsiveNavLink :href="route('user.wallet')">
                        <span
                            class="flex items-center justify-start gap-2 text-gray-300"
                        >
                            <Button
                                size="sq-rounded-default"
                                buttonStyle="light_blue"
                            >
                                <svg
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_4103_1898)">
                                        <path
                                            d="M14.1668 6.66683V4.16683C14.1668 3.94582 14.079 3.73385 13.9228 3.57757C13.7665 3.42129 13.5545 3.3335 13.3335 3.3335H5.00016C4.55814 3.3335 4.13421 3.50909 3.82165 3.82165C3.50909 4.13421 3.3335 4.55814 3.3335 5.00016C3.3335 5.44219 3.50909 5.86611 3.82165 6.17867C4.13421 6.49123 4.55814 6.66683 5.00016 6.66683H15.0002C15.2212 6.66683 15.4331 6.75463 15.5894 6.91091C15.7457 7.06719 15.8335 7.27915 15.8335 7.50016V10.0002M15.8335 13.3335V15.8335C15.8335 16.0545 15.7457 16.2665 15.5894 16.4228C15.4331 16.579 15.2212 16.6668 15.0002 16.6668H5.00016C4.55814 16.6668 4.13421 16.4912 3.82165 16.1787C3.50909 15.8661 3.3335 15.4422 3.3335 15.0002V5.00016"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M16.6665 10V13.3333H13.3332C12.8911 13.3333 12.4672 13.1577 12.1547 12.8452C11.8421 12.5326 11.6665 12.1087 11.6665 11.6667C11.6665 11.2246 11.8421 10.8007 12.1547 10.4882C12.4672 10.1756 12.8911 10 13.3332 10H16.6665Z"
                                            stroke="#222222"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_4103_1898">
                                            <rect
                                                width="20"
                                                height="20"
                                                fill="white"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </Button>
                            <span>
                                {{ $t("Register.wallet") }}
                            </span>
                        </span>
                    </JetResponsiveNavLink>
                </div>
                <hr />
                <div class="space-y-1">
                    <p class="mb-4">
                        <span class="font-medium text-gray-500">
                            {{ $t("Register.user") }}
                        </span>
                    </p>
                    <JetResponsiveNavLink
                        :href="settingsUrl"
                        :active="
                            route().current('settings.show') ||
                            route().current('engineer.settings.show') ||
                            route().current('firm.settings.show')
                        "
                    >
                        {{ $t("profile.profile") }}
                    </JetResponsiveNavLink>
                    <JetResponsiveNavLink
                        :href="route('settings.security.show')"
                        :active="route().current('settings.security.show')"
                    >
                        {{ $t("Register.security_information") }}
                    </JetResponsiveNavLink>

                    <!-- Authentication -->
                    <form method="POST" @submit.prevent="logout">
                        <JetResponsiveNavLink
                            class="text-red-300 text-start"
                            as="button"
                        >
                            <span class="block w-full text-start">
                                {{ $t("Register.logout") }}
                            </span>
                        </JetResponsiveNavLink>
                    </form>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
import { Link } from "@inertiajs/inertia-vue3";
import JetApplicationMark from "@/Jetstream/ApplicationMark.vue";
import JetDropdown from "@/Jetstream/Dropdown.vue";
import JetDropdownLink from "@/Jetstream/DropdownLink.vue";
import JetNavLink from "@/Jetstream/NavLink.vue";
import JetResponsiveNavLink from "@/Jetstream/ResponsiveNavLink.vue";
import { onUpdated, ref } from "vue";
import { Inertia } from "@inertiajs/inertia";
import Button from "@/Jetstream/Button.vue";

export default {
    components: {
        JetApplicationMark,
        JetDropdown,
        JetDropdownLink,
        JetNavLink,
        JetResponsiveNavLink,
        Link,
        Button,
    },
    data() {
        return {
            showingNavigationDropdown: false,
            unreadNotificationsCount: 0,
        };
    },
    methods: {
        logout() {
            Inertia.post(route("logout"));
        },
        clearNotifications() {
            if (this.unreadNotificationsCount > 0) {
                Inertia.post(
                    route("user.notifications.clear"),
                    {},
                    {
                        preserveScroll: true,
                        onSuccess: () => {
                            this.calculateUnreadNotificationsCount();
                        },
                    }
                );
            }
        },
        calculateUnreadNotificationsCount() {
            const count =
                this.$page?.props?.current_user?.allNotifications.reduce(
                    (acc, notification) => {
                        if (!notification.read_at) {
                            acc++;
                        }
                        return acc;
                    },
                    0
                );

            this.unreadNotificationsCount = count > 99 ? 99 : count;
        },
        chatUrl() {
            if (this.$page.props.current_user.is_engineer)
                return route("engineer.chat");
            else if (this.$page.props.current_user.is_firm)
                return route("firm.chat");
            else return route("client.chat");
        },
    },
    computed: {
        profileUrl() {
            if (this.$page.props.current_user.is_engineer)
                return route("engineer.profile");
            else if (this.$page.props.current_user.is_firm)
                return route("firm.profile");
            else return route("user.dashboard");
        },
        settingsUrl() {
            if (this.$page.props.current_user.is_engineer)
                return route("engineer.settings.show");
            else if (this.$page.props.current_user.is_firm)
                return route("firm.settings.show");
            else return route("settings.show");
        },
    },
    mounted() {
        this.calculateUnreadNotificationsCount();
    },
};
</script>
