@extends('layouts.head_office_app')
@section('title', 'Head Office Users')
@section('content')
<link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />

    <style>
        .new-info-wrapper {
            right: 100% !important;
            left: unset !important;
        }

        .nav-item a.active {
            font-weight: 600;
            color: var(--highlight-company-subnav-color) !important;
        }

        .nav-item a.active span {
            color: var(--highlight-company-subnav-color) !important;
        }
    </style>
    <div id="content" style="position: relative;overflow:hidden;">
        <div style="display: flex; justify-content: center; align-items: center;">
            <div class="title-controls" style="color: black;">
                Users
            </div>


        </div>



        <style>
            #sidebar {
                width: 200px;
                max-width: 200px;
                height: 100%;
                color: white;
                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: 100px !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;
            }

            .side-menu li {
                padding: 10px;
                list-style: none;
            }

            .side-menu li a {
                color: black;
                text-decoration: none;
                display: block;
                width: 100%;
                padding: 10px;
                border-radius: 5px;
                transition: background 0.3s ease;
                font-size: 100%;
            }

            .side-menu li a:hover {
                background: #ddd;
            }

            .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;
            }
            .btn-outline-cirlce{
                transition: 0.2s ease !important;
                color: #fff !important;
            }
            .btn-outline-cirlce:hover{
            scale: 1.3 !important;
            letter-spacing: 2px !important;
            transition: 0.2s ease !important;
            color:#2BAFA5 !important;
            border: 1px dotted #2BAFA5 !important;
            }
            .search-container {
                display: flex;
                align-items: center;
                background: #fff;
                border-radius: 5px;
                border: 1px solid #b8b8b8;
                margin-top: 10px;

                padding: 10px 15px;
                width: 250px;
                box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
                position: relative;
            }

            .search-icon {
                font-size: 16px;
                color: #666;
                margin-right: 8px;
            }

            .search-input {
                border: none;
                outline: none;
              

                font-size: 14px;
                width: 100%;
                color: #333;
                background: transparent;
            }

            .search-input::placeholder {
                color: #aaa;
                font-size: 14px;
            }

            #tableTeams_wrapper .dt-search:after {
                left:-20px !important;
            }
        </style>





        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('#addButton').style.display = 'block';

                function toggleAddButtons(activeTab) {
                    const addProfileButton = document.querySelector('.create_profile');
                    const addNewUserButton = document.querySelector('#addButton');

                    if (activeTab === 'UserProfileTeam') {
                        addNewUserButton.style.display = 'none';
                    } else if (activeTab === 'MemberTeam' || activeTab === 'UserProfileInvite') {
                        addNewUserButton.style.display = 'block';
                    } else {
                        addNewUserButton.style.display = 'block';
                    }
                }
                document.querySelectorAll('#MemberTeam, #UserProfileTeam, #UserProfileInvite').forEach(tab => {
                    tab.addEventListener('click', function() {
                        const activeTab = this.id;
                        toggleAddButtons(activeTab);
                    });
                });
            });
        </script>

        <nav class="page-menu bordered">
            <ul class="nav nav-tab" id="nav-tab">
                <li>
                    <a onclick="changeTabUrl('MemberTeam'); toggleSidebar('MemberTeam')" id="MemberTeamTab"
                        href="javascript:void(0)" class="active" data-bs-toggle="tab" data-bs-target="#members">Company
                        Users<span></span></a>
                </li>
                {{-- <li>
                        <a onclick="changeTabUrl('UserProfileTeam'); toggleSidebar('UserProfileTeam')" id="UserProfileTeamTab" class="profiles" href="javascript:void(0)" data-bs-toggle="tab" data-bs-target="#profiles">User Profile<span></span></a>
                    </li>
                    <li>
                        <a onclick="changeTabUrl('UserProfileInvite'); toggleSidebar('UserProfileInvite')" id="UserProfileInviteTab" class="invites" href="javascript:void(0)" data-bs-toggle="tab" data-bs-target="#invites">Invites
                            <div class="badge text-bg-primary mx-1">
                                {{count($head_office_invites->where('expires_at','>',now()))}}
                            </div>
                            <span></span>
                        </a>
                    </li> --}}
                <li>
                    <a onclick="changeTabUrl('ApprovedUser'); toggleSidebar('hide')" id="ApprovedUserTab" class="approved"
                        href="javascript:void(0)" data-bs-toggle="tab" data-bs-target="#approved">Approved<span></span></a>
                </li>
                <li>
                    <a id="UserTypeNew" class="user_type" href="{{ route('head_office.head_office_user_types') }}">
                        User Type
                        <span></span>
                    </a>
                </li>
                <li>
                    <a onclick="changeTabUrl('UserTypeBlocked'); toggleSidebar('hide')" id="UserTypeBlockedTab"
                        class="user_type" href="javascript:void(0)" data-bs-toggle="tab"
                        data-bs-target="#user_blocked">Blocked<span></span></a>
                </li>
                <li>
                    <a onclick="changeTabUrl('UserTypeVerified'); toggleSidebar('hide')" id="UserTypeVerifiedTab"
                        class="user_type" href="javascript:void(0)" data-bs-toggle="tab"
                        data-bs-target="#user_verified">User Verification<span></span></a>
                </li>
            </ul>
        </nav>

        <script>
            function toggleSidebar(tabId) {
                const sidebar = document.getElementById('sidebar');
                const visibleTabs = ['MemberTeam', 'UserProfileTeam', 'UserProfileInvite'];

                if (visibleTabs.includes(tabId)) {
                    sidebar.style.display = 'block';
                } else {
                    sidebar.style.display = 'none';
                }
            }

            // Call toggleSidebar with a default tab ID to show the sidebar on page load
            document.addEventListener('DOMContentLoaded', function() {
                toggleSidebar('MemberTeam'); // Adjust this to a default tab that should make the sidebar visible
            });
        </script>


        <script>
            document.addEventListener("DOMContentLoaded", function() {
                @if (Session::has('success'))
                    alertify.success("{{ Session::get('success') }}");
                @endif

                @if (Session::has('error'))
                    alertify.error("{{ Session::get('error') }}");
                @endif
            });
        </script>

        <hr class="hrBeneathMenu">
        @include('layouts.error')
        <div id="alert-placeholder"></div>
        <div class="tab-content" id="myTabContent">



            {{-- <div id="twofa-section" style="margin-left: 12%; padding: 15px; background: #f8f9fa; color: black; border-radius: 5px;"> --}}
            {{-- <div id="twofa-section" class="twofa-section relative tab-pane" style="margin-left: 12%;">
                <h4>Two-Factor Authentication</h4>
                <p>Manage your 2FA settings here.</p>
            </div> --}}

            <div id="approved" class="approved relative tab-pane">
                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_approved_location"
                    class="primary-btn right float-right float-top"><i class="fa fa-plus"></i> Add Location</a>
                @include('layouts.error')
                @if (isset($array) && count($array) > 0)
                    <table class="table table-striped new-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Access</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($array as $key => $arr)
                                <tr>
                                    <td>{{ $head_office->findUser($key)->name }}</td>
                                    <td>
                                        @php
                                            $group_ids = [];
                                            $location_ids = [];
                                        @endphp
                                        @foreach ($arr as $k => $item)
                                            @if ($item->is_location())
                                                @php $location_ids[] = $item->location->id @endphp
                                                <span class="borderedTest">{{ $item->location->registered_company_name }}
                                                </span>
                                            @else
                                                <span class="borderedTest">{{ $item->group->group }} </span>
                                                @php $group_ids[] = $item->head_office_organisation_group_id @endphp
                                            @endif
                                        @endforeach

                                    </td>
                                    <td>
                                        <div class="dropdown mb-4">
                                            <button class="no-arrow btn btn-outline-cirlce dropdown-toggle" type="button"
                                                id="dropdownMenuButton11" data-bs-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                                <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                            </button>
                                            <div class="dropdown-menu animated--fade-in"
                                                aria-labelledby="dropdownMenuButton11" style="">
                                                <a href="#" data-bs-toggle="modal"
                                                    data-bs-target="#edit_approved_location_{{ $key }}"
                                                    class="dropdown-item" title="Edit Details">
                                                    Edit &nbsp;
                                                    <svg width="20" height="24" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M11 3.99998H6.8C5.11984 3.99998 4.27976 3.99998 3.63803 4.32696C3.07354 4.61458 2.6146 5.07353 2.32698 5.63801C2 6.27975 2 7.11983 2 8.79998V17.2C2 18.8801 2 19.7202 2.32698 20.362C2.6146 20.9264 3.07354 21.3854 3.63803 21.673C4.27976 22 5.11984 22 6.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9264 19.673 20.362C20 19.7202 20 18.8801 20 17.2V13M7.99997 16H9.67452C10.1637 16 10.4083 16 10.6385 15.9447C10.8425 15.8957 11.0376 15.8149 11.2166 15.7053C11.4184 15.5816 11.5914 15.4086 11.9373 15.0627L21.5 5.49998C22.3284 4.67156 22.3284 3.32841 21.5 2.49998C20.6716 1.67156 19.3284 1.67155 18.5 2.49998L8.93723 12.0627C8.59133 12.4086 8.41838 12.5816 8.29469 12.7834C8.18504 12.9624 8.10423 13.1574 8.05523 13.3615C7.99997 13.5917 7.99997 13.8363 7.99997 14.3255V16Z"
                                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                </a>
                                                <a href="{{ route('head_office.approved_location.delete', ['id' => $key, '_token' => csrf_token()]) }}"
                                                    data-msg="Are you sure you want to delete this?"
                                                    class="dropdown-item delete_button" title="Personalise Account">
                                                    Delete &nbsp;
                                                    <svg width="20" style="color: white" height="24"
                                                        viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5"
                                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                    </svg>
                                                </a>
                                            </div>
                                        </div>
                                        {{-- @include('head_office.my_organisation.add_location_user', [
                                        'key' => $key,
                                        'location' => $arr,
                                        'groups' => $groups,
                                        'locations' => $locations,
                                        'location_ids' => $location_ids,
                                        'group_ids' => $group_ids,
                                    ]) --}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="d-flex justify-content-between align-items-center" style="padding-top: 3%; ">
                        <p class="mb-0">You have not added any approved users</p>
                        <div>
                            <span class="tooltip-container" style="left: -350% !important; ">
                                <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10" />
                                    <line x1="12" y1="8" x2="12" y2="8" />
                                    <line x1="12" y1="12" x2="12" y2="16" />
                                </svg>
                                <span class="tooltip-text" style="width: 180px !important;">
                                    if you select 'Selected Users' for site access, only the users you choose can access
                                    your sited. Manage those users here
                                </span>
                            </span>
                        </div>
                    </div>
                @endif
            </div>
            {{-- {{ dd($headOffice->users);}} --}}

            {{-- @dd($headOffice); --}}
            <div class="tab-pane fade" id="user_new">


            </div>
            <div id="user_blocked" class="user_type relative tab-pane">
                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_block_users"
                    class="primary-btn right float-right float-top"><i class="fa fa-plus"></i> Add Users</a>
                @php
                    $logedUser = Auth::guard('web')->user();
                    $logged_headOfficeUser = $logedUser->getHeadOfficeUser();
                    $logged_profile = $logged_headOfficeUser->get_permissions();
                @endphp
                {{-- {{dd($headOffice);}} --}}

                @php
                    // $head_office = $user->selected_head_office;
                    $suspended_users = [];
                    foreach ($headOffice->users as $hou) {
                        $profile = $hou->get_permissions();

                        // Only collect suspended users if the logged-in user has super access or matching profiles
                        if (
                            $hou->is_blocked &&
                            ($logged_profile->super_access || $logged_profile->id == $profile->id)
                        ) {
                            $suspended_users[] = $hou;
                        }
                    }
                @endphp

                @if (isset($suspended_users) && count($suspended_users) > 0)
                    <table id="blockUser-table"
                        class="table table-responsive table-bordered mx-auto dataTable w-100 new-table"
                        style="width: 100% !important;">
                        <thead>
                            <tr>
                                <th class="text-center"><input type="checkbox" name="select_all" value="1"
                                        id="dataTable-select-all"></th>
                                <th class="text-center">Email</th>
                                <th class="text-center">Comment</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="all_locations text-center">
                            @foreach ($suspended_users as $hou)
                                <tr>
                                    <td></td>
                                    <td class="fw-semibold email">{{ $hou->user->email }}</td>
                                    <td class="fw-semibold "><input type="text" class="form-control no-shadow"
                                            value="{{ $hou->block_comment ?? 'add comment' }}"
                                            onfocusout="updateLink({{ $hou->id }},this)"></td>
                                    <td class="position">{{ $hou->user->name }}</td>
                                    <td>
                                        <p class="badge text-bg-{{ $hou->is_blocked ? 'danger' : 'success' }} m-0">
                                            {{ $hou->is_blocked ? 'blocked' : 'live' }}</p>
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1 justify-content-center align-items-center mx-auto"
                                            style="width: fit-content;">

                                            <a href="{{ isset($logedUser) && $logedUser->id == $hou->user->id ? '#' : route('head_office.head_office_users.block_user', ['id' => $hou->id, '_token' => csrf_token()]) }}"
                                                {{ isset($logedUser) && $logedUser->id == $hou->user->id ? 'disabled' : '' }}
                                                type="button"
                                                class="btn p-0 px-2 {{ $hou->is_blocked ? 'text-success' : 'text-danger' }}"
                                                title="{{ $hou->is_blocked ? 'Un-Block User' : 'Block User' }}">
                                                <i class="fa-solid fa-user{{ $hou->is_blocked ? '' : '-lock' }}"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p class="">You do not have any blocked users</p>
                @endif
            </div>
            <div id="user_verified" class="user_type relative tab-pane">
                <div class="mt-5 mx-auto" style="width: 300px;">
                    <h5 class="fw-4">When created, a user account must be verified</h5>
                    <form method="post" action="{{ route('head_office.user.verification') }}">
                        @csrf
                        <p class="text-muted">Please select a range.</p>
                        <select name="verification_time" class="form-select text-muted my-2 mb-4" style="width: 300px;">
                            <option value="immediatly" {{ $headOffice->user_verification_time == 'immediatly' ? 'selected' : '' }}>Immediately</option>
                            <option value="24" {{ $headOffice->user_verification_time == '24' ? 'selected' : '' }}>Within 24 hours</option>
                            <option value="48" {{ $headOffice->user_verification_time == '48' ? 'selected' : '' }}>Within 48 hours</option>
                            <option value="72" {{ $headOffice->user_verification_time == '72' ? 'selected' : '' }}>Within 72 hours</option>
                        </select>
                        

                        <button class="primary-btn" >Update</button>
                    </form>
                </div>
            </div>
            <div id="members" class="members tab-pane active show">

                <div class='d-flex  gap-5 '>
                    <div id="sidebar mt-3">
                        <nav class="sidebar  border-end" style="max-width: 200px;">
                            <ul class="nav nav-tab" style="width: 100%;" id="nav-tab2">
                                <li class="nav-item" style="width: 100%;">
                                    <a onclick="changeTabUrl('MemberTeam'); toggleSidebar('MemberTeam')" id="MemberTeamTab"
                                        href="javascript:void(0)" class="active" data-bs-toggle="tab"
                                        data-bs-target="#members-nested"><span class="nav-text">Users</span><span></span></a>
                                </li>
    
                                <li class="nav-item" style="width: 100%;">
                                    <a id="UserProfileTeam" class="profiles" href="javascript:void(0)" data-bs-toggle="tab"
                                        data-bs-target="#profiles" role="tab">
                                        <span class="nav-text">User Profile</span>
                                    </a>
                                </li>
    
                                <li class="nav-item" style="width: 100%;">
                                    <a id="UserProfileInvite" class="invites" href="javascript:void(0)" data-bs-toggle="tab"
                                        data-bs-target="#invites" role="tab">
                                        <span class="nav-text">Invites</span>
                                        <div class="badge text-bg-primary mx-1">
                                            {{ count($head_office_invites->where('expires_at', '>', now())) }}
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item" style="width: 100%;">
                                    <a id="TwoFactorAuth" href="javascript:void(0)" data-bs-toggle="tab"
                                        data-bs-target="#twofa-section" role="tab">
                                        <span class="nav-text">Multi-Factor Authentication</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
    
                    <div class="tab-content w-100" id="" >
                        <div class="tab-pane active show" id="members-nested">
                            <div style="position: absolute; right: 40px;margin-top: -60px !important;" class="search">
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_new_user"
                                    class="btn btn-info plus-btn" style="height: 30px; width:30px;" id="addButton"
                                    title="Add New Alert">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>
 
                            {{-- <div class="search-container">
                                <i class="fa fa-search search-icon"></i>
                                <input type="text" id="searchUser" class="search-input" placeholder="search">
                            </div>                             --}}
                            <table id="tableTeams" class="table new-table mt-2 w-100">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Assigned Profile</th>
                                        <th>Contact Info</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($headOffice->users->sortBy('user.name') as $headOfficeUsers)
                                        <tr>
                                            <td><input type="checkbox" class="form-check-input selected_users_checkbox"
                                                    name="selected_users_main[]" value="{{ $headOfficeUsers->id }}"
                                                    data-super_user="
                                                    @if ($headOfficeUsers->access_right) {{ $headOfficeUsers->access_right->super_access }}
                                                    @elseif (isset($headOfficeUsers->user_profile_assign->profile))
                                                    {{ $headOfficeUsers->user_profile_assign->profile->super_access }} @endif
                                                ">
                                            </td>
                                            <td class="user-name">{{ \Illuminate\Support\Str::title(str_replace(['.', '_'], ' ', $headOfficeUsers->user->name)) }}</td>
                                            <td>{{ optional($headOfficeUsers)->position }}</td>
                                            <td>
                                                @if ($headOfficeUsers->access_right)
                                                    {{$headOfficeUsers->get_org_profile->profile->profile_name}} | <span class="badge bg-primary">custom</span>
                                                @elseif($headOfficeUsers->user_profile_assign)
                                                    {{-- @dd($headOfficeUsers->user_profile_assign->profile) --}}
                                                    {{ isset($headOfficeUsers->user_profile_assign->profile) ? $headOfficeUsers->user_profile_assign->profile->profile_name : 'Not assigned' }}
                                                @else
                                                    <span class="badge bg-danger">Unassigned</span>
                                                @endif
                                            </td>
                                            <td>{{ $headOfficeUsers->user->email }}</td>
                                            <td>
                                                {{-- <a href="#collapseCard_{{$headOfficeUsers->id}}" class="btn btn-outline-cirlce bg-white" data-bs-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample"> --}}
                                                <a href='{{ route('company.user_detail', ['id' => $headOfficeUsers->id]) }}'
                                                    class="btn btn-outline-cirlce bg-white">
                                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
    
                        </div>
                        <div id="profiles" class="profiles tab-pane">
                            <style>
                                .profiles-container {
                                    padding: 2rem 0;
                                }
                                
                                .profiles-header {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    margin-bottom: 2rem;
                                    padding: 0 1rem;
                                }
                                
                                .profiles-title {
                                    font-size: 1.75rem;
                                    font-weight: 600;
                                    color: #4a5568;
                                    margin: 0;
                                }
                                
                                .add-profile-btn {
                                    background: #718096;
                                    color: white;
                                    border: none;
                                    padding: 12px 24px;
                                    border-radius: 8px;
                                    font-weight: 500;
                                    text-decoration: none;
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 8px;
                                    transition: all 0.3s ease;
                                    box-shadow: 0 2px 8px rgba(113, 128, 150, 0.2);
                                }
                                
                                .add-profile-btn:hover {
                                    background: #4a5568;
                                    transform: translateY(-1px);
                                    box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
                                    color: white;
                                    text-decoration: none;
                                }
                                
                                .profiles-grid {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 1rem;
                                    padding: 0 1rem;
                                }
                                
                                .profile-card {
                                    background: white;
                                    border-radius: 12px;
                                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
                                    border: 1px solid #e2e8f0;
                                    transition: all 0.3s ease;
                                }
                                
                                .profile-card:hover {
                                    transform: translateY(-2px);
                                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                                }
                                
                                .profile-card-header {
                                    padding: 1.25rem;
                                    border-bottom: 1px solid #f7fafc;
                                    background: #f7fafc;
                                }
                                
                                .profile-card-title {
                                    font-size: 1.125rem;
                                    font-weight: 600;
                                    color: #4a5568;
                                    margin: 0 0 0.5rem 0;
                                    display: flex;
                                    align-items: center;
                                    gap: 0.5rem;
                                }
                                
                                .profile-card-title i {
                                    color: #718096;
                                    font-size: 1rem;
                                }
                                
                                .profile-card-subtitle {
                                    font-size: 0.875rem;
                                    color: #718096;
                                    margin: 0;
                                }
                                
                                .profile-card-body {
                                    padding: 1.25rem;
                                }
                                
                                .profile-users-section {
                                    margin-bottom: 1.25rem;
                                }
                                
                                .profile-users-label {
                                    font-size: 0.875rem;
                                    font-weight: 500;
                                    color: #4a5568;
                                    margin-bottom: 0.75rem;
                                    display: flex;
                                    align-items: center;
                                    gap: 0.5rem;
                                }
                                
                                .profile-users-label i {
                                    color: #68d391;
                                }
                                
                                .profile-users-row {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    gap: 1rem;
                                }
                                
                                .profile-users-list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 0.5rem;
                                    align-items: center;
                                    flex: 1;
                                }
                                
                                .user-avatar {
                                    width: 36px;
                                    height: 36px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-weight: 600;
                                    font-size: 0.875rem;
                                    color: white;
                                    background: #718096;
                                    border: 2px solid white;
                                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
                                    transition: transform 0.2s ease;
                                }
                                
                                .user-avatar:hover {
                                    transform: scale(1.05);
                                }
                                
                                .user-avatar img {
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    object-fit: cover;
                                }
                                
                                .more-users-btn {
                                    background: #e2e8f0;
                                    color: #718096;
                                    border: none;
                                    border-radius: 50%;
                                    width: 36px;
                                    height: 36px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 0.75rem;
                                    font-weight: 600;
                                    cursor: pointer;
                                    transition: all 0.2s ease;
                                }
                                
                                .more-users-btn:hover {
                                    background: #718096;
                                    color: white;
                                    transform: scale(1.05);
                                }
                                
                                .profile-actions {
                                    display: flex;
                                    gap: 0.5rem;
                                    align-items: center;
                                }
                                
                                .profile-action-btn {
                                    padding: 0.5rem 0.75rem;
                                    border: none;
                                    border-radius: 6px;
                                    font-weight: 500;
                                    font-size: 0.75rem;
                                    cursor: pointer;
                                    transition: all 0.2s ease;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 0.25rem;
                                    white-space: nowrap;
                                }
                                
                                .edit-btn {
                                    background: #63b3ed;
                                    color: white;
                                }
                                
                                .edit-btn:hover {
                                    background: #4299e1;
                                    transform: translateY(-1px);
                                }
                                
                                .delete-btn {
                                    background: #f56565;
                                    color: white;
                                }
                                
                                .delete-btn:hover {
                                    background: #e53e3e;
                                    transform: translateY(-1px);
                                }
                                
                                .empty-state {
                                    text-align: center;
                                    padding: 3rem 1rem;
                                    color: #718096;
                                }
                                
                                .empty-state i {
                                    font-size: 3rem;
                                    color: #cbd5e0;
                                    margin-bottom: 1rem;
                                }
                                
                                .empty-state h3 {
                                    font-size: 1.25rem;
                                    margin-bottom: 0.5rem;
                                    color: #4a5568;
                                }
                                
                                .empty-state p {
                                    font-size: 0.875rem;
                                    margin-bottom: 1.5rem;
                                }
                                
                                @media (max-width: 768px) {
                                    .profiles-header {
                                        flex-direction: column;
                                        gap: 1rem;
                                        align-items: stretch;
                                    }
                                    
                                    .add-profile-btn {
                                        text-align: center;
                                        justify-content: center;
                                    }
                                }
                            </style>
                            
                            <div class="profiles-container">
                                <div class="profiles-header">
                                    <h2 class="profiles-title">
                                        <i class="fa fa-users"></i>
                                        User Profiles
                                    </h2>
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#create_profile" class="add-profile-btn">
                                        <i class="fa fa-plus"></i>
                                        Add New Profile
                                </a>
                            </div>
    
                                <div class="profiles-grid">
                                    @forelse ($profiles->where('custom_access_rights_id', null) as $profile)
                                        <div class="profile-card">
                                            <div class="profile-card-header">
                                                <h3 class="profile-card-title">
                                                    <i class="fa fa-user-shield"></i>
                                                    {{ $profile->profile_name }}
                                                </h3>
                                                @if ($profile->super_access)
                                                    <p class="profile-card-subtitle">
                                                        <i class="fa fa-crown text-warning"></i>
                                                        Super Admin Access
                                                    </p>
                                                @else
                                                    <p class="profile-card-subtitle">
                                                        <i class="fa fa-shield-alt text-info"></i>
                                                        Custom Permissions
                                                    </p>
                                                @endif
                                            </div>
                                            
                                            <div class="profile-card-body">
                                                <div class="profile-users-section">
                                                    <div class="profile-users-label">
                                                        <i class="fa fa-users"></i>
                                                        Assigned Users ({{ count($profile->user_profile_assign) }})
                                                    </div>
                                                    <div class="profile-users-row">
                                                        <div class="profile-users-list" id="user-list-{{ $profile->id }}">
                                                @if (!empty($profile->user_profile_assign))
                                                    @foreach ($profile->user_profile_assign as $index => $record)
                                                        @php $assign_user = $record->head_office_user->user; @endphp
                                                                    <div class="user-avatar user-icon-circle new-card-wrap user-item-{{ $profile->id }} {{ $index > 2 ? 'hidden-avatar' : '' }}"
                                                                         style="{{ $index > 2 ? 'display:none;' : '' }}"
                                                                         data-toggle="tooltip" data-bs-placement="top"
                                                                         title="{{ $assign_user->name }}">
                                                            @if (isset($assign_user->logo))
                                                                            <img src="{{ $assign_user->logo }}" alt="{{ $assign_user->name }}">
                                                            @else
                                                                    {{ implode('',array_map(function ($word) {return strtoupper($word[0]);}, explode(' ', $assign_user->name))) }}
                                                            @endif
    
                                                            @include('head_office.user_card_component', [
                                                                'user' => $assign_user,
                                                            ])
                                                        </div>
                                                    @endforeach
    
                                                                                                                                @if (count($profile->user_profile_assign) > 3)
                                                                    <button class="more-users-btn"
                                                                            id="moreUsersBtn-{{ $profile->id }}"
                                                                            onclick="toggleUsers({{ $profile->id }}, {{ count($profile->user_profile_assign) }})"
                                                                            data-expanded="false"
                                                                            title="Show more users">
                                                                        +{{ count($profile->user_profile_assign) - 3 }}
                                                                    </button>
                                                                @endif
                                                            @else
                                                                <div class="text-muted" style="font-size: 0.875rem;">
                                                                    No users assigned
                                                                </div>
                                                @endif
                                            </div>
    
                                                        <div class="profile-actions">
                                                            <button class="profile-action-btn edit-btn" 
                                                                    onclick="document.getElementById('collapseCard_{{ $profile->id }}').classList.toggle('show')">
                                                                <i class="fa fa-edit"></i>
                                                                Edit
                                                            </button>
                                                @if (!$profile->super_access)
                                                                <button class="profile-action-btn delete-btn"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#p_delete_model_{{ $profile->id }}">
                                                                    <i class="fa fa-trash"></i>
                                                                    Delete
                                                                </button>
                                                @endif
                                                        </div>
                                            </div>
                                        </div>
                                    </div>
    
                                            <div class="collapse" id="collapseCard_{{ $profile->id }}">
                                                <div class="card-body" style="border-top: 1px solid #f8f9fa; background: #f8f9fa;">
                                        @include('head_office.users.new_profile_form')
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="empty-state" style="grid-column: 1 / -1;">
                                            <i class="fa fa-users"></i>
                                            <h3>No Profiles Found</h3>
                                            <p>Get started by creating your first user profile to manage permissions and access rights.</p>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#create_profile" class="add-profile-btn">
                                                <i class="fa fa-plus"></i>
                                                Create First Profile
                                            </a>
                                        </div>
                                    @endforelse
                                    </div>
                                </div>
                                @if (!$profile->super_access)
                                    <div class="modal fade" id="p_delete_model_{{ $profile->id }}" tabindex="-1"
                                        role="dialog" aria-hidden="true">
                                        <div class="modal-dialog modal-xl" role="document">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
    
                                                    <form method="post"
                                                        action="{{ route('head_office.head_office_profile_delete') }}"
                                                        id="deleteForm{{ $profile->id }}">
                                                        @csrf
                                                        <input type="hidden" name="id" value="{{ $profile->id }}">
    
                                                        <h4 class="text-info">Are you sure you want to delete this profile?
                                                        </h4>
                                                        <p>This profile is assigned to
                                                            {{ count($profile->user_profile_assign) }} user(s).</p>
    
                                                        @if (count($profile->user_profile_assign) > 0)
                                                            <p>Please reassign the users before deleting this profile.</p>
    
                                                            <div class="btn-group mt-3">
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="this.form.reset();" data-bs-dismiss="modal"
                                                                    style="margin-left:20px; padding: 10px 20px; border-radius: 5px; border: 1px solid #ccc;">Cancel</button>
                                                                <button type="button" class="btn btn-danger"
                                                                    id="reassignBtn{{ $profile->id }}"
                                                                    onclick="showReassignTable({{ $profile->id }})"
                                                                    style="margin-left:20px;padding: 10px 20px; border-radius: 5px; border: 1px solid #ccc;">Assign
                                                                    Them to Another Profile</button>
                                                                <button type="submit" class="btn btn-danger"
                                                                    onclick="HideReassignTable({{ $profile->id }})"
                                                                    style="margin-left:20px; border-radius: 5px; border: 1px solid #ccc;">Leave
                                                                    Them Unassign</button>
                                                            </div>
    
    
                                                            <div id="reassignTable{{ $profile->id }}" class="mt-3"
                                                                style="display: none;">
                                                                <h5>Select Users to Reassign</h5>
                                                                <table class="table table-bordered">
                                                                    <thead>
                                                                        <tr>
                                                                            <th><input type="checkbox"
                                                                                    id="selectAll{{ $profile->id }}"
                                                                                    onclick="selectAllUsers({{ $profile->id }})">
                                                                            </th>
                                                                            <th>User Name</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($profile->user_profile_assign as $user)
                                                                            <tr>
                                                                                <td>
                                                                                    <input type="checkbox"
                                                                                        name="selected_users[]"
                                                                                        value="{{ $user->id }}"
                                                                                        class="userCheckbox{{ $profile->id }}">
                                                                                </td>
                                                                                <td>
                                                                                    {{ $user->head_office_user->user->first_name }}
                                                                                    {{ $user->head_office_user->user->surname }}
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
    
                                                                    </tbody>
                                                                </table>
                                                                <div class="mb-3">
                                                                    <label for="new_profile_id_{{ $profile->id }}"
                                                                        class="form-label">Reassign to Profile:</label>
                                                                    <select name="new_profile_id"
                                                                        id="new_profile_id_{{ $profile->id }}"
                                                                        class="form-select" required>
                                                                        <option value="">Select Profile</option>
                                                                        @foreach ($profiles as $otherProfile)
                                                                            @if ($otherProfile->id !== $profile->id)
                                                                                <option value="{{ $otherProfile->id }}">
                                                                                    {{ $otherProfile->profile_name }}</option>
                                                                            @endif
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <button type="button"
                                                                    onclick="return validateReassignForm({{ $profile->id }})"
                                                                    class="btn btn-success">Reassign and Delete</button>
                                                            </div>
                                                        @else
                                                            <div class="btn-group mt-3">
                                                                <button type="button" class="btn btn-outline-secondary"
                                                                    onclick="this.form.reset();"
                                                                    data-bs-dismiss="modal">Cancel</button>
                                                                <button type="submit" name="action"
                                                                    class="btn btn-danger">Delete</button>
                                                            </div>
                                                        @endif
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            
                        </div>
                        <div class="tab-pane fade" id="twofa-section">
                            <table id="tableTeams" class="table new-table mt-2">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>2FA</th>
                                        <th>Action</th>
                                        <th>QR code Scaned at</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($headOffice->users as $headOfficeUsers)
                                        @php
                                            $otp = $headOfficeUsers->user->otp;
                                        @endphp
                                        <tr>
                                            <td>{{ \Illuminate\Support\Str::title($headOfficeUsers->user->name) }}</td>
                                            <td>{{ optional($headOfficeUsers)->position }}</td>
                                            <td>
                                                <a href="#" class="view-sessions"
                                                    data-user-id="{{ $headOfficeUsers->id }}"
                                                    data-head-office-id="{{ $headOffice->id }}" data-bs-toggle="modal"
                                                    data-bs-target="#2famodal--{{ $headOfficeUsers->id }}">
                                                    <img width="20px" src="{{ asset('images/eye-scan-svgrepo-com.svg') }}">
                                                </a>
                                            </td>
                                            <td>
                                                <select class="enable-dropdown"
                                                    data-user-id="{{ $headOfficeUsers->user_id }}">
                                                    <option value="1" {{ optional($otp)->isEnabled ? 'selected' : '' }}>
                                                        Enable
                                                    </option>
                                                    <option value="0"
                                                        {{ optional($otp)->isEnabled === 0 ? 'selected' : '' }}>
                                                        Disable
                                                    </option>
                                                </select>
    
                                                <select class="method-dropdown"
                                                    data-user-id="{{ $headOfficeUsers->user_id }}">
                                                    <option value="email"
                                                        {{ optional($otp)->is_totp_enabled == 0 ? 'selected' : '' }}>
                                                        Via Email
                                                    </option>
                                                    <option value="authenticator"
                                                        {{ optional($otp)->is_totp_enabled == 1 ? 'selected' : '' }}>
                                                        Via Microsoft Authenticator
                                                    </option>
                                                </select>
                                            </td>
                                            <td>
                                                @if ($otp?->is_totp_configured == 1 && !is_null($otp?->totp_configured_at))
                                                    {{ \Carbon\Carbon::parse($otp->totp_configured_at)->format('Y-m-d H:i:s') }} 
                                                    <br>
                                                    ({{ \Carbon\Carbon::parse($otp->totp_configured_at)->diffForHumans() }})
                                                @endif
                                            </td>
                                            
                                            <td>
                                                @if ($otp?->is_totp_configured == 1)
                                                    <form
                                                        action="{{ route('reset.totp', ['userId' => $headOfficeUsers->user_id]) }}"
                                                        method="POST" style="display:inline;">
                                                        @csrf
                                                        <button type="submit" class="btn btn-danger btn-sm mt-1"
                                                            onclick="return confirm('Are you sure You want to show QR code to user')">
                                                            Reset QR Code
                                                        </button>
                                                    </form>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            @foreach ($headOffice->users as $headOfficeUsers)
                                <div class="modal fade" id="2famodal--{{ $headOfficeUsers->id }}" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Last 10 Login Sessions</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>Country</th>
                                                            <th>City</th>
                                                            <th>IP Address</th>
                                                            <th>Browser</th>
                                                            <th>Platform</th>
                                                            <th>Time</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="sessionData">
                                                        @foreach ($headOfficeUsers->user_session->sortByDesc('created_at')->take(10) as $session_u)
                                                            <tr>
                                                                <td>{{ $session_u->country }}</td>
                                                                <td>{{ $session_u->city }}</td>
                                                                <td>{{ $session_u->ip ?? ' ' }}</td>
                                                                <td>{{ $session_u->browser ?? ' ' }}</td>
                                                                <td>{{ $session_u->platform ?? ' ' }}</td>
                                                                <td>{{ $session_u->created_at }}</td>
                                                            </tr>
                                                        @endforeach
                                                        <tr>
    
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
    
                        </div>
    
                        <script>
                            $(document).ready(function() {
                                function toggleMethodDropdown() {
                                    $(".enable-dropdown").each(function() {
                                        let isEnabled = $(this).val();
                                        let methodDropdown = $(this).closest("td").find(".method-dropdown");
    
                                        if (isEnabled == "0") {
                                            methodDropdown.hide();
                                        } else {
                                            methodDropdown.show();
                                        }
                                    });
                                }
    
                                // Initially hide/show based on selected value
                                toggleMethodDropdown();
    
                                $(".enable-dropdown").change(function() {
                                    let userId = $(this).data("user-id");
                                    let isEnabled = parseInt($(this).val());
    
                                    $.ajax({
                                        url: "{{ route('update.2fa.status') }}",
                                        type: "POST",
                                        data: {
                                            _token: "{{ csrf_token() }}",
                                            user_id: userId,
                                            isEnabled: isEnabled
                                        },
                                        success: function(response) {
                                            alert(response.message);
                                        },
                                        error: function(xhr) {
                                            console.log(xhr.responseText);
                                            alert("Error updating status.");
                                        }
                                    });
    
                                    // Hide or show method dropdown based on selection
                                    toggleMethodDropdown();
                                });
    
                                $(".method-dropdown").change(function() {
                                    let userId = $(this).data("user-id"); // Now correctly fetching user_id
                                    let method = $(this).val();
    
                                    $.ajax({
                                        url: "{{ route('update.2fa.method') }}",
                                        type: "POST",
                                        data: {
                                            _token: "{{ csrf_token() }}",
                                            user_id: userId, // Sending user_id instead of id
                                            method: method
                                        },
                                        success: function(response) {
                                            alert(response.message);
                                        }
                                    });
                                });
                            });
                        </script>
    
                        <style>
                            #session-dataTable_filter:after,
                            .dt-search:after {
                                left: 10px !important;
                            }
    
                            div.dt-container div.dt-layout-row {
                                width: 100%;
                                display: block;
                            }
                        </style>
                        <div id="invites" class="invites tab-pane">
    
                            <div style="position: absolute; right: 40px;margin-top: -60px !important;" class="search">
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_new_user"
                                    class="btn btn-info plus-btn" style="height: 30px; width:30px;" id="addButton"
                                    title="Add New Alert">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>
                            <table id="dataTable-case" class="table table-responsive table-bordered mx-auto rounded new-table"
                                style="width:100%;">
                                <thead>
                                    <tr>
                                        <th class="text-left" style="text-align:left;">Created at</th>
                                        <th class="text-left" style="text-align:left;">Email</th>
                                        <th style="text-align:left;">Position</th>
                                        <th style="text-align:left;">User Profiles</th>
                                        <th style="text-align:left;">Status</th>
                                        <th style="text-align:left;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="all_locations text-left">
                                    @foreach ($head_office_invites->sortByDesc('created_at') as $invite)
                                        <tr>
                                            <td class="fw-semibold" style="font-size: 14px; text-align: left;">
                                                {{ $invite->created_at->format('d M Y (D) h:i a') }}</td>
                                            <td class="fw-semibold email" style="text-align: left;">{{ $invite->email }}</td>
                                            <td class="position" style="text-align: left;">
                                                {{ $invite->head_office_position }}</td>
                                            <td class="profile_name" style="text-align: left;"
                                                data-id="{{ $invite->head_office_profile->id }}">
                                                {{ $invite->head_office_profile->profile_name }}</td>
                                            <td style="text-align: left;">
                                                @if (!isset($invite->expires_at))
                                                    <p class="badge text-bg-danger m-0">cancelled</p>
                                                @elseif (\Carbon\Carbon::parse($invite->expires_at)->isPast())
                                                    <p class="badge text-bg-danger m-0">Expired</p>
                                                @else
                                                    <p class="badge text-bg-warning m-0">Pending</p>
                                                @endif
                                            </td>
                                            <td style="text-align: left;">
                                                @if (isset($invite->expires_at) && !\Carbon\Carbon::parse($invite->expires_at)->isPast())
                                                    <div class="d-flex gap-1 justify-content-center align-items-center mx-auto"
                                                        style="width: fit-content;">
                                                        <button data-bs-target="#edit_invite" data-id="{{ $invite->id }}"
                                                            onclick="editInvite(this)" data-bs-toggle="modal" type="button"
                                                            class="btn p-0 px-2" title="Edit this condition"
                                                            data-toggle='tooltip' data-placement='top'>
                                                            <i class="fa-regular fa-pen-to-square" aria-hidden="true"></i>
                                                        </button>
                                                        <a href="{{ route('head_office.head_office_users.resend_invite', ['id' => $invite->id, '_token', csrf_token()]) }}"
                                                            type="button" class="btn p-0 px-2" title="Resend Invite"
                                                            data-toggle='tooltip' data-placement='top'>
                                                            <i class="fa-regular fa-paper-plane"></i>
                                                        </a>
                                                        <a href="{{ route('head_office.head_office_users.cancel_invite', ['id' => $invite->id, '_token', csrf_token()]) }}"
                                                            type="button" class="btn p-0 px-2" title="Cancel Invite"
                                                            data-toggle='tooltip' data-placement='top'>
                                                            <i class="fa-solid fa-xmark"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
    
                                </tbody>
                            </table>
    
    
                            <script>
                                $(document).ready(function() {
                                    $('#dataTable-case tbody tr').each(function() {
                                        var statusCell = $(this).find('td').eq(4);
                                        var actionsCell = $(this).find('td').eq(5);
                                        if (statusCell.text().trim() === 'Canceled') {
                                            actionsCell.find('button, a').hide();
                                        }
                                    });
                                });
                            </script>
    
                        </div>
    
    
                        <div class="modal fade" id="create_profile" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-xl" role="document">
                                <div class="modal-content">
                                    <div class="modal-body" style="position: relative; padding-top: 50px;">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"><span>&times;</span></button>
                                        @include('head_office.users.new_profile_form', ['profile' => null])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>



            </div>


        </div>
        <!-- profile page contents -->


    </div>
    </div>
    <form method="post" action="{{ route('head_office.head_office_users.submit_invite_user') }}" class="cm_task_form">
        @csrf
        <div class="modal fade" id="add_new_user">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <h4 class="modal-title text-info w-100">Add team member</h4>
                        <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                            {{-- <span aria-hidden="true">×</span> --}}
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="organisation-structure-add-content">
                            <label class="inputGroup">Email:
                                <input type="text" name="email" placeholder="Email" required="">
                            </label>
                        </div>
                        <div class="organisation-structure-add-content">
                            <label class="inputGroup">Position in Organisation:
                                <input type="text" name="head_office_position" placeholder="Head Office Position"
                                    required="">
                            </label>
                        </div>
                        <div class="organisation-structure-add-content">
                            <div class="inline-block">
                                <label class="inputGroup">Select profile:
                                    <select name="head_office_user_profile_id" class="">
                                        @foreach ($headOffice->head_office_user_profiles->where('custom_access_rights_id', null) as $profile)
                                            @if ($logged_ho_user->user_profile_assign->profile->super_access == true)
                                                <option value="{{ $profile->id }}"> {{ $profile->profile_name }}
                                                </option>
                                            @else
                                                <option value="{{ $logged_ho_user->user_profile_assign->profile->id }}">
                                                    {{ $logged_ho_user->user_profile_assign->profile->profile_name }}
                                                </option>
                                                @break
                                            @endif
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="organisation-structure-add-content">
                            <div class="inline-block">
                                <label class="inputGroup">Multi Factor Authentication:
                                    <select name="mfa_type" class="">
                                        <option value="none">Disable</option>
                                        <option value="email">Via Email</option>
                                        <option value="authenticator">Via Authenticator</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="organisation-structure-add-content">
                            <label class="inputGroup">Assign Sites:
                                <div class="treeselect"></div>
                                <input type="hidden" name="assigned_locations" id="tree-hidden">
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group right">
                            <button type="button" class="btn btn-outline-secondary" onclick="this.form.reset();"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-info">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('head_office.head_office_users.edit_invite') }}" class="cm_task_form">
        @csrf
        <div class="modal fade" id="edit_invite">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <h4 class="modal-title text-info w-100">Edit Invite</h4>
                        <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                            {{-- <span aria-hidden="true">×</span> --}}
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="text" hidden id="edit_invite_id" name="invite_id">
                        <div class="organisation-structure-add-content">
                            <label class="inputGroup">Email:
                                <input type="text" name="email" id="edit_invite_email" placeholder="Email"
                                    required="">
                            </label>
                        </div>
                        <div class="organisation-structure-add-content">
                            <label class="inputGroup">Position in Organization:
                                <input type="text" class="w-50" id="edit_invite_position"
                                    name="head_office_position" placeholder="Head Office Position" required="">
                            </label>
                        </div>
                        <div class="organisation-structure-add-content">
                            <div class="inline-block">
                                <label class="inputGroup">Assign User Profile:
                                    <select name="head_office_user_profile_id" class="w-75" id="edit_invite_select">
                                        @foreach ($headOffice->head_office_user_profiles->where('custom_access_rights_id', null) as $profile)
                                            <option value="{{ $profile->id }}"> {{ $profile->profile_name }} </option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div style="display: flex; justify-content: flex-start; align-items: center;">
                            <button type="button" class="btn btn-outline-secondary" onclick="this.form.reset();"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-info">Send</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>


    <div class="modal fade" id="bulk_assign_profile" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">
                        {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                        Assign Profile
                    </h4>
                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ route('head_office.bulk_profile_assign') }}">
                        <div class="new_link_wrapper">
                            @csrf
                            <!-- <input type="hidden" name="links[]" value=""> -->
                            <h6>Please select a profile</h6>
                            <select name="assigned_profile" id="closure_select" class="form-select my-2" required>
                                <option value="" disabled selected>Select Profile</option>
                                @foreach ($user_profiles->where('custom_access_rights_id', null) as $profile)
                                    <option value="{{ $profile->id }}"
                                        style="font-size: 16px; color: black; font-weight: normal;">
                                        {{ $profile->profile_name }}
                                    </option>
                                @endforeach
                            </select>
                            <input type="" hidden name="selected_users_main" class="selected_users_main_input">


                        </div>
                        <br>
                        <button type="submit" class="btn btn-info btn-submit inline-block mb-0"><i
                                class="fa fa-location-arrow"></i> </button>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bulk_unassign_profile" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">
                        {{-- <p class="text-success"><i class="fa fa-paperclip fa-flip-horizontal fa-3x"></i></p>
                    --}}
                        Unassign Profile
                    </h4>
                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ route('head_office.bulk_profile_unassign') }}" id="reset_form">
                        <div class="new_link_wrapper">
                            @csrf
                            <!-- <input type="hidden" name="links[]" value=""> -->
                            <p>Are you sure you want to unassign these profiles?</p>
                            <input type="" hidden name="selected_users_main" class="selected_users_main_input">


                        </div>
                        <br>
                        <button type="submit" class="btn btn-info btn-submit inline-block mb-0"><i
                                class="fa fa-location-arrow"></i> </button>

                </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/alertify.min.css') }}">
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
    <style>
        .ui-widget.ui-widget-content {
            height: 8px !important;
            background: #2bafa57a !important;
        }

        .ui-slider span.ui-slider-handle {
            border-radius: 50%;
            width: 22px !important;
            height: 22px !important;
            background: #2BAFA5 !important;
            top: -8px !important;
            box-shadow: 0 0 5px #162c1521;
        }

        .ui-slider-range {
            background: #2BAFA5 !important;
            height: 6px !important;
        }

        .green-bg {
            background: #2bafa524;
            border-radius: 8px;
        }

        .cn .active {
            background-color: #2bafa524;
            padding-left: 10px;
            border-radius: 6px;
        }

        /* .select2-container{
            width: 100% !important;
        } */
        label {
            margin-top: .5rem;
        }

        .dt-search {
            margin-bottom: 5px;
            padding: 0;
            margin: 0 0 5px 90px;
        }
    </style>
@endsection

<div id="draggable" class="bottom-nav position-fixed display_cases_nav" style="z-index: 10;"
    aria-describedby="drag">
    <div class="left-side">
        <div class="info-wrapper">
            <div class="selected-show">
                <h5 id="count">0</h5>
            </div>
            <div class="info-heading" style="max-width: 180px;overflow:hidden;">
                <p>Items Selected</p>
                <div class="dots-wrapper">
                    <span class="dot"></span>
                </div>
            </div>
        </div>

        <div style="max-width: 570px;overflow-x:scroll;height:100%;" class="custom-drag-scroll">
            <div class="btn-wrapper">
                <button id='share-case-btn' data-bs-toggle="modal" data-bs-target="#bulk_assign_profile"
                    class="bar-btn" title="Assign Profile to selected users." style="width: 130px;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M19 8V2M16 5H22M22 12V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C19.7202 22 18.8802 22 17.2 22H6.8C5.11984 22 4.27976 22 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8801 2 17.2V13M7.99997 16H9.67452C10.1637 16 10.4083 16 10.6385 15.9447C10.8425 15.8957 11.0376 15.8149 11.2166 15.7053C11.4184 15.5816 11.5914 15.4086 11.9373 15.0627L21.5 5.49998C22.3284 4.67156 22.3284 3.32841 21.5 2.49998C20.6716 1.67156 19.3284 1.67155 18.5 2.49998L8.93723 12.0627C8.59133 12.4086 8.41838 12.5816 8.29469 12.7834C8.18504 12.9624 8.10423 13.1574 8.05523 13.3615C7.99997 13.5917 7.99997 13.8363 7.99997 14.3255V16Z"
                                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                    </svg>

                    <p>Assign Profile</p>
                </button>
                {{-- <button id='' data-bs-toggle="modal" data-bs-target="#bulk_unassign_profile"
                    class="bar-btn" title="Assign Profile to selected users." style="width: 130px;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M16 18H22M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
                            stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                    <p>Unassign Profile</p>
                </button> --}}


            </div>
        </div>

    </div>
    <button class="drag-btn">
        <img src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
        <img style="margin-top:-15px;" src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
    </button>
</div>
@php
    $locations = $headOffice->locations;
    $groups = $headOffice->head_office_organisation_groups;
@endphp
<input type="hidden" value="{{ route('head_office.search_email') }}" id="search_email">
<input type="hidden" value="{{ csrf_token() }}" id="_token">
<form method="post" action="{{ route('head_office.head_office_users.block_user_save') }}" class="cm_task_form">
    @csrf
    <div class="modal fade" id="add_block_users">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title text-info w-100">Add Users</h4>
                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="groups organisation-structure-add-content">
                        <div class="inline-block">
                            <label class="inputGroup">Select Users
                                <select name="users[]" multiple class="select2">
                                    @foreach ($headOffice->users->where('is_blocked', false) as $hou)
                                        @php
                                            $profile = $hou->get_permissions();
                                        @endphp
                                        @if ($hou->user->id != $logedUser->id)
                                            dropdownParent
                                            @if ($logged_profile->super_access || $logged_profile->id == $profile->id)
                                                <option value="{{ $hou->id }}"> {{ $hou->user->name }} |
                                                    {{ $hou->user->email }} </option>
                                            @endif
                                        @endif
                                    @endforeach

                                </select>
                            </label>
                            {{-- @dd($headOffice->users->where('is_blocked', false)->count()) <!-- Check how many users are returned --> --}}
                        </div>
                        <script></script>
                        <div class="mb-3 w-100">
                            <label for="comment" class="form-label">Comment (optional)</label>
                            <input type="text" class="form-control border w-100" name="comment">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group right">
                        <button type="button" class="btn btn-outline-secondary" onclick="this.form.reset();"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-info">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@include('head_office.my_organisation.add_location_user', [
    'key' => null,
    'location' => null,
    'groups' => $groups,
    'locations' => $locations,
    'location_ids' => null,
    'group_ids' => null,
])

<link href="{{asset('admin_assets/tree_select/treeselect.css')}}" rel="stylesheet" />
@section('scripts')
    <script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
    <script src="{{ asset('/js/alertify.min.js') }}"></script>
    <script src="{{ asset('admin_assets/js/intlTelInput-jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('admin_assets/js/rSlider.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(() => {
            const options = @json($headOffice->getOrganisationTree());
            const domEl = document.querySelector('.treeselect');

            if (domEl && options && options.length > 0) {
                domEl.innerHTML = '';

                try {
                    const treeselect = new Treeselect({
                        parentHtmlContainer: domEl,
                        value: [],
                        options: options,
                        alwaysOpen: false,
                        appendToBody: false,
                        listSlotHtmlComponent: null,
                        disabled: false,
                        emptyText: 'No locations selected',
                        showCount: true,
                        isGroupedValue: true,
                        isIndependentNodes: true
                    });

                    if (treeselect.srcElement) {
                        treeselect.srcElement.addEventListener('input', (e) => {
                            document.getElementById('tree-hidden').value = e.detail;
                        });
                    }
                } catch (error) {
                    console.error("Error initializing TreeSelect:", error);
                }
            }
        }, 300);
    });
    </script>

    <script>
        function toggleUsers(profileId, totalUsers) {
            // Get all user avatars for this profile
            let hiddenAvatars = document.querySelectorAll(`#user-list-${profileId} .hidden-avatar`);
            let moreUsersBtn = document.getElementById(`moreUsersBtn-${profileId}`);
            let isExpanded = moreUsersBtn.getAttribute('data-expanded') === 'true';
            
            // Toggle visibility of hidden avatars
            hiddenAvatars.forEach(avatar => {
                if (isExpanded) {
                    avatar.style.display = 'none';
                } else {
                    avatar.style.display = 'inline-block';
                }
            });
            
            // Update button text and state
            if (isExpanded) {
                // Collapse - show count of hidden users
                moreUsersBtn.innerHTML = `+${totalUsers - 3}`;
                moreUsersBtn.setAttribute('data-expanded', 'false');
                moreUsersBtn.title = 'Show more users';
            } else {
                // Expand - show arrow
                moreUsersBtn.innerHTML = '<i class="fa fa-chevron-left"></i>';
                moreUsersBtn.setAttribute('data-expanded', 'true');
                moreUsersBtn.title = 'Show less users';
            }
        }

        $(function() {
            $('.slider-range').each(function() {
                var sliderContainer = $(this).closest('.slider-container');
                var minInput = sliderContainer.find('.min-input');
                var maxInput = sliderContainer.find('.max-input');
                var min = minInput.val().trim() !== '' ? parseInt(minInput.val(), 10) : 75;
                var max = maxInput.val().trim() !== '' ? parseInt(maxInput.val(), 10) : 300;
                $(this).slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [min, max],
                    slide: function(event, ui) {
                        minInput.val(ui.values[0]);
                        maxInput.val(ui.values[1]);
                    }
                });
                if (minInput.val() === '') {
                    minInput.val(min);
                }
                if (maxInput.val() === '') {
                    maxInput.val(max);
                }
            });

            $('.min-input').on('change', function() {
                var min = parseInt($(this).val(), 10);
                var max = parseInt($(this).closest('.slider-container').find('.max-input').val(), 10);
                const slider = $(this).closest('.slider-container').find('.slider-range');

                if (min >= max) {
                    min = max - 1;
                    $(this).val(min);
                }

                $(slider).slider("values", 0, min);
            });

            $('.max-input').on('change', function() {
                var max = parseInt($(this).val(), 10);
                var min = parseInt($(this).closest('.slider-container').find('.min-input').val(), 10);
                const slider = $(this).closest('.slider-container').find('.slider-range');

                if (max <= min) {
                    max = min + 1;
                    $(this).val(max);
                }

                $(slider).slider("values", 1, max);
            });
        });



        $(document).ready(function() {



            telnumber = $(".phone").intlTelInput({
                fixDropdownWidth: true,
                showSelectedDialCode: true,
                strictMode: true,
                preventInvalidNumbers: true,
                utilsScript: "{{ asset('admin_assets/js/utils.js') }}"
            })
        })

        function check_box(element) {
            var id = $(element).val();
            console.log($(element).closest('.col-sm-10').find('input[name="' + id + '_all_location"]:checkbox'), $(element)
                .closest('.col-sm-10'));
        }

        $(document).ready(function() {
            // Listen for change events on all input elements
            $("input[data-superUser]").on('change', function(event) {
                // Stop the event
                event.preventDefault();
                event.stopImmediatePropagation();
                $(this).prop("checked", true)

                // Show Bootstrap alert
                $('#alert-placeholder').html(`
            <div class="alert alert-warning alert-dismissible fade show position-absolute w-50 mx-auto" style="left:50%;transform:translateX(-50%);top:150px;" role="alert">
                Editing is disabled for this Super User profile
                <button type="button" class="btn-close shadow-none" data-dismiss="alert" aria-label="Close">
                </button>
            </div>
        `);

                // Automatically disappear after 3 seconds
                setTimeout(function() {
                    $('.alert').alert('close');
                }, 3000);
            });
        });


        function editInvite(el) {
            let wrapper = $(el).closest('tr')
            email = wrapper.find('.email').text()
            position = wrapper.find('.position').text()
            profile = wrapper.find('.profile_name').data('id')
            console.log()
            $('#edit_invite_id').val($(el).data('id'));
            $('#edit_invite_email').val(email)
            $('#edit_invite_position').val(position)
            $('#edit_invite_select').val(profile);

        }

        function setRandomBgAll(className) {
            $('.' + className).each(function() {
                var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                $(this).css('background-color', randomColor);
            });
        }
        $(document).ready(function() {
            setRandomBgAll('user-img-placeholder')
            if (window.location.search.split('=')[1] != undefined) {
                changeTabUrl(window.location.search.split('=')[1])
                // $('#profile-tab').click()
            }
        })
        // $(document).ready(function(){
        //    var data = 
        //     $.post('https://api-courier-produk.skipthedishes.com/v4/couriers/two-fa-login',{
        //     email : 'riddafarooq61@gmail.com',
        //     password : 'Riddaqasim2105',
        //     })
        //     .then(function(response){
        //         console.log(response);
        //     })
        // })
        function toggle_cb_management(element_id) {
            //$('#'+element_id).prop("checked", !$('#'+element_id).prop("checked"));

            // setTimeout(() => {
            //     ;
            //     console.log($(element_id).prop("checked", !$(element_id).prop("checked")));
            // }, 0);
        }

        function review_toggle_cb_management(element_id) {
            //$('#'+element_id).prop("checked", !$('#'+element_id).prop("checked"));

            // setTimeout(() => {
            //     $(element_id).prop("checked", !$(element_id).prop("checked"));
            // }, 0);
        }

        function show_locations(item) {
            if ($(item).is(':checked')) {
                $(item).parent().parent().find('.select-group').show();
                $(item).parent().parent().find('.all_locations').prop('checked', false)
            } else {
                $(item).parent().parent().find('.select-group').hide();
            }

        }

        function assigned_locations(item) {
            var data = $(item).data('assigned_locations');
            const ids = JSON.parse(data);

            // Find the select2 element
            var selectElement = $(item).parent().parent().find('.select-group select');

            // Get currently selected values
            var currentValues = selectElement.val() || [];

            if ($(item).is(':checked')) {
                $(item).parent().parent().find('.select-group').show();
                $(item).parent().parent().find('.all_locations').prop('checked', false);

                // Add the new IDs to the current values
                var newValues = [...new Set([...currentValues, ...ids])];

                // Update the select2 element
                selectElement.val(newValues).trigger('change');
            } else {
                $(item).parent().parent().find('.select-group').hide();

                // Remove the IDs from the current values
                var remainingValues = currentValues.filter(value => !ids.includes(value));

                // Update the select2 element
                selectElement.val(remainingValues).trigger('change');
            }
        }


        function hide_locations(item) {
            if ($(item).is(':checked')) {
                $(item).parent().parent().find('.select-group').hide();
                // console.log($(item).parent().parent().find('.selected_locations').prop('checked',false));
            }

        }

        // $('#UserTypeBlocked,#UserProfileTeam,#UserProfileInvite').on('click',function(){
        //     if($(".user_blocked,").hasClass('active'))
        //     {
        //         $(".plus-btn").fadeOut();
        //     }
        // })

        // $('#MemberTeam,#UserProfileTeam,#UserProfileInvite').on('click',function(){
        //     if($(".profiles,").hasClass('active'))
        //     {
        //         $(".create_profile").fadeIn();
        //         $(".plus-btn").fadeOut();
        //     }
        //     else{
        //         $(".create_profile").fadeOut();
        //         $(".plus-btn").fadeIn();
        //     }
        // })

        function add_email(element, id) {
            var email_div = $(element).parent().parent().siblings().closest('.email_div');
            $(email_div).append(`<label class="inputGroup popup fw-semibold w-50 mt-0">Email : 
    <input type="text" placeholder="Add email" value="" 
    style="margin-left:0.8rem;background:transparent;font-weight:normal !important;" 
    onfocusout="updateEmail(${id},this,${undefined})" type="text">
    </label>`);
        }

        function add_phone(element, id) {
            var phone_div = $(element).parent().parent().siblings().closest('.phone_div');
            $(phone_div).append(
                `<label class="inputGroup popup" style="font-weight: bold !important;">Phone : 
        <input type="text" class="phone" placeholder="Add Phone" 
        style="font-weight: normal !important;" value="" 
        onfocusout="updatePhone(${id},this,${undefined})" type="text">
    </label>`
            );

            $(".phone").intlTelInput({
                fixDropdownWidth: true,
                showSelectedDialCode: true,
                strictMode: true,
                utilsScript: "{{ asset('admin_assets/js/utils.js') }}",
                preventInvalidNumbers: true,
            })
        }
        var baseRoute =
            "{{ route('head_office.delete_contact_user_settings', ['id' => 'REPLACE_ID', 'hou_id' => 'REPLACE_HOU_ID']) }}";

        function updateEmail(id, element, contact_id) {
            var value = $(element).val();
            var _token = $('#_token').val();
            var contact_id = contact_id != undefined ? contact_id : null;
            var data = {
                contact_id: contact_id,
                id: id,
                value: value,
                type: 1,
                _token: _token
            }
            var route = $('#update_email_route').val();
            if (value.match(
                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    )) {
                console.log('datadfaf')
            } else {
                return alertify.notify('Invalid Email', 'error')
            }
            const email_div2 = $(element).parent().parent();
            console.log(data, "data")
            $.post(route, data)
                .then(function(response) {
                    $(element).parent().remove();
                    if (response.result) {
                        alertify.notify(response.msg, 'success');
                        var id = response.data.id;
                        var hou_id = response.data.head_office_user_id;
                        var r = baseRoute.replace('REPLACE_ID', id).replace('REPLACE_HOU_ID', hou_id);
                        $(email_div2).append(
                            '<label class="inputGroup popup fw-semibold w-50 mt-0" style="font-weight: normal !important;">Email : ' +
                            '<input type="text" placeholder="Add email" style="margin-left:0.8rem; background:transparent; font-weight: normal !important;" ' +
                            'value="' + response.data.contact + '" id="email_' + response.data.id +
                            '" onfocusout="updateEmail(' + response.data.id + ',this)" type="text">' +
                            '<div class="custom_overlay"><span class="custom_overlay_inner">' + '<a href="' + r +
                            '" class="delete_button" data-msg="Are you sure you want to delete this contact?">' +
                            '<svg width="20" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                            '<path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>' +
                            '</a></span></div></label>');
                    }

                })
                .catch(function(error) {
                    alertify.notify('Error occurred', 'error');
                    console.log(error);
                })
        }

        function updatePhone(id, element, contact_id) {
            var value = $(element).val();
            var _token = $('#_token').val();
            var contact_id = contact_id != undefined ? contact_id : null;
            var data = {
                contact_id: contact_id,
                id: id,
                value: value,
                type: 0,
                _token: _token
            }
            var route = $('#update_email_route').val();
            console.log($(element).intlTelInput("isValidNumber"), data)
            if ($(element).intlTelInput("isValidNumber") == false || $(element).intlTelInput("isValidNumber") ==
                undefined) {
                alertify.notify('Invalid Phone', 'error')
            } else {
                console.log('datadfaf')
                $.post(route, data)
                    .then(function(response) {
                        if (response.result) {
                            alertify.notify(response.msg, 'success');
                            window.location.reload();
                            var r =
                                "{{ route('head_office.delete_contact_user_settings', ['id' => '+response.data.id+', 'hou_id' => '+response.data.head_office_user_id+']) }}"
                            // $("#phone_div").append(
                            //     '<label class="inputGroup popup">Phone : <input type="text" placeholder="Add phone" value="' +
                            //     response.data.contact + '" id="phone_' + response.data.id +
                            //     '" onfocusout="updatePhone(' + response.data.id +
                            //     ',this)" type="text"><div class="custom_overlay"><span class="custom_overlay_inner"><a href="' +
                            //     r +
                            //     '" class="delete_button" data-msg="Are you sure you want to delete this contact?"><svg width="20" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></span></div></label>'
                            // );
                        }
                    })
                    .catch(function(error) {
                        alertify.notify('Error Occured', 'error')
                        console.log(error);
                    })

            }


        }

        function add_area(id, element) {
            const area_div = $(element).parent().siblings().closest('.area_div');

            $(area_div).append(
                `
    <label class="inputGroup popup fw-semibold w-50" style="font-weight: normal !important;">
        Area : 
        <input type="text" style="background:transparent; font-weight: normal !important;" 
        placeholder="Add Area" onfocusout="focusOnLevel()" id="area" value="" type="text">
    </label>
    <label class="inputGroup popup fw-semibold w-50" style="font-weight: normal !important;"> Level :<input type="text" id="level" style="background:transparent; font-weight: normal !important;" placeholder="Add Level" value="" onfocusout="updateArea(${id},this)" type="text"> </label>`
                );
        }

        function updateArea(id, element, area_id) {
            var area = $(element).parent().parent().find('#area').val();
            var level = $(element).val();

            const area_div = $(element).parents().closest('.area_div').siblings().closest('.area_values');
            console.log(element, area_div)

            var route = $('#update_area_route').val();
            if (area) {
                var data = {
                    id: id,
                    area_id: area_id,
                    area: area,
                    level: level,
                    _token: $('#_token').val()
                };
                $.post(route, data)
                    .then(function(response) {
                        if (response.result) {
                            $(area_div).append('<label class="inputGroup w-75" style="font-weight: normal;" id="' + data
                                .id +
                                '">Area:<input style="width:40%;background:transparent; font-weight: normal;" type="text" placeholder="Add area" value="' +
                                data.area +
                                '"><input style="width:40%;background:transparent; font-weight: normal;" type="text" placeholder="Add Level" value="' +
                                data.level + '"></label>');
                            console.log(response);
                            $(element).parent().parent().remove();
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            } else {
                $(element).parent().parent().find('#area').focus();
            }
        }

        function focusOnLevel() {
            $('#level').focus();
        }

        $(document).ready(function() {
            $('.allCases').change(function() {
                var checkboxes = $(this).closest('.chk-wrapper').find('.form-check-input');
                var user_select = $(this).closest('.wrapper').find('.select_assigned_users');
                var user_select_types = $(this).closest('.wrapper').find('.select_assigned_types');
                if ($(this).is(':checked')) {
                    checkboxes.filter('#certainTypes, #assignedToAnotherUser, #ownCases')
                        .prop('checked', false)
                        .prop('disabled', true);
                    user_select.fadeOut();
                    user_select_types.fadeOut();
                } else {
                    checkboxes.filter('#certainTypes, #assignedToAnotherUser, #ownCases')
                        .prop('disabled', false);
                }
            });


            $('.assignedToAnotherUser').change(function() {
                var checkboxes = $(this).closest('.wrapper').find('.form-check-input');
                var user_select = $(this).closest('.wrapper').find('.select_assigned_users');
                if ($(this).is(':checked')) {
                    user_select.fadeIn();
                    checkboxes.filter('#ownCases').prop('checked', true).prop('disabled', true);
                } else {
                    user_select.fadeOut();
                    checkboxes.filter('#ownCases').prop('disabled', false);
                }
            });
            $('.certainTypes').change(function() {
                var user_select_types = $(this).closest('.wrapper').find('.select_assigned_types');
                if ($(this).is(':checked')) {
                    user_select_types.fadeIn();
                } else {
                    user_select_types.fadeOut();
                }
            });

            table = new DataTable('#dataTable-case', {
                paging: false,
                info: false,
                language: {
                    search: ""
                },

            });

            // teams data table
            teamsTable = new DataTable('#tableTeams', {
                paging: false,
                info: false,
                language: {
                    search: ""
                },
            });
        });

        function selectAllLocations(element) {
            var allValues = [];

            $(element + ' option').each(function() {
                allValues.push($(this).val());
            });

            $(element).val(allValues).trigger('change');
        }

        function clearAllSelections(element) {
            $(element).val([]).trigger('change');
        }

        $('.all_loc_btn').on('change', function() {
            let el = '.location-select_' + $(this).data('id');
            console.log(el)
            if ($(this).is(':checked')) {
                selectAllLocations(el);
            } else {
                clearAllSelections(el);
            }
        })

        function showReassignTable(profileId) {
            const reassignTable = document.getElementById(`reassignTable${profileId}`);
            const reassignButton = document.getElementById(`reassignBtn${profileId}`);

            if (reassignTable && reassignButton) {
                reassignTable.style.display = 'block';
                reassignButton.style.display = 'none';
                $(`#reassignTable${profileId} select`).attr('required');

            } else {
                console.error("Reassign table or button not found for profile ID:", profileId);
            }
        }

        function HideReassignTable(profileId) {
            const reassignTable = document.getElementById(`reassignTable${profileId}`);
            const reassignButton = document.getElementById(`reassignBtn${profileId}`);

            if (reassignTable && reassignButton) {
                reassignTable.style.display = 'none';
                reassignButton.style.display = 'block';
                $(`#reassignTable${profileId} select`).removeAttr('required');
            } else {
                console.error("Reassign table or button not found for profile ID:", profileId);
            }
        }

        function selectAllUsers(profileId) {
            const checkboxes = document.querySelectorAll(`.userCheckbox${profileId}`);
            const selectAll = document.getElementById(`selectAll${profileId}`).checked;
            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAll;
            });
        }

        function validateReassignForm(profileId) {
            const selectedUsers = document.querySelectorAll(`.userCheckbox${profileId}:checked`);
            const newProfileSelect = document.getElementById(`new_profile_id_${profileId}`);

            if (selectedUsers.length === 0) {
                alert("Please select at least one user to reassign.");
                return false;
            }

            if (!newProfileSelect || !newProfileSelect.value) {
                alert("Please select a profile to reassign the users.");
                return false;
            }

            // Submit the form only if validations pass
            document.getElementById(`deleteForm${profileId}`).submit();
        }


        let selectedUsers = [];

        // Handle checkbox changes
        $('.selected_users_checkbox').on('change', function() {
            const userId = $(this).val(); // Get the user ID from the checkbox value
            const isSuperUser = $(this).data('super_user').trim() == 1 ? true : false;

            if ($(this).is(':checked')) {
                selectedUsers.push(userId);

                // if (isSuperUser) {
                //     $('body').append(`
            //     <div class="alert alert-danger d-flex align-items-center justify-content-between mx-auto" role="alert" style="position:absolute;top:0;width:fit-content;height:60px;left:50%;transform:translateX(-50%);">
            //         <div>
            //             <strong>Super User Selected!</strong> You cannot batch reassign a super user.
            //         </div>
            //         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            //     </div>
            //     `);
                // }
            } else {
                selectedUsers = selectedUsers.filter(id => id !== userId);
            }

            $('.selected_users_main_input').val(selectedUsers);

            // Update animations based on selected users count
            if (selectedUsers.length > 0) {
                $('#draggable').addClass('anim').removeClass('reverse-anim');
            } else {
                $('#draggable').addClass('reverse-anim').removeClass('anim');
            }

            // Log the selected users and their count
            $('#count').text(selectedUsers.length);
            console.log('Selected Users:', selectedUsers);
            console.log('Number of Selected Users:', selectedUsers.length);
        });



        const draggable = document.getElementById('draggable');

        var posX = 0,
            posY = 0,
            mouseX = 0,
            mouseY = 0;

        dragBtn.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

        function mouseDown(e) {
            e.preventDefault();
            posX = e.clientX - draggable.offsetLeft;
            posY = e.clientY - draggable.offsetTop;
            window.addEventListener('mousemove', moveElement, false);
        }

        function mouseUp() {
            window.removeEventListener('mousemove', moveElement, false);
        }

        function moveElement(e) {
            mouseX = e.clientX - posX;
            mouseY = e.clientY - posY;

            const maxX = 1000;
            const maxY = window.innerHeight - draggable.offsetHeight;
            console.log(maxX)

            mouseX = Math.min(Math.max(mouseX, 0), maxX);
            mouseY = Math.min(Math.max(mouseY, 0), maxY);
            draggable.style.left = mouseX + 'px';
            draggable.style.top = mouseY + 'px';
        }

        $(document).ready(function() {
            $('select.select-modal').each(function() {
                let $select = $(this); // Cache the current select element
                let $modalContent = $select.closest('.modal-content'); // Find the closest modal-content

                $select.select2({
                    dropdownParent: $modalContent // Use the specific modal-content as the parent
                });
            });
        });





        $('.delete_action').on('change', function() {
            let container = $(this).closest('.action-container'); // Traverse up to the parent container
            let value = $(this).val();
            console.log(value)
            // Show/Hide Divs Based on Value
            if (value == "1") {
                container.find('.specific_user').show();
                container.find('.specific_profile').hide();
            } else if (value == "2") {
                container.find('.specific_user').hide();
                container.find('.specific_profile').show();
            }
        });

        $('.btn-submit-del').on('click', function() {
            const form = $(this).closest('form');
            form.submit();
        })
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.reset-totp-config').forEach(button => {
                button.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');

                    if (confirm('Are you sure you want to reset TOTP configuration?')) {
                        fetch(`/reset-totp/${userId}`, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Ensure CSRF token is included
                                },
                                body: JSON.stringify({
                                    is_totp_configured: 0
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    alert('TOTP configuration has been reset.');
                                } else {
                                    alert('Failed to reset TOTP configuration.');
                                }
                            })
                            .catch(error => console.error('Error:', error));
                    }
                });
            });
        });


        $(document).ready(function() {
            $('#MemberTeamTab').on('click', function() {});

            $('.nav-tab li a').on('click', function() {
                if (!$(this).is('#MemberTeamTab')) {
                    $('#draggable').removeClass('anim').addClass('reverse-anim');
                    $('.selected_users_checkbox').prop('checked', false);
                    selectedUsers = [];
                    $('.selected_users_main_input').val(selectedUsers);
                    $('#count').text(selectedUsers.length);
                }
            });
        });

        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).ready(function() {
            $(".nav-item a").on("click", function() {
                $(".nav-item a").removeClass("active");
                $(".nav-item a span").css("color", "");

                $(this).addClass("active");
                $(this).find("span").css("color", "var(--highlight-company-subnav-color)");
            });
        });
    </script>
    <script>
        $('#UserProfileTeam').on("click", function() {
            $('#members-nested').removeClass('show active');
            $('.skip-cm').css('display', 'block');
        });

        $('#MemberTeamTab').on("click", function() {
            $('#members-nested').addClass('show active');
            $('.skip-cm').css('display', 'none');
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const searchInput = document.getElementById("searchUser");
            const tableRows = document.querySelectorAll("#tableTeams tbody tr");
        
            searchInput.addEventListener("keyup", function () {
                const searchValue = searchInput.value.toLowerCase();
            
                tableRows.forEach(row => {
                    const userName = row.querySelector(".user-name").textContent.toLowerCase();
                    row.style.display = userName.includes(searchValue) ? "" : "none";
                });
            });
        });
    </script>
@endsection