@extends('layouts.head_office_app')
@section('title', 'Head Office Users')
@section('content')
    @php
        $head_office = $user->selected_head_office;
    @endphp
    <div class="container" style="padding-top: 20px">
        <style>
            #sidebar {
                width: 200px;
                max-width: 200px;
                height: 100%;
                color: white;
                position: absolute;
                top: 100px;
                left: 0;
                padding: 20px;
                box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
                display: block;
            }

            .nav {
                list-style: none;
                padding: 0;
                width: 100%;
                margin: 0;
            }

            .nav-item {
                color display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
            }

            .nav-text {
                color: black;
                flex: 1;
                text-align: left;
                font-size: 100%;
            }

            .nav-badge {
                margin-left: 10%;
            }

            /* Hover effects */
            .nav-item a {
                position: relative;
                color: rgb(0, 0, 0);
                text-decoration: none;
            }

            /* .nav-item a:hover::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -4px;
                        width: 100%;
                        height: 2px;
                        background-color: rgb(0, 0, 0);
                    } */


            .nav-item a.active {
                /* background-color: #000000; */
                color: var(--portal-section-heading-color)
                    /* text-decoration: underline; */
            }

            /* Invites counter styling */
            .nav-item .badge {
                display: inline-block;
                font-size: 0.9em;
                padding: 3px 8px;
                background-color: #007bff;
                color: white;
                border-radius: 10px;
            }

            /* Add spacing between text and badge */
            .nav-item a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-decoration: none;
                color: white;
            }

            .nav-item a span {
                margin-left: 10px;
            }

            .select2-dropdown--below {
                z-index: 99999999;
            }

            .assign-loc-tab {
                padding: 3px 10px !important;
                border: 1px solid gray;
                margin-right: 13px !important;
                border-radius: 5px;

            }

            .check-for-show-codes {
                margin-top: 25px;
            }

            .space-in-list {
                margin: 25px 0px;
            }

            .select2-selection {
                height: 18px !important;
                margin: 5px 7px;
            }

            .select-outer-div {
                display: flex;
                align-items: center;
            }

            .side-menu {
                width: 200px;
                margin-top: 220px !important;
                max-width: 200px;
                height: 100%;
                color: white;
                position: absolute;
                top: 0;
                left: 0;
                padding: 20px;
                box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
                display: flex;
                flex-direction: column;
                border-top: 1px solid #ccc;
            }

            .side-menu .menu-item {
                padding: 10px 15px;
                border-bottom: 1px solid #ccc;
                cursor: pointer;
            }

            .side-menu .menu-item a {
                text-decoration: none;
                color: black;
                display: flex;
                justify-content: space-between;
                font-weight: bold;
            }

            .side-menu .menu-item:hover {
                background-color: #f5f5f5;
            }
            .side-menu .menu-item.active {
                color: var(--portal-section-heading-color);
            }
            .side-menu .menu-item.active a {
                color: {{ isset($head_office->icon_color) && $head_office->icon_color ? $head_office->icon_color : 'black' }};
                list-style: none !important;
                text-decoration: none !important;
            }
            .side-menu .menu-item::marker {
                content: '';
            }
            .content-wrapper {
                margin-left: 120px;
                flex-grow: 1;
                padding: 20px;
                transition: margin-left 0.3s ease;
            }
            @media (max-width: 768px) {
                .side-menu {
                    width: 100%;
                    max-width: none;
                    height: auto;
                    position: relative;
                    text-align: center;
                    /* padding: 10px; */
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                }

                .side-menu li {
                    display: inline-block;
                    margin: 0 10px;
                }

                .content-wrapper {
                    margin-left: 0;
                    padding: 10px;
                }
            }

            @media (max-width: 480px) {
                .side-menu {
                    flex-direction: column;
                    align-items: center;
                }

                .side-menu li {
                    display: block;
                    width: 100%;
                    text-align: center;
                }

                .content-wrapper {
                    padding: 5px;
                }
            }


            .tooltip-container {
                position: relative;
                display: inline-block;
                cursor: pointer;
            }

            .tooltip-container .tooltip-text {
                visibility: hidden;
                width: 250px;
                background-color: white;
                color: black;
                text-align: center;
                padding: 8px;
                border-radius: 5px;
                position: absolute;
                bottom: 130%;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
                font-size: 14px;
                font-family: Arial, sans-serif;
                white-space: normal;
                border: 1px solid #ccc;
                z-index: 10000;
                opacity: 0;
                font-weight: 0 !important;
                transition: opacity 0.2s ease-in-out;
                word-wrap: break-word;
            }

            .tooltip-container .tooltip-text::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-width: 6px;
                border-style: solid;
                border-color: white transparent transparent transparent;
            }

            .tooltip-container:hover .tooltip-text {
                visibility: visible;
                opacity: 1;
            }

            .select2-container--default .select2-selection--multiple {
                min-width: 200px;
                height: auto !important;
            }

            .custom-new-tab.tab-content>.tab-pane:not(.show) {
                display: none !important;
            }

            .card-body {
                height: fit-content !important;
            }

            .layout-container {
                display: flex;
                gap: 20px;
            }
        </style>
        <div style="display: flex; justify-content: center; align-items: center;">
            <div class="title-controls" style="color: black;">
                Users
            </div>
        </div>
        <nav class="page-menu bordered">
            <ul class="nav nav-tab" id="nav-tab">
                <li>
                    <a href="{{ route('head_office.head_office_users', ['tab' => 'MemberTeam']) }}">Company
                        Users<span></span></a>
                </li>
                <li>
                    <a
                        href="{{ route('head_office.head_office_users', ['tab' => 'ApprovedUser']) }}">Approved<span></span></a>
                </li>
                <li>
                    <a id="UserTypeNew" class="active" href="#">
                        User Type
                        <span></span>
                    </a>
                </li>
                <li>
                    <a
                        href="{{ route('head_office.head_office_users', ['tab' => 'UserTypeBlocked']) }}">Blocked<span></span></a>
                </li>

                <li>
                    <a href="{{ route('head_office.head_office_users', ['tab' => 'UserTypeVerified']) }}">User
                        Verification<span></span></a>
                </li>
            </ul>
        </nav>

        <hr class="hrBeneathMenu" style="width: 100vw; margin-left: -330px;">

        <ul class="side-menu">
            <li id="manage-user" class="menu-item active">
                <a href="#" onclick="showContent('job-modal'); setActive(this); return false;">Manage User Types</a>
            </li>
            <li id="assign-user" class="menu-item">
                <a href="#" onclick="showContent('assign-user-type'); setActive(this); return false;">Assigned to
                    Users</a>
            </li>
        </ul>



        <div class="content-wrapper">
            <div id="job-modal" class="content-section">
                @include('/Job_modal_headoffice')
            </div>

            <div id="assign-user-type" class="content-section" style="display: none;width: 110%;">
                {{-- <p>Here is some other content...</p> --}}
                @include('/assigned_usertype', ['users' => $headOffice->users])
            </div>
        </div>


    </div>
@endsection

@section('scripts')
    <script>
        function showContent(section) {
            document.getElementById('job-modal').style.display = 'none';
            document.getElementById('assign-user-type').style.display = 'none';

            document.getElementById(section).style.display = 'block';
        }
        document.addEventListener("DOMContentLoaded", function() {
            // Ensure the first item is active on page load
            const firstItem = document.querySelector('.side-menu .menu-item');
            if (firstItem) {
                firstItem.classList.add('active');
            }
        });

        function setActive(element) {
            // Remove active class from all menu items
            document.querySelectorAll('.side-menu .menu-item').forEach(item => {
                item.classList.remove('active');
            });

            // Add active class to the clicked menu item
            element.parentElement.classList.add('active');
        }
    </script>
@endsection