@extends('layouts.company_users_setting_view')
@section('title', 'User Detail')
@section('content')
    <link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />
    <style>
        .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;
            flex-direction: column;
        }


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

        .content-wrapper {
            margin-left: 120px;
            flex-grow: 1;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }

        .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--default .select2-selection--multiple{
            border: 1px solid #dee2e6 !important;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
            padding-block: 0.3rem !important;
            padding-bottom: 0.7rem !important;
            padding-left: 0.3rem !important;
            border-radius: 1rem !important;
        }

        .loader-small {
            border: 5px solid #f3f3f3;
            border-radius: 50%;
            border-top: 5px solid #2bafa5;
            width: 100%;
            height: 100%;
            -webkit-animation: spin 1s infinite;
            animation: spin 1s infinite;
        }

        .treeselect-input {
            border: 1px solid #dee2e6 !important;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
            border-radius: 1rem !important;
            padding-inline: 0.5rem !important;
        }

        .select2.select2-container.select2-container--default{
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single{
            border: 1px solid #dee2e6 !important;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
            border-radius: 1rem !important;
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 50% !important;
            transform: translateY(-50%) !important;
            right: 20px !important;
            width: 20px;
        }

        /* Clean form layout styles */
        .clean-form-container {
            background: white;
            border-radius: 12px;
            padding: 32px;
            max-width: 900px;
            margin: 0;
            border: 1px solid #e9ecef;
        }

        .form-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            min-height: 40px;
            padding: 8px 0;
            border-bottom: 1px solid #f8f9fa;
        }

        .form-row:hover {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 8px 12px;
            margin: 0 -12px 20px -12px;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
            min-width: 140px;
            margin-right: 20px;
            text-align: left;
            font-size: 14px;
            position: relative;
        }

        .form-label::after {
            content: ':';
            color: #6c757d;
            margin-left: 2px;
        }

        .form-value {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .form-input {
            border: 1px solid #e9ecef;
            background: #fafbfc;
            font-weight: 500;
            color: #212529;
            width: 100%;
            padding: 10px 16px;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .form-input:focus {
            outline: none;
            border-color: #2BAFA5;
            background: white;
            box-shadow: 0 0 0 3px rgba(43, 175, 165, 0.1);
        }

        .form-input:hover {
            border-color: #2BAFA5;
            background: white;
        }

        .form-select {
            border: 1px solid #e9ecef;
            background: #fafbfc;
            font-weight: 500;
            color: #212529;
            width: 100%;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 14px;
            cursor: pointer;
        }

        .form-select:focus {
            outline: none;
            border-color: #2BAFA5;
            background: white;
            box-shadow: 0 0 0 3px rgba(43, 175, 165, 0.1);
        }

        .form-select:hover {
            border-color: #2BAFA5;
            background: white;
        }

        .priority-badge {
            background: linear-gradient(135deg, #ffc107, #ffb300);
            color: #333;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
        }

        /* Enhanced dropdown styling */
        .dropdown-menu {
            border: none;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 8px 0;
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            z-index: 1000;
            min-width: 150px;
        }

        .dropdown-item {
            padding: 10px 20px;
            transition: all 0.2s ease;
            color: #495057;
            display: block;
            text-decoration: none;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .dropdown-item:hover {
            background: #f8f9fa;
            color: #2BAFA5;
        }

        /* Improved expertise section */
        .expertise-row {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            padding: 16px 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }

        .expertise-row:hover {
            background: white;
            border-color: #2BAFA5;
        }

        .expertise-fields {
            display: flex;
            gap: 16px;
            flex: 1;
            align-items: center;
        }

        .expertise-field {
            flex: 1;
            position: relative;
        }

        .expertise-field-label {
            font-size: 11px;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            display: block;
        }

        .expertise-input {
            width: 100%;
            border: 1px solid #e9ecef;
            background: white;
            font-weight: 500;
            color: #212529;
            padding: 10px 14px;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .expertise-input:focus {
            outline: none;
            border-color: #2BAFA5;
            box-shadow: 0 0 0 3px rgba(43, 175, 165, 0.1);
            background: #fafbfc;
        }

        .expertise-input:hover {
            border-color: #2BAFA5;
            background: #fafbfc;
        }

        .expertise-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 16px;
        }

        /* Enhanced section header with better positioning */
        .section-header {
            font-weight: 700;
            color: #2BAFA5;
            margin: 32px 0 20px 0;
            padding: 16px 0 12px 0;
            border-bottom: 2px solid #e9ecef;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
        }

        .section-header::before {
            content: '';
            width: 4px;
            height: 20px;
            background: #2BAFA5;
            border-radius: 2px;
        }

        .section-actions {
            margin-left: auto;
            position: relative;
        }

        /* Improved add button */
        .add-button {
            background: #2BAFA5;
            border: none;
            color: white;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .add-button:hover {
            background: #229c94;
        }

        /* Enhanced delete button for expertise */
        .expertise-delete-button {
            color: #dc3545;
            background: #fff5f5;
            border: 1px solid #fecaca;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .expertise-delete-button:hover {
            background: #dc3545;
            color: white;
            border-color: #dc3545;
        }

        /* Responsive improvements for expertise */
        @media (max-width: 768px) {
            .expertise-row {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
            
            .expertise-fields {
                flex-direction: column;
                gap: 12px;
            }
            
            .expertise-actions {
                margin-left: 0;
                justify-content: center;
            }
        }

        /* Contact items styling */
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }

        .contact-item:hover {
            background: white;
            border-color: #2BAFA5;
        }

        .contact-input {
            flex: 1;
            border: 1px solid #e9ecef;
            background: white;
            font-weight: 500;
            color: #212529;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .contact-input:focus {
            outline: none;
            border-color: #2BAFA5;
            box-shadow: 0 0 0 2px rgba(43, 175, 165, 0.1);
        }

        .delete-button {
            color: #dc3545;
            background: #fff5f5;
            border: 1px solid #fecaca;
            padding: 6px 10px;
            margin-left: 8px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-size: 12px;
        }

        .delete-button:hover {
            background: #dc3545;
            color: white;
            border-color: #dc3545;
        }

        /* Action buttons */
        .action-buttons {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 2px solid #e9ecef;
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .btn-update {
            background: #28a745;
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .btn-update:hover {
            background: #218838;
        }

        .btn-delete {
            background: #dc3545;
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .btn-delete:hover {
            background: #c82333;
        }

        /* About me input */
        .about-me-input {
            width: 100%;
            border: 1px solid #e9ecef;
            background: #fafbfc;
            font-weight: 500;
            color: #212529;
            padding: 12px 16px;
            min-height: 80px;
            resize: vertical;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 14px;
            font-family: inherit;
        }

        .about-me-input:focus {
            outline: none;
            border-color: #2BAFA5;
            background: white;
            box-shadow: 0 0 0 3px rgba(43, 175, 165, 0.1);
        }

        .about-me-input:hover {
            border-color: #2BAFA5;
            background: white;
        }

        /* Enhanced visual elements */
        .form-container-header {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e9ecef;
        }

        .form-title {
            font-size: 24px;
            font-weight: 700;
            color: #2BAFA5;
            margin: 0;
        }

        .form-subtitle {
            font-size: 14px;
            color: #6c757d;
            margin: 4px 0 0 0;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #e8f5e8;
            color: #28a745;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 16px;
        }

        .status-indicator::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #28a745;
            border-radius: 50%;
        }

        .status-indicator.blocked{
            background: #dc354628;
            color: #a22632;
        }
        .status-indicator.blocked::before {
            background: #dc3545;
        }


        /* Responsive improvements */
        @media (max-width: 768px) {
            .clean-form-container {
                margin: 0 16px;
                padding: 20px;
            }
            
            .form-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .form-label {
                min-width: auto;
                margin-right: 0;
            }
            
            .form-value {
                width: 100%;
            }
        }

        .only-one .select-modal-users + span.select2.select2-container.select2-container--default ~ span.select2.select2-container.select2-container--default {
    display: none !important;
}

    </style>

    <div class="tab-content mt-3" id="userTabContent">
        <div class="tab-pane fade show active" id="user-details" role="tabpanel" aria-labelledby="user-details-tab">
            <div class="clean-form-container">
                <div class="form-container-header">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <h1 class="form-title">User Profile</h1>
                            <p class="form-subtitle">Manage user information and settings</p>
                        </div>
                        <div class="status-indicator {{$headOfficeUser->is_blocked ? 'blocked' : 'active'}}">
                            @if($headOfficeUser->is_blocked)
                                Blocked User
                            @else
                                Active User
                            @endif
                        </div>
                    </div>
                </div>
                <form action="{{ route('head_office.head_office_user_update', $headOfficeUser->id) }}" class="form" method="post">
                    @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                        @csrf
                    @endif

                    <input type="hidden" name="assigned_profile" value="{{ $logged_ho_user->user_profile_assign->profile->id }}">
                    
                    <div class="form-row">
                        <div class="form-label">Profile Type:</div>
                        <div class="form-value">
                            @if ($headOfficeUser->access_right)
                                <select class="form-select" disabled name="assigned_profile" id="assigned_profile">
                                    <option>Custom</option>
                                </select>
                                @if ($logged_ho_user->user_profile_assign->profile->super_access)
                                    <a data-msg="Are you sure to remove custom access right for this user?"
                                        class="delete-button"
                                        href="{{ route('head_office.head_office_access_right_delete', ['id' => $headOfficeUser->id, '_token' => csrf_token()]) }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                @endif
                            @else
                                <select
                                    @if ($logged_ho_user->user_profile_assign->profile->super_access == false) onchange="return false;" 
                                    style="pointer-events: none;" @endif
                                    class="form-select" name="assigned_profile" id="assigned_profile">
                                    <option>Select a Profile</option>
                                    @foreach ($user_profiles->where('custom_access_rights_id', null) as $profile)
                                        <option @if ($headOfficeUser->get_permissions()->id == $profile->id) selected @endif value="{{ $profile->id }}">
                                            {{ $profile->profile_name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-label">Position:</div>
                        <div class="form-value">
                            <input
                                {{ $logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id ? '' : 'disabled' }}
                                type="text" class="form-input" name="position"
                                value="{{ $headOfficeUser->position }}"
                                placeholder="Enter Position in Organization">
                        </div>
                    </div>

                    <div class="section-header">
                        <span>Add Email/Phone</span>
                        <div class="section-actions">
                            @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                                <button type="button" class="add-button" id="dropdownMenuButton_x" data-bs-toggle="dropdown">
                                    <i class="fa-solid fa-plus"></i>
                                    <span>Add</span>
                                </button>
                                <div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownMenuButton_x">
                                    <a href="javascript:void(0)" class="dropdown-item" onclick="add_phone(this,'{{ $headOfficeUser->id }}')">Add Phone</a>
                                    <a href="javascript:void(0)" class="dropdown-item" onclick="add_email(this,'{{ $headOfficeUser->id }}')">Add Email</a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div id="email_div" class="email_div">
                        @foreach ($headOfficeUser->head_office_user_contact_details->where('type', 1) as $k => $contact)
                            <div class="contact-item">
                                <div class="form-label">Email:</div>
                                <div class="form-value">
                                    <input
                                        {{ $logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id ? '' : 'disabled' }}
                                        type="text" class="contact-input" placeholder="Add email" 
                                        id="email_{{ $contact->id }}" value="{{ $contact->contact }}"
                                        onfocusout="updateEmail({{ $headOfficeUser->id }},this,{{ $contact->id }})">
                                    @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                                        <a href="{{ route('head_office.delete_contact_user_settings', ['id' => $contact->id, 'hou_id' => $headOfficeUser->id]) }}"
                                            class="delete-button" data-msg="Are you sure you want to delete this contact?">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @foreach ($headOfficeUser->head_office_user_contact_details->where('type', 0) as $k => $contact)
                        <div class="contact-item">
                            <div class="form-label">Phone:</div>
                            <div class="form-value">
                                <input type="text" class="contact-input" placeholder="Add a phone number"
                                    value="{{ $contact->contact }}"
                                    onfocusout="updatePhone({{ $headOfficeUser->id }},this,{{ $contact->id }})"
                                    style="background: {{ $contact->is_phone_hidden ? 'rgb(239 239 239 / 78%)' : '' }}">
                                <a href="{{ route('head_office.delete_contact_user_settings', ['id' => $contact->id, 'hou_id' => $headOfficeUser->id]) }}"
                                    class="delete-button" data-msg="Are you sure you want to delete this contact?">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </div>
                        </div>
                    @endforeach

                    <div id="phone_div" class="phone_div"></div>

                    <div class="section-header">
                        <span>Expertise</span>
                        <div class="section-actions">
                            @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                                <button type="button" class="add-button" onclick="add_area('{{ $headOfficeUser->id }}',this)">
                                    <i class="fa-solid fa-plus"></i>
                                    <span>Add</span>
                                </button>
                            @endif
                        </div>
                    </div>

                    <div id="area_values" class="area_values">
                        @if ($headOfficeUser->user->selected_head_office_user && $headOfficeUser->user->selected_head_office_user->head_office_user_area)
                            @foreach ($headOfficeUser->user->selected_head_office_user->head_office_user_area as $area)
                                <div class="expertise-row" id="{{ $area->id }}">
                                    <div class="expertise-fields">
                                        <div class="expertise-field">
                                            <label class="expertise-field-label">Area</label>
                                            <input
                                                {{ $logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id ? '' : 'disabled' }}
                                                type="text" class="expertise-input" placeholder="Enter area of expertise" value="{{ $area->area }}">
                                        </div>
                                        <div class="expertise-field">
                                            <label class="expertise-field-label">Level</label>
                                            <input
                                                {{ $logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id ? '' : 'disabled' }}
                                                type="text" class="expertise-input" placeholder="Enter proficiency level" value="{{ $area->level }}">
                                        </div>
                                    </div>
                                    @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                                        <div class="expertise-actions">
                                            <a href="{{ route('head_office.delete_area_user_settings', ['id' => $area->id, 'hou_id' => $headOfficeUser->id]) }}"
                                                class="expertise-delete-button" data-msg="Are you sure you want to delete this area?">
                                                <i class="fa-solid fa-trash"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <div id="area_div" class="area_div"></div>

                    <div class="form-row">
                        <div class="form-label">About me:</div>
                        <div class="form-value">
                            <textarea name="about_me" id="about_me" class="about-me-input" 
                                placeholder="Tell us about yourself..."
                                {{ $logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id ? '' : 'disabled' }}>{{ $headOfficeUser->about_me }}</textarea>
                            @if($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                                <small style="color: #6c757d; font-size: 12px;">✓ Editable</small>
                            @else
                                <small style="color: #dc3545; font-size: 12px;">✗ Read-only</small>
                            @endif
                        </div>
                    </div>

                    <input type="hidden" value="{{ route('head_office.update_email_user_settings') }}" id="update_email_route">
                    <input type="hidden" id="_token" value="{{ csrf_token() }}">
                    <input type="hidden" value="{{ route('head_office.update_area_user_settings') }}" id="update_area_route">

                    <div class="action-buttons">
                        @if ($logged_ho_user->user_profile_assign->profile->super_access == true || $logged_ho_user->id == $headOfficeUser->id)
                            <button class="btn-update" type="submit" id="form_{{ $headOfficeUser->id }}" name="submit">Update</button>
                        @endif
                        @if ($logged_ho_user->id != $headOfficeUser->id && $logged_ho_user->user_profile_assign->profile->super_access == true)
                            <button type="button" class="btn-delete" data-bs-toggle="modal" data-bs-target="#p_delete_model_user_{{ $headOfficeUser->id }}">Delete User</button>
                        @endif
                    </div>
                </form>
                <form method="post" action="{{ route('head_office_user_delete', ['id' => $headOfficeUser->id]) }}">

                    <div class="modal fade select_2_modal" id="p_delete_model_user_{{ $headOfficeUser->id }}">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header text-center">
                                    <h4 class="modal-title w-100" style="color: red !important; font-size: 30px;">
                                        Warning
                                    </h4>
                                    <button type="button" class="btn-close float-right" data-bs-dismiss="modal"
                                        aria-label="Close">
                                        <span aria-hidden="true">
                                            {{-- <i class="fa-solid fa-xmark" style="color: black; font-size: 25px;"></i> --}}
                                        </span>
                                    </button>
                                </div>
                                <div class="modal-body">

                                    <div class="new_link_wrapper">
                                        @csrf
                                        <div class="d-flex align-items-center" style="margin-bottom: -15px">
                                            <p
                                                style="width: 30px; height: 30px; margin-right: 5px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                                <img style="width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); background-color: orange;"
                                                    src="{{ $headOfficeUser->user->logo }}">
                                            </p>
                                            <p style="font-weight: 500; font-size: 20px;">
                                                {{ $headOfficeUser->user->name }}
                                            </p>
                                        </div>

                                        @php
                                            $open_cases = $headOfficeUser->head_office_user_cases->filter(function ($case) {
                                                return $case->case->status != 'closed';
                                            });
                                            $investigator_cases = $headOfficeUser->hoUsersToParties;
                                            $task_assigns = $headOfficeUser->ho_user_task_assign;
                                            $user_tasks = $headOfficeUser->ho_user_tasks;
                                            $locations = $headOfficeUser->get_assigned_locs(false)->toArray();
                                        @endphp

                                        <li class="mb-0 space-in-list">Handling {{ count($open_cases) ?? 0 }} cases</li>
                                        <li class="space-in-list">Serving as a case investigator in {{ count($investigator_cases) ?? 0 }} cases</li>
                                        <li class="space-in-list">Assigned to {{ count($task_assigns) ?? 0 }} case tasks</li>
                                        <li class="space-in-list">Assigned to {{ count($user_tasks) ?? 0 }} user tasks</li>
                                        {{-- <li class="space-in-list">Assigned to
                                            {{ count($headOfficeUser->user_to_contacts) ?? 0 }} contacts/addresses</li> --}}
                                        <li class="space-in-list">Assigned to {{ count($locations) }} sites</li>
                                    </div>
                                    <br>
                                    <div class="action-container">

                                        <h5>What would you like to do?</span></h5>

                                        <div class="select-outer-div">
                                            <li class="my-1 fw-semibold">Assign open cases to :</li>
                                            <div class="mt-2 only-one">
                                                <select name="open_cases_assignee[]" multiple class="select-modal-users" {{ count($open_cases) > 0 ? 'required' : '' }}>
                                                    @foreach ($headOffice->users as $u)
                                                        @if ($u->id != $headOfficeUser->id)
                                                            <option value="{{ $u->id }}">
                                                                {{ $u->user->name }}
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="select-outer-div">
                                            <li class="my-1 fw-semibold">Replace the current case invsetigator with :</li>
                                            <div class=" ms-3">
                                                <label class="form-check-label d-flex align-items-center">
                                                    <input type="checkbox" id="investigator_checkbox" name="investigator_checkbox" value="no_one" class="form-check-input me-2">
                                                    No One
                                                </label>
                                            </div>
                                            <div id="investigator_div" class="mt-2 only-one">
                                                <select name="investigator[]" multiple class="select-modal-users" {{ count($investigator_cases) > 0 ? 'required' : '' }}>
                                                    @foreach ($headOffice->users as $u)
                                                        @if ($u->id != $headOfficeUser->id)
                                                            <option value="{{ $u->id }}">
                                                                {{ $u->user->name }}
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="select-outer-div">
                                            <li class="my-1 fw-semibold">Assign case tasks to :</li>
                                            <div class=" ms-3">
                                                <div class="form-check mb-2">
                                                    <input type="radio" name="case_task_assignment_type" value="case_handler" id="case_handler_radio" class="form-check-input">
                                                    <label class="form-check-label" for="case_handler_radio">
                                                        Assign to Case Handler(s)
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input type="radio" checked name="case_task_assignment_type" value="specific_user" id="specific_user_radio" class="form-check-input">
                                                    <label class="form-check-label" for="specific_user_radio">
                                                        Specific User
                                                    </label>
                                                </div>
                                            </div>
                                            <div id="case_task_assignee_div" class="mt-2 only-one">
                                                <select name="case_task_assignee[]" multiple class="select-modal-users" {{ $task_assigns->count() > 0 ? 'required' : '' }}>
                                                    @foreach ($headOffice->users as $u)
                                                        @if ($u->id != $headOfficeUser->id)
                                                            <option value="{{ $u->id }}">
                                                                {{ $u->user->name }}
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="select-outer-div">
                                            <li class="my-1 fw-semibold">Assign user tasks to :</li>
                                            <div class="mt-2 only-one">
                                                <select name="user_task_assignee[]" multiple class="select-modal-users" {{ $user_tasks->count() > 0 ? 'required' : '' }}>
                                                    @foreach ($headOffice->users as $u)
                                                        @if ($u->id != $headOfficeUser->id)
                                                            <option value="{{ $u->id }}">
                                                                {{ $u->user->name }}
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="select-outer-div">
                                            <li>Assign contacts/addresses to :</li>
                                            <select name="contacts[]" multiple class="select-modal-users">
                                                @foreach ($headOffice->users as $u)
                                                    @if ($u->id != $headOfficeUser->id)
                                                        <option value="{{ $u->id }}">
                                                            {{ $u->user->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div> --}}
                                        <div class="select-outer-div">
                                            <li class="my-1 fw-semibold">Assign sites to :</li>
                                            <div class=" ms-3">
                                                <label class="form-check-label d-flex align-items-center">
                                                    <input type="checkbox" id="sites_checkbox" name="sites_checkbox" value="no_one" class="form-check-input me-2">
                                                    No One
                                                </label>
                                            </div>
                                            <div id="sites_assignee_div" class="mt-2 only-one">
                                                <select name="sites_assignee[]" multiple class="select-modal-users" {{isset($locations) && count($locations) > 0 ? 'required' : ''}}>
                                                    @foreach ($headOffice->users as $u)
                                                        @if ($u->user_id != $headOfficeUser->user_id)
                                                            <option value="{{ $u->id }}">
                                                                {{ $u->user->name }}
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- <select name="delete_action" class="form-select delete_action">
                                                        <option value="1">Assign cases specific user(s)</option>
                                                        <option value="2">Auto Assign Based on profiles</option>
                                                    </select>

                                                    <div class="specific_user my-2">
                                                        <h6>Select user(s)</h6>
                                                        <select name="specific_users[]"  multiple class="select-modal-users" >
                                                            @foreach ($headOffice->users as $u)
                                                            @if ($u->id != $headOfficeUser->id)
                                                                <option value="{{ $u->id }}" >
                                                                    {{ $u->user->name }}
                                                                </option>
                                                                
                                                            @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="specific_profile mb-2" style="display: none;">
                                                        <h6>Select profile(s)</h6>
                                                        <select name="specific_profiles[]"  multiple class="select-modal-users" >
                                                            @foreach ($headOffice->head_office_user_profiles as $p)
                                                                <option value="{{ $p->id }}" >
                                                                    {{ $p->profile_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div> --}}
                                    </div>
                                    <div class="d-flex justify-content-center" style="margin-top: 60px">
                                        <button type="submit"
                                            class="btn btn-info btn-submit-del inline-block mb-0" style="width: 200px;">Delete</button>
                                    </div>
                                </div>

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

            </div>
        </div>
        <div class="tab-pane fade" id="case-manager" role="tabpanel" aria-labelledby="case-manager-tab">
            @include('layouts.user.user_setting.case_manager')
        </div>
        <div class="tab-pane fade" id="access-rights" role="tabpanel" aria-labelledby="access-rights-tab">
            @include('layouts.user.user_setting.access_rights')
        </div>
        <div class="tab-pane fade" id="assigned-locations" role="tabpanel" aria-labelledby="assigned-locations-tab">
            @include('layouts.user.user_setting.assigned_locations')
        </div>
        <div class = "tab-pane fade" id="assigned-graphs" role="tabpanel" aria-labelledby="assigned-graphs-tab">
            @include('layouts.user.user_setting.assigned_graphs')
        </div>
        <div class = "tab-pane fade" id="assigned-task" role="tabpanel" aria-labelledby="assigned-task-tab">
            @include('layouts.user.user_setting.user_task_settings')
        </div>
    </div>
    <div class="w-50">

    </div>



@endsection



@php
    $assingedLocations = isset($headOfficeUser->assigned_locations) ? json_decode($headOfficeUser->assigned_locations) : [];
@endphp


@section('scripts')
    <script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
    <script>

        const selectedValuesLocations = @json($assingedLocations);
        // Tree structure start
        const options = @json($headOffice->getOrganisationTree());
        const domEl = document.querySelector('.treeselect')
        const treeselect = new Treeselect({
        parentHtmlContainer: domEl,
        value: selectedValuesLocations,
        options: options,
        alwaysOpen: false,
        appendToBody: true,
        listSlotHtmlComponent: null,
        disabled: false,
        emptyText: 'No data text',
        showCount:true,
        isGroupedValue:true,
        isIndependentNodes:true
        })
        treeselect.srcElement.addEventListener('input', (e) => {
        $('#selectedValuesLocations').val(e.detail)
        })
    // Tree structure end
    
    $(document).ready(function() {
            $('#selectedValuesLocations').val(selectedValuesLocations);
            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 add_email(element, id) {
            var email_div = $('#email_div');
            $(email_div).append(`
                <div class="contact-item">
                    <div class="form-label">Email:</div>
                    <div class="form-value">
                        <input type="text" class="contact-input" placeholder="Add email" value=""
                        onfocusout="updateEmail(${id},this,undefined)">
                    </div>
                </div>
            `);
        }

        function add_phone(element, id) {
            var phone_div = $('#phone_div');
            $(phone_div).append(`
                <div class="contact-item">
                    <div class="form-label">Phone:</div>
                    <div class="form-value">
                        <input type="text" class="contact-input phone" placeholder="Add a phone number" value=""
                        onfocusout="updatePhone(${id},this,undefined)">
                    </div>
                </div>`
            );

            // Initialize phone input for the new element
            $(phone_div).find('.phone').last().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@\"]+(\.[^<script>()[\]\\.,;:\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_div = $('#email_div');
            console.log(data, "data")
            $.post(route, data)
                .then(function(response) {
                    $(element).closest('.contact-item').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_div).append(`
                            <div class="contact-item">
                                <div class="form-label">Email:</div>
                                <div class="form-value">
                                    <input type="text" class="contact-input" placeholder="Add email" 
                                    id="email_${response.data.id}" value="${response.data.contact}"
                                    onfocusout="updateEmail(${response.data.id},this,${response.data.id})">
                                    <a href="${r}" class="delete-button" data-msg="Are you sure you want to delete this contact?">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>`
                        );
                    }
                })
                .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('Phone validation:', $(element).intlTelInput("isValidNumber"), data)
            
            // Check if the element has intlTelInput initialized
            if (typeof $(element).intlTelInput === 'function') {
                if ($(element).intlTelInput("isValidNumber") == false || $(element).intlTelInput("isValidNumber") == undefined) {
                    alertify.notify('Invalid Phone', 'error')
                    return;
                }
            } else {
                // If intlTelInput is not initialized, just check if value is not empty
                if (!value || value.trim() === '') {
                    alertify.notify('Please enter a phone number', 'error')
                    return;
                }
            }
            
            console.log('Sending phone data:', data)
            $.post(route, data)
                .then(function(response) {
                    console.log('Phone response:', response)
                    if (response.result) {
                        alertify.notify(response.msg, 'success');
                        // Don't reload the page, just update the UI
                        var r = baseRoute.replace('REPLACE_ID', response.data.id).replace('REPLACE_HOU_ID', response.data.head_office_user_id);
                        $(element).closest('.contact-item').replaceWith(`
                            <div class="contact-item">
                                <div class="form-label">Phone:</div>
                                <div class="form-value">
                                    <input type="text" class="contact-input phone" placeholder="Add a phone number"
                                        value="${response.data.contact}"
                                        onfocusout="updatePhone(${response.data.head_office_user_id},this,${response.data.id})"
                                        style="background: ${response.data.is_phone_hidden ? 'rgb(239 239 239 / 78%)' : ''}">
                                    <a href="${r}" class="delete-button" data-msg="Are you sure you want to delete this contact?">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>`
                        );
                    } else {
                        alertify.notify(response.msg || 'Failed to save phone number', 'error')
                    }
                })
                .catch(function(error) {
                    console.log('Phone error:', error)
                    alertify.notify('Error occurred while saving phone number', 'error')
                })
        }

        function add_area(id, element) {
            const area_div = $('#area_div');
            
            $(area_div).append(`
                <div class="expertise-row" id="new_area">
                    <div class="expertise-fields">
                        <div class="expertise-field">
                            <label class="expertise-field-label">Area</label>
                            <input type="text" class="expertise-input" placeholder="Enter area of expertise" 
                            id="area" value="" onfocusout="focusOnLevel()">
                        </div>
                        <div class="expertise-field">
                            <label class="expertise-field-label">Level</label>
                            <input type="text" class="expertise-input" placeholder="Enter proficiency level" 
                            id="level" value="" onfocusout="updateArea(${id},this,undefined)">
                        </div>
                    </div>
                </div>`
            );
        }

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

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

            const area_values = $('#area_values');
            var route = $('#update_area_route').val();
            
            console.log('Area update data:', { area: area, level: level, id: id, area_id: area_id });
            
            if (area) {
                var data = {
                    id: id,
                    area_id: area_id,
                    area: area,
                    level: level,
                    _token: $('#_token').val()
                };
                console.log('Sending area data:', data);
                $.post(route, data)
                    .then(function(response) {
                        console.log('Area response:', response);
                        if (response.result) {
                            // Construct the delete route properly
                            var deleteRoute = "{{ route('head_office.delete_area_user_settings', ['id' => 'REPLACE_ID', 'hou_id' => 'REPLACE_HOU_ID']) }}"
                                .replace('REPLACE_ID', response.data.id)
                                .replace('REPLACE_HOU_ID', response.data.head_office_user_id);
                            
                            $(area_values).append(`
                                <div class="expertise-row" id="${response.data.id}">
                                    <div class="expertise-fields">
                                        <div class="expertise-field">
                                            <label class="expertise-field-label">Area</label>
                                            <input type="text" class="expertise-input" placeholder="Enter area of expertise" 
                                            value="${response.data.area}">
                                        </div>
                                        <div class="expertise-field">
                                            <label class="expertise-field-label">Level</label>
                                            <input type="text" class="expertise-input" placeholder="Enter proficiency level" 
                                            value="${response.data.level}">
                                        </div>
                                    </div>
                                    <div class="expertise-actions">
                                        <a href="${deleteRoute}"
                                            class="expertise-delete-button" data-msg="Are you sure you want to delete this area?">
                                            <i class="fa-solid fa-trash"></i>
                                            <span>Delete</span>
                                        </a>
                                    </div>
                                </div>`
                            );
                            $(element).closest('.expertise-row').remove();
                            alertify.notify('Area added successfully', 'success');
                        } else {
                            alertify.notify(response.msg || 'Failed to save area', 'error');
                        }
                    })
                    .catch(function(error) {
                        console.log('Area error:', error);
                        alertify.notify('Error occurred while saving area', 'error');
                    })
            } else {
                $(element).closest('.expertise-row').find('#area').focus();
                alertify.notify('Please enter an area name', 'warning');
            }
        }
    </script>

    <script>
       $(document).ready(function() {
    // Initialize Select2 when modal is opened
    $(document).on("shown.bs.modal", ".modal", function() {
        $(this).find("select.select-modal-users").each(function() {
            let $select = $(this);
            let $modalContent = $select.closest(".modal-content"); // Ensure correct modal-content
            
            // Initialize Select2 with the correct dropdown parent
            $select.select2({
                dropdownParent: $modalContent
            });
        });
    });
});

    </script>

    <script>

        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));
            }

        }



        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);
            }
        })

        // Handle investigator checkbox show/hide functionality
        $('#investigator_checkbox').on('change', function() {
            const investigatorDiv = $('#investigator_div');
            const investigatorSelect = investigatorDiv.find('select');
            const originalRequired = investigatorSelect.attr('data-original-required');
            
            if ($(this).is(':checked')) {
                investigatorDiv.hide();
                investigatorSelect.removeAttr('required');
                investigatorSelect.val(['no_one']).trigger('change');
            } else {
                investigatorDiv.show();
                if (originalRequired === 'required') {
                    investigatorSelect.attr('required', 'required');
                }
                investigatorSelect.val([]).trigger('change');
            }
        });

        // Handle sites checkbox show/hide functionality
        $('#sites_checkbox').on('change', function() {
            const sitesDiv = $('#sites_assignee_div');
            const sitesSelect = sitesDiv.find('select');
            const originalRequired = sitesSelect.attr('data-original-required');
            
            if ($(this).is(':checked')) {
                sitesDiv.hide();
                sitesSelect.removeAttr('required');
                sitesSelect.val(['no_one']).trigger('change');
            } else {
                sitesDiv.show();
                if (originalRequired === 'required') {
                    sitesSelect.attr('required', 'required');
                }
                sitesSelect.val([]).trigger('change');
            }
        });

        // Handle case task assignment radio buttons
        $('input[name="case_task_assignment_type"]').on('change', function() {
            const caseTaskDiv = $('#case_task_assignee_div');
            const caseTaskSelect = caseTaskDiv.find('select');
            const originalRequired = caseTaskSelect.attr('data-original-required');
            
            if ($(this).val() === 'case_handler') {
                caseTaskDiv.hide();
                caseTaskSelect.removeAttr('required');
                caseTaskSelect.val([]).trigger('change');
            } else if ($(this).val() === 'specific_user') {
                caseTaskDiv.show();
                if (originalRequired === 'required') {
                    caseTaskSelect.attr('required', 'required');
                }
            }
        });

        // Store original required attributes on page load
        $(document).ready(function() {
            $('#investigator_div select').attr('data-original-required', $('#investigator_div select').attr('required') || '');
            $('#sites_assignee_div select').attr('data-original-required', $('#sites_assignee_div select').attr('required') || '');
            $('#case_task_assignee_div select').attr('data-original-required', $('#case_task_assignee_div select').attr('required') || '');
        });
    </script>
@endsection