@extends('examples.modern-layout-v2')
@section('title', __('messages.user_page.add user'))
@section('user', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="userFormData()" x-init="init()">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.user_page.add user')}}</h2>
                <p class="text-gray-600">{{__('messages.user_page.add_user_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('users.index') }}" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-300 hover:text-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif text-base">arrow_back</span>
                {{__('messages.message_page.go_back')}}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200 relative" :class="{ 'opacity-50 pointer-events-none': loading }">
        <!-- Loading Overlay -->
        <div x-show="loading" x-cloak class="absolute inset-0 bg-white/80 backdrop-blur-sm rounded-2xl flex items-center justify-center z-50">
            <div class="flex flex-col items-center">
                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600 mb-4"></div>
                <p class="text-gray-700 font-medium">{{__('messages.common.saving')}}</p>
            </div>
        </div>

        <form id="user_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('users.store') }}" enctype="multipart/form-data" class="space-y-6" @submit="loading = true">
            @if(\App\Helpers\ServerHelper::isApiServer() && request()->query('city'))
                <input type="hidden" name="city" value="{{ request()->query('city') }}">
            @endif
            @if(request()->query('building'))
                <input type="hidden" name="building" value="{{ request()->query('building') }}">
            @endif
            @csrf
            
            @if($errors->any())
                <div class="bg-red-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-red-500 rounded-xl p-5 shadow-sm">
                    <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <div class="flex-shrink-0">
                            <span class="material-icons text-red-600 text-2xl">error_outline</span>
                        </div>
                        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                            <h5 class="text-red-800 font-semibold text-base mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.errors.validation_errors')}}</h5>
                            <ul class="list-disc @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') list-inside text-right @else list-inside text-left @endif text-red-700 text-sm space-y-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Name and Username -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.name')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            value="{{ old('name') }}"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('name') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.user_page.enter_name')}}"
                            required
                        >
                    </div>
                    @error('name')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Username -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.username')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input 
                            type="text" 
                            id="username" 
                            name="username" 
                            value="{{ old('username') }}"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('username') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.user_page.enter_username')}}"
                            required
                        >
                    </div>
                    @error('username')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <!-- Password and Phone Number -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Password -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.password')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('password') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.user_page.enter_password')}}"
                            required
                        >
                    </div>
                    @error('password')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Phone Number -->
                <div>
                    <label for="phone_number" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.phone_number')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input 
                            type="text" 
                            id="phone_number" 
                            name="phone_number" 
                            value="{{ old('phone_number') }}"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('phone_number') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.user_page.enter_phone_number')}}"
                            required
                        >
                    </div>
                    @error('phone_number')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <!-- User Label and Image -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- User Label -->
                <div>
                    <label for="user_label_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.user_label')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select 
                            id="user_label_id" 
                            name="user_label_id" 
                            class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('user_label_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="">{{__('messages.user_page.select_user_label')}}</option>
                            @php
                                $user = auth()->user();
                                $isSuperAdmin = $user && $user->hasRole('Super-Admin');
                                $isSiteAdmin = false;
                                if ($user && !$isSuperAdmin) {
                                    $userRole = $user->roles->first();
                                    if ($userRole) {
                                        $hasAdminColumn = \Schema::hasColumn('roles', 'is_admin_role');
                                        if ($hasAdminColumn) {
                                            $adminRoleValue = $userRole->getAttribute('is_admin_role');
                                            if ($adminRoleValue !== null) {
                                                $isSiteAdmin = ($adminRoleValue == 1 || $adminRoleValue === true || $adminRoleValue === '1');
                                            }
                                        }
                                        if (!$isSiteAdmin && $userRole->name) {
                                            $roleNameLower = strtolower($userRole->name);
                                            if (strpos($roleNameLower, 'site admin') !== false || (strpos($roleNameLower, 'admin') !== false && $roleNameLower !== 'super-admin' && $roleNameLower !== 'super admin' && strpos($roleNameLower, 'administrator') === false)) {
                                                $isSiteAdmin = true;
                                            }
                                        }
                                    }
                                }
                                $labels = \App\Models\UserLabel::where('is_active', 1)->get();
                                if ($isSiteAdmin) {
                                    // Filter out Admin and Manager labels for Site Admin
                                    $labels = $labels->filter(function($label) {
                                        $labelText = strtolower($label->label_text);
                                        return $labelText !== 'admin' && $labelText !== 'manager';
                                    });
                                }
                            @endphp
                            @foreach ($labels as $label)
                                <option value="{{$label->id}}" {{old('user_label_id') == $label->id ? 'selected' : ''}}>{{$label->label_text}}</option>
                            @endforeach
                        </select>
                    </div>
                    @error('user_label_id')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Image -->
                <div>
                    <label for="image" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.image')}}
                    </label>
                    <div class="relative">
                        <input 
                            type="file" 
                            id="image" 
                            name="image" 
                            accept="image/*"
                            class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 @error('image') border-red-500 @enderror"
                        >
                    </div>
                    @error('image')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <!-- City, Location and Role -->
            @if($currentBuildingId === 'all')
            @if(\App\Helpers\ServerHelper::isApiServer() && !empty($cities))
            <!-- City Dropdown (only on stage/prod) -->
            <div class="mb-6">
                <label for="city_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.settings.city')}} <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <select 
                        id="city_id" 
                        name="city_id" 
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('city_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                        onchange="filterLocationsByCity(this.value)"
                    >
                        <option value="">{{__('messages.user_page.select_city') ?? 'Select City'}}</option>
                        @foreach ($cities as $city)
                            <option value="{{$city->id}}" {{old('city_id', $selectedCityId) == $city->id ? 'selected' : ''}}>{{$city->name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('city_id')
                    <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                        {{ $message }}
                    </p>
                @enderror
            </div>
            @endif
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Location -->
                <div>
                    <label for="location_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_page.location')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select 
                            id="location_id" 
                            name="location_id" 
                            class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('location_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="">{{__('messages.user_page.select_location')}}</option>
                            @php
                                $currentUser = auth()->user();
                                $isSuperAdmin = $currentUser && $currentUser->hasRole('Super-Admin');
                                $isAdministrator = false;
                                $isSiteAdmin = false;
                                if ($currentUser && !$isSuperAdmin) {
                                    $userRole = $currentUser->roles->first();
                                    if ($userRole) {
                                        $hasAdministratorColumn = \Schema::hasColumn('roles', 'is_administrator_role');
                                        if ($hasAdministratorColumn) {
                                            $administratorRoleValue = $userRole->getAttribute('is_administrator_role');
                                            if ($administratorRoleValue !== null) {
                                                $isAdministrator = ($administratorRoleValue == 1 || $administratorRoleValue === true || $administratorRoleValue === '1');
                                            }
                                        }
                                        // Also check by role name
                                        if (!$isAdministrator && $userRole->name) {
                                            $roleNameLower = strtolower($userRole->name);
                                            $isAdministrator = strpos($roleNameLower, 'administrator') !== false;
                                        }
                                        
                                        // Check if user is Site Admin (has admin role but not Super-Admin and not Administrator)
                                        if (!$isAdministrator) {
                                            $hasAdminColumn = \Schema::hasColumn('roles', 'is_admin_role');
                                            if ($hasAdminColumn) {
                                                $adminRoleValue = $userRole->getAttribute('is_admin_role');
                                                if ($adminRoleValue !== null) {
                                                    $isSiteAdmin = ($adminRoleValue == 1 || $adminRoleValue === true || $adminRoleValue === '1');
                                                }
                                            }
                                            // Also check by role name
                                            if (!$isSiteAdmin && $userRole->name) {
                                                $roleNameLower = strtolower($userRole->name);
                                                if (strpos($roleNameLower, 'site admin') !== false || (strpos($roleNameLower, 'admin') !== false && $roleNameLower !== 'super-admin' && $roleNameLower !== 'super admin' && strpos($roleNameLower, 'administrator') === false)) {
                                                    $isSiteAdmin = true;
                                                }
                                            }
                                        }
                                    }
                                }
                            @endphp
                            @if($isSuperAdmin)
                            <option value="all" id="all_buildings_option" {{old('location_id') == 'all' ? 'selected' : ''}}>{{__('messages.common.all_buildings')}}</option>
                            @elseif($isAdministrator || $isSiteAdmin)
                            <option value="all" id="all_buildings_option" style="display:none;" {{old('location_id') == 'all' ? 'selected' : ''}}>{{__('messages.common.all_buildings')}}</option>
                            @endif
                            @foreach ($locations as $location)
                                <option value="{{$location->id}}" data-city-id="{{$location->city_id ?? ''}}" {{old('location_id') == $location->id ? 'selected' : ''}}>{{$location->translated_name ?? $location->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    @error('location_id')
                        <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Role (dynamically loaded) -->
                <div id="role_container">
                    <!-- Role dropdown will be dynamically added here by JavaScript -->
                </div>
            </div>
            @else
            <input type="hidden" name="location_id" value="{{$currentBuildingId}}">
            <div>
                <label for="role_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.user_page.role')}} <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <select 
                        id="role_id" 
                        name="role" 
                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('role') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                        <option value="">{{__('messages.user_page.select_role')}}</option>
                        @foreach ($roles as $role)
                            <option value="{{$role->id}}" {{old('role') == $role->id ? 'selected' : ''}}>{{$role->name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('role')
                    <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                        {{ $message }}
                    </p>
                @enderror
            </div>
            @endif

            <!-- Submit Button -->
            <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start @else justify-end @endif pt-4 border-t border-gray-100">
                <button 
                    type="submit" 
                    :disabled="loading"
                    class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" dir="ltr"
                >
                    <span x-show="!loading" class="material-icons mr-2">save</span>
                    <span x-show="loading" class="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></span>
                    <span x-text="loading ? '{{__('messages.common.saving')}}...' : '{{__('messages.common.save')}}'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// Filter locations by selected city (only on stage/prod)
function filterLocationsByCity(cityId) {
    const locationSelect = document.getElementById('location_id');
    if (!locationSelect || !cityId) return;
    
    // Get all location options
    const allOptions = Array.from(locationSelect.querySelectorAll('option'));
    
    // Hide/show options based on city
    allOptions.forEach(option => {
        if (option.value === '' || option.value === 'all') {
            // Keep placeholder and "all" options visible
            option.style.display = '';
        } else {
            const locationCityId = option.getAttribute('data-city-id');
            if (locationCityId == cityId) {
                option.style.display = '';
            } else {
                option.style.display = 'none';
            }
        }
    });
    
    // Reset selection if current selection is not in the filtered city
    const currentValue = locationSelect.value;
    const currentOption = locationSelect.querySelector(`option[value="${currentValue}"]`);
    if (currentOption && currentOption.style.display === 'none') {
        locationSelect.value = '';
    }
}

function userFormData() {
    return {
        loading: false,
        init() {
            @if($currentBuildingId === 'all')
            // Filter locations by city on page load if city is selected
            @if(\App\Helpers\ServerHelper::isApiServer() && !empty($cities) && $selectedCityId)
            const citySelect = document.getElementById('city_id');
            if (citySelect && citySelect.value) {
                filterLocationsByCity(citySelect.value);
            }
            @endif
            
            // Handle role filtering based on location selection
            const locationSelect = document.getElementById('location_id');
            const roleContainer = document.getElementById('role_container');
            
            function loadRolesForLocation(locationId, excludeSuperAdmin = false) {
                if (!locationId || locationId === '') {
                    roleContainer.innerHTML = '';
                    return;
                }
                
                // Show loading state
                roleContainer.innerHTML = `
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.user_page.role')}} <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl bg-white" disabled>
                                <option>@if(\App::currentLocale() == 'iq') جارٍ تحميل الأدوار... @elseif(\App::currentLocale() == 'ku') بارکردنی ڕۆڵەکان... @else Loading roles... @endif</option>
                            </select>
                        </div>
                    </div>
                `;
                
                // Get user label ID for Phase 2 filtering
                const userLabelSelect = document.getElementById('user_label_id');
                const userLabelId = userLabelSelect ? userLabelSelect.value : null;
                
                // Fetch roles for selected location (Phase 2: include user_label_id)
                let fetchUrl = '{{ route("get_roles_by_location") }}?location_id=' + locationId;
                if (userLabelId) {
                    fetchUrl += '&user_label_id=' + userLabelId;
                }
                console.log('Fetching roles from:', fetchUrl);
                console.log('Location ID:', locationId);
                console.log('User Label ID:', userLabelId);
                
                fetch(fetchUrl, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                    .then(response => {
                        console.log('Response received:', response.status, response.statusText);
                        console.log('Response headers:', response.headers.get('content-type'));
                        // Check if response is OK before parsing JSON
                        if (!response.ok) {
                            return response.text().then(text => {
                                console.error('HTTP error fetching roles:', response.status, response.statusText, text);
                                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                            });
                        }
                        // Check if response is actually JSON
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            return response.text().then(text => {
                                console.error('Response is not JSON:', contentType, text);
                                throw new Error('Server returned non-JSON response');
                            });
                        }
                        return response.json();
                    })
                    .then(roles => {
                        console.log('Roles received:', roles);
                        
                        // Validate that roles is an array
                        if (!Array.isArray(roles)) {
                            console.error('Roles response is not an array:', roles);
                            throw new Error('Invalid response format from server');
                        }
                        
                        // Filter out Super-Admin if checkbox is checked
                        if (excludeSuperAdmin) {
                            roles = roles.filter(role => role.name !== 'Super-Admin');
                        }
                        
                        console.log('Roles after filtering:', roles);
                        
                        let roleHtml = `
                            <div>
                                <label for="role_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    {{__('messages.user_page.role')}} <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select 
                                        id="role_id" 
                                        name="role" 
                                        class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                                        required
                                    >
                                        <option value="">@if(\App::currentLocale() == 'iq') حدد الدور @elseif(\App::currentLocale() == 'ku') هەڵبژاردنی ڕۆڵ @else Select Role @endif</option>
                        `;
                        
                        if (roles.length > 0) {
                            roles.forEach(role => {
                                roleHtml += `<option value="${role.id}">${role.name}</option>`;
                            });
                        } else {
                            roleHtml += `<option value="" disabled>@if(\App::currentLocale() == 'iq') لا توجد أدوار متاحة لهذا الموقع @elseif(\App::currentLocale() == 'ku') هیچ ڕۆڵێک بەردەست نییە بۆ ئەم شوێنە @else No roles available for this location @endif</option>`;
                        }
                        
                        roleHtml += `
                                    </select>
                                </div>
                            </div>
                        `;
                        
                        roleContainer.innerHTML = roleHtml;
                    })
                    .catch(error => {
                        console.error('Error fetching roles:', error);
                        roleContainer.innerHTML = `
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    {{__('messages.user_page.role')}} <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select class="block w-full px-4 py-2.5 pr-10 border-2 border-red-200 rounded-xl bg-white" disabled>
                                        <option>@if(\App::currentLocale() == 'iq') خطأ في تحميل الأدوار @elseif(\App::currentLocale() == 'ku') هەڵە لە بارکردنی ڕۆڵەکان @else Error loading roles @endif</option>
                                    </select>
                                </div>
                                <p class="mt-1 text-xs text-red-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                    @if(\App::currentLocale() == 'iq')
                                        خطأ في تحميل الأدوار
                                    @elseif(\App::currentLocale() == 'ku')
                                        هەڵە لە بارکردنی ڕۆڵەکان
                                    @else
                                        Error loading roles
                                    @endif
                                </p>
                                <p class="mt-1 text-xs text-gray-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif" id="role_error_details">
                                    ${error.message || 'Unknown error'}
                                </p>
                            </div>
                        `;
                    });
            }
            
            if (locationSelect) {
                locationSelect.addEventListener('change', function() {
                    loadRolesForLocation(this.value, false);
                });
                
                // Load roles for initial location if selected
                if (locationSelect.value) {
                    loadRolesForLocation(locationSelect.value, false);
                }
            }
            
            // Phase 2: Reload roles when user label changes (for Administrator role)
            const userLabelSelect = document.getElementById('user_label_id');
            if (userLabelSelect) {
                userLabelSelect.addEventListener('change', function() {
                    // Show/hide "All Buildings" option for Administrator role and Site Admin
                    const allBuildingsOption = document.getElementById('all_buildings_option');
                    if (allBuildingsOption) {
                        const selectedLabelId = this.value;
                        if (selectedLabelId) {
                            // Get the label text
                            const selectedOption = this.options[this.selectedIndex];
                            const labelText = selectedOption ? selectedOption.text.toLowerCase() : '';
                            
                            // Show "All Buildings" for Admin, Manager, or Reporter labels
                            // For Administrator: Admin, Manager
                            // For Site Admin: Reporter
                            if (labelText === 'admin' || labelText === 'manager' || labelText === 'reporter') {
                                allBuildingsOption.style.display = '';
                                // If no location is selected, select "All Buildings" by default
                                const locationSelect = document.getElementById('location_id');
                                if (locationSelect && !locationSelect.value) {
                                    allBuildingsOption.selected = true;
                                }
                            } else {
                                allBuildingsOption.style.display = 'none';
                                // If "All Buildings" was selected, clear the selection
                                const locationSelect = document.getElementById('location_id');
                                if (locationSelect && locationSelect.value === 'all') {
                                    locationSelect.value = '';
                                }
                            }
                        } else {
                            allBuildingsOption.style.display = 'none';
                        }
                    }
                    
                    // Reload roles if location is already selected
                    const locationSelect = document.getElementById('location_id');
                    if (locationSelect && locationSelect.value) {
                        loadRolesForLocation(locationSelect.value, false);
                    }
                });
            }
            @endif
            @php echo ''; @endphp
            
        }
    }
}
</script>
@endpush
@endsection