{{-- @dd($location->organization_setting_assignment->organization_setting->location_tab_color) --}}
<style>
    @font-face {
        font-family: 'Literra';
        src: url('data:font/woff2;base64,YOUR_BASE64_ENCODED_FONT_HERE') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    .top-heading-center-tabs a {
        position: relative;
        /* color: {{ $location->organization_setting_assignment->organization_setting->location_section_heading_color ?? '#000000' }}; */
        text-decoration: none;
        padding-bottom: 5px;
    }

    .top-heading-center-tabs a:hover,
    .top-heading-center-tabs a.active {
        color: black;
    }

    .top-heading-center-tabs a::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .top-heading-center-tabs a:hover::after,
    .top-heading-center-tabs a.active::after {
        transform: scaleX(1);
    }

    .top-heading-center-tabs a svg path {
        stroke: black;
        transition: stroke 0.3s ease;
    }

    .top-heading-center-tabs a:hover svg path,
    .top-heading-center-tabs a.active svg path {
        stroke: black;
    }

    .literraFont {
        font-family: 'Literra', Arial, sans-serif !important;
    }
    .edit_btn {
        position: absolute;
        right: 25px;
        top: 75%;
        transform: translateY(-50%);
        background: #fff;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s, right 0.3s;
        opacity: 0;
        cursor: pointer;
    }
    div:hover .edit_btn {
        opacity: 1;
        right: -30px;
    }
    .edit_btn:hover {
        background: #f0f0f0;
    }
</style>
@php
    $location = Auth::guard('location')->user() ?? (Auth::guard('remote_location')->user() ?? $location);
    $forms = $location->group_forms();
    $user = Auth::guard('web')->user() ?? Auth::guard('user')->user();
    $userMain = Auth::guard('web')->user() ?? Auth::guard('user')->user();
    $positions = [
        1 => 'Accuracy Checking Technician (ACT)',
        2 => 'Pharmacy Apprentice',
        3 => 'Counter Assistant',
        4 => 'Dispenser',
        5 => 'Driver',
        6 => 'Pharmacist',
        7 => 'Pre-registration Pharmacist',
        8 => 'Pharmacy Technician',
        9 => 'Pharmacy Assistant',
    ];
@endphp
<header class="justify-content-between d-flex"
    style="background: {{ $location->organization_setting_assignment->organization_setting->bg_color_code ?? '#000000' }}">
    <div class="d-flex align-items-center">
        
        <a class="logo" href="{{ route('location.dashboard') }}">
            <img
                    src="{{ isset($location->organization_setting_assignment->organization_setting) && $location->organization_setting_assignment->organization_setting->setting_logo() ? $location->organization_setting_assignment->organization_setting->setting_logo() : asset('images/svg/logo_blue.png') }}">
        </a>
        <div class="heading-line literraFont">Welcome, {{ $location->trading_name }}</div>
    </div>


    <div class="right-side-items">
        <div style="position: relative; width: 100%; z-index: 1050;">
            @livewire('location-task-notifications', ['location' => $location])
        </div>
        <!--
        <div class="notification-icon">
            <a href="#" title="Notifications">
                <i class="fa-regular fa-bell"></i>
            </a>
        </div>
        <div class="help-icon">
            <a href="#" title="Help">
                <i class="fa-regular fa-question"></i>
            </a>
        </div>
    -->

        @if (isset($user))
            <div class="user-icon">
                <a href="#" class="e-drop-down" data-target="#user-pr-menu">
                    <div class="user-icon-circle" title="User Profile">
                        <img class="user-icon-circle" src="{{ $user->logo }}"
                            style="hight: 40px; width: 40px; border-radius: 50%;" alt="">
                        <span class="online" title="Status: Online"></span>
                    </div>
                </a>
            </div>
        @endif
        <div id="user-pr-menu" class="custom-menu user-profile-menu-tr hidden">
            <div class="row">
                <div class="col-12">
                    {{-- <div class="logo-menu">
                        <a href="/"><img height="25px" src="{{asset('v2/images/well.svg')}}"></a>
                    </div> --}}          
                    <div class="user-icon mx-auto" style="width: 50px;height:50px;border-radius:50%;">
                        <a href="#" class="e-drop-down" data-target="#user-pr-menu">
                            <div class="user-icon-circle" title="User Profile">
                                <img class="" src="{{ $user->logo }}"
                                    style="hight: 40px; width: 40px; border-radius: 50%;" alt="">
                                <span class="online" title="Status: Online"></span>
                            </div>
                        </a>
                    </div>

                </div>
                @if (isset($user))
                    <div class="col-12">
                        <div class="mx-auto"
                            style="width: fit-content; text-align: center; cursor: pointer; position: relative;">
                            <div style="font-size: 16px; font-weight: bold; color: #333;">
                                {{ $user->name }}
                            </div>
                            @php
                                $headOfficePosition = $user->getSelectedHeadOfficePositionAttribute();
                            @endphp
                            <div
                                style="font-size: 12px; color: #555; background: #f0f0f0; padding: 4px 10px; border-radius: 15px; display: inline-block; margin-top: 5px; border: 1px solid #ddd;">
                                {{ empty($headOfficePosition)
                                    ? optional($user->user_job())->job_details->job
                                    : $headOfficePosition }}
                            </div>
                            <button type="button" class="edit_btn" title="Edit user type" data-bs-toggle="modal" data-bs-target="#editModal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 20h9"/>
                                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
                                </svg>                                                            
                            </button>
                            @php
                            $headOfficePosition = $user->getSelectedHeadOfficePositionAttribute();
                            $regNo = $user->user_job()?->reg_no;
                            $regBody = $user->user_job()?->reg_body?->name;
                        @endphp
                        @php
                        $subtypeIds = $user->user_job() ? json_decode($user->user_job()->subtypes) : [];
                        if (is_array($subtypeIds) && count($subtypeIds) > 0) {
                            $subtypes = App\Models\jobsubtypes::whereIn('id', $subtypeIds)->get();
                        } else {
                            $subtypes = collect();
                        }
                            @endphp
                        
                        @if(!empty($headOfficePosition) || (!empty($regNo)))
                            <div class="user-details"
                                style="display: none; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 10px; z-index: 10; font-size: 12px; width: 200px;">
                                {{-- <form action="{{ route('remove.job') }}" method="POST" style="position: absolute; top: 8px; right: 8px;">
                                    @csrf
                                    <input type="hidden" name="job_id" value="{{ $user->user_job()->id }}"> 
                                    <button type="submit" class="btn btn-light p-1" title="edit user type" style="border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: background 0.3s;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M12 20h9"/>
                                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
                                        </svg>                                                            
                                    </button>
                                </form> --}}
                                @if(!empty($headOfficePosition))
                                <span
                                        style="font-weight: bold; font-size: 14px;">{{ $user->user_job()->job_details->job ?? 'No User Type Assigned' }}</span>
                                    <br>
                                @endif
                                @if(!empty($regNo))
                                    <span>{{ $regNo }}</span><br>
                                @endif
                                @if(!empty($regBody))
                                    <span>{{ $regBody }}</span>
                                @endif
                                @if(count($subtypes) > 0)
                                    <div class="Subtypes" style="padding-top: 10px;">
                                        @foreach($subtypes as $subtype)
                                            <div style="line-height: 1;">
                                                <span style="font-size: 20px; font-weight: bold;">&#8226;</span>{{ $subtype->subtype_name }}
                                            </div>
                                        @endforeach
                                        
                                    </div>
                                @endif
                            </div>
                                @endif
                        </div>
                    </div>
                @endif

            </div>
            <div class="col-4">
                <div class="py-1 blue-heading">Mode</div>
                <div class="py-1">
                    <div class="ps-3" data-toggle="tooltip" data-placement='Top' title="Coming Soon"><a
                            href="#"><img class="menuIcons"
                                src="{{ asset('v2/images/icons/menu-lightmode.svg') }}">
                            Light</a></div>
                </div>
            </div>
            <div class="col-12">
                <hr class="menu-hr">
                {{-- <div class="py-1 text-end"><a href="#" id="openModal"><img class="menuIcons"
                    src="{{ asset('v2/images/icons/menu-userarea.svg') }}"> Go to User Account</a></div> --}}
                    <div class="py-1 text-end"><a href="{{ route('user.view_profile') }}"><img class="menuIcons"
                        src="{{ asset('v2/images/icons/menu-userarea.svg') }}">Edit my details</a></div>
                <div class="py-1 text-end sign-out-label"><a href="{{ route('user.logout') }}"><img
                            class="menuIcons" src="{{ asset('v2/images/icons/menu-signout.svg') }}"> Sign Out</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            setRandomBackgroundColor('user-icon');

            document.documentElement.style.setProperty('--location-section-heading-color',
                @json(
                    $location &&
                    isset($location->organization_setting_assignment) &&
                    isset($location->organization_setting_assignment->organization_setting)
                        ? $location->organization_setting_assignment->organization_setting->location_section_heading_color
                        : '#5ac1b6'));

            document.documentElement.style.setProperty('--location-form-setting-color',
                @json(
                    $location &&
                    isset($location->organization_setting_assignment) &&
                    isset($location->organization_setting_assignment->organization_setting)
                        ? $location->organization_setting_assignment->organization_setting->location_form_setting_color
                        : '#4dd6f0'));

            document.documentElement.style.setProperty('--portal-primary-btn-color', @json(
                $location &&
                isset($location->organization_setting_assignment) &&
                isset($location->organization_setting_assignment->organization_setting)
                    ? $location->organization_setting_assignment->organization_setting->location_button_color
                    : '#5ac1b8'));

            document.documentElement.style.setProperty('--portal-primary-btn-text-color',
                @json(
                    $location &&
                    isset($location->organization_setting_assignment) &&
                    isset($location->organization_setting_assignment->organization_setting)
                        ? $location->organization_setting_assignment->organization_setting->location_button_text_color
                        : '#fff'));

            document.documentElement.style.setProperty('--highlight-nav-color', @json(
                $location &&
                isset($location->organization_setting_assignment) &&
                isset($location->organization_setting_assignment->organization_setting)
                    ? $location->organization_setting_assignment->organization_setting->bg_color_code
                    : '#72c4ba'));
        });

        function setRandomBackgroundColor(elementId) {
            var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

            // Ensure the color string is 6 characters long
            while (randomColor.length < 7) {
                randomColor += '0';
            }

            // Calculate brightness to decide text color
            var r = parseInt(randomColor.substring(1, 3), 16);
            var g = parseInt(randomColor.substring(3, 5), 16);
            var b = parseInt(randomColor.substring(5, 7), 16);
            var brightness = (r * 299 + g * 587 + b * 114) / 1000;

            var textColor = brightness > 125 ? 'black' : 'white';

            console.log(randomColor);
            $('.' + elementId).css('background-color', randomColor);
            $('.user-icon-circle').css('color', textColor);
        }
        document.querySelectorAll('.mx-auto').forEach((parent) => {
            const details = parent.querySelector('.user-details');

            parent.addEventListener('mouseover', () => {
                details.style.display = 'block';
            });

            parent.addEventListener('mouseout', () => {
                details.style.display = 'none';
            });
        });
    </script>
</header>